@astryxdesign/cli 0.6.3 → 0.6.4-canary.0e1fbdb

package/assets/templates/blocks/components/ScrollableArea/ScrollableAreaStickyGroupHeaders.tsx

@@ -0,0 +1,99 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import * as stylex from '@stylexjs/stylex';
+import {ScrollableArea} from '@astryxdesign/core/ScrollableArea';
+import {Card} from '@astryxdesign/core/Card';
+import {Grid} from '@astryxdesign/core/Grid';
+import {VStack} from '@astryxdesign/core/Layout';
+import {Heading, Text} from '@astryxdesign/core/Text';
+import {colorVars, spacingVars} from '@astryxdesign/core/theme/tokens.stylex';
+
+const styles = stylex.create({
+  sectionLabel: {
+    position: 'sticky',
+    insetBlockStart: 0,
+    zIndex: 1,
+    backgroundColor: colorVars['--color-background-card'],
+    paddingBlock: spacingVars['--spacing-2'],
+  },
+});
+
+const SECTIONS = [
+  {
+    label: 'Recently opened',
+    files: [
+      {id: 'brief', title: 'Q3 launch brief', meta: 'Edited 2 days ago'},
+      {id: 'pricing', title: 'Pricing rework', meta: 'Edited 3 days ago'},
+      {
+        id: 'onboarding',
+        title: 'Onboarding flow v4',
+        meta: 'Edited 4 days ago',
+      },
+      {id: 'macros', title: 'Support macros', meta: 'Edited last week'},
+    ],
+  },
+  {
+    label: 'Shared with you',
+    files: [
+      {id: 'brand', title: 'Brand refresh', meta: 'Priya Raman'},
+      {id: 'checkout', title: 'Checkout audit', meta: 'Tomas Lindqvist'},
+      {id: 'partner', title: 'Partner deck', meta: 'Ines Okafor'},
+      {id: 'research', title: 'Research synthesis', meta: 'Mei Watanabe'},
+    ],
+  },
+  {
+    label: 'Archived',
+    files: [
+      {id: 'roadmap', title: '2025 roadmap', meta: 'Archived in March'},
+      {id: 'legacy', title: 'Legacy pricing', meta: 'Archived in March'},
+      {id: 'kit', title: 'Old brand kit', meta: 'Archived in January'},
+      {id: 'beta', title: 'Beta feedback', meta: 'Archived in January'},
+    ],
+  },
+];
+
+export default function ScrollableAreaStickyGroupHeaders() {
+  return (
+    <Card width={380} padding={0}>
+      {/* The viewport is the containing block for position: sticky. The panel
+          heading is ordinary content and scrolls away; the section labels
+          below it pin to the top of the list, not the page. */}
+      <ScrollableArea
+        axis="block"
+        role="region"
+        label="Workspace files"
+        height={300}
+        padding={4}>
+        <VStack gap={0.5} paddingBlockEnd={2}>
+          <Heading level={3}>Workspace files</Heading>
+          <Text type="supporting">12 files across 3 sections</Text>
+        </VStack>
+        {SECTIONS.map(section => (
+          <section key={section.label}>
+            <div {...stylex.props(styles.sectionLabel)}>
+              <Text type="label" color="secondary">
+                {section.label}
+              </Text>
+            </div>
+            <Grid columns={2} gap={2}>
+              {section.files.map(file => (
+                <Card key={file.id} variant="muted" padding={3}>
+                  <VStack gap={1}>
+                    <Text weight="medium" maxLines={1}>
+                      {file.title}
+                    </Text>
+                    <Text type="supporting" maxLines={1}>
+                      {file.meta}
+                    </Text>
+                  </VStack>
+                </Card>
+              ))}
+            </Grid>
+          </section>
+        ))}
+      </ScrollableArea>
+    </Card>
+  );
+}

package/assets/templates/blocks/components/ScrollableArea/ScrollableAreaStickyPassthrough.doc.mjs

