@astryxdesign/cli 0.4.3 → 0.4.4-canary.0e8af82

package/assets/templates/blocks/components/BottomSheet/BottomSheetSnapPoints.tsx

@@ -0,0 +1,155 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useState} from 'react';
+import {
+  BottomSheet,
+  type BottomSheetSnapPoint,
+} from '@astryxdesign/core/BottomSheet';
+import {Button} from '@astryxdesign/core/Button';
+import {Divider} from '@astryxdesign/core/Divider';
+import {Heading} from '@astryxdesign/core/Heading';
+import {Icon} from '@astryxdesign/core/Icon';
+import {Item} from '@astryxdesign/core/Item';
+import {HStack, VStack} from '@astryxdesign/core/Stack';
+import {Text} from '@astryxdesign/core/Text';
+import {
+  ArrowLeftIcon,
+  ArrowRightIcon,
+  ArrowUpIcon,
+  ArrowUturnLeftIcon,
+  FlagIcon,
+  MapPinIcon,
+} from '@heroicons/react/24/outline';
+
+// Half the viewport is a working surface — the sheet lays its content out at
+// that height and keeps a full scrim. The 96px stop is a peek: a sliver, so the
+// sheet slides away rather than reflowing into it, and the scrim thins.
+const SNAP_POINTS: ReadonlyArray<BottomSheetSnapPoint> = ['96px', '50%'];
+
+const steps = [
+  {
+    icon: MapPinIcon,
+    label: 'Head northeast on Mission St',
+    detail: 'Toward 3rd St',
+    distance: '350 ft',
+  },
+  {
+    icon: ArrowRightIcon,
+    label: 'Turn right onto 3rd St',
+    detail: 'Pass Yerba Buena Gardens on your left',
+    distance: '0.2 mi',
+  },
+  {
+    icon: ArrowUpIcon,
+    label: 'Continue onto Kearny St',
+    detail: 'Stay in the right lane',
+    distance: '0.4 mi',
+  },
+  {
+    icon: ArrowLeftIcon,
+    label: 'Turn left onto Market St',
+    detail: 'Cable car crossing ahead',
+    distance: '0.6 mi',
+  },
+  {
+    icon: ArrowRightIcon,
+    label: 'Bear right onto Sutter St',
+    detail: 'Toward the Financial District',
+    distance: '0.3 mi',
+  },
+  {
+    icon: ArrowUpIcon,
+    label: 'Continue on Sansome St',
+    detail: 'Four blocks, past Pine St',
+    distance: '0.5 mi',
+  },
+  {
+    icon: ArrowUturnLeftIcon,
+    label: 'Make a U-turn at Washington St',
+    detail: 'Construction detour until March',
+    distance: '150 ft',
+  },
+  {
+    icon: ArrowRightIcon,
+    label: 'Turn right onto Battery St',
+    detail: 'Follow signs for the Embarcadero',
+    distance: '0.4 mi',
+  },
+  {
+    icon: ArrowLeftIcon,
+    label: 'Turn left onto Sacramento St',
+    detail: 'Toward the waterfront',
+    distance: '0.2 mi',
+  },
+  {
+    icon: ArrowRightIcon,
+    label: 'Turn right onto The Embarcadero',
+    detail: 'Bay Bridge on your right',
+    distance: '0.5 mi',
+  },
+  {
+    icon: ArrowUpIcon,
+    label: 'Continue past Pier 14',
+    detail: 'Ferry terminal signage begins here',
+    distance: '0.3 mi',
+  },
+  {
+    icon: FlagIcon,
+    label: 'Arrive at the Ferry Building',
+    detail: 'Parking garage entrance on Washington St',
+    distance: '—',
+  },
+];
+
+export default function BottomSheetSnapPoints() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <>
+      <VStack gap={3} align="start">
+        <Text type="body">
+          This sheet has two extra stops: half the viewport, and a 96px peek.
+          Drag the handle down to collapse it, then back up — it rests at each
+          stop instead of following your finger.
+        </Text>
+        <Button label="Show directions" onClick={() => setIsOpen(true)} />
+      </VStack>
+      <BottomSheet
+        isOpen={isOpen}
+        onOpenChange={setIsOpen}
+        label="Directions to the Ferry Building"
+        height="tall"
+        snapPoints={SNAP_POINTS}>
+        <VStack gap={4} padding={4}>
+          <VStack gap={1}>
+            <Heading level={3}>Ferry Building</Heading>
+            <HStack gap={2}>
+              <Text type="label">18 min</Text>
+              <Text type="supporting">3.7 mi · arrive 9:41 AM</Text>
+            </HStack>
+          </VStack>
+          <Divider />
+          <VStack gap={0}>
+            {steps.map(step => (
+              <Item
+                key={step.label}
+                startContent={<Icon icon={step.icon} size="sm" />}
+                label={step.label}
+                description={step.detail}
+                endContent={<Text type="supporting">{step.distance}</Text>}
+              />
+            ))}
+          </VStack>
+          <Divider />
+          <Button
+            label="Start"
+            onClick={() => setIsOpen(false)}
+            variant="primary"
+          />
+        </VStack>
+      </BottomSheet>
+    </>
+  );
+}

