@zag-js/radio-group 0.1.6 → 0.1.8
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-FMPH6XGK.mjs +197 -0
- package/dist/chunk-JED7REAH.mjs +192 -0
- package/dist/chunk-MGLN5L3R.mjs +16 -0
- package/dist/chunk-WSYVDFNO.mjs +92 -0
- package/dist/index.d.ts +7 -951
- package/dist/index.js +45 -51
- 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 +312 -0
- package/dist/radio-group.connect.mjs +8 -0
- package/dist/radio-group.dom.d.ts +35 -0
- package/dist/radio-group.dom.js +113 -0
- package/dist/radio-group.dom.mjs +6 -0
- package/dist/radio-group.machine.d.ts +7 -0
- package/dist/radio-group.machine.js +299 -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) => {
|
|
@@ -71,35 +90,38 @@ function defineDomHelpers(helpers) {
|
|
|
71
90
|
return (_a = dom2.getDoc(ctx).defaultView) != null ? _a : window;
|
|
72
91
|
},
|
|
73
92
|
getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
|
|
74
|
-
getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
|
|
75
|
-
createEmitter: (ctx, target) => {
|
|
76
|
-
const win = dom2.getWin(ctx);
|
|
77
|
-
return function emit(evt, detail, options) {
|
|
78
|
-
const { bubbles = true, cancelable, composed = true } = options != null ? options : {};
|
|
79
|
-
const eventName = `zag:${evt}`;
|
|
80
|
-
const init = { bubbles, cancelable, composed, detail };
|
|
81
|
-
const event = new win.CustomEvent(eventName, init);
|
|
82
|
-
target.dispatchEvent(event);
|
|
83
|
-
};
|
|
84
|
-
},
|
|
85
|
-
createListener: (target) => {
|
|
86
|
-
return function listen(evt, handler) {
|
|
87
|
-
const eventName = `zag:${evt}`;
|
|
88
|
-
const listener = (e) => handler(e);
|
|
89
|
-
target.addEventListener(eventName, listener);
|
|
90
|
-
return () => target.removeEventListener(eventName, listener);
|
|
91
|
-
};
|
|
92
|
-
}
|
|
93
|
+
getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
|
|
93
94
|
};
|
|
94
95
|
return {
|
|
95
96
|
...dom2,
|
|
96
97
|
...helpers
|
|
97
98
|
};
|
|
98
99
|
}
|
|
100
|
+
|
|
101
|
+
// ../../utilities/dom/src/mutation-observer.ts
|
|
102
|
+
function observeAttributes(node, attributes, fn) {
|
|
103
|
+
if (!node)
|
|
104
|
+
return;
|
|
105
|
+
const attrs = Array.isArray(attributes) ? attributes : [attributes];
|
|
106
|
+
const win = node.ownerDocument.defaultView || window;
|
|
107
|
+
const obs = new win.MutationObserver((changes) => {
|
|
108
|
+
for (const change of changes) {
|
|
109
|
+
if (change.type === "attributes" && change.attributeName && attrs.includes(change.attributeName)) {
|
|
110
|
+
fn(change);
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
});
|
|
114
|
+
obs.observe(node, { attributes: true, attributeFilter: attrs });
|
|
115
|
+
return () => obs.disconnect();
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
// ../../utilities/dom/src/nodelist.ts
|
|
99
119
|
function queryAll(root, selector) {
|
|
100
120
|
var _a;
|
|
101
121
|
return Array.from((_a = root == null ? void 0 : root.querySelectorAll(selector)) != null ? _a : []);
|
|
102
122
|
}
|
|
123
|
+
|
|
124
|
+
// ../../utilities/dom/src/visually-hidden.ts
|
|
103
125
|
var visuallyHiddenStyle = {
|
|
104
126
|
border: "0",
|
|
105
127
|
clip: "rect(0 0 0 0)",
|
|
@@ -324,26 +346,7 @@ function connect(state, send, normalize) {
|
|
|
324
346
|
// src/radio-group.machine.ts
|
|
325
347
|
var import_core = require("@zag-js/core");
|
|
326
348
|
|
|
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
|
-
}
|
|
349
|
+
// ../../utilities/form-utils/src/input-event.ts
|
|
347
350
|
function getDescriptor(el, options) {
|
|
348
351
|
var _a;
|
|
349
352
|
const { type, property = "value" } = options;
|
|
@@ -362,6 +365,8 @@ function dispatchInputCheckedEvent(el, checked) {
|
|
|
362
365
|
const event = new win.Event("click", { bubbles: true });
|
|
363
366
|
el.dispatchEvent(event);
|
|
364
367
|
}
|
|
368
|
+
|
|
369
|
+
// ../../utilities/form-utils/src/form.ts
|
|
365
370
|
function getClosestForm(el) {
|
|
366
371
|
if (isFormElement(el))
|
|
367
372
|
return el.form;
|
|
@@ -403,17 +408,6 @@ function trackFormControl(el, options) {
|
|
|
403
408
|
};
|
|
404
409
|
}
|
|
405
410
|
|
|
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
411
|
// src/radio-group.machine.ts
|
|
418
412
|
function machine(userContext) {
|
|
419
413
|
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-FMPH6XGK.mjs";
|
|
4
|
+
import {
|
|
5
|
+
anatomy
|
|
6
|
+
} from "./chunk-MGLN5L3R.mjs";
|
|
7
|
+
import {
|
|
8
|
+
machine
|
|
9
|
+
} from "./chunk-JED7REAH.mjs";
|
|
10
|
+
import "./chunk-WSYVDFNO.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
|
+
});
|