@astryxdesign/cli 0.0.0-bootstrap.0 → 0.1.0-canary.08d4cf4

package/templates/blocks/components/ListItem/ListItemWithMetadata.doc.mjs

@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'ListItem',
+  name: 'List Item — Metadata',
+  displayName: 'List Item — Metadata',
+  description:
+    'List items with end-aligned metadata. Use endContent for badges, counts, timestamps, and compact status details.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['List', 'ListItem', 'Badge', 'Icon', 'Text'],
+};

package/templates/blocks/components/ListItem/ListItemWithMetadata.tsx

@@ -0,0 +1,37 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {Badge} from '@astryxdesign/core/Badge';
+import {Icon} from '@astryxdesign/core/Icon';
+import {List, ListItem} from '@astryxdesign/core/List';
+import {Text} from '@astryxdesign/core/Text';
+
+export default function ListItemWithMetadata() {
+  return (
+    <List header="Inbox" density="compact" hasDividers>
+      <ListItem
+        label="Launch checklist"
+        description="3 tasks still need an owner"
+        startContent={<Icon icon="check" size="sm" color="success" />}
+        endContent={<Badge label="3" variant="blue" />}
+        isSelected
+        onClick={() => {}}
+      />
+      <ListItem
+        label="Security review"
+        description="Waiting on approval"
+        startContent={<Icon icon="warning" size="sm" color="warning" />}
+        endContent={<Text color="secondary">Yesterday</Text>}
+        onClick={() => {}}
+      />
+      <ListItem
+        label="Old incident report"
+        description="Archived and read-only"
+        startContent={<Icon icon="copy" size="sm" color="secondary" />}
+        endContent={<Text color="secondary">Apr 12</Text>}
+        isDisabled
+      />
+    </List>
+  );
+}

package/templates/blocks/components/Markdown/MarkdownCitedContent.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: 'Markdown',
+  name: 'Markdown — Cited Content',
+  displayName: 'Markdown — Cited Content',
+  description: 'Markdown with citation chips linked to external sources',
+  isReady: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: ['Markdown'],
+};

package/templates/blocks/components/Markdown/MarkdownCitedContent.tsx

@@ -0,0 +1,54 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {Center} from '@astryxdesign/core/Center';
+import {Markdown} from '@astryxdesign/core/Markdown';
+
+const sources = {
+  abc1: {
+    title: 'Tokyo - Wikipedia',
+    url: 'https://en.wikipedia.org/wiki/Tokyo',
+    icon: 'https://en.wikipedia.org/favicon.ico',
+  },
+  def2: {
+    title: 'Japan Statistics Bureau - Population',
+    url: 'https://www.stat.go.jp/english/',
+  },
+  ghi3: {
+    title: 'World Population Review',
+    url: 'https://worldpopulationreview.com/world-cities/tokyo-population',
+  },
+  jkl4: {
+    title: 'Reuters — Tokyo GDP',
+    url: 'https://www.reuters.com/markets/',
+    icon: 'https://www.reuters.com/favicon.ico',
+  },
+  mno5: {
+    title: 'UN Urbanization Prospects',
+    url: 'https://population.un.org/wup/',
+  },
+};
+
+const content = [
+  '## Tokyo Overview',
+  '',
+  'Tokyo is the capital of Japan with a population of over 14 million[abc1].',
+  "It's the most populous metropolitan area in the world[def2][ghi3].",
+  '',
+  '### Key Facts',
+  '',
+  '- Population: 13.96 million (city proper)[abc1]',
+  '- Metro area: 37.4 million[def2]',
+  '- GDP: $1.93 trillion[jkl4]',
+].join('\n');
+
+export default function MarkdownCitedContent() {
+  return (
+    <Center width="100%" style={{maxWidth: 450}}>
+      <Markdown sources={sources} density="compact" headingLevelStart={3}>
+        {content}
+      </Markdown>
+    </Center>
+  );
+}

