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

package/templates/blocks/components/NumberInput/NumberInputClearableNumberInput.tsx

@@ -0,0 +1,23 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useState} from 'react';
+import {NumberInput} from '@astryxdesign/core/NumberInput';
+
+export default function NumberInputClearableNumberInput() {
+  const [value, setValue] = useState<number | null>(75);
+  return (
+    <div style={{width: 300}}>
+      <NumberInput
+        label="Progress"
+        units="%"
+        min={0}
+        max={100}
+        value={value}
+        onChange={setValue}
+        hasClear
+      />
+    </div>
+  );
+}

package/templates/blocks/components/NumberInput/NumberInputRangeNumberInput.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: 'NumberInput',
+  name: 'NumberInput — Range Constrained',
+  displayName: 'NumberInput — Range Constrained',
+  description: 'Number input with min/max boundaries and a helper description',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['NumberInput', 'Center'],
+};

package/templates/blocks/components/NumberInput/NumberInputRangeNumberInput.tsx

@@ -0,0 +1,23 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useState} from 'react';
+import {NumberInput} from '@astryxdesign/core/NumberInput';
+
+export default function NumberInputRangeNumberInput() {
+  const [value, setValue] = useState<number | null>(3);
+  return (
+    <div style={{width: 300}}>
+      <NumberInput
+        label="Team Size"
+        placeholder="1–50"
+        min={1}
+        max={50}
+        description="Number of people on the team"
+        value={value}
+        onChange={setValue}
+      />
+    </div>
+  );
+}

package/templates/blocks/components/NumberInput/NumberInputShowcase.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: 'NumberInput',
+  name: 'NumberInput',
+  displayName: 'Number Input',
+  isReady: true,
+  aspectRatio: 1,
+  isShowcase: true,
+  description:
+    'A number input for quantity entry.',
+  componentsUsed: ['NumberInput'],
+};

package/templates/blocks/components/NumberInput/NumberInputShowcase.tsx

@@ -0,0 +1,16 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+import {NumberInput} from '@astryxdesign/core/NumberInput';
+
+export default function NumberInputShowcase() {
+  return (
+    <div style={{width: 300}}>
+      <NumberInput
+        label="Quantity"
+        placeholder="Enter quantity"
+        value={0}
+        onChange={() => {}}
+      />
+    </div>
+  );
+}

package/templates/blocks/components/NumberInput/NumberInputStatuses.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: 'NumberInput',
+  name: 'NumberInput — Status Variants',
+  displayName: 'NumberInput — Status Variants',
+  description: 'Number inputs showing error, warning, and success validation states',
+  isReady: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: ['NumberInput', 'VStack', 'Center'],
+};

package/templates/blocks/components/NumberInput/NumberInputStatuses.tsx

@@ -0,0 +1,38 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useState} from 'react';
+import {NumberInput} from '@astryxdesign/core/NumberInput';
+import {VStack} from '@astryxdesign/core/Stack';
+
+export default function NumberInputStatuses() {
+  const [error, setError] = useState<number | null>(-5);
+  const [warning, setWarning] = useState<number | null>(150);
+  const [success, setSuccess] = useState<number | null>(25);
+  return (
+    <div style={{width: 300}}>
+      <VStack gap={4}>
+        <NumberInput
+          label="Budget"
+          value={error}
+          onChange={setError}
+          status={{type: 'error', message: 'Must be a positive amount'}}
+        />
+        <NumberInput
+          label="Headcount"
+          value={warning}
+          onChange={setWarning}
+          status={{type: 'warning', message: 'Exceeds typical team size'}}
+        />
+        <NumberInput
+          label="Completion"
+          units="%"
+          value={success}
+          onChange={setSuccess}
+          status={{type: 'success', message: 'On track'}}
+        />
+      </VStack>
+    </div>
+  );
+}

package/templates/blocks/components/NumberInput/NumberInputWithUnits.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: 'NumberInput',
+  name: 'NumberInput — With Units',
+  displayName: 'NumberInput — With Units',
+  description: 'Number input with a percentage unit suffix and valid range',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['NumberInput', 'Center'],
+};

package/templates/blocks/components/NumberInput/NumberInputWithUnits.tsx

@@ -0,0 +1,23 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useState} from 'react';
+import {NumberInput} from '@astryxdesign/core/NumberInput';
+
+export default function NumberInputWithUnits() {
+  const [value, setValue] = useState<number | null>(50);
+  return (
+    <div style={{width: 300}}>
+      <NumberInput
+        label="Discount"
+        placeholder="Enter discount"
+        min={0}
+        max={100}
+        units="%"
+        value={value}
+        onChange={setValue}
+      />
+    </div>
+  );
+}

