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

package/templates/blocks/components/Thumbnail/ThumbnailRemovable.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: 'Thumbnail',
+  name: 'Thumbnail — Removable',
+  displayName: 'Thumbnail — Removable',
+  description: 'Thumbnails with a remove button overlay. The close button uses APCA luminance detection to stay visible on both dark and light images.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['Thumbnail', 'Layout', 'Text'],
+};

package/templates/blocks/components/Thumbnail/ThumbnailRemovable.tsx

@@ -0,0 +1,44 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useState} from 'react';
+import {Thumbnail} from '@astryxdesign/core/Thumbnail';
+import {Stack} from '@astryxdesign/core/Layout';
+import {Text} from '@astryxdesign/core/Text';
+
+const IMAGES = [
+  {id: 1, src: 'https://lookaside.facebook.com/assets/astryx/moody-scene-vertical-1.png', alt: 'Dark cityscape at night', label: 'dark-city.jpg'},
+  {id: 2, src: 'https://lookaside.facebook.com/assets/astryx/moody-scene-vertical-2.png', alt: 'Bright snowy landscape', label: 'snow.jpg'},
+  {id: 3, src: 'https://lookaside.facebook.com/assets/astryx/moody-home-vertical-1.png', alt: 'Warm sunset over mountains', label: 'sunset.jpg'},
+];
+
+export default function ThumbnailRemovable() {
+  const [items, setItems] = useState(IMAGES);
+
+  return (
+    <Stack direction="vertical" gap={4}>
+      <Text type="supporting" color="secondary">
+        Remove button adapts contrast to image luminance
+      </Text>
+      <Stack direction="horizontal" gap={3} vAlign="center">
+        {items.map(item => (
+          <Thumbnail
+            key={item.id}
+            src={item.src}
+            alt={item.alt}
+            label={item.label}
+            onRemove={() =>
+              setItems(prev => prev.filter(i => i.id !== item.id))
+            }
+          />
+        ))}
+        {items.length === 0 && (
+          <Text type="supporting" color="secondary">
+            All removed.
+          </Text>
+        )}
+      </Stack>
+    </Stack>
+  );
+}

package/templates/blocks/components/Thumbnail/ThumbnailShowcase.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: 'Thumbnail',
+  name: 'Thumbnail',
+  displayName: 'Thumbnail',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  isShowcase: true,
+  description:
+    'A thumbnail with an image and label.',
+  componentsUsed: ['Thumbnail'],
+};

package/templates/blocks/components/Thumbnail/ThumbnailShowcase.tsx

@@ -0,0 +1,15 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {Thumbnail} from '@astryxdesign/core/Thumbnail';
+
+export default function ThumbnailShowcase() {
+  return (
+    <Thumbnail
+      src="https://lookaside.facebook.com/assets/astryx/moody-scene-vertical-2.png"
+      alt="Sample image"
+      label="photo.jpg"
+    />
+  );
+}

package/templates/blocks/components/Thumbnail/ThumbnailStates.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: 'Thumbnail',
+  name: 'Thumbnail — States',
+  displayName: 'Thumbnail — States',
+  description: 'All visual states side by side: image loaded, placeholder, skeleton loading, and upload overlay. Demonstrates the full lifecycle of a thumbnail from empty to loaded.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['Thumbnail', 'Layout', 'Text'],
+};

package/templates/blocks/components/Thumbnail/ThumbnailStates.tsx

@@ -0,0 +1,54 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {Thumbnail} from '@astryxdesign/core/Thumbnail';
+import {Stack} from '@astryxdesign/core/Layout';
+import {Text} from '@astryxdesign/core/Text';
+
+export default function ThumbnailStates() {
+  return (
+    <Stack direction="vertical" gap={4}>
+      <Stack direction="vertical" gap={1}>
+        <Text type="supporting" color="secondary">
+          Lifecycle: empty → uploading → processing → loaded
+        </Text>
+        <Stack direction="horizontal" gap={3} vAlign="end">
+          <Stack direction="vertical" gap={1} hAlign="center">
+            <Thumbnail label="report.pdf" />
+            <Text type="supporting" color="secondary">
+              Placeholder
+            </Text>
+          </Stack>
+          <Stack direction="vertical" gap={1} hAlign="center">
+            <Thumbnail isLoading label="uploading.jpg" />
+            <Text type="supporting" color="secondary">
+              Skeleton
+            </Text>
+          </Stack>
+          <Stack direction="vertical" gap={1} hAlign="center">
+            <Thumbnail
+              src="https://lookaside.facebook.com/assets/astryx/moody-home-vertical-1.png"
+              alt="Mountain landscape"
+              isLoading
+              label="landscape.jpg"
+            />
+            <Text type="supporting" color="secondary">
+              Uploading
+            </Text>
+          </Stack>
+          <Stack direction="vertical" gap={1} hAlign="center">
+            <Thumbnail
+              src="https://lookaside.facebook.com/assets/astryx/moody-home-vertical-1.png"
+              alt="Mountain landscape"
+              label="landscape.jpg"
+            />
+            <Text type="supporting" color="secondary">
+              Loaded
+            </Text>
+          </Stack>
+        </Stack>
+      </Stack>
+    </Stack>
+  );
+}

