@astryxdesign/cli 0.1.2 → 0.1.3

package/templates/blocks/components/CommandPaletteFooter/CommandPaletteFooterBasic.tsx

@@ -0,0 +1,32 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useMemo} from 'react';
+import {
+  CommandPalette,
+  CommandPaletteFooter,
+} from '@astryxdesign/core/CommandPalette';
+import {createStaticSource} from '@astryxdesign/core/Typeahead';
+
+export default function CommandPaletteFooterBasic() {
+  const source = useMemo(
+    () =>
+      createStaticSource([
+        {id: 'new-file', label: 'New File'},
+        {id: 'open-recent', label: 'Open Recent'},
+        {id: 'save-all', label: 'Save All'},
+      ]),
+    [],
+  );
+
+  return (
+    <CommandPalette
+      isOpen
+      isInline
+      onOpenChange={() => {}}
+      searchSource={source}
+      footer={<CommandPaletteFooter />}
+    />
+  );
+}

package/templates/blocks/components/CommandPaletteGroup/CommandPaletteGroupBasic.doc.mjs

@@ -0,0 +1,18 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'CommandPaletteGroup',
+  name: 'CommandPaletteGroup — Basic',
+  displayName: 'CommandPaletteGroup — Basic',
+  description:
+    'Command palette items organized under group headings using the composed CommandPaletteGroup form. Use to separate related commands into labeled sections.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: [
+    'CommandPaletteGroup',
+    'CommandPaletteItem',
+    'CommandPaletteList',
+  ],
+};

package/templates/blocks/components/CommandPaletteGroup/CommandPaletteGroupBasic.tsx

@@ -0,0 +1,32 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {
+  CommandPaletteList,
+  CommandPaletteGroup,
+  CommandPaletteItem,
+} from '@astryxdesign/core/CommandPalette';
+
+export default function CommandPaletteGroupBasic() {
+  return (
+    <CommandPaletteList>
+      <CommandPaletteGroup heading="Navigation">
+        <CommandPaletteItem value="home" onSelect={() => {}}>
+          Go to Home
+        </CommandPaletteItem>
+        <CommandPaletteItem value="dashboard" onSelect={() => {}}>
+          Go to Dashboard
+        </CommandPaletteItem>
+      </CommandPaletteGroup>
+      <CommandPaletteGroup heading="Actions">
+        <CommandPaletteItem value="new-file" onSelect={() => {}}>
+          New File
+        </CommandPaletteItem>
+        <CommandPaletteItem value="save-all" onSelect={() => {}}>
+          Save All
+        </CommandPaletteItem>
+      </CommandPaletteGroup>
+    </CommandPaletteList>
+  );
+}

package/templates/blocks/components/CommandPaletteItem/CommandPaletteItemBasic.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: 'CommandPaletteItem',
+  name: 'CommandPaletteItem — Basic',
+  displayName: 'CommandPaletteItem — Basic',
+  description:
+    'Selectable command palette items inside a CommandPaletteList, including highlighted and disabled states. Use when composing a palette manually instead of a search source.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['CommandPaletteItem', 'CommandPaletteList'],
+};

package/templates/blocks/components/CommandPaletteItem/CommandPaletteItemBasic.tsx

@@ -0,0 +1,27 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {
+  CommandPaletteList,
+  CommandPaletteItem,
+} from '@astryxdesign/core/CommandPalette';
+
+export default function CommandPaletteItemBasic() {
+  return (
+    <CommandPaletteList>
+      <CommandPaletteItem value="new-file" onSelect={() => {}}>
+        New File
+      </CommandPaletteItem>
+      <CommandPaletteItem value="open-recent" isHighlighted onSelect={() => {}}>
+        Open Recent
+      </CommandPaletteItem>
+      <CommandPaletteItem value="save-all" onSelect={() => {}}>
+        Save All
+      </CommandPaletteItem>
+      <CommandPaletteItem value="publish" isDisabled>
+        Publish (disabled)
+      </CommandPaletteItem>
+    </CommandPaletteList>
+  );
+}

