@astryxdesign/cli 0.0.0-bootstrap.0 → 0.0.15

package/templates/blocks/components/Button/ButtonVariants.tsx

@@ -0,0 +1,61 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {Button} from '@astryxdesign/core/Button';
+import {Stack} from '@astryxdesign/core/Layout';
+import {Text} from '@astryxdesign/core/Text';
+
+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 ButtonVariants() {
+  return (
+    <Stack direction="vertical" gap={4}>
+      <Stack direction="vertical" gap={1}>
+        <Text type="supporting" color="secondary">
+          Default
+        </Text>
+        <Stack direction="horizontal" gap={3} vAlign="center">
+          {VARIANTS.map(({variant, label}) => (
+            <Button key={variant} label={label} variant={variant} />
+          ))}
+        </Stack>
+      </Stack>
+      <Stack direction="vertical" gap={1}>
+        <Text type="supporting" color="secondary">
+          Disabled
+        </Text>
+        <Stack direction="horizontal" gap={3} vAlign="center">
+          {VARIANTS.map(({variant, label}) => (
+            <Button
+              key={variant}
+              label={label}
+              variant={variant}
+              isDisabled
+            />
+          ))}
+        </Stack>
+      </Stack>
+      <Stack direction="vertical" gap={1}>
+        <Text type="supporting" color="secondary">
+          Loading
+        </Text>
+        <Stack direction="horizontal" gap={3} vAlign="center">
+          {VARIANTS.map(({variant, label}) => (
+            <Button
+              key={variant}
+              label={label}
+              variant={variant}
+              isLoading
+            />
+          ))}
+        </Stack>
+      </Stack>
+    </Stack>
+  );
+}

package/templates/blocks/components/Button/ButtonWithEndSlot.doc.mjs

@@ -0,0 +1,13 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'Button',
+  name: 'Button — End Slot',
+  displayName: 'Button — End Slot',
+  description: 'Buttons with a trailing badge showing a count or status. Use for notification counts, unread messages, or any button that needs a visual indicator.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['Button', 'Badge', 'Layout', 'Text'],
+};

package/templates/blocks/components/Button/ButtonWithEndSlot.tsx

@@ -0,0 +1,35 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {Button} from '@astryxdesign/core/Button';
+import {Badge} from '@astryxdesign/core/Badge';
+import {Stack} from '@astryxdesign/core/Layout';
+import {Text} from '@astryxdesign/core/Text';
+
+export default function ButtonWithEndSlot() {
+  return (
+    <Stack direction="vertical" gap={4}>
+      <Text type="supporting" color="secondary">
+        Trailing badges for counts or status
+      </Text>
+      <Stack direction="horizontal" gap={3} vAlign="center">
+        <Button
+          label="Messages"
+          variant="primary"
+          endContent={<Badge variant="info" label={3} />}
+        />
+        <Button
+          label="Notifications"
+          variant="secondary"
+          endContent={<Badge variant="warning" label={12} />}
+        />
+        <Button
+          label="Updates"
+          variant="ghost"
+          endContent={<Badge variant="neutral" label="New" />}
+        />
+      </Stack>
+    </Stack>
+  );
+}

package/templates/blocks/components/Button/ButtonWithIcon.doc.mjs

@@ -0,0 +1,13 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'Button',
+  name: 'Button — Icon',
+  displayName: 'Button — Icon',
+  description: 'Buttons with a leading icon that reinforces the label. Use when the icon helps the user identify the action faster, like a plus for "New" or a trash can for "Delete".',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['Button', 'Icon', 'Layout'],
+};

package/templates/blocks/components/Button/ButtonWithIcon.tsx

