@astryxdesign/cli 0.6.3-canary.ea2f048 → 0.6.3-canary.ee13359

package/assets/templates/blocks/components/ScrollableArea/ScrollableAreaShowcase.tsx

@@ -0,0 +1,86 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {ScrollableArea} from '@astryxdesign/core/ScrollableArea';
+import {Card} from '@astryxdesign/core/Card';
+import {Grid} from '@astryxdesign/core/Grid';
+import {VStack} from '@astryxdesign/core/Layout';
+import {Heading, Text} from '@astryxdesign/core/Text';
+
+const SECTIONS = [
+  {
+    label: 'Recently opened',
+    files: [
+      {id: 'brief', title: 'Q3 launch brief', meta: 'Edited 2 days ago'},
+      {id: 'pricing', title: 'Pricing rework', meta: 'Edited 3 days ago'},
+      {
+        id: 'onboarding',
+        title: 'Onboarding flow v4',
+        meta: 'Edited 4 days ago',
+      },
+      {id: 'macros', title: 'Support macros', meta: 'Edited last week'},
+    ],
+  },
+  {
+    label: 'Shared with you',
+    files: [
+      {id: 'brand', title: 'Brand refresh', meta: 'Priya Raman'},
+      {id: 'checkout', title: 'Checkout audit', meta: 'Tomas Lindqvist'},
+      {id: 'partner', title: 'Partner deck', meta: 'Ines Okafor'},
+      {id: 'research', title: 'Research synthesis', meta: 'Mei Watanabe'},
+    ],
+  },
+  {
+    label: 'Archived',
+    files: [
+      {id: 'roadmap', title: '2025 roadmap', meta: 'Archived in March'},
+      {id: 'legacy', title: 'Legacy pricing', meta: 'Archived in March'},
+      {id: 'kit', title: 'Old brand kit', meta: 'Archived in January'},
+      {id: 'beta', title: 'Beta feedback', meta: 'Archived in January'},
+    ],
+  },
+];
+
+export default function ScrollableAreaShowcase() {
+  return (
+    <Card width={380} padding={0}>
+      {/* The heading sits inside the viewport, so it scrolls away with the
+          content instead of staying pinned above it. */}
+      <ScrollableArea
+        axis="block"
+        role="region"
+        label="Workspace files"
+        height={300}
+        padding={4}>
+        <VStack gap={4}>
+          <VStack gap={0.5}>
+            <Heading level={3}>Workspace files</Heading>
+            <Text type="supporting">12 files across 3 sections</Text>
+          </VStack>
+          {SECTIONS.map(section => (
+            <VStack key={section.label} gap={2}>
+              <Text type="label" color="secondary">
+                {section.label}
+              </Text>
+              <Grid columns={2} gap={2}>
+                {section.files.map(file => (
+                  <Card key={file.id} variant="muted" padding={3}>
+                    <VStack gap={1}>
+                      <Text weight="medium" maxLines={1}>
+                        {file.title}
+                      </Text>
+                      <Text type="supporting" maxLines={1}>
+                        {file.meta}
+                      </Text>
+                    </VStack>
+                  </Card>
+                ))}
+              </Grid>
+            </VStack>
+          ))}
+        </VStack>
+      </ScrollableArea>
+    </Card>
+  );
+}

package/assets/templates/blocks/components/ScrollableArea/ScrollableAreaStickyGroupHeaders.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: 'ScrollableArea',
+  name: 'ScrollableArea — Sticky Section Labels',
+  displayName: 'Scrollable Area — Sticky Section Labels',
+  description:
+    'A scrollable viewport is the containing block for position: sticky, so section labels pin to the top edge of the list instead of the page.',
+  isReady: true,
+  aspectRatio: 1,
+  componentsUsed: ['ScrollableArea', 'Card', 'Grid'],
+};

package/assets/templates/blocks/components/ScrollableArea/ScrollableAreaStickyGroupHeaders.tsx

