@astryxdesign/cli 0.1.4-canary.39ffd21 → 0.1.4-canary.3d64ef2

package/templates/blocks/components/BaseTypeahead/BaseTypeaheadCustomSearch.tsx

@@ -0,0 +1,58 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useRef, useState} from 'react';
+import {BaseTypeahead, createStaticSource} from '@astryxdesign/core/Typeahead';
+import type {SearchableItem} from '@astryxdesign/core/Typeahead';
+import {Icon} from '@astryxdesign/core/Icon';
+import {HStack, VStack} from '@astryxdesign/core/Layout';
+import {Text} from '@astryxdesign/core/Text';
+import {MagnifyingGlassIcon} from '@heroicons/react/24/outline';
+
+const frameworks: SearchableItem[] = [
+  {id: 'react', label: 'React'},
+  {id: 'vue', label: 'Vue'},
+  {id: 'angular', label: 'Angular'},
+  {id: 'svelte', label: 'Svelte'},
+  {id: 'solid', label: 'SolidJS'},
+  {id: 'remix', label: 'Remix'},
+  {id: 'next', label: 'Next.js'},
+  {id: 'nuxt', label: 'Nuxt'},
+];
+
+const source = createStaticSource(frameworks);
+
+export default function BaseTypeaheadCustomSearch() {
+  const [value, setValue] = useState<SearchableItem | null>(null);
+  const wrapperRef = useRef<HTMLElement>(null);
+
+  return (
+    <VStack gap={3} style={{width: 320}}>
+      <HStack
+        ref={wrapperRef}
+        gap={2}
+        vAlign="center"
+        style={{
+          border: '1px solid var(--color-border)',
+          borderRadius: 'var(--radius-control)',
+          padding: '6px 10px',
+          background: 'var(--color-surface)',
+        }}>
+        <Icon icon={MagnifyingGlassIcon} size="sm" color="secondary" />
+        <BaseTypeahead
+          searchSource={source}
+          value={value}
+          onChange={setValue}
+          anchorRef={wrapperRef}
+          placeholder="Search frameworks…"
+          hasEntriesOnFocus
+          debounceMs={0}
+        />
+      </HStack>
+      <Text type="supporting" color="secondary">
+        {value != null ? `Selected: ${value.label}` : 'No selection'}
+      </Text>
+    </VStack>
+  );
+}

package/templates/blocks/components/CodeBlock/CodeBlockTerminal.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: 'CodeBlock',
+  name: 'Code — Terminal',
+  displayName: 'Code — Terminal',
+  description:
+    'A dark terminal-style command block: a bash CodeBlock wrapped in SyntaxTheme with the GitHub Dark preset, copy button on, and no line numbers. Use for shell sessions or CLI output that should read as a terminal even on light pages. Reach for a dark syntax preset instead of hand-rolling a dark box with custom CSS.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['CodeBlock', 'SyntaxTheme'],
+};

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