package/templates/blocks/components/Markdown/MarkdownCompactAIResponse.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: 'Markdown',
+  name: 'Markdown — Compact AI Response',
+  displayName: 'Markdown — Compact AI Response',
+  description: 'Compact markdown styled for AI responses with shifted heading levels',
+  isReady: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: ['Markdown'],
+};

package/templates/blocks/components/Markdown/MarkdownCompactAIResponse.tsx

@@ -0,0 +1,34 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {Center} from '@astryxdesign/core/Center';
+import {Markdown} from '@astryxdesign/core/Markdown';
+
+const content = [
+  '## Design Tokens',
+  '',
+  'Tokens are the **shared language** between design and code.',
+  '',
+  '```typescript',
+  'const tokens = {',
+  "  primary: '#0066FF',",
+  "  spacing: '8px',",
+  '};',
+  '```',
+  '',
+  '- **Composable** — small pieces',
+  '- **Accessible** — built-in a11y',
+  '',
+  '> Opinionated enough for consistency, *flexible* enough for edge cases.',
+].join('\n');
+
+export default function MarkdownCompactAIResponse() {
+  return (
+    <Center style={{maxWidth: 450}}>
+      <Markdown density="compact" headingLevelStart={3}>
+        {content}
+      </Markdown>
+    </Center>
+  );
+}

package/templates/blocks/components/Markdown/MarkdownDataTable.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: 'Markdown',
+  name: 'Markdown — Data Table',
+  displayName: 'Markdown — Data Table',
+  description: 'Comparison table rendered from a markdown string',
+  isReady: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: ['Markdown'],
+};

package/templates/blocks/components/Markdown/MarkdownDataTable.tsx

@@ -0,0 +1,25 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {Center} from '@astryxdesign/core/Center';
+import {Markdown} from '@astryxdesign/core/Markdown';
+
+const content = [
+  '## Comparison Table',
+  '',
+  '| Feature | React | Vue | Svelte |',
+  '|:--------|:-----:|:---:|-------:|',
+  '| Virtual DOM | Yes | Yes | No |',
+  '| Bundle Size | ~40KB | ~30KB | ~2KB |',
+  '| TypeScript | Native | Plugin | Native |',
+  '| Learning Curve | Medium | Easy | Easy |',
+].join('\n');
+
+export default function MarkdownDataTable() {
+  return (
+    <Center width="100%" style={{maxWidth: 450}}>
+      <Markdown>{content}</Markdown>
+    </Center>
+  );
+}

package/templates/blocks/components/Markdown/MarkdownRichContent.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: 'Markdown',
+  name: 'Markdown — Rich Content',
+  displayName: 'Markdown — Rich Content',
+  description: 'Markdown with headings, lists, code blocks, tables, blockquotes, and task lists',
+  isReady: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: ['Markdown'],
+};

package/templates/blocks/components/Markdown/MarkdownRichContent.tsx

@@ -0,0 +1,32 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {Center} from '@astryxdesign/core/Center';
+import {Markdown} from '@astryxdesign/core/Markdown';
+
+const content = [
+  '# Markdown Demo',
+  '',
+  'Renders **markdown** with *Astryx* styling.',
+  '',
+  '## Features',
+  '',
+  '- **Bold**, *italic*, `code`',
+  '- [Links](https://example.com)',
+  '',
+  '```typescript',
+  'interface User {name: string;}',
+  '```',
+  '',
+  '- [x] Parser',
+  '- [ ] Stories',
+].join('\n');
+
+export default function MarkdownRichContent() {
+  return (
+    <Center width="100%" style={{maxWidth: 450}}>
+      <Markdown>{content}</Markdown>
+    </Center>
+  );
+}

package/templates/blocks/components/Markdown/MarkdownShowcase.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: 'Markdown',
+  name: 'Markdown',
+  displayName: 'Markdown',
+  isReady: true,
+  aspectRatio: 1,
+  isShowcase: true,
+  description:
+    'Rich markdown content with headings, lists, and formatting.',
+  componentsUsed: ['Markdown'],
+};

package/templates/blocks/components/Markdown/MarkdownShowcase.tsx

