@astryxdesign/cli 0.1.4-canary.1f25f25 → 0.1.4-canary.20ae2bc

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/cli",
-  "version": "0.1.4-canary.1f25f25",
+  "version": "0.1.4-canary.20ae2bc",
   "displayName": "CLI",
   "description": "Scaffold projects, browse templates, generate themes, and get agent-ready docs from the command line.",
   "author": "Meta Open Source",
@@ -75,16 +75,12 @@
     "zod": "^4.4.3"
   },
   "peerDependencies": {
-    "@astryxdesign/charts": "0.1.4-canary.1f25f25",
-    "@astryxdesign/core": "0.1.4-canary.1f25f25",
-    "@astryxdesign/lab": "0.1.4-canary.1f25f25",
-    "@astryxdesign/theme-neutral": "0.1.4-canary.1f25f25",
-    "gpt-tokenizer": "^3.4.0"
+    "@astryxdesign/core": "0.1.4-canary.20ae2bc",
+    "@astryxdesign/lab": "0.1.4-canary.20ae2bc",
+    "@astryxdesign/theme-neutral": "0.1.4-canary.20ae2bc",
+    "gpt-tokenizer": "^2.0.0"
   },
   "peerDependenciesMeta": {
-    "@astryxdesign/charts": {
-      "optional": true
-    },
     "@astryxdesign/core": {
       "optional": true
     },
@@ -96,11 +92,10 @@
     }
   },
   "devDependencies": {
-    "@astryxdesign/charts": "0.1.4-canary.1f25f25",
-    "@astryxdesign/core": "0.1.4-canary.1f25f25",
-    "@astryxdesign/lab": "0.1.4-canary.1f25f25",
-    "@astryxdesign/theme-neutral": "0.1.4-canary.1f25f25",
-    "gpt-tokenizer": "^3.4.0"
+    "@astryxdesign/core": "0.1.4-canary.20ae2bc",
+    "@astryxdesign/lab": "0.1.4-canary.20ae2bc",
+    "@astryxdesign/theme-neutral": "0.1.4-canary.20ae2bc",
+    "gpt-tokenizer": "^2.0.0"
   },
   "scripts": {
     "astryx": "node bin/astryx.mjs",

package/src/commands/build-theme.mjs

@@ -175,85 +175,14 @@ async function getKnownValues(componentName) {
   return _knownValuesCache.get(componentName);
 }
 
-/**
- * Resolve `@astryxdesign/core`'s package root relative to the CLI package. Core
- * and the CLI ship as siblings (`@astryxdesign/core`, `@astryxdesign/cli`), so
- * `../../../core` from `src/commands/` reaches core whether installed from npm
- * or run inside the monorepo. Returns null if it can't be found.
- */
-function resolveCoreRoot() {
-  const cliDir = path.dirname(fileURLToPath(import.meta.url));
-  const coreRoot = path.resolve(cliDir, '../../../core');
-  return fs.existsSync(coreRoot) ? coreRoot : null;
-}
-
-/**
- * Read the type declarations `@astryxdesign/core/<Component>` exposes so we can
- * check whether a given augmentation-target interface actually exists before
- * generating a module augmentation against it.
- *
- * Reads the shipped `dist/<Component>/index.d.ts` (what a consumer's TypeScript
- * actually sees), falling back to the `src/<Component>/index.ts` in the
- * monorepo. Returns the file contents, or '' if nothing is found.
- */
-const _componentDeclCache = new Map();
-function readComponentDeclarations(pascalName) {
-  if (_componentDeclCache.has(pascalName)) {
-    return _componentDeclCache.get(pascalName);
-  }
-  let contents = '';
-  const coreRoot = resolveCoreRoot();
-  if (coreRoot) {
-    const candidates = [
-      path.join(coreRoot, 'dist', pascalName, 'index.d.ts'),
-      path.join(coreRoot, 'src', pascalName, 'index.ts'),
-    ];
-    for (const file of candidates) {
-      try {
-        if (fs.existsSync(file)) {
-          contents = fs.readFileSync(file, 'utf-8');
-          break;
-        }
-      } catch {
-        // ignore and try the next candidate
-      }
-    }
-  }
-  _componentDeclCache.set(pascalName, contents);
-  return contents;
-}
-
-/**
- * Determine whether `@astryxdesign/core/<Component>` exports an interface named
- * `interfaceName` that can be augmented via module augmentation.
- *
- * Only interfaces are extension points — closed literal-union types (e.g.
- * `HeadingType`, `ButtonSize`) are NOT augmentable, so a generated augmentation
- * against them is dead code. We check that the name is exported (directly or
- * re-exported) as a type/interface.
- */
-function componentHasAugmentableInterface(pascalName, interfaceName) {
-  const decl = readComponentDeclarations(pascalName);
-  if (!decl) return false;
-  // Word-boundary match so `ButtonVariantMap` doesn't match `XButtonVariantMap`.
-  const re = new RegExp(`\\b${interfaceName}\\b`);
-  return re.test(decl);
-}
-
 /**
  * Generate TypeScript declaration content with module augmentation for custom
  * component prop values found in the theme's `components` keys. Reads known
  * values from doc files to filter out base prop values.
  *
- * Interface naming convention: PascalCase(component) + PascalCase(prop) + Map
- *   banner + status → BannerStatusMap
- *   button + variant → ButtonVariantMap
- *
- * An augmentation is only emitted when `@astryxdesign/core/<Component>` actually
- * exports a matching interface. Props backed by closed literal-union types
- * (e.g. Button `size`, Heading `type`/`level`) have no augmentation point, so
- * generating a `declare module` block for them would be dead code — those are
- * skipped.
+ * Interface naming convention: Astryx + PascalCase(component) + PascalCase(prop) + Map
+ *   banner + status → XDSBannerStatusMap
+ *   button + variant → XDSButtonVariantMap
  *
  * @param {object} themeDef - Theme definition (resolved by defineTheme)
  * @returns {Promise<string|null>} TypeScript declaration content, or null if no augmentations needed
@@ -305,14 +234,7 @@ async function generateVariantDeclarationsAsync(themeDef) {
       const pascal = toPascalCase(component);
       const propPascal = prop.charAt(0).toUpperCase() + prop.slice(1);
       const modulePath = `@astryxdesign/core/${pascal}`;
-      const interfaceName = `${pascal}${propPascal}Map`;
-
-      // Only augment interfaces that actually exist as an extension point in
-      // core. Props backed by closed literal-union types (e.g. Button `size`,
-      // Heading `type`/`level`) have no `*Map` interface — a `declare module`
-      // block against a non-existent interface just creates a new, unused
-      // interface and never extends the component's prop union, so skip it.
-      if (!componentHasAugmentableInterface(pascal, interfaceName)) continue;
+      const interfaceName = `XDS${pascal}${propPascal}Map`;
 
       sections.push(`declare module '${modulePath}' {`);
       sections.push(`  interface ${interfaceName} {`);
@@ -325,13 +247,6 @@ async function generateVariantDeclarationsAsync(themeDef) {
     }
   }
 
-  // If every custom value targeted a non-augmentable prop, there's nothing to
-  // emit beyond the header — return null so no `.variants.d.ts` is written.
-  const hasEmittedAugmentation = sections.some(line =>
-    line.startsWith('declare module'),
-  );
-  if (!hasEmittedAugmentation) return null;
-
   return sections.join('\n');
 }
 
@@ -518,21 +433,13 @@ ${iconReExport}`;
 /**
  * Generate TypeScript declarations for a built theme module.
  */
-function generateBuiltTypes(themeDef, iconInfo, variantsFileName) {
+function generateBuiltTypes(themeDef, iconInfo) {
   const iconType = iconInfo
     ? `import type { IconRegistry } from '@astryxdesign/core/Icon';
 export declare const ${iconInfo.exportName}: IconRegistry;
 `
     : '';
-  // Pull in the generated custom-variant augmentations so that importing the
-  // theme's types also loads the module augmentations (otherwise the
-  // `.variants.d.ts` is emitted but never referenced, and the custom variants
-  // never widen the component prop unions for consumers).
-  const variantsRef = variantsFileName
-    ? `/// <reference path="./${variantsFileName}" />
-`
-    : '';
-  return `${variantsRef}import type { DefinedTheme } from '@astryxdesign/core/theme';
+  return `import type { DefinedTheme } from '@astryxdesign/core/theme';
 ${iconType}export declare const ${toIdentifier(themeDef.name)}Theme: DefinedTheme;
 `;
 }
@@ -987,23 +894,19 @@ export function registerTheme(program) {
 
       const iconInfo = extractIconInfo(filePath);
 
-      // Type augmentation .d.ts if theme has custom prop values. Computed
-      // before the main .d.ts so the latter can reference it (see below).
+      // Generate all file contents in memory first.
+      const cssContent = generatedHeader(sourceRelative, 'css', buildCommand) + css;
+      const jsContent = generatedHeader(sourceRelative, 'js', buildCommand) + generateBuiltModule(resolvedTheme || themeDef, iconInfo);
+      const dtsContent = generatedHeader(sourceRelative, 'ts', buildCommand) + generateBuiltTypes(themeDef, iconInfo);
+
+      // Type augmentation .d.ts if theme has custom prop values
       const augmentationSource = resolvedTheme || themeDef;
       const variantDecl = await generateVariantDeclarationsAsync(augmentationSource);
-      const variantsFileName = variantDecl ? `${baseName}.variants.d.ts` : null;
-      const variantDtsPath = variantDecl ? path.join(outDir, variantsFileName) : null;
+      const variantDtsPath = variantDecl ? path.join(outDir, `${baseName}.variants.d.ts`) : null;
       const variantContent = variantDecl
         ? generatedHeader(sourceRelative, 'ts', buildCommand) + variantDecl
         : null;
 
-      // Generate all file contents in memory first. The main .d.ts references
-      // the variants file (when present) via a triple-slash directive so
-      // importing the theme also loads the custom-variant augmentations.
-      const cssContent = generatedHeader(sourceRelative, 'css', buildCommand) + css;
-      const jsContent = generatedHeader(sourceRelative, 'js', buildCommand) + generateBuiltModule(resolvedTheme || themeDef, iconInfo);
-      const dtsContent = generatedHeader(sourceRelative, 'ts', buildCommand) + generateBuiltTypes(themeDef, iconInfo, variantsFileName);
-
       // Atomic-ish write: stage every file as `<dest>.tmp`, then rename
       // each into place. If any stage step fails we clean up partials and
       // exit; if a rename fails mid-way we still have the originals (or

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/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/NavHeadingMenu/NavHeadingMenuShowcase.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: 'NavHeadingMenu',
-  name: 'NavHeadingMenu',
-  displayName: 'Nav Heading Menu',
-  description:
-    'NavHeadingMenu passed as the menu prop of SideNavHeading, letting the heading act as a product switcher popover trigger.',
-  isReady: true,
-  isShowcase: true,
-  aspectRatio: 4 / 3,
-  componentsUsed: ['SideNav', 'SideNavHeading', 'NavHeadingMenu', 'NavHeadingMenuItem'],
-};

package/templates/blocks/components/NavHeadingMenu/NavHeadingMenuShowcase.tsx

@@ -1,47 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-'use client';
-
-import {SideNav, SideNavHeading} from '@astryxdesign/core/SideNav';
-import {NavHeadingMenu, NavHeadingMenuItem} from '@astryxdesign/core/NavMenu';
-
-function AppIcon() {
-  return (
-    <svg
-      width="20"
-      height="20"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1.5">
-      <path
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        d="M3.75 6A2.25 2.25 0 0 1 6 3.75h2.25A2.25 2.25 0 0 1 10.5 6v2.25a2.25 2.25 0 0 1-2.25 2.25H6a2.25 2.25 0 0 1-2.25-2.25V6ZM3.75 15.75A2.25 2.25 0 0 1 6 13.5h2.25a2.25 2.25 0 0 1 2.25 2.25V18a2.25 2.25 0 0 1-2.25 2.25H6A2.25 2.25 0 0 1 3.75 18v-2.25ZM13.5 6a2.25 2.25 0 0 1 2.25-2.25H18A2.25 2.25 0 0 1 20.25 6v2.25A2.25 2.25 0 0 1 18 10.5h-2.25a2.25 2.25 0 0 1-2.25-2.25V6ZM13.5 15.75a2.25 2.25 0 0 1 2.25-2.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-2.25a2.25 2.25 0 0 1-2.25-2.25v-2.25Z"
-      />
-    </svg>
-  );
-}
-
-export default function NavHeadingMenuShowcase() {
-  return (
-    <div style={{height: 100}}>
-      <SideNav
-        header={
-          <SideNavHeading
-            heading="Acme Platform"
-            icon={<AppIcon />}
-            menu={
-              <NavHeadingMenu size="lg">
-                <NavHeadingMenuItem label="Dashboard" href="/dashboard" />
-                <NavHeadingMenuItem label="Analytics" href="/analytics" />
-                <NavHeadingMenuItem label="Settings" href="/settings" />
-              </NavHeadingMenu>
-            }
-          />
-        }>
-        {null}
-      </SideNav>
-    </div>
-  );
-}