package/templates/blocks/components/TimeInput/TimeInputConstrained.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: 'TimeInput',
+  name: 'TimeInput — Constrained',
+  displayName: 'TimeInput — Constrained',
+  description: 'Time inputs with min/max constraints limiting selection to specific windows. Use to prevent out-of-bounds selections for appointments, reservations, or shift scheduling.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['TimeInput', 'Layout'],
+};

package/templates/blocks/components/TimeInput/TimeInputConstrained.tsx

@@ -0,0 +1,26 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useState} from 'react';
+import {TimeInput} from '@astryxdesign/core/TimeInput';
+import {Stack} from '@astryxdesign/core/Layout';
+
+export default function TimeInputConstrained() {
+  const [evening, setEvening] = useState(undefined);
+
+  return (
+    <Stack direction="vertical" gap={3}>
+      <TimeInput
+        label="Dinner reservation"
+        min={'17:00' as never}
+        max={'22:00' as never}
+        description="Evening seating: 5 PM – 10 PM"
+        placeholder="Select reservation time"
+        value={evening as never}
+        onChange={setEvening as never}
+        hasClear
+      />
+    </Stack>
+  );
+}

package/templates/blocks/components/TimeInput/TimeInputFormats.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: 'TimeInput',
+  name: 'TimeInput — Formats',
+  displayName: 'TimeInput — Formats',
+  description: '12-hour, 24-hour, and seconds formats side by side. Use 12h for US-centric UIs, 24h for international or technical contexts, and seconds for precise timing.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['TimeInput', 'Layout', 'Text'],
+};

package/templates/blocks/components/TimeInput/TimeInputFormats.tsx

@@ -0,0 +1,35 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useState} from 'react';
+import {TimeInput} from '@astryxdesign/core/TimeInput';
+import {Stack} from '@astryxdesign/core/Layout';
+import {Text} from '@astryxdesign/core/Text';
+
+export default function TimeInputFormats() {
+  const [time24h, setTime24h] = useState('14:30');
+  const [timeSec, setTimeSec] = useState('14:30:45');
+
+  return (
+    <Stack direction="vertical" gap={4}>
+      <Text type="supporting" color="secondary">
+        Format variations for different contexts
+      </Text>
+      <Stack direction="vertical" gap={3}>
+        <TimeInput
+          label="24-hour"
+          value={time24h as never}
+          onChange={setTime24h as never}
+          hourFormat="24h"
+        />
+        <TimeInput
+          label="With seconds"
+          value={timeSec as never}
+          onChange={setTimeSec as never}
+          hasSeconds
+        />
+      </Stack>
+    </Stack>
+  );
+}

package/templates/blocks/components/TimeInput/TimeInputIncrement.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: 'TimeInput',
+  name: 'TimeInput — Increment',
+  displayName: 'TimeInput — Increment',
+  description: 'Time input with a custom step increment. Arrow keys jump by the specified interval (e.g. 15 minutes) for quick slot-based scheduling.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['TimeInput', 'Layout'],
+};

package/templates/blocks/components/TimeInput/TimeInputIncrement.tsx

@@ -0,0 +1,24 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useState} from 'react';
+import {TimeInput} from '@astryxdesign/core/TimeInput';
+import {Stack} from '@astryxdesign/core/Layout';
+
+export default function TimeInputIncrement() {
+  const [slot, setSlot] = useState('09:00');
+
+  return (
+    <Stack direction="vertical" gap={3}>
+      <TimeInput
+        label="Appointment slot"
+        increment={15}
+        description="Use arrow keys to change by 15 minutes"
+        value={slot as never}
+        onChange={setSlot as never}
+        hasClear
+      />
+    </Stack>
+  );
+}

package/templates/blocks/components/TimeInput/TimeInputShowcase.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: 'TimeInput',
+  name: 'TimeInput',
+  displayName: 'Time Input',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  isShowcase: true,
+  description:
+    'A time input field.',
+  componentsUsed: ['TimeInput'],
+};

package/templates/blocks/components/TimeInput/TimeInputShowcase.tsx

@@ -0,0 +1,18 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useState} from 'react';
+import {TimeInput, type ISOTimeString} from '@astryxdesign/core/TimeInput';
+
+export default function TimeInputShowcase() {
+  const [time, setTime] = useState<ISOTimeString | undefined>(undefined);
+  return (
+    <TimeInput
+      label="Time"
+      placeholder="Select a time"
+      value={time}
+      onChange={setTime}
+    />
+  );
+}