@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('@astryxdesign/cli/authoring').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'ScrollableArea',
+  name: 'ScrollableArea — Sticky Passthrough',
+  displayName: 'Scrollable Area — Sticky Passthrough',
+  description:
+    'A section whose content fits clips instead of scrolling, so its sticky label passes outward and pins to the panel edge. The next section sets stickyContainment="always" and keeps its label in its own box.',
+  isReady: true,
+  aspectRatio: 1,
+  componentsUsed: ['ScrollableArea', 'Card', 'Grid'],
+};

package/assets/templates/blocks/components/ScrollableArea/ScrollableAreaStickyPassthrough.tsx

@@ -0,0 +1,122 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import * as stylex from '@stylexjs/stylex';
+import {ScrollableArea} from '@astryxdesign/core/ScrollableArea';
+import {Card} from '@astryxdesign/core/Card';
+import {Grid} from '@astryxdesign/core/Grid';
+import {VStack} from '@astryxdesign/core/Layout';
+import {Heading, Text} from '@astryxdesign/core/Text';
+import {colorVars, spacingVars} from '@astryxdesign/core/theme/tokens.stylex';
+
+const styles = stylex.create({
+  sectionLabel: {
+    position: 'sticky',
+    insetBlockStart: 0,
+    zIndex: 1,
+    backgroundColor: colorVars['--color-background-card'],
+    paddingBlock: spacingVars['--spacing-2'],
+  },
+});
+
+const SHARED = [
+  {id: 'brand', title: 'Brand refresh', meta: 'Priya Raman'},
+  {id: 'checkout', title: 'Checkout audit', meta: 'Tomas Lindqvist'},
+  {id: 'partner', title: 'Partner deck', meta: 'Ines Okafor'},
+  {id: 'research', title: 'Research synthesis', meta: 'Mei Watanabe'},
+  {id: 'tax', title: 'Tax region notes', meta: 'Hugo Bernard'},
+  {id: 'sso', title: 'SSO rollout plan', meta: 'Sofia Marchetti'},
+];
+
+const TEMPLATES = [
+  {id: 'weekly', title: 'Weekly report', meta: 'Used 24 times'},
+  {id: 'checklist', title: 'Launch checklist', meta: 'Used 18 times'},
+  {id: 'review', title: 'Design review', meta: 'Used 11 times'},
+  {id: 'retro', title: 'Retro board', meta: 'Used 9 times'},
+  {id: 'brief', title: 'Project brief', meta: 'Used 7 times'},
+  {id: 'postmortem', title: 'Postmortem', meta: 'Used 4 times'},
+];
+
+const ARCHIVED = [
+  {id: 'roadmap', title: '2025 roadmap', meta: 'Archived in March'},
+  {id: 'legacy', title: 'Legacy pricing', meta: 'Archived in March'},
+  {id: 'kit', title: 'Old brand kit', meta: 'Archived in January'},
+  {id: 'beta', title: 'Beta feedback', meta: 'Archived in January'},
+  {id: 'survey', title: 'Q4 survey results', meta: 'Archived in January'},
+  {id: 'offsite', title: 'Offsite agenda', meta: 'Archived last year'},
+];
+
+function FileGrid({
+  files,
+}: {
+  files: Array<{id: string; title: string; meta: string}>;
+}) {
+  return (
+    <Grid columns={2} gap={2}>
+      {files.map(file => (
+        <Card key={file.id} variant="muted" padding={3}>
+          <VStack gap={1}>
+            <Text weight="medium" maxLines={1}>
+              {file.title}
+            </Text>
+            <Text type="supporting" maxLines={1}>
+              {file.meta}
+            </Text>
+          </VStack>
+        </Card>
+      ))}
+    </Grid>
+  );
+}
+
+export default function ScrollableAreaStickyPassthrough() {
+  return (
+    <Card width={400} padding={0}>
+      <ScrollableArea
+        axis="block"
+        role="region"
+        label="Workspace files"
+        height={300}
+        padding={4}>
+        <VStack gap={0.5} paddingBlockEnd={2}>
+          <Heading level={3}>Workspace files</Heading>
+          <Text type="supporting">18 files across 3 sections</Text>
+        </VStack>
+
+        {/* This section's content fits, so its viewport clips instead of
+            scrolling and never becomes the Sticky boundary: the label
+            passes outward and pins to the panel's edge. */}
+        <ScrollableArea axis="block" label="Shared with you">
+          <div {...stylex.props(styles.sectionLabel)}>
+            <Text type="label" color="secondary">
+              Shared with you
+            </Text>
+          </div>
+          <FileGrid files={SHARED} />
+        </ScrollableArea>
+
+        {/* Same fitting content, but containment is explicit: this viewport
+            stays the Sticky boundary, so its label leaves with the box. */}
+        <ScrollableArea
+          axis="block"
+          label="Templates"
+          stickyContainment="always">
+          <div {...stylex.props(styles.sectionLabel)}>
+            <Text type="label" color="secondary">
+              Templates
+            </Text>
+          </div>
+          <FileGrid files={TEMPLATES} />
+        </ScrollableArea>
+
+        <div {...stylex.props(styles.sectionLabel)}>
+          <Text type="label" color="secondary">
+            Archived
+          </Text>
+        </div>
+        <FileGrid files={ARCHIVED} />
+      </ScrollableArea>
+    </Card>
+  );
+}