@@ -0,0 +1,24 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {SyntaxTheme} from '@astryxdesign/core/theme';
+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
+$ pnpm astryx component CodeBlock --dense`;
+
+export default function CodeBlockTerminal() {
+  return (
+    <SyntaxTheme theme={githubDark}>
+      <CodeBlock
+        code={commands}
+        language="bash"
+        hasCopyButton
+        style={{width: '100%', maxWidth: 480}}
+      />
+    </SyntaxTheme>
+  );
+}

package/templates/blocks/components/Collapsible/CollapsibleDividedAccordion.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: 'Collapsible',
+  name: 'Collapsible — Divided Accordion',
+  displayName: 'Collapsible — Divided Accordion',
+  description: 'FAQ-style accordion using the dividers prop on CollapsibleGroup: built-in row hairlines and density padding with zero custom CSS. Use for FAQs, settings lists, and nav sections.',
+  isReady: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: ['Collapsible', 'CollapsibleGroup', 'Text'],
+};

package/templates/blocks/components/Collapsible/CollapsibleDividedAccordion.tsx

@@ -0,0 +1,33 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {Collapsible, CollapsibleGroup} from '@astryxdesign/core/Collapsible';
+import {Text} from '@astryxdesign/core/Text';
+
+export default function CollapsibleDividedAccordion() {
+  return (
+    <div style={{width: '100%', maxWidth: 400}}>
+      <CollapsibleGroup type="single" dividers="between" defaultValue="reset">
+        <Collapsible trigger="How do I reset my password?" value="reset">
+          <Text type="body">
+            Go to Settings → Security → Change Password. You'll receive a
+            confirmation email within a few minutes.
+          </Text>
+        </Collapsible>
+        <Collapsible trigger="Can I change my username?" value="username">
+          <Text type="body">
+            Usernames can be changed once every 30 days from your profile
+            settings.
+          </Text>
+        </Collapsible>
+        <Collapsible trigger="How do I delete my account?" value="delete">
+          <Text type="body">
+            Account deletion is permanent. Your data will be removed within 30
+            days.
+          </Text>
+        </Collapsible>
+      </CollapsibleGroup>
+    </div>
+  );
+}

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

@@ -3,66 +3,45 @@
 'use client';
 
 import {useMemo} from 'react';
-import {
-  CommandPalette,
-  CommandPaletteList,
-  CommandPaletteGroup,
-  CommandPaletteItem,
-} from '@astryxdesign/core/CommandPalette';
+import {CommandPalette} from '@astryxdesign/core/CommandPalette';
 import {createStaticSource} from '@astryxdesign/core/Typeahead';
-import {Stack} from '@astryxdesign/core/Layout';
-import {Text} from '@astryxdesign/core/Text';
 
 export default function CommandPaletteGroupShowcase() {
   const source = useMemo(
     () =>
       createStaticSource([
-        {id: 'index', label: 'index.tsx', auxiliaryData: {group: 'Recent Files'}},
+        {
+          id: 'index',
+          label: 'index.tsx',
+          auxiliaryData: {group: 'Recent Files'},
+        },
         {id: 'app', label: 'App.tsx', auxiliaryData: {group: 'Recent Files'}},
-        {id: 'settings', label: 'Open Settings', auxiliaryData: {group: 'Commands'}},
-        {id: 'terminal', label: 'Toggle Terminal', auxiliaryData: {group: 'Commands'}},
-        {id: 'theme', label: 'Color Theme', auxiliaryData: {group: 'Preferences'}},
+        {
+          id: 'settings',
+          label: 'Open Settings',
+          auxiliaryData: {group: 'Commands'},
+        },
+        {
+          id: 'terminal',
+          label: 'Toggle Terminal',
+          auxiliaryData: {group: 'Commands'},
+        },
+        {
+          id: 'theme',
+          label: 'Color Theme',
+          auxiliaryData: {group: 'Preferences'},
+        },
         {id: 'font', label: 'Font Size', auxiliaryData: {group: 'Preferences'}},
       ]),
     [],
   );
 
   return (
-    <Stack direction="vertical" gap={4}>
-      <Stack direction="vertical" gap={1}>
-        <Text type="supporting" color="secondary">
-          Data-driven grouping (auxiliaryData.group)
-        </Text>
-        <CommandPalette
-          isOpen
-          isInline
-          onOpenChange={() => {}}
-          searchSource={source}
-        />
-      </Stack>
-      <Stack direction="vertical" gap={1}>
-        <Text type="supporting" color="secondary">
-          Composed form (CommandPaletteGroup + CommandPaletteItem)
-        </Text>
-        <CommandPaletteList>
-          <CommandPaletteGroup heading="Navigation">
-            <CommandPaletteItem value="home" onSelect={() => {}}>
-              Home
-            </CommandPaletteItem>
-            <CommandPaletteItem value="dashboard" onSelect={() => {}}>
-              Dashboard
-            </CommandPaletteItem>
-          </CommandPaletteGroup>
-          <CommandPaletteGroup heading="Actions">
-            <CommandPaletteItem value="new-file" onSelect={() => {}}>
-              New File
-            </CommandPaletteItem>
-            <CommandPaletteItem value="save" onSelect={() => {}}>
-              Save All
-            </CommandPaletteItem>
-          </CommandPaletteGroup>
-        </CommandPaletteList>
-      </Stack>
-    </Stack>
+    <CommandPalette
+      isOpen
+      isInline
+      onOpenChange={() => {}}
+      searchSource={source}
+    />
   );
 }

package/templates/blocks/components/CommandPaletteInput/CommandPaletteInputBasic.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: 'CommandPaletteInput',
+  name: 'CommandPaletteInput — With End Content',
+  displayName: 'CommandPaletteInput — With End Content',
+  description:
+    'Custom placeholder and a keyboard shortcut badge in the trailing slot via endContent.',
+  isReady: true,
+  isShowcase: false,
+  aspectRatio: 4 / 3,
+  componentsUsed: ['CommandPalette', 'CommandPaletteInput', 'Kbd'],
+};

package/templates/blocks/components/CommandPaletteInput/CommandPaletteInputBasic.tsx

@@ -0,0 +1,39 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useMemo} from 'react';
+import {
+  CommandPalette,
+  CommandPaletteInput,
+} from '@astryxdesign/core/CommandPalette';
+import {Kbd} from '@astryxdesign/core/Kbd';
+import {createStaticSource} from '@astryxdesign/core/Typeahead';
+
+export default function CommandPaletteInputBasic() {
+  const source = useMemo(
+    () =>
+      createStaticSource([
+        {id: 'home', label: 'Home'},
+        {id: 'settings', label: 'Settings'},
+        {id: 'profile', label: 'Profile'},
+        {id: 'help', label: 'Help'},
+      ]),
+    [],
+  );
+
+  return (
+    <CommandPalette
+      isOpen
+      isInline
+      onOpenChange={() => {}}
+      searchSource={source}
+      input={
+        <CommandPaletteInput
+          placeholder="Search commands, files, or actions..."
+          endContent={<Kbd keys="mod+k" />}
+        />
+      }
+    />
+  );
+}

package/templates/blocks/components/CommandPaletteInput/CommandPaletteInputShowcase.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: 'CommandPaletteInput',
+  name: 'CommandPaletteInput',
+  displayName: 'Command Palette Input',
+  description:
+    'Command palette search input with a custom placeholder and a keyboard shortcut hint in the endContent slot.',
+  isReady: true,
+  isShowcase: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: ['CommandPalette', 'CommandPaletteInput', 'Kbd'],
+};

package/templates/blocks/components/CommandPaletteInput/CommandPaletteInputShowcase.tsx

@@ -0,0 +1,39 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useMemo} from 'react';
+import {
+  CommandPalette,
+  CommandPaletteInput,
+} from '@astryxdesign/core/CommandPalette';
+import {Kbd} from '@astryxdesign/core/Kbd';
+import {createStaticSource} from '@astryxdesign/core/Typeahead';
+
+export default function CommandPaletteInputShowcase() {
+  const source = useMemo(
+    () =>
+      createStaticSource([
+        {id: 'home', label: 'Home'},
+        {id: 'settings', label: 'Settings'},
+        {id: 'profile', label: 'Profile'},
+        {id: 'help', label: 'Help'},
+      ]),
+    [],
+  );
+
+  return (
+    <CommandPalette
+      isOpen
+      isInline
+      onOpenChange={() => {}}
+      searchSource={source}
+      input={
+        <CommandPaletteInput
+          placeholder="Search commands, files, or actions..."
+          endContent={<Kbd keys="mod+k" />}
+        />
+      }
+    />
+  );
+}

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

@@ -3,16 +3,10 @@
 'use client';
 
 import {useMemo, type CSSProperties} from 'react';
-import {
-  CommandPalette,
-  CommandPaletteList,
-  CommandPaletteItem,
-} from '@astryxdesign/core/CommandPalette';
+import {CommandPalette} from '@astryxdesign/core/CommandPalette';
 import {Text} from '@astryxdesign/core/Text';
 import {Kbd} from '@astryxdesign/core/Kbd';
-import {Icon} from '@astryxdesign/core/Icon';
 import {createStaticSource} from '@astryxdesign/core/Typeahead';
-import {Stack} from '@astryxdesign/core/Layout';
 import type {SearchableItem} from '@astryxdesign/core/Typeahead';
 
 const itemLabel: CSSProperties = {
@@ -23,9 +17,21 @@ type CommandItem = SearchableItem<{shortcut?: string}>;
 
 const commands: CommandItem[] = [
   {id: 'save', label: 'Save File', auxiliaryData: {shortcut: 'mod+s'}},
-  {id: 'find', label: 'Find in Files', auxiliaryData: {shortcut: 'mod+shift+f'}},
-  {id: 'palette', label: 'Command Palette', auxiliaryData: {shortcut: 'mod+shift+p'}},
-  {id: 'terminal', label: 'Toggle Terminal', auxiliaryData: {shortcut: 'ctrl+`'}},
+  {
+    id: 'find',
+    label: 'Find in Files',
+    auxiliaryData: {shortcut: 'mod+shift+f'},
+  },
+  {
+    id: 'palette',
+    label: 'Command Palette',
+    auxiliaryData: {shortcut: 'mod+shift+p'},
+  },
+  {
+    id: 'terminal',
+    label: 'Toggle Terminal',
+    auxiliaryData: {shortcut: 'ctrl+`'},
+  },
   {id: 'sidebar', label: 'Toggle Sidebar', auxiliaryData: {shortcut: 'mod+b'}},
 ];
 