@@ -0,0 +1,28 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {Markdown} from '@astryxdesign/core/Markdown';
+import {Center} from '@astryxdesign/core/Center';
+
+const content = [
+  '# Markdown Demo',
+  '',
+  'Renders **markdown** with *design-system-consistent* styling.',
+  '',
+  '## Features',
+  '',
+  '- Headings mapped to the Astryx type scale',
+  '- **Bold**, *italic*, and ~~strikethrough~~ text',
+  '- [Links](https://example.com) with external detection',
+  '',
+  '> Block quote indented text',
+].join('\n');
+
+export default function MarkdownShowcase() {
+  return (
+    <Center width={400}>
+      <Markdown>{content}</Markdown>
+    </Center>
+  );
+}

package/templates/blocks/components/MediaTheme/MediaThemeImageOverlay.doc.mjs

@@ -0,0 +1,21 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'MediaTheme',
+  name: 'MediaTheme — Image Overlay',
+  displayName: 'MediaTheme — Image Overlay',
+  description:
+    'A common image card pattern: place text and actions over a dark gradient and wrap the overlay content in MediaTheme mode="dark".',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: [
+    'MediaTheme',
+    'AspectRatio',
+    'Button',
+    'Section',
+    'Layout',
+    'Text',
+  ],
+};

package/templates/blocks/components/MediaTheme/MediaThemeImageOverlay.tsx

@@ -0,0 +1,57 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {MediaTheme} from '@astryxdesign/core/theme';
+import {AspectRatio} from '@astryxdesign/core/AspectRatio';
+import {Button} from '@astryxdesign/core/Button';
+import {Section} from '@astryxdesign/core/Section';
+import {Stack} from '@astryxdesign/core/Layout';
+import {Text} from '@astryxdesign/core/Text';
+
+const LANDSCAPE_IMAGE_URL =
+  'https://lookaside.facebook.com/assets/astryx/light-scene-horizontal-1.png';
+
+export default function MediaThemeImageOverlay() {
+  return (
+    <AspectRatio
+      ratio={16 / 9}
+      style={{
+        width: 360,
+        maxWidth: '100%',
+        borderRadius: 'var(--radius-container)',
+      }}>
+      <img
+        src={LANDSCAPE_IMAGE_URL}
+        alt="Landscape"
+        style={{width: '100%', height: '100%', objectFit: 'cover'}}
+      />
+      <Section
+        variant="transparent"
+        padding={4}
+        style={{
+          position: 'absolute',
+          insetInline: 0,
+          insetBlockEnd: 0,
+          background:
+            'linear-gradient(180deg, transparent, rgba(10,19,23,0.78))',
+        }}>
+        <MediaTheme mode="dark">
+          <Stack direction="vertical" gap={2}>
+            <Text type="body" weight="bold">
+              Product launch livestream
+            </Text>
+            <Text type="supporting" color="secondary">
+              MediaTheme keeps overlay text and controls readable without
+              hard-coded color overrides.
+            </Text>
+            <Stack direction="horizontal" gap={2} wrap="wrap">
+              <Button label="Watch" size="sm" />
+              <Button label="Details" variant="secondary" size="sm" />
+            </Stack>
+          </Stack>
+        </MediaTheme>
+      </Section>
+    </AspectRatio>
+  );
+}

package/templates/blocks/components/MediaTheme/MediaThemeLightScrim.doc.mjs

@@ -0,0 +1,21 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'MediaTheme',
+  name: 'MediaTheme — Light Scrim',
+  displayName: 'MediaTheme — Light Scrim',
+  description:
+    'A light scrim over an image. Use MediaTheme mode="light" so text and ghost buttons use dark-on-light tokens.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: [
+    'MediaTheme',
+    'AspectRatio',
+    'Button',
+    'Section',
+    'Layout',
+    'Text',
+  ],
+};

package/templates/blocks/components/MediaTheme/MediaThemeLightScrim.tsx

