@zag-js/radio-group 0.10.2 → 0.10.3

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.
@@ -1,85 +1,17 @@
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/radio-group.machine.ts
21
- var radio_group_machine_exports = {};
22
- __export(radio_group_machine_exports, {
23
- machine: () => machine
24
- });
25
- module.exports = __toCommonJS(radio_group_machine_exports);
26
- var import_core = require("@zag-js/core");
27
- var import_dom_query2 = require("@zag-js/dom-query");
28
- var import_element_rect = require("@zag-js/element-rect");
29
- var import_form_utils = require("@zag-js/form-utils");
30
- var import_utils = require("@zag-js/utils");
3
+ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
31
4
 
32
- // src/radio-group.dom.ts
33
- var import_dom_query = require("@zag-js/dom-query");
34
- var dom = (0, import_dom_query.createScope)({
35
- getRootId: (ctx) => ctx.ids?.root ?? `radio-group:${ctx.id}`,
36
- getLabelId: (ctx) => ctx.ids?.label ?? `radio-group:${ctx.id}:label`,
37
- getRadioId: (ctx, value) => ctx.ids?.radio?.(value) ?? `radio-group:${ctx.id}:radio:${value}`,
38
- getRadioInputId: (ctx, value) => ctx.ids?.radioInput?.(value) ?? `radio-group:${ctx.id}:radio:input:${value}`,
39
- getRadioControlId: (ctx, value) => ctx.ids?.radioControl?.(value) ?? `radio-group:${ctx.id}:radio:control:${value}`,
40
- getRadioLabelId: (ctx, value) => ctx.ids?.radioLabel?.(value) ?? `radio-group:${ctx.id}:radio:label:${value}`,
41
- getIndicatorId: (ctx) => ctx.ids?.indicator ?? `tabs:${ctx.id}:indicator`,
42
- getRootEl: (ctx) => dom.getById(ctx, dom.getRootId(ctx)),
43
- getRadioInputEl: (ctx, value) => dom.getById(ctx, dom.getRadioInputId(ctx, value)),
44
- getIndicatorEl: (ctx) => dom.getById(ctx, dom.getIndicatorId(ctx)),
45
- getFirstEnabledInputEl: (ctx) => dom.getRootEl(ctx)?.querySelector("input:not(:disabled)"),
46
- getFirstEnabledAndCheckedInputEl: (ctx) => dom.getRootEl(ctx)?.querySelector("input:not(:disabled):checked"),
47
- getInputEls: (ctx) => {
48
- const ownerId = CSS.escape(dom.getRootId(ctx));
49
- const selector = `input[type=radio][data-ownedby='${ownerId}']:not([disabled])`;
50
- return (0, import_dom_query.queryAll)(dom.getRootEl(ctx), selector);
51
- },
52
- getActiveRadioEl: (ctx) => {
53
- if (!ctx.value)
54
- return;
55
- return dom.getById(ctx, dom.getRadioId(ctx, ctx.value));
56
- },
57
- getOffsetRect: (el) => {
58
- return {
59
- left: el?.offsetLeft ?? 0,
60
- top: el?.offsetTop ?? 0,
61
- width: el?.offsetWidth ?? 0,
62
- height: el?.offsetHeight ?? 0
63
- };
64
- },
65
- getRectById: (ctx, id) => {
66
- const tab = dom.queryById(ctx, dom.getRadioId(ctx, id));
67
- return dom.resolveRect(dom.getOffsetRect(tab));
68
- },
69
- resolveRect(rect) {
70
- return {
71
- width: `${rect.width}px`,
72
- height: `${rect.height}px`,
73
- left: `${rect.left}px`,
74
- top: `${rect.top}px`
75
- };
76
- }
77
- });
5
+ const core = require('@zag-js/core');
6
+ const domQuery = require('@zag-js/dom-query');
7
+ const elementRect = require('@zag-js/element-rect');
8
+ const formUtils = require('@zag-js/form-utils');
9
+ const utils = require('@zag-js/utils');
10
+ const radioGroup_dom = require('./radio-group.dom.js');
78
11
 