@@ -33,50 +39,21 @@ export default function CommandPaletteItemShowcase() {
   const source = useMemo(() => createStaticSource(commands), []);
 
   return (
-    <Stack direction="vertical" gap={4}>
-      <Stack direction="vertical" gap={1}>
-        <Text type="supporting" color="secondary">
-          Custom renderItem with keyboard shortcuts
-        </Text>
-        <CommandPalette
-          isOpen
-          isInline
-          onOpenChange={() => {}}
-          searchSource={source}
-          renderItem={(item: CommandItem) => (
-            <>
-              <Text type="body" style={itemLabel}>
-                {item.label}
-              </Text>
-              {item.auxiliaryData?.shortcut && (
-                <Kbd keys={item.auxiliaryData.shortcut} />
-              )}
-            </>
+    <CommandPalette
+      isOpen
+      isInline
+      onOpenChange={() => {}}
+      searchSource={source}
+      renderItem={(item: CommandItem) => (
+        <>
+          <Text type="body" style={itemLabel}>
+            {item.label}
+          </Text>
+          {item.auxiliaryData?.shortcut && (
+            <Kbd keys={item.auxiliaryData.shortcut} />
           )}
-        />
-      </Stack>
-      <Stack direction="vertical" gap={1}>
-        <Text type="supporting" color="secondary">
-          Composed items with icons and states
-        </Text>
-        <CommandPaletteList>
-          <CommandPaletteItem value="home" onSelect={() => {}}>
-            <Icon icon="externalLink" size="sm" />
-            <Text type="body" style={itemLabel}>Home</Text>
-          </CommandPaletteItem>
-          <CommandPaletteItem value="search" isHighlighted onSelect={() => {}}>
-            <Icon icon="search" size="sm" />
-            <Text type="body" style={itemLabel}>Search (highlighted)</Text>
-          </CommandPaletteItem>
-          <CommandPaletteItem value="selected" isSelected onSelect={() => {}}>
-            <Icon icon="check" size="sm" />
-            <Text type="body" style={itemLabel}>Selected item</Text>
-          </CommandPaletteItem>
-          <CommandPaletteItem value="disabled" isDisabled>
-            <Text type="body" style={itemLabel}>Disabled item</Text>
-          </CommandPaletteItem>
-        </CommandPaletteList>
-      </Stack>
-    </Stack>
+        </>
+      )}
+    />
   );
 }

package/templates/blocks/components/CommandPaletteList/CommandPaletteListBasic.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: 'CommandPaletteList',
+  name: 'CommandPaletteList — Item States',
+  displayName: 'CommandPaletteList — Item States',
+  description:
+    'Flat list showing the highlighted, selected, and disabled item states. Use CommandPaletteGroup to add section headings.',
+  isReady: true,
+  isShowcase: false,
+  aspectRatio: 4 / 3,
+  componentsUsed: ['CommandPaletteList', 'CommandPaletteItem'],
+};

package/templates/blocks/components/CommandPaletteList/CommandPaletteListBasic.tsx

@@ -0,0 +1,27 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {
+  CommandPaletteList,
+  CommandPaletteItem,
+} from '@astryxdesign/core/CommandPalette';
+
+export default function CommandPaletteListBasic() {
+  return (
+    <CommandPaletteList>
+      <CommandPaletteItem value="home" onSelect={() => {}}>
+        Go Home
+      </CommandPaletteItem>
+      <CommandPaletteItem value="settings" isHighlighted onSelect={() => {}}>
+        Open Settings
+      </CommandPaletteItem>
+      <CommandPaletteItem value="profile" isSelected onSelect={() => {}}>
+        View Profile
+      </CommandPaletteItem>
+      <CommandPaletteItem value="help" isDisabled onSelect={() => {}}>
+        Help (unavailable)
+      </CommandPaletteItem>
+    </CommandPaletteList>
+  );
+}

package/templates/blocks/components/CommandPaletteList/CommandPaletteListShowcase.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: 'CommandPaletteList',
+  name: 'CommandPaletteList',
+  displayName: 'Command Palette List',
+  description:
+    'Scrollable command palette list with grouped items, including a highlighted item, composed without a full CommandPalette.',
+  isReady: true,
+  isShowcase: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: ['CommandPaletteList', 'CommandPaletteGroup', 'CommandPaletteItem'],
+};