package/templates/blocks/components/Outline/OutlineControlled.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: 'Outline',
+  name: 'Outline — Controlled',
+  displayName: 'Outline — Controlled',
+  description:
+    'Drive the active section yourself with activeId and onActiveIdChange. Providing activeId disables the built-in scroll-spy so your own logic owns the highlight.',
+  isReady: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: ['Outline', 'Layout', 'Text', 'Button'],
+};

package/templates/blocks/components/Outline/OutlineControlled.tsx

@@ -0,0 +1,54 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useState} from 'react';
+import {Outline} from '@astryxdesign/core/Outline';
+import type {OutlineItem} from '@astryxdesign/core/Outline';
+import {VStack, HStack} from '@astryxdesign/core/Layout';
+import {Button} from '@astryxdesign/core/Button';
+import {Text} from '@astryxdesign/core/Text';
+
+const items: OutlineItem[] = [
+  {id: 'ctrl-summary', label: 'Summary', level: 2},
+  {id: 'ctrl-details', label: 'Details', level: 2},
+  {id: 'ctrl-results', label: 'Results', level: 2},
+  {id: 'ctrl-next-steps', label: 'Next steps', level: 2},
+];
+
+export default function OutlineControlled() {
+  const [activeId, setActiveId] = useState('ctrl-details');
+
+  const index = items.findIndex(item => item.id === activeId);
+  const goTo = (next: number) => {
+    const clamped = Math.max(0, Math.min(items.length - 1, next));
+    setActiveId(items[clamped].id);
+  };
+
+  return (
+    <VStack gap={4} style={{width: 240}}>
+      <Outline
+        items={items}
+        activeId={activeId}
+        onActiveIdChange={setActiveId}
+      />
+      <HStack gap={2}>
+        <Button
+          variant="secondary"
+          size="sm"
+          label="Previous"
+          onClick={() => goTo(index - 1)}
+        />
+        <Button
+          variant="secondary"
+          size="sm"
+          label="Next"
+          onClick={() => goTo(index + 1)}
+        />
+      </HStack>
+      <Text type="supporting" color="secondary">
+        Active section: {items[index]?.label}
+      </Text>
+    </VStack>
+  );
+}

package/templates/blocks/components/Outline/OutlineDeepNesting.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: 'Outline',
+  name: 'Outline — Deep Nesting',
+  displayName: 'Outline — Deep Nesting',
+  description:
+    'Heading levels 1 through 4 map to progressively deeper indentation, so a long document with sub-sections stays scannable.',
+  isReady: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: ['Outline'],
+};

package/templates/blocks/components/Outline/OutlineDeepNesting.tsx

@@ -0,0 +1,26 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {Outline} from '@astryxdesign/core/Outline';
+import type {OutlineItem} from '@astryxdesign/core/Outline';
+
+const items: OutlineItem[] = [
+  {id: 'deep-introduction', label: 'Introduction', level: 1},
+  {id: 'deep-concepts', label: 'Core concepts', level: 2},
+  {id: 'deep-tokens', label: 'Tokens', level: 3},
+  {id: 'deep-color', label: 'Color', level: 4},
+  {id: 'deep-spacing', label: 'Spacing', level: 4},
+  {id: 'deep-components', label: 'Components', level: 2},
+  {id: 'deep-primitives', label: 'Primitives', level: 3},
+  {id: 'deep-patterns', label: 'Patterns', level: 3},
+  {id: 'deep-resources', label: 'Resources', level: 1},
+];
+
+export default function OutlineDeepNesting() {
+  return (
+    <div style={{width: 240}}>
+      <Outline items={items} activeId="deep-color" />
+    </div>
+  );
+}

package/templates/blocks/components/Outline/OutlineDensity.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: 'Outline',
+  name: 'Outline — Density',
+  displayName: 'Outline — Density',
+  description:
+    'Two density variants control item padding. Use compact for dense sidebars and default for standard documentation layouts. The sliding indicator automatically matches each item height.',
+  isReady: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: ['Outline', 'Layout', 'Text'],
+};

package/templates/blocks/components/Outline/OutlineDensity.tsx