package/assets/templates/blocks/components/BottomSheet/BottomSheetSwitcherShowcase.doc.mjs

@@ -0,0 +1,26 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('@astryxdesign/cli/authoring').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'BottomSheetSwitcher',
+  name: 'Bottom Sheet Switcher',
+  displayName: 'Bottom Sheet Switcher',
+  description:
+    'A three-step flow that transitions between content-hugging sheets of different heights inside one shared dialog.',
+  isReady: true,
+  isShowcase: true,
+  aspectRatio: 3 / 4,
+  componentsUsed: [
+    'BottomSheet',
+    'BottomSheetSwitcher',
+    'Button',
+    'CheckboxInput',
+    'Divider',
+    'Heading',
+    'RadioList',
+    'Section',
+    'Stack',
+    'Text',
+  ],
+};

package/assets/templates/blocks/components/BottomSheet/BottomSheetSwitcherShowcase.tsx

@@ -0,0 +1,221 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useState} from 'react';
+import {BottomSheet, BottomSheetSwitcher} from '@astryxdesign/core/BottomSheet';
+import {Button} from '@astryxdesign/core/Button';
+import {CheckboxInput} from '@astryxdesign/core/CheckboxInput';
+import {Divider} from '@astryxdesign/core/Divider';
+import {Heading} from '@astryxdesign/core/Heading';
+import {Section} from '@astryxdesign/core/Section';
+import {HStack, VStack} from '@astryxdesign/core/Stack';
+import {Text} from '@astryxdesign/core/Text';
+import {RadioList, RadioListItem} from '@astryxdesign/core/RadioList';
+
+type NotificationSheetHeight = 'hug' | 'capped';
+
+interface NotificationOverviewSheetProps {
+  height: NotificationSheetHeight;
+  onCancel: () => void;
+  onContinue: () => void;
+}
+
+function NotificationOverviewSheet({
+  height,
+  onCancel,
+  onContinue,
+}: NotificationOverviewSheetProps) {
+  return (
+    <BottomSheet
+      sheetId="overview"
+      label="Set up notifications"
+      height={height}>
+      <Section padding={4}>
+        <VStack gap={4}>
+          <VStack gap={1}>
+            <Heading level={3}>Set up notifications</Heading>
+            <Text type="supporting" color="secondary">
+              Step 1 of 3
+            </Text>
+          </VStack>
+          <Divider />
+          <Text type="supporting" color="secondary">
+            Stay informed about activity that matters without checking back
+            throughout the day.
+          </Text>
+          <VStack gap={3}>
+            <VStack gap={1}>
+              <Text type="label">Important activity</Text>
+              <Text type="supporting" color="secondary">
+                Know when someone mentions you or needs your attention.
+              </Text>
+            </VStack>
+            <VStack gap={1}>
+              <Text type="label">Timely reminders</Text>
+              <Text type="supporting" color="secondary">
+                Get a reminder before work reaches its due date.
+              </Text>
+            </VStack>
+            <VStack gap={1}>
+              <Text type="label">Useful summaries</Text>
+              <Text type="supporting" color="secondary">
+                Catch up on anything you may have missed.
+              </Text>
+            </VStack>
+          </VStack>
+          <HStack gap={2} hAlign="end">
+            <Button label="Cancel" variant="secondary" onClick={onCancel} />
+            <Button label="Continue" onClick={onContinue} />
+          </HStack>
+        </VStack>
+      </Section>
+    </BottomSheet>
+  );
+}
+
+interface NotificationFrequencySheetProps {
+  height: NotificationSheetHeight;
+  onBack: () => void;
+  onContinue: () => void;
+}
+
+function NotificationFrequencySheet({
+  height,
+  onBack,
+  onContinue,
+}: NotificationFrequencySheetProps) {
+  const [frequency, setFrequency] = useState('daily');
+
+  return (
+    <BottomSheet
+      sheetId="frequency"
+      label="Notification frequency"
+      height={height}>
+      <Section padding={4}>
+        <VStack gap={4}>
+          <VStack gap={1}>
+            <Heading level={3}>How often?</Heading>
+            <Text type="supporting" color="secondary">
+              Step 2 of 3
+            </Text>
+          </VStack>
+          <Divider />
+          <RadioList
+            label="Notification frequency"
+            isLabelHidden
+            value={frequency}
+            onChange={setFrequency}>
+            <RadioListItem label="Immediately" value="immediately" />
+            <RadioListItem label="Daily" value="daily" />
+            <RadioListItem label="Weekly" value="weekly" />
+          </RadioList>
+          <HStack gap={2} hAlign="end">
+            <Button label="Back" variant="secondary" onClick={onBack} />
+            <Button label="Continue" onClick={onContinue} />
+          </HStack>
+        </VStack>
+      </Section>
+    </BottomSheet>
+  );
+}
+
+interface NotificationChannelsSheetProps {
+  height: NotificationSheetHeight;
+  onBack: () => void;
+  onFinish: () => void;
+}
+
+function NotificationChannelsSheet({
+  height,
+  onBack,
+  onFinish,
+}: NotificationChannelsSheetProps) {
+  const [email, setEmail] = useState(true);
+  const [pushNotifications, setPushNotifications] = useState(true);
+  const [textMessages, setTextMessages] = useState(false);
+
+  return (
+    <BottomSheet
+      sheetId="channels"
+      label="Notification channels"
+      height={height}>
+      <Section padding={4}>
+        <VStack gap={4}>
+          <VStack gap={1}>
+            <Heading level={3}>Where should we notify you?</Heading>
+            <Text type="supporting" color="secondary">
+              Step 3 of 3
+            </Text>
+          </VStack>
+          <Divider />
+          <Text type="supporting" color="secondary">
+            Choose any combination. You can change these preferences later.
+          </Text>
+          <VStack gap={2}>
+            <CheckboxInput label="Email" value={email} onChange={setEmail} />
+            <CheckboxInput
+              label="Push notifications"
+              value={pushNotifications}
+              onChange={setPushNotifications}
+            />
+            <CheckboxInput
+              label="Text messages"
+              value={textMessages}
+              onChange={setTextMessages}
+            />
+          </VStack>
+          <HStack gap={2} hAlign="end">
+            <Button label="Back" variant="secondary" onClick={onBack} />
+            <Button label="Finish" onClick={onFinish} />
+          </HStack>
+        </VStack>
+      </Section>
+    </BottomSheet>
+  );
+}
+
+interface MultiStepSwitcherExampleProps {
+  height: NotificationSheetHeight;
+  hasScrim?: boolean;
+}
+
+function MultiStepSwitcherExample({
+  height,
+  hasScrim = true,
+}: MultiStepSwitcherExampleProps) {
+  const [activeSheet, setActiveSheet] = useState<string | null>(null);
+
+  return (
+    <>
+      <Button
+        label="Set up notifications"
+        onClick={() => setActiveSheet('overview')}
+      />
+      <BottomSheetSwitcher
+        activeSheet={activeSheet}
+        onActiveSheetChange={setActiveSheet}
+        hasScrim={hasScrim}>
+        <NotificationOverviewSheet
+          height={height}
+          onCancel={() => setActiveSheet(null)}
+          onContinue={() => setActiveSheet('frequency')}
+        />
+        <NotificationFrequencySheet
+          height={height}
+          onBack={() => setActiveSheet('overview')}
+          onContinue={() => setActiveSheet('channels')}
+        />
+        <NotificationChannelsSheet
+          height={height}
+          onBack={() => setActiveSheet('frequency')}
+          onFinish={() => setActiveSheet(null)}
+        />
+      </BottomSheetSwitcher>
+    </>
+  );
+}
+
+export default function BottomSheetSwitcherShowcase() {
+  return <MultiStepSwitcherExample height="hug" />;
+}