79
- // src/radio-group.machine.ts
80
12
  function machine(userContext) {
81
- const ctx = (0, import_utils.compact)(userContext);
82
- return (0, import_core.createMachine)(
13
+ const ctx = utils.compact(userContext);
14
+ return core.createMachine(
83
15
  {
84
16
  id: "radio",
85
17
  initial: "idle",
@@ -127,7 +59,7 @@ function machine(userContext) {
127
59
  {
128
60
  activities: {
129
61
  trackFormControlState(ctx2, _evt, { send, initialContext }) {
130
- return (0, import_form_utils.trackFormControl)(dom.getRootEl(ctx2), {
62
+ return formUtils.trackFormControl(radioGroup_dom.dom.getRootEl(ctx2), {
131
63
  onFieldsetDisabled() {
132
64
  ctx2.disabled = true;
133
65
  },
@@ -154,7 +86,7 @@ function machine(userContext) {
154
86
  ctx2.onChange?.({ value: evt.value });
155
87
  },
156
88
  syncInputElements(ctx2) {
157
- const inputs = dom.getInputEls(ctx2);
89
+ const inputs = radioGroup_dom.dom.getInputEls(ctx2);
158
90
  inputs.forEach((input) => {
159
91
  input.checked = input.value === ctx2.value;
160
92
  });
@@ -163,30 +95,30 @@ function machine(userContext) {
163
95
  ctx2.previousValue = ctx2.value;
164
96
  },
165
97
  setIndicatorTransition(ctx2) {
166
- ctx2.canIndicatorTransition = (0, import_utils.isString)(ctx2.previousValue) && (0, import_utils.isString)(ctx2.value);
98
+ ctx2.canIndicatorTransition = utils.isString(ctx2.previousValue) && utils.isString(ctx2.value);
167
99
  },
168
100
  cleanupObserver(ctx2) {
169
101
  ctx2.indicatorCleanup?.();
170
102
  },
171
103
  syncIndicatorRect(ctx2) {
172
104
  ctx2.indicatorCleanup?.();
173
- if (!dom.getIndicatorEl(ctx2))
105
+ if (!radioGroup_dom.dom.getIndicatorEl(ctx2))
174
106
  return;
175
107
  const value = ctx2.value;
176
108
  if (value == null) {
177
109
  ctx2.indicatorRect = {};
178
110
  return;
179
111
  }
180
- const radioEl = dom.getActiveRadioEl(ctx2);
112
+ const radioEl = radioGroup_dom.dom.getActiveRadioEl(ctx2);
181
113
  if (!radioEl)
182
114
  return;
183
- ctx2.indicatorCleanup = (0, import_element_rect.trackElementRect)(radioEl, {
115
+ ctx2.indicatorCleanup = elementRect.trackElementRect(radioEl, {
184
116
  getRect(el) {
185
- return dom.getOffsetRect(el);
117
+ return radioGroup_dom.dom.getOffsetRect(el);
186
118
  },
187
119
  onChange(rect) {
188
- ctx2.indicatorRect = dom.resolveRect(rect);
189
- (0, import_dom_query2.nextTick)(() => {
120
+ ctx2.indicatorRect = radioGroup_dom.dom.resolveRect(rect);
121
+ domQuery.nextTick(() => {
190
122
  ctx2.canIndicatorTransition = false;
191
123
  });
192
124
  }
@@ -196,7 +128,5 @@ function machine(userContext) {
196
128
  }
197
129
  );
198
130
  }
199
- // Annotate the CommonJS export names for ESM import in node:
200
- 0 && (module.exports = {
201
- machine
202
- });
131
+
132
+ exports.machine = machine;
@@ -1,7 +1,128 @@
1
- import {
2
- machine
3
- } from "./chunk-UMCKI3BN.mjs";
4
- import "./chunk-DVMAGSYZ.mjs";
5
- export {
6
- machine
7
- };
1
+ import { createMachine } from '@zag-js/core';
2
+ import { nextTick } from '@zag-js/dom-query';
3
+ import { trackElementRect } from '@zag-js/element-rect';
4
+ import { trackFormControl } from '@zag-js/form-utils';
5
+ import { compact, isString } from '@zag-js/utils';
6
+ import { dom } from './radio-group.dom.mjs';
7
+
8
+ function machine(userContext) {
9
+ const ctx = compact(userContext);
10
+ return createMachine(
11
+ {
12
+ id: "radio",
13
+ initial: "idle",
14
+ context: {
15
+ previousValue: null,
16
+ value: null,
17
+ activeId: null,
18
+ focusedId: null,
19
+ hoveredId: null,
20
+ indicatorRect: {},
21
+ canIndicatorTransition: false,
22
+ ...ctx
23
+ },
24
+ entry: ["syncIndicatorRect"],
25
+ exit: ["cleanupObserver"],
26
+ activities: ["trackFormControlState"],
27
+ watch: {
28
+ value: [
29
+ "setIndicatorTransition",
30
+ // important to set this after `setIndicatorTransition`
31
+ "setPreviousValue",
32
+ "invokeOnChange",
33
+ "syncIndicatorRect",
34
+ "syncInputElements"
35
+ ]
36
+ },
37
+ on: {
38
+ SET_VALUE: {
39
+ actions: ["setValue"]
40
+ },
41
+ SET_HOVERED: {
42
+ actions: "setHovered"
43
+ },
44
+ SET_ACTIVE: {
45
+ actions: "setActive"
46
+ },
47
+ SET_FOCUSED: {
48
+ actions: "setFocused"
49
+ }
50
+ },
51
+ states: {
52
+ idle: {}
53
+ }
54
+ },
55
+ {
56
+ activities: {
57
+ trackFormControlState(ctx2, _evt, { send, initialContext }) {
58
+ return trackFormControl(dom.getRootEl(ctx2), {
59
+ onFieldsetDisabled() {
60
+ ctx2.disabled = true;
61
+ },
62
+ onFormReset() {
63
+ send({ type: "SET_VALUE", value: initialContext.value });
64
+ }
65
+ });
66
+ }
67
+ },
68
+ actions: {
69
+ setValue(ctx2, evt) {
70
+ ctx2.value = evt.value;
71
+ },
72
+ setHovered(ctx2, evt) {
73
+ ctx2.hoveredId = evt.value;
74
+ },
75
+ setActive(ctx2, evt) {
76
+ ctx2.activeId = evt.value;
77
+ },
78
+ setFocused(ctx2, evt) {
79
+ ctx2.focusedId = evt.value;
80
+ },
81
+ invokeOnChange(ctx2, evt) {
82
+ ctx2.onChange?.({ value: evt.value });
83
+ },
84
+ syncInputElements(ctx2) {
85
+ const inputs = dom.getInputEls(ctx2);
86
+ inputs.forEach((input) => {
87
+ input.checked = input.value === ctx2.value;
88
+ });
89
+ },
90
+ setPreviousValue(ctx2) {
91
+ ctx2.previousValue = ctx2.value;
92
+ },
93
+ setIndicatorTransition(ctx2) {
94
+ ctx2.canIndicatorTransition = isString(ctx2.previousValue) && isString(ctx2.value);
95
+ },
96
+ cleanupObserver(ctx2) {
97
+ ctx2.indicatorCleanup?.();
98
+ },
99
+ syncIndicatorRect(ctx2) {
100
+ ctx2.indicatorCleanup?.();
101
+ if (!dom.getIndicatorEl(ctx2))
102
+ return;
103
+ const value = ctx2.value;
104
+ if (value == null) {
105
+ ctx2.indicatorRect = {};
106
+ return;
107
+ }
108
+ const radioEl = dom.getActiveRadioEl(ctx2);
109
+ if (!radioEl)
110
+ return;
111
+ ctx2.indicatorCleanup = trackElementRect(radioEl, {
112
+ getRect(el) {
113
+ return dom.getOffsetRect(el);
114
+ },
115
+ onChange(rect) {
116
+ ctx2.indicatorRect = dom.resolveRect(rect);
117
+ nextTick(() => {
118
+ ctx2.canIndicatorTransition = false;
119
+ });
120
+ }
121
+ });
122
+ }
123
+ }
124
+ }
125
+ );
126
+ }
127
+
128
+ export { machine };
@@ -1,6 +1,5 @@
1
- import { StateMachine } from '@zag-js/core';
2
- import { RequiredBy, DirectionProperty, CommonProperties, Context } from '@zag-js/types';
3
-
1
+ import type { StateMachine as S } from "@zag-js/core";
2
+ import type { CommonProperties, Context, DirectionProperty, RequiredBy } from "@zag-js/types";
4
3
  type ElementIds = Partial<{
5
4
  root: string;
6
5
  label: string;
@@ -49,15 +48,15 @@ type PublicContext = DirectionProperty & CommonProperties & {
49
48
  orientation?: "horizontal" | "vertical";
50
49
  };
51
50
  type PrivateContext = Context<{}>;
52
- type UserDefinedContext = RequiredBy<PublicContext, "id">;
51
+ export type UserDefinedContext = RequiredBy<PublicContext, "id">;
53
52
  type ComputedContext = Readonly<{}>;
54
- type MachineContext = PublicContext & PrivateContext & ComputedContext;
55
- type MachineState = {
53
+ export type MachineContext = PublicContext & PrivateContext & ComputedContext;
54
+ export type MachineState = {
56
55
  value: "idle";
57
56
  };
58
- type State = StateMachine.State<MachineContext, MachineState>;
59
- type Send = StateMachine.Send<StateMachine.AnyEventObject>;
60
- type RadioProps = {
57
+ export type State = S.State<MachineContext, MachineState>;
58
+ export type Send = S.Send<S.AnyEventObject>;
59
+ export type RadioProps = {
61
60
  value: string;
62
61
  /**
63
62
  * If `true`, the radio will be disabled
@@ -72,7 +71,7 @@ type RadioProps = {
72
71
  */
73
72
  invalid?: boolean;
74
73
  };
75
- type InputProps = RadioProps & {
74
+ export type InputProps = RadioProps & {
76
75
  /**
77
76
  * If `true` and `disabled` is passed, the radio will
78
77
  * remain tabbable but not interactive
@@ -83,5 +82,4 @@ type InputProps = RadioProps & {
83
82
  */
84
83
  required?: boolean;
85
84
  };
86
-
87
- export { InputProps, MachineContext, MachineState, RadioProps, Send, State, UserDefinedContext };
85
+ export {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zag-js/radio-group",
3
- "version": "0.10.2",
3
+ "version": "0.10.3",
4
4
  "description": "Core logic for the radio group widget implemented as a state machine",
5
5
  "keywords": [
6
6
  "js",
@@ -28,14 +28,14 @@
28
28
  "url": "https://github.com/chakra-ui/zag/issues"
29
29
  },
30
30
  "dependencies": {
31
- "@zag-js/anatomy": "0.10.2",
32
- "@zag-js/dom-query": "0.10.2",
33
- "@zag-js/element-rect": "0.10.2",
34
- "@zag-js/form-utils": "0.10.2",
35
- "@zag-js/visually-hidden": "0.10.2",
36
- "@zag-js/utils": "0.10.2",
37
- "@zag-js/core": "0.10.2",
38
- "@zag-js/types": "0.10.2"
31
+ "@zag-js/anatomy": "0.10.3",
32
+ "@zag-js/dom-query": "0.10.3",
33
+ "@zag-js/element-rect": "0.10.3",
34
+ "@zag-js/form-utils": "0.10.3",
35
+ "@zag-js/visually-hidden": "0.10.3",
36
+ "@zag-js/utils": "0.10.3",
37
+ "@zag-js/core": "0.10.3",
38
+ "@zag-js/types": "0.10.3"
39
39
  },
40
40
  "devDependencies": {
41
41
  "clean-package": "2.2.0"
@@ -53,13 +53,8 @@
53
53
  "./package.json": "./package.json"
54
54
  },
55
55
  "scripts": {
56
- "build-fast": "tsup src",
57
- "start": "pnpm build --watch",
58
- "build": "tsup src --dts",
59
- "test": "jest --config ../../../jest.config.js --rootDir . --passWithNoTests",
56
+ "build": "vite build -c ../../../vite.config.ts",
60
57
  "lint": "eslint src --ext .ts,.tsx",
61
- "test-ci": "pnpm test --ci --runInBand",
62
- "test-watch": "pnpm test --watch -u",
63
58
  "typecheck": "tsc --noEmit"
64
59
  }
65
60
  }
@@ -1,216 +0,0 @@
1
- import {
2
- parts
3
- } from "./chunk-R5YJZPCP.mjs";
4
- import {
5
- dom
6
- } from "./chunk-DVMAGSYZ.mjs";
7
-
8
- // src/radio-group.connect.ts
9
- import { ariaAttr, dataAttr } from "@zag-js/dom-query";
10
- import { visuallyHiddenStyle } from "@zag-js/visually-hidden";
11
- function connect(state, send, normalize) {
12
- const isGroupDisabled = state.context.disabled;
13
- const isGroupReadOnly = state.context.readOnly;
14
- function getRadioState(props) {
15
- const radioState = {
16
- isReadOnly: props.readOnly || isGroupReadOnly,
17
- isInvalid: props.invalid,
18
- isDisabled: props.disabled || isGroupDisabled,
19
- isChecked: state.context.value === props.value,
20
- isFocused: state.context.focusedId === props.value,
21
- isHovered: state.context.hoveredId === props.value,
22
- isActive: state.context.activeId === props.value
23
- };
24
- return {
25
- ...radioState,
26
- isInteractive: !(radioState.isReadOnly || radioState.isDisabled)
27
- };
28
- }
29
- function getRadioDataAttrs(props) {
30
- const radioState = getRadioState(props);
31
- return {
32
- "data-focus": dataAttr(radioState.isFocused),
33
- "data-disabled": dataAttr(radioState.isDisabled),
34
- "data-checked": dataAttr(radioState.isChecked),
35
- "data-hover": dataAttr(radioState.isHovered),
36
- "data-invalid": dataAttr(radioState.isInvalid),
37
- "data-readonly": dataAttr(radioState.isReadOnly)
38
- };
39
- }
40
- const focus = () => {
41
- const firstEnabledAndCheckedInput = dom.getFirstEnabledAndCheckedInputEl(state.context);
42
- if (firstEnabledAndCheckedInput) {
43
- firstEnabledAndCheckedInput.focus();
44
- return;
45
- }
46
- const firstEnabledInput = dom.getFirstEnabledInputEl(state.context);
47
- firstEnabledInput?.focus();
48
- };
49
- return {
50
- /**
51
- * The current value of the radio group
52
- */
53
- value: state.context.value,
54
- /**
55
- * Function to set the value of the radio group
56
- */
57
- setValue(value) {
58
- send({ type: "SET_VALUE", value, manual: true });
59
- },
60
- /**
61
- * Function to clear the value of the radio group
62
- */
63
- clearValue() {
64
- send({ type: "SET_VALUE", value: null, manual: true });
65
- },
66
- /**
67
- * Function to focus the radio group
68
- */
69
- focus,
70
- /**
71
- * Function to blur the currently focused radio input in the radio group
72
- */
73
- blur() {
74
- const focusedElement = dom.getActiveElement(state.context);
75
- const inputEls = dom.getInputEls(state.context);
76
- const radioInputIsFocused = inputEls.some((el) => el === focusedElement);
77
- if (radioInputIsFocused)
78
- focusedElement?.blur();
79
- },
80
- /**
81
- * Returns the state details of a radio input
82
- */
83
- getRadioState,
84
- rootProps: normalize.element({
85
- ...parts.root.attrs,
86
- role: "radiogroup",
87
- id: dom.getRootId(state.context),
88
- "aria-labelledby": dom.getLabelId(state.context),
89
- "data-orientation": state.context.orientation,
90
- "aria-orientation": state.context.orientation,
91
- dir: state.context.dir
92
- }),
93
- labelProps: normalize.element({
94
- ...parts.label.attrs,
95
- id: dom.getLabelId(state.context),
96
- onClick: focus
97
- }),
98
- getRadioProps(props) {
99
- const rootState = getRadioState(props);
100
- return normalize.label({
101
- ...parts.radio.attrs,
102
- id: dom.getRadioId(state.context, props.value),
103
- htmlFor: dom.getRadioInputId(state.context, props.value),
104
- ...getRadioDataAttrs(props),
105
- onPointerMove() {
106
- if (!rootState.isInteractive)
107
- return;
108
- send({ type: "SET_HOVERED", value: props.value, hovered: true });
109
- },
110
- onPointerLeave() {
111
- if (!rootState.isInteractive)
112
- return;
113
- send({ type: "SET_HOVERED", value: null });
114
- },
115
- onPointerDown(event) {
116
- if (!rootState.isInteractive)
117
- return;
118
- if (rootState.isFocused && event.pointerType === "mouse") {
119
- event.preventDefault();
120
- }
121
- send({ type: "SET_ACTIVE", value: props.value, active: true });
122
- },
123
- onPointerUp() {
124
- if (!rootState.isInteractive)
125
- return;
126
- send({ type: "SET_ACTIVE", value: null });
127
- }
128
- });
129
- },
130
- getRadioLabelProps(props) {
131
- return normalize.element({
132
- ...parts.radioLabel.attrs,
133
- id: dom.getRadioLabelId(state.context, props.value),
134
- ...getRadioDataAttrs(props)
135
- });
136
- },
137
- getRadioControlProps(props) {
138
- const controlState = getRadioState(props);
139
- return normalize.element({
140
- ...parts.radioControl.attrs,
141
- id: dom.getRadioControlId(state.context, props.value),
142
- "data-active": dataAttr(controlState.isActive),
143
- "aria-hidden": true,
144
- ...getRadioDataAttrs(props)
145
- });
146
- },
147
- getRadioInputProps(props) {
148
- const inputState = getRadioState(props);
149
- const isRequired = props.required;
150
- const trulyDisabled = inputState.isDisabled && !props.focusable;
151
- return normalize.input({
152
- ...parts.radioInput.attrs,
153
- "data-ownedby": dom.getRootId(state.context),
154
- id: dom.getRadioInputId(state.context, props.value),
155
- type: "radio",
156
- name: state.context.name || state.context.id,
157
- form: state.context.form,
158
- value: props.value,
159
- onChange(event) {
160
- if (inputState.isReadOnly || inputState.isDisabled) {
161
- return;
162
- }
163
- if (event.target.checked) {
164
- send({ type: "SET_VALUE", value: props.value });
165
- }
166
- },
167
- onBlur() {
168
- send({ type: "SET_FOCUSED", value: null });
169
- },
170
- onFocus() {
171
- send({ type: "SET_FOCUSED", value: props.value, focused: true });
172
- },
173
- onKeyDown(event) {
174
- if (event.key === " ") {
175
- send({ type: "SET_ACTIVE", value: props.value, active: true });
176
- }
177
- },
178
- onKeyUp(event) {
179
- if (event.key === " ") {
180
- send({ type: "SET_ACTIVE", value: null });
181
- }
182
- },
183
- disabled: trulyDisabled,
184
- required: isRequired,
185
- defaultChecked: inputState.isChecked,
186
- "data-disabled": dataAttr(inputState.isDisabled),
187
- "aria-required": ariaAttr(isRequired),
188
- "aria-invalid": ariaAttr(inputState.isInvalid),
189
- readOnly: inputState.isReadOnly,
190
- "data-readonly": dataAttr(inputState.isReadOnly),
191
- "aria-disabled": ariaAttr(trulyDisabled),
192
- "aria-checked": ariaAttr(inputState.isChecked),
193
- style: visuallyHiddenStyle
194
- });
195
- },
196
- indicatorProps: normalize.element({
197
- id: dom.getIndicatorId(state.context),
198
- ...parts.indicator.attrs,
199
- "data-orientation": state.context.orientation,
200
- style: {
201
- "--transition-duration": "150ms",
202
- "--transition-property": "left, top, width, height",
203
- position: "absolute",
204
- willChange: "var(--transition-property)",
205
- transitionProperty: "var(--transition-property)",
206
- transitionDuration: state.context.canIndicatorTransition ? "var(--transition-duration)" : "0ms",
207
- transitionTimingFunction: "var(--transition-timing-function)",
208
- ...state.context.indicatorRect
209
- }
210
- })
211
- };
212
- }
213
-
214
- export {
215
- connect
216
- };
@@ -1,50 +0,0 @@
1
- // src/radio-group.dom.ts
2
- import { createScope, queryAll } from "@zag-js/dom-query";
3
- var dom = createScope({
4
- getRootId: (ctx) => ctx.ids?.root ?? `radio-group:${ctx.id}`,
5
- getLabelId: (ctx) => ctx.ids?.label ?? `radio-group:${ctx.id}:label`,
6
- getRadioId: (ctx, value) => ctx.ids?.radio?.(value) ?? `radio-group:${ctx.id}:radio:${value}`,
7
- getRadioInputId: (ctx, value) => ctx.ids?.radioInput?.(value) ?? `radio-group:${ctx.id}:radio:input:${value}`,
8
- getRadioControlId: (ctx, value) => ctx.ids?.radioControl?.(value) ?? `radio-group:${ctx.id}:radio:control:${value}`,
9
- getRadioLabelId: (ctx, value) => ctx.ids?.radioLabel?.(value) ?? `radio-group:${ctx.id}:radio:label:${value}`,
10
- getIndicatorId: (ctx) => ctx.ids?.indicator ?? `tabs:${ctx.id}:indicator`,
11
- getRootEl: (ctx) => dom.getById(ctx, dom.getRootId(ctx)),
12
- getRadioInputEl: (ctx, value) => dom.getById(ctx, dom.getRadioInputId(ctx, value)),
13
- getIndicatorEl: (ctx) => dom.getById(ctx, dom.getIndicatorId(ctx)),
14
- getFirstEnabledInputEl: (ctx) => dom.getRootEl(ctx)?.querySelector("input:not(:disabled)"),
15
- getFirstEnabledAndCheckedInputEl: (ctx) => dom.getRootEl(ctx)?.querySelector("input:not(:disabled):checked"),
16
- getInputEls: (ctx) => {
17
- const ownerId = CSS.escape(dom.getRootId(ctx));
18
- const selector = `input[type=radio][data-ownedby='${ownerId}']:not([disabled])`;
19
- return queryAll(dom.getRootEl(ctx), selector);
20
- },
21
- getActiveRadioEl: (ctx) => {
22
- if (!ctx.value)
23
- return;
24
- return dom.getById(ctx, dom.getRadioId(ctx, ctx.value));
25
- },
26
- getOffsetRect: (el) => {
27
- return {
28
- left: el?.offsetLeft ?? 0,
29
- top: el?.offsetTop ?? 0,
30
- width: el?.offsetWidth ?? 0,
31
- height: el?.offsetHeight ?? 0
32
- };
33
- },
34
- getRectById: (ctx, id) => {
35
- const tab = dom.queryById(ctx, dom.getRadioId(ctx, id));
36
- return dom.resolveRect(dom.getOffsetRect(tab));
37
- },
38
- resolveRect(rect) {
39
- return {
40
- width: `${rect.width}px`,
41
- height: `${rect.height}px`,
42
- left: `${rect.left}px`,
43
- top: `${rect.top}px`
44
- };
45
- }
46
- });
47
-
48
- export {
49
- dom
50
- };
@@ -1,17 +0,0 @@
1
- // src/radio-group.anatomy.ts
2
- import { createAnatomy } from "@zag-js/anatomy";
3
- var anatomy = createAnatomy("radio-group").parts(
4
- "root",
5
- "label",
6
- "radio",
7
- "radioLabel",
8
- "radioControl",
9
- "radioInput",
10
- "indicator"
11
- );
12
- var parts = anatomy.build();
13
-
14
- export {
15
- anatomy,
16
- parts
17
- };