package/assets/templates/blocks/components/ScrollableArea/ScrollableAreaTwoAxisBoard.doc.mjs

@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('@astryxdesign/cli/authoring').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'ScrollableArea',
+  name: 'ScrollableArea — Two-Axis Board',
+  displayName: 'Scrollable Area — Two-Axis Board',
+  description:
+    'axis="both" gives the content box max-content inline sizing, so a board wider and taller than its panel scrolls on both axes from one viewport.',
+  isReady: true,
+  aspectRatio: 1,
+  componentsUsed: ['ScrollableArea', 'Card', 'Grid'],
+};

package/assets/templates/blocks/components/ScrollableArea/ScrollableAreaTwoAxisBoard.tsx

@@ -0,0 +1,95 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {ScrollableArea} from '@astryxdesign/core/ScrollableArea';
+import {Card} from '@astryxdesign/core/Card';
+import {HStack, VStack} from '@astryxdesign/core/Layout';
+import {Heading, Text} from '@astryxdesign/core/Text';
+
+const COLUMNS = [
+  {
+    label: 'Recently opened',
+    files: [
+      {id: 'brief', title: 'Q3 launch brief', meta: 'Edited 2 days ago'},
+      {id: 'pricing', title: 'Pricing rework', meta: 'Edited 3 days ago'},
+      {
+        id: 'onboarding',
+        title: 'Onboarding flow v4',
+        meta: 'Edited 4 days ago',
+      },
+      {id: 'macros', title: 'Support macros', meta: 'Edited last week'},
+    ],
+  },
+  {
+    label: 'Shared with you',
+    files: [
+      {id: 'brand', title: 'Brand refresh', meta: 'Priya Raman'},
+      {id: 'checkout', title: 'Checkout audit', meta: 'Tomas Lindqvist'},
+      {id: 'partner', title: 'Partner deck', meta: 'Ines Okafor'},
+      {id: 'research', title: 'Research synthesis', meta: 'Mei Watanabe'},
+    ],
+  },
+  {
+    label: 'Templates',
+    files: [
+      {id: 'weekly', title: 'Weekly report', meta: 'Used 24 times'},
+      {id: 'checklist', title: 'Launch checklist', meta: 'Used 18 times'},
+      {id: 'review', title: 'Design review', meta: 'Used 11 times'},
+      {id: 'retro', title: 'Retro board', meta: 'Used 9 times'},
+    ],
+  },
+  {
+    label: 'Archived',
+    files: [
+      {id: 'roadmap', title: '2025 roadmap', meta: 'Archived in March'},
+      {id: 'legacy', title: 'Legacy pricing', meta: 'Archived in March'},
+      {id: 'kit', title: 'Old brand kit', meta: 'Archived in January'},
+      {id: 'beta', title: 'Beta feedback', meta: 'Archived in January'},
+    ],
+  },
+];
+
+export default function ScrollableAreaTwoAxisBoard() {
+  return (
+    <Card width={420} padding={0}>
+      {/* axis="both" gives the content box max-content inline sizing, so the
+          board is free to be wider than the viewport on both axes. The
+          heading is inside that box and travels with it. */}
+      <ScrollableArea
+        axis="both"
+        role="region"
+        label="Workspace board"
+        height={300}
+        padding={4}>
+        <VStack gap={4}>
+          <VStack gap={0.5}>
+            <Heading level={3}>Workspace board</Heading>
+            <Text type="supporting">16 files across 4 sections</Text>
+          </VStack>
+          <HStack gap={3} vAlign="start">
+            {COLUMNS.map(column => (
+              <VStack key={column.label} gap={2} width={180}>
+                <Text type="label" color="secondary">
+                  {column.label}
+                </Text>
+                {column.files.map(file => (
+                  <Card key={file.id} variant="muted" padding={3}>
+                    <VStack gap={1}>
+                      <Text weight="medium" maxLines={1}>
+                        {file.title}
+                      </Text>
+                      <Text type="supporting" maxLines={1}>
+                        {file.meta}
+                      </Text>
+                    </VStack>
+                  </Card>
+                ))}
+              </VStack>
+            ))}
+          </HStack>
+        </VStack>
+      </ScrollableArea>
+    </Card>
+  );
+}