package/templates/blocks/components/TimeInput/TimeInputStates.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: 'TimeInput',
+  name: 'TimeInput — States',
+  displayName: 'TimeInput — States',
+  description: 'Default, disabled, error, warning, and success states. Use status messages to give users clear feedback about their time selection.',
+  isReady: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: ['TimeInput', 'Layout'],
+};

package/templates/blocks/components/TimeInput/TimeInputStates.tsx

@@ -0,0 +1,43 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useState} from 'react';
+import {TimeInput} from '@astryxdesign/core/TimeInput';
+import {Stack} from '@astryxdesign/core/Layout';
+
+export default function TimeInputStates() {
+  const [disabledVal, setDisabledVal] = useState('10:00');
+  const [errorVal, setErrorVal] = useState('22:00');
+  const [warningVal, setWarningVal] = useState('07:00');
+  const [successVal, setSuccessVal] = useState('10:00');
+
+  return (
+    <Stack direction="vertical" gap={3}>
+      <TimeInput
+        label="Disabled field"
+        value={disabledVal as never}
+        onChange={setDisabledVal as never}
+        isDisabled
+      />
+      <TimeInput
+        label="Error message"
+        value={errorVal as never}
+        onChange={setErrorVal as never}
+        status={{type: 'error', message: 'Time must be during business hours'}}
+      />
+      <TimeInput
+        label="Warning message"
+        value={warningVal as never}
+        onChange={setWarningVal as never}
+        status={{type: 'warning', message: 'Early morning — are you sure?'}}
+      />
+      <TimeInput
+        label="Success message"
+        value={successVal as never}
+        onChange={setSuccessVal as never}
+        status={{type: 'success', message: 'Time slot is available'}}
+      />
+    </Stack>
+  );
+}

package/templates/blocks/components/Timestamp/TimestampAutoFormat.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: 'Timestamp',
+  name: 'Timestamp — Auto',
+  displayName: 'Timestamp — Auto',
+  description: 'Auto format that shows relative time for recent dates and switches to the full date for older ones. The default choice for most use cases.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['Timestamp', 'Layout', 'Text'],
+};

package/templates/blocks/components/Timestamp/TimestampAutoFormat.tsx

@@ -0,0 +1,34 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {Timestamp} from '@astryxdesign/core/Timestamp';
+import {Stack} from '@astryxdesign/core/Layout';
+import {Text} from '@astryxdesign/core/Text';
+
+export default function TimestampAutoFormat() {
+  const now = Date.now() / 1000;
+  return (
+    <Stack direction="vertical" gap={4}>
+      <Stack direction="vertical" gap={1}>
+        <Text type="supporting" color="secondary">
+          Recent — renders as relative
+        </Text>
+        <Stack direction="horizontal" gap={4} vAlign="center">
+          <Timestamp value={now - 300} format="auto" color="primary" />
+          <Timestamp value={now - 7200} format="auto" color="primary" />
+          <Timestamp value={now - 86400} format="auto" color="primary" />
+        </Stack>
+      </Stack>
+      <Stack direction="vertical" gap={1}>
+        <Text type="supporting" color="secondary">
+          Older than 7 days — renders as date_time
+        </Text>
+        <Stack direction="horizontal" gap={4} vAlign="center">
+          <Timestamp value="2025-01-15T09:30:00Z" format="auto" color="primary" />
+          <Timestamp value="2024-06-01T14:00:00Z" format="auto" color="primary" />
+        </Stack>
+      </Stack>
+    </Stack>
+  );
+}

package/templates/blocks/components/Timestamp/TimestampColors.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: 'Timestamp',
+  name: 'Timestamp \u2014 Colors',
+  displayName: 'Timestamp \u2014 Colors',
+  description:
+    'Timestamp rendered in each available color variant: primary, secondary, disabled, and active.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['Timestamp', 'Stack', 'Text'],
+};

package/templates/blocks/components/Timestamp/TimestampColors.tsx

@@ -0,0 +1,40 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {Timestamp} from '@astryxdesign/core/Timestamp';
+import {Stack} from '@astryxdesign/core/Layout';
+import {Text} from '@astryxdesign/core/Text';
+
+const DATE = '2026-02-19T17:00:00Z';
+
+export default function TimestampColors() {
+  return (
+    <Stack direction="vertical" gap={4}>
+      <Stack direction="vertical" gap={1}>
+        <Text type="supporting" color="secondary">
+          Primary
+        </Text>
+        <Timestamp value={DATE} format="date_time" color="primary" />
+      </Stack>
+      <Stack direction="vertical" gap={1}>
+        <Text type="supporting" color="secondary">
+          Secondary
+        </Text>
+        <Timestamp value={DATE} format="date_time" color="secondary" />
+      </Stack>
+      <Stack direction="vertical" gap={1}>
+        <Text type="supporting" color="secondary">
+          Disabled
+        </Text>
+        <Timestamp value={DATE} format="date_time" color="disabled" />
+      </Stack>
+      <Stack direction="vertical" gap={1}>
+        <Text type="supporting" color="secondary">
+          Active
+        </Text>
+        <Timestamp value={DATE} format="date_time" color="active" />
+      </Stack>
+    </Stack>
+  );
+}

