@zag-js/radio-group 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.js CHANGED
@@ -1,38 +1,16 @@
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);
1
+ 'use strict';
19
2
 
20
- // src/index.ts
21
- var src_exports = {};
22
- __export(src_exports, {
23
- anatomy: () => anatomy,
24
- connect: () => connect,
25
- itemProps: () => itemProps,
26
- machine: () => machine,
27
- props: () => props,
28
- splitItemProps: () => splitItemProps,
29
- splitProps: () => splitProps
30
- });
31
- module.exports = __toCommonJS(src_exports);
3
+ var anatomy$1 = require('@zag-js/anatomy');
4
+ var domQuery = require('@zag-js/dom-query');
5
+ var focusVisible = require('@zag-js/focus-visible');
6
+ var core = require('@zag-js/core');
7
+ var elementRect = require('@zag-js/element-rect');
8
+ var formUtils = require('@zag-js/form-utils');
9
+ var utils = require('@zag-js/utils');
10
+ var types = require('@zag-js/types');
32
11
 
33
12
  // src/radio-group.anatomy.ts
34
- var import_anatomy = require("@zag-js/anatomy");
35
- var anatomy = (0, import_anatomy.createAnatomy)("radio-group").parts(
13
+ var anatomy = anatomy$1.createAnatomy("radio-group").parts(
36
14
  "root",
37
15
  "label",
38
16
  "item",
@@ -41,14 +19,7 @@ var anatomy = (0, import_anatomy.createAnatomy)("radio-group").parts(
41
19
  "indicator"
42
20
  );
43
21
  var parts = anatomy.build();
44
-
45
- // src/radio-group.connect.ts
46
- var import_dom_query2 = require("@zag-js/dom-query");
47
- var import_focus_visible = require("@zag-js/focus-visible");
48
-
49
- // src/radio-group.dom.ts
50
- var import_dom_query = require("@zag-js/dom-query");
51
- var dom = (0, import_dom_query.createScope)({
22
+ var dom = domQuery.createScope({
52
23
  getRootId: (ctx) => ctx.ids?.root ?? `radio-group:${ctx.id}`,
53
24
  getLabelId: (ctx) => ctx.ids?.label ?? `radio-group:${ctx.id}:label`,
54
25
  getItemId: (ctx, value) => ctx.ids?.item?.(value) ?? `radio-group:${ctx.id}:radio:${value}`,
@@ -64,7 +35,7 @@ var dom = (0, import_dom_query.createScope)({
64
35
  getInputEls: (ctx) => {
65
36
  const ownerId = CSS.escape(dom.getRootId(ctx));
66
37
  const selector = `input[type=radio][data-ownedby='${ownerId}']:not([disabled])`;
67
- return (0, import_dom_query.queryAll)(dom.getRootEl(ctx), selector);
38
+ return domQuery.queryAll(dom.getRootEl(ctx), selector);
68
39
  },
69
40
  getActiveRadioEl: (ctx) => {
70
41
  if (!ctx.value) return;
@@ -106,15 +77,15 @@ function connect(state, send, normalize) {
106
77
  function getItemDataAttrs(props2) {
107
78
  const radioState = getItemState(props2);
108
79
  return {
109
- "data-focus": (0, import_dom_query2.dataAttr)(radioState.focused),
110
- "data-focus-visible": (0, import_dom_query2.dataAttr)(radioState.focused && state.context.focusVisible),
111
- "data-disabled": (0, import_dom_query2.dataAttr)(radioState.disabled),
112
- "data-readonly": (0, import_dom_query2.dataAttr)(readOnly),
80
+ "data-focus": domQuery.dataAttr(radioState.focused),
81
+ "data-focus-visible": domQuery.dataAttr(radioState.focused && state.context.focusVisible),
82
+ "data-disabled": domQuery.dataAttr(radioState.disabled),
83
+ "data-readonly": domQuery.dataAttr(readOnly),
113
84
  "data-state": radioState.checked ? "checked" : "unchecked",
114
- "data-hover": (0, import_dom_query2.dataAttr)(radioState.hovered),
115
- "data-invalid": (0, import_dom_query2.dataAttr)(radioState.invalid),
85
+ "data-hover": domQuery.dataAttr(radioState.hovered),
86
+ "data-invalid": domQuery.dataAttr(radioState.invalid),
116
87
  "data-orientation": state.context.orientation,
117
- "data-ssr": (0, import_dom_query2.dataAttr)(state.context.ssr)
88
+ "data-ssr": domQuery.dataAttr(state.context.ssr)
118
89
  };
119
90
  }
120
91
  const focus = () => {
@@ -142,7 +113,7 @@ function connect(state, send, normalize) {
142
113
  id: dom.getRootId(state.context),
143
114
  "aria-labelledby": dom.getLabelId(state.context),
144
115
  "data-orientation": state.context.orientation,
145
- "data-disabled": (0, import_dom_query2.dataAttr)(groupDisabled),
116
+ "data-disabled": domQuery.dataAttr(groupDisabled),
146
117
  "aria-orientation": state.context.orientation,
147
118
  dir: state.context.dir,
148
119
  style: {
@@ -155,7 +126,7 @@ function connect(state, send, normalize) {
155
126
  ...parts.label.attrs,
156
127
  dir: state.context.dir,
157
128
  "data-orientation": state.context.orientation,
158
- "data-disabled": (0, import_dom_query2.dataAttr)(groupDisabled),
129
+ "data-disabled": domQuery.dataAttr(groupDisabled),
159
130
  id: dom.getLabelId(state.context),
160
131
  onClick: focus
161
132
  });
@@ -205,7 +176,7 @@ function connect(state, send, normalize) {
205
176
  ...parts.itemControl.attrs,
206
177
  dir: state.context.dir,
207
178
  id: dom.getItemControlId(state.context, props2.value),
208
- "data-active": (0, import_dom_query2.dataAttr)(controlState.active),
179
+ "data-active": domQuery.dataAttr(controlState.active),
209
180
  "aria-hidden": true,
210
181
  ...getItemDataAttrs(props2)
211
182
  });
@@ -232,8 +203,8 @@ function connect(state, send, normalize) {
232
203
  send({ type: "SET_FOCUSED", value: null, focused: false, focusVisible: false });
233
204
  },
234
205
  onFocus() {
235
- const focusVisible = (0, import_focus_visible.isFocusVisible)();
236
- send({ type: "SET_FOCUSED", value: props2.value, focused: true, focusVisible });
206
+ const focusVisible$1 = focusVisible.isFocusVisible();
207
+ send({ type: "SET_FOCUSED", value: props2.value, focused: true, focusVisible: focusVisible$1 });
237
208
  },
238
209
  onKeyDown(event) {
239
210
  if (event.defaultPrevented) return;
@@ -249,7 +220,7 @@ function connect(state, send, normalize) {
249
220
  },
250
221
  disabled: inputState.disabled,
251
222
  defaultChecked: inputState.checked,
252
- style: import_dom_query2.visuallyHiddenStyle
223
+ style: domQuery.visuallyHiddenStyle
253
224
  });
254
225
  },
255
226
  getIndicatorProps() {
@@ -258,7 +229,7 @@ function connect(state, send, normalize) {
258
229
  ...parts.indicator.attrs,
259
230
  dir: state.context.dir,
260
231
  hidden: state.context.value == null,
261
- "data-disabled": (0, import_dom_query2.dataAttr)(groupDisabled),
232
+ "data-disabled": domQuery.dataAttr(groupDisabled),
262
233
  "data-orientation": state.context.orientation,
263
234
  style: {
264
235
  "--transition-property": "left, top, width, height",
@@ -277,18 +248,10 @@ function connect(state, send, normalize) {
277
248
  }
278
249
  };
279
250
  }
280
-
281
- // src/radio-group.machine.ts
282
- var import_core = require("@zag-js/core");
283
- var import_dom_query3 = require("@zag-js/dom-query");
284
- var import_element_rect = require("@zag-js/element-rect");
285
- var import_focus_visible2 = require("@zag-js/focus-visible");
286
- var import_form_utils = require("@zag-js/form-utils");
287
- var import_utils = require("@zag-js/utils");
288
- var { not } = import_core.guards;
251
+ var { not } = core.guards;
289
252
  function machine(userContext) {
290
- const ctx = (0, import_utils.compact)(userContext);
291
- return (0, import_core.createMachine)(
253
+ const ctx = utils.compact(userContext);
254
+ return core.createMachine(
292
255
  {
293
256
  id: "radio",
294
257
  initial: "idle",
@@ -345,7 +308,7 @@ function machine(userContext) {
345
308
  },
346
309
  activities: {
347
310
  trackFormControlState(ctx2, _evt, { send, initialContext }) {
348
- return (0, import_form_utils.trackFormControl)(dom.getRootEl(ctx2), {
311
+ return formUtils.trackFormControl(dom.getRootEl(ctx2), {
349
312
  onFieldsetDisabledChange(disabled) {
350
313
  ctx2.fieldsetDisabled = disabled;
351
314
  },
@@ -355,7 +318,7 @@ function machine(userContext) {
355
318
  });
356
319
  },
357
320
  trackFocusVisible(ctx2) {
358
- return (0, import_focus_visible2.trackFocusVisible)({ root: dom.getRootNode(ctx2) });
321
+ return focusVisible.trackFocusVisible({ root: dom.getRootNode(ctx2) });
359
322
  }
360
323
  },
361
324
  actions: {
@@ -379,7 +342,7 @@ function machine(userContext) {
379
342
  });
380
343
  },
381
344
  setIndicatorTransition(ctx2) {
382
- ctx2.canIndicatorTransition = (0, import_utils.isString)(ctx2.value);
345
+ ctx2.canIndicatorTransition = utils.isString(ctx2.value);
383
346
  },
384
347
  cleanupObserver(ctx2) {
385
348
  ctx2.indicatorCleanup?.();
@@ -396,13 +359,13 @@ function machine(userContext) {
396
359
  ctx2.indicatorRect = {};
397
360
  return;
398
361
  }
399
- ctx2.indicatorCleanup = (0, import_element_rect.trackElementRect)(radioEl, {
362
+ ctx2.indicatorCleanup = elementRect.trackElementRect(radioEl, {
400
363
  getRect(el) {
401
364
  return dom.getOffsetRect(el);
402
365
  },
403
366
  onChange(rect) {
404
367
  ctx2.indicatorRect = dom.resolveRect(rect);
405
- (0, import_dom_query3.nextTick)(() => {
368
+ domQuery.nextTick(() => {
406
369
  ctx2.canIndicatorTransition = false;
407
370
  });
408
371
  }
@@ -413,7 +376,7 @@ function machine(userContext) {
413
376
  inputEls.forEach((inputEl) => {
414
377
  const checked = inputEl.value === ctx2.value;
415
378
  if (checked === inputEl.checked) return;
416
- (0, import_form_utils.dispatchInputCheckedEvent)(inputEl, { checked });
379
+ formUtils.dispatchInputCheckedEvent(inputEl, { checked });
417
380
  });
418
381
  }
419
382
  }
@@ -428,16 +391,12 @@ var invoke = {
428
391
  };
429
392
  var set = {
430
393
  value: (ctx, value) => {
431
- if ((0, import_utils.isEqual)(ctx.value, value)) return;
394
+ if (utils.isEqual(ctx.value, value)) return;
432
395
  ctx.value = value;
433
396
  invoke.change(ctx);
434
397
  }
435
398
  };
436
-
437
- // src/radio-group.props.ts
438
- var import_types = require("@zag-js/types");
439
- var import_utils2 = require("@zag-js/utils");
440
- var props = (0, import_types.createProps)()([
399
+ var props = types.createProps()([
441
400
  "dir",
442
401
  "disabled",
443
402
  "form",
@@ -450,17 +409,14 @@ var props = (0, import_types.createProps)()([
450
409
  "readOnly",
451
410
  "value"
452
411
  ]);
453
- var splitProps = (0, import_utils2.createSplitProps)(props);
454
- var itemProps = (0, import_types.createProps)()(["value", "disabled", "invalid"]);
455
- var splitItemProps = (0, import_utils2.createSplitProps)(itemProps);
456
- // Annotate the CommonJS export names for ESM import in node:
457
- 0 && (module.exports = {
458
- anatomy,
459
- connect,
460
- itemProps,
461
- machine,
462
- props,
463
- splitItemProps,
464
- splitProps
465
- });
466
- //# sourceMappingURL=index.js.map
412
+ var splitProps = utils.createSplitProps(props);
413
+ var itemProps = types.createProps()(["value", "disabled", "invalid"]);
414
+ var splitItemProps = utils.createSplitProps(itemProps);
415
+
416
+ exports.anatomy = anatomy;
417
+ exports.connect = connect;
418
+ exports.itemProps = itemProps;
419
+ exports.machine = machine;
420
+ exports.props = props;
421
+ exports.splitItemProps = splitItemProps;
422
+ exports.splitProps = splitProps;
package/dist/index.mjs CHANGED
@@ -1,5 +1,13 @@
1
+ import { createAnatomy } from '@zag-js/anatomy';
2
+ import { createScope, queryAll, dataAttr, visuallyHiddenStyle, nextTick } from '@zag-js/dom-query';
3
+ import { isFocusVisible, trackFocusVisible } from '@zag-js/focus-visible';
4
+ import { createMachine, guards } from '@zag-js/core';
5
+ import { trackElementRect } from '@zag-js/element-rect';
6
+ import { trackFormControl, dispatchInputCheckedEvent } from '@zag-js/form-utils';
7
+ import { createSplitProps, compact, isString, isEqual } from '@zag-js/utils';
8
+ import { createProps } from '@zag-js/types';
9
+
1
10
  // src/radio-group.anatomy.ts
2
- import { createAnatomy } from "@zag-js/anatomy";
3
11
  var anatomy = createAnatomy("radio-group").parts(
4
12
  "root",
5
13
  "label",
@@ -9,13 +17,6 @@ var anatomy = createAnatomy("radio-group").parts(
9
17
  "indicator"
10
18
  );
11
19
  var parts = anatomy.build();
12
-
13
- // src/radio-group.connect.ts
14
- import { dataAttr, visuallyHiddenStyle } from "@zag-js/dom-query";
15
- import { isFocusVisible } from "@zag-js/focus-visible";
16
-
17
- // src/radio-group.dom.ts
18
- import { createScope, queryAll } from "@zag-js/dom-query";
19
20
  var dom = createScope({
20
21
  getRootId: (ctx) => ctx.ids?.root ?? `radio-group:${ctx.id}`,
21
22
  getLabelId: (ctx) => ctx.ids?.label ?? `radio-group:${ctx.id}:label`,
@@ -245,14 +246,6 @@ function connect(state, send, normalize) {
245
246
  }
246
247
  };
247
248
  }
248
-
249
- // src/radio-group.machine.ts
250
- import { createMachine, guards } from "@zag-js/core";
251
- import { nextTick } from "@zag-js/dom-query";
252
- import { trackElementRect } from "@zag-js/element-rect";
253
- import { trackFocusVisible } from "@zag-js/focus-visible";
254
- import { dispatchInputCheckedEvent, trackFormControl } from "@zag-js/form-utils";
255
- import { compact, isEqual, isString } from "@zag-js/utils";
256
249
  var { not } = guards;
257
250
  function machine(userContext) {
258
251
  const ctx = compact(userContext);
@@ -401,10 +394,6 @@ var set = {
401
394
  invoke.change(ctx);
402
395
  }
403
396
  };
404
-
405
- // src/radio-group.props.ts
406
- import { createProps } from "@zag-js/types";
407
- import { createSplitProps } from "@zag-js/utils";
408
397
  var props = createProps()([
409
398
  "dir",
410
399
  "disabled",
@@ -421,13 +410,5 @@ var props = createProps()([
421
410
  var splitProps = createSplitProps(props);
422
411
  var itemProps = createProps()(["value", "disabled", "invalid"]);
423
412
  var splitItemProps = createSplitProps(itemProps);
424
- export {
425
- anatomy,
426
- connect,
427
- itemProps,
428
- machine,
429
- props,
430
- splitItemProps,
431
- splitProps
432
- };
433
- //# sourceMappingURL=index.mjs.map
413
+
414
+ export { anatomy, connect, itemProps, machine, props, splitItemProps, splitProps };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zag-js/radio-group",
3
- "version": "0.70.0",
3
+ "version": "0.72.0",
4
4
  "description": "Core logic for the radio group 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/radio-group",
19
19
  "sideEffects": false,
20
20
  "files": [
21
- "dist",
22
- "src"
21
+ "dist"
23
22
  ],
24
23
  "publishConfig": {
25
24
  "access": "public"
@@ -28,14 +27,14 @@
28
27
  "url": "https://github.com/chakra-ui/zag/issues"
29
28
  },
30
29
  "dependencies": {
31
- "@zag-js/anatomy": "0.70.0",
32
- "@zag-js/dom-query": "0.70.0",
33
- "@zag-js/element-rect": "0.70.0",
34
- "@zag-js/focus-visible": "0.70.0",
35
- "@zag-js/form-utils": "0.70.0",
36
- "@zag-js/utils": "0.70.0",
37
- "@zag-js/core": "0.70.0",
38
- "@zag-js/types": "0.70.0"
30
+ "@zag-js/anatomy": "0.72.0",
31
+ "@zag-js/focus-visible": "0.72.0",
32
+ "@zag-js/dom-query": "0.72.0",
33
+ "@zag-js/form-utils": "0.72.0",
34
+ "@zag-js/element-rect": "0.72.0",
35
+ "@zag-js/utils": "0.72.0",
36
+ "@zag-js/core": "0.72.0",
37
+ "@zag-js/types": "0.72.0"
39
38
  },
40
39
  "devDependencies": {
41
40
  "clean-package": "2.2.0"
package/dist/index.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/index.ts","../src/radio-group.anatomy.ts","../src/radio-group.connect.ts","../src/radio-group.dom.ts","../src/radio-group.machine.ts","../src/radio-group.props.ts"],"sourcesContent":["export { anatomy } from \"./radio-group.anatomy\"\nexport { connect } from \"./radio-group.connect\"\nexport { machine } from \"./radio-group.machine\"\nexport * from \"./radio-group.props\"\nexport type {\n MachineApi as Api,\n UserDefinedContext as Context,\n ElementIds,\n ItemProps,\n ItemState,\n Service,\n ValueChangeDetails,\n} from \"./radio-group.types\"\n","import { createAnatomy } from \"@zag-js/anatomy\"\n\nexport const anatomy = createAnatomy(\"radio-group\").parts(\n \"root\",\n \"label\",\n \"item\",\n \"itemText\",\n \"itemControl\",\n \"indicator\",\n)\n\nexport const parts = anatomy.build()\n","import { dataAttr, visuallyHiddenStyle } from \"@zag-js/dom-query\"\nimport { isFocusVisible } from \"@zag-js/focus-visible\"\nimport type { NormalizeProps, PropTypes } from \"@zag-js/types\"\nimport { parts } from \"./radio-group.anatomy\"\nimport { dom } from \"./radio-group.dom\"\nimport type { ItemProps, ItemState, MachineApi, Send, State } from \"./radio-group.types\"\n\nexport function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> {\n const groupDisabled = state.context.isDisabled\n const readOnly = state.context.readOnly\n\n function getItemState(props: ItemProps): ItemState {\n return {\n invalid: !!props.invalid,\n disabled: !!props.disabled || groupDisabled,\n checked: state.context.value === props.value,\n focused: state.context.focusedValue === props.value,\n hovered: state.context.hoveredValue === props.value,\n active: state.context.activeValue === props.value,\n }\n }\n\n function getItemDataAttrs<T extends ItemProps>(props: T) {\n const radioState = getItemState(props)\n return {\n \"data-focus\": dataAttr(radioState.focused),\n \"data-focus-visible\": dataAttr(radioState.focused && state.context.focusVisible),\n \"data-disabled\": dataAttr(radioState.disabled),\n \"data-readonly\": dataAttr(readOnly),\n \"data-state\": radioState.checked ? \"checked\" : \"unchecked\",\n \"data-hover\": dataAttr(radioState.hovered),\n \"data-invalid\": dataAttr(radioState.invalid),\n \"data-orientation\": state.context.orientation,\n \"data-ssr\": dataAttr(state.context.ssr),\n }\n }\n\n const focus = () => {\n const firstEnabledAndCheckedInput = dom.getFirstEnabledAndCheckedInputEl(state.context)\n\n if (firstEnabledAndCheckedInput) {\n firstEnabledAndCheckedInput.focus()\n return\n }\n\n const firstEnabledInput = dom.getFirstEnabledInputEl(state.context)\n firstEnabledInput?.focus()\n }\n\n return {\n focus,\n value: state.context.value,\n setValue(value) {\n send({ type: \"SET_VALUE\", value, isTrusted: false })\n },\n clearValue() {\n send({ type: \"SET_VALUE\", value: null, isTrusted: false })\n },\n\n getRootProps() {\n return normalize.element({\n ...parts.root.attrs,\n role: \"radiogroup\",\n id: dom.getRootId(state.context),\n \"aria-labelledby\": dom.getLabelId(state.context),\n \"data-orientation\": state.context.orientation,\n \"data-disabled\": dataAttr(groupDisabled),\n \"aria-orientation\": state.context.orientation,\n dir: state.context.dir,\n style: {\n position: \"relative\",\n },\n })\n },\n\n getLabelProps() {\n return normalize.element({\n ...parts.label.attrs,\n dir: state.context.dir,\n \"data-orientation\": state.context.orientation,\n \"data-disabled\": dataAttr(groupDisabled),\n id: dom.getLabelId(state.context),\n onClick: focus,\n })\n },\n\n getItemState,\n\n getItemProps(props) {\n const itemState = getItemState(props)\n\n return normalize.label({\n ...parts.item.attrs,\n dir: state.context.dir,\n id: dom.getItemId(state.context, props.value),\n htmlFor: dom.getItemHiddenInputId(state.context, props.value),\n ...getItemDataAttrs(props),\n onPointerMove() {\n if (itemState.disabled) return\n if (itemState.hovered) return\n send({ type: \"SET_HOVERED\", value: props.value, hovered: true })\n },\n onPointerLeave() {\n if (itemState.disabled) return\n send({ type: \"SET_HOVERED\", value: null })\n },\n onPointerDown(event) {\n if (itemState.disabled) return\n // On pointerdown, the input blurs and returns focus to the `body`,\n // we need to prevent this.\n if (itemState.focused && event.pointerType === \"mouse\") {\n event.preventDefault()\n }\n send({ type: \"SET_ACTIVE\", value: props.value, active: true })\n },\n onPointerUp() {\n if (itemState.disabled) return\n send({ type: \"SET_ACTIVE\", value: null })\n },\n })\n },\n\n getItemTextProps(props) {\n return normalize.element({\n ...parts.itemText.attrs,\n dir: state.context.dir,\n id: dom.getItemLabelId(state.context, props.value),\n ...getItemDataAttrs(props),\n })\n },\n\n getItemControlProps(props) {\n const controlState = getItemState(props)\n\n return normalize.element({\n ...parts.itemControl.attrs,\n dir: state.context.dir,\n id: dom.getItemControlId(state.context, props.value),\n \"data-active\": dataAttr(controlState.active),\n \"aria-hidden\": true,\n ...getItemDataAttrs(props),\n })\n },\n\n getItemHiddenInputProps(props) {\n const inputState = getItemState(props)\n\n return normalize.input({\n \"data-ownedby\": dom.getRootId(state.context),\n id: dom.getItemHiddenInputId(state.context, props.value),\n type: \"radio\",\n name: state.context.name || state.context.id,\n form: state.context.form,\n value: props.value,\n onClick(event) {\n if (readOnly) {\n event.preventDefault()\n return\n }\n\n if (event.currentTarget.checked) {\n send({ type: \"SET_VALUE\", value: props.value, isTrusted: true })\n }\n },\n onBlur() {\n send({ type: \"SET_FOCUSED\", value: null, focused: false, focusVisible: false })\n },\n onFocus() {\n const focusVisible = isFocusVisible()\n send({ type: \"SET_FOCUSED\", value: props.value, focused: true, focusVisible })\n },\n onKeyDown(event) {\n if (event.defaultPrevented) return\n if (event.key === \" \") {\n send({ type: \"SET_ACTIVE\", value: props.value, active: true })\n }\n },\n onKeyUp(event) {\n if (event.defaultPrevented) return\n if (event.key === \" \") {\n send({ type: \"SET_ACTIVE\", value: null })\n }\n },\n disabled: inputState.disabled,\n defaultChecked: inputState.checked,\n style: visuallyHiddenStyle,\n })\n },\n\n getIndicatorProps() {\n return normalize.element({\n id: dom.getIndicatorId(state.context),\n ...parts.indicator.attrs,\n dir: state.context.dir,\n hidden: state.context.value == null,\n \"data-disabled\": dataAttr(groupDisabled),\n \"data-orientation\": state.context.orientation,\n style: {\n \"--transition-property\": \"left, top, width, height\",\n \"--left\": state.context.indicatorRect?.left,\n \"--top\": state.context.indicatorRect?.top,\n \"--width\": state.context.indicatorRect?.width,\n \"--height\": state.context.indicatorRect?.height,\n position: \"absolute\",\n willChange: \"var(--transition-property)\",\n transitionProperty: \"var(--transition-property)\",\n transitionDuration: state.context.canIndicatorTransition ? \"var(--transition-duration, 150ms)\" : \"0ms\",\n transitionTimingFunction: \"var(--transition-timing-function)\",\n [state.context.orientation === \"horizontal\" ? \"left\" : \"top\"]:\n state.context.orientation === \"horizontal\" ? \"var(--left)\" : \"var(--top)\",\n },\n })\n },\n }\n}\n","import { createScope, queryAll } from \"@zag-js/dom-query\"\nimport type { MachineContext as Ctx } from \"./radio-group.types\"\n\nexport const dom = createScope({\n getRootId: (ctx: Ctx) => ctx.ids?.root ?? `radio-group:${ctx.id}`,\n getLabelId: (ctx: Ctx) => ctx.ids?.label ?? `radio-group:${ctx.id}:label`,\n getItemId: (ctx: Ctx, value: string) => ctx.ids?.item?.(value) ?? `radio-group:${ctx.id}:radio:${value}`,\n getItemHiddenInputId: (ctx: Ctx, value: string) =>\n ctx.ids?.itemHiddenInput?.(value) ?? `radio-group:${ctx.id}:radio:input:${value}`,\n getItemControlId: (ctx: Ctx, value: string) =>\n ctx.ids?.itemControl?.(value) ?? `radio-group:${ctx.id}:radio:control:${value}`,\n getItemLabelId: (ctx: Ctx, value: string) =>\n ctx.ids?.itemLabel?.(value) ?? `radio-group:${ctx.id}:radio:label:${value}`,\n getIndicatorId: (ctx: Ctx) => ctx.ids?.indicator ?? `radio-group:${ctx.id}:indicator`,\n\n getRootEl: (ctx: Ctx) => dom.getById(ctx, dom.getRootId(ctx)),\n getItemHiddenInputEl: (ctx: Ctx, value: string) =>\n dom.getById<HTMLInputElement>(ctx, dom.getItemHiddenInputId(ctx, value)),\n getIndicatorEl: (ctx: Ctx) => dom.getById(ctx, dom.getIndicatorId(ctx)),\n\n getFirstEnabledInputEl: (ctx: Ctx) => dom.getRootEl(ctx)?.querySelector<HTMLInputElement>(\"input:not(:disabled)\"),\n getFirstEnabledAndCheckedInputEl: (ctx: Ctx) =>\n dom.getRootEl(ctx)?.querySelector<HTMLInputElement>(\"input:not(:disabled):checked\"),\n\n getInputEls: (ctx: Ctx) => {\n const ownerId = CSS.escape(dom.getRootId(ctx))\n const selector = `input[type=radio][data-ownedby='${ownerId}']:not([disabled])`\n return queryAll<HTMLInputElement>(dom.getRootEl(ctx), selector)\n },\n\n getActiveRadioEl: (ctx: Ctx) => {\n if (!ctx.value) return\n return dom.getById(ctx, dom.getItemId(ctx, ctx.value))\n },\n\n getOffsetRect: (el: HTMLElement | undefined) => ({\n left: el?.offsetLeft ?? 0,\n top: el?.offsetTop ?? 0,\n width: el?.offsetWidth ?? 0,\n height: el?.offsetHeight ?? 0,\n }),\n\n getRectById: (ctx: Ctx, id: string) => {\n const radioEl = dom.getById(ctx, dom.getItemId(ctx, id))\n if (!radioEl) return\n return dom.resolveRect(dom.getOffsetRect(radioEl))\n },\n\n resolveRect: (rect: Record<\"width\" | \"height\" | \"left\" | \"top\", number>) => ({\n width: `${rect.width}px`,\n height: `${rect.height}px`,\n left: `${rect.left}px`,\n top: `${rect.top}px`,\n }),\n})\n","import { createMachine, guards } from \"@zag-js/core\"\nimport { nextTick } from \"@zag-js/dom-query\"\nimport { trackElementRect } from \"@zag-js/element-rect\"\nimport { trackFocusVisible } from \"@zag-js/focus-visible\"\nimport { dispatchInputCheckedEvent, trackFormControl } from \"@zag-js/form-utils\"\nimport { compact, isEqual, isString } from \"@zag-js/utils\"\nimport { dom } from \"./radio-group.dom\"\nimport type { MachineContext, MachineState, UserDefinedContext } from \"./radio-group.types\"\n\nconst { not } = guards\n\nexport function machine(userContext: UserDefinedContext) {\n const ctx = compact(userContext)\n return createMachine<MachineContext, MachineState>(\n {\n id: \"radio\",\n initial: \"idle\",\n context: {\n value: null,\n activeValue: null,\n focusedValue: null,\n hoveredValue: null,\n disabled: false,\n orientation: \"vertical\",\n ...ctx,\n indicatorRect: {},\n canIndicatorTransition: false,\n fieldsetDisabled: false,\n focusVisible: false,\n ssr: true,\n },\n\n computed: {\n isDisabled: (ctx) => !!ctx.disabled || ctx.fieldsetDisabled,\n },\n\n entry: [\"syncIndicatorRect\", \"syncSsr\"],\n\n exit: [\"cleanupObserver\"],\n\n activities: [\"trackFormControlState\", \"trackFocusVisible\"],\n\n watch: {\n value: [\"setIndicatorTransition\", \"syncIndicatorRect\", \"syncInputElements\"],\n },\n\n on: {\n SET_VALUE: [\n {\n guard: not(\"isTrusted\"),\n actions: [\"setValue\", \"dispatchChangeEvent\"],\n },\n {\n actions: [\"setValue\"],\n },\n ],\n SET_HOVERED: {\n actions: \"setHovered\",\n },\n SET_ACTIVE: {\n actions: \"setActive\",\n },\n SET_FOCUSED: {\n actions: \"setFocused\",\n },\n },\n\n states: {\n idle: {},\n },\n },\n\n {\n guards: {\n isTrusted: (_ctx, evt) => !!evt.isTrusted,\n },\n activities: {\n trackFormControlState(ctx, _evt, { send, initialContext }) {\n return trackFormControl(dom.getRootEl(ctx), {\n onFieldsetDisabledChange(disabled) {\n ctx.fieldsetDisabled = disabled\n },\n onFormReset() {\n send({ type: \"SET_VALUE\", value: initialContext.value })\n },\n })\n },\n trackFocusVisible(ctx) {\n return trackFocusVisible({ root: dom.getRootNode(ctx) })\n },\n },\n\n actions: {\n setValue(ctx, evt) {\n set.value(ctx, evt.value)\n },\n setHovered(ctx, evt) {\n ctx.hoveredValue = evt.value\n },\n setActive(ctx, evt) {\n ctx.activeValue = evt.value\n },\n setFocused(ctx, evt) {\n ctx.focusedValue = evt.value\n ctx.focusVisible = evt.focusVisible\n },\n syncInputElements(ctx) {\n const inputs = dom.getInputEls(ctx)\n inputs.forEach((input) => {\n input.checked = input.value === ctx.value\n })\n },\n setIndicatorTransition(ctx) {\n ctx.canIndicatorTransition = isString(ctx.value)\n },\n cleanupObserver(ctx) {\n ctx.indicatorCleanup?.()\n },\n syncSsr(ctx) {\n ctx.ssr = false\n },\n syncIndicatorRect(ctx) {\n ctx.indicatorCleanup?.()\n\n if (!dom.getIndicatorEl(ctx)) return\n\n const value = ctx.value\n\n const radioEl = dom.getActiveRadioEl(ctx)\n\n if (value == null || !radioEl) {\n ctx.indicatorRect = {}\n return\n }\n\n ctx.indicatorCleanup = trackElementRect(radioEl, {\n getRect(el) {\n return dom.getOffsetRect(el)\n },\n onChange(rect) {\n ctx.indicatorRect = dom.resolveRect(rect)\n nextTick(() => {\n ctx.canIndicatorTransition = false\n })\n },\n })\n },\n dispatchChangeEvent(ctx) {\n const inputEls = dom.getInputEls(ctx)\n inputEls.forEach((inputEl) => {\n const checked = inputEl.value === ctx.value\n if (checked === inputEl.checked) return\n dispatchInputCheckedEvent(inputEl, { checked })\n })\n },\n },\n },\n )\n}\n\nconst invoke = {\n change: (ctx: MachineContext) => {\n if (ctx.value == null) return\n ctx.onValueChange?.({ value: ctx.value })\n },\n}\n\nconst set = {\n value: (ctx: MachineContext, value: string) => {\n if (isEqual(ctx.value, value)) return\n ctx.value = value\n invoke.change(ctx)\n },\n}\n","import { createProps } from \"@zag-js/types\"\nimport { createSplitProps } from \"@zag-js/utils\"\nimport type { ItemProps, UserDefinedContext } from \"./radio-group.types\"\n\nexport const props = createProps<UserDefinedContext>()([\n \"dir\",\n \"disabled\",\n \"form\",\n \"getRootNode\",\n \"id\",\n \"ids\",\n \"name\",\n \"onValueChange\",\n \"orientation\",\n \"readOnly\",\n \"value\",\n])\nexport const splitProps = createSplitProps<Partial<UserDefinedContext>>(props)\n\nexport const itemProps = createProps<ItemProps>()([\"value\", \"disabled\", \"invalid\"])\nexport const splitItemProps = createSplitProps<ItemProps>(itemProps)\n"],"mappings":"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","names":["import_dom_query","props","import_dom_query","import_focus_visible","ctx","import_utils"]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/radio-group.anatomy.ts","../src/radio-group.connect.ts","../src/radio-group.dom.ts","../src/radio-group.machine.ts","../src/radio-group.props.ts"],"sourcesContent":["import { createAnatomy } from \"@zag-js/anatomy\"\n\nexport const anatomy = createAnatomy(\"radio-group\").parts(\n \"root\",\n \"label\",\n \"item\",\n \"itemText\",\n \"itemControl\",\n \"indicator\",\n)\n\nexport const parts = anatomy.build()\n","import { dataAttr, visuallyHiddenStyle } from \"@zag-js/dom-query\"\nimport { isFocusVisible } from \"@zag-js/focus-visible\"\nimport type { NormalizeProps, PropTypes } from \"@zag-js/types\"\nimport { parts } from \"./radio-group.anatomy\"\nimport { dom } from \"./radio-group.dom\"\nimport type { ItemProps, ItemState, MachineApi, Send, State } from \"./radio-group.types\"\n\nexport function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> {\n const groupDisabled = state.context.isDisabled\n const readOnly = state.context.readOnly\n\n function getItemState(props: ItemProps): ItemState {\n return {\n invalid: !!props.invalid,\n disabled: !!props.disabled || groupDisabled,\n checked: state.context.value === props.value,\n focused: state.context.focusedValue === props.value,\n hovered: state.context.hoveredValue === props.value,\n active: state.context.activeValue === props.value,\n }\n }\n\n function getItemDataAttrs<T extends ItemProps>(props: T) {\n const radioState = getItemState(props)\n return {\n \"data-focus\": dataAttr(radioState.focused),\n \"data-focus-visible\": dataAttr(radioState.focused && state.context.focusVisible),\n \"data-disabled\": dataAttr(radioState.disabled),\n \"data-readonly\": dataAttr(readOnly),\n \"data-state\": radioState.checked ? \"checked\" : \"unchecked\",\n \"data-hover\": dataAttr(radioState.hovered),\n \"data-invalid\": dataAttr(radioState.invalid),\n \"data-orientation\": state.context.orientation,\n \"data-ssr\": dataAttr(state.context.ssr),\n }\n }\n\n const focus = () => {\n const firstEnabledAndCheckedInput = dom.getFirstEnabledAndCheckedInputEl(state.context)\n\n if (firstEnabledAndCheckedInput) {\n firstEnabledAndCheckedInput.focus()\n return\n }\n\n const firstEnabledInput = dom.getFirstEnabledInputEl(state.context)\n firstEnabledInput?.focus()\n }\n\n return {\n focus,\n value: state.context.value,\n setValue(value) {\n send({ type: \"SET_VALUE\", value, isTrusted: false })\n },\n clearValue() {\n send({ type: \"SET_VALUE\", value: null, isTrusted: false })\n },\n\n getRootProps() {\n return normalize.element({\n ...parts.root.attrs,\n role: \"radiogroup\",\n id: dom.getRootId(state.context),\n \"aria-labelledby\": dom.getLabelId(state.context),\n \"data-orientation\": state.context.orientation,\n \"data-disabled\": dataAttr(groupDisabled),\n \"aria-orientation\": state.context.orientation,\n dir: state.context.dir,\n style: {\n position: \"relative\",\n },\n })\n },\n\n getLabelProps() {\n return normalize.element({\n ...parts.label.attrs,\n dir: state.context.dir,\n \"data-orientation\": state.context.orientation,\n \"data-disabled\": dataAttr(groupDisabled),\n id: dom.getLabelId(state.context),\n onClick: focus,\n })\n },\n\n getItemState,\n\n getItemProps(props) {\n const itemState = getItemState(props)\n\n return normalize.label({\n ...parts.item.attrs,\n dir: state.context.dir,\n id: dom.getItemId(state.context, props.value),\n htmlFor: dom.getItemHiddenInputId(state.context, props.value),\n ...getItemDataAttrs(props),\n onPointerMove() {\n if (itemState.disabled) return\n if (itemState.hovered) return\n send({ type: \"SET_HOVERED\", value: props.value, hovered: true })\n },\n onPointerLeave() {\n if (itemState.disabled) return\n send({ type: \"SET_HOVERED\", value: null })\n },\n onPointerDown(event) {\n if (itemState.disabled) return\n // On pointerdown, the input blurs and returns focus to the `body`,\n // we need to prevent this.\n if (itemState.focused && event.pointerType === \"mouse\") {\n event.preventDefault()\n }\n send({ type: \"SET_ACTIVE\", value: props.value, active: true })\n },\n onPointerUp() {\n if (itemState.disabled) return\n send({ type: \"SET_ACTIVE\", value: null })\n },\n })\n },\n\n getItemTextProps(props) {\n return normalize.element({\n ...parts.itemText.attrs,\n dir: state.context.dir,\n id: dom.getItemLabelId(state.context, props.value),\n ...getItemDataAttrs(props),\n })\n },\n\n getItemControlProps(props) {\n const controlState = getItemState(props)\n\n return normalize.element({\n ...parts.itemControl.attrs,\n dir: state.context.dir,\n id: dom.getItemControlId(state.context, props.value),\n \"data-active\": dataAttr(controlState.active),\n \"aria-hidden\": true,\n ...getItemDataAttrs(props),\n })\n },\n\n getItemHiddenInputProps(props) {\n const inputState = getItemState(props)\n\n return normalize.input({\n \"data-ownedby\": dom.getRootId(state.context),\n id: dom.getItemHiddenInputId(state.context, props.value),\n type: \"radio\",\n name: state.context.name || state.context.id,\n form: state.context.form,\n value: props.value,\n onClick(event) {\n if (readOnly) {\n event.preventDefault()\n return\n }\n\n if (event.currentTarget.checked) {\n send({ type: \"SET_VALUE\", value: props.value, isTrusted: true })\n }\n },\n onBlur() {\n send({ type: \"SET_FOCUSED\", value: null, focused: false, focusVisible: false })\n },\n onFocus() {\n const focusVisible = isFocusVisible()\n send({ type: \"SET_FOCUSED\", value: props.value, focused: true, focusVisible })\n },\n onKeyDown(event) {\n if (event.defaultPrevented) return\n if (event.key === \" \") {\n send({ type: \"SET_ACTIVE\", value: props.value, active: true })\n }\n },\n onKeyUp(event) {\n if (event.defaultPrevented) return\n if (event.key === \" \") {\n send({ type: \"SET_ACTIVE\", value: null })\n }\n },\n disabled: inputState.disabled,\n defaultChecked: inputState.checked,\n style: visuallyHiddenStyle,\n })\n },\n\n getIndicatorProps() {\n return normalize.element({\n id: dom.getIndicatorId(state.context),\n ...parts.indicator.attrs,\n dir: state.context.dir,\n hidden: state.context.value == null,\n \"data-disabled\": dataAttr(groupDisabled),\n \"data-orientation\": state.context.orientation,\n style: {\n \"--transition-property\": \"left, top, width, height\",\n \"--left\": state.context.indicatorRect?.left,\n \"--top\": state.context.indicatorRect?.top,\n \"--width\": state.context.indicatorRect?.width,\n \"--height\": state.context.indicatorRect?.height,\n position: \"absolute\",\n willChange: \"var(--transition-property)\",\n transitionProperty: \"var(--transition-property)\",\n transitionDuration: state.context.canIndicatorTransition ? \"var(--transition-duration, 150ms)\" : \"0ms\",\n transitionTimingFunction: \"var(--transition-timing-function)\",\n [state.context.orientation === \"horizontal\" ? \"left\" : \"top\"]:\n state.context.orientation === \"horizontal\" ? \"var(--left)\" : \"var(--top)\",\n },\n })\n },\n }\n}\n","import { createScope, queryAll } from \"@zag-js/dom-query\"\nimport type { MachineContext as Ctx } from \"./radio-group.types\"\n\nexport const dom = createScope({\n getRootId: (ctx: Ctx) => ctx.ids?.root ?? `radio-group:${ctx.id}`,\n getLabelId: (ctx: Ctx) => ctx.ids?.label ?? `radio-group:${ctx.id}:label`,\n getItemId: (ctx: Ctx, value: string) => ctx.ids?.item?.(value) ?? `radio-group:${ctx.id}:radio:${value}`,\n getItemHiddenInputId: (ctx: Ctx, value: string) =>\n ctx.ids?.itemHiddenInput?.(value) ?? `radio-group:${ctx.id}:radio:input:${value}`,\n getItemControlId: (ctx: Ctx, value: string) =>\n ctx.ids?.itemControl?.(value) ?? `radio-group:${ctx.id}:radio:control:${value}`,\n getItemLabelId: (ctx: Ctx, value: string) =>\n ctx.ids?.itemLabel?.(value) ?? `radio-group:${ctx.id}:radio:label:${value}`,\n getIndicatorId: (ctx: Ctx) => ctx.ids?.indicator ?? `radio-group:${ctx.id}:indicator`,\n\n getRootEl: (ctx: Ctx) => dom.getById(ctx, dom.getRootId(ctx)),\n getItemHiddenInputEl: (ctx: Ctx, value: string) =>\n dom.getById<HTMLInputElement>(ctx, dom.getItemHiddenInputId(ctx, value)),\n getIndicatorEl: (ctx: Ctx) => dom.getById(ctx, dom.getIndicatorId(ctx)),\n\n getFirstEnabledInputEl: (ctx: Ctx) => dom.getRootEl(ctx)?.querySelector<HTMLInputElement>(\"input:not(:disabled)\"),\n getFirstEnabledAndCheckedInputEl: (ctx: Ctx) =>\n dom.getRootEl(ctx)?.querySelector<HTMLInputElement>(\"input:not(:disabled):checked\"),\n\n getInputEls: (ctx: Ctx) => {\n const ownerId = CSS.escape(dom.getRootId(ctx))\n const selector = `input[type=radio][data-ownedby='${ownerId}']:not([disabled])`\n return queryAll<HTMLInputElement>(dom.getRootEl(ctx), selector)\n },\n\n getActiveRadioEl: (ctx: Ctx) => {\n if (!ctx.value) return\n return dom.getById(ctx, dom.getItemId(ctx, ctx.value))\n },\n\n getOffsetRect: (el: HTMLElement | undefined) => ({\n left: el?.offsetLeft ?? 0,\n top: el?.offsetTop ?? 0,\n width: el?.offsetWidth ?? 0,\n height: el?.offsetHeight ?? 0,\n }),\n\n getRectById: (ctx: Ctx, id: string) => {\n const radioEl = dom.getById(ctx, dom.getItemId(ctx, id))\n if (!radioEl) return\n return dom.resolveRect(dom.getOffsetRect(radioEl))\n },\n\n resolveRect: (rect: Record<\"width\" | \"height\" | \"left\" | \"top\", number>) => ({\n width: `${rect.width}px`,\n height: `${rect.height}px`,\n left: `${rect.left}px`,\n top: `${rect.top}px`,\n }),\n})\n","import { createMachine, guards } from \"@zag-js/core\"\nimport { nextTick } from \"@zag-js/dom-query\"\nimport { trackElementRect } from \"@zag-js/element-rect\"\nimport { trackFocusVisible } from \"@zag-js/focus-visible\"\nimport { dispatchInputCheckedEvent, trackFormControl } from \"@zag-js/form-utils\"\nimport { compact, isEqual, isString } from \"@zag-js/utils\"\nimport { dom } from \"./radio-group.dom\"\nimport type { MachineContext, MachineState, UserDefinedContext } from \"./radio-group.types\"\n\nconst { not } = guards\n\nexport function machine(userContext: UserDefinedContext) {\n const ctx = compact(userContext)\n return createMachine<MachineContext, MachineState>(\n {\n id: \"radio\",\n initial: \"idle\",\n context: {\n value: null,\n activeValue: null,\n focusedValue: null,\n hoveredValue: null,\n disabled: false,\n orientation: \"vertical\",\n ...ctx,\n indicatorRect: {},\n canIndicatorTransition: false,\n fieldsetDisabled: false,\n focusVisible: false,\n ssr: true,\n },\n\n computed: {\n isDisabled: (ctx) => !!ctx.disabled || ctx.fieldsetDisabled,\n },\n\n entry: [\"syncIndicatorRect\", \"syncSsr\"],\n\n exit: [\"cleanupObserver\"],\n\n activities: [\"trackFormControlState\", \"trackFocusVisible\"],\n\n watch: {\n value: [\"setIndicatorTransition\", \"syncIndicatorRect\", \"syncInputElements\"],\n },\n\n on: {\n SET_VALUE: [\n {\n guard: not(\"isTrusted\"),\n actions: [\"setValue\", \"dispatchChangeEvent\"],\n },\n {\n actions: [\"setValue\"],\n },\n ],\n SET_HOVERED: {\n actions: \"setHovered\",\n },\n SET_ACTIVE: {\n actions: \"setActive\",\n },\n SET_FOCUSED: {\n actions: \"setFocused\",\n },\n },\n\n states: {\n idle: {},\n },\n },\n\n {\n guards: {\n isTrusted: (_ctx, evt) => !!evt.isTrusted,\n },\n activities: {\n trackFormControlState(ctx, _evt, { send, initialContext }) {\n return trackFormControl(dom.getRootEl(ctx), {\n onFieldsetDisabledChange(disabled) {\n ctx.fieldsetDisabled = disabled\n },\n onFormReset() {\n send({ type: \"SET_VALUE\", value: initialContext.value })\n },\n })\n },\n trackFocusVisible(ctx) {\n return trackFocusVisible({ root: dom.getRootNode(ctx) })\n },\n },\n\n actions: {\n setValue(ctx, evt) {\n set.value(ctx, evt.value)\n },\n setHovered(ctx, evt) {\n ctx.hoveredValue = evt.value\n },\n setActive(ctx, evt) {\n ctx.activeValue = evt.value\n },\n setFocused(ctx, evt) {\n ctx.focusedValue = evt.value\n ctx.focusVisible = evt.focusVisible\n },\n syncInputElements(ctx) {\n const inputs = dom.getInputEls(ctx)\n inputs.forEach((input) => {\n input.checked = input.value === ctx.value\n })\n },\n setIndicatorTransition(ctx) {\n ctx.canIndicatorTransition = isString(ctx.value)\n },\n cleanupObserver(ctx) {\n ctx.indicatorCleanup?.()\n },\n syncSsr(ctx) {\n ctx.ssr = false\n },\n syncIndicatorRect(ctx) {\n ctx.indicatorCleanup?.()\n\n if (!dom.getIndicatorEl(ctx)) return\n\n const value = ctx.value\n\n const radioEl = dom.getActiveRadioEl(ctx)\n\n if (value == null || !radioEl) {\n ctx.indicatorRect = {}\n return\n }\n\n ctx.indicatorCleanup = trackElementRect(radioEl, {\n getRect(el) {\n return dom.getOffsetRect(el)\n },\n onChange(rect) {\n ctx.indicatorRect = dom.resolveRect(rect)\n nextTick(() => {\n ctx.canIndicatorTransition = false\n })\n },\n })\n },\n dispatchChangeEvent(ctx) {\n const inputEls = dom.getInputEls(ctx)\n inputEls.forEach((inputEl) => {\n const checked = inputEl.value === ctx.value\n if (checked === inputEl.checked) return\n dispatchInputCheckedEvent(inputEl, { checked })\n })\n },\n },\n },\n )\n}\n\nconst invoke = {\n change: (ctx: MachineContext) => {\n if (ctx.value == null) return\n ctx.onValueChange?.({ value: ctx.value })\n },\n}\n\nconst set = {\n value: (ctx: MachineContext, value: string) => {\n if (isEqual(ctx.value, value)) return\n ctx.value = value\n invoke.change(ctx)\n },\n}\n","import { createProps } from \"@zag-js/types\"\nimport { createSplitProps } from \"@zag-js/utils\"\nimport type { ItemProps, UserDefinedContext } from \"./radio-group.types\"\n\nexport const props = createProps<UserDefinedContext>()([\n \"dir\",\n \"disabled\",\n \"form\",\n \"getRootNode\",\n \"id\",\n \"ids\",\n \"name\",\n \"onValueChange\",\n \"orientation\",\n \"readOnly\",\n \"value\",\n])\nexport const splitProps = createSplitProps<Partial<UserDefinedContext>>(props)\n\nexport const itemProps = createProps<ItemProps>()([\"value\", \"disabled\", \"invalid\"])\nexport const splitItemProps = createSplitProps<ItemProps>(itemProps)\n"],"mappings":"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","names":["props","ctx"]}
package/src/index.ts DELETED
@@ -1,13 +0,0 @@
1
- export { anatomy } from "./radio-group.anatomy"
2
- export { connect } from "./radio-group.connect"
3
- export { machine } from "./radio-group.machine"
4
- export * from "./radio-group.props"
5
- export type {
6
- MachineApi as Api,
7
- UserDefinedContext as Context,
8
- ElementIds,
9
- ItemProps,
10
- ItemState,
11
- Service,
12
- ValueChangeDetails,
13
- } from "./radio-group.types"
@@ -1,12 +0,0 @@
1
- import { createAnatomy } from "@zag-js/anatomy"
2
-
3
- export const anatomy = createAnatomy("radio-group").parts(
4
- "root",
5
- "label",
6
- "item",
7
- "itemText",
8
- "itemControl",
9
- "indicator",
10
- )
11
-
12
- export const parts = anatomy.build()
@@ -1,215 +0,0 @@
1
- import { dataAttr, visuallyHiddenStyle } from "@zag-js/dom-query"
2
- import { isFocusVisible } from "@zag-js/focus-visible"
3
- import type { NormalizeProps, PropTypes } from "@zag-js/types"
4
- import { parts } from "./radio-group.anatomy"
5
- import { dom } from "./radio-group.dom"
6
- import type { ItemProps, ItemState, MachineApi, Send, State } from "./radio-group.types"
7
-
8
- export function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> {
9
- const groupDisabled = state.context.isDisabled
10
- const readOnly = state.context.readOnly
11
-
12
- function getItemState(props: ItemProps): ItemState {
13
- return {
14
- invalid: !!props.invalid,
15
- disabled: !!props.disabled || groupDisabled,
16
- checked: state.context.value === props.value,
17
- focused: state.context.focusedValue === props.value,
18
- hovered: state.context.hoveredValue === props.value,
19
- active: state.context.activeValue === props.value,
20
- }
21
- }
22
-
23
- function getItemDataAttrs<T extends ItemProps>(props: T) {
24
- const radioState = getItemState(props)
25
- return {
26
- "data-focus": dataAttr(radioState.focused),
27
- "data-focus-visible": dataAttr(radioState.focused && state.context.focusVisible),
28
- "data-disabled": dataAttr(radioState.disabled),
29
- "data-readonly": dataAttr(readOnly),
30
- "data-state": radioState.checked ? "checked" : "unchecked",
31
- "data-hover": dataAttr(radioState.hovered),
32
- "data-invalid": dataAttr(radioState.invalid),
33
- "data-orientation": state.context.orientation,
34
- "data-ssr": dataAttr(state.context.ssr),
35
- }
36
- }
37
-
38
- const focus = () => {
39
- const firstEnabledAndCheckedInput = dom.getFirstEnabledAndCheckedInputEl(state.context)
40
-
41
- if (firstEnabledAndCheckedInput) {
42
- firstEnabledAndCheckedInput.focus()
43
- return
44
- }
45
-
46
- const firstEnabledInput = dom.getFirstEnabledInputEl(state.context)
47
- firstEnabledInput?.focus()
48
- }
49
-
50
- return {
51
- focus,
52
- value: state.context.value,
53
- setValue(value) {
54
- send({ type: "SET_VALUE", value, isTrusted: false })
55
- },
56
- clearValue() {
57
- send({ type: "SET_VALUE", value: null, isTrusted: false })
58
- },
59
-
60
- getRootProps() {
61
- return normalize.element({
62
- ...parts.root.attrs,
63
- role: "radiogroup",
64
- id: dom.getRootId(state.context),
65
- "aria-labelledby": dom.getLabelId(state.context),
66
- "data-orientation": state.context.orientation,
67
- "data-disabled": dataAttr(groupDisabled),
68
- "aria-orientation": state.context.orientation,
69
- dir: state.context.dir,
70
- style: {
71
- position: "relative",
72
- },
73
- })
74
- },
75
-
76
- getLabelProps() {
77
- return normalize.element({
78
- ...parts.label.attrs,
79
- dir: state.context.dir,
80
- "data-orientation": state.context.orientation,
81
- "data-disabled": dataAttr(groupDisabled),
82
- id: dom.getLabelId(state.context),
83
- onClick: focus,
84
- })
85
- },
86
-
87
- getItemState,
88
-
89
- getItemProps(props) {
90
- const itemState = getItemState(props)
91
-
92
- return normalize.label({
93
- ...parts.item.attrs,
94
- dir: state.context.dir,
95
- id: dom.getItemId(state.context, props.value),
96
- htmlFor: dom.getItemHiddenInputId(state.context, props.value),
97
- ...getItemDataAttrs(props),
98
- onPointerMove() {
99
- if (itemState.disabled) return
100
- if (itemState.hovered) return
101
- send({ type: "SET_HOVERED", value: props.value, hovered: true })
102
- },
103
- onPointerLeave() {
104
- if (itemState.disabled) return
105
- send({ type: "SET_HOVERED", value: null })
106
- },
107
- onPointerDown(event) {
108
- if (itemState.disabled) return
109
- // On pointerdown, the input blurs and returns focus to the `body`,
110
- // we need to prevent this.
111
- if (itemState.focused && event.pointerType === "mouse") {
112
- event.preventDefault()
113
- }
114
- send({ type: "SET_ACTIVE", value: props.value, active: true })
115
- },
116
- onPointerUp() {
117
- if (itemState.disabled) return
118
- send({ type: "SET_ACTIVE", value: null })
119
- },
120
- })
121
- },
122
-
123
- getItemTextProps(props) {
124
- return normalize.element({
125
- ...parts.itemText.attrs,
126
- dir: state.context.dir,
127
- id: dom.getItemLabelId(state.context, props.value),
128
- ...getItemDataAttrs(props),
129
- })
130
- },
131
-
132
- getItemControlProps(props) {
133
- const controlState = getItemState(props)
134
-
135
- return normalize.element({
136
- ...parts.itemControl.attrs,
137
- dir: state.context.dir,
138
- id: dom.getItemControlId(state.context, props.value),
139
- "data-active": dataAttr(controlState.active),
140
- "aria-hidden": true,
141
- ...getItemDataAttrs(props),
142
- })
143
- },
144
-
145
- getItemHiddenInputProps(props) {
146
- const inputState = getItemState(props)
147
-
148
- return normalize.input({
149
- "data-ownedby": dom.getRootId(state.context),
150
- id: dom.getItemHiddenInputId(state.context, props.value),
151
- type: "radio",
152
- name: state.context.name || state.context.id,
153
- form: state.context.form,
154
- value: props.value,
155
- onClick(event) {
156
- if (readOnly) {
157
- event.preventDefault()
158
- return
159
- }
160
-
161
- if (event.currentTarget.checked) {
162
- send({ type: "SET_VALUE", value: props.value, isTrusted: true })
163
- }
164
- },
165
- onBlur() {
166
- send({ type: "SET_FOCUSED", value: null, focused: false, focusVisible: false })
167
- },
168
- onFocus() {
169
- const focusVisible = isFocusVisible()
170
- send({ type: "SET_FOCUSED", value: props.value, focused: true, focusVisible })
171
- },
172
- onKeyDown(event) {
173
- if (event.defaultPrevented) return
174
- if (event.key === " ") {
175
- send({ type: "SET_ACTIVE", value: props.value, active: true })
176
- }
177
- },
178
- onKeyUp(event) {
179
- if (event.defaultPrevented) return
180
- if (event.key === " ") {
181
- send({ type: "SET_ACTIVE", value: null })
182
- }
183
- },
184
- disabled: inputState.disabled,
185
- defaultChecked: inputState.checked,
186
- style: visuallyHiddenStyle,
187
- })
188
- },
189
-
190
- getIndicatorProps() {
191
- return normalize.element({
192
- id: dom.getIndicatorId(state.context),
193
- ...parts.indicator.attrs,
194
- dir: state.context.dir,
195
- hidden: state.context.value == null,
196
- "data-disabled": dataAttr(groupDisabled),
197
- "data-orientation": state.context.orientation,
198
- style: {
199
- "--transition-property": "left, top, width, height",
200
- "--left": state.context.indicatorRect?.left,
201
- "--top": state.context.indicatorRect?.top,
202
- "--width": state.context.indicatorRect?.width,
203
- "--height": state.context.indicatorRect?.height,
204
- position: "absolute",
205
- willChange: "var(--transition-property)",
206
- transitionProperty: "var(--transition-property)",
207
- transitionDuration: state.context.canIndicatorTransition ? "var(--transition-duration, 150ms)" : "0ms",
208
- transitionTimingFunction: "var(--transition-timing-function)",
209
- [state.context.orientation === "horizontal" ? "left" : "top"]:
210
- state.context.orientation === "horizontal" ? "var(--left)" : "var(--top)",
211
- },
212
- })
213
- },
214
- }
215
- }
@@ -1,55 +0,0 @@
1
- import { createScope, queryAll } from "@zag-js/dom-query"
2
- import type { MachineContext as Ctx } from "./radio-group.types"
3
-
4
- export const dom = createScope({
5
- getRootId: (ctx: Ctx) => ctx.ids?.root ?? `radio-group:${ctx.id}`,
6
- getLabelId: (ctx: Ctx) => ctx.ids?.label ?? `radio-group:${ctx.id}:label`,
7
- getItemId: (ctx: Ctx, value: string) => ctx.ids?.item?.(value) ?? `radio-group:${ctx.id}:radio:${value}`,
8
- getItemHiddenInputId: (ctx: Ctx, value: string) =>
9
- ctx.ids?.itemHiddenInput?.(value) ?? `radio-group:${ctx.id}:radio:input:${value}`,
10
- getItemControlId: (ctx: Ctx, value: string) =>
11
- ctx.ids?.itemControl?.(value) ?? `radio-group:${ctx.id}:radio:control:${value}`,
12
- getItemLabelId: (ctx: Ctx, value: string) =>
13
- ctx.ids?.itemLabel?.(value) ?? `radio-group:${ctx.id}:radio:label:${value}`,
14
- getIndicatorId: (ctx: Ctx) => ctx.ids?.indicator ?? `radio-group:${ctx.id}:indicator`,
15
-
16
- getRootEl: (ctx: Ctx) => dom.getById(ctx, dom.getRootId(ctx)),
17
- getItemHiddenInputEl: (ctx: Ctx, value: string) =>
18
- dom.getById<HTMLInputElement>(ctx, dom.getItemHiddenInputId(ctx, value)),
19
- getIndicatorEl: (ctx: Ctx) => dom.getById(ctx, dom.getIndicatorId(ctx)),
20
-
21
- getFirstEnabledInputEl: (ctx: Ctx) => dom.getRootEl(ctx)?.querySelector<HTMLInputElement>("input:not(:disabled)"),
22
- getFirstEnabledAndCheckedInputEl: (ctx: Ctx) =>
23
- dom.getRootEl(ctx)?.querySelector<HTMLInputElement>("input:not(:disabled):checked"),
24
-
25
- getInputEls: (ctx: Ctx) => {
26
- const ownerId = CSS.escape(dom.getRootId(ctx))
27
- const selector = `input[type=radio][data-ownedby='${ownerId}']:not([disabled])`
28
- return queryAll<HTMLInputElement>(dom.getRootEl(ctx), selector)
29
- },
30
-
31
- getActiveRadioEl: (ctx: Ctx) => {
32
- if (!ctx.value) return
33
- return dom.getById(ctx, dom.getItemId(ctx, ctx.value))
34
- },
35
-
36
- getOffsetRect: (el: HTMLElement | undefined) => ({
37
- left: el?.offsetLeft ?? 0,
38
- top: el?.offsetTop ?? 0,
39
- width: el?.offsetWidth ?? 0,
40
- height: el?.offsetHeight ?? 0,
41
- }),
42
-
43
- getRectById: (ctx: Ctx, id: string) => {
44
- const radioEl = dom.getById(ctx, dom.getItemId(ctx, id))
45
- if (!radioEl) return
46
- return dom.resolveRect(dom.getOffsetRect(radioEl))
47
- },
48
-
49
- resolveRect: (rect: Record<"width" | "height" | "left" | "top", number>) => ({
50
- width: `${rect.width}px`,
51
- height: `${rect.height}px`,
52
- left: `${rect.left}px`,
53
- top: `${rect.top}px`,
54
- }),
55
- })
@@ -1,174 +0,0 @@
1
- import { createMachine, guards } from "@zag-js/core"
2
- import { nextTick } from "@zag-js/dom-query"
3
- import { trackElementRect } from "@zag-js/element-rect"
4
- import { trackFocusVisible } from "@zag-js/focus-visible"
5
- import { dispatchInputCheckedEvent, trackFormControl } from "@zag-js/form-utils"
6
- import { compact, isEqual, isString } from "@zag-js/utils"
7
- import { dom } from "./radio-group.dom"
8
- import type { MachineContext, MachineState, UserDefinedContext } from "./radio-group.types"
9
-
10
- const { not } = guards
11
-
12
- export function machine(userContext: UserDefinedContext) {
13
- const ctx = compact(userContext)
14
- return createMachine<MachineContext, MachineState>(
15
- {
16
- id: "radio",
17
- initial: "idle",
18
- context: {
19
- value: null,
20
- activeValue: null,
21
- focusedValue: null,
22
- hoveredValue: null,
23
- disabled: false,
24
- orientation: "vertical",
25
- ...ctx,
26
- indicatorRect: {},
27
- canIndicatorTransition: false,
28
- fieldsetDisabled: false,
29
- focusVisible: false,
30
- ssr: true,
31
- },
32
-
33
- computed: {
34
- isDisabled: (ctx) => !!ctx.disabled || ctx.fieldsetDisabled,
35
- },
36
-
37
- entry: ["syncIndicatorRect", "syncSsr"],
38
-
39
- exit: ["cleanupObserver"],
40
-
41
- activities: ["trackFormControlState", "trackFocusVisible"],
42
-
43
- watch: {
44
- value: ["setIndicatorTransition", "syncIndicatorRect", "syncInputElements"],
45
- },
46
-
47
- on: {
48
- SET_VALUE: [
49
- {
50
- guard: not("isTrusted"),
51
- actions: ["setValue", "dispatchChangeEvent"],
52
- },
53
- {
54
- actions: ["setValue"],
55
- },
56
- ],
57
- SET_HOVERED: {
58
- actions: "setHovered",
59
- },
60
- SET_ACTIVE: {
61
- actions: "setActive",
62
- },
63
- SET_FOCUSED: {
64
- actions: "setFocused",
65
- },
66
- },
67
-
68
- states: {
69
- idle: {},
70
- },
71
- },
72
-
73
- {
74
- guards: {
75
- isTrusted: (_ctx, evt) => !!evt.isTrusted,
76
- },
77
- activities: {
78
- trackFormControlState(ctx, _evt, { send, initialContext }) {
79
- return trackFormControl(dom.getRootEl(ctx), {
80
- onFieldsetDisabledChange(disabled) {
81
- ctx.fieldsetDisabled = disabled
82
- },
83
- onFormReset() {
84
- send({ type: "SET_VALUE", value: initialContext.value })
85
- },
86
- })
87
- },
88
- trackFocusVisible(ctx) {
89
- return trackFocusVisible({ root: dom.getRootNode(ctx) })
90
- },
91
- },
92
-
93
- actions: {
94
- setValue(ctx, evt) {
95
- set.value(ctx, evt.value)
96
- },
97
- setHovered(ctx, evt) {
98
- ctx.hoveredValue = evt.value
99
- },
100
- setActive(ctx, evt) {
101
- ctx.activeValue = evt.value
102
- },
103
- setFocused(ctx, evt) {
104
- ctx.focusedValue = evt.value
105
- ctx.focusVisible = evt.focusVisible
106
- },
107
- syncInputElements(ctx) {
108
- const inputs = dom.getInputEls(ctx)
109
- inputs.forEach((input) => {
110
- input.checked = input.value === ctx.value
111
- })
112
- },
113
- setIndicatorTransition(ctx) {
114
- ctx.canIndicatorTransition = isString(ctx.value)
115
- },
116
- cleanupObserver(ctx) {
117
- ctx.indicatorCleanup?.()
118
- },
119
- syncSsr(ctx) {
120
- ctx.ssr = false
121
- },
122
- syncIndicatorRect(ctx) {
123
- ctx.indicatorCleanup?.()
124
-
125
- if (!dom.getIndicatorEl(ctx)) return
126
-
127
- const value = ctx.value
128
-
129
- const radioEl = dom.getActiveRadioEl(ctx)
130
-
131
- if (value == null || !radioEl) {
132
- ctx.indicatorRect = {}
133
- return
134
- }
135
-
136
- ctx.indicatorCleanup = trackElementRect(radioEl, {
137
- getRect(el) {
138
- return dom.getOffsetRect(el)
139
- },
140
- onChange(rect) {
141
- ctx.indicatorRect = dom.resolveRect(rect)
142
- nextTick(() => {
143
- ctx.canIndicatorTransition = false
144
- })
145
- },
146
- })
147
- },
148
- dispatchChangeEvent(ctx) {
149
- const inputEls = dom.getInputEls(ctx)
150
- inputEls.forEach((inputEl) => {
151
- const checked = inputEl.value === ctx.value
152
- if (checked === inputEl.checked) return
153
- dispatchInputCheckedEvent(inputEl, { checked })
154
- })
155
- },
156
- },
157
- },
158
- )
159
- }
160
-
161
- const invoke = {
162
- change: (ctx: MachineContext) => {
163
- if (ctx.value == null) return
164
- ctx.onValueChange?.({ value: ctx.value })
165
- },
166
- }
167
-
168
- const set = {
169
- value: (ctx: MachineContext, value: string) => {
170
- if (isEqual(ctx.value, value)) return
171
- ctx.value = value
172
- invoke.change(ctx)
173
- },
174
- }
@@ -1,21 +0,0 @@
1
- import { createProps } from "@zag-js/types"
2
- import { createSplitProps } from "@zag-js/utils"
3
- import type { ItemProps, UserDefinedContext } from "./radio-group.types"
4
-
5
- export const props = createProps<UserDefinedContext>()([
6
- "dir",
7
- "disabled",
8
- "form",
9
- "getRootNode",
10
- "id",
11
- "ids",
12
- "name",
13
- "onValueChange",
14
- "orientation",
15
- "readOnly",
16
- "value",
17
- ])
18
- export const splitProps = createSplitProps<Partial<UserDefinedContext>>(props)
19
-
20
- export const itemProps = createProps<ItemProps>()(["value", "disabled", "invalid"])
21
- export const splitItemProps = createSplitProps<ItemProps>(itemProps)
@@ -1,199 +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
- export interface ValueChangeDetails {
5
- value: string
6
- }
7
-
8
- /* -----------------------------------------------------------------------------
9
- * Machine context
10
- * -----------------------------------------------------------------------------*/
11
-
12
- export type ElementIds = Partial<{
13
- root: string
14
- label: string
15
- indicator: string
16
- item(value: string): string
17
- itemLabel(value: string): string
18
- itemControl(value: string): string
19
- itemHiddenInput(value: string): string
20
- }>
21
-
22
- interface PublicContext extends DirectionProperty, CommonProperties {
23
- /**
24
- * The ids of the elements in the radio. Useful for composition.
25
- */
26
- ids?: ElementIds
27
- /**
28
- * The value of the checked radio
29
- */
30
- value: string | null
31
- /**
32
- * The name of the input fields in the radio
33
- * (Useful for form submission).
34
- */
35
- name?: string
36
- /**
37
- * The associate form of the underlying input.
38
- */
39
- form?: string
40
- /**
41
- * If `true`, the radio group will be disabled
42
- */
43
- disabled?: boolean
44
- /**
45
- * Whether the checkbox is read-only
46
- */
47
- readOnly?: boolean
48
- /**
49
- * Function called once a radio is checked
50
- * @param value the value of the checked radio
51
- */
52
- onValueChange?(details: ValueChangeDetails): void
53
- /**
54
- * Orientation of the radio group
55
- */
56
- orientation?: "horizontal" | "vertical"
57
- }
58
-
59
- interface PrivateContext {
60
- /**
61
- * @internal
62
- * The id of the active radio
63
- */
64
- activeValue: string | null
65
- /**
66
- * @internal
67
- * The id of the focused radio
68
- */
69
- focusedValue: string | null
70
- /**
71
- * @internal
72
- * The id of the hovered radio
73
- */
74
- hoveredValue: string | null
75
- /**
76
- * @internal
77
- * The active tab indicator's dom rect
78
- */
79
- indicatorRect: Partial<{ left: string; top: string; width: string; height: string }>
80
- /**
81
- * @internal
82
- * Whether the active tab indicator's rect can transition
83
- */
84
- canIndicatorTransition?: boolean
85
- /**
86
- * @internal
87
- * Function to clean up the observer for the active tab's rect
88
- */
89
- indicatorCleanup?: VoidFunction | null
90
- /**
91
- * @internal
92
- * Whether the radio group's fieldset is disabled
93
- */
94
- fieldsetDisabled: boolean
95
- /**
96
- * @internal
97
- * Whether the radio group is in focus
98
- */
99
- focusVisible: boolean
100
- /**
101
- * @internal
102
- * Whether the radio group is in server-side rendering
103
- */
104
- ssr: boolean
105
- }
106
-
107
- export type UserDefinedContext = RequiredBy<PublicContext, "id">
108
-
109
- type ComputedContext = Readonly<{
110
- /**
111
- * @computed
112
- * Whether the radio group is disabled
113
- */
114
- isDisabled: boolean
115
- }>
116
-
117
- export interface MachineContext extends PublicContext, PrivateContext, ComputedContext {}
118
-
119
- export interface MachineState {
120
- value: "idle"
121
- }
122
-
123
- export type State = S.State<MachineContext, MachineState>
124
-
125
- export type Send = S.Send<S.AnyEventObject>
126
-
127
- export type Service = Machine<MachineContext, MachineState, S.AnyEventObject>
128
-
129
- /* -----------------------------------------------------------------------------
130
- * Component API
131
- * -----------------------------------------------------------------------------*/
132
-
133
- export interface ItemProps {
134
- value: string
135
- disabled?: boolean
136
- invalid?: boolean
137
- }
138
-
139
- export interface ItemState {
140
- /**
141
- * Whether the radio is invalid
142
- */
143
- invalid: boolean
144
- /**
145
- * Whether the radio is disabled
146
- */
147
- disabled: boolean
148
- /**
149
- * Whether the radio is checked
150
- */
151
- checked: boolean
152
- /**
153
- * Whether the radio is focused
154
- */
155
- focused: boolean
156
- /**
157
- * Whether the radio is hovered
158
- */
159
- hovered: boolean
160
- /**
161
- * Whether the radio is active or pressed
162
- */
163
- active: boolean
164
- }
165
-
166
- /* -----------------------------------------------------------------------------
167
- * Component API
168
- * -----------------------------------------------------------------------------*/
169
-
170
- export interface MachineApi<T extends PropTypes = PropTypes> {
171
- /**
172
- * The current value of the radio group
173
- */
174
- value: string | null
175
- /**
176
- * Function to set the value of the radio group
177
- */
178
- setValue(value: string): void
179
- /**
180
- * Function to clear the value of the radio group
181
- */
182
- clearValue(): void
183
- /**
184
- * Function to focus the radio group
185
- */
186
- focus(): void
187
- /**
188
- * Returns the state details of a radio input
189
- */
190
- getItemState(props: ItemProps): ItemState
191
-
192
- getRootProps(): T["element"]
193
- getLabelProps(): T["element"]
194
- getItemProps(props: ItemProps): T["label"]
195
- getItemTextProps(props: ItemProps): T["element"]
196
- getItemControlProps(props: ItemProps): T["element"]
197
- getItemHiddenInputProps(props: ItemProps): T["input"]
198
- getIndicatorProps(): T["element"]
199
- }