v0.4.0

.changeset/config.json

@@ -7,5 +7,5 @@
   "access": "public",
   "baseBranch": "main",
   "updateInternalDependencies": "patch",
-  "ignore": ["ui-playground", "docs"]
+  "ignore": ["docs"]
 }

.vscode/settings.json

@@ -8,21 +8,27 @@
   "editor.gotoLocation.multipleDefinitions": "goto",
   "cSpell.words": [
     "astrojs",
+    "checkmark",
     "createtoast",
     "dismissable",
     "Eleventy",
     "fira",
     "fontsource",
     "frontmatter",
+    "heroicons",
     "iconify",
     "louisescher",
     "Matthiesen",
     "onest",
     "pathe",
+    "polyline",
+    "searchselect",
     "socialproof",
     "studiocms",
+    "themetoggle",
     "Thum",
     "tsconfigs",
+    "vite",
     "withstudiocms"
   ]
 }

biome.json

@@ -34,6 +34,9 @@
       "recommended": true,
       "suspicious": {
         "noExplicitAny": "warn"
+      },
+      "style": {
+        "noNonNullAssertion": "off"
       }
     }
   },

docs/astro.config.mts

@@ -1,5 +1,6 @@
 import starlight from '@astrojs/starlight';
 import onestWoff2 from '@fontsource-variable/onest/files/onest-latin-wght-normal.woff2?url';
+import ui from '@studiocms/ui';
 import { defineConfig, envField } from 'astro/config';
 import rehypePluginKit from './src/plugins/rehypePluginKit';
 
@@ -158,10 +159,6 @@ export default defineConfig({
 						{
 							label: 'Installation',
 							link: 'docs/',
-							badge: {
-								text: 'Updated!',
-								variant: 'success',
-							},
 						},
 						{
 							label: 'Release Notes',
@@ -174,7 +171,14 @@ export default defineConfig({
 					],
 				},
 				{
-					label: 'Upgrade Guides',
+					label: 'Guides',
+					autogenerate: {
+						directory: 'docs/guides',
+						collapsed: true,
+					},
+				},
+				{
+					label: 'Upgrading StudioCMS',
 					autogenerate: {
 						directory: 'docs/upgrade-guides',
 						collapsed: true,
@@ -196,5 +200,6 @@ export default defineConfig({
 				},
 			],
 		}),
+		ui()
 	],
 });

docs/src/content/docs/docs/changelog.md

