@astryxdesign/cli 0.7.12-canary.9a690d5 → 0.7.12-canary.f543ec7

package/api/component/__fixtures__/resolutions/modules.txt

@@ -247,9 +247,9 @@ useAutoMediaMode useAutoMediaMode hooks/useAnimatedLayout.doc.mjs hooks/useAutoM
 useBackdropPress useBackdropPress Layer/Layer.doc.mjs Layer/useBackdropPress.ts
 useBaseTablePlugins useBaseTablePlugins Table/Table.doc.mjs Table/useBaseTablePlugins.ts
 useBusyAnnouncement useBusyAnnouncement hooks/useAnimatedLayout.doc.mjs hooks/useBusyAnnouncement.ts
-useCalendarConstraints useCalendarConstraints Calendar/Calendar.doc.mjs Calendar/hooks/useCalendarConstraints.ts
+useCalendarConstraints useCalendarConstraints Calendar/useCalendarConstraints.doc.mjs Calendar/hooks/useCalendarConstraints.ts
 useCalendarDays useCalendarDays Calendar/useCalendarDays.doc.mjs Calendar/hooks/useCalendarDays.ts
-useCalendarNavigation useCalendarNavigation Calendar/Calendar.doc.mjs Calendar/hooks/useCalendarNavigation.ts
+useCalendarNavigation useCalendarNavigation Calendar/useCalendarNavigation.doc.mjs Calendar/hooks/useCalendarNavigation.ts
 useChatComposerTokens useChatComposerTokens Chat/Chat.doc.mjs Chat/useChatComposerTokens.ts
 useChatDictation useChatDictation Chat/Chat.doc.mjs Chat/useChatDictation.ts
 useChatNewMessages useChatNewMessages Chat/Chat.doc.mjs Chat/useChatNewMessages.ts

package/assets/templates/blocks/components/Calendar/useCalendarConstraintsHookUsage.doc.mjs

@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('@astryxdesign/cli/authoring').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'useCalendarConstraints',
+  name: 'useCalendarConstraints — Hotel Booking Range',
+  displayName: 'useCalendarConstraints — Hotel Booking Range',
+  description:
+    'A hotel booking range picker enforcing season min/max dates, a 7-night maximum stay once check-in is picked, and a custom rule disabling closed Mondays.',
+  isReady: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: ['Button', 'Layout', 'Text'],
+};

package/assets/templates/blocks/components/Calendar/useCalendarConstraintsHookUsage.tsx

