@astryxdesign/cli 0.4.7 → 0.5.0-canary.32a62fd

package/package.json

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

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

@@ -1,14 +0,0 @@
-// 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

@@ -1,24 +0,0 @@
-// 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/StepperMultiStepForm.doc.mjs

@@ -1,14 +0,0 @@
-// 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

@@ -1,92 +0,0 @@
-// 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/StepperVerticalOnboarding.doc.mjs

@@ -1,14 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/** @type {import('@astryxdesign/cli/authoring').TemplateDoc} */
-export const doc = {
-  type: 'block',
-  exampleFor: 'Stepper',
-  name: 'Stepper — Vertical Onboarding',
-  displayName: 'Stepper — Vertical Onboarding',
-  description:
-    'A vertical stepper for an onboarding flow, with a label and description per step. The auto indicator shows a check for completed steps, a ring for the current step, and a number for upcoming ones.',
-  isReady: true,
-  aspectRatio: 4 / 3,
-  componentsUsed: ['Stepper'],
-};

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

@@ -1,40 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-'use client';
-
-import {useState} from 'react';
-import {Stepper, Step} from '@astryxdesign/lab';
-
-export default function StepperVerticalOnboarding() {
-  const [active, setActive] = useState(2);
-  return (
-    <div style={{width: '100%', maxWidth: 400}}>
-      <Stepper
-        activeStep={active}
-        orientation="vertical"
-        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>
-  );
-}