@astryxdesign/cli 0.4.7 → 0.5.0-canary.055e75f

package/assets/templates/blocks/components/Step/StepStates.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: 'Step',
+  name: 'Step — States',
+  displayName: 'Step — States',
+  description:
+    'Every state a single Step can land in, each shown as one Step in its own Stepper. Completed, current, and upcoming are derived by comparing the step index against the parent activeStep, so they are never set directly; isDisabled and status are the two a step declares itself. Status is a separate axis from progress, which is why a completed step can still carry a warning.',
+  isReady: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: ['Stepper', 'Step', 'Text'],
+};

package/assets/templates/blocks/components/Step/StepStates.tsx

@@ -0,0 +1,46 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {Stepper, Step} from '@astryxdesign/core/Stepper';
+import {Text} from '@astryxdesign/core/Text';
+
+export default function StepStates() {
+  // A Step holds no state of its own — it compares its `step` index against the
+  // Stepper's `activeStep`. Each state below is therefore one Step in its own
+  // Stepper, with activeStep placed on one side of it or the other.
+  return (
+    <div style={{display: 'flex', flexWrap: 'wrap', gap: 32}}>
+      <div style={{width: 220}}>
+        <Text type="label">Completed</Text>
+        <Stepper activeStep={1} orientation="vertical">
+          <Step step={0} label="Verify email" />
+        </Stepper>
+      </div>
+      <div style={{width: 220}}>
+        <Text type="label">Current</Text>
+        <Stepper activeStep={0} orientation="vertical">
+          <Step step={0} label="Verify email" />
+        </Stepper>
+      </div>
+      <div style={{width: 220}}>
+        <Text type="label">Upcoming</Text>
+        <Stepper activeStep={0} orientation="vertical">
+          <Step step={1} label="Add a payment method" />
+        </Stepper>
+      </div>
+      <div style={{width: 220}}>
+        <Text type="label">Disabled</Text>
+        <Stepper activeStep={0} orientation="vertical" onStepClick={() => {}}>
+          <Step step={1} label="Add a payment method" isDisabled />
+        </Stepper>
+      </div>
+      <div style={{width: 220}}>
+        <Text type="label">Completed, with a status</Text>
+        <Stepper activeStep={1} orientation="vertical">
+          <Step step={0} label="Verify email" status="warning" />
+        </Stepper>
+      </div>
+    </div>
+  );
+}

package/assets/templates/blocks/components/Stepper/StepperCustomContent.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: 'Stepper',
+  name: 'Stepper — Custom Content',
+  displayName: 'Stepper — Custom Content',
+  description:
+    'A vertical stepper where each step owns a slice of the page. The content slot takes any node (form fields, a summary panel, a banner), so a stepper is not limited to multi-step forms. Rendering the slot only for the active step is what makes the flow expand one step at a time.',
+  isReady: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: [
+    'Stepper',
+    'TextInput',
+    'Button',
+    'Text',
+    'Card',
+    'Badge',
+    'Banner',
+  ],
+};

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