@@ -0,0 +1,46 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {Button} from '@astryxdesign/core/Button';
+import {Icon} from '@astryxdesign/core/Icon';
+import {Stack} from '@astryxdesign/core/Layout';
+import {Text} from '@astryxdesign/core/Text';
+import {
+  ArrowDownTrayIcon,
+  PencilSquareIcon,
+  PlusIcon,
+  TrashIcon,
+} from '@heroicons/react/24/outline';
+
+export default function ButtonWithIcon() {
+  return (
+    <Stack direction="vertical" gap={4}>
+      <Text type="supporting" color="secondary">
+        Icons reinforce the action
+      </Text>
+      <Stack direction="horizontal" gap={3} vAlign="center">
+        <Button
+          label="New item"
+          variant="primary"
+          icon={<Icon icon={PlusIcon} />}
+        />
+        <Button
+          label="Edit"
+          variant="secondary"
+          icon={<Icon icon={PencilSquareIcon} />}
+        />
+        <Button
+          label="Download"
+          variant="ghost"
+          icon={<Icon icon={ArrowDownTrayIcon} />}
+        />
+        <Button
+          label="Delete"
+          variant="destructive"
+          icon={<Icon icon={TrashIcon} />}
+        />
+      </Stack>
+    </Stack>
+  );
+}

package/templates/blocks/components/ButtonGroup/ButtonGroupShowcase.doc.mjs

@@ -0,0 +1,13 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'ButtonGroup',
+  name: 'ButtonGroup',
+  displayName: 'Button Group',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  isShowcase: true,
+  componentsUsed: ['Button', 'ButtonGroup', 'Icon', 'IconButton', 'Layout'],
+};

package/templates/blocks/components/ButtonGroup/ButtonGroupShowcase.tsx

@@ -0,0 +1,38 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {ButtonGroup} from '@astryxdesign/core/ButtonGroup';
+import {Button} from '@astryxdesign/core/Button';
+import {IconButton} from '@astryxdesign/core/IconButton';
+import {Stack} from '@astryxdesign/core/Layout';
+import {Icon} from '@astryxdesign/core/Icon';
+import {
+  ClipboardDocumentIcon,
+  ScissorsIcon,
+  ClipboardIcon,
+  ChevronDownIcon,
+} from '@heroicons/react/24/outline';
+
+export default function ButtonGroupShowcase() {
+  return (
+    <Stack direction="horizontal" gap={6} vAlign="center">
+      <ButtonGroup label="Clipboard actions">
+        <Button
+          label="Copy"
+          icon={<Icon icon={ClipboardDocumentIcon} />}
+        />
+        <Button label="Cut" icon={<Icon icon={ScissorsIcon} />} />
+        <Button label="Paste" icon={<Icon icon={ClipboardIcon} />} />
+      </ButtonGroup>
+      <ButtonGroup label="Save options">
+        <Button label="Save" variant="primary" />
+        <IconButton
+          label="Save options"
+          variant="primary"
+          icon={<Icon icon={ChevronDownIcon} />}
+        />
+      </ButtonGroup>
+    </Stack>
+  );
+}

package/templates/blocks/components/Calendar/CalendarConstraints.doc.mjs

@@ -0,0 +1,13 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'Calendar',
+  name: 'Calendar — Constraints',
+  displayName: 'Calendar — Constraints',
+  description: 'Limit which dates can be selected using min/max bounds and custom rules like weekdays only. Use for scheduling UIs where certain dates are unavailable.',
+  isReady: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: ['Calendar', 'Layout', 'Text'],
+};

package/templates/blocks/components/Calendar/CalendarConstraints.tsx

@@ -0,0 +1,34 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useState} from 'react';
+import {Calendar, type ISODateString} from '@astryxdesign/core/Calendar';
+import {Stack} from '@astryxdesign/core/Layout';
+import {Text} from '@astryxdesign/core/Text';
+
+const isWeekday = (date: Date) => {
+  const day = date.getDay();
+  return day !== 0 && day !== 6;
+};
+
+export default function CalendarConstraints() {
+  const [value, setValue] = useState<ISODateString | undefined>(undefined);
+
+  return (
+    <Stack direction="vertical" gap={4} hAlign="center">
+      <Text type="supporting" color="secondary">
+        Jan 10 – Mar 20, weekdays only
+      </Text>
+      <Calendar
+        mode="single"
+        min={'2026-01-10' as ISODateString}
+        max={'2026-03-20' as ISODateString}
+        dateConstraints={[isWeekday]}
+        value={value}
+        onChange={val => setValue(val)}
+        focusDate={'2026-01-01' as ISODateString}
+      />
+    </Stack>
+  );
+}

