@agentero/design-system 0.1.0 → 0.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/mcp/manifests/components.html +3 -5
  2. package/mcp/manifests/components.json +1 -1
  3. package/package.json +1 -1
  4. package/src/button/button.d.ts +3 -5
  5. package/src/button/button.js +29 -46
package/mcp/manifests/components.html CHANGED
@@ -965,10 +965,8 @@ asChild?: boolean
965
965
 
966
966
  /**
967
967
  * Content rendered inside the Button. Accepts a text label, icon elements,
968
- * or any mix of both. Text runs are wrapped in a truncating
969
- * `<span data-slot="button-label">` so the label ellipsizes without
970
- * shrinking adjacent icons; icon-only children switch the Button to a
971
- * square aspect ratio and trigger the icon-only layout.
968
+ * or any mix of both. Icon-only children switch the Button to a square
969
+ * aspect ratio and trigger the icon-only layout.
972
970
  *
973
971
  * When `asChild` is set, the single child element is merged with Button's
974
972
  * props and styles; auto-detection of icon-only children is skipped — use
@@ -1127,7 +1125,7 @@ variant?: ButtonVariantType</code></pre>
1127
1125
  <span class="badge ok">story ok</span>
1128
1126
  </div>
1129
1127
  <div>Variant × size grid with leading + trailing icons</div>
1130
- <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>
1128
+ <div class="hint">Variant × size grid with leading and trailing icons.</div>
1131
1129
  <pre><code>const WithIcons = () =&gt; (
1132
1130
  &lt;Stack&gt;
1133
1131
  {VARIANTS.map(variant =&gt; (
package/mcp/manifests/components.json CHANGED
@@ -1 +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"}},"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}}
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"}},"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.","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. Icon-only children switch the Button to a square\naspect 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":1642}}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@agentero/design-system",
3
- "version": "0.1.0",
3
+ "version": "0.1.1",
4
4
  "description": "A React component library built with Tailwind CSS v4 and Radix UI primitives",
5
5
  "type": "module",
6
6
  "license": "Apache-2.0",
package/src/button/button.d.ts CHANGED
@@ -11,7 +11,7 @@ import { ButtonHTMLAttributes, ReactNode, Ref } from 'react';
11
11
  *
12
12
  * @summary tailwind-variants recipe backing the Button component styles
13
13
  */