package/templates/blocks/components/Timestamp/TimestampFormats.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: 'Timestamp',
+  name: 'Timestamp — Formats',
+  displayName: 'Timestamp — Formats',
+  description: 'All display formats side by side: date, date_time, time, and their system equivalents. Use date and date_time for user-facing UI, system variants for logs and dev tools.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['Timestamp', 'Layout', 'Text'],
+};

package/templates/blocks/components/Timestamp/TimestampFormats.tsx

@@ -0,0 +1,36 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {Timestamp} from '@astryxdesign/core/Timestamp';
+import {Stack} from '@astryxdesign/core/Layout';
+import {Text} from '@astryxdesign/core/Text';
+
+const DATE = '2026-02-19T17:00:00Z';
+
+export default function TimestampFormats() {
+  return (
+    <Stack direction="vertical" gap={4}>
+      <Stack direction="vertical" gap={1}>
+        <Text type="supporting" color="secondary">
+          User-facing formats
+        </Text>
+        <Stack direction="horizontal" gap={4} vAlign="center">
+          <Timestamp value={DATE} format="date" color="primary" />
+          <Timestamp value={DATE} format="date_time" color="primary" />
+          <Timestamp value={DATE} format="time" color="primary" />
+        </Stack>
+      </Stack>
+      <Stack direction="vertical" gap={1}>
+        <Text type="supporting" color="secondary">
+          System formats (logs and dev tools)
+        </Text>
+        <Stack direction="horizontal" gap={4} vAlign="center">
+          <Timestamp value={DATE} format="system_date" type="code" color="primary" />
+          <Timestamp value={DATE} format="system_date_time" type="code" color="primary" />
+          <Timestamp value={DATE} format="system_time" type="code" color="primary" />
+        </Stack>
+      </Stack>
+    </Stack>
+  );
+}

package/templates/blocks/components/Timestamp/TimestampRelativeFormat.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: 'Timestamp',
+  name: 'Timestamp — Relative',
+  displayName: 'Timestamp — Relative',
+  description: 'Relative time labels from seconds to months ago, with hover tooltips showing the full date. Use in feeds, comment threads, and activity logs.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['Timestamp', 'Layout', 'Text'],
+};

package/templates/blocks/components/Timestamp/TimestampRelativeFormat.tsx

@@ -0,0 +1,26 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {Timestamp} from '@astryxdesign/core/Timestamp';
+import {Stack} from '@astryxdesign/core/Layout';
+import {Text} from '@astryxdesign/core/Text';
+
+export default function TimestampRelativeFormat() {
+  const now = Date.now() / 1000;
+  return (
+    <Stack direction="vertical" gap={3}>
+      <Text type="supporting" color="secondary">
+        Relative timestamps (hover for full date)
+      </Text>
+      <Stack direction="vertical" gap={2}>
+        <Timestamp value={now - 5} format="relative" color="primary" />
+        <Timestamp value={now - 120} format="relative" color="primary" />
+        <Timestamp value={now - 3600} format="relative" color="primary" />
+        <Timestamp value={now - 86400} format="relative" color="primary" />
+        <Timestamp value={now - 259200} format="relative" color="primary" />
+        <Timestamp value={now - 90 * 86400} format="relative" color="primary" />
+      </Stack>
+    </Stack>
+  );
+}

package/templates/blocks/components/Timestamp/TimestampShowcase.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: 'Timestamp',
+  name: 'Timestamp',
+  displayName: 'Timestamp',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  isShowcase: true,
+  componentsUsed: ['Timestamp'],
+};

package/templates/blocks/components/Timestamp/TimestampShowcase.tsx

@@ -0,0 +1,9 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {Timestamp} from '@astryxdesign/core/Timestamp';
+
+export default function TimestampShowcase() {
+  return <Timestamp value="2026-03-25T12:00:00Z" color="primary" />;
+}

package/templates/blocks/components/Timestamp/TimestampTimezone.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: 'Timestamp',
+  name: 'Timestamp — Timezone',
+  displayName: 'Timestamp — Timezone',
+  description: 'Timestamps with the timezone abbreviation appended. Enable isTimezoneShown for audiences across time zones, like audit logs or team calendars.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['Timestamp', 'Layout', 'Text'],
+};