package/assets/templates/blocks/components/Table/TableBulkActionsTable.doc.mjs

@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('@astryxdesign/cli/authoring').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'useTableSelection',
+  name: 'Table: Bulk Actions',
+  displayName: 'Table: Bulk Actions',
+  description:
+    'Controlled row selection with the reusable TableSelectionToolbar rendered in flow above the table. Product actions occupy the logical start; synchronized selection count and complete clear action occupy the logical end.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['Table', 'TableSelectionToolbar', 'Button'],
+};

package/assets/templates/blocks/components/Table/TableBulkActionsTable.tsx

@@ -0,0 +1,71 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useState} from 'react';
+import {Button} from '@astryxdesign/core/Button';
+import {
+  Table,
+  TableSelectionToolbar,
+  useTableSelection,
+  useTableSelectionState,
+  proportional,
+} from '@astryxdesign/core/Table';
+import type {TableColumn} from '@astryxdesign/core/Table';
+
+interface User extends Record<string, unknown> {
+  id: string;
+  name: string;
+  email: string;
+  role: string;
+}
+
+const users: User[] = [
+  {id: '1', name: 'Alice', email: 'alice@example.com', role: 'Engineer'},
+  {id: '2', name: 'Bob', email: 'bob@example.com', role: 'Designer'},
+  {id: '3', name: 'Charlie', email: 'charlie@example.com', role: 'Manager'},
+  {id: '4', name: 'Diana', email: 'diana@example.com', role: 'Engineer'},
+  {id: '5', name: 'Eve', email: 'eve@example.com', role: 'Admin'},
+];
+
+const columns: TableColumn<User>[] = [
+  {key: 'name', header: 'Name', width: proportional(1)},
+  {key: 'email', header: 'Email', width: proportional(2)},
+  {key: 'role', header: 'Role', width: proportional(1)},
+];
+
+export default function TableBulkActionsTable() {
+  const [selectedKeys, setSelectedKeys] = useState<Set<string>>(new Set());
+
+  const {selectionConfig, selectionState} = useTableSelectionState<User>({
+    data: users,
+    idKey: 'id',
+    selectedKeys,
+    setSelectedKeys,
+  });
+  const selectionPlugin = useTableSelection<User>(selectionConfig);
+
+  return (
+    <div>
+      <TableSelectionToolbar
+        selection={selectionState}
+        startContent={
+          <>
+            <Button label="Export" variant="ghost" onClick={() => {}} />
+            <Button
+              label="Delete"
+              variant="ghost"
+              onClick={selectionState.clearSelection}
+            />
+          </>
+        }
+      />
+      <Table
+        data={users}
+        columns={columns}
+        idKey="id"
+        plugins={{selection: selectionPlugin}}
+      />
+    </div>
+  );
+}

