@astryxdesign/cli 0.4.3-canary.915a7aa → 0.4.3-canary.a7b6045

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

@@ -0,0 +1,21 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('@astryxdesign/cli/authoring').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'BottomSheet',
+  name: 'Bottom Sheet — Height variants',
+  displayName: 'Bottom Sheet — Height variants',
+  description:
+    'Compares hug, capped, and tall starting heights for different amounts of content.',
+  isReady: true,
+  aspectRatio: 3 / 4,
+  componentsUsed: [
+    'BottomSheet',
+    'Button',
+    'Divider',
+    'Heading',
+    'Stack',
+    'Text',
+  ],
+};

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

@@ -0,0 +1,46 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useState} from 'react';
+import {
+  BottomSheet,
+  type BottomSheetHeight,
+} from '@astryxdesign/core/BottomSheet';
+import {Button} from '@astryxdesign/core/Button';
+import {Divider} from '@astryxdesign/core/Divider';
+import {Heading} from '@astryxdesign/core/Heading';
+import {HStack, VStack} from '@astryxdesign/core/Stack';
+import {Text} from '@astryxdesign/core/Text';
+
+const descriptions: Record<BottomSheetHeight, string> = {
+  hug: 'Hug fits short, bounded content.',
+  capped: 'Capped starts at a comfortable mid-height for lists and filters.',
+  tall: 'Tall reserves most of the viewport for long or changing content.',
+};
+
+export default function BottomSheetHeights() {
+  const [height, setHeight] = useState<BottomSheetHeight | null>(null);
+
+  return (
+    <>
+      <HStack gap={2} wrap="wrap">
+        <Button label="Open hug" onClick={() => setHeight('hug')} />
+        <Button label="Open capped" onClick={() => setHeight('capped')} />
+        <Button label="Open tall" onClick={() => setHeight('tall')} />
+      </HStack>
+      <BottomSheet
+        isOpen={height != null}
+        onOpenChange={isOpen => !isOpen && setHeight(null)}
+        label={`${height ?? 'Hug'} height`}
+        height={height ?? 'hug'}>
+        <VStack gap={4} style={{padding: 'var(--spacing-4)'}}>
+          <Heading level={3}>{height ?? 'Hug'} height</Heading>
+          <Divider />
+          <Text type="body">{descriptions[height ?? 'hug']}</Text>
+          <Button label="Close" onClick={() => setHeight(null)} />
+        </VStack>
+      </BottomSheet>
+    </>
+  );
+}

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

@@ -0,0 +1,23 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('@astryxdesign/cli/authoring').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'BottomSheet',
+  name: 'Bottom Sheet — Mobile keyboard',
+  displayName: 'Bottom Sheet — Mobile keyboard',
+  description:
+    'Uses a tall, scrollable form that keeps focused controls visible above the mobile keyboard.',
+  isReady: true,
+  aspectRatio: 3 / 4,
+  componentsUsed: [
+    'BottomSheet',
+    'Button',
+    'Divider',
+    'Heading',
+    'Stack',
+    'Text',
+    'TextArea',
+    'TextInput',
+  ],
+};

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

@@ -0,0 +1,100 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useState} from 'react';
+import {BottomSheet} from '@astryxdesign/core/BottomSheet';
+import {Button} from '@astryxdesign/core/Button';
+import {Divider} from '@astryxdesign/core/Divider';
+import {Heading} from '@astryxdesign/core/Heading';
+import {VStack} from '@astryxdesign/core/Stack';
+import {Text} from '@astryxdesign/core/Text';
+import {TextArea} from '@astryxdesign/core/TextArea';
+import {TextInput} from '@astryxdesign/core/TextInput';
+
+interface ProfileFormValues {
+  name: string;
+  email: string;
+  company: string;
+  role: string;
+  bio: string;
+  notes: string;
+}
+
+const initialValues: ProfileFormValues = {
+  name: '',
+  email: '',
+  company: '',
+  role: '',
+  bio: '',
+  notes: '',
+};
+
+export default function BottomSheetMobileKeyboard() {
+  const [isOpen, setIsOpen] = useState(false);
+  const [values, setValues] = useState(initialValues);
+  const update =
+    (field: keyof ProfileFormValues) =>
+    (value: string): void =>
+      setValues(current => ({...current, [field]: value}));
+
+  return (
+    <>
+      <Button label="Edit profile" onClick={() => setIsOpen(true)} />
+      <BottomSheet
+        isOpen={isOpen}
+        onOpenChange={setIsOpen}
+        label="Edit profile"
+        height="tall">
+        <form
+          onSubmit={event => {
+            event.preventDefault();
+            setIsOpen(false);
+          }}>
+          <VStack gap={4} style={{padding: 'var(--spacing-4)'}}>
+            <Heading level={3}>Edit profile</Heading>
+            <Divider />
+            <Text type="supporting" color="secondary">
+              Focus fields throughout the form to see them remain visible above
+              the mobile keyboard.
+            </Text>
+            <TextInput
+              label="Name"
+              value={values.name}
+              onChange={update('name')}
+            />
+            <TextInput
+              label="Email"
+              type="email"
+              value={values.email}
+              onChange={update('email')}
+            />
+            <TextInput
+              label="Company"
+              value={values.company}
+              onChange={update('company')}
+            />
+            <TextInput
+              label="Role"
+              value={values.role}
+              onChange={update('role')}
+            />
+            <TextArea
+              label="Bio"
+              rows={5}
+              value={values.bio}
+              onChange={update('bio')}
+            />
+            <TextArea
+              label="Notes"
+              rows={5}
+              value={values.notes}
+              onChange={update('notes')}
+            />
+            <Button label="Save profile" type="submit" />
+          </VStack>
+        </form>
+      </BottomSheet>
+    </>
+  );
+}

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

