@zag-js/radio-group 0.82.2 → 1.0.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.
Files changed (5) hide show
  1. package/dist/index.d.mts +77 -22
  2. package/dist/index.d.ts +77 -22
  3. package/dist/index.js +231 -218
  4. package/dist/index.mjs +235 -222
  5. package/package.json +16 -11
package/dist/index.mjs CHANGED
@@ -1,9 +1,9 @@
1
1
  import { createAnatomy } from '@zag-js/anatomy';
2
- import { createScope, queryAll, dataAttr, visuallyHiddenStyle, trackFormControl, nextTick, dispatchInputCheckedEvent } from '@zag-js/dom-query';
3
- import { isFocusVisible, trackFocusVisible } from '@zag-js/focus-visible';
4
- import { createMachine, guards } from '@zag-js/core';
2
+ import { trackFormControl, nextTick, dispatchInputCheckedEvent, queryAll, dataAttr, visuallyHiddenStyle } from '@zag-js/dom-query';
3
+ import { trackFocusVisible, isFocusVisible } from '@zag-js/focus-visible';
4
+ import { createGuards, createMachine } from '@zag-js/core';
5
5
  import { trackElementRect } from '@zag-js/element-rect';
6
- import { createSplitProps, compact, isString, isEqual } from '@zag-js/utils';
6
+ import { isString, createSplitProps } from '@zag-js/utils';
7
7
  import { createProps } from '@zag-js/types';
8
8
 
9
9
  // src/radio-group.anatomy.ts
@@ -16,87 +16,80 @@ var anatomy = createAnatomy("radio-group").parts(
16
16
  "indicator"
17
17
  );
18
18
  var parts = anatomy.build();