package/assets/templates/blocks/components/Table/TableFloatingBulkActionsTable.doc.mjs

@@ -0,0 +1,19 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('@astryxdesign/cli/authoring').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'useTableSelection',
+  name: 'Table: Floating Bulk Actions',
+  displayName: 'Table: Floating Bulk Actions',
+  description:
+    'The reusable TableSelectionToolbar inside a capped, self-contained scroll region for a long non-sticky table below metric cards. The caller-owned sticky placement keeps actions 16px from the example scrollport without moving the table when selection changes.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: [
+    'Table',
+    'TableSelectionToolbar',
+    'Button',
+    'ScrollableArea',
+  ],
+};

package/assets/templates/blocks/components/Table/TableFloatingBulkActionsTable.tsx

@@ -0,0 +1,139 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useState} from 'react';
+import * as stylex from '@stylexjs/stylex';
+import {Button} from '@astryxdesign/core/Button';
+import {ScrollableArea} from '@astryxdesign/core/ScrollableArea';
+import {
+  Table,
+  TableSelectionToolbar,
+  useTableSelection,
+  useTableSelectionState,
+  proportional,
+} from '@astryxdesign/core/Table';
+import type {TableColumn} from '@astryxdesign/core/Table';
+import {
+  colorVars,
+  radiusVars,
+  shadowVars,
+  sizeVars,
+  spacingVars,
+} from '@astryxdesign/core/theme/tokens.stylex';
+
+interface User extends Record<string, unknown> {
+  id: string;
+  name: string;
+  email: string;
+  role: string;
+}
+
+const baseUsers: Array<Pick<User, 'name' | 'email' | 'role'>> = [
+  {name: 'Alice', email: 'alice@example.com', role: 'Engineer'},
+  {name: 'Bob', email: 'bob@example.com', role: 'Designer'},
+  {name: 'Charlie', email: 'charlie@example.com', role: 'Manager'},
+  {name: 'Diana', email: 'diana@example.com', role: 'Engineer'},
+  {name: 'Eve', email: 'eve@example.com', role: 'Admin'},
+];
+
+const users: User[] = Array.from({length: 40}, (_, index) => {
+  const user = baseUsers[index % baseUsers.length];
+  return {...user, id: String(index + 1), name: `${user.name} ${index + 1}`};
+});
+
+const columns: TableColumn<User>[] = [
+  {key: 'name', header: 'Name', width: proportional(1)},
+  {key: 'email', header: 'Email', width: proportional(1)},
+  {key: 'role', header: 'Role', width: proportional(1)},
+];
+
+const styles = stylex.create({
+  page: {
+    maxBlockSize: 640,
+    isolation: 'isolate',
+    scrollbarGutter: 'stable',
+  },
+  metrics: {
+    display: 'grid',
+    gridTemplateColumns: 'repeat(3, minmax(0, 1fr))',
+    gap: spacingVars['--spacing-3'],
+    marginBlockEnd: spacingVars['--spacing-6'],
+  },
+  metricCard: {
+    padding: spacingVars['--spacing-4'],
+    borderRadius: radiusVars['--radius-container'],
+    backgroundColor: colorVars['--color-background-muted'],
+  },
+  metricLabel: {
+    display: 'block',
+    color: colorVars['--color-text-secondary'],
+  },
+  metricValue: {
+    display: 'block',
+    marginBlockStart: spacingVars['--spacing-1'],
+    color: colorVars['--color-text-primary'],
+  },
+  tableRegion: {
+    '--table-bulk-actions-space': `calc(${sizeVars['--size-element-sm']} + ${spacingVars['--spacing-2']} + ${spacingVars['--spacing-2']} + ${spacingVars['--spacing-4']})`,
+    position: 'relative',
+    paddingBlockStart: 'var(--table-bulk-actions-space)',
+  },
+  toolbar: {
+    position: 'sticky',
+    insetBlockStart: `calc(var(--table-bulk-actions-space) + ${spacingVars['--spacing-4']})`,
+    transform: 'translateY(calc(0px - var(--table-bulk-actions-space)))',
+    marginBlockEnd: `calc(${spacingVars['--spacing-4']} - var(--table-bulk-actions-space))`,
+    zIndex: 1,
+    borderRadius: radiusVars['--radius-element'],
+    boxShadow: shadowVars['--shadow-med'],
+  },
+});
+
+export default function TableFloatingBulkActionsTable() {
+  const [selectedKeys, setSelectedKeys] = useState<Set<string>>(new Set());
+
+  const {selectionConfig, selectionState} = useTableSelectionState<User>({
+    data: users,
+    idKey: 'id',
+    selectedKeys,
+    setSelectedKeys,
+  });
+  const selectionPlugin = useTableSelection<User>(selectionConfig);
+
+  return (
+    <ScrollableArea
+      axis="block"
+      label="Bulk actions example"
+      overscroll="contain"
+      xstyle={styles.page}>
+      <div {...stylex.props(styles.metrics)}>
+        {[
+          ['Active users', '12,840'],
+          ['Selection rate', '18.4%'],
+          ['Pending reviews', '247'],
+        ].map(([label, value]) => (
+          <div key={label} {...stylex.props(styles.metricCard)}>
+            <span {...stylex.props(styles.metricLabel)}>{label}</span>
+            <strong {...stylex.props(styles.metricValue)}>{value}</strong>
+          </div>
+        ))}
+      </div>
+      <div {...stylex.props(styles.tableRegion)}>
+        <TableSelectionToolbar
+          selection={selectionState}
+          xstyle={styles.toolbar}
+          startContent={
+            <Button label="Approve" variant="ghost" onClick={() => {}} />
+          }
+        />
+        <Table
+          data={users}
+          columns={columns}
+          idKey="id"
+          plugins={{selection: selectionPlugin}}
+        />
+      </div>
+    </ScrollableArea>
+  );
+}