@@ -0,0 +1,126 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useState} from 'react';
+import {Stepper, Step} from '@astryxdesign/core/Stepper';
+import {TextInput} from '@astryxdesign/core/TextInput';
+import {Button} from '@astryxdesign/core/Button';
+import {Text} from '@astryxdesign/core/Text';
+import {Card} from '@astryxdesign/core/Card';
+import {Badge} from '@astryxdesign/core/Badge';
+import {Banner} from '@astryxdesign/core/Banner';
+
+export default function StepperCustomContent() {
+  const [active, setActive] = useState(0);
+  // The content slot takes any node, not just form fields — a panel, a summary,
+  // a notice. Gating it on `active` is what makes the flow expand a step at a
+  // time.
+  return (
+    <div style={{width: 680}}>
+      <Stepper
+        activeStep={active}
+        orientation="vertical"
+        onStepClick={setActive}>
+        <Step
+          step={0}
+          label="Project details"
+          description="Name it and point us at the source"
+          indicator="number">
+          {active === 0 && (
+            <div style={{display: 'flex', flexDirection: 'column', gap: 12}}>
+              <div style={{display: 'flex', gap: 12}}>
+                <TextInput
+                  label="Project name"
+                  placeholder="My awesome project"
+                  value=""
+                  width="100%"
+                />
+                <TextInput
+                  label="Repository URL"
+                  placeholder="https://github.com/..."
+                  value=""
+                  width="100%"
+                />
+              </div>
+              <div>
+                <Button
+                  label="Continue"
+                  variant="primary"
+                  onClick={() => setActive(1)}
+                />
+              </div>
+            </div>
+          )}
+        </Step>
+        <Step
+          step={1}
+          label="Review the build"
+          description="What we detected from your default branch"
+          indicator="number">
+          {active === 1 && (
+            <div style={{display: 'flex', flexDirection: 'column', gap: 12}}>
+              <Card variant="muted" padding={3}>
+                <div style={{display: 'flex', flexDirection: 'column', gap: 8}}>
+                  <div
+                    style={{
+                      display: 'flex',
+                      alignItems: 'center',
+                      gap: 8,
+                    }}>
+                    <Text type="label">Next.js 15</Text>
+                    <Badge variant="success" label="Detected" />
+                  </div>
+                  <Text type="supporting">
+                    Build command <code>next build</code> · Output{' '}
+                    <code>.next</code> · Node 20
+                  </Text>
+                </div>
+              </Card>
+              <div style={{display: 'flex', gap: 8}}>
+                <Button
+                  label="Back"
+                  variant="secondary"
+                  onClick={() => setActive(0)}
+                />
+                <Button
+                  label="Looks right"
+                  variant="primary"
+                  onClick={() => setActive(2)}
+                />
+              </div>
+            </div>
+          )}
+        </Step>
+        <Step
+          step={2}
+          label="Deploy"
+          description="Ships to production"
+          indicator="number">
+          {active === 2 && (
+            <div style={{display: 'flex', flexDirection: 'column', gap: 12}}>
+              <Banner
+                status="info"
+                title="First deploy takes a few minutes"
+                description="Later deploys reuse the build cache and finish in under a minute."
+              />
+              <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="Live" indicator="number" />
+      </Stepper>
+    </div>
+  );
+}

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

@@ -7,7 +7,7 @@ export const doc = {
   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.',
+    'The indicator prop side by side: none (the bar and label carry the progress on their own), 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

@@ -3,7 +3,7 @@
 'use client';
 
 import {useState} from 'react';
-import {Stepper, Step} from '@astryxdesign/lab';
+import {Stepper, Step} from '@astryxdesign/core/Stepper';
 import {Text} from '@astryxdesign/core/Text';
 import {Icon} from '@astryxdesign/core/Icon';
 
@@ -11,6 +11,18 @@ 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">None</Text>
+        <Stepper
+          activeStep={active}
+          orientation="vertical"
+          onStepClick={setActive}>
+          <Step step={0} label="Account" indicator="none" />
+          <Step step={1} label="Profile" indicator="none" />
+          <Step step={2} label="Settings" indicator="none" />
+          <Step step={3} label="Review" indicator="none" />
+        </Stepper>
+      </div>
       <div style={{maxWidth: 220}}>
         <Text type="label">Auto</Text>
         <Stepper
@@ -44,22 +56,22 @@ export default function StepperIndicatorModes() {
           <Step
             step={0}
             label="Account"
-            icon={<Icon icon="info" size="sm" />}
+            indicator={<Icon icon="info" size="sm" />}
           />
           <Step
             step={1}
             label="Profile"
-            icon={<Icon icon="search" size="sm" />}
+            indicator={<Icon icon="search" size="sm" />}
           />
           <Step
             step={2}
             label="Settings"
-            icon={<Icon icon="wrench" size="sm" />}
+            indicator={<Icon icon="wrench" size="sm" />}
           />
           <Step
             step={3}
             label="Review"
-            icon={<Icon icon="check" size="sm" />}
+            indicator={<Icon icon="check" size="sm" />}
           />
         </Stepper>
       </div>

package/assets/templates/blocks/components/Stepper/StepperOnTrackHorizontal.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 Horizontal',
+  displayName: 'Stepper — On-Track Horizontal',
+  description:
+    'The on-track layout in horizontal orientation: instead of sitting beside the label, each indicator is slotted into the connector itself, so the numbered nodes read as beads on one continuous line. Labels center under their node.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['Stepper'],
+};

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

@@ -0,0 +1,25 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useState} from 'react';
+import {Stepper, Step} from '@astryxdesign/core/Stepper';
+
+export default function StepperOnTrackHorizontal() {
+  const [active, setActive] = useState(2);
+  return (
+    <div style={{width: 560}}>
+      <Stepper
+        activeStep={active}
+        orientation="horizontal"
+        indicatorPosition="on-track"
+        onStepClick={setActive}>
+        <Step step={0} label="Workspace" indicator="number" />
+        <Step step={1} label="Team" indicator="number" />
+        <Step step={2} label="Integrations" indicator="number" />
+        <Step step={3} label="Import" indicator="number" />
+        <Step step={4} label="Launch" indicator="number" />
+      </Stepper>
+    </div>
+  );
+}

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

@@ -7,8 +7,8 @@ export const doc = {
   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.',
+    'The on-track layout in vertical orientation: indicators sit inline on a continuous connector rail, with each label and description beside its node. Compare with the separated layout, where the indicator sits alongside its own bar segment instead of on a shared rail.',
   isReady: true,
   aspectRatio: 4 / 3,
-  componentsUsed: ['Stepper'],
+  componentsUsed: ['Stepper', 'Step'],
 };

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

@@ -3,7 +3,7 @@
 'use client';
 
 import {useState} from 'react';
-import {Stepper, Step} from '@astryxdesign/lab';
+import {Stepper, Step} from '@astryxdesign/core/Stepper';
 
 export default function StepperOnTrackVertical() {
   const [active, setActive] = useState(2);

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

@@ -7,7 +7,7 @@ export const doc = {
   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.',
+    'The default stepper: a horizontal track where every step owns an equal segment of the progress bar above its label. The default auto indicator resolves itself per step — a check once the step is done, a ring on the current step, a number for the ones still ahead. Click any step to jump.',
   isReady: true,
   isShowcase: true,
   aspectRatio: 16 / 9,

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

@@ -3,7 +3,7 @@
 'use client';
 
 import {useState} from 'react';
-import {Stepper, Step} from '@astryxdesign/lab';
+import {Stepper, Step} from '@astryxdesign/core/Stepper';
 
 export default function StepperShowcase() {
   const [active, setActive] = useState(2);
@@ -12,13 +12,12 @@ export default function StepperShowcase() {
       <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" />
+        <Step step={0} label="Cart" />
+        <Step step={1} label="Shipping" />
+        <Step step={2} label="Payment" />
+        <Step step={3} label="Review" />
+        <Step step={4} label="Confirm" />
       </Stepper>
     </div>
   );

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

@@ -3,7 +3,7 @@
 'use client';
 
 import {useState} from 'react';
-import {Stepper, Step} from '@astryxdesign/lab';
+import {Stepper, Step} from '@astryxdesign/core/Stepper';
 
 export default function StepperStatus() {
   const [active, setActive] = useState(3);

package/assets/templates/pages/mixed-gallery/page.tsx

@@ -36,7 +36,11 @@ const clipStyle: CSSProperties = {
 // 3 columns on desktop, dropping straight to 1 column below 720px (no 2-col
 // middle state). minmax(0, 1fr) (not 1fr) so tracks split evenly and ignore the
 // images' intrinsic min-width. The hero spans 2 columns on desktop, then fills
-// the row once it's single-column.
+// the row once it's single-column — and switches from 3:1 to 3:2 with a plain
+// aspect-ratio override. AspectRatio's ratio is a class-level declaration in
+// @layer astryx-base, and this <style> tag is unlayered, so the override wins
+// regardless of specificity — every stacked tile is uniform without rendering
+// the hero twice.
 const GALLERY_CSS = `
 .mixed-gallery-grid {
   display: grid;
@@ -52,6 +56,7 @@ const GALLERY_CSS = `
   }
   .mixed-gallery-hero {
     grid-column: 1 / -1;
+    aspect-ratio: 3 / 2;
   }
 }
 `;
@@ -134,9 +139,13 @@ export default function MixedGalleryTemplate() {
                 of three. Every tile is 3:2 except the hero, which is 3:1 so that
                 (being 2 columns wide) it matches the row height exactly. All
                 rows are therefore the same height. Responsive via @container:
-                3 columns → 1 column at ≤720px. */}
+                3 columns → 1 column at ≤720px, where the hero drops to 3:2 so
+                the stacked tiles are uniform. */}
             <div className="mixed-gallery-grid">
-              {/* Hero — spans 2 columns; 3:1 keeps it level with the sidebar */}
+              {/* Hero — spans 2 columns; 3:1 keeps it level with the sidebar.
+                  Stacked, the unlayered aspect-ratio override switches it to
+                  3:2 (see GALLERY_CSS) — one element, no duplicate hero
+                  markup. */}
               <GalleryCard
                 image={IMAGES[0]}
                 ratio={3 / 1}