@astryxdesign/cli 0.1.6-canary.fec872b → 0.1.6

package/src/lib/componentDocOverlay.test.mjs

@@ -1,111 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/**
- * @file Guards translated/compressed component docs against dropping props.
- * @input packages/core/src/{Name}/{Name}.doc.mjs — its `docs`, `docsZh`, `docsDense`.
- * @output Vitest failures naming every prop that exists in `docs` but vanishes
- *   from a translated view.
- * @position Regression gate for component-loader.mjs.
- *
- * A `docsZh` that carries its own `props` array used to REPLACE the base doc
- * wholesale, so any prop the translation had not caught up with simply ceased
- * to exist: `astryx component Button --zh` silently omitted `isInterruptible`
- * and `isIconOnly`. A reader of the translated docs cannot discover a prop that
- * is not there, and CLAUDE.md tells every AI agent to read these docs.
- *
- * Translations are now an overlay: a prop the translation does not cover falls
- * back to its English entry rather than disappearing. Same principle as the
- * reference-doc overlays in #2182 — an overlay covering a subset must not
- * destroy what it does not cover.
- */
-
-import {describe, it, expect} from 'vitest';
-import * as fs from 'node:fs';
-import * as path from 'node:path';
-import {pathToFileURL} from 'node:url';
-import {loadDocs} from './component-loader.mjs';
-
-const CORE_SRC = path.join(
-  import.meta.dirname,
-  '..',
-  '..',
-  '..',
-  'core',
-  'src',
-);
-
-/** Component dirs that ship a doc file. */
-function componentDocs() {
-  const out = [];
-  for (const dir of fs.readdirSync(CORE_SRC)) {
-    const docPath = path.join(CORE_SRC, dir, `${dir}.doc.mjs`);
-    if (!fs.existsSync(docPath)) continue;
-    if (!fs.readdirSync(path.join(CORE_SRC, dir)).includes(`${dir}.doc.mjs`)) {
-      continue; // case-exact match only
-    }
-    out.push({name: dir, docPath});
-  }
-  return out;
-}
-
-/** Prop names on a doc, across single- and multi-component shapes. */
-function propNames(doc) {
-  const names = new Set();
-  for (const p of doc?.props ?? []) names.add(p.name);
-  for (const c of doc?.components ?? []) {
-    for (const p of c.props ?? []) names.add(`${c.name ?? '?'}.${p.name}`);
-  }
-  return names;
-}
-
-describe('translated component docs never drop a prop', () => {
-  const comps = componentDocs();
-
-  it('finds component docs to check', () => {
-    expect(comps.length).toBeGreaterThan(0);
-  });
-
-  for (const {name, docPath} of comps) {
-    for (const locale of ['zh', 'dense']) {
-      it(`${name} --${locale}: documents every prop the English doc documents`, async () => {
-        const mod = await import(pathToFileURL(docPath).href);
-        const key = locale === 'zh' ? 'docsZh' : 'docsDense';
-        if (!mod[key]) return; // no overlay, nothing to drift
-
-        const english = propNames(mod.docs);
-        const translated = propNames(
-          await loadDocs(docPath, {[locale]: true}),
-        );
-
-        const dropped = [...english].filter(p => !translated.has(p));
-        expect(
-          dropped,
-          `${name}.doc.mjs ${key} drops ${dropped.length} prop(s) from the ` +
-            `--${locale} view: ${dropped.join(', ')}. A reader of the ` +
-            `translated docs cannot discover a prop that is not there. An ` +
-            `untranslated prop must fall back to its English entry, not vanish.`,
-        ).toEqual([]);
-      });
-    }
-  }
-});
-
-describe('the reported symptom', () => {
-  it('astryx component Button --zh still lists isInterruptible and isIconOnly', async () => {
-    const docPath = path.join(CORE_SRC, 'Button', 'Button.doc.mjs');
-    const zh = await loadDocs(docPath, {zh: true});
-    const names = propNames(zh);
-    expect(names.has('isInterruptible')).toBe(true);
-    expect(names.has('isIconOnly')).toBe(true);
-  });
-
-  it('keeps the translated descriptions it does have', async () => {
-    const docPath = path.join(CORE_SRC, 'Button', 'Button.doc.mjs');
-    const mod = await import(pathToFileURL(docPath).href);
-    const zh = await loadDocs(docPath, {zh: true});
-
-    const translated = mod.docsZh.props.find(p => p.name === 'variant');
-    const merged = zh.props.find(p => p.name === 'variant');
-    expect(merged.description).toBe(translated.description);
-  });
-});

