@astryxdesign/cli 0.1.1 → 0.1.2-canary.043f3fd

package/templates/blocks/components/ChatDictationButton/ChatDictationButtonShowcase.tsx

@@ -19,7 +19,7 @@ export default function ChatDictationButtonShowcase() {
   const dictation = useChatDictation({
     inputRef,
     hasSounds: true,
-    onResult: (text) => {
+    onResult: text => {
       console.log('Dictation result:', text);
     },
   });
@@ -31,7 +31,7 @@ export default function ChatDictationButtonShowcase() {
         input.
       </Text>
       <ChatComposer
-        onSubmit={(v) => console.log('Submit:', v)}
+        onSubmit={v => console.log('Submit:', v)}
         input={<ChatComposerInput handleRef={inputRef} />}
         sendActions={<ChatDictationButton dictation={dictation} />}
       />
@@ -63,7 +63,7 @@ export default function ChatDictationButtonShowcase() {
         </HStack>
       )}
       {!dictation.isSupported && (
-        <Text type="supporting" color="active">
+        <Text type="supporting" color="accent">
           SpeechRecognition is not supported in this browser.
         </Text>
       )}

package/templates/blocks/components/CommandPaletteEmpty/CommandPaletteEmptyShowcase.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: 'CommandPaletteEmpty',
+  name: 'CommandPaletteEmpty',
+  displayName: 'Command Palette Empty',
+  description:
+    'Command palette empty state shown when no commands are available.',
+  isReady: true,
+  isShowcase: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: ['CommandPalette', 'CommandPaletteEmpty', 'Text'],
+};

package/templates/blocks/components/CommandPaletteEmpty/CommandPaletteEmptyShowcase.tsx

@@ -0,0 +1,26 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useMemo} from 'react';
+import {CommandPalette} from '@astryxdesign/core/CommandPalette';
+import {Text} from '@astryxdesign/core/Text';
+import {createStaticSource} from '@astryxdesign/core/Typeahead';
+
+export default function CommandPaletteEmptyShowcase() {
+  const emptySource = useMemo(() => createStaticSource([]), []);
+
+  return (
+    <CommandPalette
+      isOpen
+      isInline
+      onOpenChange={() => {}}
+      searchSource={emptySource}
+      emptyBootstrapText={
+        <Text type="supporting" color="secondary">
+          No commands available yet
+        </Text>
+      }
+    />
+  );
+}

package/templates/blocks/components/DateInput/DateInputDateRange.doc.mjs

@@ -4,8 +4,8 @@
 export const doc = {
   type: 'block',
   exampleFor: 'DateInput',
-  name: 'DateInput — Date Range',
-  displayName: 'DateInput — Date Range',
+  name: 'DateInput — Min/Max Constraints',
+  displayName: 'DateInput — Min/Max Constraints',
   description:
     'Date input constrained to a min/max window. Use when only certain dates are valid, like booking availability or a fiscal quarter.',
   isReady: true,

package/templates/blocks/components/DateRangeInput/DateRangeInputWithPresets.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: 'DateRangeInput',
+  name: 'DateRangeInput — With Presets',
+  displayName: 'DateRangeInput — With Presets',
+  description:
+    'Date range picker with quick-select presets for common periods. Use for analytics dashboards, report filters, or any context where users frequently select standard time windows.',
+  isReady: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: ['DateRangeInput', 'Layout', 'Text'],
+};

package/templates/blocks/components/DateRangeInput/DateRangeInputWithPresets.tsx

