@zag-js/radio-group 0.1.6 → 0.1.7
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/chunk-EQKWEHJW.mjs +192 -0
- package/dist/chunk-JSIZLP57.mjs +110 -0
- package/dist/chunk-KXAYH7UX.mjs +197 -0
- package/dist/chunk-MGLN5L3R.mjs +16 -0
- package/dist/index.d.ts +7 -951
- package/dist/index.js +44 -32
- package/dist/index.mjs +10 -476
- package/dist/radio-group.anatomy.d.ts +6 -0
- package/dist/radio-group.anatomy.js +41 -0
- package/dist/radio-group.anatomy.mjs +8 -0
- package/dist/radio-group.connect.d.ts +18 -0
- package/dist/radio-group.connect.js +330 -0
- package/dist/radio-group.connect.mjs +8 -0
- package/dist/radio-group.dom.d.ts +39 -0
- package/dist/radio-group.dom.js +131 -0
- package/dist/radio-group.dom.mjs +6 -0
- package/dist/radio-group.machine.d.ts +7 -0
- package/dist/radio-group.machine.js +317 -0
- package/dist/radio-group.machine.mjs +7 -0
- package/dist/radio-group.types.d.ts +86 -0
- package/dist/radio-group.types.js +18 -0
- package/dist/radio-group.types.mjs +0 -0
- package/package.json +22 -12
package/dist/index.js
CHANGED
|
@@ -38,13 +38,28 @@ var anatomy = (0, import_anatomy.createAnatomy)("radio-group").parts(
|
|
|
38
38
|
);
|
|
39
39
|
var parts = anatomy.build();
|
|
40
40
|
|
|
41
|
-
// ../../utilities/dom/
|
|
41
|
+
// ../../utilities/dom/src/attrs.ts
|
|
42
42
|
var dataAttr = (guard) => {
|
|
43
43
|
return guard ? "" : void 0;
|
|
44
44
|
};
|
|
45
45
|
var ariaAttr = (guard) => {
|
|
46
46
|
return guard ? "true" : void 0;
|
|
47
47
|
};
|
|
48
|
+
|
|
49
|
+
// ../../utilities/core/src/guard.ts
|
|
50
|
+
var isArray = (v) => Array.isArray(v);
|
|
51
|
+
var isObject = (v) => !(v == null || typeof v !== "object" || isArray(v));
|
|
52
|
+
|
|
53
|
+
// ../../utilities/core/src/object.ts
|
|
54
|
+
function compact(obj) {
|
|
55
|
+
if (obj === void 0)
|
|
56
|
+
return obj;
|
|
57
|
+
return Object.fromEntries(
|
|
58
|
+
Object.entries(obj).filter(([, value]) => value !== void 0).map(([key, value]) => [key, isObject(value) ? compact(value) : value])
|
|
59
|
+
);
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
// ../../utilities/dom/src/query.ts
|
|
48
63
|
function isDocument(el) {
|
|
49
64
|
return el.nodeType === Node.DOCUMENT_NODE;
|
|
50
65
|
}
|
|
@@ -59,6 +74,10 @@ function getDocument(el) {
|
|
|
59
74
|
return el;
|
|
60
75
|
return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : document;
|
|
61
76
|
}
|
|
77
|
+
function getWindow(el) {
|
|
78
|
+
var _a;
|
|
79
|
+
return (_a = el == null ? void 0 : el.ownerDocument.defaultView) != null ? _a : window;
|
|
80
|
+
}
|
|
62
81
|
function defineDomHelpers(helpers) {
|
|
63
82
|
const dom2 = {
|
|
64
83
|
getRootNode: (ctx) => {
|
|
@@ -96,10 +115,31 @@ function defineDomHelpers(helpers) {
|
|
|
96
115
|
...helpers
|
|
97
116
|
};
|
|
98
117
|
}
|
|
118
|
+
|
|
119
|
+
// ../../utilities/dom/src/mutation-observer.ts
|
|
120
|
+
function observeAttributes(node, attributes, fn) {
|
|
121
|
+
if (!node)
|
|
122
|
+
return;
|
|
123
|
+
const attrs = Array.isArray(attributes) ? attributes : [attributes];
|
|
124
|
+
const win = node.ownerDocument.defaultView || window;
|
|
125
|
+
const obs = new win.MutationObserver((changes) => {
|
|
126
|
+
for (const change of changes) {
|
|
127
|
+
if (change.type === "attributes" && change.attributeName && attrs.includes(change.attributeName)) {
|
|
128
|
+
fn(change);
|
|
129
|
+
}
|
|
130
|
+
}
|
|
131
|
+
});
|
|
132
|
+
obs.observe(node, { attributes: true, attributeFilter: attrs });
|
|
133
|
+
return () => obs.disconnect();
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
// ../../utilities/dom/src/nodelist.ts
|
|
99
137
|
function queryAll(root, selector) {
|
|
100
138
|
var _a;
|
|
101
139
|
return Array.from((_a = root == null ? void 0 : root.querySelectorAll(selector)) != null ? _a : []);
|
|
102
140
|
}
|
|
141
|
+
|
|
142
|
+
// ../../utilities/dom/src/visually-hidden.ts
|
|
103
143
|
var visuallyHiddenStyle = {
|
|
104
144
|
border: "0",
|
|
105
145
|
clip: "rect(0 0 0 0)",
|
|
@@ -324,26 +364,7 @@ function connect(state, send, normalize) {
|
|
|
324
364
|
// src/radio-group.machine.ts
|
|
325
365
|
var import_core = require("@zag-js/core");
|
|
326
366
|
|
|
327
|
-
// ../../utilities/form-utils/
|
|
328
|
-
function getWindow(el) {
|
|
329
|
-
var _a;
|
|
330
|
-
return (_a = el == null ? void 0 : el.ownerDocument.defaultView) != null ? _a : window;
|
|
331
|
-
}
|
|
332
|
-
function observeAttributes(node, attributes, fn) {
|
|
333
|
-
if (!node)
|
|
334
|
-
return;
|
|
335
|
-
const attrs = Array.isArray(attributes) ? attributes : [attributes];
|
|
336
|
-
const win = node.ownerDocument.defaultView || window;
|
|
337
|
-
const obs = new win.MutationObserver((changes) => {
|
|
338
|
-
for (const change of changes) {
|
|
339
|
-
if (change.type === "attributes" && change.attributeName && attrs.includes(change.attributeName)) {
|
|
340
|
-
fn(change);
|
|
341
|
-
}
|
|
342
|
-
}
|
|
343
|
-
});
|
|
344
|
-
obs.observe(node, { attributes: true, attributeFilter: attrs });
|
|
345
|
-
return () => obs.disconnect();
|
|
346
|
-
}
|
|
367
|
+
// ../../utilities/form-utils/src/input-event.ts
|
|
347
368
|
function getDescriptor(el, options) {
|
|
348
369
|
var _a;
|
|
349
370
|
const { type, property = "value" } = options;
|
|
@@ -362,6 +383,8 @@ function dispatchInputCheckedEvent(el, checked) {
|
|
|
362
383
|
const event = new win.Event("click", { bubbles: true });
|
|
363
384
|
el.dispatchEvent(event);
|
|
364
385
|
}
|
|
386
|
+
|
|
387
|
+
// ../../utilities/form-utils/src/form.ts
|
|
365
388
|
function getClosestForm(el) {
|
|
366
389
|
if (isFormElement(el))
|
|
367
390
|
return el.form;
|
|
@@ -403,17 +426,6 @@ function trackFormControl(el, options) {
|
|
|
403
426
|
};
|
|
404
427
|
}
|
|
405
428
|
|
|
406
|
-
// ../../utilities/core/dist/index.mjs
|
|
407
|
-
var isArray = (v) => Array.isArray(v);
|
|
408
|
-
var isObject = (v) => !(v == null || typeof v !== "object" || isArray(v));
|
|
409
|
-
function compact(obj) {
|
|
410
|
-
if (obj === void 0)
|
|
411
|
-
return obj;
|
|
412
|
-
return Object.fromEntries(
|
|
413
|
-
Object.entries(obj).filter(([, value]) => value !== void 0).map(([key, value]) => [key, isObject(value) ? compact(value) : value])
|
|
414
|
-
);
|
|
415
|
-
}
|
|
416
|
-
|
|
417
429
|
// src/radio-group.machine.ts
|
|
418
430
|
function machine(userContext) {
|
|
419
431
|
const ctx = compact(userContext);
|
package/dist/index.mjs
CHANGED
|
@@ -1,479 +1,13 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
var parts = anatomy.build();
|
|
12
|
-
|
|
13
|
-
// ../../utilities/dom/dist/index.mjs
|
|
14
|
-
var dataAttr = (guard) => {
|
|
15
|
-
return guard ? "" : void 0;
|
|
16
|
-
};
|
|
17
|
-
var ariaAttr = (guard) => {
|
|
18
|
-
return guard ? "true" : void 0;
|
|
19
|
-
};
|
|
20
|
-
function isDocument(el) {
|
|
21
|
-
return el.nodeType === Node.DOCUMENT_NODE;
|
|
22
|
-
}
|
|
23
|
-
function isWindow(value) {
|
|
24
|
-
return (value == null ? void 0 : value.toString()) === "[object Window]";
|
|
25
|
-
}
|
|
26
|
-
function getDocument(el) {
|
|
27
|
-
var _a;
|
|
28
|
-
if (isWindow(el))
|
|
29
|
-
return el.document;
|
|
30
|
-
if (isDocument(el))
|
|
31
|
-
return el;
|
|
32
|
-
return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : document;
|
|
33
|
-
}
|
|
34
|
-
function defineDomHelpers(helpers) {
|
|
35
|
-
const dom2 = {
|
|
36
|
-
getRootNode: (ctx) => {
|
|
37
|
-
var _a, _b;
|
|
38
|
-
return (_b = (_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) != null ? _b : document;
|
|
39
|
-
},
|
|
40
|
-
getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
|
|
41
|
-
getWin: (ctx) => {
|
|
42
|
-
var _a;
|
|
43
|
-
return (_a = dom2.getDoc(ctx).defaultView) != null ? _a : window;
|
|
44
|
-
},
|
|
45
|
-
getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
|
|
46
|
-
getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id),
|
|
47
|
-
createEmitter: (ctx, target) => {
|
|
48
|
-
const win = dom2.getWin(ctx);
|
|
49
|
-
return function emit(evt, detail, options) {
|
|
50
|
-
const { bubbles = true, cancelable, composed = true } = options != null ? options : {};
|
|
51
|
-
const eventName = `zag:${evt}`;
|
|
52
|
-
const init = { bubbles, cancelable, composed, detail };
|
|
53
|
-
const event = new win.CustomEvent(eventName, init);
|
|
54
|
-
target.dispatchEvent(event);
|
|
55
|
-
};
|
|
56
|
-
},
|
|
57
|
-
createListener: (target) => {
|
|
58
|
-
return function listen(evt, handler) {
|
|
59
|
-
const eventName = `zag:${evt}`;
|
|
60
|
-
const listener = (e) => handler(e);
|
|
61
|
-
target.addEventListener(eventName, listener);
|
|
62
|
-
return () => target.removeEventListener(eventName, listener);
|
|
63
|
-
};
|
|
64
|
-
}
|
|
65
|
-
};
|
|
66
|
-
return {
|
|
67
|
-
...dom2,
|
|
68
|
-
...helpers
|
|
69
|
-
};
|
|
70
|
-
}
|
|
71
|
-
function queryAll(root, selector) {
|
|
72
|
-
var _a;
|
|
73
|
-
return Array.from((_a = root == null ? void 0 : root.querySelectorAll(selector)) != null ? _a : []);
|
|
74
|
-
}
|
|
75
|
-
var visuallyHiddenStyle = {
|
|
76
|
-
border: "0",
|
|
77
|
-
clip: "rect(0 0 0 0)",
|
|
78
|
-
height: "1px",
|
|
79
|
-
margin: "-1px",
|
|
80
|
-
overflow: "hidden",
|
|
81
|
-
padding: "0",
|
|
82
|
-
position: "absolute",
|
|
83
|
-
width: "1px",
|
|
84
|
-
whiteSpace: "nowrap",
|
|
85
|
-
wordWrap: "normal"
|
|
86
|
-
};
|
|
87
|
-
|
|
88
|
-
// src/radio-group.dom.ts
|
|
89
|
-
var dom = defineDomHelpers({
|
|
90
|
-
getRootId: (ctx) => {
|
|
91
|
-
var _a, _b;
|
|
92
|
-
return (_b = (_a = ctx.ids) == null ? void 0 : _a.root) != null ? _b : `radio-group:${ctx.id}`;
|
|
93
|
-
},
|
|
94
|
-
getLabelId: (ctx) => {
|
|
95
|
-
var _a, _b;
|
|
96
|
-
return (_b = (_a = ctx.ids) == null ? void 0 : _a.label) != null ? _b : `radio-group:${ctx.id}:label`;
|
|
97
|
-
},
|
|
98
|
-
getRadioId: (ctx, value) => {
|
|
99
|
-
var _a, _b, _c;
|
|
100
|
-
return (_c = (_b = (_a = ctx.ids) == null ? void 0 : _a.radio) == null ? void 0 : _b.call(_a, value)) != null ? _c : `radio-group:${ctx.id}:radio:${value}`;
|
|
101
|
-
},
|
|
102
|
-
getRadioInputId: (ctx, value) => {
|
|
103
|
-
var _a, _b, _c;
|
|
104
|
-
return (_c = (_b = (_a = ctx.ids) == null ? void 0 : _a.radioInput) == null ? void 0 : _b.call(_a, value)) != null ? _c : `radio-group:${ctx.id}:radio:input:${value}`;
|
|
105
|
-
},
|
|
106
|
-
getRadioControlId: (ctx, value) => {
|
|
107
|
-
var _a, _b, _c;
|
|
108
|
-
return (_c = (_b = (_a = ctx.ids) == null ? void 0 : _a.radioControl) == null ? void 0 : _b.call(_a, value)) != null ? _c : `radio-group:${ctx.id}:radio:control:${value}`;
|
|
109
|
-
},
|
|
110
|
-
getRadioLabelId: (ctx, value) => {
|
|
111
|
-
var _a, _b, _c;
|
|
112
|
-
return (_c = (_b = (_a = ctx.ids) == null ? void 0 : _a.radioLabel) == null ? void 0 : _b.call(_a, value)) != null ? _c : `radio-group:${ctx.id}:radio:label:${value}`;
|
|
113
|
-
},
|
|
114
|
-
getRootEl: (ctx) => dom.getById(ctx, dom.getRootId(ctx)),
|
|
115
|
-
getRadioInputEl: (ctx, value) => dom.getById(ctx, dom.getRadioInputId(ctx, value)),
|
|
116
|
-
getFirstEnabledInputEl: (ctx) => {
|
|
117
|
-
var _a;
|
|
118
|
-
return (_a = dom.getRootEl(ctx)) == null ? void 0 : _a.querySelector("input:not(:disabled)");
|
|
119
|
-
},
|
|
120
|
-
getFirstEnabledAndCheckedInputEl: (ctx) => {
|
|
121
|
-
var _a;
|
|
122
|
-
return (_a = dom.getRootEl(ctx)) == null ? void 0 : _a.querySelector("input:not(:disabled):checked");
|
|
123
|
-
},
|
|
124
|
-
getInputEls: (ctx) => {
|
|
125
|
-
const ownerId = CSS.escape(dom.getRootId(ctx));
|
|
126
|
-
const selector = `input[type=radio][data-ownedby='${ownerId}']:not([disabled])`;
|
|
127
|
-
return queryAll(dom.getRootEl(ctx), selector);
|
|
128
|
-
}
|
|
129
|
-
});
|
|
130
|
-
|
|
131
|
-
// src/radio-group.connect.ts
|
|
132
|
-
function connect(state, send, normalize) {
|
|
133
|
-
const isGroupDisabled = state.context.disabled;
|
|
134
|
-
const isGroupReadOnly = state.context.readOnly;
|
|
135
|
-
function getRadioState(props) {
|
|
136
|
-
const radioState = {
|
|
137
|
-
isReadOnly: props.readOnly || isGroupReadOnly,
|
|
138
|
-
isInvalid: props.invalid,
|
|
139
|
-
isDisabled: props.disabled || isGroupDisabled,
|
|
140
|
-
isChecked: state.context.value === props.value,
|
|
141
|
-
isFocused: state.context.focusedId === props.value,
|
|
142
|
-
isHovered: state.context.hoveredId === props.value,
|
|
143
|
-
isActive: state.context.activeId === props.value
|
|
144
|
-
};
|
|
145
|
-
return {
|
|
146
|
-
...radioState,
|
|
147
|
-
isInteractive: !(radioState.isReadOnly || radioState.isDisabled)
|
|
148
|
-
};
|
|
149
|
-
}
|
|
150
|
-
function getRadioDataSet(props) {
|
|
151
|
-
const radioState = getRadioState(props);
|
|
152
|
-
return {
|
|
153
|
-
"data-focus": dataAttr(radioState.isFocused),
|
|
154
|
-
"data-disabled": dataAttr(radioState.isDisabled),
|
|
155
|
-
"data-checked": dataAttr(radioState.isChecked),
|
|
156
|
-
"data-hover": dataAttr(radioState.isHovered),
|
|
157
|
-
"data-invalid": dataAttr(radioState.isInvalid),
|
|
158
|
-
"data-readonly": dataAttr(radioState.isReadOnly)
|
|
159
|
-
};
|
|
160
|
-
}
|
|
161
|
-
const focus = () => {
|
|
162
|
-
const firstEnabledAndCheckedInput = dom.getFirstEnabledAndCheckedInputEl(state.context);
|
|
163
|
-
if (firstEnabledAndCheckedInput) {
|
|
164
|
-
firstEnabledAndCheckedInput.focus();
|
|
165
|
-
return;
|
|
166
|
-
}
|
|
167
|
-
const firstEnabledInput = dom.getFirstEnabledInputEl(state.context);
|
|
168
|
-
firstEnabledInput == null ? void 0 : firstEnabledInput.focus();
|
|
169
|
-
};
|
|
170
|
-
return {
|
|
171
|
-
value: state.context.value,
|
|
172
|
-
setValue(value) {
|
|
173
|
-
send({ type: "SET_VALUE", value, manual: true });
|
|
174
|
-
},
|
|
175
|
-
focus,
|
|
176
|
-
blur() {
|
|
177
|
-
const focusedElement = dom.getActiveElement(state.context);
|
|
178
|
-
const inputEls = dom.getInputEls(state.context);
|
|
179
|
-
const radioInputIsFocused = inputEls.some((el) => el === focusedElement);
|
|
180
|
-
if (radioInputIsFocused)
|
|
181
|
-
focusedElement == null ? void 0 : focusedElement.blur();
|
|
182
|
-
},
|
|
183
|
-
rootProps: normalize.element({
|
|
184
|
-
...parts.root.attrs,
|
|
185
|
-
role: "radiogroup",
|
|
186
|
-
id: dom.getRootId(state.context),
|
|
187
|
-
"data-orientation": state.context.orientation,
|
|
188
|
-
"aria-orientation": state.context.orientation,
|
|
189
|
-
dir: state.context.dir
|
|
190
|
-
}),
|
|
191
|
-
labelProps: normalize.element({
|
|
192
|
-
...parts.label.attrs,
|
|
193
|
-
id: dom.getLabelId(state.context),
|
|
194
|
-
onClick: focus
|
|
195
|
-
}),
|
|
196
|
-
getRadioProps(props) {
|
|
197
|
-
const rootState = getRadioState(props);
|
|
198
|
-
return normalize.label({
|
|
199
|
-
...parts.radio.attrs,
|
|
200
|
-
id: dom.getRadioId(state.context, props.value),
|
|
201
|
-
htmlFor: dom.getRadioInputId(state.context, props.value),
|
|
202
|
-
...getRadioDataSet(props),
|
|
203
|
-
onPointerMove() {
|
|
204
|
-
if (!rootState.isInteractive)
|
|
205
|
-
return;
|
|
206
|
-
send({ type: "SET_HOVERED", value: props.value, hovered: true });
|
|
207
|
-
},
|
|
208
|
-
onPointerLeave() {
|
|
209
|
-
if (!rootState.isInteractive)
|
|
210
|
-
return;
|
|
211
|
-
send({ type: "SET_HOVERED", value: null });
|
|
212
|
-
},
|
|
213
|
-
onPointerDown(event) {
|
|
214
|
-
if (!rootState.isInteractive)
|
|
215
|
-
return;
|
|
216
|
-
if (rootState.isFocused)
|
|
217
|
-
event.preventDefault();
|
|
218
|
-
send({ type: "SET_ACTIVE", value: props.value, active: true });
|
|
219
|
-
},
|
|
220
|
-
onPointerUp() {
|
|
221
|
-
if (!rootState.isInteractive)
|
|
222
|
-
return;
|
|
223
|
-
send({ type: "SET_ACTIVE", value: null });
|
|
224
|
-
}
|
|
225
|
-
});
|
|
226
|
-
},
|
|
227
|
-
getRadioLabelProps(props) {
|
|
228
|
-
return normalize.element({
|
|
229
|
-
...parts.radioLabel.attrs,
|
|
230
|
-
id: dom.getRadioLabelId(state.context, props.value),
|
|
231
|
-
...getRadioDataSet(props)
|
|
232
|
-
});
|
|
233
|
-
},
|
|
234
|
-
getRadioControlProps(props) {
|
|
235
|
-
const controlState = getRadioState(props);
|
|
236
|
-
return normalize.element({
|
|
237
|
-
...parts.radioControl.attrs,
|
|
238
|
-
id: dom.getRadioControlId(state.context, props.value),
|
|
239
|
-
"data-active": dataAttr(controlState.isActive),
|
|
240
|
-
"aria-hidden": true,
|
|
241
|
-
...getRadioDataSet(props)
|
|
242
|
-
});
|
|
243
|
-
},
|
|
244
|
-
getRadioInputProps(props) {
|
|
245
|
-
const inputState = getRadioState(props);
|
|
246
|
-
const isRequired = props.required;
|
|
247
|
-
const trulyDisabled = inputState.isDisabled && !props.focusable;
|
|
248
|
-
return normalize.input({
|
|
249
|
-
...parts.radioInput.attrs,
|
|
250
|
-
"data-ownedby": dom.getRootId(state.context),
|
|
251
|
-
id: dom.getRadioInputId(state.context, props.value),
|
|
252
|
-
type: "radio",
|
|
253
|
-
name: state.context.name || state.context.id,
|
|
254
|
-
form: state.context.form,
|
|
255
|
-
value: props.value,
|
|
256
|
-
onChange(event) {
|
|
257
|
-
if (inputState.isReadOnly || inputState.isDisabled) {
|
|
258
|
-
return;
|
|
259
|
-
}
|
|
260
|
-
if (event.target.checked) {
|
|
261
|
-
send({ type: "SET_VALUE", value: props.value });
|
|
262
|
-
}
|
|
263
|
-
},
|
|
264
|
-
onBlur() {
|
|
265
|
-
send({ type: "SET_FOCUSED", value: null });
|
|
266
|
-
},
|
|
267
|
-
onFocus() {
|
|
268
|
-
send({ type: "SET_FOCUSED", value: props.value, focused: true });
|
|
269
|
-
},
|
|
270
|
-
onKeyDown(event) {
|
|
271
|
-
if (event.key === " ") {
|
|
272
|
-
send({ type: "SET_ACTIVE", value: props.value, active: true });
|
|
273
|
-
}
|
|
274
|
-
},
|
|
275
|
-
onKeyUp(event) {
|
|
276
|
-
if (event.key === " ") {
|
|
277
|
-
send({ type: "SET_ACTIVE", value: null });
|
|
278
|
-
}
|
|
279
|
-
},
|
|
280
|
-
disabled: trulyDisabled,
|
|
281
|
-
required: isRequired,
|
|
282
|
-
defaultChecked: inputState.isChecked,
|
|
283
|
-
"data-disabled": dataAttr(inputState.isDisabled),
|
|
284
|
-
"aria-required": ariaAttr(isRequired),
|
|
285
|
-
"aria-invalid": ariaAttr(inputState.isInvalid),
|
|
286
|
-
readOnly: inputState.isReadOnly,
|
|
287
|
-
"data-readonly": dataAttr(inputState.isReadOnly),
|
|
288
|
-
"aria-disabled": ariaAttr(trulyDisabled),
|
|
289
|
-
"aria-checked": ariaAttr(inputState.isChecked),
|
|
290
|
-
style: visuallyHiddenStyle
|
|
291
|
-
});
|
|
292
|
-
}
|
|
293
|
-
};
|
|
294
|
-
}
|
|
295
|
-
|
|
296
|
-
// src/radio-group.machine.ts
|
|
297
|
-
import { createMachine } from "@zag-js/core";
|
|
298
|
-
|
|
299
|
-
// ../../utilities/form-utils/dist/index.mjs
|
|
300
|
-
function getWindow(el) {
|
|
301
|
-
var _a;
|
|
302
|
-
return (_a = el == null ? void 0 : el.ownerDocument.defaultView) != null ? _a : window;
|
|
303
|
-
}
|
|
304
|
-
function observeAttributes(node, attributes, fn) {
|
|
305
|
-
if (!node)
|
|
306
|
-
return;
|
|
307
|
-
const attrs = Array.isArray(attributes) ? attributes : [attributes];
|
|
308
|
-
const win = node.ownerDocument.defaultView || window;
|
|
309
|
-
const obs = new win.MutationObserver((changes) => {
|
|
310
|
-
for (const change of changes) {
|
|
311
|
-
if (change.type === "attributes" && change.attributeName && attrs.includes(change.attributeName)) {
|
|
312
|
-
fn(change);
|
|
313
|
-
}
|
|
314
|
-
}
|
|
315
|
-
});
|
|
316
|
-
obs.observe(node, { attributes: true, attributeFilter: attrs });
|
|
317
|
-
return () => obs.disconnect();
|
|
318
|
-
}
|
|
319
|
-
function getDescriptor(el, options) {
|
|
320
|
-
var _a;
|
|
321
|
-
const { type, property = "value" } = options;
|
|
322
|
-
const proto = getWindow(el)[type].prototype;
|
|
323
|
-
return (_a = Object.getOwnPropertyDescriptor(proto, property)) != null ? _a : {};
|
|
324
|
-
}
|
|
325
|
-
function dispatchInputCheckedEvent(el, checked) {
|
|
326
|
-
var _a;
|
|
327
|
-
if (!el)
|
|
328
|
-
return;
|
|
329
|
-
const win = getWindow(el);
|
|
330
|
-
if (!(el instanceof win.HTMLInputElement))
|
|
331
|
-
return;
|
|
332
|
-
const desc = getDescriptor(el, { type: "HTMLInputElement", property: "checked" });
|
|
333
|
-
(_a = desc.set) == null ? void 0 : _a.call(el, checked);
|
|
334
|
-
const event = new win.Event("click", { bubbles: true });
|
|
335
|
-
el.dispatchEvent(event);
|
|
336
|
-
}
|
|
337
|
-
function getClosestForm(el) {
|
|
338
|
-
if (isFormElement(el))
|
|
339
|
-
return el.form;
|
|
340
|
-
else
|
|
341
|
-
return el.closest("form");
|
|
342
|
-
}
|
|
343
|
-
function isFormElement(el) {
|
|
344
|
-
return el.matches("textarea, input, select, button");
|
|
345
|
-
}
|
|
346
|
-
function trackFormReset(el, callback) {
|
|
347
|
-
if (!el)
|
|
348
|
-
return;
|
|
349
|
-
const form = getClosestForm(el);
|
|
350
|
-
form == null ? void 0 : form.addEventListener("reset", callback, { passive: true });
|
|
351
|
-
return () => {
|
|
352
|
-
form == null ? void 0 : form.removeEventListener("reset", callback);
|
|
353
|
-
};
|
|
354
|
-
}
|
|
355
|
-
function trackFieldsetDisabled(el, callback) {
|
|
356
|
-
const fieldset = el == null ? void 0 : el.closest("fieldset");
|
|
357
|
-
if (!fieldset)
|
|
358
|
-
return;
|
|
359
|
-
callback(fieldset.disabled);
|
|
360
|
-
return observeAttributes(fieldset, ["disabled"], () => callback(fieldset.disabled));
|
|
361
|
-
}
|
|
362
|
-
function trackFormControl(el, options) {
|
|
363
|
-
if (!el)
|
|
364
|
-
return;
|
|
365
|
-
const { onFieldsetDisabled, onFormReset } = options;
|
|
366
|
-
const cleanups = [
|
|
367
|
-
trackFormReset(el, onFormReset),
|
|
368
|
-
trackFieldsetDisabled(el, (disabled) => {
|
|
369
|
-
if (disabled)
|
|
370
|
-
onFieldsetDisabled();
|
|
371
|
-
})
|
|
372
|
-
];
|
|
373
|
-
return () => {
|
|
374
|
-
cleanups.forEach((cleanup) => cleanup == null ? void 0 : cleanup());
|
|
375
|
-
};
|
|
376
|
-
}
|
|
377
|
-
|
|
378
|
-
// ../../utilities/core/dist/index.mjs
|
|
379
|
-
var isArray = (v) => Array.isArray(v);
|
|
380
|
-
var isObject = (v) => !(v == null || typeof v !== "object" || isArray(v));
|
|
381
|
-
function compact(obj) {
|
|
382
|
-
if (obj === void 0)
|
|
383
|
-
return obj;
|
|
384
|
-
return Object.fromEntries(
|
|
385
|
-
Object.entries(obj).filter(([, value]) => value !== void 0).map(([key, value]) => [key, isObject(value) ? compact(value) : value])
|
|
386
|
-
);
|
|
387
|
-
}
|
|
388
|
-
|
|
389
|
-
// src/radio-group.machine.ts
|
|
390
|
-
function machine(userContext) {
|
|
391
|
-
const ctx = compact(userContext);
|
|
392
|
-
return createMachine(
|
|
393
|
-
{
|
|
394
|
-
id: "radio",
|
|
395
|
-
initial: "unknown",
|
|
396
|
-
context: {
|
|
397
|
-
value: null,
|
|
398
|
-
initialValue: null,
|
|
399
|
-
activeId: null,
|
|
400
|
-
focusedId: null,
|
|
401
|
-
hoveredId: null,
|
|
402
|
-
...ctx
|
|
403
|
-
},
|
|
404
|
-
activities: ["trackFormControlState"],
|
|
405
|
-
on: {
|
|
406
|
-
SET_VALUE: {
|
|
407
|
-
actions: ["setValue"]
|
|
408
|
-
},
|
|
409
|
-
SET_HOVERED: {
|
|
410
|
-
actions: "setHovered"
|
|
411
|
-
},
|
|
412
|
-
SET_ACTIVE: {
|
|
413
|
-
actions: "setActive"
|
|
414
|
-
},
|
|
415
|
-
SET_FOCUSED: {
|
|
416
|
-
actions: "setFocused"
|
|
417
|
-
}
|
|
418
|
-
},
|
|
419
|
-
watch: {
|
|
420
|
-
value: ["dispatchChangeEvent", "invokeOnChange"]
|
|
421
|
-
},
|
|
422
|
-
states: {
|
|
423
|
-
unknown: {
|
|
424
|
-
on: {
|
|
425
|
-
SETUP: {
|
|
426
|
-
actions: "checkValue"
|
|
427
|
-
}
|
|
428
|
-
}
|
|
429
|
-
}
|
|
430
|
-
}
|
|
431
|
-
},
|
|
432
|
-
{
|
|
433
|
-
activities: {
|
|
434
|
-
trackFormControlState(ctx2, _evt, { send }) {
|
|
435
|
-
return trackFormControl(dom.getRootEl(ctx2), {
|
|
436
|
-
onFieldsetDisabled() {
|
|
437
|
-
ctx2.disabled = true;
|
|
438
|
-
},
|
|
439
|
-
onFormReset() {
|
|
440
|
-
send({ type: "SET_VALUE", value: ctx2.initialValue });
|
|
441
|
-
}
|
|
442
|
-
});
|
|
443
|
-
}
|
|
444
|
-
},
|
|
445
|
-
actions: {
|
|
446
|
-
checkValue(ctx2) {
|
|
447
|
-
ctx2.initialValue = ctx2.value;
|
|
448
|
-
},
|
|
449
|
-
setValue(ctx2, evt) {
|
|
450
|
-
ctx2.value = evt.value;
|
|
451
|
-
},
|
|
452
|
-
setHovered(ctx2, evt) {
|
|
453
|
-
ctx2.hoveredId = evt.value;
|
|
454
|
-
},
|
|
455
|
-
setActive(ctx2, evt) {
|
|
456
|
-
ctx2.activeId = evt.value;
|
|
457
|
-
},
|
|
458
|
-
setFocused(ctx2, evt) {
|
|
459
|
-
ctx2.focusedId = evt.value;
|
|
460
|
-
},
|
|
461
|
-
invokeOnChange(ctx2, evt) {
|
|
462
|
-
var _a;
|
|
463
|
-
(_a = ctx2.onChange) == null ? void 0 : _a.call(ctx2, { value: evt.value });
|
|
464
|
-
},
|
|
465
|
-
dispatchChangeEvent(ctx2, evt) {
|
|
466
|
-
if (!evt.manual)
|
|
467
|
-
return;
|
|
468
|
-
const el = dom.getRadioInputEl(ctx2, evt.value);
|
|
469
|
-
if (!el)
|
|
470
|
-
return;
|
|
471
|
-
dispatchInputCheckedEvent(el, !!evt.value);
|
|
472
|
-
}
|
|
473
|
-
}
|
|
474
|
-
}
|
|
475
|
-
);
|
|
476
|
-
}
|
|
1
|
+
import {
|
|
2
|
+
connect
|
|
3
|
+
} from "./chunk-KXAYH7UX.mjs";
|
|
4
|
+
import {
|
|
5
|
+
anatomy
|
|
6
|
+
} from "./chunk-MGLN5L3R.mjs";
|
|
7
|
+
import {
|
|
8
|
+
machine
|
|
9
|
+
} from "./chunk-EQKWEHJW.mjs";
|
|
10
|
+
import "./chunk-JSIZLP57.mjs";
|
|
477
11
|
export {
|
|
478
12
|
anatomy,
|
|
479
13
|
connect,
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import * as _zag_js_anatomy from '@zag-js/anatomy';
|
|
2
|
+
|
|
3
|
+
declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "label" | "radio" | "radioLabel" | "radioControl" | "radioInput">;
|
|
4
|
+
declare const parts: Record<"root" | "label" | "radio" | "radioLabel" | "radioControl" | "radioInput", _zag_js_anatomy.AnatomyPart>;
|
|
5
|
+
|
|
6
|
+
export { anatomy, parts };
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
"use strict";
|
|
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);
|
|
19
|
+
|
|
20
|
+
// src/radio-group.anatomy.ts
|
|
21
|
+
var radio_group_anatomy_exports = {};
|
|
22
|
+
__export(radio_group_anatomy_exports, {
|
|
23
|
+
anatomy: () => anatomy,
|
|
24
|
+
parts: () => parts
|
|
25
|
+
});
|
|
26
|
+
module.exports = __toCommonJS(radio_group_anatomy_exports);
|
|
27
|
+
var import_anatomy = require("@zag-js/anatomy");
|
|
28
|
+
var anatomy = (0, import_anatomy.createAnatomy)("radio-group").parts(
|
|
29
|
+
"root",
|
|
30
|
+
"label",
|
|
31
|
+
"radio",
|
|
32
|
+
"radioLabel",
|
|
33
|
+
"radioControl",
|
|
34
|
+
"radioInput"
|
|
35
|
+
);
|
|
36
|
+
var parts = anatomy.build();
|
|
37
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
38
|
+
0 && (module.exports = {
|
|
39
|
+
anatomy,
|
|
40
|
+
parts
|
|
41
|
+
});
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { PropTypes, NormalizeProps } from '@zag-js/types';
|
|
2
|
+
import { State, Send, RadioProps, InputProps } from './radio-group.types.js';
|
|
3
|
+
import '@zag-js/core';
|
|
4
|
+
|
|
5
|
+
declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): {
|
|
6
|
+
value: string | null;
|
|
7
|
+
setValue(value: string): void;
|
|
8
|
+
focus: () => void;
|
|
9
|
+
blur(): void;
|
|
10
|
+
rootProps: T["element"];
|
|
11
|
+
labelProps: T["element"];
|
|
12
|
+
getRadioProps(props: RadioProps): T["label"];
|
|
13
|
+
getRadioLabelProps(props: RadioProps): T["element"];
|
|
14
|
+
getRadioControlProps(props: RadioProps): T["element"];
|
|
15
|
+
getRadioInputProps(props: InputProps): T["input"];
|
|
16
|
+
};
|
|
17
|
+
|
|
18
|
+
export { connect };
|