@@ -0,0 +1,55 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {MediaTheme} from '@astryxdesign/core/theme';
+import {AspectRatio} from '@astryxdesign/core/AspectRatio';
+import {Button} from '@astryxdesign/core/Button';
+import {Section} from '@astryxdesign/core/Section';
+import {Stack} from '@astryxdesign/core/Layout';
+import {Text} from '@astryxdesign/core/Text';
+
+const BRIGHT_ROOM_IMAGE_URL =
+  'https://lookaside.facebook.com/assets/astryx/light-home-square-1.png';
+
+export default function MediaThemeLightScrim() {
+  return (
+    <AspectRatio
+      ratio={16 / 9}
+      style={{
+        width: 360,
+        maxWidth: '100%',
+        borderRadius: 'var(--radius-container)',
+      }}>
+      <img
+        src={BRIGHT_ROOM_IMAGE_URL}
+        alt="Bright room"
+        style={{width: '100%', height: '100%', objectFit: 'cover'}}
+      />
+      <Section
+        variant="transparent"
+        padding={4}
+        style={{
+          position: 'absolute',
+          insetBlockStart: 16,
+          insetInlineStart: 16,
+          maxWidth: 250,
+          background: 'rgba(255,255,255,0.82)',
+          borderRadius: 'var(--radius-container)',
+          boxShadow: 'var(--shadow-med)',
+        }}>
+        <MediaTheme mode="light">
+          <Stack direction="vertical" gap={2}>
+            <Text type="body" weight="bold">
+              Bright media surface
+            </Text>
+            <Text type="supporting" color="secondary">
+              Use mode="light" when content sits on a light card or scrim.
+            </Text>
+            <Button label="Open" variant="ghost" size="sm" />
+          </Stack>
+        </MediaTheme>
+      </Section>
+    </AspectRatio>
+  );
+}

package/templates/blocks/components/MediaTheme/MediaThemeShowcase.doc.mjs

@@ -0,0 +1,23 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'MediaTheme',
+  name: 'MediaTheme — Media Overlay',
+  displayName: 'MediaTheme — Media Overlay',
+  description:
+    'A compact media overlay showing MediaTheme adapting text, icons, badges, and button variants over an image-backed dark surface.',
+  isReady: true,
+  isShowcase: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: [
+    'MediaTheme',
+    'Section',
+    'Layout',
+    'Text',
+    'Button',
+    'Badge',
+    'Icon',
+  ],
+};

package/templates/blocks/components/MediaTheme/MediaThemeShowcase.tsx

@@ -0,0 +1,55 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {MediaTheme} from '@astryxdesign/core/theme';
+import {Section} from '@astryxdesign/core/Section';
+import {Stack} from '@astryxdesign/core/Layout';
+import {Text} from '@astryxdesign/core/Text';
+import {Button} from '@astryxdesign/core/Button';
+import {Badge} from '@astryxdesign/core/Badge';
+import {Icon} from '@astryxdesign/core/Icon';
+
+const SHOWCASE_IMAGE_URL =
+  'https://lookaside.facebook.com/assets/astryx/light-scene-horizontal-1.png';
+
+export default function MediaThemeShowcase() {
+  return (
+    <Section
+      variant="transparent"
+      padding={4}
+      style={{
+        width: 360,
+        maxWidth: '100%',
+        minHeight: 230,
+        display: 'flex',
+        alignItems: 'flex-end',
+        backgroundImage: `linear-gradient(180deg, rgba(10,19,23,0.05) 0%, rgba(10,19,23,0.82) 100%), url(${SHOWCASE_IMAGE_URL})`,
+        backgroundSize: 'cover',
+        backgroundPosition: 'center',
+        borderRadius: 'var(--radius-container)',
+        boxShadow: 'var(--shadow-med)',
+      }}>
+      <MediaTheme mode="dark">
+        <Stack direction="vertical" gap={3}>
+          <Stack direction="horizontal" gap={2} vAlign="center">
+            <Icon icon="info" size="md" />
+            <Text type="body" weight="bold">
+              Media overlay
+            </Text>
+            <Badge label="Live" />
+          </Stack>
+          <Text type="supporting" color="secondary">
+            Text, icons, badges, and button variants inherit legible colors on
+            top of the dark image treatment.
+          </Text>
+          <Stack direction="horizontal" gap={2} wrap="wrap">
+            <Button label="Primary" variant="primary" size="sm" />
+            <Button label="Secondary" variant="secondary" size="sm" />
+            <Button label="Ghost" variant="ghost" size="sm" />
+          </Stack>
+        </Stack>
+      </MediaTheme>
+    </Section>
+  );
+}