@@ -0,0 +1,22 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('@astryxdesign/cli/authoring').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'BottomSheet',
+  name: 'Bottom Sheet — No scrim',
+  displayName: 'Bottom Sheet — No scrim',
+  description:
+    'Keeps the page visible and interactive behind a non-modal bottom sheet.',
+  isReady: true,
+  aspectRatio: 3 / 4,
+  componentsUsed: [
+    'BottomSheet',
+    'Button',
+    'Divider',
+    'Heading',
+    'Section',
+    'Stack',
+    'Text',
+  ],
+};

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

@@ -0,0 +1,47 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useState} from 'react';
+import {BottomSheet} from '@astryxdesign/core/BottomSheet';
+import {Button} from '@astryxdesign/core/Button';
+import {Divider} from '@astryxdesign/core/Divider';
+import {Heading} from '@astryxdesign/core/Heading';
+import {Section} from '@astryxdesign/core/Section';
+import {VStack} from '@astryxdesign/core/Stack';
+import {Text} from '@astryxdesign/core/Text';
+
+export default function BottomSheetNoScrim() {
+  const [isOpen, setIsOpen] = useState(false);
+  const [backgroundClicks, setBackgroundClicks] = useState(0);
+
+  return (
+    <Section padding={4}>
+      <VStack gap={3}>
+        <Heading level={3}>Nearby places</Heading>
+        <Text type="body">Background interactions: {backgroundClicks}</Text>
+        <Button
+          label="Interact with page"
+          variant="secondary"
+          onClick={() => setBackgroundClicks(count => count + 1)}
+        />
+        <Button label="Show place details" onClick={() => setIsOpen(true)} />
+      </VStack>
+      <BottomSheet
+        isOpen={isOpen}
+        onOpenChange={setIsOpen}
+        label="Place details"
+        height="hug"
+        hasScrim={false}>
+        <VStack gap={4} style={{padding: 'var(--spacing-4)'}}>
+          <Heading level={3}>Central Park</Heading>
+          <Divider />
+          <Text type="body">
+            The page remains visible and interactive behind this sheet.
+          </Text>
+          <Button label="Close details" onClick={() => setIsOpen(false)} />
+        </VStack>
+      </BottomSheet>
+    </Section>
+  );
+}

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

@@ -0,0 +1,22 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('@astryxdesign/cli/authoring').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'BottomSheet',
+  name: 'Bottom Sheet',
+  displayName: 'Bottom Sheet',
+  description: 'A mobile filter surface that rises from the bottom edge.',
+  isReady: true,
+  isShowcase: true,
+  aspectRatio: 3 / 4,
+  componentsUsed: [
+    'BottomSheet',
+    'Button',
+    'CheckboxInput',
+    'Divider',
+    'Heading',
+    'Section',
+    'Stack',
+  ],
+};

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

@@ -0,0 +1,36 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useState} from 'react';
+import {BottomSheet} 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 {VStack} from '@astryxdesign/core/Stack';
+
+export default function BottomSheetShowcase() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <>
+      <Button label="Open sheet" onClick={() => setIsOpen(true)} />
+      <BottomSheet isOpen={isOpen} onOpenChange={setIsOpen} label="Filters">
+        <Section padding={4}>
+          <VStack gap={4}>
+            <Heading level={3}>Filters</Heading>
+            <Divider />
+            <VStack gap={2}>
+              <CheckboxInput label="In stock" value={false} />
+              <CheckboxInput label="On sale" value={false} />
+              <CheckboxInput label="Free shipping" value={false} />
+            </VStack>
+            <Button label="Apply" onClick={() => setIsOpen(false)} />
+          </VStack>
+        </Section>
+      </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/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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/cli",
-  "version": "0.4.3-canary.915a7aa",
+  "version": "0.4.3-canary.a7b6045",
   "displayName": "CLI",
   "description": "Scaffold projects, browse templates, generate themes, and get agent-ready docs from the command line.",
   "author": "Meta Open Source",
@@ -87,10 +87,10 @@
     "zod": "^4.4.3"
   },
   "peerDependencies": {
-    "@astryxdesign/charts": "0.4.3-canary.915a7aa",
-    "@astryxdesign/core": "0.4.3-canary.915a7aa",
-    "@astryxdesign/lab": "0.4.3-canary.915a7aa",
-    "@astryxdesign/theme-neutral": "0.4.3-canary.915a7aa",
+    "@astryxdesign/charts": "0.4.3-canary.a7b6045",
+    "@astryxdesign/core": "0.4.3-canary.a7b6045",
+    "@astryxdesign/lab": "0.4.3-canary.a7b6045",
+    "@astryxdesign/theme-neutral": "0.4.3-canary.a7b6045",
     "gpt-tokenizer": "^3.4.0"
   },
   "peerDependenciesMeta": {
@@ -108,10 +108,10 @@
     }
   },
   "devDependencies": {
-    "@astryxdesign/charts": "0.4.3-canary.915a7aa",
-    "@astryxdesign/core": "0.4.3-canary.915a7aa",
-    "@astryxdesign/lab": "0.4.3-canary.915a7aa",
-    "@astryxdesign/theme-neutral": "0.4.3-canary.915a7aa",
+    "@astryxdesign/charts": "0.4.3-canary.a7b6045",
+    "@astryxdesign/core": "0.4.3-canary.a7b6045",
+    "@astryxdesign/lab": "0.4.3-canary.a7b6045",
+    "@astryxdesign/theme-neutral": "0.4.3-canary.a7b6045",
     "gpt-tokenizer": "^3.4.0"
   },
   "scripts": {