@astryxdesign/cli 0.3.0-canary.fbc60c5 → 0.3.0-canary.fcbc342

package/assets/templates/blocks/components/Avatar/AvatarTooltip.tsx

@@ -15,17 +15,17 @@ export default function AvatarTooltip() {
         </Text>
         <Stack direction="horizontal" gap={4} vAlign="center">
           <Avatar
-            src="https://lookaside.facebook.com/assets/astryx/DATA-Ana-Thomas.png"
+            src="/template-assets/DATA-Ana-Thomas.png"
             name="Ana Thomas"
             size="xl"
           />
           <Avatar
-            src="https://lookaside.facebook.com/assets/astryx/DATA-Drew-Young.png"
+            src="/template-assets/DATA-Drew-Young.png"
             name="Drew Young"
             size="xl"
           />
           <Avatar
-            src="https://lookaside.facebook.com/assets/astryx/DATA-Jihoo-Song.png"
+            src="/template-assets/DATA-Jihoo-Song.png"
             name="Jihoo Song"
             size="xl"
           />
@@ -36,7 +36,7 @@ export default function AvatarTooltip() {
           Custom tooltip text
         </Text>
         <Avatar
-          src="https://lookaside.facebook.com/assets/astryx/DATA-Itai-Jordaan.png"
+          src="/template-assets/DATA-Itai-Jordaan.png"
           name="Itai Jordaan"
           size="xl"
           tooltip="Itai Jordaan · Engineering Lead"

package/assets/templates/blocks/components/Avatar/AvatarUserCard.tsx

@@ -9,19 +9,19 @@ import {Text} from '@astryxdesign/core/Text';
 const USERS = [
   {
     name: 'Itai Jordaan',
-    src: 'https://lookaside.facebook.com/assets/astryx/DATA-Itai-Jordaan.png',
+    src: '/template-assets/DATA-Itai-Jordaan.png',
     role: 'Engineering Lead',
     variant: 'success' as const,
   },
   {
     name: 'Margot Schroder',
-    src: 'https://lookaside.facebook.com/assets/astryx/DATA-Margot-Schroder.png',
+    src: '/template-assets/DATA-Margot-Schroder.png',
     role: 'Product Designer',
     variant: 'neutral' as const,
   },
   {
     name: 'Daniela Gimenez',
-    src: 'https://lookaside.facebook.com/assets/astryx/DATA-Daniela-Gimenez.png',
+    src: '/template-assets/DATA-Daniela-Gimenez.png',
     role: 'Engineering Manager',
     variant: 'error' as const,
   },

package/assets/templates/blocks/components/Avatar/AvatarWithImage.tsx

@@ -9,22 +9,22 @@ export default function AvatarWithImage() {
   return (
     <Stack direction="horizontal" gap={4} vAlign="center">
       <Avatar
-        src="https://lookaside.facebook.com/assets/astryx/DATA-Ami-Pena.png"
+        src="/template-assets/DATA-Ami-Pena.png"
         name="Ami Pena"
         size="xsm"
       />
       <Avatar
-        src="https://lookaside.facebook.com/assets/astryx/DATA-Ana-Thomas.png"
+        src="/template-assets/DATA-Ana-Thomas.png"
         name="Ana Thomas"
         size="md"
       />
       <Avatar
-        src="https://lookaside.facebook.com/assets/astryx/DATA-Daniela-Gimenez.png"
+        src="/template-assets/DATA-Daniela-Gimenez.png"
         name="Daniela Gimenez"
         size="lg"
       />
       <Avatar
-        src="https://lookaside.facebook.com/assets/astryx/DATA-Gabriela-Fernandez.png"
+        src="/template-assets/DATA-Gabriela-Fernandez.png"
         name="Gabriela Fernandez"
         size="xl"
       />

package/assets/templates/blocks/components/Avatar/AvatarWithStatus.tsx

@@ -9,19 +9,19 @@ export default function AvatarWithStatus() {
   return (
     <Stack direction="horizontal" gap={4} vAlign="center">
       <Avatar
-        src="https://lookaside.facebook.com/assets/astryx/DATA-Itai-Jordaan.png"
+        src="/template-assets/DATA-Itai-Jordaan.png"
         name="Itai Jordaan"
         size="xl"
         status={<AvatarStatusDot variant="success" label="Online" />}
       />
       <Avatar
-        src="https://lookaside.facebook.com/assets/astryx/DATA-Margot-Schroder.png"
+        src="/template-assets/DATA-Margot-Schroder.png"
         name="Margot Schroder"
         size="xl"
         status={<AvatarStatusDot variant="neutral" label="Offline" />}
       />
       <Avatar
-        src="https://lookaside.facebook.com/assets/astryx/DATA-Pablo-Morales.png"
+        src="/template-assets/DATA-Pablo-Morales.png"
         name="Pablo Morales"
         size="xl"
         status={<AvatarStatusDot variant="error" label="Busy" />}

package/assets/templates/blocks/components/ChatComposerDrawer/ChatComposerDrawerAttachments.tsx

@@ -11,31 +11,31 @@ import {Stack} from '@astryxdesign/core/Layout';
 const IMAGE_ATTACHMENTS = [
   {
     id: '1',
-    src: 'https://lookaside.facebook.com/assets/astryx/illustrative-vertical-1.png',
+    src: '/template-assets/illustrative-vertical-1.png',
     alt: 'River through a valley',
     label: 'valley.jpg',
   },
   {
     id: '2',
-    src: 'https://lookaside.facebook.com/assets/astryx/illustrative-vertical-2.png',
+    src: '/template-assets/illustrative-vertical-2.png',
     alt: 'Foggy mountain peak',
     label: 'mountain.jpg',
   },
   {
     id: '3',
-    src: 'https://lookaside.facebook.com/assets/astryx/illustrative-vertical-3.png',
+    src: '/template-assets/illustrative-vertical-3.png',
     alt: 'Golden retriever puppy',
     label: 'puppy.jpg',
   },
   {
     id: '4',
-    src: 'https://lookaside.facebook.com/assets/astryx/illustrative-vertical-4.png',
+    src: '/template-assets/illustrative-vertical-4.png',
     alt: 'Bridge at sunset',
     label: 'bridge.jpg',
   },
   {
     id: '5',
-    src: 'https://lookaside.facebook.com/assets/astryx/illustrative-vertical-5.png',
+    src: '/template-assets/illustrative-vertical-5.png',
     alt: 'Lakeside at dusk',
     label: 'lakeside.jpg',
   },

package/assets/templates/blocks/components/Lightbox/LightboxGallery.tsx

@@ -8,23 +8,23 @@ import {Thumbnail} from '@astryxdesign/core/Thumbnail';
 
 const PHOTOS = [
   {
-    src: 'https://lookaside.facebook.com/assets/astryx/Neutral-Backpack.png',
+    src: '/template-assets/Neutral-Backpack.png',
     alt: 'Backpack',
     caption: 'A backpack displayed on a neutral background.',
   },
   {
-    src: 'https://lookaside.facebook.com/assets/astryx/building.png',
+    src: '/template-assets/building.png',
     alt: 'Modern building',
     caption: 'A modern building with a contemporary architectural design.',
   },
   {
-    src: 'https://lookaside.facebook.com/assets/astryx/light-scene-horizontal-1.png',
+    src: '/template-assets/light-scene-horizontal-1.png',
     alt: 'Coastal shoreline with ocean waves',
     caption:
       'A scenic coastline with waves rolling onto a sandy beach beneath a clear sky.',
   },
   {
-    src: 'https://lookaside.facebook.com/assets/astryx/illustrative-vertical-1.png',
+    src: '/template-assets/illustrative-vertical-1.png',
     alt: 'Illustrated lakeside landscape at sunset',
     caption:
       'A stylized landscape illustration featuring pink clouds reflected over a calm lake at sunset.',

package/assets/templates/blocks/components/Lightbox/LightboxShowcase.tsx

@@ -12,7 +12,7 @@ export default function LightboxShowcase() {
         isOpen={isOpen}
         onOpenChange={setIsOpen}
         media={{
-          src: 'https://lookaside.facebook.com/assets/astryx/light-scene-horizontal-1.png',
+          src: '/template-assets/light-scene-horizontal-1.png',
           alt: 'Coastal shoreline with ocean waves',
           caption:
             'A scenic coastline with waves rolling onto a sandy beach beneath a clear sky.',

package/assets/templates/blocks/components/Lightbox/LightboxVideo.tsx

@@ -16,7 +16,7 @@ export default function LightboxVideo() {
         isOpen={isOpen}
         onOpenChange={setIsOpen}
         media={{
-          src: 'https://lookaside.facebook.com/assets/?set=astryx&name=Nature-1&density=1',
+          src: '/template-assets/Nature-1.mp4',
           alt: 'Flower blooming in time-lapse',
           type: 'video',
           caption: 'A flower blooming in time-lapse',

package/assets/templates/blocks/components/Lightbox/LightboxZoom.tsx

@@ -12,7 +12,7 @@ export default function LightboxZoom() {
   return (
     <>
       <Thumbnail
-        src="https://lookaside.facebook.com/assets/astryx/light-scene-horizontal-1.png"
+        src="/template-assets/light-scene-horizontal-1.png"
         alt="Coastal shoreline with ocean waves"
         label="Coastal shoreline with ocean waves"
         onClick={() => setIsOpen(true)}
@@ -21,7 +21,7 @@ export default function LightboxZoom() {
         isOpen={isOpen}
         onOpenChange={setIsOpen}
         media={{
-          src: 'https://lookaside.facebook.com/assets/astryx/light-scene-horizontal-1.png',
+          src: '/template-assets/light-scene-horizontal-1.png',
           alt: 'Coastal shoreline with ocean waves',
           caption:
             'A scenic coastline. Double-click to zoom in and drag to pan.',

package/assets/templates/blocks/components/MediaTheme/MediaThemeImageOverlay.tsx

@@ -10,7 +10,7 @@ import {Stack} from '@astryxdesign/core/Layout';
 import {Text} from '@astryxdesign/core/Text';
 
 const LANDSCAPE_IMAGE_URL =
-  'https://lookaside.facebook.com/assets/astryx/light-scene-horizontal-1.png';
+  '/template-assets/light-scene-horizontal-1.png';
 
 export default function MediaThemeImageOverlay() {
   return (

package/assets/templates/blocks/components/MediaTheme/MediaThemeLightScrim.tsx

@@ -10,7 +10,7 @@ import {Stack} from '@astryxdesign/core/Layout';
 import {Text} from '@astryxdesign/core/Text';
 
 const BRIGHT_ROOM_IMAGE_URL =
-  'https://lookaside.facebook.com/assets/astryx/light-home-square-1.png';
+  '/template-assets/light-home-square-1.png';
 
 export default function MediaThemeLightScrim() {
   return (

package/assets/templates/blocks/components/MediaTheme/MediaThemeShowcase.tsx

@@ -11,7 +11,7 @@ import {Badge} from '@astryxdesign/core/Badge';
 import {Icon} from '@astryxdesign/core/Icon';
 
 const SHOWCASE_IMAGE_URL =
-  'https://lookaside.facebook.com/assets/astryx/light-scene-horizontal-1.png';
+  '/template-assets/light-scene-horizontal-1.png';
 
 export default function MediaThemeShowcase() {
   return (

package/assets/templates/blocks/components/Overlay/OverlayBottomStrip.tsx

@@ -33,7 +33,7 @@ export default function OverlayBottomStrip() {
           overflow: 'clip',
         }}>
         <img
-          src="https://lookaside.facebook.com/assets/astryx/illustrative-horizontal-1.png"
+          src="/template-assets/illustrative-horizontal-1.png"
           alt="Product highlight preview"
           style={{width: '100%', height: '100%', objectFit: 'cover'}}
         />

package/assets/templates/blocks/components/Overlay/OverlayHoverReveal.tsx

@@ -28,7 +28,7 @@ export default function OverlayHoverReveal() {
       content={<Button label="Quick view" variant="secondary" size="sm" />}>
       <AspectRatio ratio={16 / 9} style={frame}>
         <img
-          src="https://lookaside.facebook.com/assets/astryx/light-working-horizontal-1.png"
+          src="/template-assets/light-working-horizontal-1.png"
           alt="Workspace preview"
           style={image}
         />

package/assets/templates/blocks/components/Overlay/OverlayShowcase.tsx

@@ -29,7 +29,7 @@ export default function OverlayShowcase() {
           overflow: 'clip',
         }}>
         <img
-          src="https://lookaside.facebook.com/assets/astryx/light-scene-horizontal-1.png"
+          src="/template-assets/light-scene-horizontal-1.png"
           alt="Abstract landscape"
           style={{width: '100%', height: '100%', objectFit: 'cover'}}
         />

package/assets/templates/blocks/components/Stepper/StepperHorizontal.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: 'Stepper',
+  name: 'Stepper — Horizontal Progress',
+  displayName: 'Stepper — Horizontal Progress',
+  description:
+    'A horizontal separated stepper: each step owns a segment of the progress bar above its label. Filled segments track how far the flow has progressed.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['Stepper'],
+};

package/assets/templates/blocks/components/Stepper/StepperHorizontal.tsx

@@ -0,0 +1,24 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useState} from 'react';
+import {Stepper, Step} from '@astryxdesign/lab';
+
+export default function StepperHorizontal() {
+  const [active, setActive] = useState(1);
+  return (
+    <div style={{width: '100%', maxWidth: 600}}>
+      <Stepper
+        activeStep={active}
+        orientation="horizontal"
+        onStepClick={setActive}>
+        <Step step={0} label="Workspace" />
+        <Step step={1} label="Team" />
+        <Step step={2} label="Integrations" />
+        <Step step={3} label="Import" />
+        <Step step={4} label="Launch" />
+      </Stepper>
+    </div>
+  );
+}

package/assets/templates/blocks/components/Stepper/StepperIndicatorModes.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: 'Stepper',
+  name: 'Stepper — Indicator Modes',
+  displayName: 'Stepper — Indicator Modes',
+  description:
+    'The indicator prop side by side: auto (check when done, ring when current, number ahead), always-number, and a custom icon per step.',
+  isReady: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: ['Stepper', 'Text', 'Icon'],
+};

package/assets/templates/blocks/components/Stepper/StepperIndicatorModes.tsx

@@ -0,0 +1,68 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useState} from 'react';
+import {Stepper, Step} from '@astryxdesign/lab';
+import {Text} from '@astryxdesign/core/Text';
+import {Icon} from '@astryxdesign/core/Icon';
+
+export default function StepperIndicatorModes() {
+  const [active, setActive] = useState(2);
+  return (
+    <div style={{display: 'flex', gap: 48, flexWrap: 'wrap'}}>
+      <div style={{maxWidth: 220}}>
+        <Text type="label">Auto</Text>
+        <Stepper
+          activeStep={active}
+          orientation="vertical"
+          onStepClick={setActive}>
+          <Step step={0} label="Account" />
+          <Step step={1} label="Profile" />
+          <Step step={2} label="Settings" />
+          <Step step={3} label="Review" />
+        </Stepper>
+      </div>
+      <div style={{maxWidth: 220}}>
+        <Text type="label">Number</Text>
+        <Stepper
+          activeStep={active}
+          orientation="vertical"
+          onStepClick={setActive}>
+          <Step step={0} label="Account" indicator="number" />
+          <Step step={1} label="Profile" indicator="number" />
+          <Step step={2} label="Settings" indicator="number" />
+          <Step step={3} label="Review" indicator="number" />
+        </Stepper>
+      </div>
+      <div style={{maxWidth: 220}}>
+        <Text type="label">Custom icon</Text>
+        <Stepper
+          activeStep={active}
+          orientation="vertical"
+          onStepClick={setActive}>
+          <Step
+            step={0}
+            label="Account"
+            icon={<Icon icon="info" size="sm" />}
+          />
+          <Step
+            step={1}
+            label="Profile"
+            icon={<Icon icon="search" size="sm" />}
+          />
+          <Step
+            step={2}
+            label="Settings"
+            icon={<Icon icon="wrench" size="sm" />}
+          />
+          <Step
+            step={3}
+            label="Review"
+            icon={<Icon icon="check" size="sm" />}
+          />
+        </Stepper>
+      </div>
+    </div>
+  );
+}

package/assets/templates/blocks/components/Stepper/StepperMultiStepForm.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: 'Stepper',
+  name: 'Stepper — Multi-Step Form',
+  displayName: 'Stepper — Multi-Step Form',
+  description:
+    'A vertical stepper driving a multi-step form. Each step renders its own fields in the content slot for the active step, with Back/Continue buttons advancing activeStep.',
+  isReady: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: ['Stepper', 'TextInput', 'Button', 'Text'],
+};

package/assets/templates/blocks/components/Stepper/StepperMultiStepForm.tsx

@@ -0,0 +1,92 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useState} from 'react';
+import {Stepper, Step} from '@astryxdesign/lab';
+import {TextInput} from '@astryxdesign/core/TextInput';
+import {Button} from '@astryxdesign/core/Button';
+import {Text} from '@astryxdesign/core/Text';
+
+export default function StepperMultiStepForm() {
+  const [active, setActive] = useState(0);
+  return (
+    <div style={{width: '100%', maxWidth: 480}}>
+      <Stepper
+        activeStep={active}
+        orientation="vertical"
+        onStepClick={setActive}>
+        <Step step={0} label="Project details" indicator="number">
+          {active === 0 && (
+            <div style={{display: 'flex', flexDirection: 'column', gap: 12}}>
+              <TextInput
+                label="Project name"
+                placeholder="My awesome project"
+                value=""
+              />
+              <TextInput
+                label="Repository URL"
+                placeholder="https://github.com/..."
+                value=""
+              />
+              <div>
+                <Button
+                  label="Continue"
+                  variant="primary"
+                  onClick={() => setActive(1)}
+                />
+              </div>
+            </div>
+          )}
+        </Step>
+        <Step step={1} label="Environment" indicator="number">
+          {active === 1 && (
+            <div style={{display: 'flex', flexDirection: 'column', gap: 12}}>
+              <TextInput label="Node version" placeholder="20" value="" />
+              <TextInput
+                label="Build command"
+                placeholder="npm run build"
+                value=""
+              />
+              <div style={{display: 'flex', gap: 8}}>
+                <Button
+                  label="Back"
+                  variant="secondary"
+                  onClick={() => setActive(0)}
+                />
+                <Button
+                  label="Continue"
+                  variant="primary"
+                  onClick={() => setActive(2)}
+                />
+              </div>
+            </div>
+          )}
+        </Step>
+        <Step step={2} label="Deploy" indicator="number">
+          {active === 2 && (
+            <div style={{display: 'flex', flexDirection: 'column', gap: 12}}>
+              <Text type="body">
+                Ready to deploy. This creates a production build and pushes to
+                your configured hosting.
+              </Text>
+              <div style={{display: 'flex', gap: 8}}>
+                <Button
+                  label="Back"
+                  variant="secondary"
+                  onClick={() => setActive(1)}
+                />
+                <Button
+                  label="Deploy now"
+                  variant="primary"
+                  onClick={() => setActive(3)}
+                />
+              </div>
+            </div>
+          )}
+        </Step>
+        <Step step={3} label="Done" indicator="number" />
+      </Stepper>
+    </div>
+  );
+}

package/assets/templates/blocks/components/Stepper/StepperOnTrackVertical.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: 'Stepper',
+  name: 'Stepper — On-Track Vertical',
+  displayName: 'Stepper — On-Track Vertical',
+  description:
+    'The on-track layout in vertical orientation: indicators sit inline on a continuous connector rail, with each label and description beside its node.',
+  isReady: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: ['Stepper'],
+};

package/assets/templates/blocks/components/Stepper/StepperOnTrackVertical.tsx

@@ -0,0 +1,41 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useState} from 'react';
+import {Stepper, Step} from '@astryxdesign/lab';
+
+export default function StepperOnTrackVertical() {
+  const [active, setActive] = useState(2);
+  return (
+    <div style={{width: '100%', maxWidth: 400}}>
+      <Stepper
+        activeStep={active}
+        orientation="vertical"
+        indicatorPosition="on-track"
+        onStepClick={setActive}>
+        <Step
+          step={0}
+          label="Create workspace"
+          description="Name and configure your workspace"
+        />
+        <Step
+          step={1}
+          label="Invite team members"
+          description="Add collaborators by email"
+        />
+        <Step
+          step={2}
+          label="Set up integrations"
+          description="Connect Slack, GitHub, Jira"
+        />
+        <Step
+          step={3}
+          label="Import data"
+          description="Bring in existing projects"
+        />
+        <Step step={4} label="Launch" description="Go live with your team" />
+      </Stepper>
+    </div>
+  );
+}

package/assets/templates/blocks/components/Stepper/StepperShowcase.doc.mjs

@@ -0,0 +1,15 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('@astryxdesign/cli/authoring').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'Stepper',
+  name: 'Stepper — Checkout Progress',
+  displayName: 'Stepper — Checkout Progress',
+  description:
+    'A horizontal on-track stepper for a checkout flow: numbered nodes sit on a continuous connector, with completed and current steps filled. Click any step to jump.',
+  isReady: true,
+  isShowcase: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['Stepper'],
+};

package/assets/templates/blocks/components/Stepper/StepperShowcase.tsx

@@ -0,0 +1,25 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useState} from 'react';
+import {Stepper, Step} from '@astryxdesign/lab';
+
+export default function StepperShowcase() {
+  const [active, setActive] = useState(2);
+  return (
+    <div style={{width: '100%', maxWidth: 640}}>
+      <Stepper
+        activeStep={active}
+        orientation="horizontal"
+        indicatorPosition="on-track"
+        onStepClick={setActive}>
+        <Step step={0} label="Cart" indicator="number" />
+        <Step step={1} label="Shipping" indicator="number" />
+        <Step step={2} label="Payment" indicator="number" />
+        <Step step={3} label="Review" indicator="number" />
+        <Step step={4} label="Confirm" indicator="number" />
+      </Stepper>
+    </div>
+  );
+}

package/assets/templates/blocks/components/Stepper/StepperStatus.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: 'Stepper',
+  name: 'Stepper — Validation Status',
+  displayName: 'Stepper — Validation Status',
+  description:
+    'Semantic status per step in a verification flow: success shows a green check, error a red glyph, accent the in-progress step. Status sets the indicator color and glyph only, never the connector, and is announced to assistive tech as text.',
+  isReady: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: ['Stepper'],
+};