package/src/schemas/doc-schema.mjs

@@ -1,226 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/**
- * @file Doc load-boundary schemas.
- *
- * The Zod schemas doc discovery runs a loaded doc value through (see
- * `loadComponentDoc`). {@link ComponentDocSchema} accepts BOTH the new stamped
- * formats and the legacy loose `export const docs = {...}` shape, so existing
- * docs keep loading unchanged. Kept free of any `@astryxdesign/core` import so
- * the hot path that loads them (doc discovery, `astryx init`) does not require
- * core's built `dist/`. The authoring factories live in
- * `@astryxdesign/core/authoring` and are re-exported from `../doc.mjs` for the
- * public `@astryxdesign/cli/doc` surface.
- */
-
-import {z} from 'zod';
-
-/**
- * A single documented prop. Mirrors `PropDoc` from
- * `@astryxdesign/core/docs-types`. Only `name`, `type`, and `description` are
- * required; everything else is optional. Extra fields (e.g. `slotElements`)
- * pass through so the schema does not have to track every evolution of the
- * rich playground/element surface.
- */
-const PropSchema = z
-  .object({
-    name: z.string().min(1, 'prop name is required'),
-    type: z.string().min(1, 'prop type is required'),
-    description: z.string(),
-    default: z.string().optional(),
-    required: z.boolean().optional(),
-  })
-  .passthrough();
-
-/** A single documented function/hook parameter (mirrors `HookParamDoc`). */
-const ParamSchema = z
-  .object({
-    name: z.string().min(1, 'param name is required'),
-    type: z.string().min(1, 'param type is required'),
-    description: z.string(),
-    default: z.string().optional(),
-    required: z.boolean().optional(),
-  })
-  .passthrough();
-
-/** A single documented function/hook return field (mirrors `HookReturnDoc`). */
-const ReturnSchema = z
-  .object({
-    name: z.string().min(1, 'return name is required'),
-    type: z.string().min(1, 'return type is required'),
-    description: z.string(),
-  })
-  .passthrough();
-
-/**
- * Fields shared by every doc kind. Deliberately permissive on the rich blobs
- * (usage/theming/playground) — those are large and still evolving, so they are
- * `z.unknown()` passthrough rather than enumerated.
- *
- * `group` vs `parent` are distinct concepts and intentionally separate fields:
- *   - `group` is a FLAT sidebar bucket label. Many docs can share a group; it
- *     is not an inheritance key.
- *   - `parent` is a DIRECTED inheritance/composition pointer — a doc naming the
- *     doc it belongs to (e.g. a sub-component naming its parent component). The
- *     legacy `subComponentOf` field is a synonym; both map to the same concept.
- *
- * `relatedDocs` is a single flat curated cross-reference list. It replaces the
- * legacy split `relatedComponents` + `relatedHooks`; a downstream reader can
- * merge the legacy pair into it.
- */
-const BaseDocFields = {
-  /** Name of the documented unit, without any prefix. Required. */
-  name: z.string().min(1, 'name is required'),
-  /** Human-readable display name for gallery/sidebar. */
-  displayName: z.string().optional(),
-  /** One-line/short description. */
-  description: z.string().optional(),
-  /** Usage documentation (description, best practices, anatomy, slotElements). */
-  usage: z.unknown().optional(),
-  /** Flat sidebar grouping label (not an inheritance key). */
-  group: z.string().optional(),
-  /** Overview-page functional category. */
-  category: z.string().optional(),
-  /** CLI fuzzy-search keywords. */
-  keywords: z.array(z.string()).optional(),
-  /** Directed inheritance/composition pointer to the doc this belongs to. */
-  parent: z.string().optional(),
-  /** Flat curated cross-reference list of related doc names. */
-  relatedDocs: z.array(z.string()).optional(),
-  /** Hide the whole doc from human-facing UI (stays importable/discoverable). */
-  hidden: z.boolean().optional(),
-  /** Exclude from the categorized overview page (kept in sidebar/CLI). */
-  isHiddenFromOverview: z.boolean().optional(),
-};
-
-/**
- * New-format schema for a stamped component doc (`type: 'component'`). The
- * top-level component keys are enumerated, but nested blobs stay loose so real
- * docs are not rejected. `.passthrough()` keeps unknown top-level fields
- * (translations, element descriptors, ...) flowing through.
- */
-export const ComponentDocKindSchema = z
-  .object({
-    ...BaseDocFields,
-    type: z.literal('component'),
-    props: z.array(PropSchema),
-    theming: z.unknown().optional(),
-    playground: z.unknown().optional(),
-    examples: z.array(z.unknown()).optional(),
-  })
-  .passthrough();
-
-/**
- * New-format schema for a stamped function doc (`type: 'function'`). Covers any
- * function, including hooks: an inputs (`params`) + outputs (`returns`) surface.
- */
-export const FunctionDocKindSchema = z
-  .object({
-    ...BaseDocFields,
-    type: z.literal('function'),
-    params: z.array(ParamSchema),
-    returns: z.array(ReturnSchema),
-  })
-  .passthrough();
-
-/**
- * New-format schema for a stamped generic doc (`type: 'generic'`) — reference
- * and topic docs. Just the shared base plus the discriminant.
- */
-export const GenericDocKindSchema = z
-  .object({
-    ...BaseDocFields,
-    type: z.literal('generic'),
-  })
-  .passthrough();
-
-/**
- * The stamped-doc contract: one of the three new per-kind schemas, discriminated
- * by the injected `type`. Used when a loaded doc carries a `type` field.
- */
-export const StampedDocSchema = z.discriminatedUnion('type', [
-  ComponentDocKindSchema,
-  FunctionDocKindSchema,
-  GenericDocKindSchema,
-]);
-
-// ── Legacy loose format (unchanged, kept for back-compat) ─────────────
-//
-// The pre-factory docs are authored as a loose, untyped object with no `type`
-// discriminant and validated by shape. Enumerated top-level fields observed
-// across the existing loose docs:
-//   name, displayName, description, group, category, keywords,
-//   isHiddenFromOverview, hidden, hiddenComponents, usage, props, components,
-//   subComponentOf, playground, theming, examples, params, returns,
-//   relatedComponents, relatedHooks, relatedDocs, parent, importPath.
-
-const LegacyBaseDocSchema = z.object({
-  name: z.string().min(1, 'name is required'),
-  displayName: z.string().optional(),
-  description: z.string().optional(),
-  group: z.string().optional(),
-  category: z.string().optional(),
-  keywords: z.array(z.string()).optional(),
-  isHiddenFromOverview: z.boolean().optional(),
-  hidden: z.boolean().optional(),
-  hiddenComponents: z.array(z.string()).optional(),
-  usage: z.unknown().optional(),
-  playground: z.unknown().optional(),
-  theming: z.unknown().optional(),
-  examples: z.array(z.unknown()).optional(),
-  showcase: z.unknown().optional(),
-  // `parent` and legacy `subComponentOf` are synonyms; both accepted here so a
-  // parent-based doc that omits a stamped `type` still validates.
-  parent: z.string().optional(),
-  relatedDocs: z.array(z.string()).optional(),
-  relatedComponents: z.array(z.string()).optional(),
-  relatedHooks: z.array(z.string()).optional(),
-});
-
-/** Legacy: directory exporting a single primary component (props inline). */
-const LegacySingleComponentDocSchema = LegacyBaseDocSchema.extend({
-  props: z.array(PropSchema),
-}).passthrough();
-
-/** Legacy: directory exporting multiple components (props on each entry). */
-const LegacyMultiComponentDocSchema = LegacyBaseDocSchema.extend({
-  components: z.array(z.unknown()),
-}).passthrough();
-
-/** Legacy: a standalone hook doc — inputs (`params`) + outputs (`returns`). */
-const LegacyHookDocSchema = LegacyBaseDocSchema.extend({
-  params: z.array(ParamSchema),
-  returns: z.array(ReturnSchema),
-}).passthrough();
-
-/** Legacy: a sub-component doc parented via `subComponentOf`. */
-const LegacySubComponentDocSchema = LegacyBaseDocSchema.extend({
-  subComponentOf: z.string().min(1, 'subComponentOf is required'),
-  description: z.string(),
-  props: z.array(PropSchema),
-}).passthrough();
-
-/**
- * The permissive legacy union. `subComponentOf` is listed first so a doc that
- * carries both `subComponentOf` and `props` is validated as a sub-component
- * (the more specific shape); hook (`params`/`returns`) before multi/single.
- */
-export const LegacyDocSchema = z.union([
-  LegacySubComponentDocSchema,
-  LegacyHookDocSchema,
-  LegacyMultiComponentDocSchema,
-  LegacySingleComponentDocSchema,
-]);
-
-/**
- * The LOAD-boundary contract for a doc. Handles BOTH formats:
- *   - NEW: a stamped doc (`type: 'component' | 'function' | 'generic'`,
- *     produced by the factories) is validated against the matching per-kind
- *     schema in {@link StampedDocSchema}.
- *   - OLD: a loose, unstamped doc is validated against the permissive
- *     {@link LegacyDocSchema} union (the three legacy shapes + standalone hook).
- *
- * Discovery validates the SHAPE, not "was it made by the factory". Both formats
- * normalize into the same internal shape consumers already expect.
- */
-export const ComponentDocSchema = z.union([StampedDocSchema, LegacyDocSchema]);