package/templates/blocks/components/ContextMenu/ContextMenuBasic.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: 'ContextMenu',
+  name: 'ContextMenu — Basic',
+  displayName: 'ContextMenu — Basic',
+  description:
+    'A right-click area with action items and a divider separating a destructive action. Use to provide contextual actions for a specific element or region.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['ContextMenu'],
+};

package/templates/blocks/components/ContextMenu/ContextMenuBasic.tsx

@@ -0,0 +1,32 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {ContextMenu} from '@astryxdesign/core/ContextMenu';
+
+export default function ContextMenuBasic() {
+  return (
+    <ContextMenu
+      items={[
+        {label: 'Cut', onClick: () => {}},
+        {label: 'Copy', onClick: () => {}},
+        {label: 'Paste', onClick: () => {}},
+        {type: 'divider'},
+        {label: 'Delete', onClick: () => {}},
+      ]}>
+      <div
+        style={{
+          padding: '48px',
+          borderWidth: '2px',
+          borderStyle: 'dashed',
+          borderColor: '#d1d5db',
+          borderRadius: '8px',
+          textAlign: 'center',
+          color: '#6b7280',
+          userSelect: 'none',
+        }}>
+        Right-click this area
+      </div>
+    </ContextMenu>
+  );
+}

package/templates/blocks/components/DateRangeInput/DateRangeInputWithPresets.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: 'DateRangeInput',
+  name: 'DateRangeInput — With Presets',
+  displayName: 'DateRangeInput — With Presets',
+  description:
+    'Date range picker with quick-select presets for common periods. Use for analytics dashboards, report filters, or any context where users frequently select standard time windows.',
+  isReady: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: ['DateRangeInput', 'Layout', 'Text'],
+};

package/templates/blocks/components/DateRangeInput/DateRangeInputWithPresets.tsx

@@ -0,0 +1,46 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useState} from 'react';
+import {DateRangeInput} from '@astryxdesign/core/DateRangeInput';
+import type {DateRange} from '@astryxdesign/core/DateRangeInput';
+import type {ISODateString} from '@astryxdesign/core/Calendar';
+import {Stack} from '@astryxdesign/core/Layout';
+import {Text} from '@astryxdesign/core/Text';
+
+function daysAgo(n: number): ISODateString {
+  const d = new Date();
+  d.setDate(d.getDate() - n);
+  return d.toISOString().slice(0, 10) as ISODateString;
+}
+
+function today(): ISODateString {
+  return new Date().toISOString().slice(0, 10) as ISODateString;
+}
+
+const presets = [
+  {label: 'Last 7 days', getRange: () => ({start: daysAgo(7), end: today()})},
+  {label: 'Last 14 days', getRange: () => ({start: daysAgo(14), end: today()})},
+  {label: 'Last 30 days', getRange: () => ({start: daysAgo(30), end: today()})},
+  {label: 'Last 90 days', getRange: () => ({start: daysAgo(90), end: today()})},
+];
+
+export default function DateRangeInputWithPresets() {
+  const [range, setRange] = useState<DateRange | null>(null);
+
+  return (
+    <Stack direction="vertical" gap={4} width="100%" style={{maxWidth: 400}}>
+      <Text type="supporting" color="secondary">
+        {range ? `${range.start} → ${range.end}` : 'No range selected'}
+      </Text>
+      <DateRangeInput
+        label="Report period"
+        description="Use a preset or pick a custom range"
+        value={range}
+        onChange={setRange}
+        presets={presets}
+      />
+    </Stack>
+  );
+}

package/templates/blocks/components/DateRangeInput/DateRangeInputWithValidation.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: 'DateRangeInput',
+  name: 'DateRangeInput — Validation',
+  displayName: 'DateRangeInput — Validation',
+  description:
+    'Date range input in all three status states: error, warning, and success. Use to surface booking conflicts, flag high-demand periods, or confirm an available range.',
+  isReady: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: ['DateRangeInput', 'Layout'],
+};