@@ -0,0 +1,99 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import * as stylex from '@stylexjs/stylex';
+import {ScrollableArea} from '@astryxdesign/core/ScrollableArea';
+import {Card} from '@astryxdesign/core/Card';
+import {Grid} from '@astryxdesign/core/Grid';
+import {VStack} from '@astryxdesign/core/Layout';
+import {Heading, Text} from '@astryxdesign/core/Text';
+import {colorVars, spacingVars} from '@astryxdesign/core/theme/tokens.stylex';
+
+const styles = stylex.create({
+  sectionLabel: {
+    position: 'sticky',
+    insetBlockStart: 0,
+    zIndex: 1,
+    backgroundColor: colorVars['--color-background-card'],
+    paddingBlock: spacingVars['--spacing-2'],
+  },
+});
+
+const SECTIONS = [
+  {
+    label: 'Recently opened',
+    files: [
+      {id: 'brief', title: 'Q3 launch brief', meta: 'Edited 2 days ago'},
+      {id: 'pricing', title: 'Pricing rework', meta: 'Edited 3 days ago'},
+      {
+        id: 'onboarding',
+        title: 'Onboarding flow v4',
+        meta: 'Edited 4 days ago',
+      },
+      {id: 'macros', title: 'Support macros', meta: 'Edited last week'},
+    ],
+  },
+  {
+    label: 'Shared with you',
+    files: [
+      {id: 'brand', title: 'Brand refresh', meta: 'Priya Raman'},
+      {id: 'checkout', title: 'Checkout audit', meta: 'Tomas Lindqvist'},
+      {id: 'partner', title: 'Partner deck', meta: 'Ines Okafor'},
+      {id: 'research', title: 'Research synthesis', meta: 'Mei Watanabe'},
+    ],
+  },
+  {
+    label: 'Archived',
+    files: [
+      {id: 'roadmap', title: '2025 roadmap', meta: 'Archived in March'},
+      {id: 'legacy', title: 'Legacy pricing', meta: 'Archived in March'},
+      {id: 'kit', title: 'Old brand kit', meta: 'Archived in January'},
+      {id: 'beta', title: 'Beta feedback', meta: 'Archived in January'},
+    ],
+  },
+];
+
+export default function ScrollableAreaStickyGroupHeaders() {
+  return (
+    <Card width={380} padding={0}>
+      {/* The viewport is the containing block for position: sticky. The panel
+          heading is ordinary content and scrolls away; the section labels
+          below it pin to the top of the list, not the page. */}
+      <ScrollableArea
+        axis="block"
+        role="region"
+        label="Workspace files"
+        height={300}
+        padding={4}>
+        <VStack gap={0.5} paddingBlockEnd={2}>
+          <Heading level={3}>Workspace files</Heading>
+          <Text type="supporting">12 files across 3 sections</Text>
+        </VStack>
+        {SECTIONS.map(section => (
+          <section key={section.label}>
+            <div {...stylex.props(styles.sectionLabel)}>
+              <Text type="label" color="secondary">
+                {section.label}
+              </Text>
+            </div>
+            <Grid columns={2} gap={2}>
+              {section.files.map(file => (
+                <Card key={file.id} variant="muted" padding={3}>
+                  <VStack gap={1}>
+                    <Text weight="medium" maxLines={1}>
+                      {file.title}
+                    </Text>
+                    <Text type="supporting" maxLines={1}>
+                      {file.meta}
+                    </Text>
+                  </VStack>
+                </Card>
+              ))}
+            </Grid>
+          </section>
+        ))}
+      </ScrollableArea>
+    </Card>
+  );
+}

package/assets/templates/blocks/components/ScrollableArea/ScrollableAreaStickyPassthrough.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: 'ScrollableArea',
+  name: 'ScrollableArea — Sticky Passthrough',
+  displayName: 'Scrollable Area — Sticky Passthrough',
+  description:
+    'A section whose content fits clips instead of scrolling, so its sticky label passes outward and pins to the panel edge. The next section sets stickyContainment="always" and keeps its label in its own box.',
+  isReady: true,
+  aspectRatio: 1,
+  componentsUsed: ['ScrollableArea', 'Card', 'Grid'],
+};

package/assets/templates/blocks/components/ScrollableArea/ScrollableAreaStickyPassthrough.tsx