19
- var dom = createScope({
20
- getRootId: (ctx) => ctx.ids?.root ?? `radio-group:${ctx.id}`,
21
- getLabelId: (ctx) => ctx.ids?.label ?? `radio-group:${ctx.id}:label`,
22
- getItemId: (ctx, value) => ctx.ids?.item?.(value) ?? `radio-group:${ctx.id}:radio:${value}`,
23
- getItemHiddenInputId: (ctx, value) => ctx.ids?.itemHiddenInput?.(value) ?? `radio-group:${ctx.id}:radio:input:${value}`,
24
- getItemControlId: (ctx, value) => ctx.ids?.itemControl?.(value) ?? `radio-group:${ctx.id}:radio:control:${value}`,
25
- getItemLabelId: (ctx, value) => ctx.ids?.itemLabel?.(value) ?? `radio-group:${ctx.id}:radio:label:${value}`,
26
- getIndicatorId: (ctx) => ctx.ids?.indicator ?? `radio-group:${ctx.id}:indicator`,
27
- getRootEl: (ctx) => dom.getById(ctx, dom.getRootId(ctx)),
28
- getItemHiddenInputEl: (ctx, value) => dom.getById(ctx, dom.getItemHiddenInputId(ctx, value)),
29
- getIndicatorEl: (ctx) => dom.getById(ctx, dom.getIndicatorId(ctx)),
30
- getFirstEnabledInputEl: (ctx) => dom.getRootEl(ctx)?.querySelector("input:not(:disabled)"),
31
- getFirstEnabledAndCheckedInputEl: (ctx) => dom.getRootEl(ctx)?.querySelector("input:not(:disabled):checked"),
32
- getInputEls: (ctx) => {
33
- const ownerId = CSS.escape(dom.getRootId(ctx));
34
- const selector = `input[type=radio][data-ownedby='${ownerId}']:not([disabled])`;
35
- return queryAll(dom.getRootEl(ctx), selector);
36
- },
37
- getActiveRadioEl: (ctx) => {
38
- if (!ctx.value) return;
39
- return dom.getById(ctx, dom.getItemId(ctx, ctx.value));
40
- },
41
- getOffsetRect: (el) => ({
42
- left: el?.offsetLeft ?? 0,
43
- top: el?.offsetTop ?? 0,
44
- width: el?.offsetWidth ?? 0,
45
- height: el?.offsetHeight ?? 0
46
- }),
47
- getRectById: (ctx, id) => {
48
- const radioEl = dom.getById(ctx, dom.getItemId(ctx, id));
49
- if (!radioEl) return;
50
- return dom.resolveRect(dom.getOffsetRect(radioEl));
51
- },
52
- resolveRect: (rect) => ({
53
- width: `${rect.width}px`,
54
- height: `${rect.height}px`,
55
- left: `${rect.left}px`,
56
- top: `${rect.top}px`
57
- })
19
+ var getRootId = (ctx) => ctx.ids?.root ?? `radio-group:${ctx.id}`;
20
+ var getLabelId = (ctx) => ctx.ids?.label ?? `radio-group:${ctx.id}:label`;
21
+ var getItemId = (ctx, value) => ctx.ids?.item?.(value) ?? `radio-group:${ctx.id}:radio:${value}`;
22
+ var getItemHiddenInputId = (ctx, value) => ctx.ids?.itemHiddenInput?.(value) ?? `radio-group:${ctx.id}:radio:input:${value}`;
23
+ var getItemControlId = (ctx, value) => ctx.ids?.itemControl?.(value) ?? `radio-group:${ctx.id}:radio:control:${value}`;
24
+ var getItemLabelId = (ctx, value) => ctx.ids?.itemLabel?.(value) ?? `radio-group:${ctx.id}:radio:label:${value}`;
25
+ var getIndicatorId = (ctx) => ctx.ids?.indicator ?? `radio-group:${ctx.id}:indicator`;
26
+ var getRootEl = (ctx) => ctx.getById(getRootId(ctx));
27
+ var getIndicatorEl = (ctx) => ctx.getById(getIndicatorId(ctx));
28
+ var getFirstEnabledInputEl = (ctx) => getRootEl(ctx)?.querySelector("input:not(:disabled)");
29
+ var getFirstEnabledAndCheckedInputEl = (ctx) => getRootEl(ctx)?.querySelector("input:not(:disabled):checked");
30
+ var getInputEls = (ctx) => {
31
+ const ownerId = CSS.escape(getRootId(ctx));
32
+ const selector = `input[type=radio][data-ownedby='${ownerId}']:not([disabled])`;
33
+ return queryAll(getRootEl(ctx), selector);
34
+ };
35
+ var getRadioEl = (ctx, value) => {
36
+ if (!value) return;
37
+ return ctx.getById(getItemId(ctx, value));
38
+ };
39
+ var getOffsetRect = (el) => ({
40
+ left: el?.offsetLeft ?? 0,
41
+ top: el?.offsetTop ?? 0,
42
+ width: el?.offsetWidth ?? 0,
43
+ height: el?.offsetHeight ?? 0
44
+ });
45
+ var resolveRect = (rect) => ({
46
+ width: `${rect.width}px`,
47
+ height: `${rect.height}px`,
48
+ left: `${rect.left}px`,
49
+ top: `${rect.top}px`
58
50
  });
59
51
 
60
52
  // src/radio-group.connect.ts
61
- function connect(state, send, normalize) {
62
- const groupDisabled = state.context.isDisabled;
63
- const readOnly = state.context.readOnly;
53
+ function connect(service, normalize) {
54
+ const { context, send, computed, prop, scope } = service;
55
+ const groupDisabled = computed("isDisabled");
56
+ const readOnly = prop("readOnly");
64
57
  function getItemState(props2) {
65
58
  return {
66
59
  invalid: !!props2.invalid,
67
60
  disabled: !!props2.disabled || groupDisabled,
68
- checked: state.context.value === props2.value,
69
- focused: state.context.focusedValue === props2.value,
70
- hovered: state.context.hoveredValue === props2.value,
71
- active: state.context.activeValue === props2.value
61
+ checked: context.get("value") === props2.value,
62
+ focused: context.get("focusedValue") === props2.value,
63
+ hovered: context.get("hoveredValue") === props2.value,
64
+ active: context.get("activeValue") === props2.value
72
65
  };
73
66
  }
74
67
  function getItemDataAttrs(props2) {
75
68
  const radioState = getItemState(props2);
76
69
  return {
77
70
  "data-focus": dataAttr(radioState.focused),
78
- "data-focus-visible": dataAttr(radioState.focused && state.context.focusVisible),
71
+ "data-focus-visible": dataAttr(radioState.focused && context.get("focusVisible")),
79
72
  "data-disabled": dataAttr(radioState.disabled),
80
73
  "data-readonly": dataAttr(readOnly),
81
74
  "data-state": radioState.checked ? "checked" : "unchecked",
82
75
  "data-hover": dataAttr(radioState.hovered),
83
76
  "data-invalid": dataAttr(radioState.invalid),
84
- "data-orientation": state.context.orientation,
85
- "data-ssr": dataAttr(state.context.ssr)
77
+ "data-orientation": prop("orientation"),
78
+ "data-ssr": dataAttr(context.get("ssr"))
86
79
  };
87
80
  }
88
81
  const focus = () => {
89
- const firstEnabledAndCheckedInput = dom.getFirstEnabledAndCheckedInputEl(state.context);
82
+ const firstEnabledAndCheckedInput = getFirstEnabledAndCheckedInputEl(scope);
90
83
  if (firstEnabledAndCheckedInput) {
91
84
  firstEnabledAndCheckedInput.focus();
92
85
  return;
93
86
  }
94
- const firstEnabledInput = dom.getFirstEnabledInputEl(state.context);
87
+ const firstEnabledInput = getFirstEnabledInputEl(scope);
95
88
  firstEnabledInput?.focus();
96
89
  };
97
90
  return {
98
91
  focus,
99
- value: state.context.value,
92
+ value: context.get("value"),
100
93
  setValue(value) {
101
94
  send({ type: "SET_VALUE", value, isTrusted: false });
102
95
  },
@@ -107,12 +100,12 @@ function connect(state, send, normalize) {
107
100
  return normalize.element({
108
101
  ...parts.root.attrs,
109
102
  role: "radiogroup",
110
- id: dom.getRootId(state.context),
111
- "aria-labelledby": dom.getLabelId(state.context),
112
- "data-orientation": state.context.orientation,
103
+ id: getRootId(scope),
104
+ "aria-labelledby": getLabelId(scope),
105
+ "data-orientation": prop("orientation"),
113
106
  "data-disabled": dataAttr(groupDisabled),
114
- "aria-orientation": state.context.orientation,
115
- dir: state.context.dir,
107
+ "aria-orientation": prop("orientation"),
108
+ dir: prop("dir"),
116
109
  style: {
117
110
  position: "relative"
118
111
  }
@@ -121,10 +114,10 @@ function connect(state, send, normalize) {
121
114
  getLabelProps() {
122
115
  return normalize.element({
123
116
  ...parts.label.attrs,
124
- dir: state.context.dir,
125
- "data-orientation": state.context.orientation,
117
+ dir: prop("dir"),
118
+ "data-orientation": prop("orientation"),
126
119
  "data-disabled": dataAttr(groupDisabled),
127
- id: dom.getLabelId(state.context),
120
+ id: getLabelId(scope),
128
121
  onClick: focus
129
122
  });
130
123
  },
@@ -133,9 +126,9 @@ function connect(state, send, normalize) {
133
126
  const itemState = getItemState(props2);
134
127
  return normalize.label({
135
128
  ...parts.item.attrs,
136
- dir: state.context.dir,
137
- id: dom.getItemId(state.context, props2.value),
138
- htmlFor: dom.getItemHiddenInputId(state.context, props2.value),
129
+ dir: prop("dir"),
130
+ id: getItemId(scope, props2.value),
131
+ htmlFor: getItemHiddenInputId(scope, props2.value),
139
132
  ...getItemDataAttrs(props2),
140
133
  onPointerMove() {
141
134
  if (itemState.disabled) return;
@@ -162,8 +155,8 @@ function connect(state, send, normalize) {
162
155
  getItemTextProps(props2) {
163
156
  return normalize.element({
164
157
  ...parts.itemText.attrs,
165
- dir: state.context.dir,
166
- id: dom.getItemLabelId(state.context, props2.value),
158
+ dir: prop("dir"),
159
+ id: getItemLabelId(scope, props2.value),
167
160
  ...getItemDataAttrs(props2)
168
161
  });
169
162
  },
@@ -171,8 +164,8 @@ function connect(state, send, normalize) {
171
164
  const controlState = getItemState(props2);
172
165
  return normalize.element({
173
166
  ...parts.itemControl.attrs,
174
- dir: state.context.dir,
175
- id: dom.getItemControlId(state.context, props2.value),
167
+ dir: prop("dir"),
168
+ id: getItemControlId(scope, props2.value),
176
169
  "data-active": dataAttr(controlState.active),
177
170
  "aria-hidden": true,
178
171
  ...getItemDataAttrs(props2)
@@ -181,11 +174,11 @@ function connect(state, send, normalize) {
181
174
  getItemHiddenInputProps(props2) {
182
175
  const inputState = getItemState(props2);
183
176
  return normalize.input({
184
- "data-ownedby": dom.getRootId(state.context),
185
- id: dom.getItemHiddenInputId(state.context, props2.value),
177
+ "data-ownedby": getRootId(scope),
178
+ id: getItemHiddenInputId(scope, props2.value),
186
179
  type: "radio",
187
- name: state.context.name || state.context.id,
188
- form: state.context.form,
180
+ name: prop("name") || prop("id"),
181
+ form: prop("form"),
189
182
  value: props2.value,
190
183
  onClick(event) {
191
184
  if (readOnly) {
@@ -221,178 +214,197 @@ function connect(state, send, normalize) {
221
214
  });
222
215
  },
223
216
  getIndicatorProps() {
217
+ const rect = context.get("indicatorRect");
224
218
  return normalize.element({
225
- id: dom.getIndicatorId(state.context),
219
+ id: getIndicatorId(scope),
226
220
  ...parts.indicator.attrs,
227
- dir: state.context.dir,
228
- hidden: state.context.value == null,
221
+ dir: prop("dir"),
222
+ hidden: context.get("value") == null,
229
223
  "data-disabled": dataAttr(groupDisabled),
230
- "data-orientation": state.context.orientation,
224
+ "data-orientation": prop("orientation"),
231
225
  style: {
232
226
  "--transition-property": "left, top, width, height",
233
- "--left": state.context.indicatorRect?.left,
234
- "--top": state.context.indicatorRect?.top,
235
- "--width": state.context.indicatorRect?.width,
236
- "--height": state.context.indicatorRect?.height,
227
+ "--left": rect?.left,
228
+ "--top": rect?.top,
229
+ "--width": rect?.width,
230
+ "--height": rect?.height,
237
231
  position: "absolute",
238
232
  willChange: "var(--transition-property)",
239
233
  transitionProperty: "var(--transition-property)",
240
- transitionDuration: state.context.canIndicatorTransition ? "var(--transition-duration, 150ms)" : "0ms",
234
+ transitionDuration: context.get("canIndicatorTransition") ? "var(--transition-duration, 150ms)" : "0ms",
241
235
  transitionTimingFunction: "var(--transition-timing-function)",
242
- [state.context.orientation === "horizontal" ? "left" : "top"]: state.context.orientation === "horizontal" ? "var(--left)" : "var(--top)"
236
+ [prop("orientation") === "horizontal" ? "left" : "top"]: prop("orientation") === "horizontal" ? "var(--left)" : "var(--top)"
243
237
  }
244
238
  });
245
239
  }
246
240
  };
247
241
  }
248
- var { not } = guards;
249
- function machine(userContext) {
250
- const ctx = compact(userContext);
251
- return createMachine(
252
- {
253
- id: "radio",
254
- initial: "idle",
255
- context: {
256
- value: null,
257
- activeValue: null,
258
- focusedValue: null,
259
- hoveredValue: null,
260
- disabled: false,
261
- orientation: "vertical",
262
- ...ctx,
263
- indicatorRect: {},
264
- canIndicatorTransition: false,
265
- fieldsetDisabled: false,
266
- focusVisible: false,
267
- ssr: true
268
- },
269
- computed: {
270
- isDisabled: (ctx2) => !!ctx2.disabled || ctx2.fieldsetDisabled
271
- },
272
- entry: ["syncIndicatorRect", "syncSsr"],
273
- exit: ["cleanupObserver"],
274
- activities: ["trackFormControlState", "trackFocusVisible"],
275
- watch: {
276
- value: ["setIndicatorTransition", "syncIndicatorRect", "syncInputElements"]
242
+ var { not } = createGuards();
243
+ var machine = createMachine({
244
+ props({ props: props2 }) {
245
+ return {
246
+ orientation: "vertical",
247
+ ...props2
248
+ };
249
+ },
250
+ initialState() {
251
+ return "idle";
252
+ },
253
+ context({ prop, bindable }) {
254
+ return {
255
+ value: bindable(() => ({
256
+ defaultValue: prop("defaultValue"),
257
+ value: prop("value"),
258
+ onChange(value) {
259
+ prop("onValueChange")?.({ value });
260
+ }
261
+ })),
262
+ activeValue: bindable(() => ({
263
+ defaultValue: null
264
+ })),
265
+ focusedValue: bindable(() => ({
266
+ defaultValue: null
267
+ })),
268
+ hoveredValue: bindable(() => ({
269
+ defaultValue: null
270
+ })),
271
+ indicatorRect: bindable(() => ({
272
+ defaultValue: {}
273
+ })),
274
+ canIndicatorTransition: bindable(() => ({
275
+ defaultValue: false
276
+ })),
277
+ fieldsetDisabled: bindable(() => ({
278
+ defaultValue: false
279
+ })),
280
+ focusVisible: bindable(() => ({
281
+ defaultValue: false
282
+ })),
283
+ ssr: bindable(() => ({
284
+ defaultValue: true
285
+ }))
286
+ };
287
+ },
288
+ refs() {
289
+ return {
290
+ indicatorCleanup: null
291
+ };
292
+ },
293
+ computed: {
294
+ isDisabled: ({ prop, context }) => !!prop("disabled") || context.get("fieldsetDisabled")
295
+ },
296
+ entry: ["syncIndicatorRect", "syncSsr"],
297
+ exit: ["cleanupObserver"],
298
+ effects: ["trackFormControlState", "trackFocusVisible"],
299
+ watch({ track, action, context }) {
300
+ track([() => context.get("value")], () => {
301
+ action(["setIndicatorTransition", "syncIndicatorRect", "syncInputElements"]);
302
+ });
303
+ },
304
+ on: {
305
+ SET_VALUE: [
306
+ {
307
+ guard: not("isTrusted"),
308
+ actions: ["setValue", "dispatchChangeEvent"]
277
309
  },
278
- on: {
279
- SET_VALUE: [
280
- {
281
- guard: not("isTrusted"),
282
- actions: ["setValue", "dispatchChangeEvent"]
310
+ {
311
+ actions: ["setValue"]
312
+ }
313
+ ],
314
+ SET_HOVERED: {
315
+ actions: ["setHovered"]
316
+ },
317
+ SET_ACTIVE: {
318
+ actions: ["setActive"]
319
+ },
320
+ SET_FOCUSED: {
321
+ actions: ["setFocused"]
322
+ }
323
+ },
324
+ states: {
325
+ idle: {}
326
+ },
327
+ implementations: {
328
+ guards: {
329
+ isTrusted: ({ event }) => !!event.isTrusted
330
+ },
331
+ effects: {
332
+ trackFormControlState({ context, scope }) {
333
+ return trackFormControl(getRootEl(scope), {
334
+ onFieldsetDisabledChange(disabled) {
335
+ context.set("fieldsetDisabled", disabled);
283
336
  },
284
- {
285
- actions: ["setValue"]
337
+ onFormReset() {
338
+ context.set("value", context.initial("value"));
286
339
  }
287
- ],
288
- SET_HOVERED: {
289
- actions: "setHovered"
290
- },
291
- SET_ACTIVE: {
292
- actions: "setActive"
293
- },
294
- SET_FOCUSED: {
295
- actions: "setFocused"
296
- }
340
+ });
297
341
  },
298
- states: {
299
- idle: {}
342
+ trackFocusVisible({ scope }) {
343
+ return trackFocusVisible({ root: scope.getRootNode?.() });
300
344
  }
301
345
  },
302
- {
303
- guards: {
304
- isTrusted: (_ctx, evt) => !!evt.isTrusted
346
+ actions: {
347
+ setValue({ context, event }) {
348
+ context.set("value", event.value);
305
349
  },
306
- activities: {
307
- trackFormControlState(ctx2, _evt, { send, initialContext }) {
308
- return trackFormControl(dom.getRootEl(ctx2), {
309
- onFieldsetDisabledChange(disabled) {
310
- ctx2.fieldsetDisabled = disabled;
311
- },
312
- onFormReset() {
313
- send({ type: "SET_VALUE", value: initialContext.value });
314
- }
315
- });
316
- },
317
- trackFocusVisible(ctx2) {
318
- return trackFocusVisible({ root: dom.getRootNode(ctx2) });
319
- }
350
+ setHovered({ context, event }) {
351
+ context.set("hoveredValue", event.value);
320
352
  },
321
- actions: {
322
- setValue(ctx2, evt) {
323
- set.value(ctx2, evt.value);
324
- },
325
- setHovered(ctx2, evt) {
326
- ctx2.hoveredValue = evt.value;
327
- },
328
- setActive(ctx2, evt) {
329
- ctx2.activeValue = evt.value;
330
- },
331
- setFocused(ctx2, evt) {
332
- ctx2.focusedValue = evt.value;
333
- ctx2.focusVisible = evt.focusVisible;
334
- },
335
- syncInputElements(ctx2) {
336
- const inputs = dom.getInputEls(ctx2);
337
- inputs.forEach((input) => {
338
- input.checked = input.value === ctx2.value;
339
- });
340
- },
341
- setIndicatorTransition(ctx2) {
342
- ctx2.canIndicatorTransition = isString(ctx2.value);
343
- },
344
- cleanupObserver(ctx2) {
345
- ctx2.indicatorCleanup?.();
346
- },
347
- syncSsr(ctx2) {
348
- ctx2.ssr = false;
349
- },
350
- syncIndicatorRect(ctx2) {
351
- ctx2.indicatorCleanup?.();
352
- if (!dom.getIndicatorEl(ctx2)) return;
353
- const value = ctx2.value;
354
- const radioEl = dom.getActiveRadioEl(ctx2);
355
- if (value == null || !radioEl) {
356
- ctx2.indicatorRect = {};
357
- return;
358
- }
359
- ctx2.indicatorCleanup = trackElementRect(radioEl, {
360
- getRect(el) {
361
- return dom.getOffsetRect(el);
362
- },
363
- onChange(rect) {
364
- ctx2.indicatorRect = dom.resolveRect(rect);
365
- nextTick(() => {
366
- ctx2.canIndicatorTransition = false;
367
- });
368
- }
369
- });
370
- },
371
- dispatchChangeEvent(ctx2) {
372
- const inputEls = dom.getInputEls(ctx2);
373
- inputEls.forEach((inputEl) => {
374
- const checked = inputEl.value === ctx2.value;
375
- if (checked === inputEl.checked) return;
376
- dispatchInputCheckedEvent(inputEl, { checked });
377
- });
353
+ setActive({ context, event }) {
354
+ context.set("activeValue", event.value);
355
+ },
356
+ setFocused({ context, event }) {
357
+ context.set("focusedValue", event.value);
358
+ context.set("focusVisible", event.focusVisible);
359
+ },
360
+ syncInputElements({ context, scope }) {
361
+ const inputs = getInputEls(scope);
362
+ inputs.forEach((input) => {
363
+ input.checked = input.value === context.get("value");
364
+ });
365
+ },
366
+ setIndicatorTransition({ context }) {
367
+ context.set("canIndicatorTransition", isString(context.get("value")));
368
+ },
369
+ cleanupObserver({ refs }) {
370
+ refs.get("indicatorCleanup")?.();
371
+ },
372
+ syncSsr({ context }) {
373
+ context.set("ssr", false);
374
+ },
375
+ syncIndicatorRect({ context, scope, refs }) {
376
+ refs.get("indicatorCleanup")?.();
377
+ if (!getIndicatorEl(scope)) return;
378
+ const value = context.get("value");
379
+ const radioEl = getRadioEl(scope, value);
380
+ if (value == null || !radioEl) {
381
+ context.set("indicatorRect", {});
382
+ return;
378
383
  }
384
+ const indicatorCleanup = trackElementRect(radioEl, {
385
+ getRect(el) {
386
+ return getOffsetRect(el);
387
+ },
388
+ onChange(rect) {
389
+ context.set("indicatorRect", resolveRect(rect));
390
+ nextTick(() => {
391
+ context.set("canIndicatorTransition", false);
392
+ });
393
+ }
394
+ });
395
+ refs.set("indicatorCleanup", indicatorCleanup);
396
+ },
397
+ dispatchChangeEvent({ context, scope }) {
398
+ const inputEls = getInputEls(scope);
399
+ inputEls.forEach((inputEl) => {
400
+ const checked = inputEl.value === context.get("value");
401
+ if (checked === inputEl.checked) return;
402
+ dispatchInputCheckedEvent(inputEl, { checked });
403
+ });
379
404
  }
380
405
  }
381
- );
382
- }
383
- var invoke = {
384
- change: (ctx) => {
385
- if (ctx.value == null) return;
386
- ctx.onValueChange?.({ value: ctx.value });
387
406
  }
388
- };
389
- var set = {
390
- value: (ctx, value) => {
391
- if (isEqual(ctx.value, value)) return;
392
- ctx.value = value;
393
- invoke.change(ctx);
394
- }
395
- };
407
+ });
396
408
  var props = createProps()([
397
409
  "dir",
398
410
  "disabled",
@@ -404,7 +416,8 @@ var props = createProps()([
404
416
  "onValueChange",
405
417
  "orientation",
406
418
  "readOnly",
407
- "value"
419
+ "value",
420
+ "defaultValue"
408
421
  ]);
409
422
  var splitProps = createSplitProps(props);
410
423
  var itemProps = createProps()(["value", "disabled", "invalid"]);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zag-js/radio-group",
3
- "version": "0.82.2",
3
+ "version": "1.0.0",
4
4
  "description": "Core logic for the radio group widget implemented as a state machine",
5
5
  "keywords": [
6
6
  "js",
@@ -27,13 +27,13 @@
27
27
  "url": "https://github.com/chakra-ui/zag/issues"
28
28
  },
29
29
  "dependencies": {
30
- "@zag-js/anatomy": "0.82.2",
31
- "@zag-js/dom-query": "0.82.2",
32
- "@zag-js/element-rect": "0.82.2",
33
- "@zag-js/focus-visible": "0.82.2",
34
- "@zag-js/utils": "0.82.2",
35
- "@zag-js/core": "0.82.2",
36
- "@zag-js/types": "0.82.2"
30
+ "@zag-js/anatomy": "1.0.0",
31
+ "@zag-js/dom-query": "1.0.0",
32
+ "@zag-js/element-rect": "1.0.0",
33
+ "@zag-js/utils": "1.0.0",
34
+ "@zag-js/focus-visible": "1.0.0",
35
+ "@zag-js/core": "1.0.0",
36
+ "@zag-js/types": "1.0.0"
37
37
  },
38
38
  "devDependencies": {
39
39
  "clean-package": "2.2.0"
@@ -44,9 +44,14 @@
44
44
  "types": "dist/index.d.ts",
45
45
  "exports": {
46
46
  ".": {
47
- "types": "./dist/index.d.ts",
48
- "import": "./dist/index.mjs",
49
- "require": "./dist/index.js"
47
+ "import": {
48
+ "types": "./dist/index.d.mts",
49
+ "default": "./dist/index.mjs"
50
+ },
51
+ "require": {
52
+ "types": "./dist/index.d.ts",
53
+ "default": "./dist/index.js"
54
+ }
50
55
  },
51
56
  "./package.json": "./package.json"
52
57
  },