@@ -0,0 +1,46 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useState} from 'react';
+import {DateRangeInput} from '@astryxdesign/core/DateRangeInput';
+import type {DateRange} from '@astryxdesign/core/DateRangeInput';
+import type {ISODateString} from '@astryxdesign/core/Calendar';
+import {Stack} from '@astryxdesign/core/Layout';
+import {Text} from '@astryxdesign/core/Text';
+
+function daysAgo(n: number): ISODateString {
+  const d = new Date();
+  d.setDate(d.getDate() - n);
+  return d.toISOString().slice(0, 10) as ISODateString;
+}
+
+function today(): ISODateString {
+  return new Date().toISOString().slice(0, 10) as ISODateString;
+}
+
+const presets = [
+  {label: 'Last 7 days', getRange: () => ({start: daysAgo(7), end: today()})},
+  {label: 'Last 14 days', getRange: () => ({start: daysAgo(14), end: today()})},
+  {label: 'Last 30 days', getRange: () => ({start: daysAgo(30), end: today()})},
+  {label: 'Last 90 days', getRange: () => ({start: daysAgo(90), end: today()})},
+];
+
+export default function DateRangeInputWithPresets() {
+  const [range, setRange] = useState<DateRange | null>(null);
+
+  return (
+    <Stack direction="vertical" gap={4} width="100%" style={{maxWidth: 400}}>
+      <Text type="supporting" color="secondary">
+        {range ? `${range.start} → ${range.end}` : 'No range selected'}
+      </Text>
+      <DateRangeInput
+        label="Report period"
+        description="Use a preset or pick a custom range"
+        value={range}
+        onChange={setRange}
+        presets={presets}
+      />
+    </Stack>
+  );
+}

package/templates/blocks/components/DateRangeInput/DateRangeInputWithValidation.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: 'DateRangeInput',
+  name: 'DateRangeInput — Validation',
+  displayName: 'DateRangeInput — Validation',
+  description:
+    'Date range input in all three status states: error, warning, and success. Use to surface booking conflicts, flag high-demand periods, or confirm an available range.',
+  isReady: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: ['DateRangeInput', 'Layout'],
+};

package/templates/blocks/components/DateRangeInput/DateRangeInputWithValidation.tsx

@@ -0,0 +1,52 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useState} from 'react';
+import {DateRangeInput} from '@astryxdesign/core/DateRangeInput';
+import type {DateRange} from '@astryxdesign/core/DateRangeInput';
+import {Stack} from '@astryxdesign/core/Layout';
+
+export default function DateRangeInputWithValidation() {
+  const [errorRange, setErrorRange] = useState<DateRange | null>({
+    start: '2026-01-01',
+    end: '2026-01-31',
+  });
+  const [warningRange, setWarningRange] = useState<DateRange | null>({
+    start: '2026-06-01',
+    end: '2026-06-30',
+  });
+  const [successRange, setSuccessRange] = useState<DateRange | null>({
+    start: '2026-03-01',
+    end: '2026-03-31',
+  });
+
+  return (
+    <Stack direction="vertical" gap={4} width="100%" style={{maxWidth: 400}}>
+      <DateRangeInput
+        label="Booking period"
+        value={errorRange}
+        onChange={setErrorRange}
+        status={{
+          type: 'error',
+          message: 'Selected dates are no longer available',
+        }}
+      />
+      <DateRangeInput
+        label="Preferred period"
+        value={warningRange}
+        onChange={setWarningRange}
+        status={{
+          type: 'warning',
+          message: 'High demand — limited availability',
+        }}
+      />
+      <DateRangeInput
+        label="Confirmed period"
+        value={successRange}
+        onChange={setSuccessRange}
+        status={{type: 'success', message: 'Dates confirmed and available'}}
+      />
+    </Stack>
+  );
+}

package/templates/blocks/components/DateTimeInput/DateTimeInputWithValidation.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: 'DateTimeInput',
+  name: 'DateTimeInput — Validation',
+  displayName: 'DateTimeInput — Validation',
+  description:
+    'DateTimeInput in all three status states: error, warning, and success. Use to surface scheduling conflicts, caution the user about edge cases, or confirm a valid datetime.',
+  isReady: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: ['DateTimeInput', 'Layout'],
+};

package/templates/blocks/components/DateTimeInput/DateTimeInputWithValidation.tsx

