docs: add steps component

packages/anatomy-icons/src/components/index.ts

@@ -33,8 +33,10 @@ import { ToggleGroupAnatomy } from "./toggle-group"
 import { TooltipAnatomy } from "./tooltip"
 import { TreeViewAnatomy } from "./tree-view"
 import { QRCodeAnatomy } from "./qr-code"
+import { StepsAnatomy } from "./steps"
 
 export const allComponents = {
+ "steps": StepsAnatomy,
   "qr-code": QRCodeAnatomy,
   "signature-pad": SignaturePadAnatomy,
   clipboard: ClipboardAnatomy,

packages/docs/data/data-attr.json

@@ -217,6 +217,12 @@
       "data-placement": "The placement of the content",
       "data-state": "\"open\" | \"closed\""
     },
+    "ValueText": {
+      "data-scope": "color-picker",
+      "data-part": "value-text",
+      "data-disabled": "Present when disabled",
+      "data-focus": "Present when focused"
+    },
     "AreaThumb": {
       "data-scope": "color-picker",
       "data-part": "area-thumb",
@@ -717,6 +723,13 @@
       "data-disabled": "Present when disabled",
       "data-invalid": "Present when invalid"
     },
+    "ValueText": {
+      "data-scope": "number-input",
+      "data-part": "value-text",
+      "data-disabled": "Present when disabled",
+      "data-invalid": "Present when invalid",
+      "data-focus": "Present when focused"
+    },
     "Input": {
       "data-scope": "number-input",
       "data-part": "input",
@@ -909,6 +922,13 @@
       "data-disabled": "Present when disabled",
       "data-invalid": "Present when invalid"
     },
+    "ValueText": {
+      "data-scope": "select",
+      "data-part": "value-text",
+      "data-disabled": "Present when disabled",
+      "data-invalid": "Present when invalid",
+      "data-focus": "Present when focused"
+    },
     "Trigger": {
       "data-scope": "select",
       "data-part": "trigger",
@@ -1084,6 +1104,58 @@
       "data-disabled": "Present when disabled"
     }
   },
+  "steps": {
+    "Root": {
+      "data-scope": "steps",
+      "data-part": "root",
+      "data-orientation": "The orientation of the steps"
+    },
+    "List": {
+      "data-scope": "steps",
+      "data-part": "list",
+      "data-orientation": "The orientation of the list"
+    },
+    "Item": {
+      "data-scope": "steps",
+      "data-part": "item",
+      "data-orientation": "The orientation of the item"
+    },
+    "Trigger": {
+      "data-scope": "steps",
+      "data-part": "trigger",
+      "data-state": "\"open\" | \"closed\"",
+      "data-orientation": "The orientation of the trigger",
+      "data-complete": "Present when the trigger value is complete",
+      "data-current": "Present when current",
+      "data-incomplete": ""
+    },
+    "Content": {
+      "data-scope": "steps",
+      "data-part": "content",
+      "data-state": "\"open\" | \"closed\"",
+      "data-orientation": "The orientation of the content"
+    },
+    "Indicator": {
+      "data-scope": "steps",
+      "data-part": "indicator",
+      "data-complete": "Present when the indicator value is complete",
+      "data-current": "Present when current",
+      "data-incomplete": ""
+    },
+    "Separator": {
+      "data-scope": "steps",
+      "data-part": "separator",
+      "data-orientation": "The orientation of the separator",
+      "data-complete": "Present when the separator value is complete",
+      "data-current": "Present when current",
+      "data-incomplete": ""
+    },
+    "Progress": {
+      "data-scope": "steps",
+      "data-part": "progress",
+      "data-complete": "Present when the progress value is complete"
+    }
+  },
   "switch": {
     "Root": {
       "data-active": "Present when active or pressed",

packages/machines/steps/src/steps.anatomy.ts

@@ -8,8 +8,6 @@ export const anatomy = createAnatomy("steps").parts(
   "indicator",
   "separator",
   "content",
-  "title",
-  "description",
   "nextTrigger",
   "prevTrigger",
   "progress",

packages/machines/steps/src/steps.machine.ts

@@ -13,6 +13,7 @@ export function machine(userContext: UserDefinedContext) {
         step: 0,
         count: 1,
         linear: false,
+        orientation: "horizontal",
         ...ctx,
       },
 
@@ -25,6 +26,9 @@ export function machine(userContext: UserDefinedContext) {
       states: {
         idle: {
           on: {
+            "STEP.SET": {
+              actions: "setStep",
+            },
             "STEP.NEXT": {
               actions: "goToNextStep",
             },

shared/src/controls.ts

@@ -278,6 +278,6 @@ export const qrCodeControls = defineControls({
 })
 
 export const stepsControls = defineControls({
-  skippable: { type: "boolean", defaultValue: false },
+  linear: { type: "boolean", defaultValue: false },
   orientation: { type: "select", options: ["horizontal", "vertical"] as const, defaultValue: "horizontal" },
 })

website/components/machines/steps.tsx

@@ -0,0 +1,54 @@
+import * as steps from "@zag-js/steps"
+import { useMachine, normalizeProps } from "@zag-js/react"
+import { useId } from "react"
+
+const stepsData = [
+  { title: "Step 1" },
+  { title: "Step 2" },
+  { title: "Step 3" },
+]
+
+export function Steps(props: any) {
+  const context = props.controls
+
+  const [state, send] = useMachine(
+    steps.machine({
+      id: useId(),
+      count: stepsData.length,
+    }),
+    { context },
+  )
+
+  const api = steps.connect(state, send, normalizeProps)
+
+  return (
+    <div {...api.getRootProps()}>
+      <div {...api.getListProps()}>
+        {stepsData.map((step, index) => (
+          <div key={index} {...api.getItemProps({ index })}>
+            <button {...api.getTriggerProps({ index })}>
+              <div {...api.getIndicatorProps({ index })}>{index + 1}</div>
+              <span>{step.title}</span>
+            </button>
+            <div {...api.getSeparatorProps({ index })} />
+          </div>
+        ))}
+      </div>
+
+      {stepsData.map((step, index) => (
+        <div key={index} {...api.getContentProps({ index })}>
+          {step.title}
+        </div>
+      ))}
+
+      <div {...api.getContentProps({ index: stepsData.length })}>
+        Complete - Thank you 🎉
+      </div>
+
+      <div>
+        <button {...api.getPrevTriggerProps()}>Back</button>
+        <button {...api.getNextTriggerProps()}>Next</button>
+      </div>
+    </div>
+  )
+}

website/components/showcase.tsx

@@ -30,6 +30,7 @@ import { Select } from "./machines/select"
 import { SignaturePad } from "./machines/signature-pad"
 import { Slider } from "./machines/slider"
 import { Splitter } from "./machines/splitter"
+import { Steps } from "./machines/steps"
 import { Switch } from "./machines/switch"
 import { Tabs } from "./machines/tabs"
 import { TagsInput } from "./machines/tags-input"
@@ -419,6 +420,7 @@ const components = {
       }}
     />
   ),
+  Steps: () => <Playground component={Steps} />,
 }
 
 export function Showcase(props: { id: keyof typeof components }) {