package/src/schemas/template-schema.mjs

@@ -1,47 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/**
- * @file Template load-boundary schemas.
- *
- * The Zod schemas that integration template discovery runs a module's default
- * export through (see `loadModuleWithSchema`). Kept free of any
- * `@astryxdesign/core` import so the hot path that loads them (template
- * discovery, `astryx init`) does not require core's built `dist/`. The
- * authoring factories live in `@astryxdesign/core/authoring` and are re-exported
- * from `../template.mjs` for the public `@astryxdesign/cli/template` surface.
- */
-
-import {z} from 'zod';
-
-const PreviewSchema = z
-  .object({
-    image: z.string().optional(),
-    aspectRatio: z.string().optional(),
-  })
-  .strict();
-
-/**
- * Shared authored-template shape. `type` is injected by the create* helpers,
- * so authors never write it. Inline source/sourceFile are intentionally NOT
- * part of v1 — a template's source is the required same-stem sibling file.
- * Exported so integration template discovery can validate the stamped result.
- */
-export const BaseTemplateSchema = z
-  .object({
-    name: z.string().min(1, 'name is required'),
-    description: z.string().min(1, 'description is required'),
-    category: z.string().optional(),
-    componentsUsed: z.array(z.string()).optional(),
-    preview: PreviewSchema.optional(),
-  })
-  .strict();
-
-/**
- * The metadata envelope integration template discovery validates: a stamped
- * template doc. This is the LOAD-boundary contract — a hand-written plain
- * object that matches this shape is accepted (discovery does not check "was it
- * made by the factory", only the shape).
- */
-export const TemplateEnvelopeSchema = BaseTemplateSchema.extend({
-  type: z.enum(['page', 'block']),
-});

