@agentero/design-system 0.0.4 → 0.0.5

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":1576}}
+{"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}}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@agentero/design-system",
-	"version": "0.0.4",
+	"version": "0.0.5",
 	"description": "A React component library built with Tailwind CSS v4 and Radix UI primitives",
 	"type": "module",
 	"license": "Apache-2.0",
@@ -29,7 +29,7 @@
 			"types": "./lib/index.d.ts",
 			"import": "./lib/index.js"
 		},
-		"./theme": "./theme/base.css",
+		"./theme.css": "./theme/base.css",
 		"./mcp": "./mcp/server.mjs",
 		"./package.json": "./package.json"
 	},

package/theme/base.css

@@ -601,6 +601,15 @@
   --ease-out: cubic-bezier(0, 0, 0.2, 1);
   --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
 
+  /* ========================================
+    * ANIMATIONS
+    * ======================================== */
+
+  --animate-cmd-overlay-in: cmd-overlay-in 200ms cubic-bezier(0.23, 1, 0.32, 1);
+  --animate-cmd-overlay-out: cmd-overlay-out 150ms ease-in forwards;
+  --animate-cmd-content-in: cmd-content-in 200ms cubic-bezier(0.23, 1, 0.32, 1);
+  --animate-cmd-content-out: cmd-content-out 150ms ease-in forwards;
+
   /* ========================================
     * Z-INDEX
     * ======================================== */
@@ -640,6 +649,50 @@
     }
   }
 
+  @keyframes cmd-overlay-in {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes cmd-overlay-out {
+    from {
+      opacity: 1;
+    }
+    to {
+      opacity: 0;
+    }
+  }
+
+  @keyframes cmd-content-in {
+    from {
+      opacity: 0;
+      scale: 0.95;
+      translate: -50% 8px;
+    }
+    to {
+      opacity: 1;
+      scale: 1;
+      translate: -50% 0;
+    }
+  }
+
+  @keyframes cmd-content-out {
+    from {
+      opacity: 1;
+      scale: 1;
+      translate: -50% 0;
+    }
+    to {
+      opacity: 0;
+      scale: 0.95;
+      translate: -50% 8px;
+    }
+  }
+
   @keyframes toast-slide-in {
     from {
       opacity: 0;
@@ -698,4 +751,11 @@
   i {
     font-style: italic;
   }
+
+  @media (prefers-reduced-motion: reduce) {
+    [cmdk-overlay],
+    [cmdk-dialog] {
+      animation: none;
+    }
+  }
 }