@@ -0,0 +1,43 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useState} from 'react';
+import {DateTimeInput} from '@astryxdesign/core/DateTimeInput';
+import type {ISODateTimeString} from '@astryxdesign/core/DateTimeInput';
+import {Stack} from '@astryxdesign/core/Layout';
+
+export default function DateTimeInputWithValidation() {
+  const [errorVal, setErrorVal] = useState<ISODateTimeString | undefined>(
+    '2026-01-25T09:00' as ISODateTimeString,
+  );
+  const [warningVal, setWarningVal] = useState<ISODateTimeString | undefined>(
+    '2026-12-25T14:00' as ISODateTimeString,
+  );
+  const [successVal, setSuccessVal] = useState<ISODateTimeString | undefined>(
+    '2026-03-10T10:30' as ISODateTimeString,
+  );
+
+  return (
+    <Stack direction="vertical" gap={4} width="100%" style={{maxWidth: 400}}>
+      <DateTimeInput
+        label="Meeting time"
+        value={errorVal}
+        onChange={setErrorVal}
+        status={{type: 'error', message: 'This time slot is already booked'}}
+      />
+      <DateTimeInput
+        label="Preferred time"
+        value={warningVal}
+        onChange={setWarningVal}
+        status={{type: 'warning', message: 'This falls outside business hours'}}
+      />
+      <DateTimeInput
+        label="Start time"
+        value={successVal}
+        onChange={setSuccessVal}
+        status={{type: 'success', message: 'Time confirmed'}}
+      />
+    </Stack>
+  );
+}

package/templates/blocks/components/FileInput/FileInputShowcase.tsx

@@ -2,15 +2,17 @@
 
 'use client';
 
