@astryxdesign/cli 0.1.2-canary.deb5aa0 → 0.1.2-canary.df46db7

package/templates/blocks/components/ChatDictationButton/ChatDictationButtonBasic.tsx

@@ -0,0 +1,34 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useRef} from 'react';
+import {
+  ChatDictationButton,
+  ChatComposer,
+  ChatComposerInput,
+  useChatDictation,
+} from '@astryxdesign/core/Chat';
+import type {ChatComposerInputHandle} from '@astryxdesign/core/Chat';
+import {Stack} from '@astryxdesign/core/Layout';
+
+export default function ChatDictationButtonBasic() {
+  const inputRef = useRef<ChatComposerInputHandle>(null);
+
+  const dictation = useChatDictation({
+    inputRef,
+    onResult: text => {
+      console.log('Dictation result:', text);
+    },
+  });
+
+  return (
+    <Stack direction="vertical" width="100%" style={{maxWidth: 450}}>
+      <ChatComposer
+        onSubmit={value => console.log('Submit:', value)}
+        input={<ChatComposerInput handleRef={inputRef} />}
+        sendActions={<ChatDictationButton dictation={dictation} />}
+      />
+    </Stack>
+  );
+}

package/templates/blocks/components/CheckboxListItem/CheckboxListItemBasic.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: 'CheckboxListItem',
+  name: 'CheckboxListItem — Basic',
+  displayName: 'CheckboxListItem — Basic',
+  description:
+    'Checkbox items with labels and descriptions inside a controlled CheckboxList. Use for multi-select option groups like notification preferences.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['CheckboxList', 'CheckboxListItem'],
+};

package/templates/blocks/components/CheckboxListItem/CheckboxListItemBasic.tsx

@@ -0,0 +1,30 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useState} from 'react';
+import {CheckboxList, CheckboxListItem} from '@astryxdesign/core/CheckboxList';
+
+export default function CheckboxListItemBasic() {
+  const [value, setValue] = useState<string[]>(['updates']);
+
+  return (
+    <CheckboxList label="Email preferences" value={value} onChange={setValue}>
+      <CheckboxListItem
+        label="Product updates"
+        value="updates"
+        description="New features and improvements"
+      />
+      <CheckboxListItem
+        label="Security alerts"
+        value="security"
+        description="Important account security notifications"
+      />
+      <CheckboxListItem
+        label="Marketing"
+        value="marketing"
+        description="Tips, offers, and promotions"
+      />
+    </CheckboxList>
+  );
+}

package/templates/blocks/components/CollapsibleGroup/CollapsibleGroupAccordion.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: 'CollapsibleGroup',
+  name: 'CollapsibleGroup — Accordion',
+  displayName: 'CollapsibleGroup — Accordion',
+  description:
+    'An accordion built with type="single": opening one Collapsible automatically closes the others. Use defaultValue to pre-expand the most important section.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['CollapsibleGroup', 'Collapsible', 'VStack', 'Text'],
+};

package/templates/blocks/components/CollapsibleGroup/CollapsibleGroupAccordion.tsx

@@ -0,0 +1,31 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {Collapsible, CollapsibleGroup} from '@astryxdesign/core/Collapsible';
+import {VStack} from '@astryxdesign/core/Layout';
+import {Text} from '@astryxdesign/core/Text';
+
+export default function CollapsibleGroupAccordion() {
+  return (
+    <CollapsibleGroup type="single" defaultValue="account">
+      <VStack gap={2} width="100%">
+        <Collapsible trigger="Account" value="account">
+          <Text type="body" color="secondary">
+            Manage your profile details, email address, and password.
+          </Text>
+        </Collapsible>
+        <Collapsible trigger="Notifications" value="notifications">
+          <Text type="body" color="secondary">
+            Choose which activity triggers email and push notifications.
+          </Text>
+        </Collapsible>
+        <Collapsible trigger="Billing" value="billing">
+          <Text type="body" color="secondary">
+            View invoices and update your payment method.
+          </Text>
+        </Collapsible>
+      </VStack>
+    </CollapsibleGroup>
+  );
+}

package/templates/blocks/components/CommandPaletteEmpty/CommandPaletteEmptyBasic.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: 'CommandPaletteEmpty',
+  name: 'CommandPaletteEmpty — Basic',
+  displayName: 'CommandPaletteEmpty — Basic',
+  description:
+    'A command palette with no results, showing a custom empty message via emptyBootstrapText. Use to explain why the palette is empty and what the user can do next.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['CommandPalette', 'CommandPaletteEmpty', 'Text'],
+};

package/templates/blocks/components/CommandPaletteEmpty/CommandPaletteEmptyBasic.tsx

@@ -0,0 +1,26 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useMemo} from 'react';
+import {CommandPalette} from '@astryxdesign/core/CommandPalette';
+import {Text} from '@astryxdesign/core/Text';
+import {createStaticSource} from '@astryxdesign/core/Typeahead';
+
+export default function CommandPaletteEmptyBasic() {
+  const emptySource = useMemo(() => createStaticSource([]), []);
+
+  return (
+    <CommandPalette
+      isOpen
+      isInline
+      onOpenChange={() => {}}
+      searchSource={emptySource}
+      emptyBootstrapText={
+        <Text type="supporting" color="secondary">
+          No commands available
+        </Text>
+      }
+    />
+  );
+}

package/templates/blocks/components/CommandPaletteFooter/CommandPaletteFooterBasic.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: 'CommandPaletteFooter',
+  name: 'CommandPaletteFooter — Basic',
+  displayName: 'CommandPaletteFooter — Basic',
+  description:
+    'A command palette footer with no children, rendering the built-in keyboard navigation hints. Use CommandPaletteFooter without content to get the default arrow-key, Enter, and Esc hints below the results list.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['CommandPalette', 'CommandPaletteFooter'],
+};

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/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,16 +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}
       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,10 +65,7 @@ const TrashIcon = (props: React.SVGProps<SVGSVGElement>) => (
 
 export default function DropdownMenuItemShowcase() {
   return (
-    <DropdownMenu
-      button={{label: 'Actions'}}
-      isMenuOpen
-      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>
+  );
+}