@astryxdesign/cli 0.4.4 → 0.4.5-canary.1fdecb1

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/Selector/SelectorOptionDescriptions.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: 'Selector',
+  name: 'Selector — Option descriptions',
+  displayName: 'Selector — Option descriptions',
+  description:
+    'Options carry a description, so the dropdown draws a two-line row. The closed trigger is sized by padding, so it is the size token for a one-line value and exactly one line taller for a two-line one — both on the 4px rhythm. An InputGroup pins the row, so the value folds back onto one line there.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['Selector', 'SelectorOption', 'InputGroup', 'Button', 'Stack'],
+};

package/assets/templates/blocks/components/Selector/SelectorOptionDescriptions.tsx

@@ -0,0 +1,76 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useState} from 'react';
+import {Selector, SelectorOption} from '@astryxdesign/core/Selector';
+import {InputGroup} from '@astryxdesign/core/InputGroup';
+import {Button} from '@astryxdesign/core/Button';
+import {Stack} from '@astryxdesign/core/Layout';
+import {LockClosedIcon, GlobeAltIcon} from '@heroicons/react/24/outline';
+
+const VISIBILITY = [
+  {
+    value: 'private',
+    label: 'Private',
+    icon: LockClosedIcon,
+    description: 'Only members can access this space and its content.',
+  },
+  {
+    value: 'public',
+    label: 'Public',
+    icon: GlobeAltIcon,
+    description: 'Anyone at the company can find and join this space.',
+  },
+];
+
+export default function SelectorOptionDescriptions() {
+  const [condensed, setCondensed] = useState<string | undefined>('private');
+  const [full, setFull] = useState<string | undefined>('private');
+  const [grouped, setGrouped] = useState<string | undefined>('private');
+
+  return (
+    <Stack direction="vertical" gap={6}>
+      <Selector
+        style={{width: 320}}
+        label="Visibility"
+        description="Default trigger: one line at the size token."
+        options={VISIBILITY}
+        value={condensed}
+        onChange={setCondensed}
+      />
+      <Selector
+        style={{width: 320}}
+        label="Visibility"
+        description="A stacked SelectorOption: the description gets its own line, and the trigger grows by exactly one line."
+        options={VISIBILITY}
+        value={full}
+        onChange={setFull}
+        renderValue={option => (
+          <SelectorOption
+            icon={option.icon}
+            label={option.label ?? option.value}
+            description={option.description}
+          />
+        )}
+      />
+      <InputGroup label="Visibility">
+        <Selector
+          label="Visibility"
+          isLabelHidden
+          options={VISIBILITY}
+          value={grouped}
+          onChange={setGrouped}
+          renderValue={option => (
+            <SelectorOption
+              icon={option.icon}
+              label={option.label ?? option.value}
+              description={option.description}
+            />
+          )}
+        />
+        <Button label="Save" />
+      </InputGroup>
+    </Stack>
+  );
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/cli",
-  "version": "0.4.4",
+  "version": "0.4.5-canary.1fdecb1",
   "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": "*",
-    "@astryxdesign/core": "*",
-    "@astryxdesign/lab": "*",
-    "@astryxdesign/theme-neutral": "*",
+    "@astryxdesign/charts": "0.4.5-canary.1fdecb1",
+    "@astryxdesign/core": "0.4.5-canary.1fdecb1",
+    "@astryxdesign/lab": "0.4.5-canary.1fdecb1",
+    "@astryxdesign/theme-neutral": "0.4.5-canary.1fdecb1",
     "gpt-tokenizer": "^3.4.0"
   },
   "peerDependenciesMeta": {
@@ -108,10 +108,10 @@
     }
   },
   "devDependencies": {
-    "@astryxdesign/charts": "*",
-    "@astryxdesign/core": "*",
-    "@astryxdesign/lab": "*",
-    "@astryxdesign/theme-neutral": "*",
+    "@astryxdesign/charts": "0.4.5-canary.1fdecb1",
+    "@astryxdesign/core": "0.4.5-canary.1fdecb1",
+    "@astryxdesign/lab": "0.4.5-canary.1fdecb1",
+    "@astryxdesign/theme-neutral": "0.4.5-canary.1fdecb1",
     "gpt-tokenizer": "^3.4.0"
   },
   "scripts": {