package/templates/blocks/components/Calendar/CalendarRangeWithValue.doc.mjs

@@ -0,0 +1,13 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'Calendar',
+  name: 'Calendar — Range',
+  displayName: 'Calendar — Range',
+  description: 'Pick a start and end date with the range highlighted between them. Use for booking dates, time-off requests, or report filters.',
+  isReady: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: ['Calendar', 'Layout', 'Text'],
+};

package/templates/blocks/components/Calendar/CalendarRangeWithValue.tsx

@@ -0,0 +1,31 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useState} from 'react';
+import {Calendar, type DateRange} from '@astryxdesign/core/Calendar';
+import {Stack} from '@astryxdesign/core/Layout';
+import {Text} from '@astryxdesign/core/Text';
+
+export default function CalendarRangeWithValue() {
+  const [value, setValue] = useState<DateRange>({
+    start: '2026-01-10',
+    end: '2026-01-20',
+  });
+
+  return (
+    <Stack direction="vertical" gap={4} hAlign="center">
+      <Text type="supporting" color="secondary">
+        {value.start && value.end
+          ? `${value.start} → ${value.end}`
+          : 'Pick a start and end date'}
+      </Text>
+      <Calendar
+        mode="range"
+        value={value}
+        onChange={range => setValue(range)}
+        focusDate="2026-01-01"
+      />
+    </Stack>
+  );
+}

package/templates/blocks/components/Calendar/CalendarShowcase.doc.mjs

@@ -0,0 +1,15 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'Calendar',
+  name: 'Calendar',
+  displayName: 'Calendar',
+  description:
+    'An interactive single-date calendar with a selected date. Click any day to change the selection.',
+  isReady: true,
+  isShowcase: true,
+  aspectRatio: 1,
+  componentsUsed: ['Calendar'],
+};

package/templates/blocks/components/Calendar/CalendarShowcase.tsx

@@ -0,0 +1,13 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useState} from 'react';
+import {Calendar} from '@astryxdesign/core/Calendar';
+import type {ISODateString} from '@astryxdesign/core/Calendar';
+
+export default function CalendarShowcase() {
+  const [value, setValue] = useState<ISODateString | undefined>('2026-04-15');
+
+  return <Calendar mode="single" value={value} onChange={setValue} />;
+}

package/templates/blocks/components/Calendar/CalendarSingle.doc.mjs

@@ -0,0 +1,13 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'Calendar',
+  name: 'Calendar — Single',
+  displayName: 'Calendar — Single',
+  description: 'Pick one date from a month grid. Use for appointment dates, due dates, or any field that needs a single date.',
+  isReady: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: ['Calendar', 'Layout', 'Text'],
+};

package/templates/blocks/components/Calendar/CalendarSingle.tsx

@@ -0,0 +1,26 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useState} from 'react';
+import {Calendar, type ISODateString} from '@astryxdesign/core/Calendar';
+import {Stack} from '@astryxdesign/core/Layout';
+import {Text} from '@astryxdesign/core/Text';
+
+export default function CalendarSingle() {
+  const [value, setValue] = useState<ISODateString>('2026-01-15');
+
+  return (
+    <Stack direction="vertical" gap={4} hAlign="center">
+      <Text type="supporting" color="secondary">
+        {value ? `Selected: ${value}` : 'Pick a date'}
+      </Text>
+      <Calendar
+        mode="single"
+        value={value}
+        onChange={val => setValue(val)}
+        focusDate="2026-01-01"
+      />
+    </Stack>
+  );
+}

package/templates/blocks/components/Calendar/CalendarTwoMonths.doc.mjs

