@zag-js/steps 0.61.1 → 0.62.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.mts +5 -5
- package/dist/index.d.ts +5 -5
- package/dist/index.js +8 -5
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +8 -5
- package/dist/index.mjs.map +1 -1
- package/package.json +6 -6
- package/src/steps.anatomy.ts +0 -2
- package/src/steps.connect.ts +2 -2
- package/src/steps.machine.ts +5 -0
- package/src/steps.props.ts +1 -1
- package/src/steps.types.ts +2 -2
package/dist/index.d.mts
CHANGED
|
@@ -3,7 +3,7 @@ import { RequiredBy, PropTypes, DirectionProperty, CommonProperties, NormalizePr
|
|
|
3
3
|
import * as _zag_js_core from '@zag-js/core';
|
|
4
4
|
import { Machine, StateMachine } from '@zag-js/core';
|
|
5
5
|
|
|
6
|
-
declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "list" | "item" | "trigger" | "indicator" | "separator" | "content" | "
|
|
6
|
+
declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "list" | "item" | "trigger" | "indicator" | "separator" | "content" | "nextTrigger" | "prevTrigger" | "progress">;
|
|
7
7
|
|
|
8
8
|
interface StepChangeDetails {
|
|
9
9
|
step: number;
|
|
@@ -32,9 +32,9 @@ interface PublicContext extends DirectionProperty, CommonProperties {
|
|
|
32
32
|
*/
|
|
33
33
|
onStepComplete?: VoidFunction;
|
|
34
34
|
/**
|
|
35
|
-
* If `true`, the stepper
|
|
35
|
+
* If `true`, the stepper requires the user to complete the steps in order
|
|
36
36
|
*/
|
|
37
|
-
|
|
37
|
+
linear?: boolean;
|
|
38
38
|
/**
|
|
39
39
|
* The orientation of the stepper
|
|
40
40
|
*/
|
|
@@ -129,7 +129,7 @@ declare function connect<T extends PropTypes>(state: State, send: Send, normaliz
|
|
|
129
129
|
|
|
130
130
|
declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
|
|
131
131
|
|
|
132
|
-
declare const props: ("step" | "dir" | "id" | "orientation" | "ids" | "onStepChange" | "onStepComplete" | "
|
|
133
|
-
declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "step" | "dir" | "id" | "orientation" | "ids" | "onStepChange" | "onStepComplete" | "
|
|
132
|
+
declare const props: ("linear" | "step" | "dir" | "id" | "orientation" | "ids" | "onStepChange" | "onStepComplete" | "count" | "getRootNode")[];
|
|
133
|
+
declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "linear" | "step" | "dir" | "id" | "orientation" | "ids" | "onStepChange" | "onStepComplete" | "count" | "getRootNode">];
|
|
134
134
|
|
|
135
135
|
export { type MachineApi as Api, type UserDefinedContext as Context, type ElementIds, type ItemProps, type ItemState, type Service, type StepChangeDetails, anatomy, connect, machine, props, splitProps };
|
package/dist/index.d.ts
CHANGED
|
@@ -3,7 +3,7 @@ import { RequiredBy, PropTypes, DirectionProperty, CommonProperties, NormalizePr
|
|
|
3
3
|
import * as _zag_js_core from '@zag-js/core';
|
|
4
4
|
import { Machine, StateMachine } from '@zag-js/core';
|
|
5
5
|
|
|
6
|
-
declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "list" | "item" | "trigger" | "indicator" | "separator" | "content" | "
|
|
6
|
+
declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "list" | "item" | "trigger" | "indicator" | "separator" | "content" | "nextTrigger" | "prevTrigger" | "progress">;
|
|
7
7
|
|
|
8
8
|
interface StepChangeDetails {
|
|
9
9
|
step: number;
|
|
@@ -32,9 +32,9 @@ interface PublicContext extends DirectionProperty, CommonProperties {
|
|
|
32
32
|
*/
|
|
33
33
|
onStepComplete?: VoidFunction;
|
|
34
34
|
/**
|
|
35
|
-
* If `true`, the stepper
|
|
35
|
+
* If `true`, the stepper requires the user to complete the steps in order
|
|
36
36
|
*/
|
|
37
|
-
|
|
37
|
+
linear?: boolean;
|
|
38
38
|
/**
|
|
39
39
|
* The orientation of the stepper
|
|
40
40
|
*/
|
|
@@ -129,7 +129,7 @@ declare function connect<T extends PropTypes>(state: State, send: Send, normaliz
|
|
|
129
129
|
|
|
130
130
|
declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
|
|
131
131
|
|
|
132
|
-
declare const props: ("step" | "dir" | "id" | "orientation" | "ids" | "onStepChange" | "onStepComplete" | "
|
|
133
|
-
declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "step" | "dir" | "id" | "orientation" | "ids" | "onStepChange" | "onStepComplete" | "
|
|
132
|
+
declare const props: ("linear" | "step" | "dir" | "id" | "orientation" | "ids" | "onStepChange" | "onStepComplete" | "count" | "getRootNode")[];
|
|
133
|
+
declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "linear" | "step" | "dir" | "id" | "orientation" | "ids" | "onStepChange" | "onStepComplete" | "count" | "getRootNode">];
|
|
134
134
|
|
|
135
135
|
export { type MachineApi as Api, type UserDefinedContext as Context, type ElementIds, type ItemProps, type ItemState, type Service, type StepChangeDetails, anatomy, connect, machine, props, splitProps };
|
package/dist/index.js
CHANGED
|
@@ -38,8 +38,6 @@ var anatomy = (0, import_anatomy.createAnatomy)("steps").parts(
|
|
|
38
38
|
"indicator",
|
|
39
39
|
"separator",
|
|
40
40
|
"content",
|
|
41
|
-
"title",
|
|
42
|
-
"description",
|
|
43
41
|
"nextTrigger",
|
|
44
42
|
"prevTrigger",
|
|
45
43
|
"progress"
|
|
@@ -132,7 +130,7 @@ function connect(state, send, normalize) {
|
|
|
132
130
|
id: itemState.triggerId,
|
|
133
131
|
role: "tab",
|
|
134
132
|
dir: state.context.dir,
|
|
135
|
-
tabIndex: state.context.
|
|
133
|
+
tabIndex: !state.context.linear || itemState.current ? 0 : -1,
|
|
136
134
|
"aria-selected": itemState.current,
|
|
137
135
|
"aria-controls": itemState.contentId,
|
|
138
136
|
"data-state": itemState.current ? "open" : "closed",
|
|
@@ -142,7 +140,7 @@ function connect(state, send, normalize) {
|
|
|
142
140
|
"data-incomplete": (0, import_dom_query2.dataAttr)(!itemState.current),
|
|
143
141
|
onClick(event) {
|
|
144
142
|
if (event.defaultPrevented) return;
|
|
145
|
-
if (
|
|
143
|
+
if (state.context.linear) return;
|
|
146
144
|
send({ type: "STEP.SET", value: props2.index, src: "trigger.click" });
|
|
147
145
|
}
|
|
148
146
|
});
|
|
@@ -234,6 +232,8 @@ function machine(userContext) {
|
|
|
234
232
|
context: {
|
|
235
233
|
step: 0,
|
|
236
234
|
count: 1,
|
|
235
|
+
linear: false,
|
|
236
|
+
orientation: "horizontal",
|
|
237
237
|
...ctx
|
|
238
238
|
},
|
|
239
239
|
computed: {
|
|
@@ -244,6 +244,9 @@ function machine(userContext) {
|
|
|
244
244
|
states: {
|
|
245
245
|
idle: {
|
|
246
246
|
on: {
|
|
247
|
+
"STEP.SET": {
|
|
248
|
+
actions: "setStep"
|
|
249
|
+
},
|
|
247
250
|
"STEP.NEXT": {
|
|
248
251
|
actions: "goToNextStep"
|
|
249
252
|
},
|
|
@@ -297,10 +300,10 @@ var props = (0, import_types.createProps)()([
|
|
|
297
300
|
"getRootNode",
|
|
298
301
|
"id",
|
|
299
302
|
"ids",
|
|
303
|
+
"linear",
|
|
300
304
|
"onStepChange",
|
|
301
305
|
"onStepComplete",
|
|
302
306
|
"orientation",
|
|
303
|
-
"skippable",
|
|
304
307
|
"step"
|
|
305
308
|
]);
|
|
306
309
|
var splitProps = (0, import_utils2.createSplitProps)(props);
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/steps.anatomy.ts","../src/steps.dom.ts","../src/steps.connect.ts","../src/steps.machine.ts","../src/steps.props.ts"],"sourcesContent":["export { anatomy } from \"./steps.anatomy\"\nexport { connect } from \"./steps.connect\"\nexport { machine } from \"./steps.machine\"\nexport * from \"./steps.props\"\nexport type {\n MachineApi as Api,\n UserDefinedContext as Context,\n ElementIds,\n ItemProps,\n ItemState,\n Service,\n StepChangeDetails,\n} from \"./steps.types\"\n","import { createAnatomy } from \"@zag-js/anatomy\"\n\nexport const anatomy = createAnatomy(\"steps\").parts(\n \"root\",\n \"list\",\n \"item\",\n \"trigger\",\n \"indicator\",\n \"separator\",\n \"content\",\n \"title\",\n \"description\",\n \"nextTrigger\",\n \"prevTrigger\",\n \"progress\",\n)\n\nexport const parts = anatomy.build()\n","import { createScope } from \"@zag-js/dom-query\"\nimport type { MachineContext as Ctx } from \"./steps.types\"\n\nexport const dom = createScope({\n getRootId: (ctx: Ctx) => ctx.ids?.root ?? `steps:${ctx.id}`,\n getListId: (ctx: Ctx) => ctx.ids?.list ?? `steps:${ctx.id}:list`,\n getTriggerId: (ctx: Ctx, index: number) => ctx.ids?.triggerId?.(index) ?? `steps:${ctx.id}:trigger:${index}`,\n getContentId: (ctx: Ctx, index: number) => ctx.ids?.contentId?.(index) ?? `steps:${ctx.id}:content:${index}`,\n})\n","import type { NormalizeProps, PropTypes } from \"@zag-js/types\"\nimport type { State, Send, ItemProps, ItemState, MachineApi } from \"./steps.types\"\nimport { parts } from \"./steps.anatomy\"\nimport { dom } from \"./steps.dom\"\nimport { dataAttr } from \"@zag-js/dom-query\"\n\nexport function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> {\n const value = state.context.step\n const count = state.context.count\n const percent = state.context.percent\n const hasNextStep = state.context.hasNextStep\n const hasPrevStep = state.context.hasPrevStep\n\n const getItemState = (props: ItemProps): ItemState => ({\n triggerId: dom.getTriggerId(state.context, props.index),\n contentId: dom.getContentId(state.context, props.index),\n current: props.index === value,\n completed: props.index < value,\n index: props.index,\n first: props.index === 0,\n last: props.index === count - 1,\n })\n\n const goToNextStep = () => {\n send({ type: \"STEP.NEXT\", src: \"next.trigger.click\" })\n }\n\n const goToPrevStep = () => {\n send({ type: \"STEP.PREV\", src: \"prev.trigger.click\" })\n }\n\n const resetStep = () => {\n send({ type: \"STEP.RESET\", src: \"reset.trigger.click\" })\n }\n\n const setValue = (value: number) => {\n send({ type: \"STEP.SET\", value, src: \"api.setValue\" })\n }\n\n return {\n value,\n count,\n percent,\n hasNextStep,\n hasPrevStep,\n goToNextStep,\n goToPrevStep,\n resetStep,\n getItemState,\n setValue,\n\n getRootProps() {\n return normalize.element({\n ...parts.root.attrs,\n id: dom.getRootId(state.context),\n dir: state.context.dir,\n \"data-orientation\": state.context.orientation,\n style: {\n \"--percent\": `${percent}%`,\n },\n })\n },\n\n getListProps() {\n return normalize.element({\n ...parts.list.attrs,\n dir: state.context.dir,\n id: dom.getListId(state.context),\n role: \"tablist\",\n \"aria-orientation\": state.context.orientation,\n \"data-orientation\": state.context.orientation,\n })\n },\n\n getItemProps(props) {\n const itemState = getItemState(props)\n return normalize.element({\n ...parts.item.attrs,\n dir: state.context.dir,\n \"aria-current\": itemState.current ? \"step\" : undefined,\n \"data-orientation\": state.context.orientation,\n })\n },\n\n getTriggerProps(props) {\n const itemState = getItemState(props)\n return normalize.button({\n ...parts.trigger.attrs,\n id: itemState.triggerId,\n role: \"tab\",\n dir: state.context.dir,\n tabIndex: state.context.skippable || itemState.current ? 0 : -1,\n \"aria-selected\": itemState.current,\n \"aria-controls\": itemState.contentId,\n \"data-state\": itemState.current ? \"open\" : \"closed\",\n \"data-orientation\": state.context.orientation,\n \"data-complete\": dataAttr(itemState.completed),\n \"data-current\": dataAttr(itemState.current),\n \"data-incomplete\": dataAttr(!itemState.current),\n onClick(event) {\n if (event.defaultPrevented) return\n if (!state.context.skippable) return\n send({ type: \"STEP.SET\", value: props.index, src: \"trigger.click\" })\n },\n })\n },\n\n getContentProps(props) {\n const itemState = getItemState(props)\n return normalize.element({\n ...parts.content.attrs,\n dir: state.context.dir,\n id: itemState.contentId,\n role: \"tabpanel\",\n tabIndex: 0,\n hidden: !itemState.current,\n \"data-state\": itemState.current ? \"open\" : \"closed\",\n \"data-orientation\": state.context.orientation,\n \"aria-labelledby\": itemState.triggerId,\n })\n },\n\n getIndicatorProps(props) {\n const itemState = getItemState(props)\n return normalize.element({\n ...parts.indicator.attrs,\n dir: state.context.dir,\n \"aria-hidden\": true,\n \"data-complete\": dataAttr(itemState.completed),\n \"data-current\": dataAttr(itemState.current),\n \"data-incomplete\": dataAttr(!itemState.current),\n })\n },\n\n getSeparatorProps(props) {\n const itemState = getItemState(props)\n return normalize.element({\n ...parts.separator.attrs,\n dir: state.context.dir,\n \"data-orientation\": state.context.orientation,\n \"data-complete\": dataAttr(itemState.completed),\n \"data-current\": dataAttr(itemState.current),\n \"data-incomplete\": dataAttr(!itemState.current),\n })\n },\n\n getNextTriggerProps() {\n return normalize.button({\n ...parts.nextTrigger.attrs,\n dir: state.context.dir,\n type: \"button\",\n disabled: !hasNextStep,\n onClick(event) {\n if (event.defaultPrevented) return\n goToNextStep()\n },\n })\n },\n\n getPrevTriggerProps() {\n return normalize.button({\n dir: state.context.dir,\n ...parts.prevTrigger.attrs,\n type: \"button\",\n disabled: !hasPrevStep,\n onClick(event) {\n if (event.defaultPrevented) return\n goToPrevStep()\n },\n })\n },\n\n getProgressProps() {\n return normalize.element({\n dir: state.context.dir,\n ...parts.progress.attrs,\n role: \"progressbar\",\n \"aria-valuenow\": percent,\n \"aria-valuemin\": 0,\n \"aria-valuemax\": 100,\n \"aria-valuetext\": `${percent}% complete`,\n \"data-complete\": dataAttr(percent === 100),\n })\n },\n }\n}\n","import { createMachine } from \"@zag-js/core\"\nimport { compact, isEqual } from \"@zag-js/utils\"\nimport type { MachineContext, MachineState, UserDefinedContext } from \"./steps.types\"\n\nexport function machine(userContext: UserDefinedContext) {\n const ctx = compact(userContext)\n return createMachine<MachineContext, MachineState>(\n {\n id: \"steps\",\n initial: \"idle\",\n\n context: {\n step: 0,\n count: 1,\n ...ctx,\n },\n\n computed: {\n percent: (ctx) => (ctx.step / ctx.count) * 100,\n hasNextStep: (ctx) => ctx.step < ctx.count,\n hasPrevStep: (ctx) => ctx.step > 0,\n },\n\n states: {\n idle: {\n on: {\n \"STEP.NEXT\": {\n actions: \"goToNextStep\",\n },\n \"STEP.PREV\": {\n actions: \"goToPrevStep\",\n },\n \"STEP.RESET\": {\n actions: \"resetStep\",\n },\n },\n },\n },\n },\n {\n actions: {\n goToNextStep(ctx) {\n const value = Math.min(ctx.step + 1, ctx.count)\n set.value(ctx, value)\n },\n goToPrevStep(ctx) {\n const value = Math.max(ctx.step - 1, 0)\n set.value(ctx, value)\n },\n resetStep(ctx) {\n set.value(ctx, 0)\n },\n setStep(ctx, event) {\n const value = event.value\n const inRange = value >= 0 && value < ctx.count\n if (!inRange) throw new RangeError(`Index ${value} is out of bounds`)\n set.value(ctx, value)\n },\n },\n },\n )\n}\n\nconst set = {\n value(ctx: MachineContext, step: number) {\n if (isEqual(ctx.step, step)) return\n ctx.step = step\n ctx.onStepChange?.({ step })\n },\n}\n","import { createProps } from \"@zag-js/types\"\nimport { createSplitProps } from \"@zag-js/utils\"\nimport type { UserDefinedContext } from \"./steps.types\"\n\nexport const props = createProps<UserDefinedContext>()([\n \"count\",\n \"dir\",\n \"getRootNode\",\n \"id\",\n \"ids\",\n \"onStepChange\",\n \"onStepComplete\",\n \"orientation\",\n \"skippable\",\n \"step\",\n])\n\nexport const splitProps = createSplitProps<Partial<UserDefinedContext>>(props)\n"],"mappings":"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","names":["import_dom_query","props","value","ctx","import_utils"]}
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/steps.anatomy.ts","../src/steps.dom.ts","../src/steps.connect.ts","../src/steps.machine.ts","../src/steps.props.ts"],"sourcesContent":["export { anatomy } from \"./steps.anatomy\"\nexport { connect } from \"./steps.connect\"\nexport { machine } from \"./steps.machine\"\nexport * from \"./steps.props\"\nexport type {\n MachineApi as Api,\n UserDefinedContext as Context,\n ElementIds,\n ItemProps,\n ItemState,\n Service,\n StepChangeDetails,\n} from \"./steps.types\"\n","import { createAnatomy } from \"@zag-js/anatomy\"\n\nexport const anatomy = createAnatomy(\"steps\").parts(\n \"root\",\n \"list\",\n \"item\",\n \"trigger\",\n \"indicator\",\n \"separator\",\n \"content\",\n \"nextTrigger\",\n \"prevTrigger\",\n \"progress\",\n)\n\nexport const parts = anatomy.build()\n","import { createScope } from \"@zag-js/dom-query\"\nimport type { MachineContext as Ctx } from \"./steps.types\"\n\nexport const dom = createScope({\n getRootId: (ctx: Ctx) => ctx.ids?.root ?? `steps:${ctx.id}`,\n getListId: (ctx: Ctx) => ctx.ids?.list ?? `steps:${ctx.id}:list`,\n getTriggerId: (ctx: Ctx, index: number) => ctx.ids?.triggerId?.(index) ?? `steps:${ctx.id}:trigger:${index}`,\n getContentId: (ctx: Ctx, index: number) => ctx.ids?.contentId?.(index) ?? `steps:${ctx.id}:content:${index}`,\n})\n","import type { NormalizeProps, PropTypes } from \"@zag-js/types\"\nimport type { State, Send, ItemProps, ItemState, MachineApi } from \"./steps.types\"\nimport { parts } from \"./steps.anatomy\"\nimport { dom } from \"./steps.dom\"\nimport { dataAttr } from \"@zag-js/dom-query\"\n\nexport function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> {\n const value = state.context.step\n const count = state.context.count\n const percent = state.context.percent\n const hasNextStep = state.context.hasNextStep\n const hasPrevStep = state.context.hasPrevStep\n\n const getItemState = (props: ItemProps): ItemState => ({\n triggerId: dom.getTriggerId(state.context, props.index),\n contentId: dom.getContentId(state.context, props.index),\n current: props.index === value,\n completed: props.index < value,\n index: props.index,\n first: props.index === 0,\n last: props.index === count - 1,\n })\n\n const goToNextStep = () => {\n send({ type: \"STEP.NEXT\", src: \"next.trigger.click\" })\n }\n\n const goToPrevStep = () => {\n send({ type: \"STEP.PREV\", src: \"prev.trigger.click\" })\n }\n\n const resetStep = () => {\n send({ type: \"STEP.RESET\", src: \"reset.trigger.click\" })\n }\n\n const setValue = (value: number) => {\n send({ type: \"STEP.SET\", value, src: \"api.setValue\" })\n }\n\n return {\n value,\n count,\n percent,\n hasNextStep,\n hasPrevStep,\n goToNextStep,\n goToPrevStep,\n resetStep,\n getItemState,\n setValue,\n\n getRootProps() {\n return normalize.element({\n ...parts.root.attrs,\n id: dom.getRootId(state.context),\n dir: state.context.dir,\n \"data-orientation\": state.context.orientation,\n style: {\n \"--percent\": `${percent}%`,\n },\n })\n },\n\n getListProps() {\n return normalize.element({\n ...parts.list.attrs,\n dir: state.context.dir,\n id: dom.getListId(state.context),\n role: \"tablist\",\n \"aria-orientation\": state.context.orientation,\n \"data-orientation\": state.context.orientation,\n })\n },\n\n getItemProps(props) {\n const itemState = getItemState(props)\n return normalize.element({\n ...parts.item.attrs,\n dir: state.context.dir,\n \"aria-current\": itemState.current ? \"step\" : undefined,\n \"data-orientation\": state.context.orientation,\n })\n },\n\n getTriggerProps(props) {\n const itemState = getItemState(props)\n return normalize.button({\n ...parts.trigger.attrs,\n id: itemState.triggerId,\n role: \"tab\",\n dir: state.context.dir,\n tabIndex: !state.context.linear || itemState.current ? 0 : -1,\n \"aria-selected\": itemState.current,\n \"aria-controls\": itemState.contentId,\n \"data-state\": itemState.current ? \"open\" : \"closed\",\n \"data-orientation\": state.context.orientation,\n \"data-complete\": dataAttr(itemState.completed),\n \"data-current\": dataAttr(itemState.current),\n \"data-incomplete\": dataAttr(!itemState.current),\n onClick(event) {\n if (event.defaultPrevented) return\n if (state.context.linear) return\n send({ type: \"STEP.SET\", value: props.index, src: \"trigger.click\" })\n },\n })\n },\n\n getContentProps(props) {\n const itemState = getItemState(props)\n return normalize.element({\n ...parts.content.attrs,\n dir: state.context.dir,\n id: itemState.contentId,\n role: \"tabpanel\",\n tabIndex: 0,\n hidden: !itemState.current,\n \"data-state\": itemState.current ? \"open\" : \"closed\",\n \"data-orientation\": state.context.orientation,\n \"aria-labelledby\": itemState.triggerId,\n })\n },\n\n getIndicatorProps(props) {\n const itemState = getItemState(props)\n return normalize.element({\n ...parts.indicator.attrs,\n dir: state.context.dir,\n \"aria-hidden\": true,\n \"data-complete\": dataAttr(itemState.completed),\n \"data-current\": dataAttr(itemState.current),\n \"data-incomplete\": dataAttr(!itemState.current),\n })\n },\n\n getSeparatorProps(props) {\n const itemState = getItemState(props)\n return normalize.element({\n ...parts.separator.attrs,\n dir: state.context.dir,\n \"data-orientation\": state.context.orientation,\n \"data-complete\": dataAttr(itemState.completed),\n \"data-current\": dataAttr(itemState.current),\n \"data-incomplete\": dataAttr(!itemState.current),\n })\n },\n\n getNextTriggerProps() {\n return normalize.button({\n ...parts.nextTrigger.attrs,\n dir: state.context.dir,\n type: \"button\",\n disabled: !hasNextStep,\n onClick(event) {\n if (event.defaultPrevented) return\n goToNextStep()\n },\n })\n },\n\n getPrevTriggerProps() {\n return normalize.button({\n dir: state.context.dir,\n ...parts.prevTrigger.attrs,\n type: \"button\",\n disabled: !hasPrevStep,\n onClick(event) {\n if (event.defaultPrevented) return\n goToPrevStep()\n },\n })\n },\n\n getProgressProps() {\n return normalize.element({\n dir: state.context.dir,\n ...parts.progress.attrs,\n role: \"progressbar\",\n \"aria-valuenow\": percent,\n \"aria-valuemin\": 0,\n \"aria-valuemax\": 100,\n \"aria-valuetext\": `${percent}% complete`,\n \"data-complete\": dataAttr(percent === 100),\n })\n },\n }\n}\n","import { createMachine } from \"@zag-js/core\"\nimport { compact, isEqual } from \"@zag-js/utils\"\nimport type { MachineContext, MachineState, UserDefinedContext } from \"./steps.types\"\n\nexport function machine(userContext: UserDefinedContext) {\n const ctx = compact(userContext)\n return createMachine<MachineContext, MachineState>(\n {\n id: \"steps\",\n initial: \"idle\",\n\n context: {\n step: 0,\n count: 1,\n linear: false,\n orientation: \"horizontal\",\n ...ctx,\n },\n\n computed: {\n percent: (ctx) => (ctx.step / ctx.count) * 100,\n hasNextStep: (ctx) => ctx.step < ctx.count,\n hasPrevStep: (ctx) => ctx.step > 0,\n },\n\n states: {\n idle: {\n on: {\n \"STEP.SET\": {\n actions: \"setStep\",\n },\n \"STEP.NEXT\": {\n actions: \"goToNextStep\",\n },\n \"STEP.PREV\": {\n actions: \"goToPrevStep\",\n },\n \"STEP.RESET\": {\n actions: \"resetStep\",\n },\n },\n },\n },\n },\n {\n actions: {\n goToNextStep(ctx) {\n const value = Math.min(ctx.step + 1, ctx.count)\n set.value(ctx, value)\n },\n goToPrevStep(ctx) {\n const value = Math.max(ctx.step - 1, 0)\n set.value(ctx, value)\n },\n resetStep(ctx) {\n set.value(ctx, 0)\n },\n setStep(ctx, event) {\n const value = event.value\n const inRange = value >= 0 && value < ctx.count\n if (!inRange) throw new RangeError(`Index ${value} is out of bounds`)\n set.value(ctx, value)\n },\n },\n },\n )\n}\n\nconst set = {\n value(ctx: MachineContext, step: number) {\n if (isEqual(ctx.step, step)) return\n ctx.step = step\n ctx.onStepChange?.({ step })\n },\n}\n","import { createProps } from \"@zag-js/types\"\nimport { createSplitProps } from \"@zag-js/utils\"\nimport type { UserDefinedContext } from \"./steps.types\"\n\nexport const props = createProps<UserDefinedContext>()([\n \"count\",\n \"dir\",\n \"getRootNode\",\n \"id\",\n \"ids\",\n \"linear\",\n \"onStepChange\",\n \"onStepComplete\",\n \"orientation\",\n \"step\",\n])\n\nexport const splitProps = createSplitProps<Partial<UserDefinedContext>>(props)\n"],"mappings":"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","names":["import_dom_query","props","value","ctx","import_utils"]}
|
package/dist/index.mjs
CHANGED
|
@@ -8,8 +8,6 @@ var anatomy = createAnatomy("steps").parts(
|
|
|
8
8
|
"indicator",
|
|
9
9
|
"separator",
|
|
10
10
|
"content",
|
|
11
|
-
"title",
|
|
12
|
-
"description",
|
|
13
11
|
"nextTrigger",
|
|
14
12
|
"prevTrigger",
|
|
15
13
|
"progress"
|
|
@@ -102,7 +100,7 @@ function connect(state, send, normalize) {
|
|
|
102
100
|
id: itemState.triggerId,
|
|
103
101
|
role: "tab",
|
|
104
102
|
dir: state.context.dir,
|
|
105
|
-
tabIndex: state.context.
|
|
103
|
+
tabIndex: !state.context.linear || itemState.current ? 0 : -1,
|
|
106
104
|
"aria-selected": itemState.current,
|
|
107
105
|
"aria-controls": itemState.contentId,
|
|
108
106
|
"data-state": itemState.current ? "open" : "closed",
|
|
@@ -112,7 +110,7 @@ function connect(state, send, normalize) {
|
|
|
112
110
|
"data-incomplete": dataAttr(!itemState.current),
|
|
113
111
|
onClick(event) {
|
|
114
112
|
if (event.defaultPrevented) return;
|
|
115
|
-
if (
|
|
113
|
+
if (state.context.linear) return;
|
|
116
114
|
send({ type: "STEP.SET", value: props2.index, src: "trigger.click" });
|
|
117
115
|
}
|
|
118
116
|
});
|
|
@@ -204,6 +202,8 @@ function machine(userContext) {
|
|
|
204
202
|
context: {
|
|
205
203
|
step: 0,
|
|
206
204
|
count: 1,
|
|
205
|
+
linear: false,
|
|
206
|
+
orientation: "horizontal",
|
|
207
207
|
...ctx
|
|
208
208
|
},
|
|
209
209
|
computed: {
|
|
@@ -214,6 +214,9 @@ function machine(userContext) {
|
|
|
214
214
|
states: {
|
|
215
215
|
idle: {
|
|
216
216
|
on: {
|
|
217
|
+
"STEP.SET": {
|
|
218
|
+
actions: "setStep"
|
|
219
|
+
},
|
|
217
220
|
"STEP.NEXT": {
|
|
218
221
|
actions: "goToNextStep"
|
|
219
222
|
},
|
|
@@ -267,10 +270,10 @@ var props = createProps()([
|
|
|
267
270
|
"getRootNode",
|
|
268
271
|
"id",
|
|
269
272
|
"ids",
|
|
273
|
+
"linear",
|
|
270
274
|
"onStepChange",
|
|
271
275
|
"onStepComplete",
|
|
272
276
|
"orientation",
|
|
273
|
-
"skippable",
|
|
274
277
|
"step"
|
|
275
278
|
]);
|
|
276
279
|
var splitProps = createSplitProps(props);
|
package/dist/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/steps.anatomy.ts","../src/steps.dom.ts","../src/steps.connect.ts","../src/steps.machine.ts","../src/steps.props.ts"],"sourcesContent":["import { createAnatomy } from \"@zag-js/anatomy\"\n\nexport const anatomy = createAnatomy(\"steps\").parts(\n \"root\",\n \"list\",\n \"item\",\n \"trigger\",\n \"indicator\",\n \"separator\",\n \"content\",\n \"title\",\n \"description\",\n \"nextTrigger\",\n \"prevTrigger\",\n \"progress\",\n)\n\nexport const parts = anatomy.build()\n","import { createScope } from \"@zag-js/dom-query\"\nimport type { MachineContext as Ctx } from \"./steps.types\"\n\nexport const dom = createScope({\n getRootId: (ctx: Ctx) => ctx.ids?.root ?? `steps:${ctx.id}`,\n getListId: (ctx: Ctx) => ctx.ids?.list ?? `steps:${ctx.id}:list`,\n getTriggerId: (ctx: Ctx, index: number) => ctx.ids?.triggerId?.(index) ?? `steps:${ctx.id}:trigger:${index}`,\n getContentId: (ctx: Ctx, index: number) => ctx.ids?.contentId?.(index) ?? `steps:${ctx.id}:content:${index}`,\n})\n","import type { NormalizeProps, PropTypes } from \"@zag-js/types\"\nimport type { State, Send, ItemProps, ItemState, MachineApi } from \"./steps.types\"\nimport { parts } from \"./steps.anatomy\"\nimport { dom } from \"./steps.dom\"\nimport { dataAttr } from \"@zag-js/dom-query\"\n\nexport function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> {\n const value = state.context.step\n const count = state.context.count\n const percent = state.context.percent\n const hasNextStep = state.context.hasNextStep\n const hasPrevStep = state.context.hasPrevStep\n\n const getItemState = (props: ItemProps): ItemState => ({\n triggerId: dom.getTriggerId(state.context, props.index),\n contentId: dom.getContentId(state.context, props.index),\n current: props.index === value,\n completed: props.index < value,\n index: props.index,\n first: props.index === 0,\n last: props.index === count - 1,\n })\n\n const goToNextStep = () => {\n send({ type: \"STEP.NEXT\", src: \"next.trigger.click\" })\n }\n\n const goToPrevStep = () => {\n send({ type: \"STEP.PREV\", src: \"prev.trigger.click\" })\n }\n\n const resetStep = () => {\n send({ type: \"STEP.RESET\", src: \"reset.trigger.click\" })\n }\n\n const setValue = (value: number) => {\n send({ type: \"STEP.SET\", value, src: \"api.setValue\" })\n }\n\n return {\n value,\n count,\n percent,\n hasNextStep,\n hasPrevStep,\n goToNextStep,\n goToPrevStep,\n resetStep,\n getItemState,\n setValue,\n\n getRootProps() {\n return normalize.element({\n ...parts.root.attrs,\n id: dom.getRootId(state.context),\n dir: state.context.dir,\n \"data-orientation\": state.context.orientation,\n style: {\n \"--percent\": `${percent}%`,\n },\n })\n },\n\n getListProps() {\n return normalize.element({\n ...parts.list.attrs,\n dir: state.context.dir,\n id: dom.getListId(state.context),\n role: \"tablist\",\n \"aria-orientation\": state.context.orientation,\n \"data-orientation\": state.context.orientation,\n })\n },\n\n getItemProps(props) {\n const itemState = getItemState(props)\n return normalize.element({\n ...parts.item.attrs,\n dir: state.context.dir,\n \"aria-current\": itemState.current ? \"step\" : undefined,\n \"data-orientation\": state.context.orientation,\n })\n },\n\n getTriggerProps(props) {\n const itemState = getItemState(props)\n return normalize.button({\n ...parts.trigger.attrs,\n id: itemState.triggerId,\n role: \"tab\",\n dir: state.context.dir,\n tabIndex: state.context.skippable || itemState.current ? 0 : -1,\n \"aria-selected\": itemState.current,\n \"aria-controls\": itemState.contentId,\n \"data-state\": itemState.current ? \"open\" : \"closed\",\n \"data-orientation\": state.context.orientation,\n \"data-complete\": dataAttr(itemState.completed),\n \"data-current\": dataAttr(itemState.current),\n \"data-incomplete\": dataAttr(!itemState.current),\n onClick(event) {\n if (event.defaultPrevented) return\n if (!state.context.skippable) return\n send({ type: \"STEP.SET\", value: props.index, src: \"trigger.click\" })\n },\n })\n },\n\n getContentProps(props) {\n const itemState = getItemState(props)\n return normalize.element({\n ...parts.content.attrs,\n dir: state.context.dir,\n id: itemState.contentId,\n role: \"tabpanel\",\n tabIndex: 0,\n hidden: !itemState.current,\n \"data-state\": itemState.current ? \"open\" : \"closed\",\n \"data-orientation\": state.context.orientation,\n \"aria-labelledby\": itemState.triggerId,\n })\n },\n\n getIndicatorProps(props) {\n const itemState = getItemState(props)\n return normalize.element({\n ...parts.indicator.attrs,\n dir: state.context.dir,\n \"aria-hidden\": true,\n \"data-complete\": dataAttr(itemState.completed),\n \"data-current\": dataAttr(itemState.current),\n \"data-incomplete\": dataAttr(!itemState.current),\n })\n },\n\n getSeparatorProps(props) {\n const itemState = getItemState(props)\n return normalize.element({\n ...parts.separator.attrs,\n dir: state.context.dir,\n \"data-orientation\": state.context.orientation,\n \"data-complete\": dataAttr(itemState.completed),\n \"data-current\": dataAttr(itemState.current),\n \"data-incomplete\": dataAttr(!itemState.current),\n })\n },\n\n getNextTriggerProps() {\n return normalize.button({\n ...parts.nextTrigger.attrs,\n dir: state.context.dir,\n type: \"button\",\n disabled: !hasNextStep,\n onClick(event) {\n if (event.defaultPrevented) return\n goToNextStep()\n },\n })\n },\n\n getPrevTriggerProps() {\n return normalize.button({\n dir: state.context.dir,\n ...parts.prevTrigger.attrs,\n type: \"button\",\n disabled: !hasPrevStep,\n onClick(event) {\n if (event.defaultPrevented) return\n goToPrevStep()\n },\n })\n },\n\n getProgressProps() {\n return normalize.element({\n dir: state.context.dir,\n ...parts.progress.attrs,\n role: \"progressbar\",\n \"aria-valuenow\": percent,\n \"aria-valuemin\": 0,\n \"aria-valuemax\": 100,\n \"aria-valuetext\": `${percent}% complete`,\n \"data-complete\": dataAttr(percent === 100),\n })\n },\n }\n}\n","import { createMachine } from \"@zag-js/core\"\nimport { compact, isEqual } from \"@zag-js/utils\"\nimport type { MachineContext, MachineState, UserDefinedContext } from \"./steps.types\"\n\nexport function machine(userContext: UserDefinedContext) {\n const ctx = compact(userContext)\n return createMachine<MachineContext, MachineState>(\n {\n id: \"steps\",\n initial: \"idle\",\n\n context: {\n step: 0,\n count: 1,\n ...ctx,\n },\n\n computed: {\n percent: (ctx) => (ctx.step / ctx.count) * 100,\n hasNextStep: (ctx) => ctx.step < ctx.count,\n hasPrevStep: (ctx) => ctx.step > 0,\n },\n\n states: {\n idle: {\n on: {\n \"STEP.NEXT\": {\n actions: \"goToNextStep\",\n },\n \"STEP.PREV\": {\n actions: \"goToPrevStep\",\n },\n \"STEP.RESET\": {\n actions: \"resetStep\",\n },\n },\n },\n },\n },\n {\n actions: {\n goToNextStep(ctx) {\n const value = Math.min(ctx.step + 1, ctx.count)\n set.value(ctx, value)\n },\n goToPrevStep(ctx) {\n const value = Math.max(ctx.step - 1, 0)\n set.value(ctx, value)\n },\n resetStep(ctx) {\n set.value(ctx, 0)\n },\n setStep(ctx, event) {\n const value = event.value\n const inRange = value >= 0 && value < ctx.count\n if (!inRange) throw new RangeError(`Index ${value} is out of bounds`)\n set.value(ctx, value)\n },\n },\n },\n )\n}\n\nconst set = {\n value(ctx: MachineContext, step: number) {\n if (isEqual(ctx.step, step)) return\n ctx.step = step\n ctx.onStepChange?.({ step })\n },\n}\n","import { createProps } from \"@zag-js/types\"\nimport { createSplitProps } from \"@zag-js/utils\"\nimport type { UserDefinedContext } from \"./steps.types\"\n\nexport const props = createProps<UserDefinedContext>()([\n \"count\",\n \"dir\",\n \"getRootNode\",\n \"id\",\n \"ids\",\n \"onStepChange\",\n \"onStepComplete\",\n \"orientation\",\n \"skippable\",\n \"step\",\n])\n\nexport const splitProps = createSplitProps<Partial<UserDefinedContext>>(props)\n"],"mappings":"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","names":["props","value","ctx"]}
|
|
1
|
+
{"version":3,"sources":["../src/steps.anatomy.ts","../src/steps.dom.ts","../src/steps.connect.ts","../src/steps.machine.ts","../src/steps.props.ts"],"sourcesContent":["import { createAnatomy } from \"@zag-js/anatomy\"\n\nexport const anatomy = createAnatomy(\"steps\").parts(\n \"root\",\n \"list\",\n \"item\",\n \"trigger\",\n \"indicator\",\n \"separator\",\n \"content\",\n \"nextTrigger\",\n \"prevTrigger\",\n \"progress\",\n)\n\nexport const parts = anatomy.build()\n","import { createScope } from \"@zag-js/dom-query\"\nimport type { MachineContext as Ctx } from \"./steps.types\"\n\nexport const dom = createScope({\n getRootId: (ctx: Ctx) => ctx.ids?.root ?? `steps:${ctx.id}`,\n getListId: (ctx: Ctx) => ctx.ids?.list ?? `steps:${ctx.id}:list`,\n getTriggerId: (ctx: Ctx, index: number) => ctx.ids?.triggerId?.(index) ?? `steps:${ctx.id}:trigger:${index}`,\n getContentId: (ctx: Ctx, index: number) => ctx.ids?.contentId?.(index) ?? `steps:${ctx.id}:content:${index}`,\n})\n","import type { NormalizeProps, PropTypes } from \"@zag-js/types\"\nimport type { State, Send, ItemProps, ItemState, MachineApi } from \"./steps.types\"\nimport { parts } from \"./steps.anatomy\"\nimport { dom } from \"./steps.dom\"\nimport { dataAttr } from \"@zag-js/dom-query\"\n\nexport function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> {\n const value = state.context.step\n const count = state.context.count\n const percent = state.context.percent\n const hasNextStep = state.context.hasNextStep\n const hasPrevStep = state.context.hasPrevStep\n\n const getItemState = (props: ItemProps): ItemState => ({\n triggerId: dom.getTriggerId(state.context, props.index),\n contentId: dom.getContentId(state.context, props.index),\n current: props.index === value,\n completed: props.index < value,\n index: props.index,\n first: props.index === 0,\n last: props.index === count - 1,\n })\n\n const goToNextStep = () => {\n send({ type: \"STEP.NEXT\", src: \"next.trigger.click\" })\n }\n\n const goToPrevStep = () => {\n send({ type: \"STEP.PREV\", src: \"prev.trigger.click\" })\n }\n\n const resetStep = () => {\n send({ type: \"STEP.RESET\", src: \"reset.trigger.click\" })\n }\n\n const setValue = (value: number) => {\n send({ type: \"STEP.SET\", value, src: \"api.setValue\" })\n }\n\n return {\n value,\n count,\n percent,\n hasNextStep,\n hasPrevStep,\n goToNextStep,\n goToPrevStep,\n resetStep,\n getItemState,\n setValue,\n\n getRootProps() {\n return normalize.element({\n ...parts.root.attrs,\n id: dom.getRootId(state.context),\n dir: state.context.dir,\n \"data-orientation\": state.context.orientation,\n style: {\n \"--percent\": `${percent}%`,\n },\n })\n },\n\n getListProps() {\n return normalize.element({\n ...parts.list.attrs,\n dir: state.context.dir,\n id: dom.getListId(state.context),\n role: \"tablist\",\n \"aria-orientation\": state.context.orientation,\n \"data-orientation\": state.context.orientation,\n })\n },\n\n getItemProps(props) {\n const itemState = getItemState(props)\n return normalize.element({\n ...parts.item.attrs,\n dir: state.context.dir,\n \"aria-current\": itemState.current ? \"step\" : undefined,\n \"data-orientation\": state.context.orientation,\n })\n },\n\n getTriggerProps(props) {\n const itemState = getItemState(props)\n return normalize.button({\n ...parts.trigger.attrs,\n id: itemState.triggerId,\n role: \"tab\",\n dir: state.context.dir,\n tabIndex: !state.context.linear || itemState.current ? 0 : -1,\n \"aria-selected\": itemState.current,\n \"aria-controls\": itemState.contentId,\n \"data-state\": itemState.current ? \"open\" : \"closed\",\n \"data-orientation\": state.context.orientation,\n \"data-complete\": dataAttr(itemState.completed),\n \"data-current\": dataAttr(itemState.current),\n \"data-incomplete\": dataAttr(!itemState.current),\n onClick(event) {\n if (event.defaultPrevented) return\n if (state.context.linear) return\n send({ type: \"STEP.SET\", value: props.index, src: \"trigger.click\" })\n },\n })\n },\n\n getContentProps(props) {\n const itemState = getItemState(props)\n return normalize.element({\n ...parts.content.attrs,\n dir: state.context.dir,\n id: itemState.contentId,\n role: \"tabpanel\",\n tabIndex: 0,\n hidden: !itemState.current,\n \"data-state\": itemState.current ? \"open\" : \"closed\",\n \"data-orientation\": state.context.orientation,\n \"aria-labelledby\": itemState.triggerId,\n })\n },\n\n getIndicatorProps(props) {\n const itemState = getItemState(props)\n return normalize.element({\n ...parts.indicator.attrs,\n dir: state.context.dir,\n \"aria-hidden\": true,\n \"data-complete\": dataAttr(itemState.completed),\n \"data-current\": dataAttr(itemState.current),\n \"data-incomplete\": dataAttr(!itemState.current),\n })\n },\n\n getSeparatorProps(props) {\n const itemState = getItemState(props)\n return normalize.element({\n ...parts.separator.attrs,\n dir: state.context.dir,\n \"data-orientation\": state.context.orientation,\n \"data-complete\": dataAttr(itemState.completed),\n \"data-current\": dataAttr(itemState.current),\n \"data-incomplete\": dataAttr(!itemState.current),\n })\n },\n\n getNextTriggerProps() {\n return normalize.button({\n ...parts.nextTrigger.attrs,\n dir: state.context.dir,\n type: \"button\",\n disabled: !hasNextStep,\n onClick(event) {\n if (event.defaultPrevented) return\n goToNextStep()\n },\n })\n },\n\n getPrevTriggerProps() {\n return normalize.button({\n dir: state.context.dir,\n ...parts.prevTrigger.attrs,\n type: \"button\",\n disabled: !hasPrevStep,\n onClick(event) {\n if (event.defaultPrevented) return\n goToPrevStep()\n },\n })\n },\n\n getProgressProps() {\n return normalize.element({\n dir: state.context.dir,\n ...parts.progress.attrs,\n role: \"progressbar\",\n \"aria-valuenow\": percent,\n \"aria-valuemin\": 0,\n \"aria-valuemax\": 100,\n \"aria-valuetext\": `${percent}% complete`,\n \"data-complete\": dataAttr(percent === 100),\n })\n },\n }\n}\n","import { createMachine } from \"@zag-js/core\"\nimport { compact, isEqual } from \"@zag-js/utils\"\nimport type { MachineContext, MachineState, UserDefinedContext } from \"./steps.types\"\n\nexport function machine(userContext: UserDefinedContext) {\n const ctx = compact(userContext)\n return createMachine<MachineContext, MachineState>(\n {\n id: \"steps\",\n initial: \"idle\",\n\n context: {\n step: 0,\n count: 1,\n linear: false,\n orientation: \"horizontal\",\n ...ctx,\n },\n\n computed: {\n percent: (ctx) => (ctx.step / ctx.count) * 100,\n hasNextStep: (ctx) => ctx.step < ctx.count,\n hasPrevStep: (ctx) => ctx.step > 0,\n },\n\n states: {\n idle: {\n on: {\n \"STEP.SET\": {\n actions: \"setStep\",\n },\n \"STEP.NEXT\": {\n actions: \"goToNextStep\",\n },\n \"STEP.PREV\": {\n actions: \"goToPrevStep\",\n },\n \"STEP.RESET\": {\n actions: \"resetStep\",\n },\n },\n },\n },\n },\n {\n actions: {\n goToNextStep(ctx) {\n const value = Math.min(ctx.step + 1, ctx.count)\n set.value(ctx, value)\n },\n goToPrevStep(ctx) {\n const value = Math.max(ctx.step - 1, 0)\n set.value(ctx, value)\n },\n resetStep(ctx) {\n set.value(ctx, 0)\n },\n setStep(ctx, event) {\n const value = event.value\n const inRange = value >= 0 && value < ctx.count\n if (!inRange) throw new RangeError(`Index ${value} is out of bounds`)\n set.value(ctx, value)\n },\n },\n },\n )\n}\n\nconst set = {\n value(ctx: MachineContext, step: number) {\n if (isEqual(ctx.step, step)) return\n ctx.step = step\n ctx.onStepChange?.({ step })\n },\n}\n","import { createProps } from \"@zag-js/types\"\nimport { createSplitProps } from \"@zag-js/utils\"\nimport type { UserDefinedContext } from \"./steps.types\"\n\nexport const props = createProps<UserDefinedContext>()([\n \"count\",\n \"dir\",\n \"getRootNode\",\n \"id\",\n \"ids\",\n \"linear\",\n \"onStepChange\",\n \"onStepComplete\",\n \"orientation\",\n \"step\",\n])\n\nexport const splitProps = createSplitProps<Partial<UserDefinedContext>>(props)\n"],"mappings":"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","names":["props","value","ctx"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zag-js/steps",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.62.1",
|
|
4
4
|
"description": "Core logic for the steps widget implemented as a state machine",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"js",
|
|
@@ -28,11 +28,11 @@
|
|
|
28
28
|
"url": "https://github.com/chakra-ui/zag/issues"
|
|
29
29
|
},
|
|
30
30
|
"dependencies": {
|
|
31
|
-
"@zag-js/anatomy": "0.
|
|
32
|
-
"@zag-js/core": "0.
|
|
33
|
-
"@zag-js/dom-query": "0.
|
|
34
|
-
"@zag-js/utils": "0.
|
|
35
|
-
"@zag-js/types": "0.
|
|
31
|
+
"@zag-js/anatomy": "0.62.1",
|
|
32
|
+
"@zag-js/core": "0.62.1",
|
|
33
|
+
"@zag-js/dom-query": "0.62.1",
|
|
34
|
+
"@zag-js/utils": "0.62.1",
|
|
35
|
+
"@zag-js/types": "0.62.1"
|
|
36
36
|
},
|
|
37
37
|
"devDependencies": {
|
|
38
38
|
"clean-package": "2.2.0"
|
package/src/steps.anatomy.ts
CHANGED
package/src/steps.connect.ts
CHANGED
|
@@ -89,7 +89,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
|
|
|
89
89
|
id: itemState.triggerId,
|
|
90
90
|
role: "tab",
|
|
91
91
|
dir: state.context.dir,
|
|
92
|
-
tabIndex: state.context.
|
|
92
|
+
tabIndex: !state.context.linear || itemState.current ? 0 : -1,
|
|
93
93
|
"aria-selected": itemState.current,
|
|
94
94
|
"aria-controls": itemState.contentId,
|
|
95
95
|
"data-state": itemState.current ? "open" : "closed",
|
|
@@ -99,7 +99,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
|
|
|
99
99
|
"data-incomplete": dataAttr(!itemState.current),
|
|
100
100
|
onClick(event) {
|
|
101
101
|
if (event.defaultPrevented) return
|
|
102
|
-
if (
|
|
102
|
+
if (state.context.linear) return
|
|
103
103
|
send({ type: "STEP.SET", value: props.index, src: "trigger.click" })
|
|
104
104
|
},
|
|
105
105
|
})
|
package/src/steps.machine.ts
CHANGED
|
@@ -12,6 +12,8 @@ export function machine(userContext: UserDefinedContext) {
|
|
|
12
12
|
context: {
|
|
13
13
|
step: 0,
|
|
14
14
|
count: 1,
|
|
15
|
+
linear: false,
|
|
16
|
+
orientation: "horizontal",
|
|
15
17
|
...ctx,
|
|
16
18
|
},
|
|
17
19
|
|
|
@@ -24,6 +26,9 @@ export function machine(userContext: UserDefinedContext) {
|
|
|
24
26
|
states: {
|
|
25
27
|
idle: {
|
|
26
28
|
on: {
|
|
29
|
+
"STEP.SET": {
|
|
30
|
+
actions: "setStep",
|
|
31
|
+
},
|
|
27
32
|
"STEP.NEXT": {
|
|
28
33
|
actions: "goToNextStep",
|
|
29
34
|
},
|
package/src/steps.props.ts
CHANGED
package/src/steps.types.ts
CHANGED
|
@@ -38,9 +38,9 @@ interface PublicContext extends DirectionProperty, CommonProperties {
|
|
|
38
38
|
*/
|
|
39
39
|
onStepComplete?: VoidFunction
|
|
40
40
|
/**
|
|
41
|
-
* If `true`, the stepper
|
|
41
|
+
* If `true`, the stepper requires the user to complete the steps in order
|
|
42
42
|
*/
|
|
43
|
-
|
|
43
|
+
linear?: boolean
|
|
44
44
|
/**
|
|
45
45
|
* The orientation of the stepper
|
|
46
46
|
*/
|