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,6 +8,7 @@
   "editor.gotoLocation.multipleDefinitions": "goto",
   "cSpell.words": [
     "astrojs",
+    "checkmark",
     "createtoast",
     "dismissable",
     "Eleventy",
@@ -19,8 +20,11 @@
     "Matthiesen",
     "onest",
     "pathe",
+    "polyline",
+    "searchselect",
     "socialproof",
     "studiocms",
+    "themetoggle",
     "Thum",
     "tsconfigs",
     "withstudiocms"

biome.json

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

docs/astro.config.mts

@@ -158,10 +158,6 @@ export default defineConfig({
 						{
 							label: 'Installation',
 							link: 'docs/',
-							badge: {
-								text: 'Updated!',
-								variant: 'success',
-							},
 						},
 						{
 							label: 'Release Notes',
@@ -174,7 +170,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,

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

@@ -1,51 +1,55 @@
----
-# Warning: This file is generated automatically. Do not edit!
-title: Release Notes
-description: Release notes for the @studiocms/ui package.
-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.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
-
-## 0.3.0
-
-- [#18](https://github.com/withstudiocms/ui/pull/18) [`e471e11`](https://github.com/withstudiocms/ui/commit/e471e1129a30ff2a5b019366a8eb7bbbf2abb73e) Thanks [@louisescher](https://github.com/louisescher)! - The Accessibility Update
-
-  This version of `@studiocms/ui` includes a lot of improvements to the documentation and components. The most important changes include the move to
-  an integration-based system and a massive keyboard accessibility overhaul (thanks to [HiDeoo](https://github.com/HiDeoo) for the feedback on this)!
-
-  ### Components
-
-  - Added a new `<Tabs />` component based on the tabs on the homepage.
-  - Updated the `<Card />` component to include a new "filled" style.
-
-  ### Utilities
-
-  - Moved the `ThemeHelper` class to its own category in the docs.
-
-  ### Accessibility
-
-  - Overhauled the keyboard accessibility on all components to make them adhere to the ARIA standards.
-
-## 0.1.0
-
-- [#1](https://github.com/withstudiocms/ui/pull/1) [`14be139`](https://github.com/withstudiocms/ui/commit/14be139876aa2c5ab75fea07ee338afefece6f56) Thanks [@Adammatthiesen](https://github.com/Adammatthiesen)! - Added a new footer component, made accessibility improvements and preparations for first stable release
-
-- [#1](https://github.com/withstudiocms/ui/pull/1) [`14be139`](https://github.com/withstudiocms/ui/commit/14be139876aa2c5ab75fea07ee338afefece6f56) Thanks [@Adammatthiesen](https://github.com/Adammatthiesen)! - - Update `<Input />` component's available types
-
-- [#1](https://github.com/withstudiocms/ui/pull/1) [`14be139`](https://github.com/withstudiocms/ui/commit/14be139876aa2c5ab75fea07ee338afefece6f56) Thanks [@Adammatthiesen](https://github.com/Adammatthiesen)! - Added a new searchable select component and improved accessibility for normal selects
-
-- [#1](https://github.com/withstudiocms/ui/pull/1) [`14be139`](https://github.com/withstudiocms/ui/commit/14be139876aa2c5ab75fea07ee338afefece6f56) Thanks [@Adammatthiesen](https://github.com/Adammatthiesen)! - Created new UI Library in preparations for the new StudioCMS Dashboard project
-
-- [#1](https://github.com/withstudiocms/ui/pull/1) [`14be139`](https://github.com/withstudiocms/ui/commit/14be139876aa2c5ab75fea07ee338afefece6f56) Thanks [@Adammatthiesen](https://github.com/Adammatthiesen)! - Added a theme helper and theme toggle component
-
-- [#1](https://github.com/withstudiocms/ui/pull/1) [`14be139`](https://github.com/withstudiocms/ui/commit/14be139876aa2c5ab75fea07ee338afefece6f56) Thanks [@Adammatthiesen](https://github.com/Adammatthiesen)! - Adjusted persistent toasts to include an outline for better visibility
-
-## 0.0.1
-
-- Initial Testing release
+---
+# Warning: This file is generated automatically. Do not edit!
+title: Release Notes
+description: Release notes for the @studiocms/ui package.
+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
+
+## 0.3.0
+
+- [#18](https://github.com/withstudiocms/ui/pull/18) [`e471e11`](https://github.com/withstudiocms/ui/commit/e471e1129a30ff2a5b019366a8eb7bbbf2abb73e) Thanks [@louisescher](https://github.com/louisescher)! - The Accessibility Update
+
+  This version of `@studiocms/ui` includes a lot of improvements to the documentation and components. The most important changes include the move to
+  an integration-based system and a massive keyboard accessibility overhaul (thanks to [HiDeoo](https://github.com/HiDeoo) for the feedback on this)!
+
+  ### Components
+
+  - Added a new `<Tabs />` component based on the tabs on the homepage.
+  - Updated the `<Card />` component to include a new "filled" style.
+
+  ### Utilities
+
+  - Moved the `ThemeHelper` class to its own category in the docs.
+
+  ### Accessibility
+
+  - Overhauled the keyboard accessibility on all components to make them adhere to the ARIA standards.
+
+## 0.1.0
+
+- [#1](https://github.com/withstudiocms/ui/pull/1) [`14be139`](https://github.com/withstudiocms/ui/commit/14be139876aa2c5ab75fea07ee338afefece6f56) Thanks [@Adammatthiesen](https://github.com/Adammatthiesen)! - Added a new footer component, made accessibility improvements and preparations for first stable release
+
+- [#1](https://github.com/withstudiocms/ui/pull/1) [`14be139`](https://github.com/withstudiocms/ui/commit/14be139876aa2c5ab75fea07ee338afefece6f56) Thanks [@Adammatthiesen](https://github.com/Adammatthiesen)! - - Update `<Input />` component's available types
+
+- [#1](https://github.com/withstudiocms/ui/pull/1) [`14be139`](https://github.com/withstudiocms/ui/commit/14be139876aa2c5ab75fea07ee338afefece6f56) Thanks [@Adammatthiesen](https://github.com/Adammatthiesen)! - Added a new searchable select component and improved accessibility for normal selects
+
+- [#1](https://github.com/withstudiocms/ui/pull/1) [`14be139`](https://github.com/withstudiocms/ui/commit/14be139876aa2c5ab75fea07ee338afefece6f56) Thanks [@Adammatthiesen](https://github.com/Adammatthiesen)! - Created new UI Library in preparations for the new StudioCMS Dashboard project
+
+- [#1](https://github.com/withstudiocms/ui/pull/1) [`14be139`](https://github.com/withstudiocms/ui/commit/14be139876aa2c5ab75fea07ee338afefece6f56) Thanks [@Adammatthiesen](https://github.com/Adammatthiesen)! - Added a theme helper and theme toggle component
+
+- [#1](https://github.com/withstudiocms/ui/pull/1) [`14be139`](https://github.com/withstudiocms/ui/commit/14be139876aa2c5ab75fea07ee338afefece6f56) Thanks [@Adammatthiesen](https://github.com/Adammatthiesen)! - Adjusted persistent toasts to include an outline for better visibility
+
+## 0.0.1
+
+- Initial Testing release

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>

docs/src/content/docs/docs/components/breadcrumbs.mdx

@@ -0,0 +1,83 @@
+---
+title: Breadcrumbs
+sidebar:
+  badge:
+    text: New!
+    variant: success
+---
+
+import { Breadcrumbs } from '@studiocms/ui/components';
+import { Tabs, TabItem } from '@astrojs/starlight/components';
+import PreviewCard from '~/components/PreviewCard.astro';
+
+A simple breadcrumb generator component! Used to indicate the current page's location within a navigational hierarchy.
+
+## Usage
+
+<Tabs>
+  <TabItem label="Preview">
+    <PreviewCard>
+      <Breadcrumbs 
+        segments={[
+          { label: "Home", segment: "" },
+          { label: "Docs", segment: "docs" },
+          { label: "Components", segment: "components" },
+          { label: "Breadcrumbs", segment: "breadcrumbs" },
+        ]}
+      />
+    </PreviewCard>
+  </TabItem>
+  <TabItem label="Code">
+    ```astro showLinenumbers title="ButtonExample.astro"
+    ---
+    import { Breadcrumbs } from '@studiocms/ui/components';
+    ---
+
+    <Breadcrumbs 
+      segments={[
+        { label: "Home", segment: "" },
+        { label: "Docs", segment: "docs" },
+        { label: "Components", segment: "components" },
+        { label: "Breadcrumbs", segment: "breadcrumbs" },
+      ]}
+    />
+    ```
+  </TabItem>
+</Tabs>
+
+### Changing the separator
+
+You can change the separator by passing a `separator` prop.
+
+<Tabs>
+  <TabItem label="Preview">
+    <PreviewCard>
+      <Breadcrumbs 
+        segments={[
+          { label: "Home", segment: "" },
+          { label: "Docs", segment: "docs" },
+          { label: "Components", segment: "components" },
+          { label: "Breadcrumbs", segment: "breadcrumbs" },
+        ]}
+        separator="/"
+      />
+    </PreviewCard>
+  </TabItem>
+  <TabItem label="Code">
+    ```astro showLinenumbers title="ButtonExample.astro"
+    ---
+    import { Breadcrumbs } from '@studiocms/ui/components';
+    ---
+
+    <Breadcrumbs 
+      segments={[
+        { label: "Home", segment: "" },
+        { label: "Docs", segment: "docs" },
+        { label: "Components", segment: "components" },
+        { label: "Breadcrumbs", segment: "breadcrumbs" },
+      ]}
+      separator="/"
+    />
+    ```
+  </TabItem>
+</Tabs>