package/templates/blocks/components/DateRangeInput/DateRangeInputWithValidation.tsx

@@ -0,0 +1,52 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useState} from 'react';
+import {DateRangeInput} from '@astryxdesign/core/DateRangeInput';
+import type {DateRange} from '@astryxdesign/core/DateRangeInput';
+import {Stack} from '@astryxdesign/core/Layout';
+
+export default function DateRangeInputWithValidation() {
+  const [errorRange, setErrorRange] = useState<DateRange | null>({
+    start: '2026-01-01',
+    end: '2026-01-31',
+  });
+  const [warningRange, setWarningRange] = useState<DateRange | null>({
+    start: '2026-06-01',
+    end: '2026-06-30',
+  });
+  const [successRange, setSuccessRange] = useState<DateRange | null>({
+    start: '2026-03-01',
+    end: '2026-03-31',
+  });
+
+  return (
+    <Stack direction="vertical" gap={4} width="100%" style={{maxWidth: 400}}>
+      <DateRangeInput
+        label="Booking period"
+        value={errorRange}
+        onChange={setErrorRange}
+        status={{
+          type: 'error',
+          message: 'Selected dates are no longer available',
+        }}
+      />
+      <DateRangeInput
+        label="Preferred period"
+        value={warningRange}
+        onChange={setWarningRange}
+        status={{
+          type: 'warning',
+          message: 'High demand — limited availability',
+        }}
+      />
+      <DateRangeInput
+        label="Confirmed period"
+        value={successRange}
+        onChange={setSuccessRange}
+        status={{type: 'success', message: 'Dates confirmed and available'}}
+      />
+    </Stack>
+  );
+}

package/templates/blocks/components/DateTimeInput/DateTimeInputWithValidation.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: 'DateTimeInput',
+  name: 'DateTimeInput — Validation',
+  displayName: 'DateTimeInput — Validation',
+  description:
+    'DateTimeInput in all three status states: error, warning, and success. Use to surface scheduling conflicts, caution the user about edge cases, or confirm a valid datetime.',
+  isReady: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: ['DateTimeInput', 'Layout'],
+};

package/templates/blocks/components/DateTimeInput/DateTimeInputWithValidation.tsx

@@ -0,0 +1,43 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useState} from 'react';
+import {DateTimeInput} from '@astryxdesign/core/DateTimeInput';
+import type {ISODateTimeString} from '@astryxdesign/core/DateTimeInput';
+import {Stack} from '@astryxdesign/core/Layout';
+
+export default function DateTimeInputWithValidation() {
+  const [errorVal, setErrorVal] = useState<ISODateTimeString | undefined>(
+    '2026-01-25T09:00' as ISODateTimeString,
+  );
+  const [warningVal, setWarningVal] = useState<ISODateTimeString | undefined>(
+    '2026-12-25T14:00' as ISODateTimeString,
+  );
+  const [successVal, setSuccessVal] = useState<ISODateTimeString | undefined>(
+    '2026-03-10T10:30' as ISODateTimeString,
+  );
+
+  return (
+    <Stack direction="vertical" gap={4} width="100%" style={{maxWidth: 400}}>
+      <DateTimeInput
+        label="Meeting time"
+        value={errorVal}
+        onChange={setErrorVal}
+        status={{type: 'error', message: 'This time slot is already booked'}}
+      />
+      <DateTimeInput
+        label="Preferred time"
+        value={warningVal}
+        onChange={setWarningVal}
+        status={{type: 'warning', message: 'This falls outside business hours'}}
+      />
+      <DateTimeInput
+        label="Start time"
+        value={successVal}
+        onChange={setSuccessVal}
+        status={{type: 'success', message: 'Time confirmed'}}
+      />
+    </Stack>
+  );
+}