@@ -8,6 +8,10 @@ editUrl: false
 This document contains release notes for the `@studiocms/ui` package.
 For more information, see the [CHANGELOG file](https://github.com/withstudiocms/ui/blob/main/packages/studiocms_ui/CHANGELOG.md)
 
+## 0.3.2
+
+- [#33](https://github.com/withstudiocms/ui/pull/33) [`58e223c`](https://github.com/withstudiocms/ui/commit/58e223c861321e95c8db064be67e28e4563b4ff3) Thanks [@louisescher](https://github.com/louisescher)! - Fix tabs not being displayed correctly & dividers displaying backgrounds for empty slots
+
 ## 0.3.1
 
 - [#27](https://github.com/withstudiocms/ui/pull/27) [`6b0b58f`](https://github.com/withstudiocms/ui/commit/6b0b58fbbe2a92d4bce7fa44c587164b8f2f53e5) Thanks [@louisescher](https://github.com/louisescher)! - Add pathe as a dependency to deal with path issues on Windows

docs/src/content/docs/docs/components/accordion.mdx

@@ -0,0 +1,139 @@
+---
+title: Accordion
+sidebar:
+  badge:
+    text: New!
+    variant: success
+---
+
+import { Tabs, TabItem } from '@astrojs/starlight/components';
+import PreviewCard from '~/components/PreviewCard.astro';
+import { Accordion, AccordionItem } from '@studiocms/ui/components';
+
+An accordion component. Used to create small pockets of additional information.
+
+## Usage
+
+<Tabs>
+  <TabItem label="Preview">
+    <PreviewCard>
+      <Accordion>
+        <AccordionItem open>
+          <div slot="summary">This is the summary</div>
+          <div>These are the details</div>
+        </AccordionItem>
+        <AccordionItem>
+          <div slot="summary">This is the 2nd summary</div>
+          <div>These are the 2nd details</div>
+        </AccordionItem>
+      </Accordion>
+    </PreviewCard>
+  </TabItem>
+  <TabItem label="Code">
+    ```astro showLinenumbers title="AccordionExample.astro"
+    ---
+    import { Accordion, AccordionItem } from '@studiocms/ui/components';
+    ---
+
+    <Accordion>
+      <AccordionItem open>
+        <div slot="summary">This is the summary</div>
+        <div>These are the details</div>
+      </AccordionItem>
+      <AccordionItem>
+        <div slot="summary">This is the 2nd summary</div>
+        <div>These are the 2nd details</div>
+      </AccordionItem>
+    </Accordion>
+    ```
+  </TabItem>
+</Tabs>
+
+### Opening an item by default
+
+You can pass the `open` prop to any `<AccordionItem>` to have it be open by default, as seen above in the example.
+
+### Styles
+
+The accordion component has multiple different styles:
+
+- `outlined` (Default)
+- `separated`
+- `filled`
+- `blank`
+
+They can be used via the `style` prop on the accordion parent. Here's an accordion with the `filled` style:
+
+<Tabs>
+  <TabItem label="Preview">
+    <PreviewCard>
+      <Accordion style="filled">
+        <AccordionItem open>
+          <div slot="summary">This is the summary</div>
+          <div>These are the details</div>
+        </AccordionItem>
+        <AccordionItem>
+          <div slot="summary">This is the 2nd summary</div>
+          <div>These are the 2nd details</div>
+        </AccordionItem>
+      </Accordion>
+    </PreviewCard>
+  </TabItem>
+  <TabItem label="Code">
+    ```astro showLinenumbers title="AccordionStyleExample.astro"
+    ---
+    import { Accordion, AccordionItem } from '@studiocms/ui/components';
+    ---
+
+    <Accordion style="filled">
+      <AccordionItem open>
+        <div slot="summary">This is the summary</div>
+        <div>These are the details</div>
+      </AccordionItem>
+      <AccordionItem>
+        <div slot="summary">This is the 2nd summary</div>
+        <div>These are the 2nd details</div>
+      </AccordionItem>
+    </Accordion>
+    ```
+  </TabItem>
+</Tabs>
+
+### Multiple Open Items
+
+By default, users can open multiple items in the accordion at once. You can change this behavior by setting the `multipleOpen` prop on the `<Accordion>` element to false:
+
+<Tabs>
+  <TabItem label="Preview">
+    <PreviewCard>
+      <Accordion multipleOpen={false}>
+        <AccordionItem open>
+          <div slot="summary">This is the summary</div>
+          <div>These are the details</div>
+        </AccordionItem>
+        <AccordionItem>
+          <div slot="summary">This is the 2nd summary</div>
+          <div>These are the 2nd details</div>
+        </AccordionItem>
+      </Accordion>
+    </PreviewCard>
+  </TabItem>
+  <TabItem label="Code">
+    ```astro showLinenumbers title="AccordionStyleExample.astro"
+    ---
+    import { Accordion, AccordionItem } from '@studiocms/ui/components';
+    ---
+
+    <Accordion multipleOpen={false}>
+      <AccordionItem open>
+        <div slot="summary">This is the summary</div>
+        <div>These are the details</div>
+      </AccordionItem>
+      <AccordionItem>
+        <div slot="summary">This is the 2nd summary</div>
+        <div>These are the 2nd details</div>
+      </AccordionItem>
+    </Accordion>
+    ```
+  </TabItem>
+</Tabs>

docs/src/content/docs/docs/components/badge.mdx

@@ -0,0 +1,132 @@
+---
+title: Badge
+sidebar:
+  badge:
+    text: New!
+    variant: success
+---
+
+import { Badge } from '@studiocms/ui/components';
+import { Tabs, TabItem } from '@astrojs/starlight/components';
+import PreviewCard from '~/components/PreviewCard.astro';
+
+A button component with support for different colors, sizes and states out of the box. You can also customize it to your needs!
+
+## Usage
+
+<Tabs>
+  <TabItem label="Preview">
+    <PreviewCard>
+      <Badge label="Badge" icon="sparkles-16-solid" />
+    </PreviewCard>
+  </TabItem>
+  <TabItem label="Code">
+    ```astro showLinenumbers title="BadgeExample.astro"
+    ---
+    import { Badge } from '@studiocms/ui/components';
+    ---
+
+    <Badge label="Badge" icon="sparkles-16-solid" />
+    ```
+  </TabItem>
+</Tabs>
+
+### Colors
+
+The badge component has support for the following colors:
+
+<Tabs>
+  <TabItem label="Preview">
+    <PreviewCard>
+      <Badge label="Primary" color="primary" />
+      <Badge label="Success" color="success" />
+      <Badge label="Warning" color="warning" />
+      <Badge label="Danger" color="danger" />
+      <Badge label="Info" color="info" />
+      <Badge label="Monochrome" color="mono" />
+    </PreviewCard>
+  </TabItem>
+  <TabItem label="Code">
+    ```astro showLinenumbers title="BadgeColorExample.astro"
+    ---
+    import { Badge } from '@studiocms/ui/components';
+    ---
+
+    <Badge label="Primary" color="primary" />
+    <Badge label="Success" color="success" />
+    <Badge label="Warning" color="warning" />
+    <Badge label="Danger" color="danger" />
+    <Badge label="Info" color="info" />
+    <Badge label="Monochrome" color="mono" />
+    ```
+  </TabItem>
+</Tabs>
+
+### Variants
+
+<Tabs>
+  <TabItem label="Preview">
+    <PreviewCard>
+      <Badge label="Default" variant="default" />
+      <Badge label="Outlined" variant="outlined" />
+      <Badge label="Flat" variant="flat" />
+    </PreviewCard>
+  </TabItem>
+  <TabItem label="Code">
+    ```astro showLinenumbers title="BadgeSizeExample.astro"
+    ---
+    import { Badge } from '@studiocms/ui/components';
+    ---
+
+    <Badge label="Default" variant="default" />
+    <Badge label="Outlined" variant="outlined" />
+    <Badge label="Flat" variant="flat" />
+    ```
+  </TabItem>
+</Tabs>
+
+### Rounding
+
+You can change the badge's border-radius by setting the `rounding` prop:
+
+<Tabs>
+  <TabItem label="Preview">
+    <PreviewCard>
+      <Badge label="Full" rounding="full" />
+      <Badge label="Semi" rounding="semi" />
+    </PreviewCard>
+  </TabItem>
+  <TabItem label="Code">
+    ```astro showLinenumbers title="BadgeSizeExample.astro"
+    ---
+    import { Badge } from '@studiocms/ui/components';
+    ---
+
+    <Badge label="Full" rounding="full" />
+    <Badge label="Semi" rounding="semi" />
+    ```
+  </TabItem>
+</Tabs>
+
+### Sizes
+
+<Tabs>
+  <TabItem label="Preview">
+    <PreviewCard>
+      <Badge label="Small" size="sm" />
+      <Badge label="Medium" size="md" />
+      <Badge label="Large" size="lg" />
+    </PreviewCard>
+  </TabItem>
+  <TabItem label="Code">
+    ```astro showLinenumbers title="BadgeSizeExample.astro"
+    ---
+    import { Badge } from '@studiocms/ui/components';
+    ---
+
+    <Badge label="Small" size="sm" />
+    <Badge label="Medium" size="md" />
+    <Badge label="Large" size="lg" />
+    ```
+  </TabItem>
+</Tabs>