@yamada-ui/segmented-control 1.1.6-dev-20241213213653 → 1.1.6-dev-20241215203956

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 (10) hide show
  1. package/dist/{chunk-3XJF2PHG.mjs → chunk-HDPS6FC6.mjs} +19 -37
  2. package/dist/chunk-HDPS6FC6.mjs.map +1 -0
  3. package/dist/index.js +18 -36
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +1 -1
  6. package/dist/segmented-control.js +18 -36
  7. package/dist/segmented-control.js.map +1 -1
  8. package/dist/segmented-control.mjs +1 -1
  9. package/package.json +7 -7
  10. package/dist/chunk-3XJF2PHG.mjs.map +0 -1
package/dist/{chunk-3XJF2PHG.mjs → chunk-HDPS6FC6.mjs} RENAMED
@@ -35,31 +35,27 @@ var SegmentedControl = forwardRef(
35
35
  "SegmentedControl",
36
36
  props
37
37
  );
38
- let {
39
- id,
40
- name,
38
+ const uuid = useId();
39
+ const {
40
+ id = uuid,
41
+ name = `segmented-control-${uuid}`,
41
42
  className,
42
43
  children,
43
44
  defaultValue,
44
- disabled,
45
45
  isDisabled,
46
+ disabled = isDisabled,
46
47
  isReadOnly,
47
48
  items = [],
48
- readOnly,
49
+ readOnly = isReadOnly,
49
50
  value: valueProp,
50
51
  onChange: onChangeProp,
51
52
  ...rest
52
53
  } = omitThemeProps(mergedProps);
53
- const uuid = useId();
54
- id != null ? id : id = uuid;
55
- name != null ? name : name = `segmented-control-${uuid}`;
56
- disabled != null ? disabled : disabled = isDisabled;
57
- readOnly != null ? readOnly : readOnly = isReadOnly;
58
- const onChangeRef = useCallbackRef(onChangeProp);
54
+ const containerRef = useRef(null);
59
55
  const descendants = useDescendants();
60
56
  const [focusedIndex, setFocusedIndex] = useState(-1);
61
57
  const [focusVisible, setFocusVisible] = useState(false);
62
- const containerRef = useRef(null);
58
+ const onChangeRef = useCallbackRef(onChangeProp);
63
59
  const [value, setValue] = useControllableState({
64
60
  defaultValue,
65
61
  value: valueProp,
@@ -102,15 +98,10 @@ var SegmentedControl = forwardRef(
102
98
  [id, disabled, readOnly, onBlur, rest]
103
99
  );
104
100
  const getInputProps = useCallback(
105
- ({
106
- index,
107
- isDisabled: isDisabledProp,
108
- isReadOnly: isReadOnlyProp,
109
- ...props2
110
- }, ref2 = null) => {
111
- var _a, _b, _c, _d;
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;
101
+ ({ index, ...props2 }, ref2 = null) => {
102
+ var _a, _b;
103
+ const trulyDisabled = (_a = props2.disabled) != null ? _a : disabled;
104
+ const trulyReadOnly = (_b = props2.readOnly) != null ? _b : readOnly;
114
105
  const checked = props2.value === value;
115
106
  return {
116
107
  ...props2,
@@ -145,15 +136,10 @@ var SegmentedControl = forwardRef(
145
136
  [disabled, readOnly, value, id, name, focusedIndex, onChange]
146
137
  );
147
138
  const getLabelProps = useCallback(
148
- ({
149
- index,
150
- isDisabled: isDisabledProp,
151
- isReadOnly: isReadOnlyProp,
152
- ...props2
153
- }, ref2 = null) => {
154
- var _a, _b, _c, _d;
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;
139
+ ({ index, ...props2 }, ref2 = null) => {
140
+ var _a, _b;
141
+ const trulyDisabled = (_a = props2.disabled) != null ? _a : disabled;
142
+ const trulyReadOnly = (_b = props2.readOnly) != null ? _b : readOnly;
157
143
  const checked = props2.value === value;
158
144
  const focused = index === focusedIndex;
159
145
  return {
@@ -228,17 +214,15 @@ var SegmentedControlButton = forwardRef(
228
214
  ({
229
215
  className,
230
216
  children,
231
- disabled,
232
217
  isDisabled,
218
+ disabled = isDisabled,
233
219
  isReadOnly,
234
- readOnly,
220
+ readOnly = isReadOnly,
235
221
  value,
236
222
  motionProps,
237
223
  onChange,
238
224
  ...rest
239
225
  }, ref) => {
240
- disabled != null ? disabled : disabled = isDisabled;
241
- readOnly != null ? readOnly : readOnly = isReadOnly;
242
226
  const [, mounted] = useMounted({ rerender: true });
243
227
  const {
244
228
  styles,
@@ -252,8 +236,6 @@ var SegmentedControlButton = forwardRef(
252
236
  const props = {
253
237
  disabled,
254
238
  index,
255
- isDisabled,
256
- isReadOnly,
257
239
  readOnly,
258
240
  value
259
241
  };
@@ -326,4 +308,4 @@ export {
326
308
  SegmentedControl,
327
309
  SegmentedControlButton
328
310
  };
329
- //# sourceMappingURL=chunk-3XJF2PHG.mjs.map
311
+ //# sourceMappingURL=chunk-HDPS6FC6.mjs.map
package/dist/chunk-HDPS6FC6.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 { index: number } & HTMLProps<\"input\">,\n HTMLProps<\"input\">\n >\n getLabelProps: RequiredPropGetter<\n {\n index: number\n value: string\n disabled?: 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 const uuid = useId()\n const {\n id = uuid,\n name = `segmented-control-${uuid}`,\n className,\n children,\n defaultValue,\n isDisabled,\n disabled = isDisabled,\n isReadOnly,\n items = [],\n readOnly = isReadOnly,\n value: valueProp,\n onChange: onChangeProp,\n ...rest\n } = omitThemeProps(mergedProps)\n const containerRef = useRef<HTMLDivElement>(null)\n const descendants = useDescendants()\n const [focusedIndex, setFocusedIndex] = useState<number>(-1)\n const [focusVisible, setFocusVisible] = useState<boolean>(false)\n const onChangeRef = useCallbackRef(onChangeProp)\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 { index: number } & HTMLProps<\"input\">,\n HTMLUIProps<\"input\">\n > = useCallback(\n ({ index, ...props }, ref = null) => {\n const trulyDisabled = props.disabled ?? disabled\n const trulyReadOnly = props.readOnly ?? 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 readOnly?: boolean\n } & HTMLProps<\"label\">,\n HTMLProps<\"label\">\n > = useCallback(\n ({ index, ...props }, ref = null) => {\n const trulyDisabled = props.disabled ?? disabled\n const trulyReadOnly = props.readOnly ?? 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 isDisabled,\n disabled = isDisabled,\n isReadOnly,\n readOnly = isReadOnly,\n value,\n motionProps,\n onChange,\n ...rest\n },\n ref,\n ) => {\n const [, mounted] = useMounted({ rerender: true })\n const {\n styles,\n value: selectedValue,\n getInputProps,\n getLabelProps,\n } = useSegmentedControl()\n const { index, register } = useDescendant({\n disabled: disabled || readOnly,\n })\n const props = {\n disabled,\n index,\n readOnly,\n value,\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 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
@@ -46,31 +46,27 @@ var SegmentedControl = (0, import_core.forwardRef)(
46
46
  "SegmentedControl",
47
47
  props
48
48
  );
49
- let {
50
- id,
51
- name,
49
+ const uuid = (0, import_react.useId)();
50
+ const {
51
+ id = uuid,
52
+ name = `segmented-control-${uuid}`,
52
53
  className,
53
54
  children,
54
55
  defaultValue,
55
- disabled,
56
56
  isDisabled,
57
+ disabled = isDisabled,
57
58
  isReadOnly,
58
59
  items = [],
59
- readOnly,
60
+ readOnly = isReadOnly,
60
61
  value: valueProp,
61
62
  onChange: onChangeProp,
62
63
  ...rest
63
64
  } = (0, import_core.omitThemeProps)(mergedProps);
64
- const uuid = (0, import_react.useId)();
65
- id != null ? id : id = uuid;
66
- name != null ? name : name = `segmented-control-${uuid}`;
67
- disabled != null ? disabled : disabled = isDisabled;
68
- readOnly != null ? readOnly : readOnly = isReadOnly;
69
- const onChangeRef = (0, import_utils.useCallbackRef)(onChangeProp);
65
+ const containerRef = (0, import_react.useRef)(null);
70
66
  const descendants = useDescendants();
71
67
  const [focusedIndex, setFocusedIndex] = (0, import_react.useState)(-1);
72
68
  const [focusVisible, setFocusVisible] = (0, import_react.useState)(false);
73
- const containerRef = (0, import_react.useRef)(null);
69
+ const onChangeRef = (0, import_utils.useCallbackRef)(onChangeProp);
74
70
  const [value, setValue] = (0, import_use_controllable_state.useControllableState)({
75
71
  defaultValue,
76
72
  value: valueProp,
@@ -113,15 +109,10 @@ var SegmentedControl = (0, import_core.forwardRef)(
113
109
  [id, disabled, readOnly, onBlur, rest]
114
110
  );
115
111
  const getInputProps = (0, import_react.useCallback)(
116
- ({
117
- index,
118
- isDisabled: isDisabledProp,
119
- isReadOnly: isReadOnlyProp,
120
- ...props2
121
- }, ref2 = null) => {
122
- var _a, _b, _c, _d;
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;
112
+ ({ index, ...props2 }, ref2 = null) => {
113
+ var _a, _b;
114
+ const trulyDisabled = (_a = props2.disabled) != null ? _a : disabled;
115
+ const trulyReadOnly = (_b = props2.readOnly) != null ? _b : readOnly;
125
116
  const checked = props2.value === value;
126
117
  return {
127
118
  ...props2,
@@ -156,15 +147,10 @@ var SegmentedControl = (0, import_core.forwardRef)(
156
147
  [disabled, readOnly, value, id, name, focusedIndex, onChange]
157
148
  );
158
149
  const getLabelProps = (0, import_react.useCallback)(
159
- ({
160
- index,
161
- isDisabled: isDisabledProp,
162
- isReadOnly: isReadOnlyProp,
163
- ...props2
164
- }, ref2 = null) => {
165
- var _a, _b, _c, _d;
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;
150
+ ({ index, ...props2 }, ref2 = null) => {
151
+ var _a, _b;
152
+ const trulyDisabled = (_a = props2.disabled) != null ? _a : disabled;
153
+ const trulyReadOnly = (_b = props2.readOnly) != null ? _b : readOnly;
168
154
  const checked = props2.value === value;
169
155
  const focused = index === focusedIndex;
170
156
  return {
@@ -239,17 +225,15 @@ var SegmentedControlButton = (0, import_core.forwardRef)(
239
225
  ({
240
226
  className,
241
227
  children,
242
- disabled,
243
228
  isDisabled,
229
+ disabled = isDisabled,
244
230
  isReadOnly,
245
- readOnly,
231
+ readOnly = isReadOnly,
246
232
  value,
247
233
  motionProps,
248
234
  onChange,
249
235
  ...rest
250
236
  }, ref) => {
251
- disabled != null ? disabled : disabled = isDisabled;
252
- readOnly != null ? readOnly : readOnly = isReadOnly;
253
237
  const [, mounted] = (0, import_utils.useMounted)({ rerender: true });
254
238
  const {
255
239
  styles,
@@ -263,8 +247,6 @@ var SegmentedControlButton = (0, import_core.forwardRef)(
263
247
  const props = {
264
248
  disabled,
265
249
  index,
266
- isDisabled,
267
- isReadOnly,
268
250
  readOnly,
269
251
  value
270
252
  };
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 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"]}
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 { index: number } & HTMLProps<\"input\">,\n HTMLProps<\"input\">\n >\n getLabelProps: RequiredPropGetter<\n {\n index: number\n value: string\n disabled?: 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 const uuid = useId()\n const {\n id = uuid,\n name = `segmented-control-${uuid}`,\n className,\n children,\n defaultValue,\n isDisabled,\n disabled = isDisabled,\n isReadOnly,\n items = [],\n readOnly = isReadOnly,\n value: valueProp,\n onChange: onChangeProp,\n ...rest\n } = omitThemeProps(mergedProps)\n const containerRef = useRef<HTMLDivElement>(null)\n const descendants = useDescendants()\n const [focusedIndex, setFocusedIndex] = useState<number>(-1)\n const [focusVisible, setFocusVisible] = useState<boolean>(false)\n const onChangeRef = useCallbackRef(onChangeProp)\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 { index: number } & HTMLProps<\"input\">,\n HTMLUIProps<\"input\">\n > = useCallback(\n ({ index, ...props }, ref = null) => {\n const trulyDisabled = props.disabled ?? disabled\n const trulyReadOnly = props.readOnly ?? 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 readOnly?: boolean\n } & HTMLProps<\"label\">,\n HTMLProps<\"label\">\n > = useCallback(\n ({ index, ...props }, ref = null) => {\n const trulyDisabled = props.disabled ?? disabled\n const trulyReadOnly = props.readOnly ?? 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 isDisabled,\n disabled = isDisabled,\n isReadOnly,\n readOnly = isReadOnly,\n value,\n motionProps,\n onChange,\n ...rest\n },\n ref,\n ) => {\n const [, mounted] = useMounted({ rerender: true })\n const {\n styles,\n value: selectedValue,\n getInputProps,\n getLabelProps,\n } = useSegmentedControl()\n const { index, register } = useDescendant({\n disabled: disabled || readOnly,\n })\n const props = {\n disabled,\n index,\n readOnly,\n value,\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 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;AAgRxD;AA1QR,IAAM,EAAE,4BAA4B,eAAe,eAAe,QAChE,wCAAoC;AAoBtC,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,UAAM,WAAO,oBAAM;AACnB,UAAM;AAAA,MACJ,KAAK;AAAA,MACL,OAAO,qBAAqB,IAAI;AAAA,MAChC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX;AAAA,MACA,QAAQ,CAAC;AAAA,MACT,WAAW;AAAA,MACX,OAAO;AAAA,MACP,UAAU;AAAA,MACV,GAAG;AAAA,IACL,QAAI,4BAAe,WAAW;AAC9B,UAAM,mBAAe,qBAAuB,IAAI;AAChD,UAAM,cAAc,eAAe;AACnC,UAAM,CAAC,cAAc,eAAe,QAAI,uBAAiB,EAAE;AAC3D,UAAM,CAAC,cAAc,eAAe,QAAI,uBAAkB,KAAK;AAC/D,UAAM,kBAAc,6BAAe,YAAY;AAC/C,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,oBAGF;AAAA,MACF,CAAC,EAAE,OAAO,GAAGA,OAAM,GAAGC,OAAM,SAAS;AAtN3C;AAuNQ,cAAM,iBAAgB,KAAAD,OAAM,aAAN,YAAkB;AACxC,cAAM,iBAAgB,KAAAA,OAAM,aAAN,YAAkB;AACxC,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,oBAQF;AAAA,MACF,CAAC,EAAE,OAAO,GAAGA,OAAM,GAAGC,OAAM,SAAS;AAtQ3C;AAuQQ,cAAM,iBAAgB,KAAAD,OAAM,aAAN,YAAkB;AACxC,cAAM,iBAAgB,KAAAA,OAAM,aAAN,YAAkB;AACxC,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,WAAW;AAAA,IACX;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,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;AACxB,UAAM,EAAE,OAAO,SAAS,IAAI,cAAc;AAAA,MACxC,UAAU,YAAY;AAAA,IACxB,CAAC;AACD,UAAM,QAAQ;AAAA,MACZ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AACA,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;AACA,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-3XJF2PHG.mjs";
5
+ } from "./chunk-HDPS6FC6.mjs";
6
6
  export {
7
7
  SegmentedControl,
8
8
  SegmentedControlButton
package/dist/segmented-control.js CHANGED
@@ -44,31 +44,27 @@ var SegmentedControl = (0, import_core.forwardRef)(
44
44
  "SegmentedControl",
45
45
  props
46
46
  );
47
- let {
48
- id,
49
- name,
47
+ const uuid = (0, import_react.useId)();
48
+ const {
49
+ id = uuid,
50
+ name = `segmented-control-${uuid}`,
50
51
  className,
51
52
  children,
52
53
  defaultValue,
53
- disabled,
54
54
  isDisabled,
55
+ disabled = isDisabled,
55
56
  isReadOnly,
56
57
  items = [],
57
- readOnly,
58
+ readOnly = isReadOnly,
58
59
  value: valueProp,
59
60
  onChange: onChangeProp,
60
61
  ...rest
61
62
  } = (0, import_core.omitThemeProps)(mergedProps);
62
- const uuid = (0, import_react.useId)();
63
- id != null ? id : id = uuid;
64
- name != null ? name : name = `segmented-control-${uuid}`;
65
- disabled != null ? disabled : disabled = isDisabled;
66
- readOnly != null ? readOnly : readOnly = isReadOnly;
67
- const onChangeRef = (0, import_utils.useCallbackRef)(onChangeProp);
63
+ const containerRef = (0, import_react.useRef)(null);
68
64
  const descendants = useDescendants();
69
65
  const [focusedIndex, setFocusedIndex] = (0, import_react.useState)(-1);
70
66
  const [focusVisible, setFocusVisible] = (0, import_react.useState)(false);
71
- const containerRef = (0, import_react.useRef)(null);
67
+ const onChangeRef = (0, import_utils.useCallbackRef)(onChangeProp);
72
68
  const [value, setValue] = (0, import_use_controllable_state.useControllableState)({
73
69
  defaultValue,
74
70
  value: valueProp,
@@ -111,15 +107,10 @@ var SegmentedControl = (0, import_core.forwardRef)(
111
107
  [id, disabled, readOnly, onBlur, rest]
112
108
  );
113
109
  const getInputProps = (0, import_react.useCallback)(
114
- ({
115
- index,
116
- isDisabled: isDisabledProp,
117
- isReadOnly: isReadOnlyProp,
118
- ...props2
119
- }, ref2 = null) => {
120
- var _a, _b, _c, _d;
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;
110
+ ({ index, ...props2 }, ref2 = null) => {
111
+ var _a, _b;
112
+ const trulyDisabled = (_a = props2.disabled) != null ? _a : disabled;
113
+ const trulyReadOnly = (_b = props2.readOnly) != null ? _b : readOnly;
123
114
  const checked = props2.value === value;
124
115
  return {
125
116
  ...props2,
@@ -154,15 +145,10 @@ var SegmentedControl = (0, import_core.forwardRef)(
154
145
  [disabled, readOnly, value, id, name, focusedIndex, onChange]
155
146
  );
156
147
  const getLabelProps = (0, import_react.useCallback)(
157
- ({
158
- index,
159
- isDisabled: isDisabledProp,
160
- isReadOnly: isReadOnlyProp,
161
- ...props2
162
- }, ref2 = null) => {
163
- var _a, _b, _c, _d;
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;
148
+ ({ index, ...props2 }, ref2 = null) => {
149
+ var _a, _b;
150
+ const trulyDisabled = (_a = props2.disabled) != null ? _a : disabled;
151
+ const trulyReadOnly = (_b = props2.readOnly) != null ? _b : readOnly;
166
152
  const checked = props2.value === value;
167
153
  const focused = index === focusedIndex;
168
154
  return {
@@ -237,17 +223,15 @@ var SegmentedControlButton = (0, import_core.forwardRef)(
237
223
  ({
238
224
  className,
239
225
  children,
240
- disabled,
241
226
  isDisabled,
227
+ disabled = isDisabled,
242
228
  isReadOnly,
243
- readOnly,
229
+ readOnly = isReadOnly,
244
230
  value,
245
231
  motionProps,
246
232
  onChange,
247
233
  ...rest
248
234
  }, ref) => {
249
- disabled != null ? disabled : disabled = isDisabled;
250
- readOnly != null ? readOnly : readOnly = isReadOnly;
251
235
  const [, mounted] = (0, import_utils.useMounted)({ rerender: true });
252
236
  const {
253
237
  styles,
@@ -261,8 +245,6 @@ var SegmentedControlButton = (0, import_core.forwardRef)(
261
245
  const props = {
262
246
  disabled,
263
247
  index,
264
- isDisabled,
265
- isReadOnly,
266
248
  readOnly,
267
249
  value
268
250
  };
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 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"]}
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 { index: number } & HTMLProps<\"input\">,\n HTMLProps<\"input\">\n >\n getLabelProps: RequiredPropGetter<\n {\n index: number\n value: string\n disabled?: 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 const uuid = useId()\n const {\n id = uuid,\n name = `segmented-control-${uuid}`,\n className,\n children,\n defaultValue,\n isDisabled,\n disabled = isDisabled,\n isReadOnly,\n items = [],\n readOnly = isReadOnly,\n value: valueProp,\n onChange: onChangeProp,\n ...rest\n } = omitThemeProps(mergedProps)\n const containerRef = useRef<HTMLDivElement>(null)\n const descendants = useDescendants()\n const [focusedIndex, setFocusedIndex] = useState<number>(-1)\n const [focusVisible, setFocusVisible] = useState<boolean>(false)\n const onChangeRef = useCallbackRef(onChangeProp)\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 { index: number } & HTMLProps<\"input\">,\n HTMLUIProps<\"input\">\n > = useCallback(\n ({ index, ...props }, ref = null) => {\n const trulyDisabled = props.disabled ?? disabled\n const trulyReadOnly = props.readOnly ?? 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 readOnly?: boolean\n } & HTMLProps<\"label\">,\n HTMLProps<\"label\">\n > = useCallback(\n ({ index, ...props }, ref = null) => {\n const trulyDisabled = props.disabled ?? disabled\n const trulyReadOnly = props.readOnly ?? 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 isDisabled,\n disabled = isDisabled,\n isReadOnly,\n readOnly = isReadOnly,\n value,\n motionProps,\n onChange,\n ...rest\n },\n ref,\n ) => {\n const [, mounted] = useMounted({ rerender: true })\n const {\n styles,\n value: selectedValue,\n getInputProps,\n getLabelProps,\n } = useSegmentedControl()\n const { index, register } = useDescendant({\n disabled: disabled || readOnly,\n })\n const props = {\n disabled,\n index,\n readOnly,\n value,\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 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-3XJF2PHG.mjs";
5
+ } from "./chunk-HDPS6FC6.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.6-dev-20241213213653",
3
+ "version": "1.1.6-dev-20241215203956",
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.2-dev-20241213213653",
40
- "@yamada-ui/motion": "2.2.12-dev-20241213213653",
41
- "@yamada-ui/use-controllable-state": "1.0.26-dev-20241213213653",
42
- "@yamada-ui/use-descendant": "1.0.28-dev-20241213213653",
43
- "@yamada-ui/use-focus-visible": "1.1.13-dev-20241213213653",
44
- "@yamada-ui/utils": "1.6.2-dev-20241213213653"
39
+ "@yamada-ui/core": "1.16.2-dev-20241215203956",
40
+ "@yamada-ui/motion": "2.2.12-dev-20241215203956",
41
+ "@yamada-ui/use-controllable-state": "1.0.26-dev-20241215203956",
42
+ "@yamada-ui/use-descendant": "1.0.28-dev-20241215203956",
43
+ "@yamada-ui/use-focus-visible": "1.1.13-dev-20241215203956",
44
+ "@yamada-ui/utils": "1.6.2-dev-20241215203956"
45
45
  },
46
46
  "devDependencies": {
47
47
  "clean-package": "2.2.0",
package/dist/chunk-3XJF2PHG.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 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"]}