@@ -0,0 +1,146 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useState} from 'react';
+import {
+  useCalendarConstraints,
+  useCalendarDays,
+  type CalendarDay,
+} from '@astryxdesign/core/Calendar';
+import {Button} from '@astryxdesign/core/Button';
+import {HStack, VStack} from '@astryxdesign/core/Layout';
+import {Text} from '@astryxdesign/core/Text';
+
+// Hotel closed on Mondays (day === 1)
+const isNotMonday = (date: Date) => date.getDay() !== 1;
+
+export default function UseCalendarConstraintsHookUsage() {
+  const [checkIn, setCheckIn] = useState<CalendarDay['date'] | null>(null);
+  const [checkOut, setCheckOut] = useState<CalendarDay['date'] | null>(null);
+
+  // June 2026 season: open Jun 5 – Jun 25, max 7 nights (8-day span), closed Mondays.
+  // When checkOut is already chosen, clear rangeAnchor so full season remains viewable without lingering span restrictions.
+  const {isDateDisabled} = useCalendarConstraints({
+    min: '2026-06-05',
+    max: '2026-06-25',
+    maxRangeSpan: 8,
+    rangeAnchor: checkOut ? null : checkIn,
+    dateConstraints: [isNotMonday],
+  });
+
+  const {weeks, dayNames} = useCalendarDays({
+    year: 2026,
+    month: 6,
+    weekStartsOn: 0,
+    hasVariableRowCount: true,
+  });
+
+  const handleSelect = (day: CalendarDay) => {
+    if (day.isOutside || isDateDisabled(day.date)) {
+      return;
+    }
+    // If no check-in yet, or already booked, or clicking on/before current check-in: start new check-in
+    if (!checkIn || checkOut || day.date.day <= checkIn.day) {
+      setCheckIn(day.date);
+      setCheckOut(null);
+    } else {
+      // Pick is after checkIn: set as check-out
+      setCheckOut(day.date);
+    }
+  };
+
+  const handleReset = () => {
+    setCheckIn(null);
+    setCheckOut(null);
+  };
+
+  return (
+    <VStack gap={3}>
+      <VStack gap={1}>
+        <Text type="body" weight="bold">
+          Hotel Booking — June 2026
+        </Text>
+        <Text type="supporting" color="secondary">
+          Season: Jun 5 – Jun 25 · Max stay: 7 nights · Closed Mondays
+        </Text>
+      </VStack>
+      <HStack gap={2} vAlign="center">
+        <Text type="supporting">
+          {checkIn
+            ? checkOut
+              ? `Booked: Jun ${checkIn.day} – Jun ${checkOut.day}`
+              : `Check-in: Jun ${checkIn.day} (pick check-out)`
+            : 'Pick a check-in date'}
+        </Text>
+        {checkIn && (
+          <Button
+            label="Reset"
+            size="sm"
+            variant="secondary"
+            onClick={handleReset}
+          />
+        )}
+      </HStack>
+      <table style={{tableLayout: 'fixed', width: 280}}>
+        <thead>
+          <tr>
+            {dayNames.map((name, i) => (
+              <th key={i} scope="col">
+                <Text type="supporting" color="secondary">
+                  {name}
+                </Text>
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {weeks.map(week => (
+            <tr key={week[0].iso}>
+              {week.map(day => {
+                if (day.isOutside) {
+                  return <td key={day.iso} align="center" />;
+                }
+
+                const disabled = isDateDisabled(day.date);
+                const isSelected =
+                  (checkIn &&
+                    checkIn.day === day.date.day &&
+                    checkIn.month === day.date.month) ||
+                  (checkOut &&
+                    checkOut.day === day.date.day &&
+                    checkOut.month === day.date.month);
+
+                return (
+                  <td key={day.iso} align="center">
+                    <button
+                      type="button"
+                      disabled={disabled}
+                      onClick={() => handleSelect(day)}
+                      aria-pressed={isSelected ? 'true' : 'false'}
+                      aria-label={`June ${day.dayNumber}`}
+                      style={{
+                        width: 32,
+                        height: 32,
+                        borderRadius: 6,
+                        border: isSelected ? '1px solid currentColor' : 'none',
+                        background: 'transparent',
+                        opacity: disabled ? 0.35 : 1,
+                        cursor: disabled ? 'not-allowed' : 'pointer',
+                      }}>
+                      <Text
+                        type="body"
+                        color={disabled ? 'secondary' : 'primary'}>
+                        {day.dayNumber}
+                      </Text>
+                    </button>
+                  </td>
+                );
+              })}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </VStack>
+  );
+}

package/assets/templates/blocks/components/Calendar/useCalendarNavigationHookUsage.doc.mjs

@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('@astryxdesign/cli/authoring').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'useCalendarNavigation',
+  name: 'useCalendarNavigation — Month Pager',
+  displayName: 'useCalendarNavigation — Month Pager',
+  description:
+    'A calendar month pager with previous/next navigation buttons, localized month-year label, and cross-month arrow key navigation using pendingFocus.',
+  isReady: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: ['Button', 'Layout', 'Text'],
+};

package/assets/templates/blocks/components/Calendar/useCalendarNavigationHookUsage.tsx

@@ -0,0 +1,173 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useEffect, useRef, useState} from 'react';
+import {
+  useCalendarDays,
+  useCalendarNavigation,
+  type CalendarDay,
+  type ISODateString,
+} from '@astryxdesign/core/Calendar';
+import {Button} from '@astryxdesign/core/Button';
+import {HStack, VStack} from '@astryxdesign/core/Layout';
+import {Text} from '@astryxdesign/core/Text';
+
+export default function UseCalendarNavigationHookUsage() {
+  const [focusDate, setFocusDate] = useState<ISODateString>(
+    '2026-06-01' as ISODateString,
+  );
+
+  const {
+    monthYearLabel,
+    visibleCalendarMonths,
+    navigateMonth,
+    pendingFocus,
+    clearPendingFocus,
+  } = useCalendarNavigation({
+    focusDate,
+    onFocusDateChange: setFocusDate,
+    numberOfMonths: 1,
+  });
+
+  const {weeks, dayNames} = useCalendarDays({
+    ...visibleCalendarMonths[0],
+    weekStartsOn: 0,
+    hasVariableRowCount: true,
+  });
+
+  const dayButtonRefs = useRef<Map<string, HTMLButtonElement>>(new Map());
+
+  // Move focus to target date when navigating across month boundaries
+  useEffect(() => {
+    if (pendingFocus) {
+      const el = dayButtonRefs.current.get(pendingFocus);
+      if (el) {
+        el.focus();
+        clearPendingFocus();
+      }
+    }
+  }, [pendingFocus, clearPendingFocus, weeks]);
+
+  // Arrow key navigation moving across days and month boundaries with RTL awareness (DR6, DR11)
+  const handleKeyDown = (
+    e: React.KeyboardEvent<HTMLButtonElement>,
+    day: CalendarDay,
+  ) => {
+    if (day.isOutside) {
+      return;
+    }
+
+    const isRtl =
+      typeof window !== 'undefined' &&
+      getComputedStyle(e.currentTarget).direction === 'rtl';
+
+    const isNext = isRtl ? e.key === 'ArrowLeft' : e.key === 'ArrowRight';
+    const isPrev = isRtl ? e.key === 'ArrowRight' : e.key === 'ArrowLeft';
+
+    if (isNext) {
+      e.preventDefault();
+      const inMonthDays = weeks.flatMap(w => w.filter(d => !d.isOutside));
+      const currentIndex = inMonthDays.findIndex(d => d.iso === day.iso);
+      if (currentIndex === inMonthDays.length - 1) {
+        // Last day of month: advance month and focus next day across boundary
+        navigateMonth(1, day.iso, 1);
+      } else {
+        const nextDay = inMonthDays[currentIndex + 1];
+        dayButtonRefs.current.get(nextDay.iso)?.focus();
+      }
+    } else if (isPrev) {
+      e.preventDefault();
+      const inMonthDays = weeks.flatMap(w => w.filter(d => !d.isOutside));
+      const currentIndex = inMonthDays.findIndex(d => d.iso === day.iso);
+      if (currentIndex === 0) {
+        // First day of month: step back month and focus previous day across boundary
+        navigateMonth(-1, day.iso, 1);
+      } else {
+        const prevDay = inMonthDays[currentIndex - 1];
+        dayButtonRefs.current.get(prevDay.iso)?.focus();
+      }
+    }
+  };
+
+  return (
+    <VStack gap={3} style={{width: 280}}>
+      <HStack gap={2} vAlign="center" hAlign="between">
+        <Button
+          label="Previous"
+          size="sm"
+          variant="secondary"
+          onClick={() => navigateMonth(-1)}
+          aria-label="Previous month"
+        />
+        <Text type="body" weight="bold">
+          {monthYearLabel}
+        </Text>
+        <Button
+          label="Next"
+          size="sm"
+          variant="secondary"
+          onClick={() => navigateMonth(1)}
+          aria-label="Next month"
+        />
+      </HStack>
+
+      <table style={{tableLayout: 'fixed', width: 280}}>
+        <thead>
+          <tr>
+            {dayNames.map((name, i) => (
+              <th key={i} scope="col">
+                <Text type="supporting" color="secondary">
+                  {name}
+                </Text>
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {weeks.map(week => (
+            <tr key={week[0].iso}>
+              {week.map(day => (
+                <td key={day.iso} align="center">
+                  <button
+                    type="button"
+                    ref={el => {
+                      if (el) {
+                        dayButtonRefs.current.set(day.iso, el);
+                      } else {
+                        dayButtonRefs.current.delete(day.iso);
+                      }
+                    }}
+                    disabled={day.isOutside}
+                    aria-hidden={day.isOutside || undefined}
+                    onKeyDown={e => handleKeyDown(e, day)}
+                    aria-label={
+                      day.isOutside
+                        ? undefined
+                        : `${monthYearLabel} ${day.dayNumber}`
+                    }
+                    tabIndex={day.isOutside ? -1 : 0}
+                    style={{
+                      width: 32,
+                      height: 32,
+                      borderRadius: 6,
+                      border: 'none',
+                      background: 'transparent',
+                      opacity: day.isOutside ? 0.35 : 1,
+                      cursor: day.isOutside ? 'not-allowed' : 'pointer',
+                    }}>
+                    <Text
+                      type="body"
+                      color={day.isOutside ? 'secondary' : 'primary'}>
+                      {day.dayNumber}
+                    </Text>
+                  </button>
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </VStack>
+  );
+}

package/assets/templates/themes/butter/butterTheme.ts

@@ -260,7 +260,7 @@ export const butterTheme = defineTheme({
     '--color-tint-hover': [neutral.light[0], neutral.dark[100]],
 
     // Typography override
-    '--text-supporting-size': '12px',
+    '--text-supporting-size': '0.75rem', // 12px at the default root size
 
     // Element sizes — slightly taller defaults so the new input padding
     // (--spacing-2 block) has room to breathe.

package/assets/templates/themes/stone/stoneTheme.ts

@@ -240,7 +240,7 @@ export const stoneTheme = defineTheme({
     '--color-tint-hover': [neutral.light[0], neutral.dark[100]],
 
     // Typography override
-    '--text-supporting-size': '12px',
+    '--text-supporting-size': '0.75rem', // 12px at the default root size
 
     // Categorical
     // Light mode pairs pastel stop 90 surfaces with stop 30 foregrounds.

package/assets/templates/themes/y2k/y2kTheme.ts

@@ -236,7 +236,7 @@ export const y2kTheme = defineTheme({
     '--color-tint-hover': [neutral.light[15], neutral.dark[95]],
 
     // Typography override
-    '--text-supporting-size': '12px',
+    '--text-supporting-size': '0.75rem', // 12px at the default root size
 
     // Categorical colors
     '--color-background-green': [green.light[80], green.dark[80]],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/cli",
-  "version": "0.7.12-canary.9a690d5",
+  "version": "0.7.12-canary.f543ec7",
   "displayName": "CLI",
   "description": "Scaffold projects, browse templates, generate themes, and get agent-ready docs from the command line.",
   "author": "Meta Open Source",
@@ -124,7 +124,7 @@
     "zod": "^4.4.3"
   },
   "peerDependencies": {
-    "@astryxdesign/core": "0.7.12-canary.9a690d5"
+    "@astryxdesign/core": "0.7.12-canary.f543ec7"
   },
   "peerDependenciesMeta": {
     "@astryxdesign/core": {
@@ -132,10 +132,10 @@
     }
   },
   "devDependencies": {
-    "@astryxdesign/charts": "0.7.12-canary.9a690d5",
-    "@astryxdesign/core": "0.7.12-canary.9a690d5",
-    "@astryxdesign/lab": "0.7.12-canary.9a690d5",
-    "@astryxdesign/theme-neutral": "0.7.12-canary.9a690d5",
+    "@astryxdesign/charts": "0.7.12-canary.f543ec7",
+    "@astryxdesign/core": "0.7.12-canary.f543ec7",
+    "@astryxdesign/lab": "0.7.12-canary.f543ec7",
+    "@astryxdesign/theme-neutral": "0.7.12-canary.f543ec7",
     "@heroicons/react": "^2.2.0",
     "@stylexjs/stylex": "^0.19.0",
     "@types/babel__core": "^7.20.5",