@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.d.mts CHANGED
@@ -1,12 +1,12 @@
1
1
  import * as _zag_js_anatomy from '@zag-js/anatomy';
2
- import { RequiredBy, PropTypes, DirectionProperty, CommonProperties, NormalizeProps } from '@zag-js/types';
2
+ import { DirectionProperty, CommonProperties, PropTypes, RequiredBy, NormalizeProps } from '@zag-js/types';
3
3
  import * as _zag_js_core from '@zag-js/core';
4
- import { Machine, StateMachine } from '@zag-js/core';
4
+ import { Service, EventObject } from '@zag-js/core';
5
5
 
6
6
  declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "label" | "item" | "itemText" | "itemControl" | "indicator">;
7
7
 
8
8
  interface ValueChangeDetails {
9
- value: string;
9
+ value: string | null;
10
10
  }
11
11
  type ElementIds = Partial<{
12
12
  root: string;
@@ -17,15 +17,20 @@ type ElementIds = Partial<{
17
17
  itemControl(value: string): string;
18
18
  itemHiddenInput(value: string): string;
19
19
  }>;
20
- interface PublicContext extends DirectionProperty, CommonProperties {
20
+ interface RadioGroupProps extends DirectionProperty, CommonProperties {
21
21
  /**
22
22
  * The ids of the elements in the radio. Useful for composition.
23
23
  */
24
24
  ids?: ElementIds | undefined;
25
25
  /**
26
- * The value of the checked radio
26
+ * The controlled value of the radio group
27
27
  */
28
- value: string | null;
28
+ value?: string | null | undefined;
29
+ /**
30
+ * The initial value of the checked radio when rendered.
31
+ * Use when you don't need to control the value of the radio group.
32
+ */
33
+ defaultValue?: string | null | undefined;
29
34
  /**
30
35
  * The name of the input fields in the radio
31
36
  * (Useful for form submission).
@@ -45,32 +50,82 @@ interface PublicContext extends DirectionProperty, CommonProperties {
45
50
  readOnly?: boolean | undefined;
46
51
  /**
47
52
  * Function called once a radio is checked
48
- * @param value the value of the checked radio
49
53
  */
50
- onValueChange?(details: ValueChangeDetails): void;
54
+ onValueChange?: ((details: ValueChangeDetails) => void) | undefined;
51
55
  /**
52
56
  * Orientation of the radio group
53
57
  */
54
58
  orientation?: "horizontal" | "vertical" | undefined;
55
59
  }
60
+ interface IndicatorRect {
61
+ left: string;
62
+ top: string;
63
+ width: string;
64
+ height: string;
65
+ }
56
66
  interface PrivateContext {
67
+ /**
68
+ * The value of the checked radio
69
+ */
70
+ value: string | null;
71
+ /**
72
+ * The id of the active radio
73
+ */
74
+ activeValue: string | null;
75
+ /**
76
+ * The id of the focused radio
77
+ */
78
+ focusedValue: string | null;
79
+ /**
80
+ * The id of the hovered radio
81
+ */
82
+ hoveredValue: string | null;
83
+ /**
84
+ * The active tab indicator's dom rect
85
+ */
86
+ indicatorRect: Partial<IndicatorRect>;
87
+ /**
88
+ * Whether the active tab indicator's rect can transition
89
+ */
90
+ canIndicatorTransition: boolean;
91
+ /**
92
+ * Whether the radio group's fieldset is disabled
93
+ */
94
+ fieldsetDisabled: boolean;
95
+ /**
96
+ * Whether the radio group is in focus
97
+ */
98
+ focusVisible: boolean;
99
+ /**
100
+ * Whether the radio group is in server-side rendering
101
+ */
102
+ ssr: boolean;
57
103
  }
58
- type UserDefinedContext = RequiredBy<PublicContext, "id">;
104
+ type PropsWithDefault = "orientation";
59
105
  type ComputedContext = Readonly<{
60
106
  /**
61
- * @computed
62
107
  * Whether the radio group is disabled
63
108
  */
64
109
  isDisabled: boolean;
65
110
  }>;
66
- interface MachineContext extends PublicContext, PrivateContext, ComputedContext {
111
+ interface Refs {
112
+ /**
113
+ * Function to clean up the observer for the active tab's rect
114
+ */
115
+ indicatorCleanup: VoidFunction | null;
67
116
  }
68
- interface MachineState {
69
- value: "idle";
117
+ interface RadioGroupSchema {
118
+ state: "idle";
119
+ props: RequiredBy<RadioGroupProps, PropsWithDefault>;
120
+ context: PrivateContext;
121
+ computed: ComputedContext;
122
+ refs: Refs;
123
+ event: EventObject;
124
+ action: string;
125
+ effect: string;
126
+ guard: string;
70
127
  }
71
- type State = StateMachine.State<MachineContext, MachineState>;
72
- type Send = StateMachine.Send<StateMachine.AnyEventObject>;
73
- type Service = Machine<MachineContext, MachineState, StateMachine.AnyEventObject>;
128
+ type RadioGroupService = Service<RadioGroupSchema>;
74
129
  interface ItemProps {
75
130
  value: string;
76
131
  disabled?: boolean | undefined;
@@ -102,7 +157,7 @@ interface ItemState {
102
157
  */
103
158
  active: boolean;
104
159
  }
105
- interface MachineApi<T extends PropTypes = PropTypes> {
160
+ interface RadioGroupApi<T extends PropTypes = PropTypes> {
106
161
  /**
107
162
  * The current value of the radio group
108
163
  */
@@ -132,13 +187,13 @@ interface MachineApi<T extends PropTypes = PropTypes> {
132
187
  getIndicatorProps(): T["element"];
133
188
  }
134
189
 
135
- declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T>;
190
+ declare function connect<T extends PropTypes>(service: RadioGroupService, normalize: NormalizeProps<T>): RadioGroupApi<T>;
136
191
 
137
- declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
192
+ declare const machine: _zag_js_core.MachineConfig<RadioGroupSchema>;
138
193
 
139
- declare const props: ("disabled" | "form" | "dir" | "id" | "name" | "value" | "orientation" | "getRootNode" | "ids" | "readOnly" | "onValueChange")[];
140
- declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "disabled" | "form" | "dir" | "id" | "name" | "value" | "orientation" | "getRootNode" | "ids" | "readOnly" | "onValueChange">];
194
+ declare const props: (keyof RadioGroupProps)[];
195
+ declare const splitProps: <Props extends Partial<RadioGroupProps>>(props: Props) => [Partial<RadioGroupProps>, Omit<Props, keyof RadioGroupProps>];
141
196
  declare const itemProps: (keyof ItemProps)[];
142
197
  declare const splitItemProps: <Props extends ItemProps>(props: Props) => [ItemProps, Omit<Props, keyof ItemProps>];
143
198
 
144
- export { type MachineApi as Api, type UserDefinedContext as Context, type ElementIds, type ItemProps, type ItemState, type Service, type ValueChangeDetails, anatomy, connect, itemProps, machine, props, splitItemProps, splitProps };
199
+ export { type RadioGroupApi as Api, type ElementIds, type ItemProps, type ItemState, type RadioGroupProps as Props, type RadioGroupService as Service, type ValueChangeDetails, anatomy, connect, itemProps, machine, props, splitItemProps, splitProps };
package/dist/index.d.ts CHANGED
@@ -1,12 +1,12 @@
1
1
  import * as _zag_js_anatomy from '@zag-js/anatomy';
2
- import { RequiredBy, PropTypes, DirectionProperty, CommonProperties, NormalizeProps } from '@zag-js/types';
2
+ import { DirectionProperty, CommonProperties, PropTypes, RequiredBy, NormalizeProps } from '@zag-js/types';
3
3
  import * as _zag_js_core from '@zag-js/core';
4
- import { Machine, StateMachine } from '@zag-js/core';
4
+ import { Service, EventObject } from '@zag-js/core';
5
5
 
6
6
  declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "label" | "item" | "itemText" | "itemControl" | "indicator">;
7
7
 
8
8
  interface ValueChangeDetails {
9
- value: string;
9
+ value: string | null;
10
10
  }
11
11
  type ElementIds = Partial<{
12
12
  root: string;
@@ -17,15 +17,20 @@ type ElementIds = Partial<{
17
17
  itemControl(value: string): string;
18
18
  itemHiddenInput(value: string): string;
19
19
  }>;
20
- interface PublicContext extends DirectionProperty, CommonProperties {
20
+ interface RadioGroupProps extends DirectionProperty, CommonProperties {
21
21
  /**
22
22
  * The ids of the elements in the radio. Useful for composition.
23
23
  */
24
24
  ids?: ElementIds | undefined;
25
25
  /**
26
- * The value of the checked radio
26
+ * The controlled value of the radio group
27
27
  */
28
- value: string | null;
28
+ value?: string | null | undefined;
29
+ /**
30
+ * The initial value of the checked radio when rendered.
31
+ * Use when you don't need to control the value of the radio group.
32
+ */
33
+ defaultValue?: string | null | undefined;
29
34
  /**
30
35
  * The name of the input fields in the radio
31
36
  * (Useful for form submission).
@@ -45,32 +50,82 @@ interface PublicContext extends DirectionProperty, CommonProperties {
45
50
  readOnly?: boolean | undefined;
46
51
  /**
47
52
  * Function called once a radio is checked
48
- * @param value the value of the checked radio
49
53
  */
50
- onValueChange?(details: ValueChangeDetails): void;
54
+ onValueChange?: ((details: ValueChangeDetails) => void) | undefined;
51
55
  /**
52
56
  * Orientation of the radio group
53
57
  */
54
58
  orientation?: "horizontal" | "vertical" | undefined;
55
59
  }
60
+ interface IndicatorRect {
61
+ left: string;
62
+ top: string;
63
+ width: string;
64
+ height: string;
65
+ }
56
66
  interface PrivateContext {
67
+ /**
68
+ * The value of the checked radio
69
+ */
70
+ value: string | null;
71
+ /**
72
+ * The id of the active radio
73
+ */
74
+ activeValue: string | null;
75
+ /**
76
+ * The id of the focused radio
77
+ */
78
+ focusedValue: string | null;
79
+ /**
80
+ * The id of the hovered radio
81
+ */
82
+ hoveredValue: string | null;
83
+ /**
84
+ * The active tab indicator's dom rect
85
+ */
86
+ indicatorRect: Partial<IndicatorRect>;
87
+ /**
88
+ * Whether the active tab indicator's rect can transition
89
+ */
90
+ canIndicatorTransition: boolean;
91
+ /**
92
+ * Whether the radio group's fieldset is disabled
93
+ */
94
+ fieldsetDisabled: boolean;
95
+ /**
96
+ * Whether the radio group is in focus
97
+ */
98
+ focusVisible: boolean;
99
+ /**
100
+ * Whether the radio group is in server-side rendering
101
+ */
102
+ ssr: boolean;
57
103
  }
58
- type UserDefinedContext = RequiredBy<PublicContext, "id">;
104
+ type PropsWithDefault = "orientation";
59
105
  type ComputedContext = Readonly<{
60
106
  /**
61
- * @computed
62
107
  * Whether the radio group is disabled
63
108
  */
64
109
  isDisabled: boolean;
65
110
  }>;
66
- interface MachineContext extends PublicContext, PrivateContext, ComputedContext {
111
+ interface Refs {
112
+ /**
113
+ * Function to clean up the observer for the active tab's rect
114
+ */
115
+ indicatorCleanup: VoidFunction | null;
67
116
  }
68
- interface MachineState {
69
- value: "idle";
117
+ interface RadioGroupSchema {
118
+ state: "idle";
119
+ props: RequiredBy<RadioGroupProps, PropsWithDefault>;
120
+ context: PrivateContext;
121
+ computed: ComputedContext;
122
+ refs: Refs;
123
+ event: EventObject;
124
+ action: string;
125
+ effect: string;
126
+ guard: string;
70
127
  }
71
- type State = StateMachine.State<MachineContext, MachineState>;
72
- type Send = StateMachine.Send<StateMachine.AnyEventObject>;
73
- type Service = Machine<MachineContext, MachineState, StateMachine.AnyEventObject>;
128
+ type RadioGroupService = Service<RadioGroupSchema>;
74
129
  interface ItemProps {
75
130
  value: string;
76
131
  disabled?: boolean | undefined;
@@ -102,7 +157,7 @@ interface ItemState {
102
157
  */
103
158
  active: boolean;
104
159
  }
105
- interface MachineApi<T extends PropTypes = PropTypes> {
160
+ interface RadioGroupApi<T extends PropTypes = PropTypes> {
106
161
  /**
107
162
  * The current value of the radio group
108
163
  */
@@ -132,13 +187,13 @@ interface MachineApi<T extends PropTypes = PropTypes> {
132
187
  getIndicatorProps(): T["element"];
133
188
  }
134
189
 
135
- declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T>;
190
+ declare function connect<T extends PropTypes>(service: RadioGroupService, normalize: NormalizeProps<T>): RadioGroupApi<T>;
136
191
 
137
- declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
192
+ declare const machine: _zag_js_core.MachineConfig<RadioGroupSchema>;
138
193
 
139
- declare const props: ("disabled" | "form" | "dir" | "id" | "name" | "value" | "orientation" | "getRootNode" | "ids" | "readOnly" | "onValueChange")[];
140
- declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "disabled" | "form" | "dir" | "id" | "name" | "value" | "orientation" | "getRootNode" | "ids" | "readOnly" | "onValueChange">];
194
+ declare const props: (keyof RadioGroupProps)[];
195
+ declare const splitProps: <Props extends Partial<RadioGroupProps>>(props: Props) => [Partial<RadioGroupProps>, Omit<Props, keyof RadioGroupProps>];
141
196
  declare const itemProps: (keyof ItemProps)[];
142
197
  declare const splitItemProps: <Props extends ItemProps>(props: Props) => [ItemProps, Omit<Props, keyof ItemProps>];
143
198
 
144
- export { type MachineApi as Api, type UserDefinedContext as Context, type ElementIds, type ItemProps, type ItemState, type Service, type ValueChangeDetails, anatomy, connect, itemProps, machine, props, splitItemProps, splitProps };
199
+ export { type RadioGroupApi as Api, type ElementIds, type ItemProps, type ItemState, type RadioGroupProps as Props, type RadioGroupService as Service, type ValueChangeDetails, anatomy, connect, itemProps, machine, props, splitItemProps, splitProps };