package/src/types/doc.d.ts

@@ -1,23 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/**
- * The doc-authoring surface moved to `@astryxdesign/core/authoring`. Re-exported
- * here so existing `@astryxdesign/cli/doc` type imports keep resolving. The Zod
- * load-boundary schemas remain in the CLI (see `src/doc.mjs`).
- */
-export type {
-  AstryxBaseDocInput,
-  AstryxPropInput,
-  AstryxParamInput,
-  AstryxReturnInput,
-  AstryxComponentDocInput,
-  AstryxFunctionDocInput,
-  AstryxGenericDocInput,
-  AstryxComponentDoc,
-} from '@astryxdesign/core/authoring';
-
-export {
-  createComponentDoc,
-  createFunctionDoc,
-  createDoc,
-} from '@astryxdesign/core/authoring';

package/templates/blocks/components/VisuallyHidden/VisuallyHiddenLiveRegion.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: 'VisuallyHidden',
-  name: 'VisuallyHidden — Live Region',
-  displayName: 'VisuallyHidden — Live Region',
-  description:
-    'A polite aria-live region announces visual-only state changes to assistive technology.',
-  isReady: true,
-  aspectRatio: 4 / 3,
-  componentsUsed: ['VisuallyHidden', 'Button', 'HStack', 'VStack', 'Text'],
-};

package/templates/blocks/components/VisuallyHidden/VisuallyHiddenLiveRegion.tsx

