@astryxdesign/cli 0.1.4-canary.37c19d3 → 0.1.4-canary.39ffd21

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

@@ -3,10 +3,16 @@
 'use client';
 
 import {useMemo, type CSSProperties} from 'react';
-import {CommandPalette} from '@astryxdesign/core/CommandPalette';
+import {
+  CommandPalette,
+  CommandPaletteList,
+  CommandPaletteItem,
+} 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 = {
@@ -17,21 +23,9 @@ 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'}},
 ];
 
@@ -39,21 +33,50 @@ export default function CommandPaletteItemShowcase() {
   const source = useMemo(() => createStaticSource(commands), []);
 
   return (
-    <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 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} />
+              )}
+            </>
           )}
-        </>
-      )}
-    />
+        />
+      </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/pages/table-page-chart/page.tsx

@@ -19,7 +19,13 @@ import {Link} from '@astryxdesign/core/Link';
 import {Thumbnail} from '@astryxdesign/core/Thumbnail';
 import {Table, proportional, pixel} from '@astryxdesign/core/Table';
 import type {TableColumn} from '@astryxdesign/core/Table';
-import {Chart, ChartGrid, ChartAxis, area, line} from '@astryxdesign/charts';
+import {
+  ChartV2 as Chart,
+  ChartGrid,
+  ChartAxis,
+  area,
+  line,
+} from '@astryxdesign/lab';
 import {
   FunnelIcon,
   ArrowDownTrayIcon,
@@ -475,13 +481,17 @@ const columns: TableColumn<OrderRow>[] = [
     key: 'amount',
     header: 'Amount',
     width: pixel(90),
-    renderCell: (item: OrderRow) => <Text type="body">${item.amount}</Text>,
+    renderCell: (item: OrderRow) => (
+      <Text type="body">${item.amount}</Text>
+    ),
   },
   {
     key: 'customer',
     header: 'Customer',
     width: proportional(2),
-    renderCell: (item: OrderRow) => <Text type="body">{item.customer}</Text>,
+    renderCell: (item: OrderRow) => (
+      <Text type="body">{item.customer}</Text>
+    ),
   },
   {
     key: 'email',

package/templates/pages/table-page-shoe-store-heatmap/page.tsx

@@ -19,7 +19,13 @@ import {Link} from '@astryxdesign/core/Link';
 import {Thumbnail} from '@astryxdesign/core/Thumbnail';
 import {Table, proportional, pixel} from '@astryxdesign/core/Table';
 import type {TableColumn} from '@astryxdesign/core/Table';
-import {Chart, ChartGrid, ChartAxis, area, line} from '@astryxdesign/charts';
+import {
+  ChartV2 as Chart,
+  ChartGrid,
+  ChartAxis,
+  area,
+  line,
+} from '@astryxdesign/lab';
 import {
   FunnelIcon,
   ArrowDownTrayIcon,
@@ -29,7 +35,11 @@ import {
 // ============= DATA =============
 
 type ProductCategory =
-  'Running' | 'Lifestyle' | 'Basketball' | 'Training' | 'Skateboarding';
+  | 'Running'
+  | 'Lifestyle'
+  | 'Basketball'
+  | 'Training'
+  | 'Skateboarding';
 
 function shoeSvg(bg: string, accent: string) {
   const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><rect width="100" height="100" rx="12" fill="${bg}"/><g transform="translate(22.5, 22.5) scale(2.29)" fill="none" stroke="${accent}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m15 10.42 4.8-5.07"/><path d="M19 18h3"/><path d="M9.5 22 21.414 9.415A2 2 0 0 0 21.2 6.4l-5.61-4.208A1 1 0 0 0 14 3v2a2 2 0 0 1-1.394 1.906L8.677 8.053A1 1 0 0 0 8 9c-.155 6.393-2.082 9-4 9a2 2 0 0 0 0 4h14"/></g></svg>`;
@@ -829,13 +839,17 @@ const columns: TableColumn<OrderRow>[] = [
     key: 'amount',
     header: 'Amount',
     width: pixel(90),
-    renderCell: (item: OrderRow) => <Text type="body">${item.amount}</Text>,
+    renderCell: (item: OrderRow) => (
+      <Text type="body">${item.amount}</Text>
+    ),
   },
   {
     key: 'customer',
     header: 'Customer',
     width: proportional(2),
-    renderCell: (item: OrderRow) => <Text type="body">{item.customer}</Text>,
+    renderCell: (item: OrderRow) => (
+      <Text type="body">{item.customer}</Text>
+    ),
   },
   {
     key: 'email',

package/src/commands/build-theme.variants.test.mjs

@@ -1,204 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/**
- * @file Regression test for the custom-variant type augmentations emitted by
- * `astryx theme build` (#3391 companion: #3371).
- *
- * When a theme declares a custom component prop value (e.g.
- * `button['variant:accentOutline']`), the build emits a `<name>.variants.d.ts`
- * with a module augmentation so the custom value type-checks. This suite pins
- * the two bugs that made that augmentation dead code:
- *
- *   1. The augmentation targeted a non-existent, `XDS`-prefixed interface
- *      (`XDSButtonVariantMap`) instead of core's real `ButtonVariantMap`, so it
- *      created a new unused interface and never widened the prop union.
- *   2. Props with no augmentation point (closed literal-union types such as
- *      Button `size` or Heading `type`/`level`) still got a `declare module`
- *      block against a `*Map` interface that doesn't exist.
- *   3. The generated `.variants.d.ts` was never referenced by the main
- *      `<name>.d.ts`, so even a correct augmentation never loaded.
- *
- * Building `astryx theme build` requires a compiled @astryxdesign/core, so this
- * suite builds core once in beforeAll (mirrors build-theme.prose.test.mjs).
- */
-
-import {describe, it, expect, beforeAll, beforeEach, afterEach} from 'vitest';
-import {execFileSync} from 'node:child_process';
-import * as fs from 'node:fs';
-import * as path from 'node:path';
-import * as os from 'node:os';
-import {fileURLToPath} from 'node:url';
-
-const __dirname = path.dirname(fileURLToPath(import.meta.url));
-const CLI_BIN = path.resolve(__dirname, '../../bin/astryx.mjs');
-const REPO_ROOT = path.resolve(__dirname, '../../../..');
-const CORE_THEME_ENTRY = path.join(
-  REPO_ROOT,
-  'packages/core/dist/theme/index.js',
-);
-// The fix reads core's shipped component declarations to decide whether an
-// interface is augmentable; those .d.ts files come from the same core build.
-const CORE_BUTTON_DTS = path.join(
-  REPO_ROOT,
-  'packages/core/dist/Button/index.d.ts',
-);
-
-function runCli(args, cwd) {
-  try {
-    const out = execFileSync('node', [CLI_BIN, ...args], {
-      cwd,
-      encoding: 'utf-8',
-      stdio: ['ignore', 'pipe', 'pipe'],
-      env: {...process.env, FORCE_COLOR: '0'},
-    });
-    return {code: 0, stdout: out, stderr: ''};
-  } catch (e) {
-    return {
-      code: e.status ?? 1,
-      stdout: e.stdout?.toString() ?? '',
-      stderr: e.stderr?.toString() ?? '',
-    };
-  }
-}
-
-function writeTheme(dir, contents) {
-  fs.mkdirSync(dir, {recursive: true});
-  const file = path.join(dir, 'variants-theme.mjs');
-  fs.writeFileSync(file, contents);
-  return file;
-}
-
-beforeAll(() => {
-  if (!fs.existsSync(CORE_THEME_ENTRY) || !fs.existsSync(CORE_BUTTON_DTS)) {
-    execFileSync('pnpm', ['-F', '@astryxdesign/core', 'build'], {
-      cwd: REPO_ROOT,
-      stdio: 'pipe',
-      timeout: 180_000,
-    });
-  }
-}, 200_000);
-
-let tmpDir;
-beforeEach(() => {
-  tmpDir = fs.mkdtempSync(path.join(os.tmpdir(), 'astryx-build-theme-variants-'));
-});
-afterEach(() => {
-  fs.rmSync(tmpDir, {recursive: true, force: true});
-});
-
-describe('theme build custom-variant augmentations', () => {
-  it('targets the real (un-prefixed) core interface for a custom variant', () => {
-    const themeFile = writeTheme(
-      tmpDir,
-      `export default {
-        name: 'variants-theme',
-        tokens: { '--color-bg': '#fff' },
-        components: {
-          button: { 'variant:accentOutline': { backgroundColor: 'transparent' } },
-        },
-      };\n`,
-    );
-
-    const result = runCli(
-      ['theme', 'build', path.relative(tmpDir, themeFile)],
-      tmpDir,
-    );
-    expect(result.code).toBe(0);
-
-    const variantsPath = path.join(tmpDir, 'variants-theme.variants.d.ts');
-    expect(fs.existsSync(variantsPath)).toBe(true);
-    const dts = fs.readFileSync(variantsPath, 'utf-8');
-
-    // Targets core's actual augmentation point…
-    expect(dts).toContain("declare module '@astryxdesign/core/Button'");
-    expect(dts).toMatch(/interface ButtonVariantMap\b/);
-    expect(dts).toContain("'accentOutline': true;");
-    // …and NOT the old, non-existent XDS-prefixed interface.
-    expect(dts).not.toMatch(/XDSButtonVariantMap/);
-  });
-
-  it('skips props with no augmentation point (Button size, Heading type)', () => {
-    const themeFile = writeTheme(
-      tmpDir,
-      `export default {
-        name: 'variants-theme',
-        tokens: { '--color-bg': '#fff' },
-        components: {
-          button: {
-            'variant:accentOutline': { backgroundColor: 'transparent' },
-            'size:jumbo': { paddingBlock: '40px' },
-          },
-          heading: { 'type:hero': { fontSize: '80px' } },
-        },
-      };\n`,
-    );
-
-    const result = runCli(
-      ['theme', 'build', path.relative(tmpDir, themeFile)],
-      tmpDir,
-    );
-    expect(result.code).toBe(0);
-
-    const variantsPath = path.join(tmpDir, 'variants-theme.variants.d.ts');
-    expect(fs.existsSync(variantsPath)).toBe(true);
-    const dts = fs.readFileSync(variantsPath, 'utf-8');
-
-    // The augmentable variant is emitted…
-    expect(dts).toMatch(/interface ButtonVariantMap\b/);
-    // …but closed literal-union props get no dead augmentation.
-    expect(dts).not.toMatch(/ButtonSizeMap/);
-    expect(dts).not.toMatch(/HeadingTypeMap/);
-    expect(dts).not.toContain("declare module '@astryxdesign/core/Heading'");
-  });
-
-  it('does not emit a .variants.d.ts when every custom value is non-augmentable', () => {
-    const themeFile = writeTheme(
-      tmpDir,
-      `export default {
-        name: 'variants-theme',
-        tokens: { '--color-bg': '#fff' },
-        components: {
-          button: { 'size:jumbo': { paddingBlock: '40px' } },
-        },
-      };\n`,
-    );
-
-    const result = runCli(
-      ['theme', 'build', path.relative(tmpDir, themeFile)],
-      tmpDir,
-    );
-    expect(result.code).toBe(0);
-    expect(
-      fs.existsSync(path.join(tmpDir, 'variants-theme.variants.d.ts')),
-    ).toBe(false);
-  });
-
-  it('references the variants file from the main .d.ts so the augmentation loads', () => {
-    const themeFile = writeTheme(
-      tmpDir,
-      `export default {
-        name: 'variants-theme',
-        tokens: { '--color-bg': '#fff' },
-        components: {
-          button: { 'variant:accentOutline': { backgroundColor: 'transparent' } },
-        },
-      };\n`,
-    );
-
-    const result = runCli(
-      ['theme', 'build', path.relative(tmpDir, themeFile)],
-      tmpDir,
-    );
-    expect(result.code).toBe(0);
-
-    const dts = fs.readFileSync(
-      path.join(tmpDir, 'variants-theme.d.ts'),
-      'utf-8',
-    );
-    // A triple-slash reference to the variants file, so importing the theme's
-    // types also loads the module augmentation.
-    expect(dts).toMatch(
-      /\/\/\/\s*<reference path="\.\/variants-theme\.variants\.d\.ts"\s*\/>/,
-    );
-  });
-});

package/templates/blocks/components/BaseTypeahead/BaseTypeaheadCustomSearch.doc.mjs

@@ -1,14 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
-export const doc = {
-  type: 'block',
-  exampleFor: 'BaseTypeahead',
-  name: 'BaseTypeahead — Custom Search Bar',
-  displayName: 'BaseTypeahead — Custom Search Bar',
-  description:
-    'BaseTypeahead embedded inside a custom-styled wrapper. The wrapper provides its own border and icon chrome; anchorRef positions the dropdown relative to it. Use this pattern when Typeahead\'s built-in field layout does not fit your composition.',
-  isReady: true,
-  aspectRatio: 16 / 9,
-  componentsUsed: ['BaseTypeahead', 'Icon', 'Layout', 'Text'],
-};

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

@@ -1,58 +0,0 @@
-// 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

@@ -1,14 +0,0 @@
-// 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

@@ -1,24 +0,0 @@
-// 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

@@ -1,13 +0,0 @@
-// 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

@@ -1,33 +0,0 @@
-// 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/CommandPaletteInput/CommandPaletteInputBasic.doc.mjs

@@ -1,15 +0,0 @@
-// 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

@@ -1,39 +0,0 @@
-// 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

@@ -1,15 +0,0 @@
-// 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

@@ -1,39 +0,0 @@
-// 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" />}
-        />
-      }
-    />
-  );
-}