package/templates/blocks/components/CommandPaletteList/CommandPaletteListShowcase.tsx

@@ -0,0 +1,38 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {
+  CommandPaletteList,
+  CommandPaletteGroup,
+  CommandPaletteItem,
+} from '@astryxdesign/core/CommandPalette';
+
+export default function CommandPaletteListShowcase() {
+  return (
+    <CommandPaletteList>
+      <CommandPaletteGroup heading="Navigation">
+        <CommandPaletteItem value="home" onSelect={() => {}}>
+          Go Home
+        </CommandPaletteItem>
+        <CommandPaletteItem value="settings" onSelect={() => {}}>
+          Open Settings
+        </CommandPaletteItem>
+        <CommandPaletteItem value="profile" onSelect={() => {}}>
+          View Profile
+        </CommandPaletteItem>
+      </CommandPaletteGroup>
+      <CommandPaletteGroup heading="Actions">
+        <CommandPaletteItem value="new-file" onSelect={() => {}}>
+          New File
+        </CommandPaletteItem>
+        <CommandPaletteItem value="search" isHighlighted onSelect={() => {}}>
+          Search Files
+        </CommandPaletteItem>
+        <CommandPaletteItem value="save" onSelect={() => {}}>
+          Save All
+        </CommandPaletteItem>
+      </CommandPaletteGroup>
+    </CommandPaletteList>
+  );
+}

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