@@ -0,0 +1,122 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import * as stylex from '@stylexjs/stylex';
+import {ScrollableArea} from '@astryxdesign/core/ScrollableArea';
+import {Card} from '@astryxdesign/core/Card';
+import {Grid} from '@astryxdesign/core/Grid';
+import {VStack} from '@astryxdesign/core/Layout';
+import {Heading, Text} from '@astryxdesign/core/Text';
+import {colorVars, spacingVars} from '@astryxdesign/core/theme/tokens.stylex';
+
+const styles = stylex.create({
+  sectionLabel: {
+    position: 'sticky',
+    insetBlockStart: 0,
+    zIndex: 1,
+    backgroundColor: colorVars['--color-background-card'],
+    paddingBlock: spacingVars['--spacing-2'],
+  },
+});
+
+const SHARED = [
+  {id: 'brand', title: 'Brand refresh', meta: 'Priya Raman'},
+  {id: 'checkout', title: 'Checkout audit', meta: 'Tomas Lindqvist'},
+  {id: 'partner', title: 'Partner deck', meta: 'Ines Okafor'},
+  {id: 'research', title: 'Research synthesis', meta: 'Mei Watanabe'},
+  {id: 'tax', title: 'Tax region notes', meta: 'Hugo Bernard'},
+  {id: 'sso', title: 'SSO rollout plan', meta: 'Sofia Marchetti'},
+];
+
+const TEMPLATES = [
+  {id: 'weekly', title: 'Weekly report', meta: 'Used 24 times'},
+  {id: 'checklist', title: 'Launch checklist', meta: 'Used 18 times'},
+  {id: 'review', title: 'Design review', meta: 'Used 11 times'},
+  {id: 'retro', title: 'Retro board', meta: 'Used 9 times'},
+  {id: 'brief', title: 'Project brief', meta: 'Used 7 times'},
+  {id: 'postmortem', title: 'Postmortem', meta: 'Used 4 times'},
+];
+
+const ARCHIVED = [
+  {id: 'roadmap', title: '2025 roadmap', meta: 'Archived in March'},
+  {id: 'legacy', title: 'Legacy pricing', meta: 'Archived in March'},
+  {id: 'kit', title: 'Old brand kit', meta: 'Archived in January'},
+  {id: 'beta', title: 'Beta feedback', meta: 'Archived in January'},
+  {id: 'survey', title: 'Q4 survey results', meta: 'Archived in January'},
+  {id: 'offsite', title: 'Offsite agenda', meta: 'Archived last year'},
+];
+
+function FileGrid({
+  files,
+}: {
+  files: Array<{id: string; title: string; meta: string}>;
+}) {
+  return (
+    <Grid columns={2} gap={2}>
+      {files.map(file => (
+        <Card key={file.id} variant="muted" padding={3}>
+          <VStack gap={1}>
+            <Text weight="medium" maxLines={1}>
+              {file.title}
+            </Text>
+            <Text type="supporting" maxLines={1}>
+              {file.meta}
+            </Text>
+          </VStack>
+        </Card>
+      ))}
+    </Grid>
+  );
+}
+
+export default function ScrollableAreaStickyPassthrough() {
+  return (
+    <Card width={400} padding={0}>
+      <ScrollableArea
+        axis="block"
+        role="region"
+        label="Workspace files"
+        height={300}
+        padding={4}>
+        <VStack gap={0.5} paddingBlockEnd={2}>
+          <Heading level={3}>Workspace files</Heading>
+          <Text type="supporting">18 files across 3 sections</Text>
+        </VStack>
+
+        {/* This section's content fits, so its viewport clips instead of
+            scrolling and never becomes the Sticky boundary: the label
+            passes outward and pins to the panel's edge. */}
+        <ScrollableArea axis="block" label="Shared with you">
+          <div {...stylex.props(styles.sectionLabel)}>
+            <Text type="label" color="secondary">
+              Shared with you
+            </Text>
+          </div>
+          <FileGrid files={SHARED} />
+        </ScrollableArea>
+
+        {/* Same fitting content, but containment is explicit: this viewport
+            stays the Sticky boundary, so its label leaves with the box. */}
+        <ScrollableArea
+          axis="block"
+          label="Templates"
+          stickyContainment="always">
+          <div {...stylex.props(styles.sectionLabel)}>
+            <Text type="label" color="secondary">
+              Templates
+            </Text>
+          </div>
+          <FileGrid files={TEMPLATES} />
+        </ScrollableArea>
+
+        <div {...stylex.props(styles.sectionLabel)}>
+          <Text type="label" color="secondary">
+            Archived
+          </Text>
+        </div>
+        <FileGrid files={ARCHIVED} />
+      </ScrollableArea>
+    </Card>
+  );
+}

