@yamada-ui/segmented-control 1.1.5 → 1.1.6-dev-20241212095817

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/dist/{chunk-VTK3QCXK.mjs → chunk-3XJF2PHG.mjs} +37 -31
  2. package/dist/chunk-3XJF2PHG.mjs.map +1 -0
  3. package/dist/index.js +35 -29
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +1 -1
  6. package/dist/segmented-control.d.mts +17 -1
  7. package/dist/segmented-control.d.ts +17 -1
  8. package/dist/segmented-control.js +35 -29
  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-VTK3QCXK.mjs.map +0 -1
package/dist/{chunk-VTK3QCXK.mjs → chunk-3XJF2PHG.mjs} RENAMED
@@ -20,7 +20,7 @@ import {
20
20
  handlerAll,
21
21
  mergeRefs,
22
22
  useCallbackRef,
23
- useIsMounted
23
+ useMounted
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";
@@ -41,9 +41,11 @@ var SegmentedControl = forwardRef(
41
41
  className,
42
42
  children,
43
43
  defaultValue,
44
+ disabled,
44
45
  isDisabled,
45
46
  isReadOnly,
46
47
  items = [],
48
+ readOnly,
47
49
  value: valueProp,
48
50
  onChange: onChangeProp,
49
51
  ...rest
@@ -51,10 +53,12 @@ var SegmentedControl = forwardRef(
51
53
  const uuid = useId();
52
54
  id != null ? id : id = uuid;
53
55
  name != null ? name : name = `segmented-control-${uuid}`;
56
+ disabled != null ? disabled : disabled = isDisabled;
57
+ readOnly != null ? readOnly : readOnly = isReadOnly;
54
58
  const onChangeRef = useCallbackRef(onChangeProp);
55
59
  const descendants = useDescendants();
56
60
  const [focusedIndex, setFocusedIndex] = useState(-1);
57
- const [isFocusVisible, setIsFocusVisible] = useState(false);
61
+ const [focusVisible, setFocusVisible] = useState(false);
58
62
  const containerRef = useRef(null);
59
63
  const [value, setValue] = useControllableState({
60
64
  defaultValue,
@@ -63,17 +67,17 @@ var SegmentedControl = forwardRef(
63
67
  });
64
68
  const onChange = useCallback(
65
69
  (ev) => {
66
- if (isDisabled || isReadOnly) {
70
+ if (disabled || readOnly) {
67
71
  ev.preventDefault();
68
72
  return;
69
73
  }
70
74
  setValue(ev.target.value);
71
75
  },
72
- [isDisabled, isReadOnly, setValue]
76
+ [disabled, readOnly, setValue]
73
77
  );
74
78
  const onFocus = useCallback(
75
79
  (index, skip) => {
76
- if (isDisabled) return;
80
+ if (disabled) return;
77
81
  if (skip) {
78
82
  const next = descendants.enabledNextValue(index);
79
83
  if (next) setFocusedIndex(next.index);
@@ -81,13 +85,13 @@ var SegmentedControl = forwardRef(
81
85
  setFocusedIndex(index);
82
86
  }
83
87
  },
84
- [descendants, isDisabled]
88
+ [descendants, disabled]
85
89
  );
86
90
  const onBlur = useCallback(() => setFocusedIndex(-1), []);
87
91
  const getContainerProps = useCallback(
88
92
  (props2 = {}, ref2 = null) => ({
89
- "aria-disabled": ariaAttr(isDisabled),
90
- "data-readonly": dataAttr(isReadOnly),
93
+ "aria-disabled": ariaAttr(disabled),
94
+ "data-readonly": dataAttr(readOnly),
91
95
  role: "radiogroup",
92
96
  ...rest,
93
97
  ...props2,
@@ -95,7 +99,7 @@ var SegmentedControl = forwardRef(
95
99
  ref: mergeRefs(containerRef, ref2),
96
100
  onBlur: handlerAll(props2.onBlur, onBlur)
97
101
  }),
98
- [id, isDisabled, isReadOnly, onBlur, rest]
102
+ [id, disabled, readOnly, onBlur, rest]
99
103
  );
100
104
  const getInputProps = useCallback(
101
105
  ({
@@ -105,8 +109,8 @@ var SegmentedControl = forwardRef(
105
109
  ...props2
106
110
  }, ref2 = null) => {
107
111
  var _a, _b, _c, _d;
108
- const disabled = (_b = (_a = props2.disabled) != null ? _a : isDisabledProp) != null ? _b : isDisabled;
109
- const readOnly = (_d = (_c = props2.readOnly) != null ? _c : isReadOnlyProp) != null ? _d : isReadOnly;
112
+ const trulyDisabled = (_b = (_a = props2.disabled) != null ? _a : isDisabledProp) != null ? _b : disabled;
113
+ const trulyReadOnly = (_d = (_c = props2.readOnly) != null ? _c : isReadOnlyProp) != null ? _d : readOnly;
110
114
  const checked = props2.value === value;
111
115
  return {
112
116
  ...props2,
@@ -125,20 +129,20 @@ var SegmentedControl = forwardRef(
125
129
  whiteSpace: "nowrap",
126
130
  width: "1px"
127
131
  },
128
- "aria-disabled": ariaAttr(disabled),
132
+ "aria-disabled": ariaAttr(trulyDisabled),
129
133
  "data-checked": dataAttr(checked),
130
134
  "data-focus": dataAttr(index === focusedIndex),
131
- "data-readonly": dataAttr(readOnly),
135
+ "data-readonly": dataAttr(trulyReadOnly),
132
136
  checked,
133
- disabled: disabled || readOnly,
134
- readOnly,
137
+ disabled: trulyDisabled || trulyReadOnly,
138
+ readOnly: trulyReadOnly,
135
139
  onChange: handlerAll(
136
140
  props2.onChange,
137
- (ev) => !disabled && !readOnly ? onChange(ev) : {}
141
+ (ev) => !trulyDisabled && !trulyReadOnly ? onChange(ev) : {}
138
142
  )
139
143
  };
140
144
  },
141
- [isDisabled, isReadOnly, value, id, name, focusedIndex, onChange]
145
+ [disabled, readOnly, value, id, name, focusedIndex, onChange]
142
146
  );
143
147
  const getLabelProps = useCallback(
144
148
  ({
@@ -148,23 +152,23 @@ var SegmentedControl = forwardRef(
148
152
  ...props2
149
153
  }, ref2 = null) => {
150
154
  var _a, _b, _c, _d;
151
- const disabled = (_b = (_a = props2.disabled) != null ? _a : isDisabledProp) != null ? _b : isDisabled;
152
- const readOnly = (_d = (_c = props2.readOnly) != null ? _c : isReadOnlyProp) != null ? _d : isReadOnly;
155
+ const trulyDisabled = (_b = (_a = props2.disabled) != null ? _a : isDisabledProp) != null ? _b : disabled;
156
+ const trulyReadOnly = (_d = (_c = props2.readOnly) != null ? _c : isReadOnlyProp) != null ? _d : readOnly;
153
157
  const checked = props2.value === value;
154
158
  const focused = index === focusedIndex;
155
159
  return {
156
160
  ...props2,
157
161
  ref: ref2,
158
- "aria-disabled": ariaAttr(disabled),
162
+ "aria-disabled": ariaAttr(trulyDisabled),
159
163
  "data-checked": dataAttr(checked),
160
164
  "data-focus": dataAttr(focused),
161
- "data-focus-visible": dataAttr(focused && isFocusVisible),
162
- "data-readonly": dataAttr(readOnly),
165
+ "data-focus-visible": dataAttr(focused && focusVisible),
166
+ "data-readonly": dataAttr(trulyReadOnly),
163
167
  onFocus: handlerAll(
164
168
  props2.onFocus,
165
- () => onFocus(index, disabled || readOnly || false)
169
+ () => onFocus(index, trulyDisabled || trulyReadOnly || false)
166
170
  ),
167
- ...disabled || readOnly ? {
171
+ ...trulyDisabled || trulyReadOnly ? {
168
172
  _active: {},
169
173
  _focus: {},
170
174
  _focusVisible: {},
@@ -173,10 +177,10 @@ var SegmentedControl = forwardRef(
173
177
  } : {}
174
178
  };
175
179
  },
176
- [focusedIndex, isDisabled, isFocusVisible, isReadOnly, onFocus, value]
180
+ [focusedIndex, disabled, readOnly, focusVisible, onFocus, value]
177
181
  );
178
182
  useEffect(() => {
179
- return trackFocusVisible(setIsFocusVisible);
183
+ return trackFocusVisible(setFocusVisible);
180
184
  }, []);
181
185
  const css = {
182
186
  alignItems: "center",
@@ -233,7 +237,9 @@ var SegmentedControlButton = forwardRef(
233
237
  onChange,
234
238
  ...rest
235
239
  }, ref) => {
236
- const [, isMounted] = useIsMounted({ rerender: true });
240
+ disabled != null ? disabled : disabled = isDisabled;
241
+ readOnly != null ? readOnly : readOnly = isReadOnly;
242
+ const [, mounted] = useMounted({ rerender: true });
237
243
  const {
238
244
  styles,
239
245
  value: selectedValue,
@@ -241,7 +247,7 @@ var SegmentedControlButton = forwardRef(
241
247
  getLabelProps
242
248
  } = useSegmentedControl();
243
249
  const { index, register } = useDescendant({
244
- disabled: isDisabled || isReadOnly
250
+ disabled: disabled || readOnly
245
251
  });
246
252
  const props = {
247
253
  disabled,
@@ -260,7 +266,7 @@ var SegmentedControlButton = forwardRef(
260
266
  position: "relative",
261
267
  ...styles.button
262
268
  };
263
- const isSelected = value === selectedValue;
269
+ const selected = value === selectedValue;
264
270
  return /* @__PURE__ */ jsxs(
265
271
  ui.label,
266
272
  {
@@ -275,7 +281,7 @@ var SegmentedControlButton = forwardRef(
275
281
  ...getInputProps({ onChange, ...props }, mergeRefs(register, ref))
276
282
  }
277
283
  ),
278
- isSelected && isMounted ? /* @__PURE__ */ jsx(SegmentedControlCursor, { ...motionProps }) : null,
284
+ selected && mounted ? /* @__PURE__ */ jsx(SegmentedControlCursor, { ...motionProps }) : null,
279
285
  /* @__PURE__ */ jsx(ui.span, { zIndex: "1", children })
280
286
  ]
281
287
  }
@@ -320,4 +326,4 @@ export {
320
326
  SegmentedControl,
321
327
  SegmentedControlButton
322
328
  };
323
- //# sourceMappingURL=chunk-VTK3QCXK.mjs.map
329
+ //# sourceMappingURL=chunk-3XJF2PHG.mjs.map
package/dist/chunk-3XJF2PHG.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 useMounted,\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 disabled?: boolean\n /**\n * If `true`, the segmented control will be disabled.\n *\n * @default false\n *\n * @deprecated Use `disabled` instead.\n */\n isDisabled?: boolean\n /**\n * If `true`, the segmented control will be readonly.\n *\n * @default false\n *\n * @deprecated Use `readOnly` instead.\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 * If `true`, the segmented control will be readonly.\n *\n * @default false\n */\n readOnly?: boolean\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 disabled,\n isDisabled,\n isReadOnly,\n items = [],\n readOnly,\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 disabled ??= isDisabled\n readOnly ??= isReadOnly\n\n const onChangeRef = useCallbackRef(onChangeProp)\n\n const descendants = useDescendants()\n\n const [focusedIndex, setFocusedIndex] = useState<number>(-1)\n const [focusVisible, setFocusVisible] = 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 (disabled || readOnly) {\n ev.preventDefault()\n\n return\n }\n\n setValue(ev.target.value)\n },\n [disabled, readOnly, setValue],\n )\n\n const onFocus = useCallback(\n (index: number, skip: boolean) => {\n if (disabled) 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, disabled],\n )\n\n const onBlur = useCallback(() => setFocusedIndex(-1), [])\n\n const getContainerProps: PropGetter = useCallback(\n (props = {}, ref = null) => ({\n \"aria-disabled\": ariaAttr(disabled),\n \"data-readonly\": dataAttr(readOnly),\n role: \"radiogroup\",\n ...rest,\n ...props,\n id,\n ref: mergeRefs(containerRef, ref),\n onBlur: handlerAll(props.onBlur, onBlur),\n }),\n [id, disabled, readOnly, 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 trulyDisabled = props.disabled ?? isDisabledProp ?? disabled\n const trulyReadOnly = props.readOnly ?? isReadOnlyProp ?? readOnly\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(trulyDisabled),\n \"data-checked\": dataAttr(checked),\n \"data-focus\": dataAttr(index === focusedIndex),\n \"data-readonly\": dataAttr(trulyReadOnly),\n checked,\n disabled: trulyDisabled || trulyReadOnly,\n readOnly: trulyReadOnly,\n onChange: handlerAll(props.onChange, (ev) =>\n !trulyDisabled && !trulyReadOnly\n ? onChange(ev as ChangeEvent<HTMLInputElement>)\n : {},\n ),\n }\n },\n [disabled, readOnly, 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 trulyDisabled = props.disabled ?? isDisabledProp ?? disabled\n const trulyReadOnly = props.readOnly ?? isReadOnlyProp ?? readOnly\n const checked = props.value === value\n const focused = index === focusedIndex\n\n return {\n ...props,\n ref,\n \"aria-disabled\": ariaAttr(trulyDisabled),\n \"data-checked\": dataAttr(checked),\n \"data-focus\": dataAttr(focused),\n \"data-focus-visible\": dataAttr(focused && focusVisible),\n \"data-readonly\": dataAttr(trulyReadOnly),\n onFocus: handlerAll(\n props.onFocus as unknown as FocusEventHandler<HTMLLabelElement>,\n () => onFocus(index, trulyDisabled || trulyReadOnly || false),\n ),\n ...(trulyDisabled || trulyReadOnly\n ? {\n _active: {},\n _focus: {},\n _focusVisible: {},\n _hover: {},\n _invalid: {},\n }\n : {}),\n }\n },\n [focusedIndex, disabled, readOnly, focusVisible, onFocus, value],\n )\n\n useEffect(() => {\n return trackFocusVisible(setFocusVisible)\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<\n SegmentedControlProps,\n \"disabled\" | \"isDisabled\" | \"isReadOnly\" | \"readOnly\"\n >,\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 disabled ??= isDisabled\n readOnly ??= isReadOnly\n\n const [, mounted] = useMounted({ rerender: true })\n const {\n styles,\n value: selectedValue,\n getInputProps,\n getLabelProps,\n } = useSegmentedControl()\n\n const { index, register } = useDescendant({\n disabled: disabled || readOnly,\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 selected = 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 {selected && mounted ? (\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
@@ -52,9 +52,11 @@ var SegmentedControl = (0, import_core.forwardRef)(
52
52
  className,
53
53
  children,
54
54
  defaultValue,
55
+ disabled,
55
56
  isDisabled,
56
57
  isReadOnly,
57
58
  items = [],
59
+ readOnly,
58
60
  value: valueProp,
59
61
  onChange: onChangeProp,
60
62
  ...rest
@@ -62,10 +64,12 @@ var SegmentedControl = (0, import_core.forwardRef)(
62
64
  const uuid = (0, import_react.useId)();
63
65
  id != null ? id : id = uuid;
64
66
  name != null ? name : name = `segmented-control-${uuid}`;
67
+ disabled != null ? disabled : disabled = isDisabled;
68
+ readOnly != null ? readOnly : readOnly = isReadOnly;
65
69
  const onChangeRef = (0, import_utils.useCallbackRef)(onChangeProp);
66
70
  const descendants = useDescendants();
67
71
  const [focusedIndex, setFocusedIndex] = (0, import_react.useState)(-1);
68
- const [isFocusVisible, setIsFocusVisible] = (0, import_react.useState)(false);
72
+ const [focusVisible, setFocusVisible] = (0, import_react.useState)(false);
69
73
  const containerRef = (0, import_react.useRef)(null);
70
74
  const [value, setValue] = (0, import_use_controllable_state.useControllableState)({
71
75
  defaultValue,
@@ -74,17 +78,17 @@ var SegmentedControl = (0, import_core.forwardRef)(
74
78
  });
75
79
  const onChange = (0, import_react.useCallback)(
76
80
  (ev) => {
77
- if (isDisabled || isReadOnly) {
81
+ if (disabled || readOnly) {
78
82
  ev.preventDefault();
79
83
  return;
80
84
  }
81
85
  setValue(ev.target.value);
82
86
  },
83
- [isDisabled, isReadOnly, setValue]
87
+ [disabled, readOnly, setValue]
84
88
  );
85
89
  const onFocus = (0, import_react.useCallback)(
86
90
  (index, skip) => {
87
- if (isDisabled) return;
91
+ if (disabled) return;
88
92
  if (skip) {
89
93
  const next = descendants.enabledNextValue(index);
90
94
  if (next) setFocusedIndex(next.index);
@@ -92,13 +96,13 @@ var SegmentedControl = (0, import_core.forwardRef)(
92
96
  setFocusedIndex(index);
93
97
  }
94
98
  },
95
- [descendants, isDisabled]
99
+ [descendants, disabled]
96
100
  );
97
101
  const onBlur = (0, import_react.useCallback)(() => setFocusedIndex(-1), []);
98
102
  const getContainerProps = (0, import_react.useCallback)(
99
103
  (props2 = {}, ref2 = null) => ({
100
- "aria-disabled": (0, import_utils.ariaAttr)(isDisabled),
101
- "data-readonly": (0, import_utils.dataAttr)(isReadOnly),
104
+ "aria-disabled": (0, import_utils.ariaAttr)(disabled),
105
+ "data-readonly": (0, import_utils.dataAttr)(readOnly),
102
106
  role: "radiogroup",
103
107
  ...rest,
104
108
  ...props2,
@@ -106,7 +110,7 @@ var SegmentedControl = (0, import_core.forwardRef)(
106
110
  ref: (0, import_utils.mergeRefs)(containerRef, ref2),
107
111
  onBlur: (0, import_utils.handlerAll)(props2.onBlur, onBlur)
108
112
  }),
109
- [id, isDisabled, isReadOnly, onBlur, rest]
113
+ [id, disabled, readOnly, onBlur, rest]
110
114
  );
111
115
  const getInputProps = (0, import_react.useCallback)(
112
116
  ({
@@ -116,8 +120,8 @@ var SegmentedControl = (0, import_core.forwardRef)(
116
120
  ...props2
117
121
  }, ref2 = null) => {
118
122
  var _a, _b, _c, _d;
119
- const disabled = (_b = (_a = props2.disabled) != null ? _a : isDisabledProp) != null ? _b : isDisabled;
120
- const readOnly = (_d = (_c = props2.readOnly) != null ? _c : isReadOnlyProp) != null ? _d : isReadOnly;
123
+ const trulyDisabled = (_b = (_a = props2.disabled) != null ? _a : isDisabledProp) != null ? _b : disabled;
124
+ const trulyReadOnly = (_d = (_c = props2.readOnly) != null ? _c : isReadOnlyProp) != null ? _d : readOnly;
121
125
  const checked = props2.value === value;
122
126
  return {
123
127
  ...props2,
@@ -136,20 +140,20 @@ var SegmentedControl = (0, import_core.forwardRef)(
136
140
  whiteSpace: "nowrap",
137
141
  width: "1px"
138
142
  },
139
- "aria-disabled": (0, import_utils.ariaAttr)(disabled),
143
+ "aria-disabled": (0, import_utils.ariaAttr)(trulyDisabled),
140
144
  "data-checked": (0, import_utils.dataAttr)(checked),
141
145
  "data-focus": (0, import_utils.dataAttr)(index === focusedIndex),
142
- "data-readonly": (0, import_utils.dataAttr)(readOnly),
146
+ "data-readonly": (0, import_utils.dataAttr)(trulyReadOnly),
143
147
  checked,
144
- disabled: disabled || readOnly,
145
- readOnly,
148
+ disabled: trulyDisabled || trulyReadOnly,
149
+ readOnly: trulyReadOnly,
146
150
  onChange: (0, import_utils.handlerAll)(
147
151
  props2.onChange,
148
- (ev) => !disabled && !readOnly ? onChange(ev) : {}
152
+ (ev) => !trulyDisabled && !trulyReadOnly ? onChange(ev) : {}
149
153
  )
150
154
  };
151
155
  },
152
- [isDisabled, isReadOnly, value, id, name, focusedIndex, onChange]
156
+ [disabled, readOnly, value, id, name, focusedIndex, onChange]
153
157
  );
154
158
  const getLabelProps = (0, import_react.useCallback)(
155
159
  ({
@@ -159,23 +163,23 @@ var SegmentedControl = (0, import_core.forwardRef)(
159
163
  ...props2
160
164
  }, ref2 = null) => {
161
165
  var _a, _b, _c, _d;
162
- const disabled = (_b = (_a = props2.disabled) != null ? _a : isDisabledProp) != null ? _b : isDisabled;
163
- const readOnly = (_d = (_c = props2.readOnly) != null ? _c : isReadOnlyProp) != null ? _d : isReadOnly;
166
+ const trulyDisabled = (_b = (_a = props2.disabled) != null ? _a : isDisabledProp) != null ? _b : disabled;
167
+ const trulyReadOnly = (_d = (_c = props2.readOnly) != null ? _c : isReadOnlyProp) != null ? _d : readOnly;
164
168
  const checked = props2.value === value;
165
169
  const focused = index === focusedIndex;
166
170
  return {
167
171
  ...props2,
168
172
  ref: ref2,
169
- "aria-disabled": (0, import_utils.ariaAttr)(disabled),
173
+ "aria-disabled": (0, import_utils.ariaAttr)(trulyDisabled),
170
174
  "data-checked": (0, import_utils.dataAttr)(checked),
171
175
  "data-focus": (0, import_utils.dataAttr)(focused),
172
- "data-focus-visible": (0, import_utils.dataAttr)(focused && isFocusVisible),
173
- "data-readonly": (0, import_utils.dataAttr)(readOnly),
176
+ "data-focus-visible": (0, import_utils.dataAttr)(focused && focusVisible),
177
+ "data-readonly": (0, import_utils.dataAttr)(trulyReadOnly),
174
178
  onFocus: (0, import_utils.handlerAll)(
175
179
  props2.onFocus,
176
- () => onFocus(index, disabled || readOnly || false)
180
+ () => onFocus(index, trulyDisabled || trulyReadOnly || false)
177
181
  ),
178
- ...disabled || readOnly ? {
182
+ ...trulyDisabled || trulyReadOnly ? {
179
183
  _active: {},
180
184
  _focus: {},
181
185
  _focusVisible: {},
@@ -184,10 +188,10 @@ var SegmentedControl = (0, import_core.forwardRef)(
184
188
  } : {}
185
189
  };
186
190
  },
187
- [focusedIndex, isDisabled, isFocusVisible, isReadOnly, onFocus, value]
191
+ [focusedIndex, disabled, readOnly, focusVisible, onFocus, value]
188
192
  );
189
193
  (0, import_react.useEffect)(() => {
190
- return (0, import_use_focus_visible.trackFocusVisible)(setIsFocusVisible);
194
+ return (0, import_use_focus_visible.trackFocusVisible)(setFocusVisible);
191
195
  }, []);
192
196
  const css = {
193
197
  alignItems: "center",
@@ -244,7 +248,9 @@ var SegmentedControlButton = (0, import_core.forwardRef)(
244
248
  onChange,
245
249
  ...rest
246
250
  }, ref) => {
247
- const [, isMounted] = (0, import_utils.useIsMounted)({ rerender: true });
251
+ disabled != null ? disabled : disabled = isDisabled;
252
+ readOnly != null ? readOnly : readOnly = isReadOnly;
253
+ const [, mounted] = (0, import_utils.useMounted)({ rerender: true });
248
254
  const {
249
255
  styles,
250
256
  value: selectedValue,
@@ -252,7 +258,7 @@ var SegmentedControlButton = (0, import_core.forwardRef)(
252
258
  getLabelProps
253
259
  } = useSegmentedControl();
254
260
  const { index, register } = useDescendant({
255
- disabled: isDisabled || isReadOnly
261
+ disabled: disabled || readOnly
256
262
  });
257
263
  const props = {
258
264
  disabled,
@@ -271,7 +277,7 @@ var SegmentedControlButton = (0, import_core.forwardRef)(
271
277
  position: "relative",
272
278
  ...styles.button
273
279
  };
274
- const isSelected = value === selectedValue;
280
+ const selected = value === selectedValue;
275
281
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
276
282
  import_core.ui.label,
277
283
  {
@@ -286,7 +292,7 @@ var SegmentedControlButton = (0, import_core.forwardRef)(
286
292
  ...getInputProps({ onChange, ...props }, (0, import_utils.mergeRefs)(register, ref))
287
293
  }
288
294
  ),
289
- isSelected && isMounted ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SegmentedControlCursor, { ...motionProps }) : null,
295
+ selected && mounted ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SegmentedControlCursor, { ...motionProps }) : null,
290
296
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.ui.span, { zIndex: "1", children })
291
297
  ]
292
298
  }
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 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 \"aria-disabled\": ariaAttr(isDisabled),\n \"data-readonly\": dataAttr(isReadOnly),\n role: \"radiogroup\",\n ...rest,\n ...props,\n id,\n ref: mergeRefs(containerRef, ref),\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"]}
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 useMounted,\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 disabled?: boolean\n /**\n * If `true`, the segmented control will be disabled.\n *\n * @default false\n *\n * @deprecated Use `disabled` instead.\n */\n isDisabled?: boolean\n /**\n * If `true`, the segmented control will be readonly.\n *\n * @default false\n *\n * @deprecated Use `readOnly` instead.\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 * If `true`, the segmented control will be readonly.\n *\n * @default false\n */\n readOnly?: boolean\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 disabled,\n isDisabled,\n isReadOnly,\n items = [],\n readOnly,\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 disabled ??= isDisabled\n readOnly ??= isReadOnly\n\n const onChangeRef = useCallbackRef(onChangeProp)\n\n const descendants = useDescendants()\n\n const [focusedIndex, setFocusedIndex] = useState<number>(-1)\n const [focusVisible, setFocusVisible] = 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 (disabled || readOnly) {\n ev.preventDefault()\n\n return\n }\n\n setValue(ev.target.value)\n },\n [disabled, readOnly, setValue],\n )\n\n const onFocus = useCallback(\n (index: number, skip: boolean) => {\n if (disabled) 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, disabled],\n )\n\n const onBlur = useCallback(() => setFocusedIndex(-1), [])\n\n const getContainerProps: PropGetter = useCallback(\n (props = {}, ref = null) => ({\n \"aria-disabled\": ariaAttr(disabled),\n \"data-readonly\": dataAttr(readOnly),\n role: \"radiogroup\",\n ...rest,\n ...props,\n id,\n ref: mergeRefs(containerRef, ref),\n onBlur: handlerAll(props.onBlur, onBlur),\n }),\n [id, disabled, readOnly, 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 trulyDisabled = props.disabled ?? isDisabledProp ?? disabled\n const trulyReadOnly = props.readOnly ?? isReadOnlyProp ?? readOnly\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(trulyDisabled),\n \"data-checked\": dataAttr(checked),\n \"data-focus\": dataAttr(index === focusedIndex),\n \"data-readonly\": dataAttr(trulyReadOnly),\n checked,\n disabled: trulyDisabled || trulyReadOnly,\n readOnly: trulyReadOnly,\n onChange: handlerAll(props.onChange, (ev) =>\n !trulyDisabled && !trulyReadOnly\n ? onChange(ev as ChangeEvent<HTMLInputElement>)\n : {},\n ),\n }\n },\n [disabled, readOnly, 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 trulyDisabled = props.disabled ?? isDisabledProp ?? disabled\n const trulyReadOnly = props.readOnly ?? isReadOnlyProp ?? readOnly\n const checked = props.value === value\n const focused = index === focusedIndex\n\n return {\n ...props,\n ref,\n \"aria-disabled\": ariaAttr(trulyDisabled),\n \"data-checked\": dataAttr(checked),\n \"data-focus\": dataAttr(focused),\n \"data-focus-visible\": dataAttr(focused && focusVisible),\n \"data-readonly\": dataAttr(trulyReadOnly),\n onFocus: handlerAll(\n props.onFocus as unknown as FocusEventHandler<HTMLLabelElement>,\n () => onFocus(index, trulyDisabled || trulyReadOnly || false),\n ),\n ...(trulyDisabled || trulyReadOnly\n ? {\n _active: {},\n _focus: {},\n _focusVisible: {},\n _hover: {},\n _invalid: {},\n }\n : {}),\n }\n },\n [focusedIndex, disabled, readOnly, focusVisible, onFocus, value],\n )\n\n useEffect(() => {\n return trackFocusVisible(setFocusVisible)\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<\n SegmentedControlProps,\n \"disabled\" | \"isDisabled\" | \"isReadOnly\" | \"readOnly\"\n >,\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 disabled ??= isDisabled\n readOnly ??= isReadOnly\n\n const [, mounted] = useMounted({ rerender: true })\n const {\n styles,\n value: selectedValue,\n getInputProps,\n getLabelProps,\n } = useSegmentedControl()\n\n const { index, register } = useDescendant({\n disabled: disabled || readOnly,\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 selected = 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 {selected && mounted ? (\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":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACgBA,kBAKO;AACP,oBAAoC;AACpC,oCAAqC;AACrC,4BAAiC;AACjC,+BAAkC;AAClC,mBAUO;AACP,mBAAgE;AAqTxD;AA/SR,IAAM,EAAE,4BAA4B,eAAe,eAAe,QAChE,wCAAoC;AA0BtC,IAAM,CAAC,0BAA0B,mBAAmB,QAClD,4BAAuC;AAAA,EACrC,MAAM;AAAA,EACN,cAAc;AAChB,CAAC;AAiEI,IAAM,uBAAmB;AAAA,EAC9B,CAAC,OAAO,QAAQ;AACd,UAAM,CAAC,QAAQ,WAAW,QAAI;AAAA,MAC5B;AAAA,MACA;AAAA,IACF;AACA,QAAI;AAAA,MACF;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,QAAQ,CAAC;AAAA,MACT;AAAA,MACA,OAAO;AAAA,MACP,UAAU;AAAA,MACV,GAAG;AAAA,IACL,QAAI,4BAAe,WAAW;AAC9B,UAAM,WAAO,oBAAM;AAEnB,2BAAO;AACP,iCAAS,qBAAqB,IAAI;AAClC,6CAAa;AACb,6CAAa;AAEb,UAAM,kBAAc,6BAAe,YAAY;AAE/C,UAAM,cAAc,eAAe;AAEnC,UAAM,CAAC,cAAc,eAAe,QAAI,uBAAiB,EAAE;AAC3D,UAAM,CAAC,cAAc,eAAe,QAAI,uBAAkB,KAAK;AAC/D,UAAM,mBAAe,qBAAuB,IAAI;AAEhD,UAAM,CAAC,OAAO,QAAQ,QAAI,oDAAqB;AAAA,MAC7C;AAAA,MACA,OAAO;AAAA,MACP,UAAU;AAAA,IACZ,CAAC;AAED,UAAM,eAAW;AAAA,MACf,CAAC,OAAsC;AACrC,YAAI,YAAY,UAAU;AACxB,aAAG,eAAe;AAElB;AAAA,QACF;AAEA,iBAAS,GAAG,OAAO,KAAK;AAAA,MAC1B;AAAA,MACA,CAAC,UAAU,UAAU,QAAQ;AAAA,IAC/B;AAEA,UAAM,cAAU;AAAA,MACd,CAAC,OAAe,SAAkB;AAChC,YAAI,SAAU;AAEd,YAAI,MAAM;AACR,gBAAM,OAAO,YAAY,iBAAiB,KAAK;AAE/C,cAAI,KAAM,iBAAgB,KAAK,KAAK;AAAA,QACtC,OAAO;AACL,0BAAgB,KAAK;AAAA,QACvB;AAAA,MACF;AAAA,MACA,CAAC,aAAa,QAAQ;AAAA,IACxB;AAEA,UAAM,aAAS,0BAAY,MAAM,gBAAgB,EAAE,GAAG,CAAC,CAAC;AAExD,UAAM,wBAAgC;AAAA,MACpC,CAACA,SAAQ,CAAC,GAAGC,OAAM,UAAU;AAAA,QAC3B,qBAAiB,uBAAS,QAAQ;AAAA,QAClC,qBAAiB,uBAAS,QAAQ;AAAA,QAClC,MAAM;AAAA,QACN,GAAG;AAAA,QACH,GAAGD;AAAA,QACH;AAAA,QACA,SAAK,wBAAU,cAAcC,IAAG;AAAA,QAChC,YAAQ,yBAAWD,OAAM,QAAQ,MAAM;AAAA,MACzC;AAAA,MACA,CAAC,IAAI,UAAU,UAAU,QAAQ,IAAI;AAAA,IACvC;AAEA,UAAM,oBAOF;AAAA,MACF,CACE;AAAA,QACE;AAAA,QACA,YAAY;AAAA,QACZ,YAAY;AAAA,QACZ,GAAGA;AAAA,MACL,GACAC,OAAM,SACH;AAjPX;AAkPQ,cAAM,iBAAgB,WAAAD,OAAM,aAAN,YAAkB,mBAAlB,YAAoC;AAC1D,cAAM,iBAAgB,WAAAA,OAAM,aAAN,YAAkB,mBAAlB,YAAoC;AAC1D,cAAM,UAAUA,OAAM,UAAU;AAEhC,eAAO;AAAA,UACL,GAAGA;AAAA,UACH,IAAI,GAAG,EAAE,IAAI,KAAK;AAAA,UAClB,KAAAC;AAAA,UACA,MAAM;AAAA,UACN;AAAA,UACA,OAAO;AAAA,YACL,QAAQ;AAAA,YACR,MAAM;AAAA,YACN,QAAQ;AAAA,YACR,QAAQ;AAAA,YACR,UAAU;AAAA,YACV,SAAS;AAAA,YACT,UAAU;AAAA,YACV,YAAY;AAAA,YACZ,OAAO;AAAA,UACT;AAAA,UACA,qBAAiB,uBAAS,aAAa;AAAA,UACvC,oBAAgB,uBAAS,OAAO;AAAA,UAChC,kBAAc,uBAAS,UAAU,YAAY;AAAA,UAC7C,qBAAiB,uBAAS,aAAa;AAAA,UACvC;AAAA,UACA,UAAU,iBAAiB;AAAA,UAC3B,UAAU;AAAA,UACV,cAAU;AAAA,YAAWD,OAAM;AAAA,YAAU,CAAC,OACpC,CAAC,iBAAiB,CAAC,gBACf,SAAS,EAAmC,IAC5C,CAAC;AAAA,UACP;AAAA,QACF;AAAA,MACF;AAAA,MACA,CAAC,UAAU,UAAU,OAAO,IAAI,MAAM,cAAc,QAAQ;AAAA,IAC9D;AAEA,UAAM,oBAUF;AAAA,MACF,CACE;AAAA,QACE;AAAA,QACA,YAAY;AAAA,QACZ,YAAY;AAAA,QACZ,GAAGA;AAAA,MACL,GACAC,OAAM,SACH;AA3SX;AA4SQ,cAAM,iBAAgB,WAAAD,OAAM,aAAN,YAAkB,mBAAlB,YAAoC;AAC1D,cAAM,iBAAgB,WAAAA,OAAM,aAAN,YAAkB,mBAAlB,YAAoC;AAC1D,cAAM,UAAUA,OAAM,UAAU;AAChC,cAAM,UAAU,UAAU;AAE1B,eAAO;AAAA,UACL,GAAGA;AAAA,UACH,KAAAC;AAAA,UACA,qBAAiB,uBAAS,aAAa;AAAA,UACvC,oBAAgB,uBAAS,OAAO;AAAA,UAChC,kBAAc,uBAAS,OAAO;AAAA,UAC9B,0BAAsB,uBAAS,WAAW,YAAY;AAAA,UACtD,qBAAiB,uBAAS,aAAa;AAAA,UACvC,aAAS;AAAA,YACPD,OAAM;AAAA,YACN,MAAM,QAAQ,OAAO,iBAAiB,iBAAiB,KAAK;AAAA,UAC9D;AAAA,UACA,GAAI,iBAAiB,gBACjB;AAAA,YACE,SAAS,CAAC;AAAA,YACV,QAAQ,CAAC;AAAA,YACT,eAAe,CAAC;AAAA,YAChB,QAAQ,CAAC;AAAA,YACT,UAAU,CAAC;AAAA,UACb,IACA,CAAC;AAAA,QACP;AAAA,MACF;AAAA,MACA,CAAC,cAAc,UAAU,UAAU,cAAc,SAAS,KAAK;AAAA,IACjE;AAEA,gCAAU,MAAM;AACd,iBAAO,4CAAkB,eAAe;AAAA,IAC1C,GAAG,CAAC,CAAC;AAEL,UAAM,MAAmB;AAAA,MACvB,YAAY;AAAA,MACZ,SAAS;AAAA,MACT,GAAG,OAAO;AAAA,IACZ;AAEA,UAAM,oBAAgB,+BAAiB,QAAQ;AAC/C,QAAI,mBAAmC,CAAC;AAExC,QAAI,CAAC,cAAc,UAAU,MAAM,QAAQ;AACzC,yBAAmB,MAAM,IAAI,CAAC,EAAE,OAAO,OAAAE,QAAO,GAAGF,OAAM,GAAG,MACxD,4CAAC,0BAA+B,OAAOE,QAAQ,GAAGF,QAC/C,mBAD0B,CAE7B,CACD;AAAA,IACH,OAAO;AACL,yBAAmB;AAAA,IACrB;AAGA,QAAI,SAAS,QAAQ,gBAAgB,MAAM;AACzC,iBAAW,SAAS,kBAAkB;AACpC,YAAI,MAAM,SAAS;AACjB,cACG,MAAM,KAAa,gBACpB,uBAAuB;AAEvB;AAAA;AAEJ,cAAME,SAAQ,MAAM,MAAM;AAE1B,iBAASA,MAAK;AAEd;AAAA,MACF;AAAA,IACF;AAEA,WACE,4CAAC,8BAA2B,OAAO,aACjC;AAAA,MAAC;AAAA;AAAA,QACC,OAAO,EAAE,QAAQ,OAAO,eAAe,cAAc;AAAA,QAErD,sDAAC,6BAAY,IACX;AAAA,UAAC,eAAG;AAAA,UAAH;AAAA,YACE,GAAG,kBAAkB,CAAC,GAAG,GAAG;AAAA,YAC7B,eAAW,iBAAG,wBAAwB,SAAS;AAAA,YAC/C,OAAO;AAAA,YAEN;AAAA;AAAA,QACH,GACF;AAAA;AAAA,IACF,GACF;AAAA,EAEJ;AACF;AAEA,iBAAiB,cAAc;AAC/B,iBAAiB,SAAS;AAyBnB,IAAM,6BAAyB;AAAA,EAIpC,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,6CAAa;AACb,6CAAa;AAEb,UAAM,CAAC,EAAE,OAAO,QAAI,yBAAW,EAAE,UAAU,KAAK,CAAC;AACjD,UAAM;AAAA,MACJ;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MACA;AAAA,IACF,IAAI,oBAAoB;AAExB,UAAM,EAAE,OAAO,SAAS,IAAI,cAAc;AAAA,MACxC,UAAU,YAAY;AAAA,IACxB,CAAC;AAED,UAAM,QAAQ;AAAA,MACZ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAEA,UAAM,MAAmB;AAAA,MACvB,YAAY;AAAA,MACZ,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,MAAM;AAAA,MACN,gBAAgB;AAAA,MAChB,UAAU;AAAA,MACV,GAAG,OAAO;AAAA,IACZ;AAEA,UAAM,WAAW,UAAU;AAE3B,WACE;AAAA,MAAC,eAAG;AAAA,MAAH;AAAA,QACE,GAAG,cAAc,KAAK;AAAA,QACvB,eAAW,iBAAG,gCAAgC,SAAS;AAAA,QACvD,OAAO;AAAA,QACN,GAAG;AAAA,QAEJ;AAAA;AAAA,YAAC,eAAG;AAAA,YAAH;AAAA,cACE,GAAG,cAAc,EAAE,UAAU,GAAG,MAAM,OAAG,wBAAU,UAAU,GAAG,CAAC;AAAA;AAAA,UACpE;AAAA,UACC,YAAY,UACX,4CAAC,0BAAwB,GAAG,aAAa,IACvC;AAAA,UACJ,4CAAC,eAAG,MAAH,EAAQ,QAAO,KAAK,UAAS;AAAA;AAAA;AAAA,IAChC;AAAA,EAEJ;AACF;AAEA,uBAAuB,cAAc;AACrC,uBAAuB,SAAS;AAMhC,IAAM,yBAA0D,CAAC;AAAA,EAC/D;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,EAAE,OAAO,IAAI,oBAAoB;AAEvC,QAAM,MAAmB;AAAA,IACvB,GAAG;AAAA,IACH,UAAU;AAAA,IACV,GAAG;AAAA,IACH,GAAG,OAAO;AAAA,EACZ;AAEA,SACE;AAAA,IAAC,qBAAO;AAAA,IAAP;AAAA,MACC,eAAW,iBAAG,gCAAgC,SAAS;AAAA,MACvD,kBAAkB;AAAA,MAClB,UAAS;AAAA,MACT,YAAY;AAAA,QACV,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,UAAU;AAAA,QACV,GAAG;AAAA,MACL;AAAA,MACA,OAAO;AAAA,MACN,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,uBAAuB,cAAc;AACrC,uBAAuB,SAAS;","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-VTK3QCXK.mjs";
5
+ } from "./chunk-3XJF2PHG.mjs";
6
6
  export {
7
7
  SegmentedControl,
8
8
  SegmentedControlButton
package/dist/segmented-control.d.mts CHANGED
@@ -20,11 +20,21 @@ interface SegmentedControlOptions {
20
20
  *
21
21
  * @default false
22
22
  */
23
+ disabled?: boolean;
24
+ /**
25
+ * If `true`, the segmented control will be disabled.
26
+ *
27
+ * @default false
28
+ *
29
+ * @deprecated Use `disabled` instead.
30
+ */
23
31
  isDisabled?: boolean;
24
32
  /**
25
33
  * If `true`, the segmented control will be readonly.
26
34
  *
27
35
  * @default false
36
+ *
37
+ * @deprecated Use `readOnly` instead.
28
38
  */
29
39
  isReadOnly?: boolean;
30
40
  /**
@@ -33,6 +43,12 @@ interface SegmentedControlOptions {
33
43
  * @default '[]'
34
44
  */
35
45
  items?: SegmentedControlItem[];
46
+ /**
47
+ * If `true`, the segmented control will be readonly.
48
+ *
49
+ * @default false
50
+ */
51
+ readOnly?: boolean;
36
52
  /**
37
53
  * The value of the segmented control.
38
54
  */
@@ -64,7 +80,7 @@ interface SegmentedControlButtonOptions {
64
80
  */
65
81
  onChange?: ChangeEventHandler<HTMLInputElement>;
66
82
  }
67
- interface SegmentedControlButtonProps extends Omit<HTMLUIProps<"label">, "onChange">, Pick<SegmentedControlProps, "isDisabled" | "isReadOnly">, SegmentedControlButtonOptions {
83
+ interface SegmentedControlButtonProps extends Omit<HTMLUIProps<"label">, "onChange">, Pick<SegmentedControlProps, "disabled" | "isDisabled" | "isReadOnly" | "readOnly">, SegmentedControlButtonOptions {
68
84
  }
69
85
  declare const SegmentedControlButton: _yamada_ui_core.Component<"input", SegmentedControlButtonProps>;
70
86
 
package/dist/segmented-control.d.ts CHANGED
@@ -20,11 +20,21 @@ interface SegmentedControlOptions {
20
20
  *
21
21
  * @default false
22
22
  */
23
+ disabled?: boolean;
24
+ /**
25
+ * If `true`, the segmented control will be disabled.
26
+ *
27
+ * @default false
28
+ *
29
+ * @deprecated Use `disabled` instead.
30
+ */
23
31
  isDisabled?: boolean;
24
32
  /**
25
33
  * If `true`, the segmented control will be readonly.
26
34
  *
27
35
  * @default false
36
+ *
37
+ * @deprecated Use `readOnly` instead.
28
38
  */
29
39
  isReadOnly?: boolean;
30
40
  /**
@@ -33,6 +43,12 @@ interface SegmentedControlOptions {
33
43
  * @default '[]'
34
44
  */
35
45
  items?: SegmentedControlItem[];
46
+ /**
47
+ * If `true`, the segmented control will be readonly.
48
+ *
49
+ * @default false
50
+ */
51
+ readOnly?: boolean;
36
52
  /**
37
53
  * The value of the segmented control.
38
54
  */
@@ -64,7 +80,7 @@ interface SegmentedControlButtonOptions {
64
80
  */
65
81
  onChange?: ChangeEventHandler<HTMLInputElement>;
66
82
  }
67
- interface SegmentedControlButtonProps extends Omit<HTMLUIProps<"label">, "onChange">, Pick<SegmentedControlProps, "isDisabled" | "isReadOnly">, SegmentedControlButtonOptions {
83
+ interface SegmentedControlButtonProps extends Omit<HTMLUIProps<"label">, "onChange">, Pick<SegmentedControlProps, "disabled" | "isDisabled" | "isReadOnly" | "readOnly">, SegmentedControlButtonOptions {
68
84
  }
69
85
  declare const SegmentedControlButton: _yamada_ui_core.Component<"input", SegmentedControlButtonProps>;
70
86
 
package/dist/segmented-control.js CHANGED
@@ -50,9 +50,11 @@ var SegmentedControl = (0, import_core.forwardRef)(
50
50
  className,
51
51
  children,
52
52
  defaultValue,
53
+ disabled,
53
54
  isDisabled,
54
55
  isReadOnly,
55
56
  items = [],
57
+ readOnly,
56
58
  value: valueProp,
57
59
  onChange: onChangeProp,
58
60
  ...rest
@@ -60,10 +62,12 @@ var SegmentedControl = (0, import_core.forwardRef)(
60
62
  const uuid = (0, import_react.useId)();
61
63
  id != null ? id : id = uuid;
62
64
  name != null ? name : name = `segmented-control-${uuid}`;
65
+ disabled != null ? disabled : disabled = isDisabled;
66
+ readOnly != null ? readOnly : readOnly = isReadOnly;
63
67
  const onChangeRef = (0, import_utils.useCallbackRef)(onChangeProp);
64
68
  const descendants = useDescendants();
65
69
  const [focusedIndex, setFocusedIndex] = (0, import_react.useState)(-1);
66
- const [isFocusVisible, setIsFocusVisible] = (0, import_react.useState)(false);
70
+ const [focusVisible, setFocusVisible] = (0, import_react.useState)(false);
67
71
  const containerRef = (0, import_react.useRef)(null);
68
72
  const [value, setValue] = (0, import_use_controllable_state.useControllableState)({
69
73
  defaultValue,
@@ -72,17 +76,17 @@ var SegmentedControl = (0, import_core.forwardRef)(
72
76
  });
73
77
  const onChange = (0, import_react.useCallback)(
74
78
  (ev) => {
75
- if (isDisabled || isReadOnly) {
79
+ if (disabled || readOnly) {
76
80
  ev.preventDefault();
77
81
  return;
78
82
  }
79
83
  setValue(ev.target.value);
80
84
  },
81
- [isDisabled, isReadOnly, setValue]
85
+ [disabled, readOnly, setValue]
82
86
  );
83
87
  const onFocus = (0, import_react.useCallback)(
84
88
  (index, skip) => {
85
- if (isDisabled) return;
89
+ if (disabled) return;
86
90
  if (skip) {
87
91
  const next = descendants.enabledNextValue(index);
88
92
  if (next) setFocusedIndex(next.index);
@@ -90,13 +94,13 @@ var SegmentedControl = (0, import_core.forwardRef)(
90
94
  setFocusedIndex(index);
91
95
  }
92
96
  },
93
- [descendants, isDisabled]
97
+ [descendants, disabled]
94
98
  );
95
99
  const onBlur = (0, import_react.useCallback)(() => setFocusedIndex(-1), []);
96
100
  const getContainerProps = (0, import_react.useCallback)(
97
101
  (props2 = {}, ref2 = null) => ({
98
- "aria-disabled": (0, import_utils.ariaAttr)(isDisabled),
99
- "data-readonly": (0, import_utils.dataAttr)(isReadOnly),
102
+ "aria-disabled": (0, import_utils.ariaAttr)(disabled),
103
+ "data-readonly": (0, import_utils.dataAttr)(readOnly),
100
104
  role: "radiogroup",
101
105
  ...rest,
102
106
  ...props2,
@@ -104,7 +108,7 @@ var SegmentedControl = (0, import_core.forwardRef)(
104
108
  ref: (0, import_utils.mergeRefs)(containerRef, ref2),
105
109
  onBlur: (0, import_utils.handlerAll)(props2.onBlur, onBlur)
106
110
  }),
107
- [id, isDisabled, isReadOnly, onBlur, rest]
111
+ [id, disabled, readOnly, onBlur, rest]
108
112
  );
109
113
  const getInputProps = (0, import_react.useCallback)(
110
114
  ({
@@ -114,8 +118,8 @@ var SegmentedControl = (0, import_core.forwardRef)(
114
118
  ...props2
115
119
  }, ref2 = null) => {
116
120
  var _a, _b, _c, _d;
117
- const disabled = (_b = (_a = props2.disabled) != null ? _a : isDisabledProp) != null ? _b : isDisabled;
118
- const readOnly = (_d = (_c = props2.readOnly) != null ? _c : isReadOnlyProp) != null ? _d : isReadOnly;
121
+ const trulyDisabled = (_b = (_a = props2.disabled) != null ? _a : isDisabledProp) != null ? _b : disabled;
122
+ const trulyReadOnly = (_d = (_c = props2.readOnly) != null ? _c : isReadOnlyProp) != null ? _d : readOnly;
119
123
  const checked = props2.value === value;
120
124
  return {
121
125
  ...props2,
@@ -134,20 +138,20 @@ var SegmentedControl = (0, import_core.forwardRef)(
134
138
  whiteSpace: "nowrap",
135
139
  width: "1px"
136
140
  },
137
- "aria-disabled": (0, import_utils.ariaAttr)(disabled),
141
+ "aria-disabled": (0, import_utils.ariaAttr)(trulyDisabled),
138
142
  "data-checked": (0, import_utils.dataAttr)(checked),
139
143
  "data-focus": (0, import_utils.dataAttr)(index === focusedIndex),
140
- "data-readonly": (0, import_utils.dataAttr)(readOnly),
144
+ "data-readonly": (0, import_utils.dataAttr)(trulyReadOnly),
141
145
  checked,
142
- disabled: disabled || readOnly,
143
- readOnly,
146
+ disabled: trulyDisabled || trulyReadOnly,
147
+ readOnly: trulyReadOnly,
144
148
  onChange: (0, import_utils.handlerAll)(
145
149
  props2.onChange,
146
- (ev) => !disabled && !readOnly ? onChange(ev) : {}
150
+ (ev) => !trulyDisabled && !trulyReadOnly ? onChange(ev) : {}
147
151
  )
148
152
  };
149
153
  },
150
- [isDisabled, isReadOnly, value, id, name, focusedIndex, onChange]
154
+ [disabled, readOnly, value, id, name, focusedIndex, onChange]
151
155
  );
152
156
  const getLabelProps = (0, import_react.useCallback)(
153
157
  ({
@@ -157,23 +161,23 @@ var SegmentedControl = (0, import_core.forwardRef)(
157
161
  ...props2
158
162
  }, ref2 = null) => {
159
163
  var _a, _b, _c, _d;
160
- const disabled = (_b = (_a = props2.disabled) != null ? _a : isDisabledProp) != null ? _b : isDisabled;
161
- const readOnly = (_d = (_c = props2.readOnly) != null ? _c : isReadOnlyProp) != null ? _d : isReadOnly;
164
+ const trulyDisabled = (_b = (_a = props2.disabled) != null ? _a : isDisabledProp) != null ? _b : disabled;
165
+ const trulyReadOnly = (_d = (_c = props2.readOnly) != null ? _c : isReadOnlyProp) != null ? _d : readOnly;
162
166
  const checked = props2.value === value;
163
167
  const focused = index === focusedIndex;
164
168
  return {
165
169
  ...props2,
166
170
  ref: ref2,
167
- "aria-disabled": (0, import_utils.ariaAttr)(disabled),
171
+ "aria-disabled": (0, import_utils.ariaAttr)(trulyDisabled),
168
172
  "data-checked": (0, import_utils.dataAttr)(checked),
169
173
  "data-focus": (0, import_utils.dataAttr)(focused),
170
- "data-focus-visible": (0, import_utils.dataAttr)(focused && isFocusVisible),
171
- "data-readonly": (0, import_utils.dataAttr)(readOnly),
174
+ "data-focus-visible": (0, import_utils.dataAttr)(focused && focusVisible),
175
+ "data-readonly": (0, import_utils.dataAttr)(trulyReadOnly),
172
176
  onFocus: (0, import_utils.handlerAll)(
173
177
  props2.onFocus,
174
- () => onFocus(index, disabled || readOnly || false)
178
+ () => onFocus(index, trulyDisabled || trulyReadOnly || false)
175
179
  ),
176
- ...disabled || readOnly ? {
180
+ ...trulyDisabled || trulyReadOnly ? {
177
181
  _active: {},
178
182
  _focus: {},
179
183
  _focusVisible: {},
@@ -182,10 +186,10 @@ var SegmentedControl = (0, import_core.forwardRef)(
182
186
  } : {}
183
187
  };
184
188
  },
185
- [focusedIndex, isDisabled, isFocusVisible, isReadOnly, onFocus, value]
189
+ [focusedIndex, disabled, readOnly, focusVisible, onFocus, value]
186
190
  );
187
191
  (0, import_react.useEffect)(() => {
188
- return (0, import_use_focus_visible.trackFocusVisible)(setIsFocusVisible);
192
+ return (0, import_use_focus_visible.trackFocusVisible)(setFocusVisible);
189
193
  }, []);
190
194
  const css = {
191
195
  alignItems: "center",
@@ -242,7 +246,9 @@ var SegmentedControlButton = (0, import_core.forwardRef)(
242
246
  onChange,
243
247
  ...rest
244
248
  }, ref) => {
245
- const [, isMounted] = (0, import_utils.useIsMounted)({ rerender: true });
249
+ disabled != null ? disabled : disabled = isDisabled;
250
+ readOnly != null ? readOnly : readOnly = isReadOnly;
251
+ const [, mounted] = (0, import_utils.useMounted)({ rerender: true });
246
252
  const {
247
253
  styles,
248
254
  value: selectedValue,
@@ -250,7 +256,7 @@ var SegmentedControlButton = (0, import_core.forwardRef)(
250
256
  getLabelProps
251
257
  } = useSegmentedControl();
252
258
  const { index, register } = useDescendant({
253
- disabled: isDisabled || isReadOnly
259
+ disabled: disabled || readOnly
254
260
  });
255
261
  const props = {
256
262
  disabled,
@@ -269,7 +275,7 @@ var SegmentedControlButton = (0, import_core.forwardRef)(
269
275
  position: "relative",
270
276
  ...styles.button
271
277
  };
272
- const isSelected = value === selectedValue;
278
+ const selected = value === selectedValue;
273
279
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
274
280
  import_core.ui.label,
275
281
  {
@@ -284,7 +290,7 @@ var SegmentedControlButton = (0, import_core.forwardRef)(
284
290
  ...getInputProps({ onChange, ...props }, (0, import_utils.mergeRefs)(register, ref))
285
291
  }
286
292
  ),
287
- isSelected && isMounted ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SegmentedControlCursor, { ...motionProps }) : null,
293
+ selected && mounted ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SegmentedControlCursor, { ...motionProps }) : null,
288
294
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.ui.span, { zIndex: "1", children })
289
295
  ]
290
296
  }
package/dist/segmented-control.js.map CHANGED
@@ -1 +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 \"aria-disabled\": ariaAttr(isDisabled),\n \"data-readonly\": dataAttr(isReadOnly),\n role: \"radiogroup\",\n ...rest,\n ...props,\n id,\n ref: mergeRefs(containerRef, ref),\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"]}
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 useMounted,\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 disabled?: boolean\n /**\n * If `true`, the segmented control will be disabled.\n *\n * @default false\n *\n * @deprecated Use `disabled` instead.\n */\n isDisabled?: boolean\n /**\n * If `true`, the segmented control will be readonly.\n *\n * @default false\n *\n * @deprecated Use `readOnly` instead.\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 * If `true`, the segmented control will be readonly.\n *\n * @default false\n */\n readOnly?: boolean\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 disabled,\n isDisabled,\n isReadOnly,\n items = [],\n readOnly,\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 disabled ??= isDisabled\n readOnly ??= isReadOnly\n\n const onChangeRef = useCallbackRef(onChangeProp)\n\n const descendants = useDescendants()\n\n const [focusedIndex, setFocusedIndex] = useState<number>(-1)\n const [focusVisible, setFocusVisible] = 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 (disabled || readOnly) {\n ev.preventDefault()\n\n return\n }\n\n setValue(ev.target.value)\n },\n [disabled, readOnly, setValue],\n )\n\n const onFocus = useCallback(\n (index: number, skip: boolean) => {\n if (disabled) 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, disabled],\n )\n\n const onBlur = useCallback(() => setFocusedIndex(-1), [])\n\n const getContainerProps: PropGetter = useCallback(\n (props = {}, ref = null) => ({\n \"aria-disabled\": ariaAttr(disabled),\n \"data-readonly\": dataAttr(readOnly),\n role: \"radiogroup\",\n ...rest,\n ...props,\n id,\n ref: mergeRefs(containerRef, ref),\n onBlur: handlerAll(props.onBlur, onBlur),\n }),\n [id, disabled, readOnly, 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 trulyDisabled = props.disabled ?? isDisabledProp ?? disabled\n const trulyReadOnly = props.readOnly ?? isReadOnlyProp ?? readOnly\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(trulyDisabled),\n \"data-checked\": dataAttr(checked),\n \"data-focus\": dataAttr(index === focusedIndex),\n \"data-readonly\": dataAttr(trulyReadOnly),\n checked,\n disabled: trulyDisabled || trulyReadOnly,\n readOnly: trulyReadOnly,\n onChange: handlerAll(props.onChange, (ev) =>\n !trulyDisabled && !trulyReadOnly\n ? onChange(ev as ChangeEvent<HTMLInputElement>)\n : {},\n ),\n }\n },\n [disabled, readOnly, 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 trulyDisabled = props.disabled ?? isDisabledProp ?? disabled\n const trulyReadOnly = props.readOnly ?? isReadOnlyProp ?? readOnly\n const checked = props.value === value\n const focused = index === focusedIndex\n\n return {\n ...props,\n ref,\n \"aria-disabled\": ariaAttr(trulyDisabled),\n \"data-checked\": dataAttr(checked),\n \"data-focus\": dataAttr(focused),\n \"data-focus-visible\": dataAttr(focused && focusVisible),\n \"data-readonly\": dataAttr(trulyReadOnly),\n onFocus: handlerAll(\n props.onFocus as unknown as FocusEventHandler<HTMLLabelElement>,\n () => onFocus(index, trulyDisabled || trulyReadOnly || false),\n ),\n ...(trulyDisabled || trulyReadOnly\n ? {\n _active: {},\n _focus: {},\n _focusVisible: {},\n _hover: {},\n _invalid: {},\n }\n : {}),\n }\n },\n [focusedIndex, disabled, readOnly, focusVisible, onFocus, value],\n )\n\n useEffect(() => {\n return trackFocusVisible(setFocusVisible)\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<\n SegmentedControlProps,\n \"disabled\" | \"isDisabled\" | \"isReadOnly\" | \"readOnly\"\n >,\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 disabled ??= isDisabled\n readOnly ??= isReadOnly\n\n const [, mounted] = useMounted({ rerender: true })\n const {\n styles,\n value: selectedValue,\n getInputProps,\n getLabelProps,\n } = useSegmentedControl()\n\n const { index, register } = useDescendant({\n disabled: disabled || readOnly,\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 selected = 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 {selected && mounted ? (\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-VTK3QCXK.mjs";
5
+ } from "./chunk-3XJF2PHG.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.1.5",
3
+ "version": "1.1.6-dev-20241212095817",
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.16.1",
40
- "@yamada-ui/motion": "2.2.11",
41
- "@yamada-ui/use-controllable-state": "1.0.25",
42
- "@yamada-ui/use-descendant": "1.0.27",
43
- "@yamada-ui/use-focus-visible": "1.1.12",
44
- "@yamada-ui/utils": "1.6.1"
39
+ "@yamada-ui/core": "1.16.2-dev-20241212095817",
40
+ "@yamada-ui/motion": "2.2.12-dev-20241212095817",
41
+ "@yamada-ui/use-controllable-state": "1.0.26-dev-20241212095817",
42
+ "@yamada-ui/use-descendant": "1.0.28-dev-20241212095817",
43
+ "@yamada-ui/use-focus-visible": "1.1.13-dev-20241212095817",
44
+ "@yamada-ui/utils": "1.6.2-dev-20241212095817"
45
45
  },
46
46
  "devDependencies": {
47
47
  "clean-package": "2.2.0",
package/dist/chunk-VTK3QCXK.mjs.map DELETED
@@ -1 +0,0 @@
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 \"aria-disabled\": ariaAttr(isDisabled),\n \"data-readonly\": dataAttr(isReadOnly),\n role: \"radiogroup\",\n ...rest,\n ...props,\n id,\n ref: mergeRefs(containerRef, ref),\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"]}