@@ -0,0 +1,43 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {Outline} from '@astryxdesign/core/Outline';
+import type {OutlineItem} from '@astryxdesign/core/Outline';
+import {HStack, VStack} from '@astryxdesign/core/Layout';
+import {Text} from '@astryxdesign/core/Text';
+
+const items: OutlineItem[] = [
+  {id: 'density-getting-started', label: 'Getting started', level: 2},
+  {id: 'density-configuration', label: 'Configuration', level: 2},
+  {id: 'density-api', label: 'API reference', level: 3},
+  {id: 'density-examples', label: 'Examples', level: 3},
+  {id: 'density-faq', label: 'FAQ', level: 2},
+];
+
+export default function OutlineDensity() {
+  return (
+    <HStack gap={10} vAlign="start">
+      <VStack gap={3} style={{width: 200}}>
+        <Text type="supporting" color="secondary" weight="medium">
+          Default
+        </Text>
+        <Outline
+          items={items}
+          density="default"
+          activeId="density-configuration"
+        />
+      </VStack>
+      <VStack gap={3} style={{width: 200}}>
+        <Text type="supporting" color="secondary" weight="medium">
+          Compact
+        </Text>
+        <Outline
+          items={items}
+          density="compact"
+          activeId="density-configuration"
+        />
+      </VStack>
+    </HStack>
+  );
+}

package/templates/blocks/components/OverflowList/OverflowListCollapseFromStartList.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: 'OverflowList',
+  name: 'OverflowList — Collapse From Start',
+  displayName: 'OverflowList — Collapse From Start',
+  description: 'Overflow list that hides items from the start, keeping the latest visible',
+  isReady: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: ['OverflowList', 'Button', 'Card', 'Center'],
+};

package/templates/blocks/components/OverflowList/OverflowListCollapseFromStartList.tsx

@@ -0,0 +1,33 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {OverflowList} from '@astryxdesign/core/OverflowList';
+import {Button} from '@astryxdesign/core/Button';
+import {Card} from '@astryxdesign/core/Card';
+import {Center} from '@astryxdesign/core/Center';
+
+export default function OverflowListCollapseFromStartList() {
+  return (
+    <Center width={300}>
+      <Card padding={2}>
+        <OverflowList
+          gap={2}
+          collapseFrom="start"
+          overflowRenderer={overflowItems => (
+            <Button
+              label={`+${overflowItems.length} more`}
+              variant="ghost"
+              size="sm"
+            />
+          )}>
+          <Button label="Step 1" size="sm" />
+          <Button label="Step 2" size="sm" />
+          <Button label="Step 3" size="sm" />
+          <Button label="Step 4" size="sm" />
+          <Button label="Step 5" size="sm" />
+        </OverflowList>
+      </Card>
+    </Center>
+  );
+}

package/templates/blocks/components/OverflowList/OverflowListOverflowBadges.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: 'OverflowList',
+  name: 'OverflowList — Badge Tags',
+  displayName: 'OverflowList — Badge Tags',
+  description: 'Resizable row of badges that collapses into a count badge on overflow',
+  isReady: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: ['OverflowList', 'Badge', 'Card'],
+};

package/templates/blocks/components/OverflowList/OverflowListOverflowBadges.tsx

@@ -0,0 +1,35 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import * as stylex from '@stylexjs/stylex';
+import {OverflowList} from '@astryxdesign/core/OverflowList';
+import {Badge} from '@astryxdesign/core/Badge';
+import {Card} from '@astryxdesign/core/Card';
+
+const styles = stylex.create({
+  resizable: {
+    resize: 'horizontal',
+    overflow: 'hidden',
+    minWidth: 80,
+    width: 300,
+  },
+});
+
+export default function OverflowListOverflowBadges() {
+  return (
+    <Card padding={2} xstyle={styles.resizable}>
+      <OverflowList
+        gap={1}
+        overflowRenderer={overflowItems => (
+          <Badge variant="neutral" label={`+${overflowItems.length}`} />
+        )}>
+        <Badge variant="info" label="React" />
+        <Badge variant="success" label="TypeScript" />
+        <Badge variant="warning" label="StyleX" />
+        <Badge variant="neutral" label="Storybook" />
+        <Badge variant="error" label="Vitest" />
+      </OverflowList>
+    </Card>
+  );
+}

package/templates/blocks/components/OverflowList/OverflowListOverflowDropdownActions.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: 'OverflowList',
+  name: 'OverflowList — Dropdown Actions',
+  displayName: 'OverflowList — Dropdown Actions',
+  description: 'Action toolbar that collapses overflow buttons into a dropdown menu',
+  isReady: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: ['OverflowList', 'Button', 'DropdownMenu', 'Card'],
+};

package/templates/blocks/components/OverflowList/OverflowListOverflowDropdownActions.tsx