package/assets/templates/blocks/components/TimeInput/TimeInputConstrained.tsx

@@ -17,6 +17,7 @@ export default function TimeInputConstrained() {
         max={'22:00' as never}
         description="Evening seating: 5 PM – 10 PM"
         placeholder="Select reservation time"
+        presentation="adaptive-bottom-sheet"
         value={evening as never}
         onChange={setEvening as never}
         hasClear

package/assets/templates/blocks/components/Timer/TimerFormats.doc.mjs

@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('@astryxdesign/cli/authoring').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'Timer',
+  name: 'Timer — Formats',
+  displayName: 'Timer — Formats',
+  description:
+    'Elapsed compact units and stopwatch clock notation shown from the same start time.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['Timer', 'Layout', 'Text'],
+};

package/assets/templates/blocks/components/Timer/TimerFormats.tsx

@@ -0,0 +1,34 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useState} from 'react';
+import {Timer} from '@astryxdesign/core/Timer';
+import {Stack} from '@astryxdesign/core/Layout';
+import {Text} from '@astryxdesign/core/Text';
+
+export default function TimerFormats() {
+  const [startedAt] = useState(() => Date.now() - 3_753_000);
+
+  return (
+    <Stack direction="vertical" gap={3}>
+      <Stack direction="horizontal" gap={3} vAlign="center">
+        <Text type="supporting" color="secondary">
+          Elapsed
+        </Text>
+        <Timer startTime={startedAt} type="body" color="primary" />
+      </Stack>
+      <Stack direction="horizontal" gap={3} vAlign="center">
+        <Text type="supporting" color="secondary">
+          Clock
+        </Text>
+        <Timer
+          format="clock"
+          startTime={startedAt}
+          type="body"
+          color="primary"
+        />
+      </Stack>
+    </Stack>
+  );
+}

package/assets/templates/blocks/components/Timer/TimerInline.doc.mjs

@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('@astryxdesign/cli/authoring').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'Timer',
+  name: 'Timer — Inline',
+  displayName: 'Timer — Inline',
+  description:
+    'A Timer composed into status copy while inheriting the surrounding typography.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['Timer', 'Text'],
+};