package/assets/templates/blocks/components/ScrollableArea/ScrollableAreaTwoAxisBoard.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: 'ScrollableArea',
+  name: 'ScrollableArea — Two-Axis Board',
+  displayName: 'Scrollable Area — Two-Axis Board',
+  description:
+    'axis="both" gives the content box max-content inline sizing, so a board wider and taller than its panel scrolls on both axes from one viewport.',
+  isReady: true,
+  aspectRatio: 1,
+  componentsUsed: ['ScrollableArea', 'Card', 'Grid'],
+};

package/assets/templates/blocks/components/ScrollableArea/ScrollableAreaTwoAxisBoard.tsx

@@ -0,0 +1,95 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {ScrollableArea} from '@astryxdesign/core/ScrollableArea';
+import {Card} from '@astryxdesign/core/Card';
+import {HStack, VStack} from '@astryxdesign/core/Layout';
+import {Heading, Text} from '@astryxdesign/core/Text';
+
+const COLUMNS = [
+  {
+    label: 'Recently opened',
+    files: [
+      {id: 'brief', title: 'Q3 launch brief', meta: 'Edited 2 days ago'},
+      {id: 'pricing', title: 'Pricing rework', meta: 'Edited 3 days ago'},
+      {
+        id: 'onboarding',
+        title: 'Onboarding flow v4',
+        meta: 'Edited 4 days ago',
+      },
+      {id: 'macros', title: 'Support macros', meta: 'Edited last week'},
+    ],
+  },
+  {
+    label: 'Shared with you',
+    files: [
+      {id: 'brand', title: 'Brand refresh', meta: 'Priya Raman'},
+      {id: 'checkout', title: 'Checkout audit', meta: 'Tomas Lindqvist'},
+      {id: 'partner', title: 'Partner deck', meta: 'Ines Okafor'},
+      {id: 'research', title: 'Research synthesis', meta: 'Mei Watanabe'},
+    ],
+  },
+  {
+    label: 'Templates',
+    files: [
+      {id: 'weekly', title: 'Weekly report', meta: 'Used 24 times'},
+      {id: 'checklist', title: 'Launch checklist', meta: 'Used 18 times'},
+      {id: 'review', title: 'Design review', meta: 'Used 11 times'},
+      {id: 'retro', title: 'Retro board', meta: 'Used 9 times'},
+    ],
+  },
+  {
+    label: 'Archived',
+    files: [
+      {id: 'roadmap', title: '2025 roadmap', meta: 'Archived in March'},
+      {id: 'legacy', title: 'Legacy pricing', meta: 'Archived in March'},
+      {id: 'kit', title: 'Old brand kit', meta: 'Archived in January'},
+      {id: 'beta', title: 'Beta feedback', meta: 'Archived in January'},
+    ],
+  },
+];
+
+export default function ScrollableAreaTwoAxisBoard() {
+  return (
+    <Card width={420} padding={0}>
+      {/* axis="both" gives the content box max-content inline sizing, so the
+          board is free to be wider than the viewport on both axes. The
+          heading is inside that box and travels with it. */}
+      <ScrollableArea
+        axis="both"
+        role="region"
+        label="Workspace board"
+        height={300}
+        padding={4}>
+        <VStack gap={4}>
+          <VStack gap={0.5}>
+            <Heading level={3}>Workspace board</Heading>
+            <Text type="supporting">16 files across 4 sections</Text>
+          </VStack>
+          <HStack gap={3} vAlign="start">
+            {COLUMNS.map(column => (
+              <VStack key={column.label} gap={2} width={180}>
+                <Text type="label" color="secondary">
+                  {column.label}
+                </Text>
+                {column.files.map(file => (
+                  <Card key={file.id} variant="muted" padding={3}>
+                    <VStack gap={1}>
+                      <Text weight="medium" maxLines={1}>
+                        {file.title}
+                      </Text>
+                      <Text type="supporting" maxLines={1}>
+                        {file.meta}
+                      </Text>
+                    </VStack>
+                  </Card>
+                ))}
+              </VStack>
+            ))}
+          </HStack>
+        </VStack>
+      </ScrollableArea>
+    </Card>
+  );
+}

package/assets/templates/blocks/components/TimeInput/TimeInputConstrained.tsx

@@ -17,6 +17,7 @@ export default function TimeInputConstrained() {
         max={'22:00' as never}
         description="Evening seating: 5 PM – 10 PM"
         placeholder="Select reservation time"
+        presentation="adaptive-bottom-sheet"
         value={evening as never}
         onChange={setEvening as never}
         hasClear