+import {useState} from 'react';
 import {FileInput} from '@astryxdesign/core/FileInput';
 
 export default function FileInputShowcase() {
+  const [value, setValue] = useState<File | File[] | null>(null);
   return (
     <div style={{width: 350}}>
       <FileInput
         label="Upload file"
-        value={null}
-        onChange={() => {}}
+        value={value}
+        onChange={setValue}
         placeholder="Drag files here or click to browse"
       />
     </div>

package/templates/blocks/components/HoverCard/HoverCardInteractiveContent.doc.mjs

@@ -10,5 +10,5 @@ export const doc = {
     'Shows a page summary when hovering a link: title, description, and URL. Use for documentation links, article references, or any URL where a preview helps the user decide whether to click.',
   isReady: true,
   aspectRatio: 16 / 9,
-  componentsUsed: ['HoverCard', 'Icon', 'Layout', 'Text'],
+  componentsUsed: ['HoverCard', 'Icon', 'Layout', 'Link', 'Text'],
 };

package/templates/blocks/components/HoverCard/HoverCardInteractiveContent.tsx

@@ -5,12 +5,14 @@
 import {HoverCard} from '@astryxdesign/core/HoverCard';
 import {Icon} from '@astryxdesign/core/Icon';
 import {VStack, HStack} from '@astryxdesign/core/Layout';
+import {Link} from '@astryxdesign/core/Link';
 import {Text} from '@astryxdesign/core/Text';
 import {LinkIcon} from '@heroicons/react/24/outline';
 
 export default function HoverCardInteractiveContent() {
   return (
-    <Text type="body">Read more in the{' '}
+    <Text type="body">
+      Read more in the{' '}
       <HoverCard
         placement="below"
         content={
@@ -30,8 +32,11 @@ export default function HoverCardInteractiveContent() {
             </HStack>
           </VStack>
         }>
-        Getting Started Guide
-      </HoverCard>.
-          </Text>
+        <Link href="#" hasUnderline>
+          Getting Started Guide
+        </Link>
+      </HoverCard>
+      .
+    </Text>
   );
 }

package/templates/blocks/components/LinkProvider/LinkProviderCustomLink.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: 'LinkProvider',
+  name: 'Link Provider — Custom Link Component',
+  displayName: 'Link Provider — Custom Link Component',
+  description:
+    'Routes every Astryx link through a custom component that intercepts the click, the hook frameworks like Next.js use for client-side navigation. Click the link to see the custom handler fire instead of a full-page load.',
+  isReady: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: ['LinkProvider', 'Link'],
+};

package/templates/blocks/components/LinkProvider/LinkProviderCustomLink.tsx

@@ -0,0 +1,43 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import type {AnchorHTMLAttributes} from 'react';
+import {Link, LinkProvider} from '@astryxdesign/core/Link';
+
+/**
+ * A stand-in for a framework router link (e.g. Next.js `Link` or React
+ * Router `Link`). Instead of letting the browser do a full-page navigation,
+ * it intercepts the click and hands the destination to a custom handler —
+ * the same hook real routers use for client-side navigation. Here it just
+ * announces the target so the behavior swap is observable in the preview.
+ */
+function RouterLink({
+  href,
+  onClick,
+  children,
+  ...props
+}: AnchorHTMLAttributes<HTMLAnchorElement>) {
+  return (
+    <a
+      href={href}
+      onClick={e => {
+        e.preventDefault();
+        onClick?.(e);
+        alert(`RouterLink intercepted navigation to: ${href}`);
+      }}
+      {...props}>
+      {children}
+    </a>
+  );
+}
+
+export default function LinkProviderCustomLink() {
+  return (
+    <LinkProvider component={RouterLink}>
+      <Link href="/dashboard" isStandalone>
+        Go to dashboard
+      </Link>
+    </LinkProvider>
+  );
+}

package/templates/blocks/components/MultiSelector/MultiSelectorShowcase.tsx

@@ -1,15 +1,19 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
+'use client';
+
+import {useState} from 'react';
 import {MultiSelector} from '@astryxdesign/core/MultiSelector';
 
 export default function MultiSelectorShowcase() {
+  const [value, setValue] = useState<string[]>([]);
   return (
     <div style={{width: 300}}>
       <MultiSelector
         label="Columns"
         options={['Name', 'Email', 'Role', 'Status', 'Created']}
-        value={[]}
-        onChange={() => {}}
+        value={value}
+        onChange={setValue}
         placeholder="Select columns..."
       />
     </div>

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

@@ -1,15 +1,19 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
+'use client';
+
+import {useState} from 'react';
 import {NumberInput} from '@astryxdesign/core/NumberInput';
 
 export default function NumberInputShowcase() {
+  const [value, setValue] = useState<number | null>(0);
   return (
     <div style={{width: 300}}>
       <NumberInput
         label="Quantity"
         placeholder="Enter quantity"
-        value={0}
-        onChange={() => {}}
+        value={value}
+        onChange={setValue}
       />
     </div>
   );

package/templates/blocks/components/Outline/OutlineShowcase.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: 'Outline',
+  name: 'Outline',
+  displayName: 'Outline',
+  description:
+    'A document outline with the active section highlighted by the sliding indicator track.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  isShowcase: true,
+  componentsUsed: ['Outline'],
+};

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

@@ -0,0 +1,22 @@
+// 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: 'showcase-overview', label: 'Overview', level: 2},
+  {id: 'showcase-installation', label: 'Installation', level: 2},
+  {id: 'showcase-theming', label: 'Theming', level: 2},
+  {id: 'showcase-tokens', label: 'Tokens', level: 3},
+  {id: 'showcase-accessibility', label: 'Accessibility', level: 2},
+];
+
+export default function OutlineShowcase() {
+  return (
+    <div style={{width: 240}}>
+      <Outline items={items} activeId="showcase-theming" />
+    </div>
+  );
+}

package/templates/blocks/components/RadioList/RadioListShowcase.tsx

@@ -1,10 +1,17 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
+'use client';
+
+import {useState} from 'react';
 import {RadioList, RadioListItem} from '@astryxdesign/core/RadioList';
 
 export default function RadioListShowcase() {
+  const [value, setValue] = useState('');
   return (
-    <RadioList label="Notification preference" value="" onChange={() => {}}>
+    <RadioList
+      label="Notification preference"
+      value={value}
+      onChange={setValue}>
       <RadioListItem label="Email" value="email" />
       <RadioListItem label="SMS" value="sms" />
       <RadioListItem label="Push notification" value="push" />

package/templates/blocks/components/SegmentedControl/SegmentedControlShowcase.tsx

@@ -2,14 +2,16 @@
 
 'use client';
 
+import {useState} from 'react';
 import {
   SegmentedControl,
   SegmentedControlItem,
 } from '@astryxdesign/core/SegmentedControl';
 
 export default function SegmentedControlShowcase() {
+  const [value, setValue] = useState('grid');
   return (
-    <SegmentedControl value="grid" onChange={() => {}} label="View mode">
+    <SegmentedControl value={value} onChange={setValue} label="View mode">
       <SegmentedControlItem value="grid" label="Grid" />
       <SegmentedControlItem value="list" label="List" />
       <SegmentedControlItem value="table" label="Table" />

package/templates/blocks/components/Selector/SelectorShowcase.tsx

@@ -2,16 +2,19 @@
 
 'use client';
 
+import {useState} from 'react';
 import {Selector} from '@astryxdesign/core/Selector';
 
 export default function SelectorShowcase() {
+  const [value, setValue] = useState<string | undefined>();
   return (
     <Selector
       style={{width: 300}}
       label="Fruit"
       options={['Apple', 'Banana', 'Orange', 'Mango', 'Pineapple']}
       placeholder="Select a fruit..."
-      onChange={() => {}}
+      value={value}
+      onChange={setValue}
     />
   );
 }

package/templates/blocks/components/Slider/SliderShowcase.tsx

@@ -2,8 +2,17 @@
 
 'use client';
 
+import {useState} from 'react';
 import {Slider} from '@astryxdesign/core/Slider';
 
 export default function SliderShowcase() {
-  return <Slider label="Volume" value={50} style={{width: 300}} />;
+  const [value, setValue] = useState(50);
+  return (
+    <Slider
+      label="Volume"
+      value={value}
+      onChange={setValue}
+      style={{width: 300}}
+    />
+  );
 }

package/templates/blocks/components/Tab/TabShowcase.tsx

@@ -2,12 +2,14 @@
 
 'use client';
 
+import {useState} from 'react';
 import {TabList, Tab} from '@astryxdesign/core/TabList';
 import {Badge} from '@astryxdesign/core/Badge';
 
 export default function TabShowcase() {
+  const [value, setValue] = useState('inbox');
   return (
-    <TabList value="inbox" onChange={() => {}}>
+    <TabList value={value} onChange={setValue}>
       <Tab
         value="inbox"
         label="Inbox"

package/templates/blocks/components/Tab/TabWithSelectedIcon.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: 'Tab',
+  name: 'Tab — Selected Icon',
+  displayName: 'Tab — Selected Icon',
+  description: 'A tab that changes its icon when selected.',
+  isReady: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: ['TabList', 'Tab'],
+};

package/templates/blocks/components/Tab/TabWithSelectedIcon.tsx

@@ -0,0 +1,39 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useState} from 'react';
+import {TabList, Tab} from '@astryxdesign/core/TabList';
+
+const StarIcon = (
+  <svg
+    viewBox="0 0 16 16"
+    fill="none"
+    stroke="currentColor"
+    width="100%"
+    height="100%">
+    <path d="m8 1.5 2 4.1 4.5.7-3.3 3.2.8 4.5-4-2.1L4 14l.8-4.5-3.3-3.2 4.5-.7L8 1.5Z" />
+  </svg>
+);
+
+const SelectedStarIcon = (
+  <svg viewBox="0 0 16 16" fill="currentColor" width="100%" height="100%">
+    <path d="m8 1.5 2 4.1 4.5.7-3.3 3.2.8 4.5-4-2.1L4 14l.8-4.5-3.3-3.2 4.5-.7L8 1.5Z" />
+  </svg>
+);
+
+export default function TabWithSelectedIcon() {
+  const [value, setValue] = useState('favorites');
+
+  return (
+    <TabList value={value} onChange={setValue}>
+      <Tab
+        value="favorites"
+        label="Favorites"
+        icon={StarIcon}
+        selectedIcon={SelectedStarIcon}
+      />
+      <Tab value="recent" label="Recent" />
+    </TabList>
+  );
+}

package/templates/blocks/components/TabList/TabListShowcase.tsx

@@ -2,11 +2,13 @@
 
 'use client';
 
+import {useState} from 'react';
 import {TabList, Tab} from '@astryxdesign/core/TabList';
 
 export default function TabListShowcase() {
+  const [value, setValue] = useState('home');
   return (
-    <TabList value="home" onChange={() => {}}>
+    <TabList value={value} onChange={setValue}>
       <Tab value="home" label="Home" />
       <Tab value="projects" label="Projects" />
       <Tab value="settings" label="Settings" />

package/templates/blocks/components/TabMenu/TabMenuShowcase.tsx

@@ -2,11 +2,13 @@
 
 'use client';
 
+import {useState} from 'react';
 import {TabList, Tab, TabMenu} from '@astryxdesign/core/TabList';
 
 export default function TabMenuShowcase() {
+  const [value, setValue] = useState('settings');
   return (
-    <TabList value="settings" onChange={() => {}}>
+    <TabList value={value} onChange={setValue}>
       <Tab value="overview" label="Overview" />
       <Tab value="activity" label="Activity" />
       <TabMenu