package/templates/blocks/components/DialogHeader/DialogHeaderBasic.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: 'DialogHeader',
+  name: 'DialogHeader — Basic',
+  displayName: 'DialogHeader — Basic',
+  description:
+    'A DialogHeader with a title, subtitle, and close button, placed in the header slot of a Dialog Layout. Pass onOpenChange to render the close button.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['Dialog', 'DialogHeader', 'Layout', 'LayoutContent', 'Text'],
+};

package/templates/blocks/components/DialogHeader/DialogHeaderBasic.tsx

@@ -0,0 +1,30 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {Dialog, DialogHeader} from '@astryxdesign/core/Dialog';
+import {Layout, LayoutContent} from '@astryxdesign/core/Layout';
+import {Text} from '@astryxdesign/core/Text';
+
+export default function DialogHeaderBasic() {
+  return (
+    <Dialog isOpen isInline onOpenChange={() => {}}>
+      <Layout
+        header={
+          <DialogHeader
+            title="Invite teammates"
+            subtitle="Send invitations to join your workspace"
+            onOpenChange={() => {}}
+          />
+        }
+        content={
+          <LayoutContent>
+            <Text type="body" color="secondary">
+              Dialog body content goes here.
+            </Text>
+          </LayoutContent>
+        }
+      />
+    </Dialog>
+  );
+}

package/templates/blocks/components/DropdownMenu/DropdownMenuShowcase.tsx

@@ -2,17 +2,11 @@
 
 'use client';
 
