@astryxdesign/cli 0.1.7 → 0.1.8-canary.07362a9

package/templates/blocks/components/ChatComposer/ChatComposerFlat.tsx

@@ -0,0 +1,75 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {ChatComposer} from '@astryxdesign/core/Chat';
+import {Button} from '@astryxdesign/core/Button';
+import {DropdownMenu} from '@astryxdesign/core/DropdownMenu';
+import {Icon} from '@astryxdesign/core/Icon';
+import {Stack} from '@astryxdesign/core/Layout';
+import {Text} from '@astryxdesign/core/Text';
+import {
+  Cog6ToothIcon,
+  MicrophoneIcon,
+  SparklesIcon,
+} from '@heroicons/react/24/outline';
+
+export default function ChatComposerFlat() {
+  return (
+    <Stack direction="vertical" gap={2} style={{width: '100%', maxWidth: 450}}>
+      <Text type="supporting" color="secondary">
+        elevation=&quot;none&quot; — flat, with a text-input-style border and
+        focus ring
+      </Text>
+      <ChatComposer
+        elevation="none"
+        onSubmit={value => {
+          console.log('Sent:', value);
+        }}
+        footerActions={
+          <>
+            <DropdownMenu
+              button={{
+                label: 'Auto',
+                variant: 'ghost',
+                size: 'md',
+                icon: <Icon icon={SparklesIcon} size="sm" />,
+                children: 'Auto',
+              }}
+              menuWidth={200}
+              items={[
+                {label: 'Auto', onClick: () => {}},
+                {label: 'Model A', onClick: () => {}},
+                {label: 'Model B', onClick: () => {}},
+              ]}
+            />
+            <DropdownMenu
+              button={{
+                label: 'Settings',
+                variant: 'ghost',
+                size: 'md',
+                icon: <Icon icon={Cog6ToothIcon} size="sm" />,
+                children: 'Settings',
+              }}
+              menuWidth={200}
+              items={[
+                {label: 'Preferences', onClick: () => {}},
+                {label: 'Keyboard shortcuts', onClick: () => {}},
+                {label: 'About', onClick: () => {}},
+              ]}
+            />
+          </>
+        }
+        sendActions={
+          <Button
+            label="Microphone"
+            variant="ghost"
+            size="md"
+            icon={<Icon icon={MicrophoneIcon} />}
+            isIconOnly
+          />
+        }
+      />
+    </Stack>
+  );
+}

package/templates/blocks/components/ChatMessage/ChatMessageAvatarName.tsx

