@astryxdesign/cli 0.1.4-canary.3b5f42e → 0.1.4-canary.3d64ef2

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

@@ -0,0 +1,204 @@
+// 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/src/commands/doctor.test.mjs

@@ -63,6 +63,33 @@ function installPkg(name, version = '1.0.0') {
   return dir;
 }
 
+/**
+ * Mirror pnpm's layout: the real package lives under node_modules/.pnpm and
+ * the entry in the scope directory is a symlink to it.
+ */
+function installPkgPnpmStyle(name, version = '1.0.0') {
+  const realDir = path.join(
+    tmpDir,
+    'node_modules',
+    '.pnpm',
+    `${name.replace('/', '+')}@${version}`,
+    'node_modules',
+    ...name.split('/'),
+  );
+  fs.mkdirSync(realDir, {recursive: true});
+  fs.writeFileSync(
+    path.join(realDir, 'package.json'),
+    JSON.stringify({name, version, main: 'index.js'}),
+  );
+  fs.writeFileSync(path.join(realDir, 'index.js'), 'module.exports = {};');
+  const linkPath = path.join(tmpDir, 'node_modules', ...name.split('/'));
+  fs.mkdirSync(path.dirname(linkPath), {recursive: true});
+  // 'junction' keeps this working on Windows without elevated permissions;
+  // it is ignored on posix.
+  fs.symlinkSync(realDir, linkPath, 'junction');
+  return linkPath;
+}
+
 function find(checks, id) {
   return checks.find(c => c.id === id);
 }
@@ -119,6 +146,13 @@ describe('doctor — individual checks', () => {
     expect(res.status).toBe('pass');
   });
 