@@ -1,41 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-'use client';
-
-import {useState} from 'react';
-import {VisuallyHidden} from '@astryxdesign/core/VisuallyHidden';
-import {Button} from '@astryxdesign/core/Button';
-import {HStack, VStack} from '@astryxdesign/core/Layout';
-import {Text} from '@astryxdesign/core/Text';
-
-const columns = ['Backlog', 'In progress', 'Done'] as const;
-
-export default function VisuallyHiddenLiveRegion() {
-  const [column, setColumn] = useState(0);
-  const current = columns[column];
-
-  function move() {
-    setColumn(c => (c + 1) % columns.length);
-  }
-
-  return (
-    <VStack gap={4} hAlign="start">
-      <Text type="supporting" color="secondary">
-        Drag-and-drop and other visual-only changes are silent to screen
-        readers. A live region narrates them.
-      </Text>
-      <HStack gap={3} vAlign="center">
-        <Button label="Move task" variant="secondary" onClick={move} />
-        <Text type="body">
-          Task is in{' '}
-          <Text as="span" weight="bold">
-            {current}
-          </Text>
-        </Text>
-      </HStack>
-      <VisuallyHidden as="div" aria-live="polite">
-        {`Task moved to ${current}`}
-      </VisuallyHidden>
-    </VStack>
-  );
-}

package/templates/blocks/components/VisuallyHidden/VisuallyHiddenShowcase.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: 'VisuallyHidden',
-  name: 'VisuallyHidden',
-  displayName: 'VisuallyHidden',
-  isReady: true,
-  aspectRatio: 16 / 9,
-  isShowcase: true,
-  componentsUsed: ['VisuallyHidden', 'IconButton', 'Card', 'HStack', 'VStack', 'Text', 'Icon'],
-};

package/templates/blocks/components/VisuallyHidden/VisuallyHiddenShowcase.tsx

@@ -1,78 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-'use client';
-
-import {VisuallyHidden} from '@astryxdesign/core/VisuallyHidden';
-import {IconButton} from '@astryxdesign/core/IconButton';
-import {Card} from '@astryxdesign/core/Card';
-import {HStack, VStack} from '@astryxdesign/core/Layout';
-import {Text} from '@astryxdesign/core/Text';
-import {Icon} from '@astryxdesign/core/Icon';
-import {
-  ArrowDownTrayIcon,
-  ShareIcon,
-  TrashIcon,
-} from '@heroicons/react/24/outline';
-import {SpeakerWaveIcon} from '@heroicons/react/24/solid';
-
-const actions = [
-  {label: 'Download', icon: ArrowDownTrayIcon},
-  {label: 'Share', icon: ShareIcon},
-  {label: 'Delete', icon: TrashIcon},
-] as const;
-
-/**
- * VisuallyHidden is invisible by design, so this hero teaches the concept by
- * contrast: the icon-only buttons are all a sighted user sees, while the
- * caption spells out the accessible name each one exposes. A live
- * <VisuallyHidden> region below announces the same names to assistive tech,
- * so the demo genuinely exercises the component it documents.
- */
-export default function VisuallyHiddenShowcase() {
-  return (
-    <VStack gap={5} hAlign="center">
-      <HStack gap={6} vAlign="stretch" wrap="wrap" hAlign="center">
-        <Card variant="muted">
-          <VStack gap={4} hAlign="center">
-            <Text type="supporting" color="secondary">
-              What you see
-            </Text>
-            <HStack gap={2}>
-              {actions.map(({label, icon}) => (
-                <IconButton
-                  key={label}
-                  label={label}
-                  icon={<Icon icon={icon} />}
-                  variant="ghost"
-                />
-              ))}
-            </HStack>
-          </VStack>
-        </Card>
-
-        <Card variant="muted">
-          <VStack gap={4} hAlign="start">
-            <HStack gap={2} vAlign="center">
-              <Icon icon={SpeakerWaveIcon} size="sm" />
-              <Text type="supporting" color="secondary">
-                What a screen reader hears
-              </Text>
-            </HStack>
-            <VStack gap={2}>
-              {actions.map(({label}) => (
-                <Text key={label} type="body">
-                  {label}, button
-                </Text>
-              ))}
-            </VStack>
-          </VStack>
-        </Card>
-      </HStack>
-
-      {/* A real live region: silent to sighted users, announced by AT. */}
-      <VisuallyHidden as="div" aria-live="polite">
-        Actions available: Download, Share, Delete.
-      </VisuallyHidden>
-    </VStack>
-  );
-}

