@zag-js/steps 0.70.0 → 0.72.0
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 +2 -1
- package/dist/index.d.ts +2 -1
- package/dist/index.js +38 -78
- package/dist/index.mjs +19 -34
- package/package.json +7 -8
- package/dist/index.js.map +0 -1
- package/dist/index.mjs.map +0 -1
- package/src/index.ts +0 -13
- package/src/steps.anatomy.ts +0 -16
- package/src/steps.connect.ts +0 -190
- package/src/steps.dom.ts +0 -9
- package/src/steps.machine.ts +0 -75
- package/src/steps.props.ts +0 -18
- package/src/steps.types.ts +0 -146
package/dist/index.d.mts
CHANGED
|
@@ -69,6 +69,7 @@ interface ItemState {
|
|
|
69
69
|
contentId: string;
|
|
70
70
|
current: boolean;
|
|
71
71
|
completed: boolean;
|
|
72
|
+
incomplete: boolean;
|
|
72
73
|
last: boolean;
|
|
73
74
|
first: boolean;
|
|
74
75
|
}
|
|
@@ -96,7 +97,7 @@ interface MachineApi<T extends PropTypes = PropTypes> {
|
|
|
96
97
|
/**
|
|
97
98
|
* Function to set the value of the stepper.
|
|
98
99
|
*/
|
|
99
|
-
|
|
100
|
+
setStep(step: number): void;
|
|
100
101
|
/**
|
|
101
102
|
* Function to go to the next step.
|
|
102
103
|
*/
|
package/dist/index.d.ts
CHANGED
|
@@ -69,6 +69,7 @@ interface ItemState {
|
|
|
69
69
|
contentId: string;
|
|
70
70
|
current: boolean;
|
|
71
71
|
completed: boolean;
|
|
72
|
+
incomplete: boolean;
|
|
72
73
|
last: boolean;
|
|
73
74
|
first: boolean;
|
|
74
75
|
}
|
|
@@ -96,7 +97,7 @@ interface MachineApi<T extends PropTypes = PropTypes> {
|
|
|
96
97
|
/**
|
|
97
98
|
* Function to set the value of the stepper.
|
|
98
99
|
*/
|
|
99
|
-
|
|
100
|
+
setStep(step: number): void;
|
|
100
101
|
/**
|
|
101
102
|
* Function to go to the next step.
|
|
102
103
|
*/
|
package/dist/index.js
CHANGED
|
@@ -1,36 +1,13 @@
|
|
|
1
|
-
|
|
2
|
-
var __defProp = Object.defineProperty;
|
|
3
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
-
var __export = (target, all) => {
|
|
7
|
-
for (var name in all)
|
|
8
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
-
};
|
|
10
|
-
var __copyProps = (to, from, except, desc) => {
|
|
11
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
-
for (let key of __getOwnPropNames(from))
|
|
13
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
-
}
|
|
16
|
-
return to;
|
|
17
|
-
};
|
|
18
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
1
|
+
'use strict';
|
|
19
2
|
|
|
20
|
-
|
|
21
|
-
var
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
machine: () => machine,
|
|
26
|
-
props: () => props,
|
|
27
|
-
splitProps: () => splitProps
|
|
28
|
-
});
|
|
29
|
-
module.exports = __toCommonJS(src_exports);
|
|
3
|
+
var anatomy$1 = require('@zag-js/anatomy');
|
|
4
|
+
var domQuery = require('@zag-js/dom-query');
|
|
5
|
+
var utils = require('@zag-js/utils');
|
|
6
|
+
var core = require('@zag-js/core');
|
|
7
|
+
var types = require('@zag-js/types');
|
|
30
8
|
|
|
31
9
|
// src/steps.anatomy.ts
|
|
32
|
-
var
|
|
33
|
-
var anatomy = (0, import_anatomy.createAnatomy)("steps").parts(
|
|
10
|
+
var anatomy = anatomy$1.createAnatomy("steps").parts(
|
|
34
11
|
"root",
|
|
35
12
|
"list",
|
|
36
13
|
"item",
|
|
@@ -43,14 +20,7 @@ var anatomy = (0, import_anatomy.createAnatomy)("steps").parts(
|
|
|
43
20
|
"progress"
|
|
44
21
|
);
|
|
45
22
|
var parts = anatomy.build();
|
|
46
|
-
|
|
47
|
-
// src/steps.connect.ts
|
|
48
|
-
var import_dom_query2 = require("@zag-js/dom-query");
|
|
49
|
-
var import_utils = require("@zag-js/utils");
|
|
50
|
-
|
|
51
|
-
// src/steps.dom.ts
|
|
52
|
-
var import_dom_query = require("@zag-js/dom-query");
|
|
53
|
-
var dom = (0, import_dom_query.createScope)({
|
|
23
|
+
var dom = domQuery.createScope({
|
|
54
24
|
getRootId: (ctx) => ctx.ids?.root ?? `steps:${ctx.id}`,
|
|
55
25
|
getListId: (ctx) => ctx.ids?.list ?? `steps:${ctx.id}:list`,
|
|
56
26
|
getTriggerId: (ctx, index) => ctx.ids?.triggerId?.(index) ?? `steps:${ctx.id}:trigger:${index}`,
|
|
@@ -59,7 +29,7 @@ var dom = (0, import_dom_query.createScope)({
|
|
|
59
29
|
|
|
60
30
|
// src/steps.connect.ts
|
|
61
31
|
function connect(state, send, normalize) {
|
|
62
|
-
const
|
|
32
|
+
const step = state.context.step;
|
|
63
33
|
const count = state.context.count;
|
|
64
34
|
const percent = state.context.percent;
|
|
65
35
|
const hasNextStep = state.context.hasNextStep;
|
|
@@ -67,8 +37,9 @@ function connect(state, send, normalize) {
|
|
|
67
37
|
const getItemState = (props2) => ({
|
|
68
38
|
triggerId: dom.getTriggerId(state.context, props2.index),
|
|
69
39
|
contentId: dom.getContentId(state.context, props2.index),
|
|
70
|
-
current: props2.index ===
|
|
71
|
-
completed: props2.index <
|
|
40
|
+
current: props2.index === step,
|
|
41
|
+
completed: props2.index < step,
|
|
42
|
+
incomplete: props2.index > step,
|
|
72
43
|
index: props2.index,
|
|
73
44
|
first: props2.index === 0,
|
|
74
45
|
last: props2.index === count - 1
|
|
@@ -82,11 +53,11 @@ function connect(state, send, normalize) {
|
|
|
82
53
|
const resetStep = () => {
|
|
83
54
|
send({ type: "STEP.RESET", src: "reset.trigger.click" });
|
|
84
55
|
};
|
|
85
|
-
const
|
|
86
|
-
send({ type: "STEP.SET", value
|
|
56
|
+
const setStep = (value) => {
|
|
57
|
+
send({ type: "STEP.SET", value, src: "api.setValue" });
|
|
87
58
|
};
|
|
88
59
|
return {
|
|
89
|
-
value,
|
|
60
|
+
value: step,
|
|
90
61
|
count,
|
|
91
62
|
percent,
|
|
92
63
|
hasNextStep,
|
|
@@ -95,7 +66,7 @@ function connect(state, send, normalize) {
|
|
|
95
66
|
goToPrevStep,
|
|
96
67
|
resetStep,
|
|
97
68
|
getItemState,
|
|
98
|
-
|
|
69
|
+
setStep,
|
|
99
70
|
getRootProps() {
|
|
100
71
|
return normalize.element({
|
|
101
72
|
...parts.root.attrs,
|
|
@@ -108,7 +79,7 @@ function connect(state, send, normalize) {
|
|
|
108
79
|
});
|
|
109
80
|
},
|
|
110
81
|
getListProps() {
|
|
111
|
-
const arr =
|
|
82
|
+
const arr = utils.fromLength(state.context.count);
|
|
112
83
|
const triggerIds = arr.map((_, index) => dom.getTriggerId(state.context, index));
|
|
113
84
|
return normalize.element({
|
|
114
85
|
...parts.list.attrs,
|
|
@@ -141,9 +112,9 @@ function connect(state, send, normalize) {
|
|
|
141
112
|
"aria-controls": itemState.contentId,
|
|
142
113
|
"data-state": itemState.current ? "open" : "closed",
|
|
143
114
|
"data-orientation": state.context.orientation,
|
|
144
|
-
"data-complete":
|
|
145
|
-
"data-current":
|
|
146
|
-
"data-incomplete":
|
|
115
|
+
"data-complete": domQuery.dataAttr(itemState.completed),
|
|
116
|
+
"data-current": domQuery.dataAttr(itemState.current),
|
|
117
|
+
"data-incomplete": domQuery.dataAttr(itemState.incomplete),
|
|
147
118
|
onClick(event) {
|
|
148
119
|
if (event.defaultPrevented) return;
|
|
149
120
|
if (state.context.linear) return;
|
|
@@ -171,9 +142,9 @@ function connect(state, send, normalize) {
|
|
|
171
142
|
...parts.indicator.attrs,
|
|
172
143
|
dir: state.context.dir,
|
|
173
144
|
"aria-hidden": true,
|
|
174
|
-
"data-complete":
|
|
175
|
-
"data-current":
|
|
176
|
-
"data-incomplete":
|
|
145
|
+
"data-complete": domQuery.dataAttr(itemState.completed),
|
|
146
|
+
"data-current": domQuery.dataAttr(itemState.current),
|
|
147
|
+
"data-incomplete": domQuery.dataAttr(itemState.incomplete)
|
|
177
148
|
});
|
|
178
149
|
},
|
|
179
150
|
getSeparatorProps(props2) {
|
|
@@ -182,9 +153,9 @@ function connect(state, send, normalize) {
|
|
|
182
153
|
...parts.separator.attrs,
|
|
183
154
|
dir: state.context.dir,
|
|
184
155
|
"data-orientation": state.context.orientation,
|
|
185
|
-
"data-complete":
|
|
186
|
-
"data-current":
|
|
187
|
-
"data-incomplete":
|
|
156
|
+
"data-complete": domQuery.dataAttr(itemState.completed),
|
|
157
|
+
"data-current": domQuery.dataAttr(itemState.current),
|
|
158
|
+
"data-incomplete": domQuery.dataAttr(itemState.incomplete)
|
|
188
159
|
});
|
|
189
160
|
},
|
|
190
161
|
getNextTriggerProps() {
|
|
@@ -220,18 +191,14 @@ function connect(state, send, normalize) {
|
|
|
220
191
|
"aria-valuemin": 0,
|
|
221
192
|
"aria-valuemax": 100,
|
|
222
193
|
"aria-valuetext": `${percent}% complete`,
|
|
223
|
-
"data-complete":
|
|
194
|
+
"data-complete": domQuery.dataAttr(percent === 100)
|
|
224
195
|
});
|
|
225
196
|
}
|
|
226
197
|
};
|
|
227
198
|
}
|
|
228
|
-
|
|
229
|
-
// src/steps.machine.ts
|
|
230
|
-
var import_core = require("@zag-js/core");
|
|
231
|
-
var import_utils2 = require("@zag-js/utils");
|
|
232
199
|
function machine(userContext) {
|
|
233
|
-
const ctx =
|
|
234
|
-
return
|
|
200
|
+
const ctx = utils.compact(userContext);
|
|
201
|
+
return core.createMachine(
|
|
235
202
|
{
|
|
236
203
|
id: "steps",
|
|
237
204
|
initial: "idle",
|
|
@@ -291,16 +258,12 @@ function machine(userContext) {
|
|
|
291
258
|
}
|
|
292
259
|
var set = {
|
|
293
260
|
value(ctx, step) {
|
|
294
|
-
if (
|
|
261
|
+
if (utils.isEqual(ctx.step, step)) return;
|
|
295
262
|
ctx.step = step;
|
|
296
263
|
ctx.onStepChange?.({ step });
|
|
297
264
|
}
|
|
298
265
|
};
|
|
299
|
-
|
|
300
|
-
// src/steps.props.ts
|
|
301
|
-
var import_types = require("@zag-js/types");
|
|
302
|
-
var import_utils3 = require("@zag-js/utils");
|
|
303
|
-
var props = (0, import_types.createProps)()([
|
|
266
|
+
var props = types.createProps()([
|
|
304
267
|
"count",
|
|
305
268
|
"dir",
|
|
306
269
|
"getRootNode",
|
|
@@ -312,13 +275,10 @@ var props = (0, import_types.createProps)()([
|
|
|
312
275
|
"orientation",
|
|
313
276
|
"step"
|
|
314
277
|
]);
|
|
315
|
-
var splitProps =
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
splitProps
|
|
323
|
-
});
|
|
324
|
-
//# sourceMappingURL=index.js.map
|
|
278
|
+
var splitProps = utils.createSplitProps(props);
|
|
279
|
+
|
|
280
|
+
exports.anatomy = anatomy;
|
|
281
|
+
exports.connect = connect;
|
|
282
|
+
exports.machine = machine;
|
|
283
|
+
exports.props = props;
|
|
284
|
+
exports.splitProps = splitProps;
|
package/dist/index.mjs
CHANGED
|
@@ -1,5 +1,10 @@
|
|
|
1
|
+
import { createAnatomy } from '@zag-js/anatomy';
|
|
2
|
+
import { createScope, dataAttr } from '@zag-js/dom-query';
|
|
3
|
+
import { createSplitProps, fromLength, compact, isEqual } from '@zag-js/utils';
|
|
4
|
+
import { createMachine } from '@zag-js/core';
|
|
5
|
+
import { createProps } from '@zag-js/types';
|
|
6
|
+
|
|
1
7
|
// src/steps.anatomy.ts
|
|
2
|
-
import { createAnatomy } from "@zag-js/anatomy";
|
|
3
8
|
var anatomy = createAnatomy("steps").parts(
|
|
4
9
|
"root",
|
|
5
10
|
"list",
|
|
@@ -13,13 +18,6 @@ var anatomy = createAnatomy("steps").parts(
|
|
|
13
18
|
"progress"
|
|
14
19
|
);
|
|
15
20
|
var parts = anatomy.build();
|
|
16
|
-
|
|
17
|
-
// src/steps.connect.ts
|
|
18
|
-
import { dataAttr } from "@zag-js/dom-query";
|
|
19
|
-
import { fromLength } from "@zag-js/utils";
|
|
20
|
-
|
|
21
|
-
// src/steps.dom.ts
|
|
22
|
-
import { createScope } from "@zag-js/dom-query";
|
|
23
21
|
var dom = createScope({
|
|
24
22
|
getRootId: (ctx) => ctx.ids?.root ?? `steps:${ctx.id}`,
|
|
25
23
|
getListId: (ctx) => ctx.ids?.list ?? `steps:${ctx.id}:list`,
|
|
@@ -29,7 +27,7 @@ var dom = createScope({
|
|
|
29
27
|
|
|
30
28
|
// src/steps.connect.ts
|
|
31
29
|
function connect(state, send, normalize) {
|
|
32
|
-
const
|
|
30
|
+
const step = state.context.step;
|
|
33
31
|
const count = state.context.count;
|
|
34
32
|
const percent = state.context.percent;
|
|
35
33
|
const hasNextStep = state.context.hasNextStep;
|
|
@@ -37,8 +35,9 @@ function connect(state, send, normalize) {
|
|
|
37
35
|
const getItemState = (props2) => ({
|
|
38
36
|
triggerId: dom.getTriggerId(state.context, props2.index),
|
|
39
37
|
contentId: dom.getContentId(state.context, props2.index),
|
|
40
|
-
current: props2.index ===
|
|
41
|
-
completed: props2.index <
|
|
38
|
+
current: props2.index === step,
|
|
39
|
+
completed: props2.index < step,
|
|
40
|
+
incomplete: props2.index > step,
|
|
42
41
|
index: props2.index,
|
|
43
42
|
first: props2.index === 0,
|
|
44
43
|
last: props2.index === count - 1
|
|
@@ -52,11 +51,11 @@ function connect(state, send, normalize) {
|
|
|
52
51
|
const resetStep = () => {
|
|
53
52
|
send({ type: "STEP.RESET", src: "reset.trigger.click" });
|
|
54
53
|
};
|
|
55
|
-
const
|
|
56
|
-
send({ type: "STEP.SET", value
|
|
54
|
+
const setStep = (value) => {
|
|
55
|
+
send({ type: "STEP.SET", value, src: "api.setValue" });
|
|
57
56
|
};
|
|
58
57
|
return {
|
|
59
|
-
value,
|
|
58
|
+
value: step,
|
|
60
59
|
count,
|
|
61
60
|
percent,
|
|
62
61
|
hasNextStep,
|
|
@@ -65,7 +64,7 @@ function connect(state, send, normalize) {
|
|
|
65
64
|
goToPrevStep,
|
|
66
65
|
resetStep,
|
|
67
66
|
getItemState,
|
|
68
|
-
|
|
67
|
+
setStep,
|
|
69
68
|
getRootProps() {
|
|
70
69
|
return normalize.element({
|
|
71
70
|
...parts.root.attrs,
|
|
@@ -113,7 +112,7 @@ function connect(state, send, normalize) {
|
|
|
113
112
|
"data-orientation": state.context.orientation,
|
|
114
113
|
"data-complete": dataAttr(itemState.completed),
|
|
115
114
|
"data-current": dataAttr(itemState.current),
|
|
116
|
-
"data-incomplete": dataAttr(
|
|
115
|
+
"data-incomplete": dataAttr(itemState.incomplete),
|
|
117
116
|
onClick(event) {
|
|
118
117
|
if (event.defaultPrevented) return;
|
|
119
118
|
if (state.context.linear) return;
|
|
@@ -143,7 +142,7 @@ function connect(state, send, normalize) {
|
|
|
143
142
|
"aria-hidden": true,
|
|
144
143
|
"data-complete": dataAttr(itemState.completed),
|
|
145
144
|
"data-current": dataAttr(itemState.current),
|
|
146
|
-
"data-incomplete": dataAttr(
|
|
145
|
+
"data-incomplete": dataAttr(itemState.incomplete)
|
|
147
146
|
});
|
|
148
147
|
},
|
|
149
148
|
getSeparatorProps(props2) {
|
|
@@ -154,7 +153,7 @@ function connect(state, send, normalize) {
|
|
|
154
153
|
"data-orientation": state.context.orientation,
|
|
155
154
|
"data-complete": dataAttr(itemState.completed),
|
|
156
155
|
"data-current": dataAttr(itemState.current),
|
|
157
|
-
"data-incomplete": dataAttr(
|
|
156
|
+
"data-incomplete": dataAttr(itemState.incomplete)
|
|
158
157
|
});
|
|
159
158
|
},
|
|
160
159
|
getNextTriggerProps() {
|
|
@@ -195,10 +194,6 @@ function connect(state, send, normalize) {
|
|
|
195
194
|
}
|
|
196
195
|
};
|
|
197
196
|
}
|
|
198
|
-
|
|
199
|
-
// src/steps.machine.ts
|
|
200
|
-
import { createMachine } from "@zag-js/core";
|
|
201
|
-
import { compact, isEqual } from "@zag-js/utils";
|
|
202
197
|
function machine(userContext) {
|
|
203
198
|
const ctx = compact(userContext);
|
|
204
199
|
return createMachine(
|
|
@@ -266,10 +261,6 @@ var set = {
|
|
|
266
261
|
ctx.onStepChange?.({ step });
|
|
267
262
|
}
|
|
268
263
|
};
|
|
269
|
-
|
|
270
|
-
// src/steps.props.ts
|
|
271
|
-
import { createProps } from "@zag-js/types";
|
|
272
|
-
import { createSplitProps } from "@zag-js/utils";
|
|
273
264
|
var props = createProps()([
|
|
274
265
|
"count",
|
|
275
266
|
"dir",
|
|
@@ -283,11 +274,5 @@ var props = createProps()([
|
|
|
283
274
|
"step"
|
|
284
275
|
]);
|
|
285
276
|
var splitProps = createSplitProps(props);
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
connect,
|
|
289
|
-
machine,
|
|
290
|
-
props,
|
|
291
|
-
splitProps
|
|
292
|
-
};
|
|
293
|
-
//# sourceMappingURL=index.mjs.map
|
|
277
|
+
|
|
278
|
+
export { anatomy, connect, machine, props, splitProps };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zag-js/steps",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.72.0",
|
|
4
4
|
"description": "Core logic for the steps widget implemented as a state machine",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"js",
|
|
@@ -18,8 +18,7 @@
|
|
|
18
18
|
"repository": "https://github.com/chakra-ui/zag/tree/main/packages/steps",
|
|
19
19
|
"sideEffects": false,
|
|
20
20
|
"files": [
|
|
21
|
-
"dist"
|
|
22
|
-
"src"
|
|
21
|
+
"dist"
|
|
23
22
|
],
|
|
24
23
|
"publishConfig": {
|
|
25
24
|
"access": "public"
|
|
@@ -28,11 +27,11 @@
|
|
|
28
27
|
"url": "https://github.com/chakra-ui/zag/issues"
|
|
29
28
|
},
|
|
30
29
|
"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.
|
|
30
|
+
"@zag-js/anatomy": "0.72.0",
|
|
31
|
+
"@zag-js/core": "0.72.0",
|
|
32
|
+
"@zag-js/dom-query": "0.72.0",
|
|
33
|
+
"@zag-js/utils": "0.72.0",
|
|
34
|
+
"@zag-js/types": "0.72.0"
|
|
36
35
|
},
|
|
37
36
|
"devDependencies": {
|
|
38
37
|
"clean-package": "2.2.0"
|
package/dist/index.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/steps.anatomy.ts","../src/steps.connect.ts","../src/steps.dom.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 { dataAttr } from \"@zag-js/dom-query\"\nimport type { NormalizeProps, PropTypes } from \"@zag-js/types\"\nimport { fromLength } from \"@zag-js/utils\"\nimport { parts } from \"./steps.anatomy\"\nimport { dom } from \"./steps.dom\"\nimport type { ItemProps, ItemState, MachineApi, Send, State } from \"./steps.types\"\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 const arr = fromLength(state.context.count)\n const triggerIds = arr.map((_, index) => dom.getTriggerId(state.context, index))\n return normalize.element({\n ...parts.list.attrs,\n dir: state.context.dir,\n id: dom.getListId(state.context),\n role: \"tablist\",\n \"aria-owns\": triggerIds.join(\" \"),\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 { 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 { 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","import_utils","ctx","import_utils"]}
|
package/dist/index.mjs.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/steps.anatomy.ts","../src/steps.connect.ts","../src/steps.dom.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 { dataAttr } from \"@zag-js/dom-query\"\nimport type { NormalizeProps, PropTypes } from \"@zag-js/types\"\nimport { fromLength } from \"@zag-js/utils\"\nimport { parts } from \"./steps.anatomy\"\nimport { dom } from \"./steps.dom\"\nimport type { ItemProps, ItemState, MachineApi, Send, State } from \"./steps.types\"\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 const arr = fromLength(state.context.count)\n const triggerIds = arr.map((_, index) => dom.getTriggerId(state.context, index))\n return normalize.element({\n ...parts.list.attrs,\n dir: state.context.dir,\n id: dom.getListId(state.context),\n role: \"tablist\",\n \"aria-owns\": triggerIds.join(\" \"),\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 { 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 { 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/src/index.ts
DELETED
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
export { anatomy } from "./steps.anatomy"
|
|
2
|
-
export { connect } from "./steps.connect"
|
|
3
|
-
export { machine } from "./steps.machine"
|
|
4
|
-
export * from "./steps.props"
|
|
5
|
-
export type {
|
|
6
|
-
MachineApi as Api,
|
|
7
|
-
UserDefinedContext as Context,
|
|
8
|
-
ElementIds,
|
|
9
|
-
ItemProps,
|
|
10
|
-
ItemState,
|
|
11
|
-
Service,
|
|
12
|
-
StepChangeDetails,
|
|
13
|
-
} from "./steps.types"
|
package/src/steps.anatomy.ts
DELETED
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import { createAnatomy } from "@zag-js/anatomy"
|
|
2
|
-
|
|
3
|
-
export const anatomy = createAnatomy("steps").parts(
|
|
4
|
-
"root",
|
|
5
|
-
"list",
|
|
6
|
-
"item",
|
|
7
|
-
"trigger",
|
|
8
|
-
"indicator",
|
|
9
|
-
"separator",
|
|
10
|
-
"content",
|
|
11
|
-
"nextTrigger",
|
|
12
|
-
"prevTrigger",
|
|
13
|
-
"progress",
|
|
14
|
-
)
|
|
15
|
-
|
|
16
|
-
export const parts = anatomy.build()
|
package/src/steps.connect.ts
DELETED
|
@@ -1,190 +0,0 @@
|
|
|
1
|
-
import { dataAttr } from "@zag-js/dom-query"
|
|
2
|
-
import type { NormalizeProps, PropTypes } from "@zag-js/types"
|
|
3
|
-
import { fromLength } from "@zag-js/utils"
|
|
4
|
-
import { parts } from "./steps.anatomy"
|
|
5
|
-
import { dom } from "./steps.dom"
|
|
6
|
-
import type { ItemProps, ItemState, MachineApi, Send, State } from "./steps.types"
|
|
7
|
-
|
|
8
|
-
export function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> {
|
|
9
|
-
const value = state.context.step
|
|
10
|
-
const count = state.context.count
|
|
11
|
-
const percent = state.context.percent
|
|
12
|
-
const hasNextStep = state.context.hasNextStep
|
|
13
|
-
const hasPrevStep = state.context.hasPrevStep
|
|
14
|
-
|
|
15
|
-
const getItemState = (props: ItemProps): ItemState => ({
|
|
16
|
-
triggerId: dom.getTriggerId(state.context, props.index),
|
|
17
|
-
contentId: dom.getContentId(state.context, props.index),
|
|
18
|
-
current: props.index === value,
|
|
19
|
-
completed: props.index < value,
|
|
20
|
-
index: props.index,
|
|
21
|
-
first: props.index === 0,
|
|
22
|
-
last: props.index === count - 1,
|
|
23
|
-
})
|
|
24
|
-
|
|
25
|
-
const goToNextStep = () => {
|
|
26
|
-
send({ type: "STEP.NEXT", src: "next.trigger.click" })
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
const goToPrevStep = () => {
|
|
30
|
-
send({ type: "STEP.PREV", src: "prev.trigger.click" })
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
const resetStep = () => {
|
|
34
|
-
send({ type: "STEP.RESET", src: "reset.trigger.click" })
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
const setValue = (value: number) => {
|
|
38
|
-
send({ type: "STEP.SET", value, src: "api.setValue" })
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
return {
|
|
42
|
-
value,
|
|
43
|
-
count,
|
|
44
|
-
percent,
|
|
45
|
-
hasNextStep,
|
|
46
|
-
hasPrevStep,
|
|
47
|
-
goToNextStep,
|
|
48
|
-
goToPrevStep,
|
|
49
|
-
resetStep,
|
|
50
|
-
getItemState,
|
|
51
|
-
setValue,
|
|
52
|
-
|
|
53
|
-
getRootProps() {
|
|
54
|
-
return normalize.element({
|
|
55
|
-
...parts.root.attrs,
|
|
56
|
-
id: dom.getRootId(state.context),
|
|
57
|
-
dir: state.context.dir,
|
|
58
|
-
"data-orientation": state.context.orientation,
|
|
59
|
-
style: {
|
|
60
|
-
"--percent": `${percent}%`,
|
|
61
|
-
},
|
|
62
|
-
})
|
|
63
|
-
},
|
|
64
|
-
|
|
65
|
-
getListProps() {
|
|
66
|
-
const arr = fromLength(state.context.count)
|
|
67
|
-
const triggerIds = arr.map((_, index) => dom.getTriggerId(state.context, index))
|
|
68
|
-
return normalize.element({
|
|
69
|
-
...parts.list.attrs,
|
|
70
|
-
dir: state.context.dir,
|
|
71
|
-
id: dom.getListId(state.context),
|
|
72
|
-
role: "tablist",
|
|
73
|
-
"aria-owns": triggerIds.join(" "),
|
|
74
|
-
"aria-orientation": state.context.orientation,
|
|
75
|
-
"data-orientation": state.context.orientation,
|
|
76
|
-
})
|
|
77
|
-
},
|
|
78
|
-
|
|
79
|
-
getItemProps(props) {
|
|
80
|
-
const itemState = getItemState(props)
|
|
81
|
-
return normalize.element({
|
|
82
|
-
...parts.item.attrs,
|
|
83
|
-
dir: state.context.dir,
|
|
84
|
-
"aria-current": itemState.current ? "step" : undefined,
|
|
85
|
-
"data-orientation": state.context.orientation,
|
|
86
|
-
})
|
|
87
|
-
},
|
|
88
|
-
|
|
89
|
-
getTriggerProps(props) {
|
|
90
|
-
const itemState = getItemState(props)
|
|
91
|
-
return normalize.button({
|
|
92
|
-
...parts.trigger.attrs,
|
|
93
|
-
id: itemState.triggerId,
|
|
94
|
-
role: "tab",
|
|
95
|
-
dir: state.context.dir,
|
|
96
|
-
tabIndex: !state.context.linear || itemState.current ? 0 : -1,
|
|
97
|
-
"aria-selected": itemState.current,
|
|
98
|
-
"aria-controls": itemState.contentId,
|
|
99
|
-
"data-state": itemState.current ? "open" : "closed",
|
|
100
|
-
"data-orientation": state.context.orientation,
|
|
101
|
-
"data-complete": dataAttr(itemState.completed),
|
|
102
|
-
"data-current": dataAttr(itemState.current),
|
|
103
|
-
"data-incomplete": dataAttr(!itemState.current),
|
|
104
|
-
onClick(event) {
|
|
105
|
-
if (event.defaultPrevented) return
|
|
106
|
-
if (state.context.linear) return
|
|
107
|
-
send({ type: "STEP.SET", value: props.index, src: "trigger.click" })
|
|
108
|
-
},
|
|
109
|
-
})
|
|
110
|
-
},
|
|
111
|
-
|
|
112
|
-
getContentProps(props) {
|
|
113
|
-
const itemState = getItemState(props)
|
|
114
|
-
return normalize.element({
|
|
115
|
-
...parts.content.attrs,
|
|
116
|
-
dir: state.context.dir,
|
|
117
|
-
id: itemState.contentId,
|
|
118
|
-
role: "tabpanel",
|
|
119
|
-
tabIndex: 0,
|
|
120
|
-
hidden: !itemState.current,
|
|
121
|
-
"data-state": itemState.current ? "open" : "closed",
|
|
122
|
-
"data-orientation": state.context.orientation,
|
|
123
|
-
"aria-labelledby": itemState.triggerId,
|
|
124
|
-
})
|
|
125
|
-
},
|
|
126
|
-
|
|
127
|
-
getIndicatorProps(props) {
|
|
128
|
-
const itemState = getItemState(props)
|
|
129
|
-
return normalize.element({
|
|
130
|
-
...parts.indicator.attrs,
|
|
131
|
-
dir: state.context.dir,
|
|
132
|
-
"aria-hidden": true,
|
|
133
|
-
"data-complete": dataAttr(itemState.completed),
|
|
134
|
-
"data-current": dataAttr(itemState.current),
|
|
135
|
-
"data-incomplete": dataAttr(!itemState.current),
|
|
136
|
-
})
|
|
137
|
-
},
|
|
138
|
-
|
|
139
|
-
getSeparatorProps(props) {
|
|
140
|
-
const itemState = getItemState(props)
|
|
141
|
-
return normalize.element({
|
|
142
|
-
...parts.separator.attrs,
|
|
143
|
-
dir: state.context.dir,
|
|
144
|
-
"data-orientation": state.context.orientation,
|
|
145
|
-
"data-complete": dataAttr(itemState.completed),
|
|
146
|
-
"data-current": dataAttr(itemState.current),
|
|
147
|
-
"data-incomplete": dataAttr(!itemState.current),
|
|
148
|
-
})
|
|
149
|
-
},
|
|
150
|
-
|
|
151
|
-
getNextTriggerProps() {
|
|
152
|
-
return normalize.button({
|
|
153
|
-
...parts.nextTrigger.attrs,
|
|
154
|
-
dir: state.context.dir,
|
|
155
|
-
type: "button",
|
|
156
|
-
disabled: !hasNextStep,
|
|
157
|
-
onClick(event) {
|
|
158
|
-
if (event.defaultPrevented) return
|
|
159
|
-
goToNextStep()
|
|
160
|
-
},
|
|
161
|
-
})
|
|
162
|
-
},
|
|
163
|
-
|
|
164
|
-
getPrevTriggerProps() {
|
|
165
|
-
return normalize.button({
|
|
166
|
-
dir: state.context.dir,
|
|
167
|
-
...parts.prevTrigger.attrs,
|
|
168
|
-
type: "button",
|
|
169
|
-
disabled: !hasPrevStep,
|
|
170
|
-
onClick(event) {
|
|
171
|
-
if (event.defaultPrevented) return
|
|
172
|
-
goToPrevStep()
|
|
173
|
-
},
|
|
174
|
-
})
|
|
175
|
-
},
|
|
176
|
-
|
|
177
|
-
getProgressProps() {
|
|
178
|
-
return normalize.element({
|
|
179
|
-
dir: state.context.dir,
|
|
180
|
-
...parts.progress.attrs,
|
|
181
|
-
role: "progressbar",
|
|
182
|
-
"aria-valuenow": percent,
|
|
183
|
-
"aria-valuemin": 0,
|
|
184
|
-
"aria-valuemax": 100,
|
|
185
|
-
"aria-valuetext": `${percent}% complete`,
|
|
186
|
-
"data-complete": dataAttr(percent === 100),
|
|
187
|
-
})
|
|
188
|
-
},
|
|
189
|
-
}
|
|
190
|
-
}
|
package/src/steps.dom.ts
DELETED
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import { createScope } from "@zag-js/dom-query"
|
|
2
|
-
import type { MachineContext as Ctx } from "./steps.types"
|
|
3
|
-
|
|
4
|
-
export const dom = createScope({
|
|
5
|
-
getRootId: (ctx: Ctx) => ctx.ids?.root ?? `steps:${ctx.id}`,
|
|
6
|
-
getListId: (ctx: Ctx) => ctx.ids?.list ?? `steps:${ctx.id}:list`,
|
|
7
|
-
getTriggerId: (ctx: Ctx, index: number) => ctx.ids?.triggerId?.(index) ?? `steps:${ctx.id}:trigger:${index}`,
|
|
8
|
-
getContentId: (ctx: Ctx, index: number) => ctx.ids?.contentId?.(index) ?? `steps:${ctx.id}:content:${index}`,
|
|
9
|
-
})
|
package/src/steps.machine.ts
DELETED
|
@@ -1,75 +0,0 @@
|
|
|
1
|
-
import { createMachine } from "@zag-js/core"
|
|
2
|
-
import { compact, isEqual } from "@zag-js/utils"
|
|
3
|
-
import type { MachineContext, MachineState, UserDefinedContext } from "./steps.types"
|
|
4
|
-
|
|
5
|
-
export function machine(userContext: UserDefinedContext) {
|
|
6
|
-
const ctx = compact(userContext)
|
|
7
|
-
return createMachine<MachineContext, MachineState>(
|
|
8
|
-
{
|
|
9
|
-
id: "steps",
|
|
10
|
-
initial: "idle",
|
|
11
|
-
|
|
12
|
-
context: {
|
|
13
|
-
step: 0,
|
|
14
|
-
count: 1,
|
|
15
|
-
linear: false,
|
|
16
|
-
orientation: "horizontal",
|
|
17
|
-
...ctx,
|
|
18
|
-
},
|
|
19
|
-
|
|
20
|
-
computed: {
|
|
21
|
-
percent: (ctx) => (ctx.step / ctx.count) * 100,
|
|
22
|
-
hasNextStep: (ctx) => ctx.step < ctx.count,
|
|
23
|
-
hasPrevStep: (ctx) => ctx.step > 0,
|
|
24
|
-
},
|
|
25
|
-
|
|
26
|
-
states: {
|
|
27
|
-
idle: {
|
|
28
|
-
on: {
|
|
29
|
-
"STEP.SET": {
|
|
30
|
-
actions: "setStep",
|
|
31
|
-
},
|
|
32
|
-
"STEP.NEXT": {
|
|
33
|
-
actions: "goToNextStep",
|
|
34
|
-
},
|
|
35
|
-
"STEP.PREV": {
|
|
36
|
-
actions: "goToPrevStep",
|
|
37
|
-
},
|
|
38
|
-
"STEP.RESET": {
|
|
39
|
-
actions: "resetStep",
|
|
40
|
-
},
|
|
41
|
-
},
|
|
42
|
-
},
|
|
43
|
-
},
|
|
44
|
-
},
|
|
45
|
-
{
|
|
46
|
-
actions: {
|
|
47
|
-
goToNextStep(ctx) {
|
|
48
|
-
const value = Math.min(ctx.step + 1, ctx.count)
|
|
49
|
-
set.value(ctx, value)
|
|
50
|
-
},
|
|
51
|
-
goToPrevStep(ctx) {
|
|
52
|
-
const value = Math.max(ctx.step - 1, 0)
|
|
53
|
-
set.value(ctx, value)
|
|
54
|
-
},
|
|
55
|
-
resetStep(ctx) {
|
|
56
|
-
set.value(ctx, 0)
|
|
57
|
-
},
|
|
58
|
-
setStep(ctx, event) {
|
|
59
|
-
const value = event.value
|
|
60
|
-
const inRange = value >= 0 && value < ctx.count
|
|
61
|
-
if (!inRange) throw new RangeError(`Index ${value} is out of bounds`)
|
|
62
|
-
set.value(ctx, value)
|
|
63
|
-
},
|
|
64
|
-
},
|
|
65
|
-
},
|
|
66
|
-
)
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
const set = {
|
|
70
|
-
value(ctx: MachineContext, step: number) {
|
|
71
|
-
if (isEqual(ctx.step, step)) return
|
|
72
|
-
ctx.step = step
|
|
73
|
-
ctx.onStepChange?.({ step })
|
|
74
|
-
},
|
|
75
|
-
}
|
package/src/steps.props.ts
DELETED
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import { createProps } from "@zag-js/types"
|
|
2
|
-
import { createSplitProps } from "@zag-js/utils"
|
|
3
|
-
import type { UserDefinedContext } from "./steps.types"
|
|
4
|
-
|
|
5
|
-
export const props = createProps<UserDefinedContext>()([
|
|
6
|
-
"count",
|
|
7
|
-
"dir",
|
|
8
|
-
"getRootNode",
|
|
9
|
-
"id",
|
|
10
|
-
"ids",
|
|
11
|
-
"linear",
|
|
12
|
-
"onStepChange",
|
|
13
|
-
"onStepComplete",
|
|
14
|
-
"orientation",
|
|
15
|
-
"step",
|
|
16
|
-
])
|
|
17
|
-
|
|
18
|
-
export const splitProps = createSplitProps<Partial<UserDefinedContext>>(props)
|
package/src/steps.types.ts
DELETED
|
@@ -1,146 +0,0 @@
|
|
|
1
|
-
import type { Machine, StateMachine as S } from "@zag-js/core"
|
|
2
|
-
import type { CommonProperties, DirectionProperty, PropTypes, RequiredBy } from "@zag-js/types"
|
|
3
|
-
|
|
4
|
-
/* -----------------------------------------------------------------------------
|
|
5
|
-
* Callback details
|
|
6
|
-
* -----------------------------------------------------------------------------*/
|
|
7
|
-
|
|
8
|
-
export interface StepChangeDetails {
|
|
9
|
-
step: number
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
/* -----------------------------------------------------------------------------
|
|
13
|
-
* Machine context
|
|
14
|
-
* -----------------------------------------------------------------------------*/
|
|
15
|
-
|
|
16
|
-
export interface ElementIds {
|
|
17
|
-
root?: string
|
|
18
|
-
list?: string
|
|
19
|
-
triggerId?(index: number): string
|
|
20
|
-
contentId?(index: number): string
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
interface PublicContext extends DirectionProperty, CommonProperties {
|
|
24
|
-
/**
|
|
25
|
-
* The custom ids for the stepper elements
|
|
26
|
-
*/
|
|
27
|
-
ids?: ElementIds
|
|
28
|
-
/**
|
|
29
|
-
* The current value of the stepper
|
|
30
|
-
*/
|
|
31
|
-
step: number
|
|
32
|
-
/**
|
|
33
|
-
* Callback to be called when the value changes
|
|
34
|
-
*/
|
|
35
|
-
onStepChange?(details: StepChangeDetails): void
|
|
36
|
-
/**
|
|
37
|
-
* Callback to be called when a step is completed
|
|
38
|
-
*/
|
|
39
|
-
onStepComplete?: VoidFunction
|
|
40
|
-
/**
|
|
41
|
-
* If `true`, the stepper requires the user to complete the steps in order
|
|
42
|
-
*/
|
|
43
|
-
linear?: boolean
|
|
44
|
-
/**
|
|
45
|
-
* The orientation of the stepper
|
|
46
|
-
*/
|
|
47
|
-
orientation?: "horizontal" | "vertical"
|
|
48
|
-
/**
|
|
49
|
-
* The total number of steps
|
|
50
|
-
*/
|
|
51
|
-
count: number
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
interface PrivateContext {}
|
|
55
|
-
|
|
56
|
-
type ComputedContext = Readonly<{
|
|
57
|
-
percent: number
|
|
58
|
-
hasNextStep: boolean
|
|
59
|
-
hasPrevStep: boolean
|
|
60
|
-
}>
|
|
61
|
-
|
|
62
|
-
export type UserDefinedContext = RequiredBy<PublicContext, "id">
|
|
63
|
-
|
|
64
|
-
export interface MachineContext extends PublicContext, PrivateContext, ComputedContext {}
|
|
65
|
-
|
|
66
|
-
export interface MachineState {
|
|
67
|
-
value: "idle"
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
export type State = S.State<MachineContext, MachineState>
|
|
71
|
-
|
|
72
|
-
export type Send = S.Send<S.AnyEventObject>
|
|
73
|
-
|
|
74
|
-
export type Service = Machine<MachineContext, MachineState, S.AnyEventObject>
|
|
75
|
-
|
|
76
|
-
/* -----------------------------------------------------------------------------
|
|
77
|
-
* Component API
|
|
78
|
-
* -----------------------------------------------------------------------------*/
|
|
79
|
-
|
|
80
|
-
export interface ItemProps {
|
|
81
|
-
index: number
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
export interface ItemState {
|
|
85
|
-
index: number
|
|
86
|
-
triggerId: string
|
|
87
|
-
contentId: string
|
|
88
|
-
current: boolean
|
|
89
|
-
completed: boolean
|
|
90
|
-
last: boolean
|
|
91
|
-
first: boolean
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
export interface MachineApi<T extends PropTypes = PropTypes> {
|
|
95
|
-
/**
|
|
96
|
-
* The value of the stepper.
|
|
97
|
-
*/
|
|
98
|
-
value: number
|
|
99
|
-
/**
|
|
100
|
-
* The percentage of the stepper.
|
|
101
|
-
*/
|
|
102
|
-
percent: number
|
|
103
|
-
/**
|
|
104
|
-
* The total number of steps.
|
|
105
|
-
*/
|
|
106
|
-
count: number
|
|
107
|
-
/**
|
|
108
|
-
* Whether the stepper has a next step.
|
|
109
|
-
*/
|
|
110
|
-
hasNextStep: boolean
|
|
111
|
-
/**
|
|
112
|
-
* Whether the stepper has a previous step.
|
|
113
|
-
*/
|
|
114
|
-
hasPrevStep: boolean
|
|
115
|
-
/**
|
|
116
|
-
* Function to set the value of the stepper.
|
|
117
|
-
*/
|
|
118
|
-
setValue(value: number): void
|
|
119
|
-
/**
|
|
120
|
-
* Function to go to the next step.
|
|
121
|
-
*/
|
|
122
|
-
goToNextStep(): void
|
|
123
|
-
/**
|
|
124
|
-
* Function to go to the previous step.
|
|
125
|
-
*/
|
|
126
|
-
goToPrevStep(): void
|
|
127
|
-
/**
|
|
128
|
-
* Function to go to reset the stepper.
|
|
129
|
-
*/
|
|
130
|
-
resetStep(): void
|
|
131
|
-
/**
|
|
132
|
-
* Returns the state of the item at the given index.
|
|
133
|
-
*/
|
|
134
|
-
getItemState(props: ItemProps): ItemState
|
|
135
|
-
|
|
136
|
-
getRootProps(): T["element"]
|
|
137
|
-
getListProps(): T["element"]
|
|
138
|
-
getItemProps(props: ItemProps): T["element"]
|
|
139
|
-
getTriggerProps(props: ItemProps): T["element"]
|
|
140
|
-
getContentProps(props: ItemProps): T["element"]
|
|
141
|
-
getNextTriggerProps(): T["button"]
|
|
142
|
-
getPrevTriggerProps(): T["button"]
|
|
143
|
-
getProgressProps(): T["element"]
|
|
144
|
-
getIndicatorProps(props: ItemProps): T["element"]
|
|
145
|
-
getSeparatorProps(props: ItemProps): T["element"]
|
|
146
|
-
}
|