+  it('themes: detects pnpm-style symlinked theme packages (#3530)', () => {
+    installPkgPnpmStyle('@astryxdesign/theme-neutral', '0.1.2');
+    const res = checkThemes({cwd: tmpDir, configTheme: 'default'});
+    expect(res.status).toBe('pass');
+    expect(res.message).toContain('@astryxdesign/theme-neutral');
+  });
+
   it('config: INFO when no astryx.config.mjs', async () => {
     const res = await checkConfig({cwd: tmpDir, configPath: null});
     expect(res.status).toBe('info');

package/src/commands/init.mjs

@@ -198,7 +198,7 @@ export function registerInit(program) {
     .option('--features <list>', 'Comma-separated features to install (agents, theme, template)')
     .option('--all', 'Install all features, no prompts')
     .option('--remove-agents', 'Remove AI agent docs from all agent doc files')
-    .option('--agent <tool>', 'Target AI tool for agent docs: claude, cursor, codex, all')
+    .option('--agent <tool>', 'Target AI tool for agent docs: claude, cursor, codex, hermes, all')
     .option('--agent-docs-path <path...>', 'Explicit file path(s) for agent docs')
     .action(async (options) => {
       const targetDir = process.cwd();

package/src/commands/swizzle.mjs

@@ -26,6 +26,7 @@ import {jsonOut, humanLog} from '../lib/json.mjs';
 import {cliError} from '../lib/cli-error.mjs';
 import {ERROR_CODES} from '../lib/error-codes.mjs';
 import {checkGhCli} from '../utils/github.mjs';
+import {getRunPrefix} from '../utils/package-manager.mjs';
 import {Project} from '../lib/project.mjs';
 import {
   CORE_PACKAGE,
@@ -339,6 +340,10 @@ export function registerSwizzle(program) {
       // Copy all non-test, non-doc, non-README files
       const files = fs.readdirSync(componentDir);
       let copied = 0;
+      // Track whether any copied source uses StyleX. Swizzled StyleX source
+      // needs a build-time StyleX compiler in the consumer's app or it renders
+      // unstyled with no error — so we surface a setup note after copying.
+      let usesStyleX = false;
 
       for (const file of files) {
         // Skip test files, doc files, and README
@@ -355,6 +360,13 @@ export function registerSwizzle(program) {
           content = rewriteImports(content, owner.ownerPackage);
         }
 
+        if (
+          (file.endsWith('.ts') || file.endsWith('.tsx')) &&
+          content.includes('@stylexjs/stylex')
+        ) {
+          usesStyleX = true;
+        }
+
         fs.writeFileSync(path.join(outputDir, file), content);
         copied++;
       }
@@ -376,6 +388,7 @@ export function registerSwizzle(program) {
           outputDir: relOutput,
           filesCopied: copied,
           files: copiedFiles.map(f => f),
+          usesStyleX,
         };
         if (feedback) payload.feedback = feedback;
         return jsonOut('swizzle.copy', payload);
@@ -387,6 +400,27 @@ export function registerSwizzle(program) {
       );
       humanLog('You can now customize the component source freely.\n');
 
+      // StyleX build requirement. Swizzled components ship raw StyleX source,
+      // which needs a build-time StyleX compiler in the consumer's app to
+      // produce atomic CSS. Without it the component compiles but renders
+      // unstyled, with no error — a confusing silent failure, so call it out.
+      if (usesStyleX) {
+        humanLog(
+          '⚠ These components use StyleX and require a StyleX compiler in your build.',
+        );
+        humanLog(
+          '  Without one they render unstyled (no error). See setup per framework:',
+        );
+        humanLog(`  ${getRunPrefix()} astryx docs styling`);
+        humanLog(
+          '  Next.js note: the StyleX Babel plugin disables SWC and breaks next/font —',
+        );
+        humanLog(
+          '  use an SWC-based StyleX transform instead (covered in the guide).',
+        );
+        humanLog('');
+      }
+
       // Maintainer feedback note. If we couldn't swizzle cleanly, the team
       // wants to know — point users at the issue tracker. Skipped when the
       // owning package ships no issues URL.

package/src/commands/swizzle.routing.test.mjs

@@ -277,3 +277,70 @@ describe('swizzle — ambiguous ownership', () => {
     expect(out).toContain(`from '@astryxdesign/core/theme'`);
   });
 });
+
+/**
+ * Build a fake @astryxdesign/core with a component that imports StyleX directly
+ * (so the swizzle StyleX-build note should fire) and one that doesn't.
+ */
+function buildStyleXCore(project) {
+  const core = path.join(project, 'node_modules', '@astryxdesign', 'core');
+  // StyleX component.
+  const styledDir = path.join(core, 'src', 'Styled');
+  fs.mkdirSync(styledDir, {recursive: true});
+  fs.writeFileSync(
+    path.join(core, 'package.json'),
+    '{"name":"@astryxdesign/core","version":"0.0.13"}',
+  );
+  fs.writeFileSync(
+    path.join(styledDir, 'Styled.tsx'),
+    [
+      `import * as stylex from '@stylexjs/stylex';`,
+      `const styles = stylex.create({base: {color: 'red'}});`,
+      `export const Styled = () => null;`,
+      '',
+    ].join('\n'),
+  );
+  // Plain component (no StyleX).
+  const plainDir = path.join(core, 'src', 'Plain');
+  fs.mkdirSync(plainDir, {recursive: true});
+  fs.writeFileSync(
+    path.join(plainDir, 'Plain.tsx'),
+    `export const Plain = () => null;\n`,
+  );
+  return core;
+}
+
+describe('swizzle — StyleX build setup note (#3373)', () => {
+  it('reports usesStyleX and prints a setup note for StyleX components', () => {
+    buildStyleXCore(project);
+    writeProjectPackageJson(project);
+
+    // JSON payload carries the machine-readable flag.
+    const jsonResult = runCli(['--json', 'swizzle', 'Styled', '-f'], project);
+    expect(jsonResult.code).toBe(0);
+    const env = JSON.parse(jsonResult.stdout);
+    expect(env.data.usesStyleX).toBe(true);
+
+    // Human output surfaces the compiler requirement + Next.js caveat.
+    const humanResult = runCli(['swizzle', 'Styled', '-f'], project);
+    expect(humanResult.code).toBe(0);
+    expect(humanResult.stdout).toMatch(/StyleX compiler/i);
+    expect(humanResult.stdout).toMatch(/unstyled/i);
+    expect(humanResult.stdout).toMatch(/next\/font/i);
+    expect(humanResult.stdout).toMatch(/astryx docs styling/);
+  });
+
+  it('does not print the StyleX note for components without StyleX', () => {
+    buildStyleXCore(project);
+    writeProjectPackageJson(project);
+
+    const jsonResult = runCli(['--json', 'swizzle', 'Plain', '-f'], project);
+    expect(jsonResult.code).toBe(0);
+    const env = JSON.parse(jsonResult.stdout);
+    expect(env.data.usesStyleX).toBe(false);
+
+    const humanResult = runCli(['swizzle', 'Plain', '-f'], project);
+    expect(humanResult.code).toBe(0);
+    expect(humanResult.stdout).not.toMatch(/StyleX compiler/i);
+  });
+});

package/templates/blocks/components/CodeBlock/CodeBlockTerminal.doc.mjs

@@ -7,7 +7,7 @@ export const doc = {
   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.',
+    '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/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" />}
+        />
+      }
+    />
+  );
+}