-import {useState} from 'react';
 import {DropdownMenu} from '@astryxdesign/core/DropdownMenu';
 
 export default function DropdownMenuShowcase() {
-  const [isMenuOpen, setIsMenuOpen] = useState(false);
-
   return (
     <DropdownMenu
-      isMenuOpen={isMenuOpen}
-      onOpenChange={setIsMenuOpen}
-      hasAutoFocus={false}
       button={{label: 'Actions'}}
       items={[
         {label: 'Edit', onClick: () => {}},

package/templates/blocks/components/DropdownMenuItem/DropdownMenuItemBasic.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: 'DropdownMenuItem',
+  name: 'DropdownMenuItem — Basic',
+  displayName: 'DropdownMenuItem — Basic',
+  description:
+    'Dropdown menu items with labels and secondary descriptions. Use DropdownMenuItem to render custom menu entries with consistent styling.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['DropdownMenu', 'DropdownMenuItem'],
+};

package/templates/blocks/components/DropdownMenuItem/DropdownMenuItemBasic.tsx

@@ -0,0 +1,27 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {DropdownMenu, DropdownMenuItem} from '@astryxdesign/core/DropdownMenu';
+
+export default function DropdownMenuItemBasic() {
+  return (
+    <DropdownMenu button={{label: 'Actions'}}>
+      <DropdownMenuItem
+        label="Edit"
+        description="Modify this item"
+        onClick={() => {}}
+      />
+      <DropdownMenuItem
+        label="Duplicate"
+        description="Create a copy"
+        onClick={() => {}}
+      />
+      <DropdownMenuItem
+        label="Delete"
+        description="This action cannot be undone"
+        onClick={() => {}}
+      />
+    </DropdownMenu>
+  );
+}

package/templates/blocks/components/DropdownMenuItem/DropdownMenuItemShowcase.tsx

@@ -65,11 +65,7 @@ const TrashIcon = (props: React.SVGProps<SVGSVGElement>) => (
 
 export default function DropdownMenuItemShowcase() {
   return (
-    <DropdownMenu
-      button={{label: 'Actions'}}
-      isMenuOpen
-      hasAutoFocus={false}
-      onOpenChange={() => {}}>
+    <DropdownMenu button={{label: 'Actions'}}>
       <DropdownMenuItem
         icon={PencilIcon}
         label="Edit"

package/templates/blocks/components/FieldLabel/FieldLabelBasic.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: 'FieldLabel',
+  name: 'FieldLabel — Basic',
+  displayName: 'FieldLabel — Basic',
+  description:
+    'Standalone labels with required and optional indicators and a helper description. Use when labeling a custom control that does not render its own label.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['Field', 'FieldLabel', 'VStack'],
+};

package/templates/blocks/components/FieldLabel/FieldLabelBasic.tsx

@@ -0,0 +1,20 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {FieldLabel} from '@astryxdesign/core/Field';
+import {VStack} from '@astryxdesign/core/Layout';
+
+export default function FieldLabelBasic() {
+  return (
+    <VStack gap={4}>
+      <FieldLabel label="Email address" inputID="email-input" isRequired />
+      <FieldLabel
+        label="Phone number"
+        inputID="phone-input"
+        isOptional
+        description="Include country code for international numbers"
+      />
+    </VStack>
+  );
+}

package/templates/blocks/components/FieldStatus/FieldStatusBasic.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: 'FieldStatus',
+  name: 'FieldStatus — Basic',
+  displayName: 'FieldStatus — Basic',
+  description:
+    'Detached error and success messages for validation feedback. Use below checkboxes, switches, or custom controls where an attached status would overlap.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['FieldStatus', 'VStack'],
+};

package/templates/blocks/components/FieldStatus/FieldStatusBasic.tsx

@@ -0,0 +1,23 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {FieldStatus} from '@astryxdesign/core/FieldStatus';
+import {VStack} from '@astryxdesign/core/Layout';
+
+export default function FieldStatusBasic() {
+  return (
+    <VStack gap={4}>
+      <FieldStatus
+        type="error"
+        message="This field is required"
+        variant="detached"
+      />
+      <FieldStatus
+        type="success"
+        message="Your changes have been saved"
+        variant="detached"
+      />
+    </VStack>
+  );
+}

package/templates/blocks/components/FileInput/FileInputBasic.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: 'FileInput',
+  name: 'FileInput — Basic',
+  displayName: 'FileInput — Basic',
+  description:
+    'A controlled single-file upload with accepted types, a size limit, and helper text. Use for standard document upload fields in forms.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['FileInput'],
+};

package/templates/blocks/components/FileInput/FileInputBasic.tsx

@@ -0,0 +1,22 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useState} from 'react';
+import {FileInput} from '@astryxdesign/core/FileInput';
+
+export default function FileInputBasic() {
+  const [value, setValue] = useState<File | File[] | null>(null);
+  return (
+    <div style={{width: 350}}>
+      <FileInput
+        label="Resume"
+        value={value}
+        onChange={setValue}
+        accept=".pdf,.docx"
+        description="PDF or Word document, up to 5 MB"
+        maxSize={5 * 1024 * 1024}
+      />
+    </div>
+  );
+}

package/templates/blocks/components/GridSpan/GridSpanColumns.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: 'GridSpan',
+  name: 'GridSpan — Columns',
+  displayName: 'GridSpan — Columns',
+  description:
+    'Grid items spanning two of three columns. Wrap a grid child in GridSpan to make it occupy multiple columns for asymmetric layouts.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['GridSpan', 'Grid', 'Card', 'Text'],
+};

package/templates/blocks/components/GridSpan/GridSpanColumns.tsx

@@ -0,0 +1,38 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {Grid, GridSpan} from '@astryxdesign/core/Grid';
+import {Card} from '@astryxdesign/core/Card';
+import {Text} from '@astryxdesign/core/Text';
+
+export default function GridSpanColumns() {
+  return (
+    <Grid columns={3} gap={3} width={400}>
+      <GridSpan columns={2}>
+        <Card height={80}>
+          <Text type="body" color="secondary">
+            Spans 2 columns
+          </Text>
+        </Card>
+      </GridSpan>
+      <Card height={80}>
+        <Text type="body" color="secondary">
+          1 col
+        </Text>
+      </Card>
+      <Card height={80}>
+        <Text type="body" color="secondary">
+          1 col
+        </Text>
+      </Card>
+      <GridSpan columns={2}>
+        <Card height={80}>
+          <Text type="body" color="secondary">
+            Spans 2 columns
+          </Text>
+        </Card>
+      </GridSpan>
+    </Grid>
+  );
+}