package/assets/theme.template.ts

@@ -105,12 +105,13 @@ export const myTheme = defineTheme({
   // ───────────────────────────────────────────────────────────────────────
 
   /**
-   * Generates the neutral ramp and the accent tokens from one seed colour
+   * Generates the neutral ramp and the accent tokens from a seed colour
    * using the HCT perceptual model: surfaces, text, icons, borders, muted
    * fills, hover and pressed overlays — light and dark both.
    *
-   *   accent        seed hex; omit to keep the default accent and re-tone only
-   *                 the neutrals
+   *   accent        seed hex, or a [light, dark] pair to seed each scheme's
+   *                 palette from its own colour; omit to keep the default
+   *                 accent and re-tone only the neutrals
    *   neutralStyle  'warm' | 'cool' | 'neutral' — the temperature of the greys
    *   contrast      'standard' | 'high' — 'high' widens the text/surface tone
    *                 gap, for dense data UI or bright and clinical screens

package/authoring/doctypes/base/type.ts

@@ -117,6 +117,15 @@ export interface ComponentPlaygroundConfig {
    *  the component is visible on load and knobs stay usable, whereas a real
    *  top-layer modal makes the rest of the page inert (#3657). */
   overlay?: boolean;
+  /** Override the controlled prop and open value used by an overlay preview.
+   *  Use with `overlay: true` when the component does not use `isOpen: true`
+   *  to represent its open state. */
+  overlayControl?: {
+    /** Controlled prop that determines whether the overlay is open. */
+    stateProp: string;
+    /** Value assigned to stateProp when the preview's open button is used. */
+    openValue: unknown;
+  };
   /** The component reads AppShell mobile context and renders nothing
    *  without it (e.g. `MobileNavToggle` returns null unless the context
    *  reports an enabled mobile viewport — the default value outside