package/templates/blocks/components/VisuallyHidden/VisuallyHiddenStructuralHeading.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: 'VisuallyHidden',
-  name: 'VisuallyHidden — Structural Heading',
-  displayName: 'VisuallyHidden — Structural Heading',
-  description:
-    'Give a visually implicit section an accessible name so screen-reader users can navigate to it.',
-  isReady: true,
-  aspectRatio: 4 / 3,
-  componentsUsed: ['VisuallyHidden', 'Card', 'HStack', 'VStack', 'Text', 'Badge'],
-};

package/templates/blocks/components/VisuallyHidden/VisuallyHiddenStructuralHeading.tsx

@@ -1,38 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-'use client';
-
-import {VisuallyHidden} from '@astryxdesign/core/VisuallyHidden';
-import {Card} from '@astryxdesign/core/Card';
-import {HStack, VStack} from '@astryxdesign/core/Layout';
-import {Text} from '@astryxdesign/core/Text';
-import {Badge} from '@astryxdesign/core/Badge';
-
-const items = [
-  {name: 'astryx-core', status: 'Passing', variant: 'success'},
-  {name: 'astryx-charts', status: 'Failing', variant: 'error'},
-  {name: 'astryx-cli', status: 'Passing', variant: 'success'},
-] as const;
-
-export default function VisuallyHiddenStructuralHeading() {
-  return (
-    <VStack gap={3} hAlign="start">
-      <Text type="supporting" color="secondary">
-        The layout makes this group obvious to sighted users. A hidden heading
-        gives screen-reader users the same landmark to jump to.
-      </Text>
-      {/* No visible heading is needed here, but AT users navigate by heading. */}
-      <VisuallyHidden as="h2">Build status</VisuallyHidden>
-      <VStack gap={2}>
-        {items.map(({name, status, variant}) => (
-          <Card key={name} variant="muted" padding={3}>
-            <HStack gap={3} vAlign="center">
-              <Text type="body">{name}</Text>
-              <Badge label={status} variant={variant} />
-            </HStack>
-          </Card>
-        ))}
-      </VStack>
-    </VStack>
-  );
-}

package/templates/blocks/components/VisuallyHidden/VisuallyHiddenSupplementaryContext.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: 'VisuallyHidden',
-  name: 'VisuallyHidden — Supplementary Context',
-  displayName: 'VisuallyHidden — Supplementary Context',
-  description:
-    'Add screen-reader-only context to terse visual data, like spelling out what a trend arrow means.',
-  isReady: true,
-  aspectRatio: 4 / 3,
-  componentsUsed: ['VisuallyHidden', 'Card', 'HStack', 'VStack', 'Text', 'Icon'],
-};

package/templates/blocks/components/VisuallyHidden/VisuallyHiddenSupplementaryContext.tsx

@@ -1,47 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-'use client';
-
-import {VisuallyHidden} from '@astryxdesign/core/VisuallyHidden';
-import {Card} from '@astryxdesign/core/Card';
-import {HStack, VStack} from '@astryxdesign/core/Layout';
-import {Text} from '@astryxdesign/core/Text';
-import {Icon} from '@astryxdesign/core/Icon';
-import {ArrowUpIcon, ArrowDownIcon} from '@heroicons/react/24/solid';
-
-const stats = [
-  {label: 'Revenue', value: '$48.2k', delta: '+12%', direction: 'up'},
-  {label: 'Churn', value: '2.1%', delta: '-4%', direction: 'down'},
-] as const;
-
-export default function VisuallyHiddenSupplementaryContext() {
-  return (
-    <HStack gap={4} wrap="wrap">
-      {stats.map(({label, value, delta, direction}) => (
-        <Card key={label} variant="muted">
-          <VStack gap={1}>
-            <Text type="supporting" color="secondary">
-              {label}
-            </Text>
-            <Text type="display-3">{value}</Text>
-            <HStack gap={1} vAlign="center">
-              <Icon
-                icon={direction === 'up' ? ArrowUpIcon : ArrowDownIcon}
-                size="sm"
-                color={direction === 'up' ? 'accent' : 'secondary'}
-              />
-              <Text type="body">
-                {delta}
-                {/* The arrow is decorative; spell out the trend for AT. */}
-                <VisuallyHidden>
-                  {direction === 'up' ? ' increase' : ' decrease'} from last
-                  month
-                </VisuallyHidden>
-              </Text>
-            </HStack>
-          </VStack>
-        </Card>
-      ))}
-    </HStack>
-  );
-}