@yamada-ui/segmented-control 1.0.42-next-20241005220055 → 1.0.42-next-20241008193728

Sign up to get free protection for your applications and to get access to all the features.
Files changed (12) hide show
  1. package/dist/{chunk-LYUWFTFJ.mjs → chunk-AVVQKQV6.mjs} +58 -60
  2. package/dist/chunk-AVVQKQV6.mjs.map +1 -0
  3. package/dist/index.js +54 -56
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +1 -1
  6. package/dist/segmented-control.d.mts +17 -17
  7. package/dist/segmented-control.d.ts +17 -17
  8. package/dist/segmented-control.js +54 -56
  9. package/dist/segmented-control.js.map +1 -1
  10. package/dist/segmented-control.mjs +1 -1
  11. package/package.json +7 -7
  12. package/dist/chunk-LYUWFTFJ.mjs.map +0 -1
package/dist/{chunk-LYUWFTFJ.mjs → chunk-AVVQKQV6.mjs} RENAMED
@@ -2,10 +2,10 @@
2
2
 
3
3
  // src/segmented-control.tsx
4
4
  import {
5
- ui,
6
5
  forwardRef,
7
- useComponentMultiStyle,
8
- omitThemeProps
6
+ omitThemeProps,
7
+ ui,
8
+ useComponentMultiStyle
9
9
  } from "@yamada-ui/core";
10
10
  import { LayoutGroup, motion } from "@yamada-ui/motion";
11
11
  import { useControllableState } from "@yamada-ui/use-controllable-state";
@@ -24,10 +24,10 @@ import {
24
24
  } from "@yamada-ui/utils";
25
25
  import { useCallback, useEffect, useId, useRef, useState } from "react";
26
26
  import { jsx, jsxs } from "react/jsx-runtime";
27
- var { DescendantsContextProvider, useDescendants, useDescendant } = createDescendant();
27
+ var { DescendantsContextProvider, useDescendant, useDescendants } = createDescendant();
28
28
  var [SegmentedControlProvider, useSegmentedControl] = createContext({
29
- strict: false,
30
- name: "SegmentedControlContext"
29
+ name: "SegmentedControlContext",
30
+ errorMessage: `useSegmentedControl returned is 'undefined'. Seems you forgot to wrap the components in "<SegmentedControl />"`
31
31
  });