@@ -0,0 +1,13 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'Calendar',
+  name: 'Calendar — Two Months',
+  displayName: 'Calendar — Two Months',
+  description: 'Two months side by side for selecting ranges that span a month boundary. Use in booking or travel UIs where check-in and check-out often fall in different months.',
+  isReady: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: ['Calendar', 'Layout', 'Text'],
+};

package/templates/blocks/components/Calendar/CalendarTwoMonths.tsx

@@ -0,0 +1,32 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useState} from 'react';
+import {Calendar, type DateRange} from '@astryxdesign/core/Calendar';
+import {Stack} from '@astryxdesign/core/Layout';
+import {Text} from '@astryxdesign/core/Text';
+
+export default function CalendarTwoMonths() {
+  const [value, setValue] = useState<DateRange>({
+    start: '2026-01-25',
+    end: '2026-02-05',
+  });
+
+  return (
+    <Stack direction="vertical" gap={4} hAlign="center">
+      <Text type="supporting" color="secondary">
+        {value.start && value.end
+          ? `${value.start} → ${value.end}`
+          : 'Pick a date range'}
+      </Text>
+      <Calendar
+        mode="range"
+        numberOfMonths={2}
+        value={value}
+        onChange={range => setValue(range)}
+        focusDate="2026-01-01"
+      />
+    </Stack>
+  );
+}

package/templates/blocks/components/Card/CardCallout.doc.mjs

@@ -0,0 +1,13 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'Card',
+  name: 'Card — Callout',
+  displayName: 'Card — Callout',
+  description: 'Muted-variant cards for tips, notes, or supplementary information. Use when content should be visually distinct but not prominent. The muted variant uses a wash background instead of the elevated default, making it feel recessed rather than raised. Works well in sidebars, help panels, or inline callouts.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['Card', 'Layout', 'Text'],
+};

package/templates/blocks/components/Card/CardCallout.tsx

@@ -0,0 +1,30 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {Card} from '@astryxdesign/core/Card';
+import {Stack} from '@astryxdesign/core/Layout';
+import {Heading, Text} from '@astryxdesign/core/Text';
+
+export default function CardCallout() {
+  return (
+    <Stack direction="horizontal" gap={4}>
+      <Card width={270} variant="muted">
+        <Stack direction="vertical" gap={2}>
+          <Heading level={3}>Tip</Heading>
+          <Text type="body" color="secondary">
+            Use the muted variant for callouts or supplementary information.
+          </Text>
+        </Stack>
+      </Card>
+      <Card width={270} variant="muted">
+        <Stack direction="vertical" gap={2}>
+          <Heading level={3}>Note</Heading>
+          <Text type="body" color="secondary">
+            Muted cards work well in sidebars or help panels.
+          </Text>
+        </Stack>
+      </Card>
+    </Stack>
+  );
+}

package/templates/blocks/components/Card/CardShowcase.doc.mjs

@@ -0,0 +1,15 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'Card',
+  name: 'Card',
+  displayName: 'Card',
+  description:
+    'A card with a heading and body text showing the default container style.',
+  isReady: true,
+  isShowcase: true,
+  aspectRatio: 1,
+  componentsUsed: ['Card', 'Layout', 'Text'],
+};

package/templates/blocks/components/Card/CardShowcase.tsx

@@ -0,0 +1,21 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {Card} from '@astryxdesign/core/Card';
+import {Stack} from '@astryxdesign/core/Layout';
+import {Text, Heading} from '@astryxdesign/core/Text';
+
+export default function CardShowcase() {
+  return (
+    <Card width={320}>
+      <Stack direction="vertical" gap={2}>
+        <Heading level={4}>Card title</Heading>
+        <Text type="body" color="secondary">
+          Cards group related content with a border and background. Use them for
+          profiles, settings panels, or data summaries.
+        </Text>
+      </Stack>
+    </Card>
+  );
+}

package/templates/blocks/components/Card/CardVariants.doc.mjs