@@ -17,7 +17,7 @@ export default function ChatMessageAvatarName() {
     <ChatMessageList style={{maxWidth: 500}}>
       <ChatMessage
         sender="assistant"
-        avatar={<Avatar name="Agent" size="small" />}>
+        avatar={<Avatar name="Agent" size="md" />}>
         <ChatMessageBubble
           name={
             <Text type="supporting" weight="semibold" color="secondary">
@@ -50,7 +50,7 @@ export default function ChatMessageAvatarName() {
       </ChatMessage>
       <ChatMessage
         sender="assistant"
-        avatar={<Avatar name="Agent" size="small" />}>
+        avatar={<Avatar name="Agent" size="md" />}>
         <ChatMessageBubble
           name={
             <Text type="supporting" weight="semibold" color="secondary">

package/templates/blocks/components/ChatMessage/ChatMessageMultiBubble.tsx

@@ -37,7 +37,7 @@ export default function ChatMessageMultiBubble() {
       </ChatMessage>
       <ChatMessage
         sender="assistant"
-        avatar={<Avatar name="Agent" size="small" />}>
+        avatar={<Avatar name="Agent" size="md" />}>
         <ChatMessageBubble
           group="first"
           name={

package/templates/blocks/components/ChatMessageBubble/ChatMessageBubbleGrouping.tsx

@@ -17,7 +17,7 @@ export default function ChatMessageBubbleGrouping() {
     <ChatMessageList style={{maxWidth: 500}}>
       <ChatMessage
         sender="assistant"
-        avatar={<Avatar name="Agent" size="small" />}>
+        avatar={<Avatar name="Agent" size="md" />}>
         <ChatMessageBubble
           group="first"
           name={

package/templates/blocks/components/ChatMessageBubble/ChatMessageBubbleMetadata.tsx

@@ -20,7 +20,7 @@ export default function ChatMessageBubbleMetadata() {
     <ChatMessageList style={{maxWidth: 500}}>
       <ChatMessage
         sender="assistant"
-        avatar={<Avatar name="Agent" size="small" />}>
+        avatar={<Avatar name="Agent" size="md" />}>
         <ChatMessageBubble
           name={
             <Text type="supporting" weight="semibold" color="secondary">

package/templates/blocks/components/ChatMessageList/ChatMessageListDensity.tsx

@@ -16,9 +16,9 @@ import {Fragment} from 'react';
 const DENSITIES = ['compact', 'balanced', 'spacious'] as const;
 
 const AVATAR_SIZE = {
-  compact: 'xsmall' as const,
-  balanced: 'small' as const,
-  spacious: 'small' as const,
+  compact: 'sm' as const,
+  balanced: 'md' as const,
+  spacious: 'md' as const,
 };
 
 export default function ChatMessageListDensity() {
@@ -34,15 +34,11 @@ export default function ChatMessageListDensity() {
             <VStack style={{flex: 1, minHeight: 0}}>
               <ChatMessageList density={density}>
                 <ChatMessage sender="user">
-                  <ChatMessageBubble>
-                    How does density work?
-                  </ChatMessageBubble>
+                  <ChatMessageBubble>How does density work?</ChatMessageBubble>
                 </ChatMessage>
                 <ChatMessage
                   sender="assistant"
-                  avatar={
-                    <Avatar name="Agent" size={AVATAR_SIZE[density]} />
-                  }>
+                  avatar={<Avatar name="Agent" size={AVATAR_SIZE[density]} />}>
                   <ChatMessageBubble>
                     Density provides default spacing at every level — message
                     gap, bubble padding, and gap between child elements. Use gap

package/templates/blocks/components/ChatMessageList/ChatMessageListFullFeatured.tsx

@@ -42,7 +42,7 @@ export default function ChatMessageListFullFeatured() {
 
         <ChatMessage
           sender="assistant"
-          avatar={<Avatar name="Agent" size="small" />}>
+          avatar={<Avatar name="Agent" size="md" />}>
           <ChatMessageBubble group="first">
             <Markdown density="compact">
               {`Sure! Here's the key pattern from **useReducer.ts**:`}

package/templates/blocks/components/CodeBlock/CodeBlockTerminal.tsx

@@ -7,7 +7,7 @@ import {githubDark} from '@astryxdesign/core/theme/syntax';
 import {CodeBlock} from '@astryxdesign/core/CodeBlock';
 
 const commands = `$ astryx init --features agents
-✓ AI agent docs installed → .claude/CLAUDE.md
+✓ AI agent docs installed → AGENTS.md
 $ pnpm astryx component CodeBlock --dense`;
 
 export default function CodeBlockTerminal() {

package/templates/blocks/components/HoverCard/HoverCardShowcase.tsx

@@ -15,7 +15,7 @@ export default function HoverCardShowcase() {
       content={
         <Stack direction="vertical" gap={2} style={{width: 240}}>
           <Stack direction="horizontal" gap={2} vAlign="center">
-            <Avatar name="Jane Doe" size="medium" />
+            <Avatar name="Jane Doe" size="lg" />
             <Stack direction="vertical" gap={0}>
               <Heading level={5}>Jane Doe</Heading>
               <Text type="supporting" color="secondary">

package/templates/blocks/components/IconButton/IconButtonFloating.doc.mjs

@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'IconButton',
+  name: 'IconButton — Floating',
+  displayName: 'IconButton — Floating',
+  description:
+    'A floating action button (FAB) — the most common floating-button shape is icon-only. Raised here with `elevation="high"`.',
+  isReady: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: ['IconButton', 'Icon', 'Layout', 'Text'],
+};

package/templates/blocks/components/IconButton/IconButtonFloating.tsx

@@ -0,0 +1,37 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {IconButton} from '@astryxdesign/core/IconButton';
+import {Icon} from '@astryxdesign/core/Icon';
+import {Stack} from '@astryxdesign/core/Layout';
+import {Text} from '@astryxdesign/core/Text';
+import {PlusIcon} from '@heroicons/react/24/outline';
+
+const VARIANTS = [
+  {variant: 'primary' as const, label: 'Primary'},
+  {variant: 'secondary' as const, label: 'Secondary'},
+  {variant: 'ghost' as const, label: 'Ghost'},
+  {variant: 'destructive' as const, label: 'Destructive'},
+];
+
+export default function IconButtonFloating() {
+  return (
+    <Stack direction="vertical" gap={4}>
+      <Text type="supporting" color="secondary">
+        FABs are usually icon-only — raise one with `elevation="high"`
+      </Text>
+      <Stack direction="horizontal" gap={3} vAlign="center">
+        {VARIANTS.map(({variant, label}) => (
+          <IconButton
+            key={variant}
+            label={label}
+            variant={variant}
+            icon={<Icon icon={PlusIcon} />}
+            elevation="high"
+          />
+        ))}
+      </Stack>
+    </Stack>
+  );
+}

package/templates/blocks/components/InternationalizationProvider/InternationalizationProvider01ShippedLocale.doc.mjs

@@ -0,0 +1,19 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'InternationalizationProvider',
+  name: 'InternationalizationProvider — Shipped Locale',
+  displayName: 'Internationalization Provider — Shipped Locale',
+  description:
+    'Load a locale catalog shipped by Astryx and re-render InternationalizationProvider with a new locale to update Astryx strings live.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: [
+    'InternationalizationProvider',
+    'SegmentedControl',
+    'Selector',
+    'Layout',
+  ],
+};

package/templates/blocks/components/InternationalizationProvider/InternationalizationProvider01ShippedLocale.tsx

@@ -0,0 +1,46 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useState} from 'react';
+import {InternationalizationProvider} from '@astryxdesign/core/i18n';
+import frFR from '@astryxdesign/core/locales/fr-FR.json';
+import {Stack} from '@astryxdesign/core/Layout';
+import {
+  SegmentedControl,
+  SegmentedControlItem,
+} from '@astryxdesign/core/SegmentedControl';
+import {Selector} from '@astryxdesign/core/Selector';
+
+type Locale = 'en' | 'fr-FR';
+
+export default function InternationalizationProviderShippedLocale() {
+  const [locale, setLocale] = useState<Locale>('en');
+  const [value, setValue] = useState<string | null>(null);
+  return (
+    <InternationalizationProvider locale={locale} messages={{'fr-FR': frFR}}>
+      <Stack direction="vertical" gap={4} hAlign="center">
+        <SegmentedControl
+          label="Language"
+          value={locale}
+          onChange={nextLocale => setLocale(nextLocale as Locale)}
+          size="sm">
+          <SegmentedControlItem value="en" label="EN" />
+          <SegmentedControlItem value="fr-FR" label="FR" />
+        </SegmentedControl>
+        <Selector
+          style={{width: 300}}
+          label="Billing region"
+          options={[
+            {value: 'americas', label: 'Americas'},
+            {value: 'emea', label: 'EMEA'},
+            {value: 'apac', label: 'APAC'},
+          ]}
+          value={value}
+          onChange={setValue}
+          hasClear
+        />
+      </Stack>
+    </InternationalizationProvider>
+  );
+}

package/templates/blocks/components/InternationalizationProvider/InternationalizationProvider02Overrides.doc.mjs

@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'InternationalizationProvider',
+  name: 'InternationalizationProvider — Overrides',
+  displayName: 'Internationalization Provider — Overrides',
+  description:
+    'Override a small number of Astryx strings without providing a full locale catalog.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['InternationalizationProvider', 'Selector'],
+};

package/templates/blocks/components/InternationalizationProvider/InternationalizationProvider02Overrides.tsx

@@ -0,0 +1,33 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useState} from 'react';
+import {InternationalizationProvider} from '@astryxdesign/core/i18n';
+import {Selector} from '@astryxdesign/core/Selector';
+
+export default function InternationalizationProviderOverrides() {
+  const [value, setValue] = useState<string | null>(null);
+  return (
+    <InternationalizationProvider
+      locale="en"
+      overrides={{
+        en: {
+          '@astryx.selector.placeholder': 'Choose...',
+        },
+      }}>
+      <Selector
+        style={{width: 300}}
+        label="Billing region"
+        options={[
+          {value: 'americas', label: 'Americas'},
+          {value: 'emea', label: 'EMEA'},
+          {value: 'apac', label: 'APAC'},
+        ]}
+        value={value}
+        onChange={setValue}
+        hasClear
+      />
+    </InternationalizationProvider>
+  );
+}

package/templates/blocks/components/Item/ItemWithMedia.tsx

@@ -13,14 +13,14 @@ export default function ItemWithMedia() {
   return (
     <Stack gap={0}>
       <Item
-        startContent={<Avatar name="Ada Lovelace" size="xsmall" />}
+        startContent={<Avatar name="Ada Lovelace" size="sm" />}
         label="Ada Lovelace"
         description="Design systems engineer"
         endContent={<Badge label="Owner" variant="purple" />}
         onClick={() => {}}
       />
       <Item
-        startContent={<Avatar name="Grace Hopper" size="xsmall" />}
+        startContent={<Avatar name="Grace Hopper" size="sm" />}
         label="Grace Hopper"
         description="Compiler platform"
         endContent={<Text color="secondary">Online</Text>}

package/templates/blocks/components/ListItem/ListItemWithMedia.tsx

@@ -13,14 +13,14 @@ export default function ListItemWithMedia() {
       <ListItem
         label="Ada Lovelace"
         description="Design systems engineer"
-        startContent={<Avatar name="Ada Lovelace" size="xsmall" />}
+        startContent={<Avatar name="Ada Lovelace" size="sm" />}
         endContent={<Badge label="Owner" variant="purple" />}
         onClick={() => {}}
       />
       <ListItem
         label="Grace Hopper"
         description="Platform infrastructure"
-        startContent={<Avatar name="Grace Hopper" size="xsmall" />}
+        startContent={<Avatar name="Grace Hopper" size="sm" />}
         endContent={<Badge label="On call" variant="blue" />}
         onClick={() => {}}
       />

package/templates/blocks/components/OverflowList/OverflowListCappedToolbar.doc.mjs

@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'OverflowList',
+  name: 'OverflowList — Capped Toolbar',
+  displayName: 'OverflowList — Capped Toolbar',
+  description:
+    'maxVisibleItems caps the row at three actions even when more would fit; the rest move to a dropdown',
+  isReady: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: ['OverflowList', 'Button', 'DropdownMenu', 'Card', 'Center'],
+};

package/templates/blocks/components/OverflowList/OverflowListCappedToolbar.tsx

@@ -0,0 +1,39 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {OverflowList} from '@astryxdesign/core/OverflowList';
+import {Button} from '@astryxdesign/core/Button';
+import {DropdownMenu} from '@astryxdesign/core/DropdownMenu';
+import {Card} from '@astryxdesign/core/Card';
+import {Center} from '@astryxdesign/core/Center';
+
+const actions = ['Save', 'Edit', 'Duplicate', 'Share', 'Archive', 'Delete'];
+
+export default function OverflowListCappedToolbar() {
+  return (
+    <Center width={420}>
+      <Card padding={2}>
+        <OverflowList
+          gap={2}
+          maxVisibleItems={3}
+          overflowRenderer={overflowItems => (
+            <DropdownMenu
+              button={{
+                label: `+${overflowItems.length}`,
+                variant: 'ghost',
+                size: 'sm',
+              }}
+              items={overflowItems.map(({index}) => ({
+                label: actions[index],
+              }))}
+            />
+          )}>
+          {actions.map(action => (
+            <Button key={action} label={action} size="sm" />
+          ))}
+        </OverflowList>
+      </Card>
+    </Center>
+  );
+}

package/templates/blocks/components/OverflowList/OverflowListMultiRowTags.doc.mjs

@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'OverflowList',
+  name: 'OverflowList — Multi-row Tags',
+  displayName: 'OverflowList — Multi-row Tags',
+  description:
+    'Tags wrap onto up to two rows with maxRows, then collapse the rest into a count badge',
+  isReady: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: ['OverflowList', 'Badge', 'Card'],
+};

package/templates/blocks/components/OverflowList/OverflowListMultiRowTags.tsx

@@ -0,0 +1,44 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {OverflowList} from '@astryxdesign/core/OverflowList';
+import {Badge} from '@astryxdesign/core/Badge';
+import {Card} from '@astryxdesign/core/Card';
+
+const tags = [
+  'React',
+  'TypeScript',
+  'StyleX',
+  'Storybook',
+  'Vitest',
+  'Playwright',
+  'ESLint',
+  'Prettier',
+  'Vite',
+  'pnpm',
+];
+
+export default function OverflowListMultiRowTags() {
+  return (
+    <Card
+      padding={2}
+      style={{
+        resize: 'horizontal',
+        overflow: 'hidden',
+        minWidth: 120,
+        width: 260,
+      }}>
+      <OverflowList
+        gap={1}
+        maxRows={2}
+        overflowRenderer={overflowItems => (
+          <Badge variant="neutral" label={`+${overflowItems.length}`} />
+        )}>
+        {tags.map(tag => (
+          <Badge key={tag} variant="info" label={tag} />
+        ))}
+      </OverflowList>
+    </Card>
+  );
+}

package/templates/blocks/components/Pagination/PaginationDotsCarousel.tsx

@@ -62,12 +62,8 @@ export default function PaginationDotsCarousel() {
         <Stack direction="vertical" gap={3}>
           <Stars count={review.stars} />
           <Text type="body">{review.quote}</Text>
-          <Stack
-            direction="horizontal"
-            gap={3}
-            vAlign="center"
-            hAlign="start">
-            <Avatar name={review.name} size="small" />
+          <Stack direction="horizontal" gap={3} vAlign="center" hAlign="start">
+            <Avatar name={review.name} size="md" />
             <Stack direction="vertical" gap={0}>
               <Text type="supporting" weight="bold">
                 {review.name}

package/templates/blocks/components/Stack/StackFillItem.tsx

@@ -17,13 +17,9 @@ export default function StackFillItem() {
   return (
     <Stack direction="vertical" gap={3} width="100%" style={{maxWidth: 300}}>
       {USERS.map(user => (
-        <Stack
-          key={user.name}
-          direction="horizontal"
-          gap={3}
-          vAlign="center">
+        <Stack key={user.name} direction="horizontal" gap={3} vAlign="center">
           <StackItem size="static">
-            <Avatar name={user.name} size="small" />
+            <Avatar name={user.name} size="md" />
           </StackItem>
           <StackItem size="fill">
             <Stack direction="vertical" gap={0}>

package/templates/blocks/components/TabList/TabListTabsWithActions.doc.mjs

@@ -7,7 +7,7 @@ export const doc = {
   name: 'TabList — With Actions',
   displayName: 'TabList — With Actions',
   description:
-    'Page header pattern with tabs on the left and action buttons pushed to the right. When hasDivider is true, pair with a smaller button size (sm) so actions don\'t overpower the tab row.',
+    'Page header pattern with tabs on the left and action buttons pushed to the right. When hasDivider is true, match the Button size to the TabList size so the tabs and actions align to a shared baseline above the divider.',
   isReady: true,
   aspectRatio: 4 / 3,
   componentsUsed: ['TabList', 'Tab', 'Button'],

package/templates/blocks/components/TabList/TabListTabsWithActions.tsx

@@ -55,16 +55,11 @@ export default function TabListTabsWithActions() {
         <Button
           label="Filter"
           variant="ghost"
-          size="sm"
+          size="lg"
           icon={FilterIcon}
           isIconOnly
         />
-        <Button
-          label="New item"
-          variant="primary"
-          size="sm"
-          icon={PlusIcon}
-        />
+        <Button label="New item" variant="primary" size="lg" icon={PlusIcon} />
       </div>
     </TabList>
   );

package/templates/blocks/components/Table/TableRowStatusTable.doc.mjs

@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'useTableRowStatus',
+  name: 'useTableRowStatus - Status Dots',
+  displayName: 'useTableRowStatus - Status Dots',
+  description:
+    'A job table using useTableRowStatus to render a colored status dot (or icon) per row (failed / running / queued). Rows with no status show no dot.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['Table'],
+};

package/templates/blocks/components/Table/TableRowStatusTable.tsx

@@ -0,0 +1,59 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {
+  Table,
+  useTableRowStatus,
+  proportional,
+  pixel,
+} from '@astryxdesign/core/Table';
+import type {TableColumn, TableRowStatus} from '@astryxdesign/core/Table';
+
+interface Job extends Record<string, unknown> {
+  id: string;
+  name: string;
+  owner: string;
+  state: 'failed' | 'running' | 'queued' | 'succeeded';
+}
+
+const jobs: Job[] = [
+  {id: 'j1', name: 'build-core', owner: 'Ava', state: 'failed'},
+  {id: 'j2', name: 'lint', owner: 'Liam', state: 'running'},
+  {id: 'j3', name: 'unit-tests', owner: 'Zoe', state: 'succeeded'},
+  {id: 'j4', name: 'docsite-deploy', owner: 'Max', state: 'queued'},
+  {id: 'j5', name: 'smoke-test', owner: 'Mia', state: 'succeeded'},
+];
+
+const columns: TableColumn<Job>[] = [
+  {key: 'name', header: 'Job', width: proportional(2)},
+  {key: 'owner', header: 'Owner', width: pixel(120)},
+  {key: 'state', header: 'State', width: pixel(120)},
+];
+
+function jobStatus(job: Job): TableRowStatus | null {
+  switch (job.state) {
+    case 'failed':
+      return {color: 'error', icon: 'error', label: 'Failed'};
+    case 'running':
+      return {color: 'warning', icon: 'warning', label: 'Running'};
+    case 'queued':
+      return {color: 'gray', label: 'Queued'};
+    default:
+      return null; // succeeded: no dot
+  }
+}
+
+export default function TableRowStatusTable() {
+  const rowStatus = useTableRowStatus<Job>({getStatus: jobStatus});
+
+  return (
+    <Table
+      data={jobs}
+      columns={columns}
+      idKey="id"
+      hasHover
+      plugins={{rowStatus}}
+    />
+  );
+}