32
32
  var SegmentedControl = forwardRef(
33
33
  (props, ref) => {
@@ -36,15 +36,15 @@ var SegmentedControl = forwardRef(
36
36
  props
37
37
  );
38
38
  let {
39
- className,
40
39
  id,
41
40
  name,
42
- isReadOnly,
43
- isDisabled,
41
+ className,
44
42
  children,
45
- items = [],
46
- value,
47
43
  defaultValue,
44
+ isDisabled,
45
+ isReadOnly,
46
+ items = [],
47
+ value: valueProp,
48
48
  onChange: onChangeProp,
49
49
  ...rest
50
50
  } = omitThemeProps(mergedProps);
@@ -56,9 +56,9 @@ var SegmentedControl = forwardRef(
56
56
  const [focusedIndex, setFocusedIndex] = useState(-1);
57
57
  const [isFocusVisible, setIsFocusVisible] = useState(false);
58
58
  const containerRef = useRef(null);
59
- const [selectedValue, setSelectedValue] = useControllableState({
60
- value,
59
+ const [value, setValue] = useControllableState({
61
60
  defaultValue,
61
+ value: valueProp,
62
62
  onChange: onChangeRef
63
63
  });
64
64
  const onChange = useCallback(
@@ -67,9 +67,9 @@ var SegmentedControl = forwardRef(
67
67
  ev.preventDefault();
68
68
  return;
69
69
  }
70
- setSelectedValue(ev.target.value);
70
+ setValue(ev.target.value);
71
71
  },
72
- [isDisabled, isReadOnly, setSelectedValue]
72
+ [isDisabled, isReadOnly, setValue]
73
73
  );
74
74
  const onFocus = useCallback(
75
75
  (index, skip) => {
@@ -88,8 +88,8 @@ var SegmentedControl = forwardRef(
88
88
  (props2 = {}, ref2 = null) => ({
89
89
  ...rest,
90
90
  ...props2,
91
- ref: mergeRefs(containerRef, ref2),
92
91
  id,
92
+ ref: mergeRefs(containerRef, ref2),
93
93
  "aria-disabled": ariaAttr(isDisabled),
94
94
  "data-readonly": dataAttr(isReadOnly),
95
95
  onBlur: handlerAll(props2.onBlur, onBlur)
@@ -106,38 +106,38 @@ var SegmentedControl = forwardRef(
106
106
  var _a, _b, _c, _d;
107
107
  const disabled = (_b = (_a = props2.disabled) != null ? _a : isDisabledProp) != null ? _b : isDisabled;
108
108
  const readOnly = (_d = (_c = props2.readOnly) != null ? _c : isReadOnlyProp) != null ? _d : isReadOnly;
109
- const checked = props2.value === selectedValue;
109
+ const checked = props2.value === value;
110
110
  return {
111
111
  ...props2,
112
- ref: ref2,
113
112
  id: `${id}-${index}`,
113
+ ref: ref2,
114
114
  type: "radio",
115
115
  name,
116
- disabled: disabled || readOnly,
117
- readOnly,
118
- checked,
119
- "aria-disabled": ariaAttr(disabled),
120
- "data-readonly": dataAttr(readOnly),
121
- "data-checked": dataAttr(checked),
122
- "data-focus": dataAttr(index === focusedIndex),
123
116
  style: {
124
117
  border: "0px",
125
118
  clip: "rect(0px, 0px, 0px, 0px)",
126
119
  height: "1px",
127
- width: "1px",
128
120
  margin: "-1px",
129
- padding: "0px",
130
121
  overflow: "hidden",
122
+ padding: "0px",
123
+ position: "absolute",
131
124
  whiteSpace: "nowrap",
132
- position: "absolute"
125
+ width: "1px"
133
126
  },
127
+ "aria-disabled": ariaAttr(disabled),
128
+ "data-checked": dataAttr(checked),
129
+ "data-focus": dataAttr(index === focusedIndex),
130
+ "data-readonly": dataAttr(readOnly),
131
+ checked,
132
+ disabled: disabled || readOnly,
133
+ readOnly,
134
134
  onChange: handlerAll(
135
135
  props2.onChange,
136
136
  (ev) => !disabled && !readOnly ? onChange(ev) : {}
137
137
  )
138
138
  };
139
139
  },
140
- [isDisabled, isReadOnly, selectedValue, id, name, focusedIndex, onChange]
140
+ [isDisabled, isReadOnly, value, id, name, focusedIndex, onChange]
141
141
  );
142
142
  const getLabelProps = useCallback(
143
143
  ({
@@ -149,44 +149,37 @@ var SegmentedControl = forwardRef(
149
149
  var _a, _b, _c, _d;
150
150
  const disabled = (_b = (_a = props2.disabled) != null ? _a : isDisabledProp) != null ? _b : isDisabled;
151
151
  const readOnly = (_d = (_c = props2.readOnly) != null ? _c : isReadOnlyProp) != null ? _d : isReadOnly;
152
- const checked = props2.value === selectedValue;
152
+ const checked = props2.value === value;
153
153
  const focused = index === focusedIndex;
154
154
  return {
155
155
  ...props2,
156
156
  ref: ref2,
157
157
  "aria-disabled": ariaAttr(disabled),
158
- "data-readonly": dataAttr(readOnly),
159
158
  "data-checked": dataAttr(checked),
160
159
  "data-focus": dataAttr(focused),
161
160
  "data-focus-visible": dataAttr(focused && isFocusVisible),
161
+ "data-readonly": dataAttr(readOnly),
162
162
  onFocus: handlerAll(
163
163
  props2.onFocus,
164
164
  () => onFocus(index, disabled || readOnly || false)
165
165
  ),
166
166
  ...disabled || readOnly ? {
167
- _hover: {},
168
167
  _active: {},
169
168
  _focus: {},
170
- _invalid: {},
171
- _focusVisible: {}
169
+ _focusVisible: {},
170
+ _hover: {},
171
+ _invalid: {}
172
172
  } : {}
173
173
  };
174
174
  },
175
- [
176
- focusedIndex,
177
- isDisabled,
178
- isFocusVisible,
179
- isReadOnly,
180
- onFocus,
181
- selectedValue
182
- ]
175
+ [focusedIndex, isDisabled, isFocusVisible, isReadOnly, onFocus, value]
183
176
  );
184
177
  useEffect(() => {
185
178
  return trackFocusVisible(setIsFocusVisible);
186
179
  }, []);
187
180
  const css = {
188
- display: "inline-flex",
189
181
  alignItems: "center",
182
+ display: "inline-flex",
190
183
  ...styles.container
191
184
  };
192
185
  const validChildren = getValidChildren(children);
@@ -196,21 +189,21 @@ var SegmentedControl = forwardRef(
196
189
  } else {
197
190
  computedChildren = validChildren;
198
191
  }
199
- if (selectedValue == null && defaultValue == null) {
192
+ if (value == null && defaultValue == null) {
200
193
  for (const child of computedChildren) {
201
194
  if (child.type !== SegmentedControlButton) {
202
195
  if (child.type.displayName !== SegmentedControlButton.displayName)
203
196
  continue;
204
197
  }
205
198
  const value2 = child.props.value;
206
- setSelectedValue(value2);
199
+ setValue(value2);
207
200
  break;
208
201
  }
209
202
  }
210
203
  return /* @__PURE__ */ jsx(DescendantsContextProvider, { value: descendants, children: /* @__PURE__ */ jsx(
211
204
  SegmentedControlProvider,
212
205
  {
213
- value: { getInputProps, getLabelProps, styles, selectedValue },
206
+ value: { styles, value, getInputProps, getLabelProps },
214
207
  children: /* @__PURE__ */ jsx(LayoutGroup, { id, children: /* @__PURE__ */ jsx(
215
208
  ui.div,
216
209
  {
@@ -229,39 +222,44 @@ SegmentedControl.__ui__ = "SegmentedControl";
229
222
  var SegmentedControlButton = forwardRef(
230
223
  ({
231
224
  className,
225
+ children,
232
226
  disabled,
233
- readOnly,
234
227
  isDisabled,
235
228
  isReadOnly,
229
+ readOnly,
236
230
  value,
237
- onChange,
238
- children,
239
231
  motionProps,
232
+ onChange,
240
233
  ...rest
241
234
  }, ref) => {
242
235
  const [, isMounted] = useIsMounted({ rerender: true });
243
- const { selectedValue, getInputProps, getLabelProps, styles } = useSegmentedControl();
236
+ const {
237
+ styles,
238
+ value: selectedValue,
239
+ getInputProps,
240
+ getLabelProps
241
+ } = useSegmentedControl();
244
242
  const { index, register } = useDescendant({
245
243
  disabled: isDisabled || isReadOnly
246
244
  });
247
245
  const props = {
248
- index,
249
- value,
250
246
  disabled,
251
- readOnly,
247
+ index,
252
248
  isDisabled,
253
- isReadOnly
249
+ isReadOnly,
250
+ readOnly,
251
+ value
254
252
  };
255
253
  const css = {
256
- position: "relative",
254
+ alignItems: "center",
257
255
  cursor: "pointer",
258
- flex: "1 1 0%",
259
256
  display: "inline-flex",
257
+ flex: "1 1 0%",
260
258
  justifyContent: "center",
261
- alignItems: "center",
259
+ position: "relative",
262
260
  ...styles.button
263
261
  };
264
- const isSelected = selectedValue === value;
262
+ const isSelected = value === selectedValue;
265
263
  return /* @__PURE__ */ jsxs(
266
264
  ui.label,
267
265
  {
@@ -292,9 +290,9 @@ var SegmentedControlCursor = ({
292
290
  }) => {
293
291
  const { styles } = useSegmentedControl();
294
292
  const css = {
293
+ h: "100%",
295
294
  position: "absolute",
296
295
  w: "100%",
297
- h: "100%",
298
296
  ...styles.cursor
299
297
  };
300
298
  return /* @__PURE__ */ jsx(
@@ -321,4 +319,4 @@ export {
321
319
  SegmentedControl,
322
320
  SegmentedControlButton
323
321
  };
324
- //# sourceMappingURL=chunk-LYUWFTFJ.mjs.map
322
+ //# sourceMappingURL=chunk-AVVQKQV6.mjs.map
package/dist/chunk-AVVQKQV6.mjs.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/segmented-control.tsx"],"sourcesContent":["import type {\n CSSUIObject,\n FC,\n HTMLProps,\n HTMLUIProps,\n PropGetter,\n RequiredPropGetter,\n ThemeProps,\n} from \"@yamada-ui/core\"\nimport type { MotionProps } from \"@yamada-ui/motion\"\nimport type {\n ChangeEvent,\n ChangeEventHandler,\n FocusEventHandler,\n ReactElement,\n} from \"react\"\nimport {\n forwardRef,\n omitThemeProps,\n ui,\n useComponentMultiStyle,\n} from \"@yamada-ui/core\"\nimport { LayoutGroup, motion } from \"@yamada-ui/motion\"\nimport { useControllableState } from \"@yamada-ui/use-controllable-state\"\nimport { createDescendant } from \"@yamada-ui/use-descendant\"\nimport { trackFocusVisible } from \"@yamada-ui/use-focus-visible\"\nimport {\n ariaAttr,\n createContext,\n cx,\n dataAttr,\n getValidChildren,\n handlerAll,\n mergeRefs,\n useCallbackRef,\n useIsMounted,\n} from \"@yamada-ui/utils\"\nimport { useCallback, useEffect, useId, useRef, useState } from \"react\"\n\nexport interface SegmentedControlItem extends SegmentedControlButtonProps {\n label?: string\n}\n\nconst { DescendantsContextProvider, useDescendant, useDescendants } =\n createDescendant<HTMLButtonElement>()\n\ninterface SegmentedControlContext {\n styles: { [key: string]: CSSUIObject | undefined }\n value: string\n getInputProps: RequiredPropGetter<\n {\n index: number\n isDisabled?: boolean\n isReadOnly?: boolean\n } & HTMLProps<\"input\">,\n HTMLProps<\"input\">\n >\n getLabelProps: RequiredPropGetter<\n {\n index: number\n value: string\n disabled?: boolean\n isDisabled?: boolean\n isReadOnly?: boolean\n readOnly?: boolean\n } & HTMLProps<\"label\">,\n HTMLProps<\"label\">\n >\n}\n\nconst [SegmentedControlProvider, useSegmentedControl] =\n createContext<SegmentedControlContext>({\n name: \"SegmentedControlContext\",\n errorMessage: `useSegmentedControl returned is 'undefined'. Seems you forgot to wrap the components in \"<SegmentedControl />\"`,\n })\n\ninterface SegmentedControlOptions {\n /**\n * The HTML `name` attribute used for forms.\n */\n name?: string\n /**\n * The initial value of the segmented control.\n */\n defaultValue?: string\n /**\n * If `true`, the segmented control will be disabled.\n *\n * @default false\n */\n isDisabled?: boolean\n /**\n * If `true`, the segmented control will be readonly.\n *\n * @default false\n */\n isReadOnly?: boolean\n /**\n * If provided, generate segmented control buttons but based on items.\n *\n * @default '[]'\n */\n items?: SegmentedControlItem[]\n /**\n * The value of the segmented control.\n */\n value?: string\n /**\n * The callback fired when any children radio is checked or unchecked.\n */\n onChange?: (value: string) => void\n}\n\nexport interface SegmentedControlProps\n extends Omit<HTMLUIProps, \"defaultValue\" | \"onChange\" | \"value\">,\n ThemeProps<\"SegmentedControl\">,\n SegmentedControlOptions {}\n\n/**\n * `SegmentedControl` is a component used for allowing users to select one option from multiple choices.\n *\n * @see Docs https://yamada-ui.com/components/forms/segmented-control\n */\nexport const SegmentedControl = forwardRef<SegmentedControlProps, \"div\">(\n (props, ref) => {\n const [styles, mergedProps] = useComponentMultiStyle(\n \"SegmentedControl\",\n props,\n )\n let {\n id,\n name,\n className,\n children,\n defaultValue,\n isDisabled,\n isReadOnly,\n items = [],\n value: valueProp,\n onChange: onChangeProp,\n ...rest\n } = omitThemeProps(mergedProps)\n const uuid = useId()\n\n id ??= uuid\n name ??= `segmented-control-${uuid}`\n\n const onChangeRef = useCallbackRef(onChangeProp)\n\n const descendants = useDescendants()\n\n const [focusedIndex, setFocusedIndex] = useState<number>(-1)\n const [isFocusVisible, setIsFocusVisible] = useState<boolean>(false)\n const containerRef = useRef<HTMLDivElement>(null)\n\n const [value, setValue] = useControllableState({\n defaultValue,\n value: valueProp,\n onChange: onChangeRef,\n })\n\n const onChange = useCallback(\n (ev: ChangeEvent<HTMLInputElement>) => {\n if (isDisabled || isReadOnly) {\n ev.preventDefault()\n\n return\n }\n\n setValue(ev.target.value)\n },\n [isDisabled, isReadOnly, setValue],\n )\n\n const onFocus = useCallback(\n (index: number, skip: boolean) => {\n if (isDisabled) return\n\n if (skip) {\n const next = descendants.enabledNextValue(index)\n\n if (next) setFocusedIndex(next.index)\n } else {\n setFocusedIndex(index)\n }\n },\n [descendants, isDisabled],\n )\n\n const onBlur = useCallback(() => setFocusedIndex(-1), [])\n\n const getContainerProps: PropGetter = useCallback(\n (props = {}, ref = null) => ({\n ...rest,\n ...props,\n id,\n ref: mergeRefs(containerRef, ref),\n \"aria-disabled\": ariaAttr(isDisabled),\n \"data-readonly\": dataAttr(isReadOnly),\n onBlur: handlerAll(props.onBlur, onBlur),\n }),\n [id, isDisabled, isReadOnly, onBlur, rest],\n )\n\n const getInputProps: RequiredPropGetter<\n {\n index: number\n isDisabled?: boolean\n isReadOnly?: boolean\n } & HTMLProps<\"input\">,\n HTMLUIProps<\"input\">\n > = useCallback(\n (\n {\n index,\n isDisabled: isDisabledProp,\n isReadOnly: isReadOnlyProp,\n ...props\n },\n ref = null,\n ) => {\n const disabled = props.disabled ?? isDisabledProp ?? isDisabled\n const readOnly = props.readOnly ?? isReadOnlyProp ?? isReadOnly\n const checked = props.value === value\n\n return {\n ...props,\n id: `${id}-${index}`,\n ref,\n type: \"radio\",\n name,\n style: {\n border: \"0px\",\n clip: \"rect(0px, 0px, 0px, 0px)\",\n height: \"1px\",\n margin: \"-1px\",\n overflow: \"hidden\",\n padding: \"0px\",\n position: \"absolute\",\n whiteSpace: \"nowrap\",\n width: \"1px\",\n },\n \"aria-disabled\": ariaAttr(disabled),\n \"data-checked\": dataAttr(checked),\n \"data-focus\": dataAttr(index === focusedIndex),\n \"data-readonly\": dataAttr(readOnly),\n checked,\n disabled: disabled || readOnly,\n readOnly,\n onChange: handlerAll(props.onChange, (ev) =>\n !disabled && !readOnly\n ? onChange(ev as ChangeEvent<HTMLInputElement>)\n : {},\n ),\n }\n },\n [isDisabled, isReadOnly, value, id, name, focusedIndex, onChange],\n )\n\n const getLabelProps: RequiredPropGetter<\n {\n index: number\n value: string\n disabled?: boolean\n isDisabled?: boolean\n isReadOnly?: boolean\n readOnly?: boolean\n } & HTMLProps<\"label\">,\n HTMLProps<\"label\">\n > = useCallback(\n (\n {\n index,\n isDisabled: isDisabledProp,\n isReadOnly: isReadOnlyProp,\n ...props\n },\n ref = null,\n ) => {\n const disabled = props.disabled ?? isDisabledProp ?? isDisabled\n const readOnly = props.readOnly ?? isReadOnlyProp ?? isReadOnly\n const checked = props.value === value\n const focused = index === focusedIndex\n\n return {\n ...props,\n ref,\n \"aria-disabled\": ariaAttr(disabled),\n \"data-checked\": dataAttr(checked),\n \"data-focus\": dataAttr(focused),\n \"data-focus-visible\": dataAttr(focused && isFocusVisible),\n \"data-readonly\": dataAttr(readOnly),\n onFocus: handlerAll(\n props.onFocus as unknown as FocusEventHandler<HTMLLabelElement>,\n () => onFocus(index, disabled || readOnly || false),\n ),\n ...(disabled || readOnly\n ? {\n _active: {},\n _focus: {},\n _focusVisible: {},\n _hover: {},\n _invalid: {},\n }\n : {}),\n }\n },\n [focusedIndex, isDisabled, isFocusVisible, isReadOnly, onFocus, value],\n )\n\n useEffect(() => {\n return trackFocusVisible(setIsFocusVisible)\n }, [])\n\n const css: CSSUIObject = {\n alignItems: \"center\",\n display: \"inline-flex\",\n ...styles.container,\n }\n\n const validChildren = getValidChildren(children)\n let computedChildren: ReactElement[] = []\n\n if (!validChildren.length && items.length) {\n computedChildren = items.map(({ label, value, ...props }, i) => (\n <SegmentedControlButton key={i} value={value} {...props}>\n {label}\n </SegmentedControlButton>\n ))\n } else {\n computedChildren = validChildren\n }\n\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n if (value == null && defaultValue == null) {\n for (const child of computedChildren) {\n if (child.type !== SegmentedControlButton)\n if (\n (child.type as any).displayName !==\n SegmentedControlButton.displayName\n )\n continue\n\n const value = child.props.value\n\n setValue(value)\n\n break\n }\n }\n\n return (\n <DescendantsContextProvider value={descendants}>\n <SegmentedControlProvider\n value={{ styles, value, getInputProps, getLabelProps }}\n >\n <LayoutGroup id={id}>\n <ui.div\n {...getContainerProps({}, ref)}\n className={cx(\"ui-segmented-control\", className)}\n __css={css}\n >\n {computedChildren}\n </ui.div>\n </LayoutGroup>\n </SegmentedControlProvider>\n </DescendantsContextProvider>\n )\n },\n)\n\nSegmentedControl.displayName = \"SegmentedControl\"\nSegmentedControl.__ui__ = \"SegmentedControl\"\n\ninterface SegmentedControlButtonOptions {\n /**\n * The value of the segmented control button.\n */\n value: string\n /**\n * Props for motion component.\n */\n motionProps?: MotionProps\n /**\n * The callback fired when any children radio is checked or unchecked.\n */\n onChange?: ChangeEventHandler<HTMLInputElement>\n}\n\nexport interface SegmentedControlButtonProps\n extends Omit<HTMLUIProps<\"label\">, \"onChange\">,\n Pick<SegmentedControlProps, \"isDisabled\" | \"isReadOnly\">,\n SegmentedControlButtonOptions {}\n\nexport const SegmentedControlButton = forwardRef<\n SegmentedControlButtonProps,\n \"input\"\n>(\n (\n {\n className,\n children,\n disabled,\n isDisabled,\n isReadOnly,\n readOnly,\n value,\n motionProps,\n onChange,\n ...rest\n },\n ref,\n ) => {\n const [, isMounted] = useIsMounted({ rerender: true })\n const {\n styles,\n value: selectedValue,\n getInputProps,\n getLabelProps,\n } = useSegmentedControl()\n\n const { index, register } = useDescendant({\n disabled: isDisabled || isReadOnly,\n })\n\n const props = {\n disabled,\n index,\n isDisabled,\n isReadOnly,\n readOnly,\n value,\n }\n\n const css: CSSUIObject = {\n alignItems: \"center\",\n cursor: \"pointer\",\n display: \"inline-flex\",\n flex: \"1 1 0%\",\n justifyContent: \"center\",\n position: \"relative\",\n ...styles.button,\n }\n\n const isSelected = value === selectedValue\n\n return (\n <ui.label\n {...getLabelProps(props)}\n className={cx(\"ui-segmented-control__button\", className)}\n __css={css}\n {...rest}\n >\n <ui.input\n {...getInputProps({ onChange, ...props }, mergeRefs(register, ref))}\n />\n {isSelected && isMounted ? (\n <SegmentedControlCursor {...motionProps} />\n ) : null}\n <ui.span zIndex=\"1\">{children}</ui.span>\n </ui.label>\n )\n },\n)\n\nSegmentedControlButton.displayName = \"SegmentedControlButton\"\nSegmentedControlButton.__ui__ = \"SegmentedControlButton\"\n\ninterface SegmentedControlCursorProps extends MotionProps {\n className?: string\n}\n\nconst SegmentedControlCursor: FC<SegmentedControlCursorProps> = ({\n className,\n transition,\n ...rest\n}) => {\n const { styles } = useSegmentedControl()\n\n const css: CSSUIObject = {\n h: \"100%\",\n position: \"absolute\",\n w: \"100%\",\n ...styles.cursor,\n }\n\n return (\n <motion.div\n className={cx(\"ui-segmented-control__cursor\", className)}\n layoutDependency={false}\n layoutId=\"cursor\"\n transition={{\n type: \"spring\",\n bounce: 0.15,\n duration: 0.4,\n ...transition,\n }}\n __css={css}\n {...rest}\n />\n )\n}\n\nSegmentedControlCursor.displayName = \"SegmentedControlCursor\"\nSegmentedControlCursor.__ui__ = \"SegmentedControlCursor\"\n"],"mappings":"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","names":["props","ref","value"]}
package/dist/index.js CHANGED
@@ -35,10 +35,10 @@ var import_use_focus_visible = require("@yamada-ui/use-focus-visible");
35
35
  var import_utils = require("@yamada-ui/utils");
36
36
  var import_react = require("react");
37
37
  var import_jsx_runtime = require("react/jsx-runtime");
38
- var { DescendantsContextProvider, useDescendants, useDescendant } = (0, import_use_descendant.createDescendant)();
38
+ var { DescendantsContextProvider, useDescendant, useDescendants } = (0, import_use_descendant.createDescendant)();
39
39
  var [SegmentedControlProvider, useSegmentedControl] = (0, import_utils.createContext)({
40
- strict: false,
41
- name: "SegmentedControlContext"
40
+ name: "SegmentedControlContext",
41
+ errorMessage: `useSegmentedControl returned is 'undefined'. Seems you forgot to wrap the components in "<SegmentedControl />"`
42
42
  });
43
43
  var SegmentedControl = (0, import_core.forwardRef)(
44
44
  (props, ref) => {
@@ -47,15 +47,15 @@ var SegmentedControl = (0, import_core.forwardRef)(
47
47
  props
48
48
  );
49
49
  let {
50
- className,
51
50
  id,
52
51
  name,
53
- isReadOnly,
54
- isDisabled,
52
+ className,
55
53
  children,
56
- items = [],
57
- value,
58
54
  defaultValue,
55
+ isDisabled,
56
+ isReadOnly,
57
+ items = [],
58
+ value: valueProp,
59
59
  onChange: onChangeProp,
60
60
  ...rest
61
61
  } = (0, import_core.omitThemeProps)(mergedProps);
@@ -67,9 +67,9 @@ var SegmentedControl = (0, import_core.forwardRef)(
67
67
  const [focusedIndex, setFocusedIndex] = (0, import_react.useState)(-1);
68
68
  const [isFocusVisible, setIsFocusVisible] = (0, import_react.useState)(false);
69
69
  const containerRef = (0, import_react.useRef)(null);
70
- const [selectedValue, setSelectedValue] = (0, import_use_controllable_state.useControllableState)({
71
- value,
70
+ const [value, setValue] = (0, import_use_controllable_state.useControllableState)({
72
71
  defaultValue,
72
+ value: valueProp,
73
73
  onChange: onChangeRef
74
74
  });
75
75
  const onChange = (0, import_react.useCallback)(
@@ -78,9 +78,9 @@ var SegmentedControl = (0, import_core.forwardRef)(
78
78
  ev.preventDefault();
79
79
  return;
80
80
  }
81
- setSelectedValue(ev.target.value);
81
+ setValue(ev.target.value);
82
82
  },
83
- [isDisabled, isReadOnly, setSelectedValue]
83
+ [isDisabled, isReadOnly, setValue]
84
84
  );
85
85
  const onFocus = (0, import_react.useCallback)(
86
86
  (index, skip) => {
@@ -99,8 +99,8 @@ var SegmentedControl = (0, import_core.forwardRef)(
99
99
  (props2 = {}, ref2 = null) => ({
100
100
  ...rest,
101
101
  ...props2,
102
- ref: (0, import_utils.mergeRefs)(containerRef, ref2),
103
102
  id,
103
+ ref: (0, import_utils.mergeRefs)(containerRef, ref2),
104
104
  "aria-disabled": (0, import_utils.ariaAttr)(isDisabled),
105
105
  "data-readonly": (0, import_utils.dataAttr)(isReadOnly),
106
106
  onBlur: (0, import_utils.handlerAll)(props2.onBlur, onBlur)
@@ -117,38 +117,38 @@ var SegmentedControl = (0, import_core.forwardRef)(
117
117
  var _a, _b, _c, _d;
118
118
  const disabled = (_b = (_a = props2.disabled) != null ? _a : isDisabledProp) != null ? _b : isDisabled;
119
119
  const readOnly = (_d = (_c = props2.readOnly) != null ? _c : isReadOnlyProp) != null ? _d : isReadOnly;
120
- const checked = props2.value === selectedValue;
120
+ const checked = props2.value === value;
121
121
  return {
122
122
  ...props2,
123
- ref: ref2,
124
123
  id: `${id}-${index}`,
124
+ ref: ref2,
125
125
  type: "radio",
126
126
  name,
127
- disabled: disabled || readOnly,
128
- readOnly,
129
- checked,
130
- "aria-disabled": (0, import_utils.ariaAttr)(disabled),
131
- "data-readonly": (0, import_utils.dataAttr)(readOnly),
132
- "data-checked": (0, import_utils.dataAttr)(checked),
133
- "data-focus": (0, import_utils.dataAttr)(index === focusedIndex),
134
127
  style: {
135
128
  border: "0px",
136
129
  clip: "rect(0px, 0px, 0px, 0px)",
137
130
  height: "1px",
138
- width: "1px",
139
131
  margin: "-1px",
140
- padding: "0px",
141
132
  overflow: "hidden",
133
+ padding: "0px",
134
+ position: "absolute",
142
135
  whiteSpace: "nowrap",
143
- position: "absolute"
136
+ width: "1px"
144
137
  },
138
+ "aria-disabled": (0, import_utils.ariaAttr)(disabled),
139
+ "data-checked": (0, import_utils.dataAttr)(checked),
140
+ "data-focus": (0, import_utils.dataAttr)(index === focusedIndex),
141
+ "data-readonly": (0, import_utils.dataAttr)(readOnly),
142
+ checked,
143
+ disabled: disabled || readOnly,
144
+ readOnly,
145
145
  onChange: (0, import_utils.handlerAll)(
146
146
  props2.onChange,
147
147
  (ev) => !disabled && !readOnly ? onChange(ev) : {}
148
148
  )
149
149
  };
150
150
  },
151
- [isDisabled, isReadOnly, selectedValue, id, name, focusedIndex, onChange]
151
+ [isDisabled, isReadOnly, value, id, name, focusedIndex, onChange]
152
152
  );
153
153
  const getLabelProps = (0, import_react.useCallback)(
154
154
  ({
@@ -160,44 +160,37 @@ var SegmentedControl = (0, import_core.forwardRef)(
160
160
  var _a, _b, _c, _d;
161
161
  const disabled = (_b = (_a = props2.disabled) != null ? _a : isDisabledProp) != null ? _b : isDisabled;
162
162
  const readOnly = (_d = (_c = props2.readOnly) != null ? _c : isReadOnlyProp) != null ? _d : isReadOnly;
163
- const checked = props2.value === selectedValue;
163
+ const checked = props2.value === value;
164
164
  const focused = index === focusedIndex;
165
165
  return {
166
166
  ...props2,
167
167
  ref: ref2,
168
168
  "aria-disabled": (0, import_utils.ariaAttr)(disabled),
169
- "data-readonly": (0, import_utils.dataAttr)(readOnly),
170
169
  "data-checked": (0, import_utils.dataAttr)(checked),
171
170
  "data-focus": (0, import_utils.dataAttr)(focused),
172
171
  "data-focus-visible": (0, import_utils.dataAttr)(focused && isFocusVisible),
172
+ "data-readonly": (0, import_utils.dataAttr)(readOnly),
173
173
  onFocus: (0, import_utils.handlerAll)(
174
174
  props2.onFocus,
175
175
  () => onFocus(index, disabled || readOnly || false)
176
176
  ),
177
177
  ...disabled || readOnly ? {
178
- _hover: {},
179
178
  _active: {},
180
179
  _focus: {},
181
- _invalid: {},
182
- _focusVisible: {}
180
+ _focusVisible: {},
181
+ _hover: {},
182
+ _invalid: {}
183
183
  } : {}
184
184
  };
185
185
  },
186
- [
187
- focusedIndex,
188
- isDisabled,
189
- isFocusVisible,
190
- isReadOnly,
191
- onFocus,
192
- selectedValue
193
- ]
186
+ [focusedIndex, isDisabled, isFocusVisible, isReadOnly, onFocus, value]
194
187
  );
195
188
  (0, import_react.useEffect)(() => {
196
189
  return (0, import_use_focus_visible.trackFocusVisible)(setIsFocusVisible);
197
190
  }, []);
198
191
  const css = {
199
- display: "inline-flex",
200
192
  alignItems: "center",
193
+ display: "inline-flex",
201
194
  ...styles.container
202
195
  };
203
196
  const validChildren = (0, import_utils.getValidChildren)(children);
@@ -207,21 +200,21 @@ var SegmentedControl = (0, import_core.forwardRef)(
207
200
  } else {
208
201
  computedChildren = validChildren;
209
202
  }
210
- if (selectedValue == null && defaultValue == null) {
203
+ if (value == null && defaultValue == null) {
211
204
  for (const child of computedChildren) {
212
205
  if (child.type !== SegmentedControlButton) {
213
206
  if (child.type.displayName !== SegmentedControlButton.displayName)
214
207
  continue;
215
208
  }
216
209
  const value2 = child.props.value;
217
- setSelectedValue(value2);
210
+ setValue(value2);
218
211
  break;
219
212
  }
220
213
  }
221
214
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DescendantsContextProvider, { value: descendants, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
222
215
  SegmentedControlProvider,
223
216
  {
224
- value: { getInputProps, getLabelProps, styles, selectedValue },
217
+ value: { styles, value, getInputProps, getLabelProps },
225
218
  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_motion.LayoutGroup, { id, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
226
219
  import_core.ui.div,
227
220
  {
@@ -240,39 +233,44 @@ SegmentedControl.__ui__ = "SegmentedControl";
240
233
  var SegmentedControlButton = (0, import_core.forwardRef)(
241
234
  ({
242
235
  className,
236
+ children,
243
237
  disabled,
244
- readOnly,
245
238
  isDisabled,
246
239
  isReadOnly,
240
+ readOnly,
247
241
  value,
248
- onChange,
249
- children,
250
242
  motionProps,
243
+ onChange,
251
244
  ...rest
252
245
  }, ref) => {
253
246
  const [, isMounted] = (0, import_utils.useIsMounted)({ rerender: true });
254
- const { selectedValue, getInputProps, getLabelProps, styles } = useSegmentedControl();
247
+ const {
248
+ styles,
249
+ value: selectedValue,
250
+ getInputProps,
251
+ getLabelProps
252
+ } = useSegmentedControl();
255
253
  const { index, register } = useDescendant({
256
254
  disabled: isDisabled || isReadOnly
257
255
  });
258
256
  const props = {
259
- index,
260
- value,
261
257
  disabled,
262
- readOnly,
258
+ index,
263
259
  isDisabled,
264
- isReadOnly
260
+ isReadOnly,
261
+ readOnly,
262
+ value
265
263
  };
266
264
  const css = {
267
- position: "relative",
265
+ alignItems: "center",
268
266
  cursor: "pointer",
269
- flex: "1 1 0%",
270
267
  display: "inline-flex",
268
+ flex: "1 1 0%",
271
269
  justifyContent: "center",
272
- alignItems: "center",
270
+ position: "relative",
273
271
  ...styles.button
274
272
  };
275
- const isSelected = selectedValue === value;
273
+ const isSelected = value === selectedValue;
276
274
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
277
275
  import_core.ui.label,
278
276
  {
@@ -303,9 +301,9 @@ var SegmentedControlCursor = ({
303
301
  }) => {
304
302
  const { styles } = useSegmentedControl();
305
303
  const css = {
304
+ h: "100%",
306
305
  position: "absolute",
307
306
  w: "100%",
308
- h: "100%",
309
307
  ...styles.cursor
310
308
  };
311
309
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/index.ts","../src/segmented-control.tsx"],"sourcesContent":["export { SegmentedControl, SegmentedControlButton } from \"./segmented-control\"\nexport type {\n SegmentedControlItem,\n SegmentedControlProps,\n SegmentedControlButtonProps,\n} from \"./segmented-control\"\n","import type {\n CSSUIObject,\n HTMLProps,\n HTMLUIProps,\n PropGetter,\n RequiredPropGetter,\n ThemeProps,\n} from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n FC,\n useComponentMultiStyle,\n omitThemeProps,\n} from \"@yamada-ui/core\"\nimport type { MotionProps } from \"@yamada-ui/motion\"\nimport { LayoutGroup, motion } from \"@yamada-ui/motion\"\nimport { useControllableState } from \"@yamada-ui/use-controllable-state\"\nimport { createDescendant } from \"@yamada-ui/use-descendant\"\nimport { trackFocusVisible } from \"@yamada-ui/use-focus-visible\"\nimport {\n ariaAttr,\n createContext,\n cx,\n dataAttr,\n getValidChildren,\n handlerAll,\n mergeRefs,\n useCallbackRef,\n useIsMounted,\n} from \"@yamada-ui/utils\"\nimport type {\n ChangeEvent,\n ChangeEventHandler,\n FocusEventHandler,\n ReactElement,\n} from \"react\"\nimport { useCallback, useEffect, useId, useRef, useState } from \"react\"\n\nexport interface SegmentedControlItem extends SegmentedControlButtonProps {\n label?: string\n}\n\nconst { DescendantsContextProvider, useDescendants, useDescendant } =\n createDescendant<HTMLButtonElement>()\n\ninterface SegmentedControlContext {\n selectedValue: string\n getInputProps: RequiredPropGetter<\n HTMLProps<\"input\"> & {\n index: number\n isDisabled?: boolean\n isReadOnly?: boolean\n },\n HTMLProps<\"input\">\n >\n getLabelProps: RequiredPropGetter<\n HTMLProps<\"label\"> & {\n value: string\n index: number\n isDisabled?: boolean\n isReadOnly?: boolean\n disabled?: boolean\n readOnly?: boolean\n },\n HTMLProps<\"label\">\n >\n styles: { [key: string]: CSSUIObject }\n}\n\nconst [SegmentedControlProvider, useSegmentedControl] =\n createContext<SegmentedControlContext>({\n strict: false,\n name: \"SegmentedControlContext\",\n })\n\ninterface SegmentedControlOptions {\n /**\n * The HTML `name` attribute used for forms.\n */\n name?: string\n /**\n * The value of the segmented control.\n */\n value?: string\n /**\n * The initial value of the segmented control.\n */\n defaultValue?: string\n /**\n * The callback fired when any children radio is checked or unchecked.\n */\n onChange?: (value: string) => void\n /**\n * If `true`, the segmented control will be readonly.\n *\n * @default false\n */\n isReadOnly?: boolean\n /**\n * If `true`, the segmented control will be disabled.\n *\n * @default false\n */\n isDisabled?: boolean\n /**\n * If provided, generate segmented control buttons but based on items.\n *\n * @default '[]'\n */\n items?: SegmentedControlItem[]\n}\n\nexport interface SegmentedControlProps\n extends Omit<HTMLUIProps, \"value\" | \"defaultValue\" | \"onChange\">,\n ThemeProps<\"SegmentedControl\">,\n SegmentedControlOptions {}\n\n/**\n * `SegmentedControl` is a component used for allowing users to select one option from multiple choices.\n *\n * @see Docs https://yamada-ui.com/components/forms/segmented-control\n */\nexport const SegmentedControl = forwardRef<SegmentedControlProps, \"div\">(\n (props, ref) => {\n const [styles, mergedProps] = useComponentMultiStyle(\n \"SegmentedControl\",\n props,\n )\n let {\n className,\n id,\n name,\n isReadOnly,\n isDisabled,\n children,\n items = [],\n value,\n defaultValue,\n onChange: onChangeProp,\n ...rest\n } = omitThemeProps(mergedProps)\n const uuid = useId()\n\n id ??= uuid\n name ??= `segmented-control-${uuid}`\n\n const onChangeRef = useCallbackRef(onChangeProp)\n\n const descendants = useDescendants()\n\n const [focusedIndex, setFocusedIndex] = useState<number>(-1)\n const [isFocusVisible, setIsFocusVisible] = useState<boolean>(false)\n const containerRef = useRef<HTMLDivElement>(null)\n\n const [selectedValue, setSelectedValue] = useControllableState({\n value,\n defaultValue,\n onChange: onChangeRef,\n })\n\n const onChange = useCallback(\n (ev: ChangeEvent<HTMLInputElement>) => {\n if (isDisabled || isReadOnly) {\n ev.preventDefault()\n\n return\n }\n\n setSelectedValue(ev.target.value)\n },\n [isDisabled, isReadOnly, setSelectedValue],\n )\n\n const onFocus = useCallback(\n (index: number, skip: boolean) => {\n if (isDisabled) return\n\n if (skip) {\n const next = descendants.enabledNextValue(index)\n\n if (next) setFocusedIndex(next.index)\n } else {\n setFocusedIndex(index)\n }\n },\n [descendants, isDisabled],\n )\n\n const onBlur = useCallback(() => setFocusedIndex(-1), [])\n\n const getContainerProps: PropGetter = useCallback(\n (props = {}, ref = null) => ({\n ...rest,\n ...props,\n ref: mergeRefs(containerRef, ref),\n id,\n \"aria-disabled\": ariaAttr(isDisabled),\n \"data-readonly\": dataAttr(isReadOnly),\n onBlur: handlerAll(props.onBlur, onBlur),\n }),\n [id, isDisabled, isReadOnly, onBlur, rest],\n )\n\n const getInputProps: RequiredPropGetter<\n HTMLProps<\"input\"> & {\n index: number\n isDisabled?: boolean\n isReadOnly?: boolean\n },\n HTMLUIProps<\"input\">\n > = useCallback(\n (\n {\n index,\n isDisabled: isDisabledProp,\n isReadOnly: isReadOnlyProp,\n ...props\n },\n ref = null,\n ) => {\n const disabled = props.disabled ?? isDisabledProp ?? isDisabled\n const readOnly = props.readOnly ?? isReadOnlyProp ?? isReadOnly\n const checked = props.value === selectedValue\n\n return {\n ...props,\n ref,\n id: `${id}-${index}`,\n type: \"radio\",\n name,\n disabled: disabled || readOnly,\n readOnly,\n checked,\n \"aria-disabled\": ariaAttr(disabled),\n \"data-readonly\": dataAttr(readOnly),\n \"data-checked\": dataAttr(checked),\n \"data-focus\": dataAttr(index === focusedIndex),\n style: {\n border: \"0px\",\n clip: \"rect(0px, 0px, 0px, 0px)\",\n height: \"1px\",\n width: \"1px\",\n margin: \"-1px\",\n padding: \"0px\",\n overflow: \"hidden\",\n whiteSpace: \"nowrap\",\n position: \"absolute\",\n },\n onChange: handlerAll(props.onChange, (ev) =>\n !disabled && !readOnly\n ? onChange(ev as ChangeEvent<HTMLInputElement>)\n : {},\n ),\n }\n },\n [isDisabled, isReadOnly, selectedValue, id, name, focusedIndex, onChange],\n )\n\n const getLabelProps: RequiredPropGetter<\n HTMLProps<\"label\"> & {\n value: string\n index: number\n isDisabled?: boolean\n isReadOnly?: boolean\n disabled?: boolean\n readOnly?: boolean\n },\n HTMLProps<\"label\">\n > = useCallback(\n (\n {\n index,\n isDisabled: isDisabledProp,\n isReadOnly: isReadOnlyProp,\n ...props\n },\n ref = null,\n ) => {\n const disabled = props.disabled ?? isDisabledProp ?? isDisabled\n const readOnly = props.readOnly ?? isReadOnlyProp ?? isReadOnly\n const checked = props.value === selectedValue\n const focused = index === focusedIndex\n\n return {\n ...props,\n ref,\n \"aria-disabled\": ariaAttr(disabled),\n \"data-readonly\": dataAttr(readOnly),\n \"data-checked\": dataAttr(checked),\n \"data-focus\": dataAttr(focused),\n \"data-focus-visible\": dataAttr(focused && isFocusVisible),\n onFocus: handlerAll(\n props.onFocus as unknown as FocusEventHandler<HTMLLabelElement>,\n () => onFocus(index, disabled || readOnly || false),\n ),\n ...(disabled || readOnly\n ? {\n _hover: {},\n _active: {},\n _focus: {},\n _invalid: {},\n _focusVisible: {},\n }\n : {}),\n }\n },\n [\n focusedIndex,\n isDisabled,\n isFocusVisible,\n isReadOnly,\n onFocus,\n selectedValue,\n ],\n )\n\n useEffect(() => {\n return trackFocusVisible(setIsFocusVisible)\n }, [])\n\n const css: CSSUIObject = {\n display: \"inline-flex\",\n alignItems: \"center\",\n ...styles.container,\n }\n\n const validChildren = getValidChildren(children)\n let computedChildren: ReactElement[] = []\n\n if (!validChildren.length && items.length) {\n computedChildren = items.map(({ label, value, ...props }, i) => (\n <SegmentedControlButton key={i} value={value} {...props}>\n {label}\n </SegmentedControlButton>\n ))\n } else {\n computedChildren = validChildren\n }\n\n if (selectedValue == null && defaultValue == null) {\n for (const child of computedChildren) {\n if (child.type !== SegmentedControlButton)\n if (\n (child.type as any).displayName !==\n SegmentedControlButton.displayName\n )\n continue\n\n const value = child.props.value\n\n setSelectedValue(value)\n\n break\n }\n }\n\n return (\n <DescendantsContextProvider value={descendants}>\n <SegmentedControlProvider\n value={{ getInputProps, getLabelProps, styles, selectedValue }}\n >\n <LayoutGroup id={id}>\n <ui.div\n {...getContainerProps({}, ref)}\n className={cx(\"ui-segmented-control\", className)}\n __css={css}\n >\n {computedChildren}\n </ui.div>\n </LayoutGroup>\n </SegmentedControlProvider>\n </DescendantsContextProvider>\n )\n },\n)\n\nSegmentedControl.displayName = \"SegmentedControl\"\nSegmentedControl.__ui__ = \"SegmentedControl\"\n\ninterface SegmentedControlButtonOptions {\n /**\n * The value of the segmented control button.\n */\n value: string\n /**\n * The callback fired when any children radio is checked or unchecked.\n */\n onChange?: ChangeEventHandler<HTMLInputElement>\n /**\n * Props for motion component.\n */\n motionProps?: MotionProps\n}\n\nexport interface SegmentedControlButtonProps\n extends Omit<HTMLUIProps<\"label\">, \"onChange\">,\n Pick<SegmentedControlProps, \"isDisabled\" | \"isReadOnly\">,\n SegmentedControlButtonOptions {}\n\nexport const SegmentedControlButton = forwardRef<\n SegmentedControlButtonProps,\n \"input\"\n>(\n (\n {\n className,\n disabled,\n readOnly,\n isDisabled,\n isReadOnly,\n value,\n onChange,\n children,\n motionProps,\n ...rest\n },\n ref,\n ) => {\n const [, isMounted] = useIsMounted({ rerender: true })\n const { selectedValue, getInputProps, getLabelProps, styles } =\n useSegmentedControl()\n\n const { index, register } = useDescendant({\n disabled: isDisabled || isReadOnly,\n })\n\n const props = {\n index,\n value,\n disabled,\n readOnly,\n isDisabled,\n isReadOnly,\n }\n\n const css: CSSUIObject = {\n position: \"relative\",\n cursor: \"pointer\",\n flex: \"1 1 0%\",\n display: \"inline-flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n ...styles.button,\n }\n\n const isSelected = selectedValue === value\n\n return (\n <ui.label\n {...getLabelProps(props)}\n className={cx(\"ui-segmented-control__button\", className)}\n __css={css}\n {...rest}\n >\n <ui.input\n {...getInputProps({ onChange, ...props }, mergeRefs(register, ref))}\n />\n {isSelected && isMounted ? (\n <SegmentedControlCursor {...motionProps} />\n ) : null}\n <ui.span zIndex=\"1\">{children}</ui.span>\n </ui.label>\n )\n },\n)\n\nSegmentedControlButton.displayName = \"SegmentedControlButton\"\nSegmentedControlButton.__ui__ = \"SegmentedControlButton\"\n\ninterface SegmentedControlCursorProps extends MotionProps {\n className?: string\n}\n\nconst SegmentedControlCursor: FC<SegmentedControlCursorProps> = ({\n className,\n transition,\n ...rest\n}) => {\n const { styles } = useSegmentedControl()\n\n const css: CSSUIObject = {\n position: \"absolute\",\n w: \"100%\",\n h: \"100%\",\n ...styles.cursor,\n }\n\n return (\n <motion.div\n className={cx(\"ui-segmented-control__cursor\", className)}\n layoutDependency={false}\n layoutId=\"cursor\"\n transition={{\n type: \"spring\",\n bounce: 0.15,\n duration: 0.4,\n ...transition,\n }}\n __css={css}\n {...rest}\n />\n )\n}\n\nSegmentedControlCursor.displayName = \"SegmentedControlCursor\"\nSegmentedControlCursor.__ui__ = \"SegmentedControlCursor\"\n"],"mappings":"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","names":["props","ref","value"]}
1
+ {"version":3,"sources":["../src/index.ts","../src/segmented-control.tsx"],"sourcesContent":["export { SegmentedControl, SegmentedControlButton } from \"./segmented-control\"\nexport type {\n SegmentedControlButtonProps,\n SegmentedControlItem,\n SegmentedControlProps,\n} from \"./segmented-control\"\n","import type {\n CSSUIObject,\n FC,\n HTMLProps,\n HTMLUIProps,\n PropGetter,\n RequiredPropGetter,\n ThemeProps,\n} from \"@yamada-ui/core\"\nimport type { MotionProps } from \"@yamada-ui/motion\"\nimport type {\n ChangeEvent,\n ChangeEventHandler,\n FocusEventHandler,\n ReactElement,\n} from \"react\"\nimport {\n forwardRef,\n omitThemeProps,\n ui,\n useComponentMultiStyle,\n} from \"@yamada-ui/core\"\nimport { LayoutGroup, motion } from \"@yamada-ui/motion\"\nimport { useControllableState } from \"@yamada-ui/use-controllable-state\"\nimport { createDescendant } from \"@yamada-ui/use-descendant\"\nimport { trackFocusVisible } from \"@yamada-ui/use-focus-visible\"\nimport {\n ariaAttr,\n createContext,\n cx,\n dataAttr,\n getValidChildren,\n handlerAll,\n mergeRefs,\n useCallbackRef,\n useIsMounted,\n} from \"@yamada-ui/utils\"\nimport { useCallback, useEffect, useId, useRef, useState } from \"react\"\n\nexport interface SegmentedControlItem extends SegmentedControlButtonProps {\n label?: string\n}\n\nconst { DescendantsContextProvider, useDescendant, useDescendants } =\n createDescendant<HTMLButtonElement>()\n\ninterface SegmentedControlContext {\n styles: { [key: string]: CSSUIObject | undefined }\n value: string\n getInputProps: RequiredPropGetter<\n {\n index: number\n isDisabled?: boolean\n isReadOnly?: boolean\n } & HTMLProps<\"input\">,\n HTMLProps<\"input\">\n >\n getLabelProps: RequiredPropGetter<\n {\n index: number\n value: string\n disabled?: boolean\n isDisabled?: boolean\n isReadOnly?: boolean\n readOnly?: boolean\n } & HTMLProps<\"label\">,\n HTMLProps<\"label\">\n >\n}\n\nconst [SegmentedControlProvider, useSegmentedControl] =\n createContext<SegmentedControlContext>({\n name: \"SegmentedControlContext\",\n errorMessage: `useSegmentedControl returned is 'undefined'. Seems you forgot to wrap the components in \"<SegmentedControl />\"`,\n })\n\ninterface SegmentedControlOptions {\n /**\n * The HTML `name` attribute used for forms.\n */\n name?: string\n /**\n * The initial value of the segmented control.\n */\n defaultValue?: string\n /**\n * If `true`, the segmented control will be disabled.\n *\n * @default false\n */\n isDisabled?: boolean\n /**\n * If `true`, the segmented control will be readonly.\n *\n * @default false\n */\n isReadOnly?: boolean\n /**\n * If provided, generate segmented control buttons but based on items.\n *\n * @default '[]'\n */\n items?: SegmentedControlItem[]\n /**\n * The value of the segmented control.\n */\n value?: string\n /**\n * The callback fired when any children radio is checked or unchecked.\n */\n onChange?: (value: string) => void\n}\n\nexport interface SegmentedControlProps\n extends Omit<HTMLUIProps, \"defaultValue\" | \"onChange\" | \"value\">,\n ThemeProps<\"SegmentedControl\">,\n SegmentedControlOptions {}\n\n/**\n * `SegmentedControl` is a component used for allowing users to select one option from multiple choices.\n *\n * @see Docs https://yamada-ui.com/components/forms/segmented-control\n */\nexport const SegmentedControl = forwardRef<SegmentedControlProps, \"div\">(\n (props, ref) => {\n const [styles, mergedProps] = useComponentMultiStyle(\n \"SegmentedControl\",\n props,\n )\n let {\n id,\n name,\n className,\n children,\n defaultValue,\n isDisabled,\n isReadOnly,\n items = [],\n value: valueProp,\n onChange: onChangeProp,\n ...rest\n } = omitThemeProps(mergedProps)\n const uuid = useId()\n\n id ??= uuid\n name ??= `segmented-control-${uuid}`\n\n const onChangeRef = useCallbackRef(onChangeProp)\n\n const descendants = useDescendants()\n\n const [focusedIndex, setFocusedIndex] = useState<number>(-1)\n const [isFocusVisible, setIsFocusVisible] = useState<boolean>(false)\n const containerRef = useRef<HTMLDivElement>(null)\n\n const [value, setValue] = useControllableState({\n defaultValue,\n value: valueProp,\n onChange: onChangeRef,\n })\n\n const onChange = useCallback(\n (ev: ChangeEvent<HTMLInputElement>) => {\n if (isDisabled || isReadOnly) {\n ev.preventDefault()\n\n return\n }\n\n setValue(ev.target.value)\n },\n [isDisabled, isReadOnly, setValue],\n )\n\n const onFocus = useCallback(\n (index: number, skip: boolean) => {\n if (isDisabled) return\n\n if (skip) {\n const next = descendants.enabledNextValue(index)\n\n if (next) setFocusedIndex(next.index)\n } else {\n setFocusedIndex(index)\n }\n },\n [descendants, isDisabled],\n )\n\n const onBlur = useCallback(() => setFocusedIndex(-1), [])\n\n const getContainerProps: PropGetter = useCallback(\n (props = {}, ref = null) => ({\n ...rest,\n ...props,\n id,\n ref: mergeRefs(containerRef, ref),\n \"aria-disabled\": ariaAttr(isDisabled),\n \"data-readonly\": dataAttr(isReadOnly),\n onBlur: handlerAll(props.onBlur, onBlur),\n }),\n [id, isDisabled, isReadOnly, onBlur, rest],\n )\n\n const getInputProps: RequiredPropGetter<\n {\n index: number\n isDisabled?: boolean\n isReadOnly?: boolean\n } & HTMLProps<\"input\">,\n HTMLUIProps<\"input\">\n > = useCallback(\n (\n {\n index,\n isDisabled: isDisabledProp,\n isReadOnly: isReadOnlyProp,\n ...props\n },\n ref = null,\n ) => {\n const disabled = props.disabled ?? isDisabledProp ?? isDisabled\n const readOnly = props.readOnly ?? isReadOnlyProp ?? isReadOnly\n const checked = props.value === value\n\n return {\n ...props,\n id: `${id}-${index}`,\n ref,\n type: \"radio\",\n name,\n style: {\n border: \"0px\",\n clip: \"rect(0px, 0px, 0px, 0px)\",\n height: \"1px\",\n margin: \"-1px\",\n overflow: \"hidden\",\n padding: \"0px\",\n position: \"absolute\",\n whiteSpace: \"nowrap\",\n width: \"1px\",\n },\n \"aria-disabled\": ariaAttr(disabled),\n \"data-checked\": dataAttr(checked),\n \"data-focus\": dataAttr(index === focusedIndex),\n \"data-readonly\": dataAttr(readOnly),\n checked,\n disabled: disabled || readOnly,\n readOnly,\n onChange: handlerAll(props.onChange, (ev) =>\n !disabled && !readOnly\n ? onChange(ev as ChangeEvent<HTMLInputElement>)\n : {},\n ),\n }\n },\n [isDisabled, isReadOnly, value, id, name, focusedIndex, onChange],\n )\n\n const getLabelProps: RequiredPropGetter<\n {\n index: number\n value: string\n disabled?: boolean\n isDisabled?: boolean\n isReadOnly?: boolean\n readOnly?: boolean\n } & HTMLProps<\"label\">,\n HTMLProps<\"label\">\n > = useCallback(\n (\n {\n index,\n isDisabled: isDisabledProp,\n isReadOnly: isReadOnlyProp,\n ...props\n },\n ref = null,\n ) => {\n const disabled = props.disabled ?? isDisabledProp ?? isDisabled\n const readOnly = props.readOnly ?? isReadOnlyProp ?? isReadOnly\n const checked = props.value === value\n const focused = index === focusedIndex\n\n return {\n ...props,\n ref,\n \"aria-disabled\": ariaAttr(disabled),\n \"data-checked\": dataAttr(checked),\n \"data-focus\": dataAttr(focused),\n \"data-focus-visible\": dataAttr(focused && isFocusVisible),\n \"data-readonly\": dataAttr(readOnly),\n onFocus: handlerAll(\n props.onFocus as unknown as FocusEventHandler<HTMLLabelElement>,\n () => onFocus(index, disabled || readOnly || false),\n ),\n ...(disabled || readOnly\n ? {\n _active: {},\n _focus: {},\n _focusVisible: {},\n _hover: {},\n _invalid: {},\n }\n : {}),\n }\n },\n [focusedIndex, isDisabled, isFocusVisible, isReadOnly, onFocus, value],\n )\n\n useEffect(() => {\n return trackFocusVisible(setIsFocusVisible)\n }, [])\n\n const css: CSSUIObject = {\n alignItems: \"center\",\n display: \"inline-flex\",\n ...styles.container,\n }\n\n const validChildren = getValidChildren(children)\n let computedChildren: ReactElement[] = []\n\n if (!validChildren.length && items.length) {\n computedChildren = items.map(({ label, value, ...props }, i) => (\n <SegmentedControlButton key={i} value={value} {...props}>\n {label}\n </SegmentedControlButton>\n ))\n } else {\n computedChildren = validChildren\n }\n\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n if (value == null && defaultValue == null) {\n for (const child of computedChildren) {\n if (child.type !== SegmentedControlButton)\n if (\n (child.type as any).displayName !==\n SegmentedControlButton.displayName\n )\n continue\n\n const value = child.props.value\n\n setValue(value)\n\n break\n }\n }\n\n return (\n <DescendantsContextProvider value={descendants}>\n <SegmentedControlProvider\n value={{ styles, value, getInputProps, getLabelProps }}\n >\n <LayoutGroup id={id}>\n <ui.div\n {...getContainerProps({}, ref)}\n className={cx(\"ui-segmented-control\", className)}\n __css={css}\n >\n {computedChildren}\n </ui.div>\n </LayoutGroup>\n </SegmentedControlProvider>\n </DescendantsContextProvider>\n )\n },\n)\n\nSegmentedControl.displayName = \"SegmentedControl\"\nSegmentedControl.__ui__ = \"SegmentedControl\"\n\ninterface SegmentedControlButtonOptions {\n /**\n * The value of the segmented control button.\n */\n value: string\n /**\n * Props for motion component.\n */\n motionProps?: MotionProps\n /**\n * The callback fired when any children radio is checked or unchecked.\n */\n onChange?: ChangeEventHandler<HTMLInputElement>\n}\n\nexport interface SegmentedControlButtonProps\n extends Omit<HTMLUIProps<\"label\">, \"onChange\">,\n Pick<SegmentedControlProps, \"isDisabled\" | \"isReadOnly\">,\n SegmentedControlButtonOptions {}\n\nexport const SegmentedControlButton = forwardRef<\n SegmentedControlButtonProps,\n \"input\"\n>(\n (\n {\n className,\n children,\n disabled,\n isDisabled,\n isReadOnly,\n readOnly,\n value,\n motionProps,\n onChange,\n ...rest\n },\n ref,\n ) => {\n const [, isMounted] = useIsMounted({ rerender: true })\n const {\n styles,\n value: selectedValue,\n getInputProps,\n getLabelProps,\n } = useSegmentedControl()\n\n const { index, register } = useDescendant({\n disabled: isDisabled || isReadOnly,\n })\n\n const props = {\n disabled,\n index,\n isDisabled,\n isReadOnly,\n readOnly,\n value,\n }\n\n const css: CSSUIObject = {\n alignItems: \"center\",\n cursor: \"pointer\",\n display: \"inline-flex\",\n flex: \"1 1 0%\",\n justifyContent: \"center\",\n position: \"relative\",\n ...styles.button,\n }\n\n const isSelected = value === selectedValue\n\n return (\n <ui.label\n {...getLabelProps(props)}\n className={cx(\"ui-segmented-control__button\", className)}\n __css={css}\n {...rest}\n >\n <ui.input\n {...getInputProps({ onChange, ...props }, mergeRefs(register, ref))}\n />\n {isSelected && isMounted ? (\n <SegmentedControlCursor {...motionProps} />\n ) : null}\n <ui.span zIndex=\"1\">{children}</ui.span>\n </ui.label>\n )\n },\n)\n\nSegmentedControlButton.displayName = \"SegmentedControlButton\"\nSegmentedControlButton.__ui__ = \"SegmentedControlButton\"\n\ninterface SegmentedControlCursorProps extends MotionProps {\n className?: string\n}\n\nconst SegmentedControlCursor: FC<SegmentedControlCursorProps> = ({\n className,\n transition,\n ...rest\n}) => {\n const { styles } = useSegmentedControl()\n\n const css: CSSUIObject = {\n h: \"100%\",\n position: \"absolute\",\n w: \"100%\",\n ...styles.cursor,\n }\n\n return (\n <motion.div\n className={cx(\"ui-segmented-control__cursor\", className)}\n layoutDependency={false}\n layoutId=\"cursor\"\n transition={{\n type: \"spring\",\n bounce: 0.15,\n duration: 0.4,\n ...transition,\n }}\n __css={css}\n {...rest}\n />\n )\n}\n\nSegmentedControlCursor.displayName = \"SegmentedControlCursor\"\nSegmentedControlCursor.__ui__ = \"SegmentedControlCursor\"\n"],"mappings":"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","names":["props","ref","value"]}
package/dist/index.mjs CHANGED
@@ -2,7 +2,7 @@
2
2
  import {
3
3
  SegmentedControl,
4
4
  SegmentedControlButton
5
- } from "./chunk-LYUWFTFJ.mjs";
5
+ } from "./chunk-AVVQKQV6.mjs";
6
6
  export {
7
7
  SegmentedControl,
8
8
  SegmentedControlButton
package/dist/segmented-control.d.mts CHANGED
@@ -11,38 +11,38 @@ interface SegmentedControlOptions {
11
11
  * The HTML `name` attribute used for forms.
12
12
  */
13
13
  name?: string;
14
- /**
15
- * The value of the segmented control.
16
- */
17
- value?: string;
18
14
  /**
19
15
  * The initial value of the segmented control.
20
16
  */
21
17
  defaultValue?: string;
22
18
  /**
23
- * The callback fired when any children radio is checked or unchecked.
24
- */
25
- onChange?: (value: string) => void;
26
- /**
27
- * If `true`, the segmented control will be readonly.
19
+ * If `true`, the segmented control will be disabled.
28
20
  *
29
21
  * @default false
30
22
  */
31
- isReadOnly?: boolean;
23
+ isDisabled?: boolean;
32
24
  /**
33
- * If `true`, the segmented control will be disabled.
25
+ * If `true`, the segmented control will be readonly.
34
26
  *
35
27
  * @default false
36
28
  */
37
- isDisabled?: boolean;
29
+ isReadOnly?: boolean;
38
30
  /**
39
31
  * If provided, generate segmented control buttons but based on items.
40
32
  *
41
33
  * @default '[]'
42
34
  */
43
35
  items?: SegmentedControlItem[];
36
+ /**
37
+ * The value of the segmented control.
38
+ */
39
+ value?: string;
40
+ /**
41
+ * The callback fired when any children radio is checked or unchecked.
42
+ */
43
+ onChange?: (value: string) => void;
44
44
  }
45
- interface SegmentedControlProps extends Omit<HTMLUIProps, "value" | "defaultValue" | "onChange">, ThemeProps<"SegmentedControl">, SegmentedControlOptions {
45
+ interface SegmentedControlProps extends Omit<HTMLUIProps, "defaultValue" | "onChange" | "value">, ThemeProps<"SegmentedControl">, SegmentedControlOptions {
46
46
  }
47
47
  /**
48
48
  * `SegmentedControl` is a component used for allowing users to select one option from multiple choices.
@@ -55,14 +55,14 @@ interface SegmentedControlButtonOptions {
55
55
  * The value of the segmented control button.
56
56
  */
57
57
  value: string;
58
- /**
59
- * The callback fired when any children radio is checked or unchecked.
60
- */
61
- onChange?: ChangeEventHandler<HTMLInputElement>;
62
58
  /**
63
59
  * Props for motion component.
64
60
  */
65
61
  motionProps?: MotionProps;
62
+ /**
63
+ * The callback fired when any children radio is checked or unchecked.
64
+ */
65
+ onChange?: ChangeEventHandler<HTMLInputElement>;
66
66
  }
67
67
  interface SegmentedControlButtonProps extends Omit<HTMLUIProps<"label">, "onChange">, Pick<SegmentedControlProps, "isDisabled" | "isReadOnly">, SegmentedControlButtonOptions {
68
68
  }
package/dist/segmented-control.d.ts CHANGED
@@ -11,38 +11,38 @@ interface SegmentedControlOptions {
11
11
  * The HTML `name` attribute used for forms.
12
12
  */
13
13
  name?: string;
14
- /**
15
- * The value of the segmented control.
16
- */
17
- value?: string;
18
14
  /**
19
15
  * The initial value of the segmented control.
20
16
  */
21
17
  defaultValue?: string;
22
18
  /**
23
- * The callback fired when any children radio is checked or unchecked.
24
- */
25
- onChange?: (value: string) => void;
26
- /**
27
- * If `true`, the segmented control will be readonly.
19
+ * If `true`, the segmented control will be disabled.
28
20
  *
29
21
  * @default false
30
22
  */
31
- isReadOnly?: boolean;
23
+ isDisabled?: boolean;
32
24
  /**
33
- * If `true`, the segmented control will be disabled.
25
+ * If `true`, the segmented control will be readonly.
34
26
  *
35
27
  * @default false
36
28
  */
37
- isDisabled?: boolean;
29
+ isReadOnly?: boolean;
38
30
  /**
39
31
  * If provided, generate segmented control buttons but based on items.
40
32
  *
41
33
  * @default '[]'
42
34
  */
43
35
  items?: SegmentedControlItem[];
36
+ /**
37
+ * The value of the segmented control.
38
+ */
39
+ value?: string;
40
+ /**
41
+ * The callback fired when any children radio is checked or unchecked.
42
+ */
43
+ onChange?: (value: string) => void;
44
44
  }
45
- interface SegmentedControlProps extends Omit<HTMLUIProps, "value" | "defaultValue" | "onChange">, ThemeProps<"SegmentedControl">, SegmentedControlOptions {
45
+ interface SegmentedControlProps extends Omit<HTMLUIProps, "defaultValue" | "onChange" | "value">, ThemeProps<"SegmentedControl">, SegmentedControlOptions {
46
46
  }
47
47
  /**
48
48
  * `SegmentedControl` is a component used for allowing users to select one option from multiple choices.
@@ -55,14 +55,14 @@ interface SegmentedControlButtonOptions {
55
55
  * The value of the segmented control button.
56
56
  */
57
57
  value: string;
58
- /**
59
- * The callback fired when any children radio is checked or unchecked.
60
- */
61
- onChange?: ChangeEventHandler<HTMLInputElement>;
62
58
  /**
63
59
  * Props for motion component.
64
60
  */
65
61
  motionProps?: MotionProps;
62
+ /**
63
+ * The callback fired when any children radio is checked or unchecked.
64
+ */
65
+ onChange?: ChangeEventHandler<HTMLInputElement>;
66
66
  }
67
67
  interface SegmentedControlButtonProps extends Omit<HTMLUIProps<"label">, "onChange">, Pick<SegmentedControlProps, "isDisabled" | "isReadOnly">, SegmentedControlButtonOptions {
68
68
  }
package/dist/segmented-control.js CHANGED
@@ -33,10 +33,10 @@ var import_use_focus_visible = require("@yamada-ui/use-focus-visible");
33
33
  var import_utils = require("@yamada-ui/utils");
34
34
  var import_react = require("react");
35
35
  var import_jsx_runtime = require("react/jsx-runtime");
36
- var { DescendantsContextProvider, useDescendants, useDescendant } = (0, import_use_descendant.createDescendant)();
36
+ var { DescendantsContextProvider, useDescendant, useDescendants } = (0, import_use_descendant.createDescendant)();
37
37
  var [SegmentedControlProvider, useSegmentedControl] = (0, import_utils.createContext)({
38
- strict: false,
39
- name: "SegmentedControlContext"
38
+ name: "SegmentedControlContext",
39
+ errorMessage: `useSegmentedControl returned is 'undefined'. Seems you forgot to wrap the components in "<SegmentedControl />"`
40
40
  });
41
41
  var SegmentedControl = (0, import_core.forwardRef)(
42
42
  (props, ref) => {
@@ -45,15 +45,15 @@ var SegmentedControl = (0, import_core.forwardRef)(
45
45
  props
46
46
  );
47
47
  let {
48
- className,
49
48
  id,
50
49
  name,
51
- isReadOnly,
52
- isDisabled,
50
+ className,
53
51
  children,
54
- items = [],
55
- value,
56
52
  defaultValue,
53
+ isDisabled,
54
+ isReadOnly,
55
+ items = [],
56
+ value: valueProp,
57
57
  onChange: onChangeProp,
58
58
  ...rest
59
59
  } = (0, import_core.omitThemeProps)(mergedProps);
@@ -65,9 +65,9 @@ var SegmentedControl = (0, import_core.forwardRef)(
65
65
  const [focusedIndex, setFocusedIndex] = (0, import_react.useState)(-1);
66
66
  const [isFocusVisible, setIsFocusVisible] = (0, import_react.useState)(false);
67
67
  const containerRef = (0, import_react.useRef)(null);
68
- const [selectedValue, setSelectedValue] = (0, import_use_controllable_state.useControllableState)({
69
- value,
68
+ const [value, setValue] = (0, import_use_controllable_state.useControllableState)({
70
69
  defaultValue,
70
+ value: valueProp,
71
71
  onChange: onChangeRef
72
72
  });
73
73
  const onChange = (0, import_react.useCallback)(
@@ -76,9 +76,9 @@ var SegmentedControl = (0, import_core.forwardRef)(
76
76
  ev.preventDefault();
77
77
  return;
78
78
  }
79
- setSelectedValue(ev.target.value);
79
+ setValue(ev.target.value);
80
80
  },
81
- [isDisabled, isReadOnly, setSelectedValue]
81
+ [isDisabled, isReadOnly, setValue]
82
82
  );
83
83
  const onFocus = (0, import_react.useCallback)(
84
84
  (index, skip) => {
@@ -97,8 +97,8 @@ var SegmentedControl = (0, import_core.forwardRef)(
97
97
  (props2 = {}, ref2 = null) => ({
98
98
  ...rest,
99
99
  ...props2,
100
- ref: (0, import_utils.mergeRefs)(containerRef, ref2),
101
100
  id,
101
+ ref: (0, import_utils.mergeRefs)(containerRef, ref2),
102
102
  "aria-disabled": (0, import_utils.ariaAttr)(isDisabled),
103
103
  "data-readonly": (0, import_utils.dataAttr)(isReadOnly),
104
104
  onBlur: (0, import_utils.handlerAll)(props2.onBlur, onBlur)
@@ -115,38 +115,38 @@ var SegmentedControl = (0, import_core.forwardRef)(
115
115
  var _a, _b, _c, _d;
116
116
  const disabled = (_b = (_a = props2.disabled) != null ? _a : isDisabledProp) != null ? _b : isDisabled;
117
117
  const readOnly = (_d = (_c = props2.readOnly) != null ? _c : isReadOnlyProp) != null ? _d : isReadOnly;
118
- const checked = props2.value === selectedValue;
118
+ const checked = props2.value === value;
119
119
  return {
120
120
  ...props2,
121
- ref: ref2,
122
121
  id: `${id}-${index}`,
122
+ ref: ref2,
123
123
  type: "radio",
124
124
  name,
125
- disabled: disabled || readOnly,
126
- readOnly,
127
- checked,
128
- "aria-disabled": (0, import_utils.ariaAttr)(disabled),
129
- "data-readonly": (0, import_utils.dataAttr)(readOnly),
130
- "data-checked": (0, import_utils.dataAttr)(checked),
131
- "data-focus": (0, import_utils.dataAttr)(index === focusedIndex),
132
125
  style: {
133
126
  border: "0px",
134
127
  clip: "rect(0px, 0px, 0px, 0px)",
135
128
  height: "1px",
136
- width: "1px",
137
129
  margin: "-1px",
138
- padding: "0px",
139
130
  overflow: "hidden",
131
+ padding: "0px",
132
+ position: "absolute",
140
133
  whiteSpace: "nowrap",
141
- position: "absolute"
134
+ width: "1px"
142
135
  },
136
+ "aria-disabled": (0, import_utils.ariaAttr)(disabled),
137
+ "data-checked": (0, import_utils.dataAttr)(checked),
138
+ "data-focus": (0, import_utils.dataAttr)(index === focusedIndex),
139
+ "data-readonly": (0, import_utils.dataAttr)(readOnly),
140
+ checked,
141
+ disabled: disabled || readOnly,
142
+ readOnly,
143
143
  onChange: (0, import_utils.handlerAll)(
144
144
  props2.onChange,
145
145
  (ev) => !disabled && !readOnly ? onChange(ev) : {}
146
146
  )
147
147
  };
148
148
  },
149
- [isDisabled, isReadOnly, selectedValue, id, name, focusedIndex, onChange]
149
+ [isDisabled, isReadOnly, value, id, name, focusedIndex, onChange]
150
150
  );
151
151
  const getLabelProps = (0, import_react.useCallback)(
152
152
  ({
@@ -158,44 +158,37 @@ var SegmentedControl = (0, import_core.forwardRef)(
158
158
  var _a, _b, _c, _d;
159
159
  const disabled = (_b = (_a = props2.disabled) != null ? _a : isDisabledProp) != null ? _b : isDisabled;
160
160
  const readOnly = (_d = (_c = props2.readOnly) != null ? _c : isReadOnlyProp) != null ? _d : isReadOnly;
161
- const checked = props2.value === selectedValue;
161
+ const checked = props2.value === value;
162
162
  const focused = index === focusedIndex;
163
163
  return {
164
164
  ...props2,
165
165
  ref: ref2,
166
166
  "aria-disabled": (0, import_utils.ariaAttr)(disabled),
167
- "data-readonly": (0, import_utils.dataAttr)(readOnly),
168
167
  "data-checked": (0, import_utils.dataAttr)(checked),
169
168
  "data-focus": (0, import_utils.dataAttr)(focused),
170
169
  "data-focus-visible": (0, import_utils.dataAttr)(focused && isFocusVisible),
170
+ "data-readonly": (0, import_utils.dataAttr)(readOnly),
171
171
  onFocus: (0, import_utils.handlerAll)(
172
172
  props2.onFocus,
173
173
  () => onFocus(index, disabled || readOnly || false)
174
174
  ),
175
175
  ...disabled || readOnly ? {
176
- _hover: {},
177
176
  _active: {},
178
177
  _focus: {},
179
- _invalid: {},
180
- _focusVisible: {}
178
+ _focusVisible: {},
179
+ _hover: {},
180
+ _invalid: {}
181
181
  } : {}
182
182
  };
183
183
  },
184
- [
185
- focusedIndex,
186
- isDisabled,
187
- isFocusVisible,
188
- isReadOnly,
189
- onFocus,
190
- selectedValue
191
- ]
184
+ [focusedIndex, isDisabled, isFocusVisible, isReadOnly, onFocus, value]
192
185
  );
193
186
  (0, import_react.useEffect)(() => {
194
187
  return (0, import_use_focus_visible.trackFocusVisible)(setIsFocusVisible);
195
188
  }, []);
196
189
  const css = {
197
- display: "inline-flex",
198
190
  alignItems: "center",
191
+ display: "inline-flex",
199
192
  ...styles.container
200
193
  };
201
194
  const validChildren = (0, import_utils.getValidChildren)(children);
@@ -205,21 +198,21 @@ var SegmentedControl = (0, import_core.forwardRef)(
205
198
  } else {
206
199
  computedChildren = validChildren;
207
200
  }
208
- if (selectedValue == null && defaultValue == null) {
201
+ if (value == null && defaultValue == null) {
209
202
  for (const child of computedChildren) {
210
203
  if (child.type !== SegmentedControlButton) {
211
204
  if (child.type.displayName !== SegmentedControlButton.displayName)
212
205
  continue;
213
206
  }
214
207
  const value2 = child.props.value;
215
- setSelectedValue(value2);
208
+ setValue(value2);
216
209
  break;
217
210
  }
218
211
  }
219
212
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DescendantsContextProvider, { value: descendants, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
220
213
  SegmentedControlProvider,
221
214
  {
222
- value: { getInputProps, getLabelProps, styles, selectedValue },
215
+ value: { styles, value, getInputProps, getLabelProps },
223
216
  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_motion.LayoutGroup, { id, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
224
217
  import_core.ui.div,
225
218
  {
@@ -238,39 +231,44 @@ SegmentedControl.__ui__ = "SegmentedControl";
238
231
  var SegmentedControlButton = (0, import_core.forwardRef)(
239
232
  ({
240
233
  className,
234
+ children,
241
235
  disabled,
242
- readOnly,
243
236
  isDisabled,
244
237
  isReadOnly,
238
+ readOnly,
245
239
  value,
246
- onChange,
247
- children,
248
240
  motionProps,
241
+ onChange,
249
242
  ...rest
250
243
  }, ref) => {
251
244
  const [, isMounted] = (0, import_utils.useIsMounted)({ rerender: true });
252
- const { selectedValue, getInputProps, getLabelProps, styles } = useSegmentedControl();
245
+ const {
246
+ styles,
247
+ value: selectedValue,
248
+ getInputProps,
249
+ getLabelProps
250
+ } = useSegmentedControl();
253
251
  const { index, register } = useDescendant({
254
252
  disabled: isDisabled || isReadOnly
255
253
  });
256
254
  const props = {
257
- index,
258
- value,
259
255
  disabled,
260
- readOnly,
256
+ index,
261
257
  isDisabled,
262
- isReadOnly
258
+ isReadOnly,
259
+ readOnly,
260
+ value
263
261
  };
264
262
  const css = {
265
- position: "relative",
263
+ alignItems: "center",
266
264
  cursor: "pointer",
267
- flex: "1 1 0%",
268
265
  display: "inline-flex",
266
+ flex: "1 1 0%",
269
267
  justifyContent: "center",
270
- alignItems: "center",
268
+ position: "relative",
271
269
  ...styles.button
272
270
  };
273
- const isSelected = selectedValue === value;
271
+ const isSelected = value === selectedValue;
274
272
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
275
273
  import_core.ui.label,
276
274
  {
@@ -301,9 +299,9 @@ var SegmentedControlCursor = ({
301
299
  }) => {
302
300
  const { styles } = useSegmentedControl();
303
301
  const css = {
302
+ h: "100%",
304
303
  position: "absolute",
305
304
  w: "100%",
306
- h: "100%",
307
305
  ...styles.cursor
308
306
  };
309
307
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
package/dist/segmented-control.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/segmented-control.tsx"],"sourcesContent":["import type {\n CSSUIObject,\n HTMLProps,\n HTMLUIProps,\n PropGetter,\n RequiredPropGetter,\n ThemeProps,\n} from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n FC,\n useComponentMultiStyle,\n omitThemeProps,\n} from \"@yamada-ui/core\"\nimport type { MotionProps } from \"@yamada-ui/motion\"\nimport { LayoutGroup, motion } from \"@yamada-ui/motion\"\nimport { useControllableState } from \"@yamada-ui/use-controllable-state\"\nimport { createDescendant } from \"@yamada-ui/use-descendant\"\nimport { trackFocusVisible } from \"@yamada-ui/use-focus-visible\"\nimport {\n ariaAttr,\n createContext,\n cx,\n dataAttr,\n getValidChildren,\n handlerAll,\n mergeRefs,\n useCallbackRef,\n useIsMounted,\n} from \"@yamada-ui/utils\"\nimport type {\n ChangeEvent,\n ChangeEventHandler,\n FocusEventHandler,\n ReactElement,\n} from \"react\"\nimport { useCallback, useEffect, useId, useRef, useState } from \"react\"\n\nexport interface SegmentedControlItem extends SegmentedControlButtonProps {\n label?: string\n}\n\nconst { DescendantsContextProvider, useDescendants, useDescendant } =\n createDescendant<HTMLButtonElement>()\n\ninterface SegmentedControlContext {\n selectedValue: string\n getInputProps: RequiredPropGetter<\n HTMLProps<\"input\"> & {\n index: number\n isDisabled?: boolean\n isReadOnly?: boolean\n },\n HTMLProps<\"input\">\n >\n getLabelProps: RequiredPropGetter<\n HTMLProps<\"label\"> & {\n value: string\n index: number\n isDisabled?: boolean\n isReadOnly?: boolean\n disabled?: boolean\n readOnly?: boolean\n },\n HTMLProps<\"label\">\n >\n styles: { [key: string]: CSSUIObject }\n}\n\nconst [SegmentedControlProvider, useSegmentedControl] =\n createContext<SegmentedControlContext>({\n strict: false,\n name: \"SegmentedControlContext\",\n })\n\ninterface SegmentedControlOptions {\n /**\n * The HTML `name` attribute used for forms.\n */\n name?: string\n /**\n * The value of the segmented control.\n */\n value?: string\n /**\n * The initial value of the segmented control.\n */\n defaultValue?: string\n /**\n * The callback fired when any children radio is checked or unchecked.\n */\n onChange?: (value: string) => void\n /**\n * If `true`, the segmented control will be readonly.\n *\n * @default false\n */\n isReadOnly?: boolean\n /**\n * If `true`, the segmented control will be disabled.\n *\n * @default false\n */\n isDisabled?: boolean\n /**\n * If provided, generate segmented control buttons but based on items.\n *\n * @default '[]'\n */\n items?: SegmentedControlItem[]\n}\n\nexport interface SegmentedControlProps\n extends Omit<HTMLUIProps, \"value\" | \"defaultValue\" | \"onChange\">,\n ThemeProps<\"SegmentedControl\">,\n SegmentedControlOptions {}\n\n/**\n * `SegmentedControl` is a component used for allowing users to select one option from multiple choices.\n *\n * @see Docs https://yamada-ui.com/components/forms/segmented-control\n */\nexport const SegmentedControl = forwardRef<SegmentedControlProps, \"div\">(\n (props, ref) => {\n const [styles, mergedProps] = useComponentMultiStyle(\n \"SegmentedControl\",\n props,\n )\n let {\n className,\n id,\n name,\n isReadOnly,\n isDisabled,\n children,\n items = [],\n value,\n defaultValue,\n onChange: onChangeProp,\n ...rest\n } = omitThemeProps(mergedProps)\n const uuid = useId()\n\n id ??= uuid\n name ??= `segmented-control-${uuid}`\n\n const onChangeRef = useCallbackRef(onChangeProp)\n\n const descendants = useDescendants()\n\n const [focusedIndex, setFocusedIndex] = useState<number>(-1)\n const [isFocusVisible, setIsFocusVisible] = useState<boolean>(false)\n const containerRef = useRef<HTMLDivElement>(null)\n\n const [selectedValue, setSelectedValue] = useControllableState({\n value,\n defaultValue,\n onChange: onChangeRef,\n })\n\n const onChange = useCallback(\n (ev: ChangeEvent<HTMLInputElement>) => {\n if (isDisabled || isReadOnly) {\n ev.preventDefault()\n\n return\n }\n\n setSelectedValue(ev.target.value)\n },\n [isDisabled, isReadOnly, setSelectedValue],\n )\n\n const onFocus = useCallback(\n (index: number, skip: boolean) => {\n if (isDisabled) return\n\n if (skip) {\n const next = descendants.enabledNextValue(index)\n\n if (next) setFocusedIndex(next.index)\n } else {\n setFocusedIndex(index)\n }\n },\n [descendants, isDisabled],\n )\n\n const onBlur = useCallback(() => setFocusedIndex(-1), [])\n\n const getContainerProps: PropGetter = useCallback(\n (props = {}, ref = null) => ({\n ...rest,\n ...props,\n ref: mergeRefs(containerRef, ref),\n id,\n \"aria-disabled\": ariaAttr(isDisabled),\n \"data-readonly\": dataAttr(isReadOnly),\n onBlur: handlerAll(props.onBlur, onBlur),\n }),\n [id, isDisabled, isReadOnly, onBlur, rest],\n )\n\n const getInputProps: RequiredPropGetter<\n HTMLProps<\"input\"> & {\n index: number\n isDisabled?: boolean\n isReadOnly?: boolean\n },\n HTMLUIProps<\"input\">\n > = useCallback(\n (\n {\n index,\n isDisabled: isDisabledProp,\n isReadOnly: isReadOnlyProp,\n ...props\n },\n ref = null,\n ) => {\n const disabled = props.disabled ?? isDisabledProp ?? isDisabled\n const readOnly = props.readOnly ?? isReadOnlyProp ?? isReadOnly\n const checked = props.value === selectedValue\n\n return {\n ...props,\n ref,\n id: `${id}-${index}`,\n type: \"radio\",\n name,\n disabled: disabled || readOnly,\n readOnly,\n checked,\n \"aria-disabled\": ariaAttr(disabled),\n \"data-readonly\": dataAttr(readOnly),\n \"data-checked\": dataAttr(checked),\n \"data-focus\": dataAttr(index === focusedIndex),\n style: {\n border: \"0px\",\n clip: \"rect(0px, 0px, 0px, 0px)\",\n height: \"1px\",\n width: \"1px\",\n margin: \"-1px\",\n padding: \"0px\",\n overflow: \"hidden\",\n whiteSpace: \"nowrap\",\n position: \"absolute\",\n },\n onChange: handlerAll(props.onChange, (ev) =>\n !disabled && !readOnly\n ? onChange(ev as ChangeEvent<HTMLInputElement>)\n : {},\n ),\n }\n },\n [isDisabled, isReadOnly, selectedValue, id, name, focusedIndex, onChange],\n )\n\n const getLabelProps: RequiredPropGetter<\n HTMLProps<\"label\"> & {\n value: string\n index: number\n isDisabled?: boolean\n isReadOnly?: boolean\n disabled?: boolean\n readOnly?: boolean\n },\n HTMLProps<\"label\">\n > = useCallback(\n (\n {\n index,\n isDisabled: isDisabledProp,\n isReadOnly: isReadOnlyProp,\n ...props\n },\n ref = null,\n ) => {\n const disabled = props.disabled ?? isDisabledProp ?? isDisabled\n const readOnly = props.readOnly ?? isReadOnlyProp ?? isReadOnly\n const checked = props.value === selectedValue\n const focused = index === focusedIndex\n\n return {\n ...props,\n ref,\n \"aria-disabled\": ariaAttr(disabled),\n \"data-readonly\": dataAttr(readOnly),\n \"data-checked\": dataAttr(checked),\n \"data-focus\": dataAttr(focused),\n \"data-focus-visible\": dataAttr(focused && isFocusVisible),\n onFocus: handlerAll(\n props.onFocus as unknown as FocusEventHandler<HTMLLabelElement>,\n () => onFocus(index, disabled || readOnly || false),\n ),\n ...(disabled || readOnly\n ? {\n _hover: {},\n _active: {},\n _focus: {},\n _invalid: {},\n _focusVisible: {},\n }\n : {}),\n }\n },\n [\n focusedIndex,\n isDisabled,\n isFocusVisible,\n isReadOnly,\n onFocus,\n selectedValue,\n ],\n )\n\n useEffect(() => {\n return trackFocusVisible(setIsFocusVisible)\n }, [])\n\n const css: CSSUIObject = {\n display: \"inline-flex\",\n alignItems: \"center\",\n ...styles.container,\n }\n\n const validChildren = getValidChildren(children)\n let computedChildren: ReactElement[] = []\n\n if (!validChildren.length && items.length) {\n computedChildren = items.map(({ label, value, ...props }, i) => (\n <SegmentedControlButton key={i} value={value} {...props}>\n {label}\n </SegmentedControlButton>\n ))\n } else {\n computedChildren = validChildren\n }\n\n if (selectedValue == null && defaultValue == null) {\n for (const child of computedChildren) {\n if (child.type !== SegmentedControlButton)\n if (\n (child.type as any).displayName !==\n SegmentedControlButton.displayName\n )\n continue\n\n const value = child.props.value\n\n setSelectedValue(value)\n\n break\n }\n }\n\n return (\n <DescendantsContextProvider value={descendants}>\n <SegmentedControlProvider\n value={{ getInputProps, getLabelProps, styles, selectedValue }}\n >\n <LayoutGroup id={id}>\n <ui.div\n {...getContainerProps({}, ref)}\n className={cx(\"ui-segmented-control\", className)}\n __css={css}\n >\n {computedChildren}\n </ui.div>\n </LayoutGroup>\n </SegmentedControlProvider>\n </DescendantsContextProvider>\n )\n },\n)\n\nSegmentedControl.displayName = \"SegmentedControl\"\nSegmentedControl.__ui__ = \"SegmentedControl\"\n\ninterface SegmentedControlButtonOptions {\n /**\n * The value of the segmented control button.\n */\n value: string\n /**\n * The callback fired when any children radio is checked or unchecked.\n */\n onChange?: ChangeEventHandler<HTMLInputElement>\n /**\n * Props for motion component.\n */\n motionProps?: MotionProps\n}\n\nexport interface SegmentedControlButtonProps\n extends Omit<HTMLUIProps<\"label\">, \"onChange\">,\n Pick<SegmentedControlProps, \"isDisabled\" | \"isReadOnly\">,\n SegmentedControlButtonOptions {}\n\nexport const SegmentedControlButton = forwardRef<\n SegmentedControlButtonProps,\n \"input\"\n>(\n (\n {\n className,\n disabled,\n readOnly,\n isDisabled,\n isReadOnly,\n value,\n onChange,\n children,\n motionProps,\n ...rest\n },\n ref,\n ) => {\n const [, isMounted] = useIsMounted({ rerender: true })\n const { selectedValue, getInputProps, getLabelProps, styles } =\n useSegmentedControl()\n\n const { index, register } = useDescendant({\n disabled: isDisabled || isReadOnly,\n })\n\n const props = {\n index,\n value,\n disabled,\n readOnly,\n isDisabled,\n isReadOnly,\n }\n\n const css: CSSUIObject = {\n position: \"relative\",\n cursor: \"pointer\",\n flex: \"1 1 0%\",\n display: \"inline-flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n ...styles.button,\n }\n\n const isSelected = selectedValue === value\n\n return (\n <ui.label\n {...getLabelProps(props)}\n className={cx(\"ui-segmented-control__button\", className)}\n __css={css}\n {...rest}\n >\n <ui.input\n {...getInputProps({ onChange, ...props }, mergeRefs(register, ref))}\n />\n {isSelected && isMounted ? (\n <SegmentedControlCursor {...motionProps} />\n ) : null}\n <ui.span zIndex=\"1\">{children}</ui.span>\n </ui.label>\n )\n },\n)\n\nSegmentedControlButton.displayName = \"SegmentedControlButton\"\nSegmentedControlButton.__ui__ = \"SegmentedControlButton\"\n\ninterface SegmentedControlCursorProps extends MotionProps {\n className?: string\n}\n\nconst SegmentedControlCursor: FC<SegmentedControlCursorProps> = ({\n className,\n transition,\n ...rest\n}) => {\n const { styles } = useSegmentedControl()\n\n const css: CSSUIObject = {\n position: \"absolute\",\n w: \"100%\",\n h: \"100%\",\n ...styles.cursor,\n }\n\n return (\n <motion.div\n className={cx(\"ui-segmented-control__cursor\", className)}\n layoutDependency={false}\n layoutId=\"cursor\"\n transition={{\n type: \"spring\",\n bounce: 0.15,\n duration: 0.4,\n ...transition,\n }}\n __css={css}\n {...rest}\n />\n )\n}\n\nSegmentedControlCursor.displayName = \"SegmentedControlCursor\"\nSegmentedControlCursor.__ui__ = \"SegmentedControlCursor\"\n"],"mappings":"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","names":["props","ref","value"]}
1
+ {"version":3,"sources":["../src/segmented-control.tsx"],"sourcesContent":["import type {\n CSSUIObject,\n FC,\n HTMLProps,\n HTMLUIProps,\n PropGetter,\n RequiredPropGetter,\n ThemeProps,\n} from \"@yamada-ui/core\"\nimport type { MotionProps } from \"@yamada-ui/motion\"\nimport type {\n ChangeEvent,\n ChangeEventHandler,\n FocusEventHandler,\n ReactElement,\n} from \"react\"\nimport {\n forwardRef,\n omitThemeProps,\n ui,\n useComponentMultiStyle,\n} from \"@yamada-ui/core\"\nimport { LayoutGroup, motion } from \"@yamada-ui/motion\"\nimport { useControllableState } from \"@yamada-ui/use-controllable-state\"\nimport { createDescendant } from \"@yamada-ui/use-descendant\"\nimport { trackFocusVisible } from \"@yamada-ui/use-focus-visible\"\nimport {\n ariaAttr,\n createContext,\n cx,\n dataAttr,\n getValidChildren,\n handlerAll,\n mergeRefs,\n useCallbackRef,\n useIsMounted,\n} from \"@yamada-ui/utils\"\nimport { useCallback, useEffect, useId, useRef, useState } from \"react\"\n\nexport interface SegmentedControlItem extends SegmentedControlButtonProps {\n label?: string\n}\n\nconst { DescendantsContextProvider, useDescendant, useDescendants } =\n createDescendant<HTMLButtonElement>()\n\ninterface SegmentedControlContext {\n styles: { [key: string]: CSSUIObject | undefined }\n value: string\n getInputProps: RequiredPropGetter<\n {\n index: number\n isDisabled?: boolean\n isReadOnly?: boolean\n } & HTMLProps<\"input\">,\n HTMLProps<\"input\">\n >\n getLabelProps: RequiredPropGetter<\n {\n index: number\n value: string\n disabled?: boolean\n isDisabled?: boolean\n isReadOnly?: boolean\n readOnly?: boolean\n } & HTMLProps<\"label\">,\n HTMLProps<\"label\">\n >\n}\n\nconst [SegmentedControlProvider, useSegmentedControl] =\n createContext<SegmentedControlContext>({\n name: \"SegmentedControlContext\",\n errorMessage: `useSegmentedControl returned is 'undefined'. Seems you forgot to wrap the components in \"<SegmentedControl />\"`,\n })\n\ninterface SegmentedControlOptions {\n /**\n * The HTML `name` attribute used for forms.\n */\n name?: string\n /**\n * The initial value of the segmented control.\n */\n defaultValue?: string\n /**\n * If `true`, the segmented control will be disabled.\n *\n * @default false\n */\n isDisabled?: boolean\n /**\n * If `true`, the segmented control will be readonly.\n *\n * @default false\n */\n isReadOnly?: boolean\n /**\n * If provided, generate segmented control buttons but based on items.\n *\n * @default '[]'\n */\n items?: SegmentedControlItem[]\n /**\n * The value of the segmented control.\n */\n value?: string\n /**\n * The callback fired when any children radio is checked or unchecked.\n */\n onChange?: (value: string) => void\n}\n\nexport interface SegmentedControlProps\n extends Omit<HTMLUIProps, \"defaultValue\" | \"onChange\" | \"value\">,\n ThemeProps<\"SegmentedControl\">,\n SegmentedControlOptions {}\n\n/**\n * `SegmentedControl` is a component used for allowing users to select one option from multiple choices.\n *\n * @see Docs https://yamada-ui.com/components/forms/segmented-control\n */\nexport const SegmentedControl = forwardRef<SegmentedControlProps, \"div\">(\n (props, ref) => {\n const [styles, mergedProps] = useComponentMultiStyle(\n \"SegmentedControl\",\n props,\n )\n let {\n id,\n name,\n className,\n children,\n defaultValue,\n isDisabled,\n isReadOnly,\n items = [],\n value: valueProp,\n onChange: onChangeProp,\n ...rest\n } = omitThemeProps(mergedProps)\n const uuid = useId()\n\n id ??= uuid\n name ??= `segmented-control-${uuid}`\n\n const onChangeRef = useCallbackRef(onChangeProp)\n\n const descendants = useDescendants()\n\n const [focusedIndex, setFocusedIndex] = useState<number>(-1)\n const [isFocusVisible, setIsFocusVisible] = useState<boolean>(false)\n const containerRef = useRef<HTMLDivElement>(null)\n\n const [value, setValue] = useControllableState({\n defaultValue,\n value: valueProp,\n onChange: onChangeRef,\n })\n\n const onChange = useCallback(\n (ev: ChangeEvent<HTMLInputElement>) => {\n if (isDisabled || isReadOnly) {\n ev.preventDefault()\n\n return\n }\n\n setValue(ev.target.value)\n },\n [isDisabled, isReadOnly, setValue],\n )\n\n const onFocus = useCallback(\n (index: number, skip: boolean) => {\n if (isDisabled) return\n\n if (skip) {\n const next = descendants.enabledNextValue(index)\n\n if (next) setFocusedIndex(next.index)\n } else {\n setFocusedIndex(index)\n }\n },\n [descendants, isDisabled],\n )\n\n const onBlur = useCallback(() => setFocusedIndex(-1), [])\n\n const getContainerProps: PropGetter = useCallback(\n (props = {}, ref = null) => ({\n ...rest,\n ...props,\n id,\n ref: mergeRefs(containerRef, ref),\n \"aria-disabled\": ariaAttr(isDisabled),\n \"data-readonly\": dataAttr(isReadOnly),\n onBlur: handlerAll(props.onBlur, onBlur),\n }),\n [id, isDisabled, isReadOnly, onBlur, rest],\n )\n\n const getInputProps: RequiredPropGetter<\n {\n index: number\n isDisabled?: boolean\n isReadOnly?: boolean\n } & HTMLProps<\"input\">,\n HTMLUIProps<\"input\">\n > = useCallback(\n (\n {\n index,\n isDisabled: isDisabledProp,\n isReadOnly: isReadOnlyProp,\n ...props\n },\n ref = null,\n ) => {\n const disabled = props.disabled ?? isDisabledProp ?? isDisabled\n const readOnly = props.readOnly ?? isReadOnlyProp ?? isReadOnly\n const checked = props.value === value\n\n return {\n ...props,\n id: `${id}-${index}`,\n ref,\n type: \"radio\",\n name,\n style: {\n border: \"0px\",\n clip: \"rect(0px, 0px, 0px, 0px)\",\n height: \"1px\",\n margin: \"-1px\",\n overflow: \"hidden\",\n padding: \"0px\",\n position: \"absolute\",\n whiteSpace: \"nowrap\",\n width: \"1px\",\n },\n \"aria-disabled\": ariaAttr(disabled),\n \"data-checked\": dataAttr(checked),\n \"data-focus\": dataAttr(index === focusedIndex),\n \"data-readonly\": dataAttr(readOnly),\n checked,\n disabled: disabled || readOnly,\n readOnly,\n onChange: handlerAll(props.onChange, (ev) =>\n !disabled && !readOnly\n ? onChange(ev as ChangeEvent<HTMLInputElement>)\n : {},\n ),\n }\n },\n [isDisabled, isReadOnly, value, id, name, focusedIndex, onChange],\n )\n\n const getLabelProps: RequiredPropGetter<\n {\n index: number\n value: string\n disabled?: boolean\n isDisabled?: boolean\n isReadOnly?: boolean\n readOnly?: boolean\n } & HTMLProps<\"label\">,\n HTMLProps<\"label\">\n > = useCallback(\n (\n {\n index,\n isDisabled: isDisabledProp,\n isReadOnly: isReadOnlyProp,\n ...props\n },\n ref = null,\n ) => {\n const disabled = props.disabled ?? isDisabledProp ?? isDisabled\n const readOnly = props.readOnly ?? isReadOnlyProp ?? isReadOnly\n const checked = props.value === value\n const focused = index === focusedIndex\n\n return {\n ...props,\n ref,\n \"aria-disabled\": ariaAttr(disabled),\n \"data-checked\": dataAttr(checked),\n \"data-focus\": dataAttr(focused),\n \"data-focus-visible\": dataAttr(focused && isFocusVisible),\n \"data-readonly\": dataAttr(readOnly),\n onFocus: handlerAll(\n props.onFocus as unknown as FocusEventHandler<HTMLLabelElement>,\n () => onFocus(index, disabled || readOnly || false),\n ),\n ...(disabled || readOnly\n ? {\n _active: {},\n _focus: {},\n _focusVisible: {},\n _hover: {},\n _invalid: {},\n }\n : {}),\n }\n },\n [focusedIndex, isDisabled, isFocusVisible, isReadOnly, onFocus, value],\n )\n\n useEffect(() => {\n return trackFocusVisible(setIsFocusVisible)\n }, [])\n\n const css: CSSUIObject = {\n alignItems: \"center\",\n display: \"inline-flex\",\n ...styles.container,\n }\n\n const validChildren = getValidChildren(children)\n let computedChildren: ReactElement[] = []\n\n if (!validChildren.length && items.length) {\n computedChildren = items.map(({ label, value, ...props }, i) => (\n <SegmentedControlButton key={i} value={value} {...props}>\n {label}\n </SegmentedControlButton>\n ))\n } else {\n computedChildren = validChildren\n }\n\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n if (value == null && defaultValue == null) {\n for (const child of computedChildren) {\n if (child.type !== SegmentedControlButton)\n if (\n (child.type as any).displayName !==\n SegmentedControlButton.displayName\n )\n continue\n\n const value = child.props.value\n\n setValue(value)\n\n break\n }\n }\n\n return (\n <DescendantsContextProvider value={descendants}>\n <SegmentedControlProvider\n value={{ styles, value, getInputProps, getLabelProps }}\n >\n <LayoutGroup id={id}>\n <ui.div\n {...getContainerProps({}, ref)}\n className={cx(\"ui-segmented-control\", className)}\n __css={css}\n >\n {computedChildren}\n </ui.div>\n </LayoutGroup>\n </SegmentedControlProvider>\n </DescendantsContextProvider>\n )\n },\n)\n\nSegmentedControl.displayName = \"SegmentedControl\"\nSegmentedControl.__ui__ = \"SegmentedControl\"\n\ninterface SegmentedControlButtonOptions {\n /**\n * The value of the segmented control button.\n */\n value: string\n /**\n * Props for motion component.\n */\n motionProps?: MotionProps\n /**\n * The callback fired when any children radio is checked or unchecked.\n */\n onChange?: ChangeEventHandler<HTMLInputElement>\n}\n\nexport interface SegmentedControlButtonProps\n extends Omit<HTMLUIProps<\"label\">, \"onChange\">,\n Pick<SegmentedControlProps, \"isDisabled\" | \"isReadOnly\">,\n SegmentedControlButtonOptions {}\n\nexport const SegmentedControlButton = forwardRef<\n SegmentedControlButtonProps,\n \"input\"\n>(\n (\n {\n className,\n children,\n disabled,\n isDisabled,\n isReadOnly,\n readOnly,\n value,\n motionProps,\n onChange,\n ...rest\n },\n ref,\n ) => {\n const [, isMounted] = useIsMounted({ rerender: true })\n const {\n styles,\n value: selectedValue,\n getInputProps,\n getLabelProps,\n } = useSegmentedControl()\n\n const { index, register } = useDescendant({\n disabled: isDisabled || isReadOnly,\n })\n\n const props = {\n disabled,\n index,\n isDisabled,\n isReadOnly,\n readOnly,\n value,\n }\n\n const css: CSSUIObject = {\n alignItems: \"center\",\n cursor: \"pointer\",\n display: \"inline-flex\",\n flex: \"1 1 0%\",\n justifyContent: \"center\",\n position: \"relative\",\n ...styles.button,\n }\n\n const isSelected = value === selectedValue\n\n return (\n <ui.label\n {...getLabelProps(props)}\n className={cx(\"ui-segmented-control__button\", className)}\n __css={css}\n {...rest}\n >\n <ui.input\n {...getInputProps({ onChange, ...props }, mergeRefs(register, ref))}\n />\n {isSelected && isMounted ? (\n <SegmentedControlCursor {...motionProps} />\n ) : null}\n <ui.span zIndex=\"1\">{children}</ui.span>\n </ui.label>\n )\n },\n)\n\nSegmentedControlButton.displayName = \"SegmentedControlButton\"\nSegmentedControlButton.__ui__ = \"SegmentedControlButton\"\n\ninterface SegmentedControlCursorProps extends MotionProps {\n className?: string\n}\n\nconst SegmentedControlCursor: FC<SegmentedControlCursorProps> = ({\n className,\n transition,\n ...rest\n}) => {\n const { styles } = useSegmentedControl()\n\n const css: CSSUIObject = {\n h: \"100%\",\n position: \"absolute\",\n w: \"100%\",\n ...styles.cursor,\n }\n\n return (\n <motion.div\n className={cx(\"ui-segmented-control__cursor\", className)}\n layoutDependency={false}\n layoutId=\"cursor\"\n transition={{\n type: \"spring\",\n bounce: 0.15,\n duration: 0.4,\n ...transition,\n }}\n __css={css}\n {...rest}\n />\n )\n}\n\nSegmentedControlCursor.displayName = \"SegmentedControlCursor\"\nSegmentedControlCursor.__ui__ = \"SegmentedControlCursor\"\n"],"mappings":"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","names":["props","ref","value"]}
package/dist/segmented-control.mjs CHANGED
@@ -2,7 +2,7 @@
2
2
  import {
3
3
  SegmentedControl,
4
4
  SegmentedControlButton
5
- } from "./chunk-LYUWFTFJ.mjs";
5
+ } from "./chunk-AVVQKQV6.mjs";
6
6
  export {
7
7
  SegmentedControl,
8
8
  SegmentedControlButton
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@yamada-ui/segmented-control",
3
- "version": "1.0.42-next-20241005220055",
3
+ "version": "1.0.42-next-20241008193728",
4
4
  "description": "Yamada UI segmented control components",
5
5
  "keywords": [
6
6
  "yamada",
@@ -36,12 +36,12 @@
36
36
  "url": "https://github.com/yamada-ui/yamada-ui/issues"
37
37
  },
38
38
  "dependencies": {
39
- "@yamada-ui/core": "1.15.2-next-20241005220055",
40
- "@yamada-ui/motion": "2.2.4-next-20241005220055",
41
- "@yamada-ui/use-controllable-state": "1.0.21",
42
- "@yamada-ui/use-descendant": "1.0.22",
43
- "@yamada-ui/use-focus-visible": "1.1.8",
44
- "@yamada-ui/utils": "1.5.2"
39
+ "@yamada-ui/core": "1.15.2-next-20241008193728",
40
+ "@yamada-ui/motion": "2.2.4-next-20241008193728",
41
+ "@yamada-ui/use-controllable-state": "1.0.22-next-20241008193728",
42
+ "@yamada-ui/use-descendant": "1.0.23-next-20241008193728",
43
+ "@yamada-ui/use-focus-visible": "1.1.9-next-20241008193728",
44
+ "@yamada-ui/utils": "1.5.3-next-20241008193728"
45
45
  },
46
46
  "devDependencies": {
47
47
  "clean-package": "2.2.0",
package/dist/chunk-LYUWFTFJ.mjs.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/segmented-control.tsx"],"sourcesContent":["import type {\n CSSUIObject,\n HTMLProps,\n HTMLUIProps,\n PropGetter,\n RequiredPropGetter,\n ThemeProps,\n} from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n FC,\n useComponentMultiStyle,\n omitThemeProps,\n} from \"@yamada-ui/core\"\nimport type { MotionProps } from \"@yamada-ui/motion\"\nimport { LayoutGroup, motion } from \"@yamada-ui/motion\"\nimport { useControllableState } from \"@yamada-ui/use-controllable-state\"\nimport { createDescendant } from \"@yamada-ui/use-descendant\"\nimport { trackFocusVisible } from \"@yamada-ui/use-focus-visible\"\nimport {\n ariaAttr,\n createContext,\n cx,\n dataAttr,\n getValidChildren,\n handlerAll,\n mergeRefs,\n useCallbackRef,\n useIsMounted,\n} from \"@yamada-ui/utils\"\nimport type {\n ChangeEvent,\n ChangeEventHandler,\n FocusEventHandler,\n ReactElement,\n} from \"react\"\nimport { useCallback, useEffect, useId, useRef, useState } from \"react\"\n\nexport interface SegmentedControlItem extends SegmentedControlButtonProps {\n label?: string\n}\n\nconst { DescendantsContextProvider, useDescendants, useDescendant } =\n createDescendant<HTMLButtonElement>()\n\ninterface SegmentedControlContext {\n selectedValue: string\n getInputProps: RequiredPropGetter<\n HTMLProps<\"input\"> & {\n index: number\n isDisabled?: boolean\n isReadOnly?: boolean\n },\n HTMLProps<\"input\">\n >\n getLabelProps: RequiredPropGetter<\n HTMLProps<\"label\"> & {\n value: string\n index: number\n isDisabled?: boolean\n isReadOnly?: boolean\n disabled?: boolean\n readOnly?: boolean\n },\n HTMLProps<\"label\">\n >\n styles: { [key: string]: CSSUIObject }\n}\n\nconst [SegmentedControlProvider, useSegmentedControl] =\n createContext<SegmentedControlContext>({\n strict: false,\n name: \"SegmentedControlContext\",\n })\n\ninterface SegmentedControlOptions {\n /**\n * The HTML `name` attribute used for forms.\n */\n name?: string\n /**\n * The value of the segmented control.\n */\n value?: string\n /**\n * The initial value of the segmented control.\n */\n defaultValue?: string\n /**\n * The callback fired when any children radio is checked or unchecked.\n */\n onChange?: (value: string) => void\n /**\n * If `true`, the segmented control will be readonly.\n *\n * @default false\n */\n isReadOnly?: boolean\n /**\n * If `true`, the segmented control will be disabled.\n *\n * @default false\n */\n isDisabled?: boolean\n /**\n * If provided, generate segmented control buttons but based on items.\n *\n * @default '[]'\n */\n items?: SegmentedControlItem[]\n}\n\nexport interface SegmentedControlProps\n extends Omit<HTMLUIProps, \"value\" | \"defaultValue\" | \"onChange\">,\n ThemeProps<\"SegmentedControl\">,\n SegmentedControlOptions {}\n\n/**\n * `SegmentedControl` is a component used for allowing users to select one option from multiple choices.\n *\n * @see Docs https://yamada-ui.com/components/forms/segmented-control\n */\nexport const SegmentedControl = forwardRef<SegmentedControlProps, \"div\">(\n (props, ref) => {\n const [styles, mergedProps] = useComponentMultiStyle(\n \"SegmentedControl\",\n props,\n )\n let {\n className,\n id,\n name,\n isReadOnly,\n isDisabled,\n children,\n items = [],\n value,\n defaultValue,\n onChange: onChangeProp,\n ...rest\n } = omitThemeProps(mergedProps)\n const uuid = useId()\n\n id ??= uuid\n name ??= `segmented-control-${uuid}`\n\n const onChangeRef = useCallbackRef(onChangeProp)\n\n const descendants = useDescendants()\n\n const [focusedIndex, setFocusedIndex] = useState<number>(-1)\n const [isFocusVisible, setIsFocusVisible] = useState<boolean>(false)\n const containerRef = useRef<HTMLDivElement>(null)\n\n const [selectedValue, setSelectedValue] = useControllableState({\n value,\n defaultValue,\n onChange: onChangeRef,\n })\n\n const onChange = useCallback(\n (ev: ChangeEvent<HTMLInputElement>) => {\n if (isDisabled || isReadOnly) {\n ev.preventDefault()\n\n return\n }\n\n setSelectedValue(ev.target.value)\n },\n [isDisabled, isReadOnly, setSelectedValue],\n )\n\n const onFocus = useCallback(\n (index: number, skip: boolean) => {\n if (isDisabled) return\n\n if (skip) {\n const next = descendants.enabledNextValue(index)\n\n if (next) setFocusedIndex(next.index)\n } else {\n setFocusedIndex(index)\n }\n },\n [descendants, isDisabled],\n )\n\n const onBlur = useCallback(() => setFocusedIndex(-1), [])\n\n const getContainerProps: PropGetter = useCallback(\n (props = {}, ref = null) => ({\n ...rest,\n ...props,\n ref: mergeRefs(containerRef, ref),\n id,\n \"aria-disabled\": ariaAttr(isDisabled),\n \"data-readonly\": dataAttr(isReadOnly),\n onBlur: handlerAll(props.onBlur, onBlur),\n }),\n [id, isDisabled, isReadOnly, onBlur, rest],\n )\n\n const getInputProps: RequiredPropGetter<\n HTMLProps<\"input\"> & {\n index: number\n isDisabled?: boolean\n isReadOnly?: boolean\n },\n HTMLUIProps<\"input\">\n > = useCallback(\n (\n {\n index,\n isDisabled: isDisabledProp,\n isReadOnly: isReadOnlyProp,\n ...props\n },\n ref = null,\n ) => {\n const disabled = props.disabled ?? isDisabledProp ?? isDisabled\n const readOnly = props.readOnly ?? isReadOnlyProp ?? isReadOnly\n const checked = props.value === selectedValue\n\n return {\n ...props,\n ref,\n id: `${id}-${index}`,\n type: \"radio\",\n name,\n disabled: disabled || readOnly,\n readOnly,\n checked,\n \"aria-disabled\": ariaAttr(disabled),\n \"data-readonly\": dataAttr(readOnly),\n \"data-checked\": dataAttr(checked),\n \"data-focus\": dataAttr(index === focusedIndex),\n style: {\n border: \"0px\",\n clip: \"rect(0px, 0px, 0px, 0px)\",\n height: \"1px\",\n width: \"1px\",\n margin: \"-1px\",\n padding: \"0px\",\n overflow: \"hidden\",\n whiteSpace: \"nowrap\",\n position: \"absolute\",\n },\n onChange: handlerAll(props.onChange, (ev) =>\n !disabled && !readOnly\n ? onChange(ev as ChangeEvent<HTMLInputElement>)\n : {},\n ),\n }\n },\n [isDisabled, isReadOnly, selectedValue, id, name, focusedIndex, onChange],\n )\n\n const getLabelProps: RequiredPropGetter<\n HTMLProps<\"label\"> & {\n value: string\n index: number\n isDisabled?: boolean\n isReadOnly?: boolean\n disabled?: boolean\n readOnly?: boolean\n },\n HTMLProps<\"label\">\n > = useCallback(\n (\n {\n index,\n isDisabled: isDisabledProp,\n isReadOnly: isReadOnlyProp,\n ...props\n },\n ref = null,\n ) => {\n const disabled = props.disabled ?? isDisabledProp ?? isDisabled\n const readOnly = props.readOnly ?? isReadOnlyProp ?? isReadOnly\n const checked = props.value === selectedValue\n const focused = index === focusedIndex\n\n return {\n ...props,\n ref,\n \"aria-disabled\": ariaAttr(disabled),\n \"data-readonly\": dataAttr(readOnly),\n \"data-checked\": dataAttr(checked),\n \"data-focus\": dataAttr(focused),\n \"data-focus-visible\": dataAttr(focused && isFocusVisible),\n onFocus: handlerAll(\n props.onFocus as unknown as FocusEventHandler<HTMLLabelElement>,\n () => onFocus(index, disabled || readOnly || false),\n ),\n ...(disabled || readOnly\n ? {\n _hover: {},\n _active: {},\n _focus: {},\n _invalid: {},\n _focusVisible: {},\n }\n : {}),\n }\n },\n [\n focusedIndex,\n isDisabled,\n isFocusVisible,\n isReadOnly,\n onFocus,\n selectedValue,\n ],\n )\n\n useEffect(() => {\n return trackFocusVisible(setIsFocusVisible)\n }, [])\n\n const css: CSSUIObject = {\n display: \"inline-flex\",\n alignItems: \"center\",\n ...styles.container,\n }\n\n const validChildren = getValidChildren(children)\n let computedChildren: ReactElement[] = []\n\n if (!validChildren.length && items.length) {\n computedChildren = items.map(({ label, value, ...props }, i) => (\n <SegmentedControlButton key={i} value={value} {...props}>\n {label}\n </SegmentedControlButton>\n ))\n } else {\n computedChildren = validChildren\n }\n\n if (selectedValue == null && defaultValue == null) {\n for (const child of computedChildren) {\n if (child.type !== SegmentedControlButton)\n if (\n (child.type as any).displayName !==\n SegmentedControlButton.displayName\n )\n continue\n\n const value = child.props.value\n\n setSelectedValue(value)\n\n break\n }\n }\n\n return (\n <DescendantsContextProvider value={descendants}>\n <SegmentedControlProvider\n value={{ getInputProps, getLabelProps, styles, selectedValue }}\n >\n <LayoutGroup id={id}>\n <ui.div\n {...getContainerProps({}, ref)}\n className={cx(\"ui-segmented-control\", className)}\n __css={css}\n >\n {computedChildren}\n </ui.div>\n </LayoutGroup>\n </SegmentedControlProvider>\n </DescendantsContextProvider>\n )\n },\n)\n\nSegmentedControl.displayName = \"SegmentedControl\"\nSegmentedControl.__ui__ = \"SegmentedControl\"\n\ninterface SegmentedControlButtonOptions {\n /**\n * The value of the segmented control button.\n */\n value: string\n /**\n * The callback fired when any children radio is checked or unchecked.\n */\n onChange?: ChangeEventHandler<HTMLInputElement>\n /**\n * Props for motion component.\n */\n motionProps?: MotionProps\n}\n\nexport interface SegmentedControlButtonProps\n extends Omit<HTMLUIProps<\"label\">, \"onChange\">,\n Pick<SegmentedControlProps, \"isDisabled\" | \"isReadOnly\">,\n SegmentedControlButtonOptions {}\n\nexport const SegmentedControlButton = forwardRef<\n SegmentedControlButtonProps,\n \"input\"\n>(\n (\n {\n className,\n disabled,\n readOnly,\n isDisabled,\n isReadOnly,\n value,\n onChange,\n children,\n motionProps,\n ...rest\n },\n ref,\n ) => {\n const [, isMounted] = useIsMounted({ rerender: true })\n const { selectedValue, getInputProps, getLabelProps, styles } =\n useSegmentedControl()\n\n const { index, register } = useDescendant({\n disabled: isDisabled || isReadOnly,\n })\n\n const props = {\n index,\n value,\n disabled,\n readOnly,\n isDisabled,\n isReadOnly,\n }\n\n const css: CSSUIObject = {\n position: \"relative\",\n cursor: \"pointer\",\n flex: \"1 1 0%\",\n display: \"inline-flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n ...styles.button,\n }\n\n const isSelected = selectedValue === value\n\n return (\n <ui.label\n {...getLabelProps(props)}\n className={cx(\"ui-segmented-control__button\", className)}\n __css={css}\n {...rest}\n >\n <ui.input\n {...getInputProps({ onChange, ...props }, mergeRefs(register, ref))}\n />\n {isSelected && isMounted ? (\n <SegmentedControlCursor {...motionProps} />\n ) : null}\n <ui.span zIndex=\"1\">{children}</ui.span>\n </ui.label>\n )\n },\n)\n\nSegmentedControlButton.displayName = \"SegmentedControlButton\"\nSegmentedControlButton.__ui__ = \"SegmentedControlButton\"\n\ninterface SegmentedControlCursorProps extends MotionProps {\n className?: string\n}\n\nconst SegmentedControlCursor: FC<SegmentedControlCursorProps> = ({\n className,\n transition,\n ...rest\n}) => {\n const { styles } = useSegmentedControl()\n\n const css: CSSUIObject = {\n position: \"absolute\",\n w: \"100%\",\n h: \"100%\",\n ...styles.cursor,\n }\n\n return (\n <motion.div\n className={cx(\"ui-segmented-control__cursor\", className)}\n layoutDependency={false}\n layoutId=\"cursor\"\n transition={{\n type: \"spring\",\n bounce: 0.15,\n duration: 0.4,\n ...transition,\n }}\n __css={css}\n {...rest}\n />\n )\n}\n\nSegmentedControlCursor.displayName = \"SegmentedControlCursor\"\nSegmentedControlCursor.__ui__ = \"SegmentedControlCursor\"\n"],"mappings":"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","names":["props","ref","value"]}