@@ -0,0 +1,13 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'Card',
+  name: 'Card — Variants',
+  displayName: 'Card — Variants',
+  description: 'Default, muted, and color variants side by side. Use color variants to categorize cards visually, like team colors, project tags, or content types. Each color uses the corresponding background token from the theme, so they adapt to light and dark mode automatically.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['Card', 'Layout', 'Text'],
+};

package/templates/blocks/components/Card/CardVariants.tsx

@@ -0,0 +1,39 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {Card} from '@astryxdesign/core/Card';
+import {Stack} from '@astryxdesign/core/Layout';
+import {Text} from '@astryxdesign/core/Text';
+
+const VARIANTS = [
+  {variant: 'default' as const, label: 'General', note: '4 tasks due today'},
+  {
+    variant: 'muted' as const,
+    label: 'Archived',
+    note: 'No activity in 30 days',
+  },
+  {variant: 'blue' as const, label: 'Engineering', note: '12 open issues'},
+  {variant: 'green' as const, label: 'Marketing', note: '3 campaigns active'},
+  {variant: 'orange' as const, label: 'Urgent', note: '2 items need review'},
+  {variant: 'purple' as const, label: 'Design', note: '5 drafts in progress'},
+];
+
+export default function CardVariants() {
+  return (
+    <Stack direction="horizontal" gap={3} style={{flexWrap: 'wrap'}}>
+      {VARIANTS.map(({variant, label, note}) => (
+        <Card key={variant} variant={variant} width={160}>
+          <Stack direction="vertical" gap={1}>
+            <Text type="body" weight="bold">
+              {label}
+            </Text>
+            <Text type="supporting" color="secondary">
+              {note}
+            </Text>
+          </Stack>
+        </Card>
+      ))}
+    </Stack>
+  );
+}

package/templates/blocks/components/Card/CardWithInnerLayout.doc.mjs

@@ -0,0 +1,13 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'Card',
+  name: 'Card — Layout',
+  displayName: 'Card — Layout',
+  description: 'A card with a structured header, content area, and footer with action buttons. Use for forms, dialogs, or settings panels that need clear sections. Pair Card with Layout to get automatic dividers between header, content, and footer. The footer aligns actions to the right by default.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['Card', 'Layout', 'Button', 'Text'],
+};

package/templates/blocks/components/Card/CardWithInnerLayout.tsx

@@ -0,0 +1,44 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {Card} from '@astryxdesign/core/Card';
+import {
+  Layout,
+  LayoutHeader,
+  LayoutContent,
+  LayoutFooter,
+  HStack,
+} from '@astryxdesign/core/Layout';
+import {Button} from '@astryxdesign/core/Button';
+import {Heading, Text} from '@astryxdesign/core/Text';
+
+export default function CardWithInnerLayout() {
+  return (
+    <Card width={380}>
+      <Layout
+        header={
+          <LayoutHeader hasDivider>
+            <Heading level={3}>Edit Profile</Heading>
+          </LayoutHeader>
+        }
+        content={
+          <LayoutContent>
+            <Text type="body" color="secondary">
+              Update your display name, bio, and profile photo. Changes are
+              saved immediately.
+            </Text>
+          </LayoutContent>
+        }
+        footer={
+          <LayoutFooter hasDivider>
+            <HStack gap={2} hAlign="end">
+              <Button label="Cancel" variant="ghost" />
+              <Button label="Save changes" variant="primary" />
+            </HStack>
+          </LayoutFooter>
+        }
+      />
+    </Card>
+  );
+}

package/templates/blocks/components/Card/CardWithSimpleContent.doc.mjs

@@ -0,0 +1,13 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'Card',
+  name: 'Card — Simple',
+  displayName: 'Card — Simple',
+  description: 'A card with a heading and body text. Use for summaries, descriptions, or any grouped content that needs visual separation from the page. The card handles its own border, background, and padding; just pass your content as children. Set a width to constrain it, or leave it to fill the parent.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['Card', 'Layout', 'Text'],
+};