@@ -0,0 +1,50 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import * as stylex from '@stylexjs/stylex';
+import {OverflowList} from '@astryxdesign/core/OverflowList';
+import {Button} from '@astryxdesign/core/Button';
+import {DropdownMenu} from '@astryxdesign/core/DropdownMenu';
+import {Card} from '@astryxdesign/core/Card';
+
+const actions = ['Save', 'Edit', 'Duplicate', 'Share', 'Archive', 'Delete'];
+
+const styles = stylex.create({
+  resizable: {
+    resize: 'horizontal',
+    overflow: 'hidden',
+    minWidth: 100,
+    width: 350,
+    maxWidth: '100%',
+  },
+});
+
+export default function OverflowListOverflowDropdownActions() {
+  return (
+    <Card padding={2} xstyle={styles.resizable}>
+      <OverflowList
+        gap={2}
+        overflowRenderer={overflowItems => (
+          <DropdownMenu
+            button={{
+              label: `+${overflowItems.length}`,
+              variant: 'ghost',
+              size: 'sm',
+            }}
+            items={overflowItems.map(({index}) => ({
+              label: actions[index],
+              onClick: () => {},
+            }))}
+          />
+        )}>
+        <Button label="Save" size="sm" variant="primary" />
+        <Button label="Edit" size="sm" />
+        <Button label="Duplicate" size="sm" />
+        <Button label="Share" size="sm" />
+        <Button label="Archive" size="sm" />
+        <Button label="Delete" size="sm" variant="destructive" />
+      </OverflowList>
+    </Card>
+  );
+}

package/templates/blocks/components/OverflowList/OverflowListShowcase.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: 'OverflowList',
+  name: 'OverflowList',
+  displayName: 'Overflow List',
+  isReady: true,
+  aspectRatio: 1,
+  isShowcase: true,
+  description:
+    'A list of buttons that collapses overflowing items into a +N indicator.',
+  componentsUsed: ['OverflowList', 'Button'],
+};

package/templates/blocks/components/OverflowList/OverflowListShowcase.tsx

@@ -0,0 +1,28 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {OverflowList} from '@astryxdesign/core/OverflowList';
+import {Button} from '@astryxdesign/core/Button';
+
+export default function OverflowListShowcase() {
+  return (
+    <div style={{maxWidth: 400, border: '1px dashed #ccc', padding: 8}}>
+      <OverflowList
+        gap={2}
+        overflowRenderer={overflowItems => (
+          <Button
+            label={`+${overflowItems.length} more`}
+            variant="ghost"
+            size="sm"
+          />
+        )}>
+        <Button label="Edit" size="sm" />
+        <Button label="Duplicate" size="sm" />
+        <Button label="Share" size="sm" />
+        <Button label="Archive" size="sm" />
+        <Button label="Delete" size="sm" />
+      </OverflowList>
+    </div>
+  );
+}

package/templates/blocks/components/Overlay/OverlayBottomStrip.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: 'Overlay',
+  name: 'Overlay — Bottom Strip',
+  displayName: 'Overlay — Bottom Strip',
+  description:
+    'Places compact supporting content in a bottom scrim strip without covering the entire image.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['Overlay', 'AspectRatio', 'Badge', 'Layout', 'Text'],
+};

package/templates/blocks/components/Overlay/OverlayBottomStrip.tsx

@@ -0,0 +1,51 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import * as stylex from '@stylexjs/stylex';
+import {Overlay} from '@astryxdesign/core/Overlay';
+import {AspectRatio} from '@astryxdesign/core/AspectRatio';
+import {Badge} from '@astryxdesign/core/Badge';
+import {VStack} from '@astryxdesign/core/Layout';
+import {Text} from '@astryxdesign/core/Text';
+
+const styles = stylex.create({
+  frame: {
+    width: 420,
+    maxWidth: '100%',
+    borderRadius: 12,
+    overflow: 'clip',
+  },
+  image: {
+    width: '100%',
+    height: '100%',
+    objectFit: 'cover',
+  },
+});
+
+export default function OverlayBottomStrip() {
+  return (
+    <Overlay
+      position="bottom"
+      align="start"
+      content={
+        <VStack gap={1}>
+          <Badge label="New" variant="green" />
+          <Text type="body" weight="bold" color="inherit">
+            Weekly product highlights
+          </Text>
+          <Text type="supporting" color="inherit">
+            12 updates across templates and tokens
+          </Text>
+        </VStack>
+      }>
+      <AspectRatio ratio={16 / 9} xstyle={styles.frame}>
+        <img
+          src="https://lookaside.facebook.com/assets/astryx/illustrative-horizontal-1.png"
+          alt="Product highlight preview"
+          {...stylex.props(styles.image)}
+        />
+      </AspectRatio>
+    </Overlay>
+  );
+}

package/templates/blocks/components/Overlay/OverlayHoverReveal.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: 'Overlay',
+  name: 'Overlay — Hover Reveal',
+  displayName: 'Overlay — Hover Reveal',
+  description:
+    'Reveals an overlay action on hover or keyboard focus. Use when actions should stay visually quiet until the media receives attention.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['Overlay', 'AspectRatio', 'Button'],
+};