package/templates/blocks/components/ContextMenuItem/ContextMenuItemBasic.tsx

@@ -0,0 +1,44 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {ContextMenu, ContextMenuItem} from '@astryxdesign/core/ContextMenu';
+
+export default function ContextMenuItemBasic() {
+  return (
+    <ContextMenu
+      menuContent={
+        <>
+          <ContextMenuItem
+            label="Edit"
+            description="Modify this item"
+            onClick={() => {}}
+          />
+          <ContextMenuItem
+            label="Duplicate"
+            description="Create a copy"
+            onClick={() => {}}
+          />
+          <ContextMenuItem
+            label="Delete"
+            description="This action cannot be undone"
+            onClick={() => {}}
+          />
+        </>
+      }>
+      <div
+        style={{
+          padding: '48px',
+          borderWidth: '2px',
+          borderStyle: 'dashed',
+          borderColor: 'var(--color-border)',
+          borderRadius: '8px',
+          textAlign: 'center',
+          color: 'var(--color-text-secondary)',
+          userSelect: 'none',
+        }}>
+        Right-click this area
+      </div>
+    </ContextMenu>
+  );
+}

package/templates/blocks/components/ContextMenuItem/ContextMenuItemShowcase.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: 'ContextMenuItem',
+  name: 'ContextMenuItem',
+  displayName: 'Context Menu Item',
+  description:
+    'Context menu with custom-rendered items using ContextMenuItem for icons and descriptions.',
+  isReady: true,
+  isShowcase: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['ContextMenu', 'ContextMenuItem'],
+};