14
- export declare const buttonStyle: import('tailwind-variants').TVReturnType<{
14
+ export declare const buttonRecipe: import('tailwind-variants').TVReturnType<{
15
15
  variant: {
16
16
  primary: string[];
17
17
  secondary: string[];
@@ -132,10 +132,8 @@ export type ButtonSizeType = 'xs' | 'sm' | 'md' | 'lg';
132
132
  type ButtonBaseProps = {
133
133
  /**
134
134
  * Content rendered inside the Button. Accepts a text label, icon elements,
135
- * or any mix of both. Text runs are wrapped in a truncating
136
- * `<span data-slot="button-label">` so the label ellipsizes without
137
- * shrinking adjacent icons; icon-only children switch the Button to a
138
- * square aspect ratio and trigger the icon-only layout.
135
+ * or any mix of both. Icon-only children switch the Button to a square
136
+ * aspect ratio and trigger the icon-only layout.
139
137
  *
140
138
  * When `asChild` is set, the single child element is merged with Button's
141
139
  * props and styles; auto-detection of icon-only children is skipped — use
package/src/button/button.js CHANGED
@@ -1,11 +1,11 @@
1
1
  "use client";
2
2
  import { cn as e } from "../../lib/utils.js";
3
- import { Children as t, cloneElement as n, isValidElement as r } from "react";
4
- import { tv as i } from "tailwind-variants";
5
- import { jsx as a, jsxs as o } from "react/jsx-runtime";
6
- import { Slot as s, Slottable as c } from "@radix-ui/react-slot";
3
+ import { Children as t, isValidElement as n } from "react";
4
+ import { tv as r } from "tailwind-variants";
5
+ import { jsx as i, jsxs as a } from "react/jsx-runtime";
6
+ import { Slot as o, Slottable as s } from "@radix-ui/react-slot";
7
7
  //#region src/button/button.tsx
8
- var l = i({
8
+ var c = r({
9
9
  base: [
10
10
  "relative inline-flex items-center",
11
11
  "font-semibold rounded-md cursor-pointer",
@@ -13,11 +13,6 @@ var l = i({
13
13
  "border border-solid border-transparent",
14
14
  "transition-[background-color,border-color,color] duration-200",
15
15
  "[-webkit-tap-highlight-color:transparent]",
16
- "[&_[data-slot=button-label]]:overflow-hidden",
17
- "[&_[data-slot=button-label]]:text-ellipsis",
18
- "[&_[data-slot=button-label]]:whitespace-nowrap",
19
- "[&_[data-slot=button-label]]:[flex:0_1_auto]",
20
- "[&_[data-slot=button-label]]:min-w-0",
21
16
  "[&_svg]:[flex:0_0_fit-content]",
22
17
  "disabled:cursor-not-allowed disabled:pointer-events-none",
23
18
  "focus-visible:outline-solid focus-visible:outline-2",
@@ -247,46 +242,34 @@ var l = i({
247
242
  size: "sm",
248
243
  align: "center"
249
244
  }
250
- }), u = () => /* @__PURE__ */ a("span", {
245
+ }), l = () => /* @__PURE__ */ i("span", {
251
246
  "aria-label": "loading",
252
247
  role: "status",
253
248
  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]")
254
- }), d = (e, n) => {
255
- if (n) return e;
256
- let i = [], o = [];
257
- return t.forEach(e, (e) => {
258
- r(e) ? (i.length > 0 && o.push(/* @__PURE__ */ a("span", {
259
- "data-slot": "button-label",
260
- children: i.splice(0, i.length)
261
- }, `text-${o.length}`)), o.push(e)) : e && i.push(e);
262
- }), i.length > 0 && o.push(/* @__PURE__ */ a("span", {
263
- "data-slot": "button-label",
264
- children: i
265
- }, `text-${o.length}`)), o;
266
- }, 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 }) => {
267
- let T = f ? !!x : t.toArray(i).every((e) => r(e)), E = b || g;
268
- 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"));
269
- let D = e(l({
270
- variant: p,
271
- size: m,
272
- hasOnlyIcon: T,
273
- disabled: E,
274
- status: h,
275
- rounded: _,
276
- align: v,
277
- fitContent: y
278
- }), C), O = f ? s : "button", k = f ? {
279
- "aria-disabled": E || void 0,
280
- "data-disabled": E || void 0
281
- } : { disabled: E }, A = f && r(i) ? n(i, void 0, d(i.props.children, T)) : i;
282
- return /* @__PURE__ */ o(O, {
249
+ }), u = ({ children: r, asChild: u, variant: d, size: f, status: p, loading: m, rounded: h, align: g, fitContent: _, disabled: v, iconOnly: y, ref: b, className: x, ...S }) => {
250
+ let C = u ? !!y : t.toArray(r).every((e) => n(e)), w = v || m;
251
+ process.env.NODE_ENV !== "production" && (m && d === "link" && console.warn("Button with variant link and loading is not supported"), C && d === "link" && console.warn("Button with no text and variant link is not supported. Use it with variant tertiary instead"), u && y && n(r) && t.toArray(r.props.children).some((e) => !n(e)) && console.warn("Button with asChild and iconOnly should only contain icon children; text found inside the wrapper element"));
252
+ let T = e(c({
253
+ variant: d,
254
+ size: f,
255
+ hasOnlyIcon: C,
256
+ disabled: w,
257
+ status: p,
258
+ rounded: h,
259
+ align: g,
260
+ fitContent: _
261
+ }), x), E = u ? o : "button", D = u ? {
262
+ "aria-disabled": w || void 0,
263
+ "data-disabled": w || void 0
264
+ } : { disabled: w };
265
+ return /* @__PURE__ */ a(E, {
283
266
  "data-slot": "button",
284
- ...k,
285
- ...w,
286
- className: D,
287
- ref: S,
288
- children: [g && /* @__PURE__ */ a(u, {}), f ? /* @__PURE__ */ a(c, { children: A }) : d(i, T)]
267
+ ...D,
268
+ ...S,
269
+ className: T,
270
+ ref: b,
271
+ children: [m && /* @__PURE__ */ i(l, {}), u ? /* @__PURE__ */ i(s, { children: r }) : r]
289
272
  });
290
273
  };
291
274
  //#endregion
292
- export { f as Button };
275
+ export { u as Button };