@agentero/design-system 0.0.5 → 0.1.0

package/mcp/manifests/components.html

@@ -576,7 +576,7 @@
 <header>
   <div class="wrap">
     <h1>Manifest Debugger</h1>
-    <div class="summary"><a class="filter-pill all" data-k="all" href="#filter-all">All</a><span class="filter-pill ok" aria-disabled="true">1 components ok</span><span class="filter-pill ok" aria-disabled="true">17 stories ok</span></div>
+    <div class="summary"><a class="filter-pill all" data-k="all" href="#filter-all">All</a><span class="filter-pill ok" aria-disabled="true">2 components ok</span><span class="filter-pill ok" aria-disabled="true">27 stories ok</span></div>
   </div>
 </header>
 <main>
@@ -900,6 +900,374 @@ variant?: &quot;circle&quot; | &quot;square&quot; | &quot;pillow&quot; | &quot;p
             </div>
         </div>
     
+  </div>
+</article>
+<article
+  class="card 
+  no-error 
+  no-info 
+  no-story-error
+  no-doc-error"
+  role="listitem"
+  aria-label="Button">
+  <div class="head">
+    <div class="title">
+      <h2><span class="status-dot dot-ok"></span> Button</h2>
+      <div class="badges">
+        <label for="c-1-components-button-props" class="badge ok as-toggle">12 prop types</label>
+        
+        <label for="c-1-components-button-stories" class="badge ok as-toggle">10 stories</label>
+        
+      </div>
+    </div>
+    <div class="meta" title="./src/button/button.stories.tsx">components-button · ./src/button/button.stories.tsx</div>
+    
+    <div class="hint">Button is the design system&#39;s primary actionable control. Pick `variant` to express hierarchy, `size` for prominence, and `status=&quot;danger&quot;` for destructive actions. Pass `asChild` to render Button&#39;s styles on any nested element — a plain `&lt;a&gt;`, a framework `&lt;Link&gt;`, or a custom component — without Button binding to any particular framework.</div>
+    
+  </div>
+
+  <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
+  
+  
+  <input id="c-1-components-button-stories" class="tg tg-stories" type="checkbox" hidden />
+  
+  <input id="c-1-components-button-props" class="tg tg-props" type="checkbox" hidden />
+
+  <div class="panels">
+    
+    
+    
+        <div class="panel panel-props">
+          <div class="note ok">
+            <div class="row">
+              <span class="ex-name">Prop types <small>(react-docgen-typescript)</small></span>
+              <span class="badge ok">12 prop types</span>
+            </div>
+            <pre><code>Component: src/button/button.tsx::Button</code></pre>
+            <pre><code>Props:</code></pre>
+            <pre><code>/**
+ * Justifies children along the main axis. Defaults to `&#39;center&#39;`.
+ * Use `&#39;justify&#39;` to push leading and trailing icons to the edges.
+ */
+align?: &quot;center&quot; | &quot;start&quot; | &quot;end&quot; | &quot;justify&quot;
+
+/**
+ * When `true`, Button clones its single child element and merges
+ * Button&#39;s `className`, `ref`, and event handlers onto it rather than
+ * rendering a `&lt;button&gt;`. Use this to style any element (a plain `&lt;a&gt;`,
+ * a framework `Link`, a `React.forwardRef` component) as a Button.
+ * 
+ * When combined with `disabled`, Button emits `aria-disabled` and
+ * `data-disabled` on the child instead of the native `disabled`
+ * attribute (which is ignored by non-form-control elements).
+ */
+asChild?: boolean
+
+/**
+ * Content rendered inside the Button. Accepts a text label, icon elements,
+ * or any mix of both. Text runs are wrapped in a truncating
+ * `&lt;span data-slot=&quot;button-label&quot;&gt;` so the label ellipsizes without
+ * shrinking adjacent icons; icon-only children switch the Button to a
+ * square aspect ratio and trigger the icon-only layout.
+ * 
+ * When `asChild` is set, the single child element is merged with Button&#39;s
+ * props and styles; auto-detection of icon-only children is skipped — use
+ * the `iconOnly` prop to opt into the square icon-only layout.
+ * 
+ * Not supported with `variant=&quot;link&quot;` when children resolve to icons only
+ * — passing both logs a dev-only warning (silent in production).
+ */
+children?: ReactNode
+
+/**
+ * Disables interaction and applies the disabled color treatment. Applied
+ * via className so it still affects anchors rendered via `asChild`, which
+ * ignore the native `disabled` attribute — in that case `aria-disabled`
+ * and `data-disabled` are forwarded to the child element instead.
+ */
+disabled?: boolean
+
+/**
+ * When `true`, removes the per-size `min-width` floor so the button hugs
+ * its content. Useful for inline actions inside tight containers.
+ */
+fitContent?: boolean
+
+/**
+ * Forces the icon-only layout (square aspect ratio, no min-width). Useful
+ * with `asChild` where the single wrapper child prevents auto-detection.
+ * For non-`asChild` usage, prefer passing icon elements as children — the
+ * icon-only layout is applied automatically.
+ */
+iconOnly?: boolean
+
+/**
+ * When `true`, shows a spinner overlay and forces the button into a disabled
+ * state to block further interaction. Not supported with `variant=&quot;link&quot;` —
+ * passing both logs a dev-only warning (silent in production).
+ */
+loading?: boolean
+
+/**
+ * Ref forwarded to the underlying element. Typed as a union covering both
+ * `&lt;button&gt;` and `&lt;a&gt;` because `asChild` lets consumers render either tag
+ * (or any forwardRef component) through Radix&#39;s `Slot`.
+ */
+ref?: Ref&lt;HTMLButtonElement | HTMLAnchorElement&gt;
+
+/**
+ * When `true`, renders a fully pill-shaped button (rounded-full). Otherwise
+ * uses the variant&#39;s default corner radius.
+ */
+rounded?: boolean
+
+/**
+ * Control size. Defaults to `&#39;sm&#39;`.
+ * - `xs` (24px) — dense toolbars, compact inline actions.
+ * - `sm` (32px) — standard usage in forms and cards.
+ * - `md` (40px) — prominent actions in modals or feature rows.
+ * - `lg` (48px) — hero CTAs and full-width mobile actions.
+ */
+size?: ButtonSizeType
+
+/**
+ * Semantic status override. Set to `&#39;danger&#39;` for destructive actions
+ * (delete, remove, disconnect) — applies the destructive color treatment
+ * across all variants.
+ */
+status?: &quot;danger&quot;
+
+/**
+ * Visual hierarchy. Defaults to `&#39;primary&#39;`.
+ * - `primary` — main call-to-action; use once per view.
+ * - `secondary` — alternative action alongside a primary button.
+ * - `tertiary` — low-emphasis action, subtle background.
+ * - `ghost` — minimal background; low-emphasis action in dense layouts.
+ * - `link` — inline text-style action; no padding or background.
+ */
+variant?: ButtonVariantType</code></pre>
+          </div>
+        </div>
+    
+        <div class="panel panel-stories">
+          
+          
+          
+          <div class="note ok">
+                <div class="row">
+                  <span class="ex-name">Imports</span>
+                </div>
+                <pre><code>import { Button } from "@agentero/design-system";</code></pre>
+              </div>
+          
+          
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">Default</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>Default args playground for Button</div>
+              <div class="hint">Args-controlled playground. Toggle `variant`, `size`, `status`, `loading`, `disabled`, and `rounded` from the Controls panel to explore every visual combination of the Button.</div>
+              <pre><code>const Default = () =&gt; &lt;Button variant=&quot;primary&quot; size=&quot;sm&quot;&gt;{TEXT}&lt;/Button&gt;;</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">Variants</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>All Button variants at default size</div>
+              <div class="hint">All five variants at the default `sm` size. Variants express visual hierarchy: `primary` for the main CTA, `secondary` / `tertiary` for supporting actions, `ghost` for low-emphasis inline actions, and `link` for text-only actions.</div>
+              <pre><code>const Variants = () =&gt; (
+    &lt;Row&gt;
+        {VARIANTS.map(variant =&gt; (
+            &lt;Button key={variant} variant={variant}&gt;
+                {TEXT}
+            &lt;/Button&gt;
+        ))}
+    &lt;/Row&gt;
+);</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">Sizes</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>All Button sizes at default variant</div>
+              <div class="hint">All four sizes at the default `primary` variant. Sizes scale from `xs` (24px) for dense toolbars up to `lg` (48px) for hero CTAs.</div>
+              <pre><code>const Sizes = () =&gt; (
+    &lt;Row&gt;
+        {SIZES.map(size =&gt; (
+            &lt;Button key={size} size={size}&gt;
+                {TEXT}
+            &lt;/Button&gt;
+        ))}
+    &lt;/Row&gt;
+);</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">Disabled</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>Disabled treatment for every variant</div>
+              <div class="hint">Disabled state across all variants. Rendered via `asChild` with `&lt;a&gt;` children to show the disabled treatment applied via className — native anchors ignore the `disabled` attribute, so Button emits `aria-disabled` and `data-disabled` on the child instead.</div>
+              <pre><code>const Disabled = () =&gt; (
+    &lt;Row&gt;
+        {VARIANTS.map(variant =&gt; (
+            &lt;Button asChild key={variant} variant={variant} disabled&gt;
+                &lt;a&gt;{TEXT}&lt;/a&gt;
+            &lt;/Button&gt;
+        ))}
+    &lt;/Row&gt;
+);</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">With Icons</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>Variant × size grid with leading + trailing icons</div>
+              <div class="hint">Variant × size grid with leading and trailing icons. Icons stay full-size while text truncates — the Button wraps text runs in a labeled span so overflow ellipsizes the label without shrinking the icons.</div>
+              <pre><code>const WithIcons = () =&gt; (
+    &lt;Stack&gt;
+        {VARIANTS.map(variant =&gt; (
+            &lt;Row key={variant}&gt;
+                {SIZES.map(size =&gt; (
+                    &lt;Button key={size} variant={variant} size={size}&gt;
+                        &lt;IconAdd /&gt;
+                        {TEXT}
+                        &lt;IconAdd /&gt;
+                    &lt;/Button&gt;
+                ))}
+            &lt;/Row&gt;
+        ))}
+    &lt;/Stack&gt;
+);</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">Only Icon</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>Icon-only Button across variant × size (excluding `link`)</div>
+              <div class="hint">Icon-only buttons across the variant × size grid. Excludes `variant=&quot;link&quot;` — combining `link` with icon-only children logs a dev-only warning because the link treatment has no padding to accommodate an icon alone.</div>
+              <pre><code>const OnlyIcon = () =&gt; (
+    &lt;Stack&gt;
+        {NON_LINK_VARIANTS.map(variant =&gt; (
+            &lt;Row key={variant}&gt;
+                {SIZES.map(size =&gt; (
+                    &lt;Button key={size} variant={variant} size={size} aria-label=&quot;Close&quot;&gt;
+                        &lt;IconClose /&gt;
+                    &lt;/Button&gt;
+                ))}
+            &lt;/Row&gt;
+        ))}
+    &lt;/Stack&gt;
+);</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">Loading</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>Loading state across variant × size (excluding `link`)</div>
+              <div class="hint">Loading state across the variant × size grid. Each row shows two buttons per size: one icon-only, one with text. Loading forces `disabled` and overlays a spinner that inherits the variant&#39;s text color. Excludes `variant=&quot;link&quot;` — combining `link` with `loading` logs a dev-only warning.</div>
+              <pre><code>const Loading = () =&gt; (
+    &lt;Stack&gt;
+        {NON_LINK_VARIANTS.map(variant =&gt; (
+            &lt;Row key={variant}&gt;
+                {SIZES.map(size =&gt; (
+                    &lt;div key={size} style={{ display: &#39;flex&#39;, gap: &#39;0.5rem&#39;, alignItems: &#39;center&#39; }}&gt;
+                        &lt;Button variant={variant} size={size} loading aria-label=&quot;Loading&quot;&gt;
+                            &lt;IconAdd /&gt;
+                        &lt;/Button&gt;
+                        &lt;Button variant={variant} size={size} loading&gt;
+                            {TEXT}
+                        &lt;/Button&gt;
+                    &lt;/div&gt;
+                ))}
+            &lt;/Row&gt;
+        ))}
+    &lt;/Stack&gt;
+);</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">Status</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>`status=&quot;danger&quot;` across every variant, enabled + disabled</div>
+              <div class="hint">Destructive treatment via `status=&quot;danger&quot;`. The top row shows every variant enabled; the bottom row shows every variant disabled. Use `status=&quot;danger&quot;` for delete, remove, or disconnect actions regardless of variant.</div>
+              <pre><code>const Status = () =&gt; (
+    &lt;Stack&gt;
+        &lt;Row&gt;
+            {VARIANTS.map(variant =&gt; (
+                &lt;Button key={variant} variant={variant} status=&quot;danger&quot;&gt;
+                    &lt;IconAdd /&gt;
+                    {TEXT}
+                    &lt;IconAdd /&gt;
+                &lt;/Button&gt;
+            ))}
+        &lt;/Row&gt;
+        &lt;Row&gt;
+            {VARIANTS.map(variant =&gt; (
+                &lt;Button asChild key={variant} variant={variant} status=&quot;danger&quot; disabled&gt;
+                    &lt;a&gt;
+                        &lt;IconAdd /&gt;
+                        {TEXT}
+                        &lt;IconAdd /&gt;
+                    &lt;/a&gt;
+                &lt;/Button&gt;
+            ))}
+        &lt;/Row&gt;
+    &lt;/Stack&gt;
+);</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">Rounded</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>`rounded` pill shape across variant × size (excluding `link`)</div>
+              <div class="hint">Fully pill-shaped buttons across the variant × size grid. Excludes `variant=&quot;link&quot;` since the link treatment has no background to round.</div>
+              <pre><code>const Rounded = () =&gt; (
+    &lt;Stack&gt;
+        {NON_LINK_VARIANTS.map(variant =&gt; (
+            &lt;Row key={variant}&gt;
+                {SIZES.map(size =&gt; (
+                    &lt;Button key={size} variant={variant} size={size} rounded&gt;
+                        &lt;IconAdd /&gt;
+                        {TEXT}
+                        &lt;IconAdd /&gt;
+                    &lt;/Button&gt;
+                ))}
+            &lt;/Row&gt;
+        ))}
+    &lt;/Stack&gt;
+);</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">As Child</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>`asChild` composes Button&#39;s styles onto any element</div>
+              <div class="hint">`asChild` renders Button&#39;s styles on the nested child element rather than on a `&lt;button&gt;` — the child receives Button&#39;s `className`, `ref`, and merged props via Radix&#39;s `Slot` primitive. Use it to turn any anchor or framework `Link` into a Button without coupling the design system to a router. In app code, swap the plain `&lt;a&gt;` below for your framework&#39;s Link (`next/link`, `react-router`, `@tanstack/react-router`, etc.).</div>
+              <pre><code>const AsChild = () =&gt; (
+    &lt;Row&gt;
+        &lt;Button asChild variant=&quot;primary&quot;&gt;
+            &lt;a href=&quot;/dashboard&quot;&gt;Go to dashboard&lt;/a&gt;
+        &lt;/Button&gt;
+        &lt;Button asChild variant=&quot;secondary&quot;&gt;
+            &lt;a href=&quot;https://agentero.com&quot; target=&quot;_blank&quot; rel=&quot;noreferrer&quot;&gt;
+                Visit Agentero
+            &lt;/a&gt;
+        &lt;/Button&gt;
+    &lt;/Row&gt;
+);</code></pre>
+            </div>
+        </div>
+    
   </div>
 </article>
     </div>

package/mcp/manifests/components.json

@@ -1 +1 @@
-{"v":0,"components":{"components-avatar":{"id":"components-avatar","name":"Avatar","path":"./src/avatar/avatar.stories.tsx","stories":[{"id":"components-avatar--default","name":"Default","snippet":"const Default = () => <Avatar fallback=\"JD\" size=\"md\" variant=\"circle\" />;","description":"The default avatar with fallback initials. Renders as a medium circle when no image source is provided.","summary":"Default avatar with fallback initials"},{"id":"components-avatar--with-image","name":"With Image","snippet":"const WithImage = () => <Avatar\n    fallback=\"JD\"\n    size=\"md\"\n    variant=\"circle\"\n    src=\"https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?&w=256&h=256&q=70&crop=focalpoint&fp-x=0.5&fp-y=0.3&fp-z=1&fit=crop\"\n    alt=\"Alex Morgan\" />;","description":"Avatar displaying a user profile photo. The image fills the avatar shape and the fallback is hidden while the image loads successfully.","summary":"Avatar with a profile image"},{"id":"components-avatar--with-fallback-initials","name":"With Fallback Initials","snippet":"const WithFallbackInitials = () => <Avatar\n    fallback=\"AM\"\n    size=\"md\"\n    variant=\"circle\"\n    src=\"https://broken-url.example/photo.jpg\" />;","description":"When the image fails to load, the fallback content is displayed. Pass initials, an icon, or any ReactNode as the `fallback` prop.","summary":"Fallback content shown when image is unavailable"},{"id":"components-avatar--circle","name":"Circle","snippet":"const Circle = () => <Avatar fallback=\"CR\" size=\"md\" variant=\"circle\" />;","description":"The circle variant is the default shape, ideal for user profile photos.","summary":"Circle-shaped avatar (default)"},{"id":"components-avatar--square","name":"Square","snippet":"const Square = () => <Avatar fallback=\"WS\" size=\"md\" variant=\"square\" />;","description":"The square variant uses a rounded rectangle, suitable for workspace, team, or organization icons.","summary":"Square-shaped avatar for workspaces"},{"id":"components-avatar--pillow","name":"Pillow","snippet":"const Pillow = () => <Avatar fallback=\"PL\" size=\"md\" variant=\"pillow\" />;","description":"The pillow variant uses a soft, organic squircle shape for a friendly and distinctive appearance.","summary":"Pillow-shaped avatar with organic squircle"},{"id":"components-avatar--pentagon","name":"Pentagon","snippet":"const Pentagon = () => <Avatar fallback=\"PT\" size=\"md\" variant=\"pentagon\" />;","description":"The pentagon variant uses a five-sided mask for a unique visual identity. Note: the border is hidden in this variant due to the mask shape.","summary":"Pentagon-shaped avatar for unique identity"},{"id":"components-avatar--size-xs","name":"Size Xs","snippet":"const SizeXs = () => <Avatar fallback=\"XS\" size=\"xs\" variant=\"circle\" />;","description":"Extra-small avatar (24px) for dense lists and inline indicators.","summary":"Extra-small 24px avatar"},{"id":"components-avatar--size-sm","name":"Size Sm","snippet":"const SizeSm = () => <Avatar fallback=\"SM\" size=\"sm\" variant=\"circle\" />;","description":"Small avatar (32px) for compact layouts and table rows.","summary":"Small 32px avatar"},{"id":"components-avatar--size-lg","name":"Size Lg","snippet":"const SizeLg = () => <Avatar fallback=\"LG\" size=\"lg\" variant=\"circle\" />;","description":"Large avatar (48px) for profile sections and detail views.","summary":"Large 48px avatar"},{"id":"components-avatar--size-xl","name":"Size Xl","snippet":"const SizeXl = () => <Avatar fallback=\"XL\" size=\"xl\" variant=\"circle\" />;","description":"Extra-large avatar (64px) for hero sections and prominent display.","summary":"Extra-large 64px avatar"},{"id":"components-avatar--colorized","name":"Colorized","snippet":"const Colorized = () => <Avatar fallback=\"JD\" size=\"md\" variant=\"circle\" colorize=\"jane doe\" />;","description":"The `colorize` prop deterministically maps a string (typically a user name) to a color from the palette, applying a tinted background and matching text color. Useful for distinguishing users in lists without profile photos.","summary":"Colorized avatar based on user name"},{"id":"components-avatar--all-colorized","name":"All Colorized","snippet":"const AllColorized = () => (\n    <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>\n        {['alice', 'bob', 'carol', 'dave', 'eve', 'frank', 'grace', 'henry', 'iris'].map(name => (\n            <Avatar key={name} size=\"lg\" colorize={name} fallback={name.slice(0, 2).toUpperCase()} />\n        ))}\n    </div>\n);","description":"Multiple colorized avatars showing how different names map to different colors from the palette for visual distinction.","summary":"Multiple colorized avatars for visual distinction"},{"id":"components-avatar--all-sizes","name":"All Sizes","snippet":"const AllSizes = () => (\n    <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>\n        {(['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl'] as const).map(size => (\n            <Avatar key={size} size={size} fallback={size.toUpperCase()} />\n        ))}\n    </div>\n);","description":"All available sizes displayed together for visual comparison. Sizes range from `xs` (24px) to `4xl` (128px).","summary":"Visual comparison of all avatar sizes"},{"id":"components-avatar--all-sizes-with-image","name":"All Sizes With Image","snippet":"const AllSizesWithImage = () => (\n    <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>\n        {(['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl'] as const).map(size => (\n            <Avatar\n                key={size}\n                size={size}\n                src=\"https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?&w=256&h=256&q=70&crop=focalpoint&fp-x=0.5&fp-y=0.3&fp-z=1&fit=crop\"\n                alt=\"Alex Morgan\"\n                fallback=\"AM\"\n            />\n        ))}\n    </div>\n);","description":"All sizes with a profile image to verify image scaling and quality across the full size range from `xs` (24px) to `4xl` (128px).","summary":"All avatar sizes with a profile image"},{"id":"components-avatar--all-variants","name":"All Variants","snippet":"const AllVariants = () => (\n    <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>\n        {(['circle', 'square', 'pillow', 'pentagon'] as const).map(variant => (\n            <Avatar\n                key={variant}\n                size=\"lg\"\n                variant={variant}\n                fallback={variant.slice(0, 2).toUpperCase()}\n            />\n        ))}\n    </div>\n);","description":"All available shape variants displayed together for visual comparison. Each variant serves a different use case: user photos, workspaces, friendly branding, and unique identity.","summary":"Visual comparison of all avatar shapes"},{"id":"components-avatar--all-variants-with-image","name":"All Variants With Image","snippet":"const AllVariantsWithImage = () => (\n    <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>\n        {(['circle', 'square', 'pillow', 'pentagon'] as const).map(variant => (\n            <Avatar\n                key={variant}\n                size=\"lg\"\n                variant={variant}\n                src=\"https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?&w=256&h=256&q=70&crop=focalpoint&fp-x=0.5&fp-y=0.3&fp-z=1&fit=crop\"\n                alt=\"Alex Morgan\"\n                fallback=\"AM\"\n            />\n        ))}\n    </div>\n);","description":"All shape variants with a profile image to show how each mask clips the photo. Particularly useful for verifying the pentagon mask and pillow shape render correctly with real imagery.","summary":"All avatar shapes with a profile image"}],"import":"import { Avatar } from \"@agentero/design-system\";","jsDocTags":{},"description":"Avatar displays a user's profile image, initials, or a fallback icon. Use for user identification in lists, headers, cards, and comment threads. Supports multiple shapes (`circle`, `square`, `pillow`, `pentagon`) and sizes from `xs` (24px) to `4xl` (128px).","reactDocgenTypescript":{"tags":{"summary":"Displays a user's profile image, initials, or fallback icon","example":"<Avatar src=\"/photos/jane.jpg\" alt=\"Jane Doe\" size=\"md\" variant=\"circle\" />\n<Avatar fallback=\"JD\" size=\"lg\" variant=\"square\" />"},"filePath":"/home/runner/work/design-system/design-system/src/avatar/avatar.tsx","description":"Avatar displays a user's profile image, initials, or a fallback icon.\nUse Avatar for user identification in lists, headers, cards, and comment threads.\n\nDo **not** use Avatar for decorative images or thumbnails unrelated to a person\nor entity — use a standard `<img>` or a Thumbnail component instead.\n\nRenders an image when `src` is provided; otherwise displays `fallback` content\n(typically initials or an icon). Built on Radix UI Avatar primitives.\n\nAvailable shapes: `circle` (default), `square`, `pillow`, and `pentagon`.\nSizes range from `xs` (24px) to `4xl` (128px), defaulting to `md` (40px).","displayName":"Avatar","methods":[],"props":{"asChild":{"defaultValue":null,"description":"","name":"asChild","declarations":[{"fileName":"design-system/node_modules/@radix-ui/react-primitive/dist/index.d.mts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"}},"alt":{"defaultValue":null,"description":"Accessible alt text describing the avatar image. Required when `src` is provided.","name":"alt","declarations":[{"fileName":"design-system/src/avatar/avatar.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"src":{"defaultValue":null,"description":"Image URL to display. When unavailable or loading fails, `fallback` content is shown instead.","name":"src","declarations":[{"fileName":"design-system/src/avatar/avatar.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"fallback":{"defaultValue":null,"description":"Content rendered when `src` is missing or fails to load. Typically user initials (e.g., \"JD\") or an icon.","name":"fallback","declarations":[{"fileName":"design-system/src/avatar/avatar.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"ReactNode"}},"colorize":{"defaultValue":null,"description":"When provided, deterministically maps the string (typically a user name) to a\ncolor from the palette, applying a light background, matching text color, and\nborder color. Useful for distinguishing users in lists without profile photos.","name":"colorize","declarations":[{"fileName":"design-system/src/avatar/avatar.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"size":{"defaultValue":null,"description":"Controls the avatar dimensions. Defaults to `'md'` (40px).\n- `xs` (24px) — inline indicators, dense lists\n- `sm` (32px) — compact layouts, table rows\n- `md` (40px) — standard usage, cards, headers\n- `lg` (48px) — profile sections, detail views\n- `xl` (64px) — hero sections, prominent display\n- `2xl` (80px), `3xl` (96px), `4xl` (128px) — large feature areas, profile pages","name":"size","declarations":[{"fileName":"design-system/src/avatar/avatar.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"\"md\" | \"xs\" | \"sm\" | \"lg\" | \"xl\" | \"2xl\" | \"3xl\" | \"4xl\"","value":[{"value":"\"md\""},{"value":"\"xs\""},{"value":"\"sm\""},{"value":"\"lg\""},{"value":"\"xl\""},{"value":"\"2xl\""},{"value":"\"3xl\""},{"value":"\"4xl\""}]}},"variant":{"defaultValue":null,"description":"Shape of the avatar container. Defaults to `'circle'`.\n- `circle` — standard round avatar for user photos\n- `square` — rounded rectangle, suitable for workspace or team icons\n- `pillow` — soft, organic squircle shape\n- `pentagon` — distinctive five-sided shape for unique visual identity","name":"variant","declarations":[{"fileName":"design-system/src/avatar/avatar.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"\"circle\" | \"square\" | \"pillow\" | \"pentagon\"","value":[{"value":"\"circle\""},{"value":"\"square\""},{"value":"\"pillow\""},{"value":"\"pentagon\""}]}}},"exportName":"Avatar"}}},"meta":{"docgen":"react-docgen-typescript","durationMs":1569}}
+{"v":0,"components":{"components-avatar":{"id":"components-avatar","name":"Avatar","path":"./src/avatar/avatar.stories.tsx","stories":[{"id":"components-avatar--default","name":"Default","snippet":"const Default = () => <Avatar fallback=\"JD\" size=\"md\" variant=\"circle\" />;","description":"The default avatar with fallback initials. Renders as a medium circle when no image source is provided.","summary":"Default avatar with fallback initials"},{"id":"components-avatar--with-image","name":"With Image","snippet":"const WithImage = () => <Avatar\n    fallback=\"JD\"\n    size=\"md\"\n    variant=\"circle\"\n    src=\"https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?&w=256&h=256&q=70&crop=focalpoint&fp-x=0.5&fp-y=0.3&fp-z=1&fit=crop\"\n    alt=\"Alex Morgan\" />;","description":"Avatar displaying a user profile photo. The image fills the avatar shape and the fallback is hidden while the image loads successfully.","summary":"Avatar with a profile image"},{"id":"components-avatar--with-fallback-initials","name":"With Fallback Initials","snippet":"const WithFallbackInitials = () => <Avatar\n    fallback=\"AM\"\n    size=\"md\"\n    variant=\"circle\"\n    src=\"https://broken-url.example/photo.jpg\" />;","description":"When the image fails to load, the fallback content is displayed. Pass initials, an icon, or any ReactNode as the `fallback` prop.","summary":"Fallback content shown when image is unavailable"},{"id":"components-avatar--circle","name":"Circle","snippet":"const Circle = () => <Avatar fallback=\"CR\" size=\"md\" variant=\"circle\" />;","description":"The circle variant is the default shape, ideal for user profile photos.","summary":"Circle-shaped avatar (default)"},{"id":"components-avatar--square","name":"Square","snippet":"const Square = () => <Avatar fallback=\"WS\" size=\"md\" variant=\"square\" />;","description":"The square variant uses a rounded rectangle, suitable for workspace, team, or organization icons.","summary":"Square-shaped avatar for workspaces"},{"id":"components-avatar--pillow","name":"Pillow","snippet":"const Pillow = () => <Avatar fallback=\"PL\" size=\"md\" variant=\"pillow\" />;","description":"The pillow variant uses a soft, organic squircle shape for a friendly and distinctive appearance.","summary":"Pillow-shaped avatar with organic squircle"},{"id":"components-avatar--pentagon","name":"Pentagon","snippet":"const Pentagon = () => <Avatar fallback=\"PT\" size=\"md\" variant=\"pentagon\" />;","description":"The pentagon variant uses a five-sided mask for a unique visual identity. Note: the border is hidden in this variant due to the mask shape.","summary":"Pentagon-shaped avatar for unique identity"},{"id":"components-avatar--size-xs","name":"Size Xs","snippet":"const SizeXs = () => <Avatar fallback=\"XS\" size=\"xs\" variant=\"circle\" />;","description":"Extra-small avatar (24px) for dense lists and inline indicators.","summary":"Extra-small 24px avatar"},{"id":"components-avatar--size-sm","name":"Size Sm","snippet":"const SizeSm = () => <Avatar fallback=\"SM\" size=\"sm\" variant=\"circle\" />;","description":"Small avatar (32px) for compact layouts and table rows.","summary":"Small 32px avatar"},{"id":"components-avatar--size-lg","name":"Size Lg","snippet":"const SizeLg = () => <Avatar fallback=\"LG\" size=\"lg\" variant=\"circle\" />;","description":"Large avatar (48px) for profile sections and detail views.","summary":"Large 48px avatar"},{"id":"components-avatar--size-xl","name":"Size Xl","snippet":"const SizeXl = () => <Avatar fallback=\"XL\" size=\"xl\" variant=\"circle\" />;","description":"Extra-large avatar (64px) for hero sections and prominent display.","summary":"Extra-large 64px avatar"},{"id":"components-avatar--colorized","name":"Colorized","snippet":"const Colorized = () => <Avatar fallback=\"JD\" size=\"md\" variant=\"circle\" colorize=\"jane doe\" />;","description":"The `colorize` prop deterministically maps a string (typically a user name) to a color from the palette, applying a tinted background and matching text color. Useful for distinguishing users in lists without profile photos.","summary":"Colorized avatar based on user name"},{"id":"components-avatar--all-colorized","name":"All Colorized","snippet":"const AllColorized = () => (\n    <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>\n        {['alice', 'bob', 'carol', 'dave', 'eve', 'frank', 'grace', 'henry', 'iris'].map(name => (\n            <Avatar key={name} size=\"lg\" colorize={name} fallback={name.slice(0, 2).toUpperCase()} />\n        ))}\n    </div>\n);","description":"Multiple colorized avatars showing how different names map to different colors from the palette for visual distinction.","summary":"Multiple colorized avatars for visual distinction"},{"id":"components-avatar--all-sizes","name":"All Sizes","snippet":"const AllSizes = () => (\n    <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>\n        {(['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl'] as const).map(size => (\n            <Avatar key={size} size={size} fallback={size.toUpperCase()} />\n        ))}\n    </div>\n);","description":"All available sizes displayed together for visual comparison. Sizes range from `xs` (24px) to `4xl` (128px).","summary":"Visual comparison of all avatar sizes"},{"id":"components-avatar--all-sizes-with-image","name":"All Sizes With Image","snippet":"const AllSizesWithImage = () => (\n    <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>\n        {(['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl'] as const).map(size => (\n            <Avatar\n                key={size}\n                size={size}\n                src=\"https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?&w=256&h=256&q=70&crop=focalpoint&fp-x=0.5&fp-y=0.3&fp-z=1&fit=crop\"\n                alt=\"Alex Morgan\"\n                fallback=\"AM\"\n            />\n        ))}\n    </div>\n);","description":"All sizes with a profile image to verify image scaling and quality across the full size range from `xs` (24px) to `4xl` (128px).","summary":"All avatar sizes with a profile image"},{"id":"components-avatar--all-variants","name":"All Variants","snippet":"const AllVariants = () => (\n    <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>\n        {(['circle', 'square', 'pillow', 'pentagon'] as const).map(variant => (\n            <Avatar\n                key={variant}\n                size=\"lg\"\n                variant={variant}\n                fallback={variant.slice(0, 2).toUpperCase()}\n            />\n        ))}\n    </div>\n);","description":"All available shape variants displayed together for visual comparison. Each variant serves a different use case: user photos, workspaces, friendly branding, and unique identity.","summary":"Visual comparison of all avatar shapes"},{"id":"components-avatar--all-variants-with-image","name":"All Variants With Image","snippet":"const AllVariantsWithImage = () => (\n    <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>\n        {(['circle', 'square', 'pillow', 'pentagon'] as const).map(variant => (\n            <Avatar\n                key={variant}\n                size=\"lg\"\n                variant={variant}\n                src=\"https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?&w=256&h=256&q=70&crop=focalpoint&fp-x=0.5&fp-y=0.3&fp-z=1&fit=crop\"\n                alt=\"Alex Morgan\"\n                fallback=\"AM\"\n            />\n        ))}\n    </div>\n);","description":"All shape variants with a profile image to show how each mask clips the photo. Particularly useful for verifying the pentagon mask and pillow shape render correctly with real imagery.","summary":"All avatar shapes with a profile image"}],"import":"import { Avatar } from \"@agentero/design-system\";","jsDocTags":{},"description":"Avatar displays a user's profile image, initials, or a fallback icon. Use for user identification in lists, headers, cards, and comment threads. Supports multiple shapes (`circle`, `square`, `pillow`, `pentagon`) and sizes from `xs` (24px) to `4xl` (128px).","reactDocgenTypescript":{"tags":{"summary":"Displays a user's profile image, initials, or fallback icon","example":"<Avatar src=\"/photos/jane.jpg\" alt=\"Jane Doe\" size=\"md\" variant=\"circle\" />\n<Avatar fallback=\"JD\" size=\"lg\" variant=\"square\" />"},"filePath":"/home/runner/work/design-system/design-system/src/avatar/avatar.tsx","description":"Avatar displays a user's profile image, initials, or a fallback icon.\nUse Avatar for user identification in lists, headers, cards, and comment threads.\n\nDo **not** use Avatar for decorative images or thumbnails unrelated to a person\nor entity — use a standard `<img>` or a Thumbnail component instead.\n\nRenders an image when `src` is provided; otherwise displays `fallback` content\n(typically initials or an icon). Built on Radix UI Avatar primitives.\n\nAvailable shapes: `circle` (default), `square`, `pillow`, and `pentagon`.\nSizes range from `xs` (24px) to `4xl` (128px), defaulting to `md` (40px).","displayName":"Avatar","methods":[],"props":{"asChild":{"defaultValue":null,"description":"","name":"asChild","declarations":[{"fileName":"design-system/node_modules/@radix-ui/react-primitive/dist/index.d.mts","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"}},"alt":{"defaultValue":null,"description":"Accessible alt text describing the avatar image. Required when `src` is provided.","name":"alt","declarations":[{"fileName":"design-system/src/avatar/avatar.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"src":{"defaultValue":null,"description":"Image URL to display. When unavailable or loading fails, `fallback` content is shown instead.","name":"src","declarations":[{"fileName":"design-system/src/avatar/avatar.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"fallback":{"defaultValue":null,"description":"Content rendered when `src` is missing or fails to load. Typically user initials (e.g., \"JD\") or an icon.","name":"fallback","declarations":[{"fileName":"design-system/src/avatar/avatar.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"ReactNode"}},"colorize":{"defaultValue":null,"description":"When provided, deterministically maps the string (typically a user name) to a\ncolor from the palette, applying a light background, matching text color, and\nborder color. Useful for distinguishing users in lists without profile photos.","name":"colorize","declarations":[{"fileName":"design-system/src/avatar/avatar.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"string"}},"size":{"defaultValue":null,"description":"Controls the avatar dimensions. Defaults to `'md'` (40px).\n- `xs` (24px) — inline indicators, dense lists\n- `sm` (32px) — compact layouts, table rows\n- `md` (40px) — standard usage, cards, headers\n- `lg` (48px) — profile sections, detail views\n- `xl` (64px) — hero sections, prominent display\n- `2xl` (80px), `3xl` (96px), `4xl` (128px) — large feature areas, profile pages","name":"size","declarations":[{"fileName":"design-system/src/avatar/avatar.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"\"md\" | \"xs\" | \"sm\" | \"lg\" | \"xl\" | \"2xl\" | \"3xl\" | \"4xl\"","value":[{"value":"\"md\""},{"value":"\"xs\""},{"value":"\"sm\""},{"value":"\"lg\""},{"value":"\"xl\""},{"value":"\"2xl\""},{"value":"\"3xl\""},{"value":"\"4xl\""}]}},"variant":{"defaultValue":null,"description":"Shape of the avatar container. Defaults to `'circle'`.\n- `circle` — standard round avatar for user photos\n- `square` — rounded rectangle, suitable for workspace or team icons\n- `pillow` — soft, organic squircle shape\n- `pentagon` — distinctive five-sided shape for unique visual identity","name":"variant","declarations":[{"fileName":"design-system/src/avatar/avatar.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"\"circle\" | \"square\" | \"pillow\" | \"pentagon\"","value":[{"value":"\"circle\""},{"value":"\"square\""},{"value":"\"pillow\""},{"value":"\"pentagon\""}]}}},"exportName":"Avatar"}},"components-button":{"id":"components-button","name":"Button","path":"./src/button/button.stories.tsx","stories":[{"id":"components-button--default","name":"Default","snippet":"const Default = () => <Button variant=\"primary\" size=\"sm\">{TEXT}</Button>;","description":"Args-controlled playground. Toggle `variant`, `size`, `status`, `loading`, `disabled`, and `rounded` from the Controls panel to explore every visual combination of the Button.","summary":"Default args playground for Button"},{"id":"components-button--variants","name":"Variants","snippet":"const Variants = () => (\n    <Row>\n        {VARIANTS.map(variant => (\n            <Button key={variant} variant={variant}>\n                {TEXT}\n            </Button>\n        ))}\n    </Row>\n);","description":"All five variants at the default `sm` size. Variants express visual hierarchy: `primary` for the main CTA, `secondary` / `tertiary` for supporting actions, `ghost` for low-emphasis inline actions, and `link` for text-only actions.","summary":"All Button variants at default size"},{"id":"components-button--sizes","name":"Sizes","snippet":"const Sizes = () => (\n    <Row>\n        {SIZES.map(size => (\n            <Button key={size} size={size}>\n                {TEXT}\n            </Button>\n        ))}\n    </Row>\n);","description":"All four sizes at the default `primary` variant. Sizes scale from `xs` (24px) for dense toolbars up to `lg` (48px) for hero CTAs.","summary":"All Button sizes at default variant"},{"id":"components-button--disabled","name":"Disabled","snippet":"const Disabled = () => (\n    <Row>\n        {VARIANTS.map(variant => (\n            <Button asChild key={variant} variant={variant} disabled>\n                <a>{TEXT}</a>\n            </Button>\n        ))}\n    </Row>\n);","description":"Disabled state across all variants. Rendered via `asChild` with `<a>` children to show the disabled treatment applied via className — native anchors ignore the `disabled` attribute, so Button emits `aria-disabled` and `data-disabled` on the child instead.","summary":"Disabled treatment for every variant"},{"id":"components-button--with-icons","name":"With Icons","snippet":"const WithIcons = () => (\n    <Stack>\n        {VARIANTS.map(variant => (\n            <Row key={variant}>\n                {SIZES.map(size => (\n                    <Button key={size} variant={variant} size={size}>\n                        <IconAdd />\n                        {TEXT}\n                        <IconAdd />\n                    </Button>\n                ))}\n            </Row>\n        ))}\n    </Stack>\n);","description":"Variant × size grid with leading and trailing icons. Icons stay full-size while text truncates — the Button wraps text runs in a labeled span so overflow ellipsizes the label without shrinking the icons.","summary":"Variant × size grid with leading + trailing icons"},{"id":"components-button--only-icon","name":"Only Icon","snippet":"const OnlyIcon = () => (\n    <Stack>\n        {NON_LINK_VARIANTS.map(variant => (\n            <Row key={variant}>\n                {SIZES.map(size => (\n                    <Button key={size} variant={variant} size={size} aria-label=\"Close\">\n                        <IconClose />\n                    </Button>\n                ))}\n            </Row>\n        ))}\n    </Stack>\n);","description":"Icon-only buttons across the variant × size grid. Excludes `variant=\"link\"` — combining `link` with icon-only children logs a dev-only warning because the link treatment has no padding to accommodate an icon alone.","summary":"Icon-only Button across variant × size (excluding `link`)"},{"id":"components-button--loading","name":"Loading","snippet":"const Loading = () => (\n    <Stack>\n        {NON_LINK_VARIANTS.map(variant => (\n            <Row key={variant}>\n                {SIZES.map(size => (\n                    <div key={size} style={{ display: 'flex', gap: '0.5rem', alignItems: 'center' }}>\n                        <Button variant={variant} size={size} loading aria-label=\"Loading\">\n                            <IconAdd />\n                        </Button>\n                        <Button variant={variant} size={size} loading>\n                            {TEXT}\n                        </Button>\n                    </div>\n                ))}\n            </Row>\n        ))}\n    </Stack>\n);","description":"Loading state across the variant × size grid. Each row shows two buttons per size: one icon-only, one with text. Loading forces `disabled` and overlays a spinner that inherits the variant's text color. Excludes `variant=\"link\"` — combining `link` with `loading` logs a dev-only warning.","summary":"Loading state across variant × size (excluding `link`)"},{"id":"components-button--status","name":"Status","snippet":"const Status = () => (\n    <Stack>\n        <Row>\n            {VARIANTS.map(variant => (\n                <Button key={variant} variant={variant} status=\"danger\">\n                    <IconAdd />\n                    {TEXT}\n                    <IconAdd />\n                </Button>\n            ))}\n        </Row>\n        <Row>\n            {VARIANTS.map(variant => (\n                <Button asChild key={variant} variant={variant} status=\"danger\" disabled>\n                    <a>\n                        <IconAdd />\n                        {TEXT}\n                        <IconAdd />\n                    </a>\n                </Button>\n            ))}\n        </Row>\n    </Stack>\n);","description":"Destructive treatment via `status=\"danger\"`. The top row shows every variant enabled; the bottom row shows every variant disabled. Use `status=\"danger\"` for delete, remove, or disconnect actions regardless of variant.","summary":"`status=\"danger\"` across every variant, enabled + disabled"},{"id":"components-button--rounded","name":"Rounded","snippet":"const Rounded = () => (\n    <Stack>\n        {NON_LINK_VARIANTS.map(variant => (\n            <Row key={variant}>\n                {SIZES.map(size => (\n                    <Button key={size} variant={variant} size={size} rounded>\n                        <IconAdd />\n                        {TEXT}\n                        <IconAdd />\n                    </Button>\n                ))}\n            </Row>\n        ))}\n    </Stack>\n);","description":"Fully pill-shaped buttons across the variant × size grid. Excludes `variant=\"link\"` since the link treatment has no background to round.","summary":"`rounded` pill shape across variant × size (excluding `link`)"},{"id":"components-button--as-child","name":"As Child","snippet":"const AsChild = () => (\n    <Row>\n        <Button asChild variant=\"primary\">\n            <a href=\"/dashboard\">Go to dashboard</a>\n        </Button>\n        <Button asChild variant=\"secondary\">\n            <a href=\"https://agentero.com\" target=\"_blank\" rel=\"noreferrer\">\n                Visit Agentero\n            </a>\n        </Button>\n    </Row>\n);","description":"`asChild` renders Button's styles on the nested child element rather than on a `<button>` — the child receives Button's `className`, `ref`, and merged props via Radix's `Slot` primitive. Use it to turn any anchor or framework `Link` into a Button without coupling the design system to a router. In app code, swap the plain `<a>` below for your framework's Link (`next/link`, `react-router`, `@tanstack/react-router`, etc.).","summary":"`asChild` composes Button's styles onto any element"}],"import":"import { Button } from \"@agentero/design-system\";","jsDocTags":{},"description":"Button is the design system's primary actionable control. Pick `variant` to express hierarchy, `size` for prominence, and `status=\"danger\"` for destructive actions. Pass `asChild` to render Button's styles on any nested element — a plain `<a>`, a framework `<Link>`, or a custom component — without Button binding to any particular framework.","reactDocgenTypescript":{"tags":{"summary":"Primary actionable control; renders a `<button>` or, with `asChild`, any nested element","example":"<Button variant=\"primary\" size=\"sm\" onClick={handleSave}>\n  Save changes\n</Button>\n<Button asChild variant=\"secondary\">\n  <a href=\"https://agentero.com\" target=\"_blank\" rel=\"noreferrer\">Visit Agentero</a>\n</Button>\n// Framework-agnostic: wrap any Link implementation\n<Button asChild variant=\"primary\">\n  <Link href=\"/dashboard\">Go to dashboard</Link>\n</Button>\n<Button variant=\"primary\" status=\"danger\" loading={isDeleting} onClick={handleDelete}>\n  Delete account\n</Button>"},"filePath":"/home/runner/work/design-system/design-system/src/button/button.tsx","description":"Button is the design system's primary actionable control. Use it for any\ninteraction that triggers behavior, submits a form, or navigates the user.\nBy default Button renders a `<button>`; pass `asChild` to render its single\nchild element as the underlying tag instead — Button merges its styles,\n`className`, `ref`, and props onto whatever the consumer nests. This keeps\nthe design system framework-agnostic: route a plain `<a>`, a Next.js\n`<Link>`, a React Router `<Link>`, or any custom element through the same\nvisual treatment.\n\nPick `variant` to express hierarchy (`primary` for the main CTA,\n`secondary` / `tertiary` for supporting actions, `ghost` for low-emphasis\ninline actions, `link` for text-only actions). Use `status=\"danger\"` for\ndestructive actions and `loading` to block interaction while async work\nresolves.\n\nDo **not** use Button for toggle states (prefer a Switch or ToggleButton),\nfor passive decorative anchors without action intent (use a plain `<a>`),\nor with `variant=\"link\"` when loading or when the button has no text\nchildren — both combinations log a dev-only warning (silent in production).","displayName":"Button","methods":[],"props":{"children":{"defaultValue":null,"description":"Content rendered inside the Button. Accepts a text label, icon elements,\nor any mix of both. Text runs are wrapped in a truncating\n`<span data-slot=\"button-label\">` so the label ellipsizes without\nshrinking adjacent icons; icon-only children switch the Button to a\nsquare aspect ratio and trigger the icon-only layout.\n\nWhen `asChild` is set, the single child element is merged with Button's\nprops and styles; auto-detection of icon-only children is skipped — use\nthe `iconOnly` prop to opt into the square icon-only layout.\n\nNot supported with `variant=\"link\"` when children resolve to icons only\n— passing both logs a dev-only warning (silent in production).","name":"children","declarations":[{"fileName":"design-system/src/button/button.tsx","name":"TypeLiteral"},{"fileName":"design-system/node_modules/@types/react/index.d.ts","name":"DOMAttributes"}],"required":false,"type":{"name":"ReactNode"}},"variant":{"defaultValue":null,"description":"Visual hierarchy. Defaults to `'primary'`.\n- `primary` — main call-to-action; use once per view.\n- `secondary` — alternative action alongside a primary button.\n- `tertiary` — low-emphasis action, subtle background.\n- `ghost` — minimal background; low-emphasis action in dense layouts.\n- `link` — inline text-style action; no padding or background.","name":"variant","declarations":[{"fileName":"design-system/src/button/button.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"ButtonVariantType","value":[{"value":"\"link\""},{"value":"\"primary\""},{"value":"\"secondary\""},{"value":"\"tertiary\""},{"value":"\"ghost\""}]}},"size":{"defaultValue":null,"description":"Control size. Defaults to `'sm'`.\n- `xs` (24px) — dense toolbars, compact inline actions.\n- `sm` (32px) — standard usage in forms and cards.\n- `md` (40px) — prominent actions in modals or feature rows.\n- `lg` (48px) — hero CTAs and full-width mobile actions.","name":"size","declarations":[{"fileName":"design-system/src/button/button.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"ButtonSizeType","value":[{"value":"\"md\""},{"value":"\"xs\""},{"value":"\"sm\""},{"value":"\"lg\""}]}},"status":{"defaultValue":null,"description":"Semantic status override. Set to `'danger'` for destructive actions\n(delete, remove, disconnect) — applies the destructive color treatment\nacross all variants.","name":"status","declarations":[{"fileName":"design-system/src/button/button.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"\"danger\"","value":[{"value":"\"danger\""}]}},"loading":{"defaultValue":null,"description":"When `true`, shows a spinner overlay and forces the button into a disabled\nstate to block further interaction. Not supported with `variant=\"link\"` —\npassing both logs a dev-only warning (silent in production).","name":"loading","declarations":[{"fileName":"design-system/src/button/button.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"}},"disabled":{"defaultValue":null,"description":"Disables interaction and applies the disabled color treatment. Applied\nvia className so it still affects anchors rendered via `asChild`, which\nignore the native `disabled` attribute — in that case `aria-disabled`\nand `data-disabled` are forwarded to the child element instead.","name":"disabled","declarations":[{"fileName":"design-system/src/button/button.tsx","name":"TypeLiteral"},{"fileName":"design-system/node_modules/@types/react/index.d.ts","name":"ButtonHTMLAttributes"}],"required":false,"type":{"name":"boolean"}},"iconOnly":{"defaultValue":null,"description":"Forces the icon-only layout (square aspect ratio, no min-width). Useful\nwith `asChild` where the single wrapper child prevents auto-detection.\nFor non-`asChild` usage, prefer passing icon elements as children — the\nicon-only layout is applied automatically.","name":"iconOnly","declarations":[{"fileName":"design-system/src/button/button.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"}},"rounded":{"defaultValue":null,"description":"When `true`, renders a fully pill-shaped button (rounded-full). Otherwise\nuses the variant's default corner radius.","name":"rounded","declarations":[{"fileName":"design-system/src/button/button.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"}},"align":{"defaultValue":null,"description":"Justifies children along the main axis. Defaults to `'center'`.\nUse `'justify'` to push leading and trailing icons to the edges.","name":"align","declarations":[{"fileName":"design-system/src/button/button.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"\"center\" | \"start\" | \"end\" | \"justify\"","value":[{"value":"\"center\""},{"value":"\"start\""},{"value":"\"end\""},{"value":"\"justify\""}]}},"fitContent":{"defaultValue":null,"description":"When `true`, removes the per-size `min-width` floor so the button hugs\nits content. Useful for inline actions inside tight containers.","name":"fitContent","declarations":[{"fileName":"design-system/src/button/button.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"}},"ref":{"defaultValue":null,"description":"Ref forwarded to the underlying element. Typed as a union covering both\n`<button>` and `<a>` because `asChild` lets consumers render either tag\n(or any forwardRef component) through Radix's `Slot`.","name":"ref","declarations":[{"fileName":"design-system/src/button/button.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"Ref<HTMLButtonElement | HTMLAnchorElement>"}},"asChild":{"defaultValue":null,"description":"When `true`, Button clones its single child element and merges\nButton's `className`, `ref`, and event handlers onto it rather than\nrendering a `<button>`. Use this to style any element (a plain `<a>`,\na framework `Link`, a `React.forwardRef` component) as a Button.\n\nWhen combined with `disabled`, Button emits `aria-disabled` and\n`data-disabled` on the child instead of the native `disabled`\nattribute (which is ignored by non-form-control elements).","name":"asChild","declarations":[{"fileName":"design-system/src/button/button.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"}}},"exportName":"Button"}}},"meta":{"docgen":"react-docgen-typescript","durationMs":1650}}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@agentero/design-system",
-	"version": "0.0.5",
+	"version": "0.1.0",
 	"description": "A React component library built with Tailwind CSS v4 and Radix UI primitives",
 	"type": "module",
 	"license": "Apache-2.0",
@@ -25,6 +25,10 @@
 			"types": "./src/avatar/index.d.ts",
 			"import": "./src/avatar/index.js"
 		},
+		"./button": {
+			"types": "./src/button/index.d.ts",
+			"import": "./src/button/index.js"
+		},
 		"./lib": {
 			"types": "./lib/index.d.ts",
 			"import": "./lib/index.js"
@@ -43,6 +47,7 @@
 	},
 	"dependencies": {
 		"@radix-ui/react-avatar": "^1.1.11",
+		"@radix-ui/react-slot": "^1.2.4",
 		"clsx": "^2.1.1",
 		"tailwind-merge": "^3.5.0",
 		"tailwind-variants": "^3.2.2"

package/src/button/button.d.ts

@@ -0,0 +1,281 @@
+import { ButtonHTMLAttributes, ReactNode, Ref } from 'react';
+/**
+ * Style recipe for Button using tailwind-variants. Single-slot recipe whose
+ * variants (`variant`, `size`, `status`, `hasOnlyIcon`, `disabled`, `rounded`,
+ * `align`, `fitContent`) plus compound variants drive destructive and disabled
+ * treatments. All colors route through design-system tokens defined in
+ * `themes/base.css`.
+ *
+ * Exported for advanced composition (e.g., styling a link or custom element
+ * to match a Button). Prefer rendering the `Button` component directly.
+ *
+ * @summary tailwind-variants recipe backing the Button component styles
+ */
+export declare const buttonStyle: import('tailwind-variants').TVReturnType<{
+    variant: {
+        primary: string[];
+        secondary: string[];
+        tertiary: string[];
+        ghost: string[];
+        link: string[];
+    };
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    status: {
+        danger: string;
+    };
+    hasOnlyIcon: {
+        true: string;
+    };
+    disabled: {
+        true: string;
+    };
+    rounded: {
+        true: string;
+    };
+    align: {
+        center: string;
+        start: string;
+        end: string;
+        justify: string;
+    };
+    fitContent: {
+        true: string;
+    };
+}, undefined, string[], {
+    variant: {
+        primary: string[];
+        secondary: string[];
+        tertiary: string[];
+        ghost: string[];
+        link: string[];
+    };
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    status: {
+        danger: string;
+    };
+    hasOnlyIcon: {
+        true: string;
+    };
+    disabled: {
+        true: string;
+    };
+    rounded: {
+        true: string;
+    };
+    align: {
+        center: string;
+        start: string;
+        end: string;
+        justify: string;
+    };
+    fitContent: {
+        true: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    variant: {
+        primary: string[];
+        secondary: string[];
+        tertiary: string[];
+        ghost: string[];
+        link: string[];
+    };
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    status: {
+        danger: string;
+    };
+    hasOnlyIcon: {
+        true: string;
+    };
+    disabled: {
+        true: string;
+    };
+    rounded: {
+        true: string;
+    };
+    align: {
+        center: string;
+        start: string;
+        end: string;
+        justify: string;
+    };
+    fitContent: {
+        true: string;
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+/**
+ * Visual hierarchy levels supported by Button.
+ *
+ * @summary Button variant union (`primary`, `secondary`, `tertiary`, `ghost`, `link`)
+ */
+export type ButtonVariantType = 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'link';
+/**
+ * Size scale supported by Button, from compact (`xs`) to prominent (`lg`).
+ *
+ * @summary Button size union (`xs`, `sm`, `md`, `lg`)
+ */
+export type ButtonSizeType = 'xs' | 'sm' | 'md' | 'lg';
+type ButtonBaseProps = {
+    /**
+     * Content rendered inside the Button. Accepts a text label, icon elements,
+     * or any mix of both. Text runs are wrapped in a truncating
+     * `<span data-slot="button-label">` so the label ellipsizes without
+     * shrinking adjacent icons; icon-only children switch the Button to a
+     * square aspect ratio and trigger the icon-only layout.
+     *
+     * When `asChild` is set, the single child element is merged with Button's
+     * props and styles; auto-detection of icon-only children is skipped — use
+     * the `iconOnly` prop to opt into the square icon-only layout.
+     *
+     * Not supported with `variant="link"` when children resolve to icons only
+     * — passing both logs a dev-only warning (silent in production).
+     */
+    children?: ReactNode;
+    /**
+     * Visual hierarchy. Defaults to `'primary'`.
+     * - `primary` — main call-to-action; use once per view.
+     * - `secondary` — alternative action alongside a primary button.
+     * - `tertiary` — low-emphasis action, subtle background.
+     * - `ghost` — minimal background; low-emphasis action in dense layouts.
+     * - `link` — inline text-style action; no padding or background.
+     */
+    variant?: ButtonVariantType;
+    /**
+     * Control size. Defaults to `'sm'`.
+     * - `xs` (24px) — dense toolbars, compact inline actions.
+     * - `sm` (32px) — standard usage in forms and cards.
+     * - `md` (40px) — prominent actions in modals or feature rows.
+     * - `lg` (48px) — hero CTAs and full-width mobile actions.
+     */
+    size?: ButtonSizeType;
+    /**
+     * Semantic status override. Set to `'danger'` for destructive actions
+     * (delete, remove, disconnect) — applies the destructive color treatment
+     * across all variants.
+     */
+    status?: 'danger';
+    /**
+     * When `true`, shows a spinner overlay and forces the button into a disabled
+     * state to block further interaction. Not supported with `variant="link"` —
+     * passing both logs a dev-only warning (silent in production).
+     */
+    loading?: boolean;
+    /**
+     * Disables interaction and applies the disabled color treatment. Applied
+     * via className so it still affects anchors rendered via `asChild`, which
+     * ignore the native `disabled` attribute — in that case `aria-disabled`
+     * and `data-disabled` are forwarded to the child element instead.
+     */
+    disabled?: boolean;
+    /**
+     * Forces the icon-only layout (square aspect ratio, no min-width). Useful
+     * with `asChild` where the single wrapper child prevents auto-detection.
+     * For non-`asChild` usage, prefer passing icon elements as children — the
+     * icon-only layout is applied automatically.
+     */
+    iconOnly?: boolean;
+    /**
+     * When `true`, renders a fully pill-shaped button (rounded-full). Otherwise
+     * uses the variant's default corner radius.
+     */
+    rounded?: boolean;
+    /**
+     * Justifies children along the main axis. Defaults to `'center'`.
+     * Use `'justify'` to push leading and trailing icons to the edges.
+     */
+    align?: 'center' | 'start' | 'end' | 'justify';
+    /**
+     * When `true`, removes the per-size `min-width` floor so the button hugs
+     * its content. Useful for inline actions inside tight containers.
+     */
+    fitContent?: boolean;
+    /**
+     * Ref forwarded to the underlying element. Typed as a union covering both
+     * `<button>` and `<a>` because `asChild` lets consumers render either tag
+     * (or any forwardRef component) through Radix's `Slot`.
+     */
+    ref?: Ref<HTMLButtonElement | HTMLAnchorElement>;
+};
+/**
+ * Button props. Accepts all standard `<button>` attributes in addition to the
+ * Button base props. When `asChild` is `true`, Button renders its single child
+ * element as the underlying tag instead of a `<button>` — the child receives
+ * Button's `className`, `ref`, and forwarded props via Radix's `Slot`
+ * primitive, letting callers compose any element (plain `<a>`, a framework
+ * `<Link>`, etc.) without Button binding to a framework.
+ *
+ * @summary Props accepted by Button; use `asChild` to render a different element
+ */
+export type ButtonProps = ButtonBaseProps & ButtonHTMLAttributes<HTMLButtonElement> & {
+    /**
+     * When `true`, Button clones its single child element and merges
+     * Button's `className`, `ref`, and event handlers onto it rather than
+     * rendering a `<button>`. Use this to style any element (a plain `<a>`,
+     * a framework `Link`, a `React.forwardRef` component) as a Button.
+     *
+     * When combined with `disabled`, Button emits `aria-disabled` and
+     * `data-disabled` on the child instead of the native `disabled`
+     * attribute (which is ignored by non-form-control elements).
+     */
+    asChild?: boolean;
+};
+/**
+ * Button is the design system's primary actionable control. Use it for any
+ * interaction that triggers behavior, submits a form, or navigates the user.
+ * By default Button renders a `<button>`; pass `asChild` to render its single
+ * child element as the underlying tag instead — Button merges its styles,
+ * `className`, `ref`, and props onto whatever the consumer nests. This keeps
+ * the design system framework-agnostic: route a plain `<a>`, a Next.js
+ * `<Link>`, a React Router `<Link>`, or any custom element through the same
+ * visual treatment.
+ *
+ * Pick `variant` to express hierarchy (`primary` for the main CTA,
+ * `secondary` / `tertiary` for supporting actions, `ghost` for low-emphasis
+ * inline actions, `link` for text-only actions). Use `status="danger"` for
+ * destructive actions and `loading` to block interaction while async work
+ * resolves.
+ *
+ * Do **not** use Button for toggle states (prefer a Switch or ToggleButton),
+ * for passive decorative anchors without action intent (use a plain `<a>`),
+ * or with `variant="link"` when loading or when the button has no text
+ * children — both combinations log a dev-only warning (silent in production).
+ *
+ * @summary Primary actionable control; renders a `<button>` or, with `asChild`, any nested element
+ *
+ * @example
+ * <Button variant="primary" size="sm" onClick={handleSave}>
+ *   Save changes
+ * </Button>
+ *
+ * @example
+ * <Button asChild variant="secondary">
+ *   <a href="https://agentero.com" target="_blank" rel="noreferrer">Visit Agentero</a>
+ * </Button>
+ *
+ * @example
+ * // Framework-agnostic: wrap any Link implementation
+ * <Button asChild variant="primary">
+ *   <Link href="/dashboard">Go to dashboard</Link>
+ * </Button>
+ *
+ * @example
+ * <Button variant="primary" status="danger" loading={isDeleting} onClick={handleDelete}>
+ *   Delete account
+ * </Button>
+ */
+export declare const Button: ({ children, asChild, variant, size, status, loading, rounded, align, fitContent, disabled, iconOnly, ref, className, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/src/button/button.js

@@ -0,0 +1,292 @@
+"use client";
+import { cn as e } from "../../lib/utils.js";
+import { Children as t, cloneElement as n, isValidElement as r } from "react";
+import { tv as i } from "tailwind-variants";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { Slot as s, Slottable as c } from "@radix-ui/react-slot";
+//#region src/button/button.tsx
+var l = i({
+	base: [
+		"relative inline-flex items-center",
+		"font-semibold rounded-md cursor-pointer",
+		"bg-transparent no-underline",
+		"border border-solid border-transparent",
+		"transition-[background-color,border-color,color] duration-200",
+		"[-webkit-tap-highlight-color:transparent]",
+		"[&_[data-slot=button-label]]:overflow-hidden",
+		"[&_[data-slot=button-label]]:text-ellipsis",
+		"[&_[data-slot=button-label]]:whitespace-nowrap",
+		"[&_[data-slot=button-label]]:[flex:0_1_auto]",
+		"[&_[data-slot=button-label]]:min-w-0",
+		"[&_svg]:[flex:0_0_fit-content]",
+		"disabled:cursor-not-allowed disabled:pointer-events-none",
+		"focus-visible:outline-solid focus-visible:outline-2",
+		"focus-visible:outline-offset-[0.125rem]",
+		"focus-visible:outline-focus-ring-button-primary"
+	],
+	variants: {
+		variant: {
+			primary: [
+				"bg-bg-button-primary-enable border-bg-button-primary-enable",
+				"text-text-button-primary-enable",
+				"[&_svg]:fill-icon-button-primary-enable",
+				"hover:bg-bg-button-primary-hover hover:border-bg-button-primary-hover"
+			],
+			secondary: [
+				"bg-bg-button-secondary-enable border-border-button-secondary-enable",
+				"text-text-button-secondary-enable",
+				"shadow-1",
+				"[&_svg]:fill-icon-button-secondary-enable",
+				"hover:bg-bg-button-secondary-hover"
+			],
+			tertiary: [
+				"bg-bg-button-tertiary-enable border-bg-button-tertiary-enable",
+				"text-text-button-tertiary-enable",
+				"[&_svg]:fill-icon-button-tertiary-enable",
+				"hover:bg-bg-button-tertiary-hover hover:border-bg-button-tertiary-hover"
+			],
+			ghost: [
+				"bg-bg-button-ghost-enable border-bg-button-ghost-enable",
+				"text-text-button-ghost-enable",
+				"mix-blend-multiply bg-blend-multiply",
+				"[&_svg]:fill-icon-button-ghost-enable",
+				"hover:bg-bg-button-ghost-hover hover:border-bg-button-ghost-hover"
+			],
+			link: [
+				"px-0 underline",
+				"[text-underline-offset:var(--text-underline-offset)]",
+				"text-text-button-link-enable",
+				"[&_svg]:fill-icon-button-link-enable"
+			]
+		},
+		size: {
+			xs: "h-6 min-w-16 px-[0.6875rem] gap-2 text-xs [&_svg]:size-5 [&_svg]:-mx-1",
+			sm: "h-8 min-w-[5.375rem] px-[0.6875rem] gap-2 text-sm [&_svg]:size-5 [&_svg]:-mx-1",
+			md: "h-10 min-w-[6.25rem] px-[1.1875rem] gap-4 text-sm [&_svg]:size-6 [&_svg]:-mx-2",
+			lg: "h-12 min-w-30 px-[1.1875rem] gap-4 text-base rounded-lg [&_svg]:size-6 [&_svg]:-mx-2"
+		},
+		status: { danger: "focus-visible:outline-focus-ring-button-destructive" },
+		hasOnlyIcon: { true: "aspect-square px-0 min-w-[unset]" },
+		disabled: { true: "cursor-not-allowed pointer-events-none" },
+		rounded: { true: "rounded-full" },
+		align: {
+			center: "justify-center",
+			start: "justify-start",
+			end: "justify-end",
+			justify: "justify-between"
+		},
+		fitContent: { true: "min-w-fit" }
+	},
+	compoundVariants: [
+		{
+			variant: "primary",
+			disabled: !0,
+			class: [
+				"bg-bg-button-primary-disable border-bg-button-primary-disable",
+				"text-text-button-primary-disable",
+				"[&_svg]:fill-icon-button-primary-disable"
+			]
+		},
+		{
+			variant: "secondary",
+			disabled: !0,
+			class: [
+				"bg-bg-button-secondary-disable border-border-button-secondary-disable",
+				"text-text-button-secondary-disable",
+				"[&_svg]:fill-icon-button-secondary-disable"
+			]
+		},
+		{
+			variant: "tertiary",
+			disabled: !0,
+			class: [
+				"bg-bg-button-tertiary-disable border-bg-button-tertiary-disable",
+				"text-text-button-tertiary-disable",
+				"[&_svg]:fill-icon-button-tertiary-disable"
+			]
+		},
+		{
+			variant: "ghost",
+			disabled: !0,
+			class: [
+				"bg-bg-button-ghost-disable border-bg-button-ghost-disable",
+				"text-text-button-ghost-disable",
+				"[&_svg]:fill-icon-button-ghost-disable"
+			]
+		},
+		{
+			variant: "link",
+			disabled: !0,
+			class: ["text-text-button-link-disable", "[&_svg]:fill-icon-button-link-disable"]
+		},
+		{
+			variant: "primary",
+			status: "danger",
+			class: [
+				"bg-bg-button-primary-destructive-enable",
+				"border-bg-button-primary-destructive-enable",
+				"text-text-button-primary-destructive-enable",
+				"[&_svg]:fill-icon-button-primary-destructive-enable",
+				"hover:bg-bg-button-primary-destructive-hover",
+				"hover:border-bg-button-primary-destructive-hover"
+			]
+		},
+		{
+			variant: "secondary",
+			status: "danger",
+			class: [
+				"bg-bg-button-secondary-destructive-enable",
+				"border-border-button-secondary-destructive-enable",
+				"text-text-button-secondary-destructive-enable",
+				"[&_svg]:fill-icon-button-secondary-destructive-enable",
+				"hover:bg-bg-button-secondary-destructive-hover"
+			]
+		},
+		{
+			variant: "tertiary",
+			status: "danger",
+			class: [
+				"bg-bg-button-tertiary-destructive-enable",
+				"border-bg-button-tertiary-destructive-enable",
+				"text-text-button-tertiary-destructive-enable",
+				"[&_svg]:fill-icon-button-tertiary-destructive-enable",
+				"hover:bg-bg-button-tertiary-destructive-hover",
+				"hover:border-bg-button-tertiary-destructive-hover"
+			]
+		},
+		{
+			variant: "ghost",
+			status: "danger",
+			class: [
+				"bg-bg-button-ghost-destructive-enable",
+				"border-bg-button-ghost-destructive-enable",
+				"text-text-button-ghost-destructive-enable",
+				"[&_svg]:fill-icon-button-ghost-destructive-enable",
+				"hover:bg-bg-button-ghost-destructive-hover",
+				"hover:border-bg-button-ghost-destructive-hover"
+			]
+		},
+		{
+			variant: "link",
+			status: "danger",
+			class: [
+				"text-text-button-link-destructive-enable",
+				"[&_svg]:fill-icon-button-link-destructive-enable",
+				"hover:text-text-button-link-destructive-hover",
+				"hover:[&_svg]:fill-icon-button-link-destructive-hover"
+			]
+		},
+		{
+			variant: "primary",
+			status: "danger",
+			disabled: !0,
+			class: [
+				"bg-bg-button-primary-destructive-disable",
+				"border-bg-button-primary-destructive-disable",
+				"text-text-button-primary-destructive-disable",
+				"[&_svg]:fill-icon-button-primary-destructive-disable"
+			]
+		},
+		{
+			variant: "secondary",
+			status: "danger",
+			disabled: !0,
+			class: [
+				"bg-bg-button-secondary-destructive-disable",
+				"border-border-button-secondary-destructive-disable",
+				"text-text-button-secondary-destructive-disable",
+				"[&_svg]:fill-icon-button-secondary-destructive-disable"
+			]
+		},
+		{
+			variant: "tertiary",
+			status: "danger",
+			disabled: !0,
+			class: [
+				"bg-bg-button-tertiary-destructive-disable",
+				"border-bg-button-tertiary-destructive-disable",
+				"text-text-button-tertiary-destructive-disable",
+				"[&_svg]:fill-icon-button-tertiary-destructive-disable"
+			]
+		},
+		{
+			variant: "ghost",
+			status: "danger",
+			disabled: !0,
+			class: [
+				"bg-bg-button-ghost-destructive-disable",
+				"border-bg-button-ghost-destructive-disable",
+				"text-text-button-ghost-destructive-disable",
+				"[&_svg]:fill-icon-button-ghost-destructive-disable"
+			]
+		},
+		{
+			variant: "link",
+			status: "danger",
+			disabled: !0,
+			class: ["text-text-button-link-destructive-disable", "[&_svg]:fill-icon-button-link-destructive-disable"]
+		},
+		{
+			variant: "link",
+			size: [
+				"xs",
+				"sm",
+				"md",
+				"lg"
+			],
+			class: "h-auto min-w-[unset] px-0 py-0 gap-1 [&_svg]:mx-0"
+		},
+		{
+			hasOnlyIcon: !0,
+			size: "lg",
+			class: "rounded-md [&_svg]:size-8"
+		}
+	],
+	defaultVariants: {
+		variant: "primary",
+		size: "sm",
+		align: "center"
+	}
+}), u = () => /* @__PURE__ */ a("span", {
+	"aria-label": "loading",
+	role: "status",
+	className: e("absolute inset-0 grid place-items-center", "rounded-[inherit] bg-inherit", "before:content-[\"\"] before:block before:size-[1em]", "before:border-2 before:border-solid before:rounded-full", "before:border-current before:border-t-transparent", "before:animate-spin before:[animation-duration:0.5s]")
+}), d = (e, n) => {
+	if (n) return e;
+	let i = [], o = [];
+	return t.forEach(e, (e) => {
+		r(e) ? (i.length > 0 && o.push(/* @__PURE__ */ a("span", {
+			"data-slot": "button-label",
+			children: i.splice(0, i.length)
+		}, `text-${o.length}`)), o.push(e)) : e && i.push(e);
+	}), i.length > 0 && o.push(/* @__PURE__ */ a("span", {
+		"data-slot": "button-label",
+		children: i
+	}, `text-${o.length}`)), o;
+}, f = ({ children: i, asChild: f, variant: p, size: m, status: h, loading: g, rounded: _, align: v, fitContent: y, disabled: b, iconOnly: x, ref: S, className: C, ...w }) => {
+	let T = f ? !!x : t.toArray(i).every((e) => r(e)), E = b || g;
+	process.env.NODE_ENV !== "production" && (g && p === "link" && console.warn("Button with variant link and loading is not supported"), T && p === "link" && console.warn("Button with no text and variant link is not supported. Use it with variant tertiary instead"), f && x && r(i) && t.toArray(i.props.children).some((e) => !r(e)) && console.warn("Button with asChild and iconOnly should only contain icon children; text found inside the wrapper element"));
+	let D = e(l({
+		variant: p,
+		size: m,
+		hasOnlyIcon: T,
+		disabled: E,
+		status: h,
+		rounded: _,
+		align: v,
+		fitContent: y
+	}), C), O = f ? s : "button", k = f ? {
+		"aria-disabled": E || void 0,
+		"data-disabled": E || void 0
+	} : { disabled: E }, A = f && r(i) ? n(i, void 0, d(i.props.children, T)) : i;
+	return /* @__PURE__ */ o(O, {
+		"data-slot": "button",
+		...k,
+		...w,
+		className: D,
+		ref: S,
+		children: [g && /* @__PURE__ */ a(u, {}), f ? /* @__PURE__ */ a(c, { children: A }) : d(i, T)]
+	});
+};
+//#endregion
+export { f as Button };

package/src/button/index.d.ts

@@ -0,0 +1,2 @@
+export { Button } from './button';
+export type { ButtonProps, ButtonSizeType, ButtonVariantType } from './button';

package/src/button/index.js

@@ -0,0 +1,2 @@
+import { Button as e } from "./button.js";
+export { e as Button };