package/templates/blocks/components/MetadataList/MetadataListBasicMetadata.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: 'MetadataList',
+  name: 'MetadataList — Basic',
+  displayName: 'MetadataList — Basic',
+  description: 'Single-column key-value metadata list.',
+  isReady: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: ['MetadataList'],
+};

package/templates/blocks/components/MetadataList/MetadataListBasicMetadata.tsx

@@ -0,0 +1,15 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {MetadataList, MetadataListItem} from '@astryxdesign/core/MetadataList';
+
+export default function MetadataListBasicMetadata() {
+  return (
+    <MetadataList>
+      <MetadataListItem label="Name">MetadataList</MetadataListItem>
+      <MetadataListItem label="Status">Active</MetadataListItem>
+      <MetadataListItem label="Owner">Joey</MetadataListItem>
+    </MetadataList>
+  );
+}

package/templates/blocks/components/MetadataList/MetadataListCollapsibleMetadata.doc.mjs

@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'MetadataList',
+  name: 'MetadataList — Collapsible',
+  displayName: 'MetadataList — Collapsible',
+  description:
+    'Metadata list with a show-more toggle after a set number of items.',
+  isReady: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: ['MetadataList'],
+};

package/templates/blocks/components/MetadataList/MetadataListCollapsibleMetadata.tsx

@@ -0,0 +1,18 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {MetadataList, MetadataListItem} from '@astryxdesign/core/MetadataList';
+
+export default function MetadataListCollapsibleMetadata() {
+  return (
+    <MetadataList maxNumOfItems={3}>
+      <MetadataListItem label="Name">MetadataList</MetadataListItem>
+      <MetadataListItem label="Status">Active</MetadataListItem>
+      <MetadataListItem label="Owner">Joey</MetadataListItem>
+      <MetadataListItem label="Created">Jan 15, 2026</MetadataListItem>
+      <MetadataListItem label="Updated">Mar 26, 2026</MetadataListItem>
+      <MetadataListItem label="Priority">Tier 1</MetadataListItem>
+    </MetadataList>
+  );
+}

package/templates/blocks/components/MetadataList/MetadataListHorizontalMetadata.doc.mjs

@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'MetadataList',
+  name: 'MetadataList — Horizontal',
+  displayName: 'MetadataList — Horizontal',
+  description:
+    'Horizontal metadata items for compact inline display.',
+  isReady: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: ['MetadataList'],
+};

package/templates/blocks/components/MetadataList/MetadataListHorizontalMetadata.tsx

@@ -0,0 +1,16 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {MetadataList, MetadataListItem} from '@astryxdesign/core/MetadataList';
+
+export default function MetadataListHorizontalMetadata() {
+  return (
+    <MetadataList orientation="horizontal">
+      <MetadataListItem label="Status">Active</MetadataListItem>
+      <MetadataListItem label="Type">Premium</MetadataListItem>
+      <MetadataListItem label="Owner">Joey</MetadataListItem>
+      <MetadataListItem label="Created">Jan 15, 2026</MetadataListItem>
+    </MetadataList>
+  );
+}

package/templates/blocks/components/MetadataList/MetadataListMultiColumnMetadata.doc.mjs

@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'MetadataList',
+  name: 'MetadataList — Multi-Column',
+  displayName: 'MetadataList — Multi-Column',
+  description:
+    'Multi-column metadata grid with token tags.',
+  isReady: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: ['MetadataList', 'Token', 'HStack'],
+};