@yamada-ui/segmented-control 1.0.2 → 1.0.3-dev-20231229025828

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-F234O63Q.mjs → chunk-6LEHUYFW.mjs} +3 -5
  2. package/dist/chunk-6LEHUYFW.mjs.map +1 -0
  3. package/dist/index.js +2 -4
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +1 -1
  6. package/dist/segmented-control.js +2 -4
  7. package/dist/segmented-control.js.map +1 -1
  8. package/dist/segmented-control.mjs +1 -1
  9. package/package.json +1 -1
  10. package/dist/chunk-F234O63Q.mjs.map +0 -1
package/dist/{chunk-F234O63Q.mjs → chunk-6LEHUYFW.mjs} RENAMED
@@ -180,7 +180,6 @@ var SegmentedControl = forwardRef(
180
180
  return trackFocusVisible(setIsFocusVisible);
181
181
  }, []);
182
182
  const css = {
183
- position: "relative",
184
183
  display: "inline-flex",
185
184
  alignItems: "center",
186
185
  ...styles.container
@@ -266,8 +265,8 @@ var SegmentedControlButton = forwardRef(
266
265
  ...rest,
267
266
  children: [
268
267
  /* @__PURE__ */ jsx(ui.input, { ...getInputProps(props, mergeRefs(register, ref)) }),
269
- /* @__PURE__ */ jsx(ui.span, { children }),
270
- isSelected && isMounted ? /* @__PURE__ */ jsx(SegmentedControlCursor, { ...motionProps }) : null
268
+ isSelected && isMounted ? /* @__PURE__ */ jsx(SegmentedControlCursor, { ...motionProps }) : null,
269
+ /* @__PURE__ */ jsx(ui.span, { zIndex: "1", children })
271
270
  ]
272
271
  }
273
272
  );
@@ -282,7 +281,6 @@ var SegmentedControlCursor = ({
282
281
  const { styles } = useSegmentedControl();
283
282
  const css = {
284
283
  position: "absolute",
285
- zIndex: "-10",
286
284
  w: "full",
287
285
  h: "full",
288
286
  ...styles.cursor
@@ -309,4 +307,4 @@ export {
309
307
  SegmentedControl,
310
308
  SegmentedControlButton
311
309
  };
312
- //# sourceMappingURL=chunk-F234O63Q.mjs.map
310
+ //# sourceMappingURL=chunk-6LEHUYFW.mjs.map
package/dist/chunk-6LEHUYFW.mjs.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/segmented-control.tsx"],"sourcesContent":["import type { CSSUIObject, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n useMultiComponentStyle,\n omitThemeProps,\n} from \"@yamada-ui/core\"\nimport type { MotionProps } from \"@yamada-ui/motion\"\nimport { LayoutGroup, Motion } from \"@yamada-ui/motion\"\nimport { useControllableState } from \"@yamada-ui/use-controllable-state\"\nimport { createDescendant } from \"@yamada-ui/use-descendant\"\nimport { trackFocusVisible } from \"@yamada-ui/use-focus-visible\"\nimport type { PropGetter, RequiredPropGetter } from \"@yamada-ui/utils\"\nimport {\n ariaAttr,\n createContext,\n cx,\n dataAttr,\n getValidChildren,\n handlerAll,\n mergeRefs,\n omitObject,\n useCallbackRef,\n useIsMounted,\n} from \"@yamada-ui/utils\"\nimport type { ChangeEvent, ChangeEventHandler, FC, ReactElement } from \"react\"\nimport { useCallback, useEffect, useId, useRef, useState } from \"react\"\n\nexport type SegmentedControlItem = SegmentedControlButtonProps & {\n label?: string\n}\n\nconst { DescendantsContextProvider, useDescendants, useDescendant } =\n createDescendant<HTMLButtonElement>()\n\ntype SegmentedControlContext = {\n selectedValue: string\n getInputProps: RequiredPropGetter<{ index: number }>\n getLabelProps: RequiredPropGetter<{ index: number }>\n styles: Record<string, CSSUIObject>\n}\n\nconst [SegmentedControlProvider, useSegmentedControl] =\n createContext<SegmentedControlContext>({\n strict: false,\n name: \"SegmentedControlContext\",\n })\n\ntype SegmentedControlOptions = {\n /**\n * The HTML `name` attribute used for forms.\n */\n name?: string\n /**\n * The value of the segmented control.\n */\n value?: string\n /**\n * The initial value of the segmented control.\n */\n defaultValue?: string\n /**\n * The callback fired when any children radio is checked or unchecked.\n */\n onChange?: (value: string) => void\n /**\n * If `true`, the segmented control will be readonly.\n *\n * @default false\n */\n isReadOnly?: boolean\n /**\n * If `true`, the segmented control will be disabled.\n *\n * @default false\n */\n isDisabled?: boolean\n /**\n * If provided, generate segmented control buttons but based on items.\n *\n * @default '[]'\n */\n items?: SegmentedControlItem[]\n}\n\nexport type SegmentedControlProps = Omit<\n HTMLUIProps<\"div\">,\n \"value\" | \"defaultValue\" | \"onChange\"\n> &\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] = useMultiComponentStyle(\n \"SegmentedControl\",\n props,\n )\n let {\n className,\n id,\n name,\n isReadOnly,\n isDisabled,\n children,\n items = [],\n value,\n defaultValue,\n ...rest\n } = omitThemeProps(mergedProps)\n\n id ??= useId()\n name ??= `segmented-control-${useId()}`\n\n rest.onChange = useCallbackRef(rest.onChange)\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 const labelRefs = useRef<Map<string | number, HTMLLabelElement>>(new Map())\n\n const [selectedValue, setSelectedValue] = useControllableState({\n value,\n defaultValue,\n onChange: rest.onChange,\n })\n\n const onChange = useCallback(\n (ev: ChangeEvent<HTMLInputElement>) => {\n if (isDisabled || isReadOnly) {\n ev.preventDefault()\n\n return\n }\n\n setSelectedValue(ev.target.value)\n },\n [isDisabled, isReadOnly, setSelectedValue],\n )\n\n const onFocus = useCallback(\n (index: number, skip: boolean) => {\n if (isDisabled) return\n\n if (skip) {\n const next = descendants.enabledNextValue(index)\n\n if (next) setFocusedIndex(next.index)\n } else {\n setFocusedIndex(index)\n }\n },\n [descendants, isDisabled],\n )\n\n const onBlur = useCallback(() => setFocusedIndex(-1), [])\n\n const getContainerProps: PropGetter = useCallback(\n (props = {}, ref = null) => ({\n ...omitObject(rest, [\"onChange\"]),\n ...props,\n ref: mergeRefs(containerRef, ref),\n id,\n \"aria-disabled\": ariaAttr(isDisabled),\n \"aria-readonly\": ariaAttr(isReadOnly),\n onBlur: handlerAll(props.onBlur, onBlur),\n }),\n [id, isDisabled, isReadOnly, onBlur, rest],\n )\n\n const getInputProps: RequiredPropGetter<{ index: number }> = useCallback(\n ({ index, ...props } = {}, ref = null) => {\n const disabled = props.disabled ?? props.isDisabled ?? isDisabled\n const readOnly = props.readOnly ?? props.isReadOnly ?? isReadOnly\n const checked = props.value === selectedValue\n\n return {\n ...omitObject(props, [\"isDisabled\", \"isReadOnly\"]),\n ref,\n id: `${id}-${index}`,\n type: \"radio\",\n name,\n disabled: disabled || readOnly,\n readOnly,\n checked,\n \"aria-disabled\": ariaAttr(disabled),\n \"aria-readonly\": ariaAttr(readOnly),\n \"data-checked\": dataAttr(checked),\n \"data-focus\": dataAttr(index === focusedIndex),\n style: {\n border: \"0px\",\n clip: \"rect(0px, 0px, 0px, 0px)\",\n height: \"1px\",\n width: \"1px\",\n margin: \"-1px\",\n padding: \"0px\",\n overflow: \"hidden\",\n whiteSpace: \"nowrap\",\n position: \"absolute\",\n },\n onChange: handlerAll(props.onChange, (ev) =>\n !disabled && !readOnly\n ? onChange(ev as ChangeEvent<HTMLInputElement>)\n : {},\n ),\n }\n },\n [isDisabled, isReadOnly, selectedValue, id, name, focusedIndex, onChange],\n )\n\n const getLabelProps: RequiredPropGetter<{ index: number }> = useCallback(\n ({ index, ...props } = {}, ref = null) => {\n const disabled = props.disabled ?? props.isDisabled ?? isDisabled\n const readOnly = props.readOnly ?? props.isReadOnly ?? isReadOnly\n const checked = props.value === selectedValue\n const focused = index === focusedIndex\n\n return {\n props,\n ref: mergeRefs(\n (node) => labelRefs.current.set(props.value, node),\n ref,\n ),\n \"aria-disabled\": ariaAttr(disabled),\n \"aria-readonly\": ariaAttr(readOnly),\n \"data-checked\": dataAttr(checked),\n \"data-focus\": dataAttr(focused),\n \"data-focus-visible\": dataAttr(focused && isFocusVisible),\n onFocus: handlerAll(props.onFocus, () =>\n onFocus(index, disabled || readOnly),\n ),\n ...(disabled || readOnly\n ? {\n _hover: {},\n _active: {},\n _focus: {},\n _invalid: {},\n _focusVisible: {},\n }\n : {}),\n }\n },\n [\n focusedIndex,\n isDisabled,\n isFocusVisible,\n isReadOnly,\n onFocus,\n selectedValue,\n ],\n )\n\n useEffect(() => {\n return trackFocusVisible(setIsFocusVisible)\n }, [])\n\n const css: CSSUIObject = {\n display: \"inline-flex\",\n alignItems: \"center\",\n ...styles.container,\n }\n\n const validChildren = getValidChildren(children)\n let computedChildren: ReactElement[] = []\n\n if (!validChildren.length && items.length) {\n computedChildren = items.map(({ label, value, ...props }, i) => (\n <SegmentedControlButton key={i} value={value} {...props}>\n {label}\n </SegmentedControlButton>\n ))\n } else {\n computedChildren = validChildren\n }\n\n if (selectedValue == null && defaultValue == null) {\n for (const child of computedChildren) {\n if (child.type !== SegmentedControlButton)\n if (\n (child.type as any).displayName !==\n SegmentedControlButton.displayName\n )\n continue\n\n const value = child.props.value\n\n setSelectedValue(value)\n\n break\n }\n }\n\n return (\n <DescendantsContextProvider value={descendants}>\n <SegmentedControlProvider\n value={{ getInputProps, getLabelProps, styles, selectedValue }}\n >\n <LayoutGroup id={id}>\n <ui.div\n {...getContainerProps({}, ref)}\n className={cx(\"ui-segmented-control\", className)}\n __css={css}\n >\n {computedChildren}\n </ui.div>\n </LayoutGroup>\n </SegmentedControlProvider>\n </DescendantsContextProvider>\n )\n },\n)\n\ntype SegmentedControlButtonOptions = {\n /**\n * The value of the segmented control button.\n */\n value: string | number\n /**\n * The callback fired when any children radio is checked or unchecked.\n */\n onChange?: ChangeEventHandler<HTMLInputElement>\n /**\n * Props for motion component.\n */\n motionProps?: MotionProps\n}\n\nexport type SegmentedControlButtonProps = Omit<\n HTMLUIProps<\"label\">,\n \"onChange\"\n> &\n Pick<SegmentedControlProps, \"isDisabled\" | \"isReadOnly\"> &\n SegmentedControlButtonOptions\n\nexport const SegmentedControlButton = forwardRef<\n SegmentedControlButtonProps,\n \"input\"\n>(\n (\n {\n className,\n disabled,\n readOnly,\n isDisabled,\n isReadOnly,\n value,\n onChange,\n children,\n motionProps,\n ...rest\n },\n ref,\n ) => {\n const [, isMounted] = useIsMounted({ rerender: true })\n const { selectedValue, getInputProps, getLabelProps, styles } =\n useSegmentedControl()\n\n const { index, register } = useDescendant({\n disabled: isDisabled || isReadOnly,\n })\n\n const props = {\n index,\n value,\n onChange,\n disabled,\n readOnly,\n isDisabled,\n isReadOnly,\n }\n\n const css: CSSUIObject = {\n position: \"relative\",\n cursor: \"pointer\",\n flex: \"1 1 0%\",\n display: \"inline-flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n ...styles.button,\n }\n\n const isSelected = selectedValue === value\n\n return (\n <ui.label\n {...getLabelProps(omitObject(props, [\"onChange\"]))}\n className={cx(\"ui-segmented-control__button\", className)}\n __css={css}\n {...rest}\n >\n <ui.input {...getInputProps(props, mergeRefs(register, ref))} />\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\"\n\ntype SegmentedControlCursorProps = MotionProps & { className?: string }\n\nconst SegmentedControlCursor: FC<SegmentedControlCursorProps> = ({\n className,\n transition,\n ...rest\n}) => {\n const { styles } = useSegmentedControl()\n\n const css: CSSUIObject = {\n position: \"absolute\",\n w: \"full\",\n h: \"full\",\n ...styles.cursor,\n }\n\n return (\n <Motion\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"],"mappings":"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","names":["props","ref","value"]}
package/dist/index.js CHANGED
@@ -190,7 +190,6 @@ var SegmentedControl = (0, import_core.forwardRef)(
190
190
  return (0, import_use_focus_visible.trackFocusVisible)(setIsFocusVisible);
191
191
  }, []);
192
192
  const css = {
193
- position: "relative",
194
193
  display: "inline-flex",
195
194
  alignItems: "center",
196
195
  ...styles.container
@@ -276,8 +275,8 @@ var SegmentedControlButton = (0, import_core.forwardRef)(
276
275
  ...rest,
277
276
  children: [
278
277
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.ui.input, { ...getInputProps(props, (0, import_utils.mergeRefs)(register, ref)) }),
279
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.ui.span, { children }),
280
- isSelected && isMounted ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SegmentedControlCursor, { ...motionProps }) : null
278
+ isSelected && isMounted ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SegmentedControlCursor, { ...motionProps }) : null,
279
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.ui.span, { zIndex: "1", children })
281
280
  ]
282
281
  }
283
282
  );
@@ -292,7 +291,6 @@ var SegmentedControlCursor = ({
292
291
  const { styles } = useSegmentedControl();
293
292
  const css = {
294
293
  position: "absolute",
295
- zIndex: "-10",
296
294
  w: "full",
297
295
  h: "full",
298
296
  ...styles.cursor
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/index.ts","../src/segmented-control.tsx"],"sourcesContent":["export { SegmentedControl, SegmentedControlButton } from \"./segmented-control\"\nexport type {\n SegmentedControlItem,\n SegmentedControlProps,\n SegmentedControlButtonProps,\n} from \"./segmented-control\"\n","import type { CSSUIObject, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n useMultiComponentStyle,\n omitThemeProps,\n} from \"@yamada-ui/core\"\nimport type { MotionProps } from \"@yamada-ui/motion\"\nimport { LayoutGroup, Motion } from \"@yamada-ui/motion\"\nimport { useControllableState } from \"@yamada-ui/use-controllable-state\"\nimport { createDescendant } from \"@yamada-ui/use-descendant\"\nimport { trackFocusVisible } from \"@yamada-ui/use-focus-visible\"\nimport type { PropGetter, RequiredPropGetter } from \"@yamada-ui/utils\"\nimport {\n ariaAttr,\n createContext,\n cx,\n dataAttr,\n getValidChildren,\n handlerAll,\n mergeRefs,\n omitObject,\n useCallbackRef,\n useIsMounted,\n} from \"@yamada-ui/utils\"\nimport type { ChangeEvent, ChangeEventHandler, FC, ReactElement } from \"react\"\nimport { useCallback, useEffect, useId, useRef, useState } from \"react\"\n\nexport type SegmentedControlItem = SegmentedControlButtonProps & {\n label?: string\n}\n\nconst { DescendantsContextProvider, useDescendants, useDescendant } =\n createDescendant<HTMLButtonElement>()\n\ntype SegmentedControlContext = {\n selectedValue: string\n getInputProps: RequiredPropGetter<{ index: number }>\n getLabelProps: RequiredPropGetter<{ index: number }>\n styles: Record<string, CSSUIObject>\n}\n\nconst [SegmentedControlProvider, useSegmentedControl] =\n createContext<SegmentedControlContext>({\n strict: false,\n name: \"SegmentedControlContext\",\n })\n\ntype SegmentedControlOptions = {\n /**\n * The HTML `name` attribute used for forms.\n */\n name?: string\n /**\n * The value of the segmented control.\n */\n value?: string\n /**\n * The initial value of the segmented control.\n */\n defaultValue?: string\n /**\n * The callback fired when any children radio is checked or unchecked.\n */\n onChange?: (value: string) => void\n /**\n * If `true`, the segmented control will be readonly.\n *\n * @default false\n */\n isReadOnly?: boolean\n /**\n * If `true`, the segmented control will be disabled.\n *\n * @default false\n */\n isDisabled?: boolean\n /**\n * If provided, generate segmented control buttons but based on items.\n *\n * @default '[]'\n */\n items?: SegmentedControlItem[]\n}\n\nexport type SegmentedControlProps = Omit<\n HTMLUIProps<\"div\">,\n \"value\" | \"defaultValue\" | \"onChange\"\n> &\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] = useMultiComponentStyle(\n \"SegmentedControl\",\n props,\n )\n let {\n className,\n id,\n name,\n isReadOnly,\n isDisabled,\n children,\n items = [],\n value,\n defaultValue,\n ...rest\n } = omitThemeProps(mergedProps)\n\n id ??= useId()\n name ??= `segmented-control-${useId()}`\n\n rest.onChange = useCallbackRef(rest.onChange)\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 const labelRefs = useRef<Map<string | number, HTMLLabelElement>>(new Map())\n\n const [selectedValue, setSelectedValue] = useControllableState({\n value,\n defaultValue,\n onChange: rest.onChange,\n })\n\n const onChange = useCallback(\n (ev: ChangeEvent<HTMLInputElement>) => {\n if (isDisabled || isReadOnly) {\n ev.preventDefault()\n\n return\n }\n\n setSelectedValue(ev.target.value)\n },\n [isDisabled, isReadOnly, setSelectedValue],\n )\n\n const onFocus = useCallback(\n (index: number, skip: boolean) => {\n if (isDisabled) return\n\n if (skip) {\n const next = descendants.enabledNextValue(index)\n\n if (next) setFocusedIndex(next.index)\n } else {\n setFocusedIndex(index)\n }\n },\n [descendants, isDisabled],\n )\n\n const onBlur = useCallback(() => setFocusedIndex(-1), [])\n\n const getContainerProps: PropGetter = useCallback(\n (props = {}, ref = null) => ({\n ...omitObject(rest, [\"onChange\"]),\n ...props,\n ref: mergeRefs(containerRef, ref),\n id,\n \"aria-disabled\": ariaAttr(isDisabled),\n \"aria-readonly\": ariaAttr(isReadOnly),\n onBlur: handlerAll(props.onBlur, onBlur),\n }),\n [id, isDisabled, isReadOnly, onBlur, rest],\n )\n\n const getInputProps: RequiredPropGetter<{ index: number }> = useCallback(\n ({ index, ...props } = {}, ref = null) => {\n const disabled = props.disabled ?? props.isDisabled ?? isDisabled\n const readOnly = props.readOnly ?? props.isReadOnly ?? isReadOnly\n const checked = props.value === selectedValue\n\n return {\n ...omitObject(props, [\"isDisabled\", \"isReadOnly\"]),\n ref,\n id: `${id}-${index}`,\n type: \"radio\",\n name,\n disabled: disabled || readOnly,\n readOnly,\n checked,\n \"aria-disabled\": ariaAttr(disabled),\n \"aria-readonly\": ariaAttr(readOnly),\n \"data-checked\": dataAttr(checked),\n \"data-focus\": dataAttr(index === focusedIndex),\n style: {\n border: \"0px\",\n clip: \"rect(0px, 0px, 0px, 0px)\",\n height: \"1px\",\n width: \"1px\",\n margin: \"-1px\",\n padding: \"0px\",\n overflow: \"hidden\",\n whiteSpace: \"nowrap\",\n position: \"absolute\",\n },\n onChange: handlerAll(props.onChange, (ev) =>\n !disabled && !readOnly\n ? onChange(ev as ChangeEvent<HTMLInputElement>)\n : {},\n ),\n }\n },\n [isDisabled, isReadOnly, selectedValue, id, name, focusedIndex, onChange],\n )\n\n const getLabelProps: RequiredPropGetter<{ index: number }> = useCallback(\n ({ index, ...props } = {}, ref = null) => {\n const disabled = props.disabled ?? props.isDisabled ?? isDisabled\n const readOnly = props.readOnly ?? props.isReadOnly ?? isReadOnly\n const checked = props.value === selectedValue\n const focused = index === focusedIndex\n\n return {\n props,\n ref: mergeRefs(\n (node) => labelRefs.current.set(props.value, node),\n ref,\n ),\n \"aria-disabled\": ariaAttr(disabled),\n \"aria-readonly\": ariaAttr(readOnly),\n \"data-checked\": dataAttr(checked),\n \"data-focus\": dataAttr(focused),\n \"data-focus-visible\": dataAttr(focused && isFocusVisible),\n onFocus: handlerAll(props.onFocus, () =>\n onFocus(index, disabled || readOnly),\n ),\n ...(disabled || readOnly\n ? {\n _hover: {},\n _active: {},\n _focus: {},\n _invalid: {},\n _focusVisible: {},\n }\n : {}),\n }\n },\n [\n focusedIndex,\n isDisabled,\n isFocusVisible,\n isReadOnly,\n onFocus,\n selectedValue,\n ],\n )\n\n useEffect(() => {\n return trackFocusVisible(setIsFocusVisible)\n }, [])\n\n const css: CSSUIObject = {\n position: \"relative\",\n display: \"inline-flex\",\n alignItems: \"center\",\n ...styles.container,\n }\n\n const validChildren = getValidChildren(children)\n let computedChildren: ReactElement[] = []\n\n if (!validChildren.length && items.length) {\n computedChildren = items.map(({ label, value, ...props }, i) => (\n <SegmentedControlButton key={i} value={value} {...props}>\n {label}\n </SegmentedControlButton>\n ))\n } else {\n computedChildren = validChildren\n }\n\n if (selectedValue == null && defaultValue == null) {\n for (const child of computedChildren) {\n if (child.type !== SegmentedControlButton)\n if (\n (child.type as any).displayName !==\n SegmentedControlButton.displayName\n )\n continue\n\n const value = child.props.value\n\n setSelectedValue(value)\n\n break\n }\n }\n\n return (\n <DescendantsContextProvider value={descendants}>\n <SegmentedControlProvider\n value={{ getInputProps, getLabelProps, styles, selectedValue }}\n >\n <LayoutGroup id={id}>\n <ui.div\n {...getContainerProps({}, ref)}\n className={cx(\"ui-segmented-control\", className)}\n __css={css}\n >\n {computedChildren}\n </ui.div>\n </LayoutGroup>\n </SegmentedControlProvider>\n </DescendantsContextProvider>\n )\n },\n)\n\ntype SegmentedControlButtonOptions = {\n /**\n * The value of the segmented control button.\n */\n value: string | number\n /**\n * The callback fired when any children radio is checked or unchecked.\n */\n onChange?: ChangeEventHandler<HTMLInputElement>\n /**\n * Props for motion component.\n */\n motionProps?: MotionProps\n}\n\nexport type SegmentedControlButtonProps = Omit<\n HTMLUIProps<\"label\">,\n \"onChange\"\n> &\n Pick<SegmentedControlProps, \"isDisabled\" | \"isReadOnly\"> &\n SegmentedControlButtonOptions\n\nexport const SegmentedControlButton = forwardRef<\n SegmentedControlButtonProps,\n \"input\"\n>(\n (\n {\n className,\n disabled,\n readOnly,\n isDisabled,\n isReadOnly,\n value,\n onChange,\n children,\n motionProps,\n ...rest\n },\n ref,\n ) => {\n const [, isMounted] = useIsMounted({ rerender: true })\n const { selectedValue, getInputProps, getLabelProps, styles } =\n useSegmentedControl()\n\n const { index, register } = useDescendant({\n disabled: isDisabled || isReadOnly,\n })\n\n const props = {\n index,\n value,\n onChange,\n disabled,\n readOnly,\n isDisabled,\n isReadOnly,\n }\n\n const css: CSSUIObject = {\n position: \"relative\",\n cursor: \"pointer\",\n flex: \"1 1 0%\",\n display: \"inline-flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n ...styles.button,\n }\n\n const isSelected = selectedValue === value\n\n return (\n <ui.label\n {...getLabelProps(omitObject(props, [\"onChange\"]))}\n className={cx(\"ui-segmented-control__button\", className)}\n __css={css}\n {...rest}\n >\n <ui.input {...getInputProps(props, mergeRefs(register, ref))} />\n <ui.span>{children}</ui.span>\n {isSelected && isMounted ? (\n <SegmentedControlCursor {...motionProps} />\n ) : null}\n </ui.label>\n )\n },\n)\n\nSegmentedControlButton.displayName = \"SegmentedControlButton\"\n\ntype SegmentedControlCursorProps = MotionProps & { className?: string }\n\nconst SegmentedControlCursor: FC<SegmentedControlCursorProps> = ({\n className,\n transition,\n ...rest\n}) => {\n const { styles } = useSegmentedControl()\n\n const css: CSSUIObject = {\n position: \"absolute\",\n zIndex: \"-10\",\n w: \"full\",\n h: \"full\",\n ...styles.cursor,\n }\n\n return (\n <Motion\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"],"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 SegmentedControlItem,\n SegmentedControlProps,\n SegmentedControlButtonProps,\n} from \"./segmented-control\"\n","import type { CSSUIObject, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n useMultiComponentStyle,\n omitThemeProps,\n} from \"@yamada-ui/core\"\nimport type { MotionProps } from \"@yamada-ui/motion\"\nimport { LayoutGroup, Motion } from \"@yamada-ui/motion\"\nimport { useControllableState } from \"@yamada-ui/use-controllable-state\"\nimport { createDescendant } from \"@yamada-ui/use-descendant\"\nimport { trackFocusVisible } from \"@yamada-ui/use-focus-visible\"\nimport type { PropGetter, RequiredPropGetter } from \"@yamada-ui/utils\"\nimport {\n ariaAttr,\n createContext,\n cx,\n dataAttr,\n getValidChildren,\n handlerAll,\n mergeRefs,\n omitObject,\n useCallbackRef,\n useIsMounted,\n} from \"@yamada-ui/utils\"\nimport type { ChangeEvent, ChangeEventHandler, FC, ReactElement } from \"react\"\nimport { useCallback, useEffect, useId, useRef, useState } from \"react\"\n\nexport type SegmentedControlItem = SegmentedControlButtonProps & {\n label?: string\n}\n\nconst { DescendantsContextProvider, useDescendants, useDescendant } =\n createDescendant<HTMLButtonElement>()\n\ntype SegmentedControlContext = {\n selectedValue: string\n getInputProps: RequiredPropGetter<{ index: number }>\n getLabelProps: RequiredPropGetter<{ index: number }>\n styles: Record<string, CSSUIObject>\n}\n\nconst [SegmentedControlProvider, useSegmentedControl] =\n createContext<SegmentedControlContext>({\n strict: false,\n name: \"SegmentedControlContext\",\n })\n\ntype SegmentedControlOptions = {\n /**\n * The HTML `name` attribute used for forms.\n */\n name?: string\n /**\n * The value of the segmented control.\n */\n value?: string\n /**\n * The initial value of the segmented control.\n */\n defaultValue?: string\n /**\n * The callback fired when any children radio is checked or unchecked.\n */\n onChange?: (value: string) => void\n /**\n * If `true`, the segmented control will be readonly.\n *\n * @default false\n */\n isReadOnly?: boolean\n /**\n * If `true`, the segmented control will be disabled.\n *\n * @default false\n */\n isDisabled?: boolean\n /**\n * If provided, generate segmented control buttons but based on items.\n *\n * @default '[]'\n */\n items?: SegmentedControlItem[]\n}\n\nexport type SegmentedControlProps = Omit<\n HTMLUIProps<\"div\">,\n \"value\" | \"defaultValue\" | \"onChange\"\n> &\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] = useMultiComponentStyle(\n \"SegmentedControl\",\n props,\n )\n let {\n className,\n id,\n name,\n isReadOnly,\n isDisabled,\n children,\n items = [],\n value,\n defaultValue,\n ...rest\n } = omitThemeProps(mergedProps)\n\n id ??= useId()\n name ??= `segmented-control-${useId()}`\n\n rest.onChange = useCallbackRef(rest.onChange)\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 const labelRefs = useRef<Map<string | number, HTMLLabelElement>>(new Map())\n\n const [selectedValue, setSelectedValue] = useControllableState({\n value,\n defaultValue,\n onChange: rest.onChange,\n })\n\n const onChange = useCallback(\n (ev: ChangeEvent<HTMLInputElement>) => {\n if (isDisabled || isReadOnly) {\n ev.preventDefault()\n\n return\n }\n\n setSelectedValue(ev.target.value)\n },\n [isDisabled, isReadOnly, setSelectedValue],\n )\n\n const onFocus = useCallback(\n (index: number, skip: boolean) => {\n if (isDisabled) return\n\n if (skip) {\n const next = descendants.enabledNextValue(index)\n\n if (next) setFocusedIndex(next.index)\n } else {\n setFocusedIndex(index)\n }\n },\n [descendants, isDisabled],\n )\n\n const onBlur = useCallback(() => setFocusedIndex(-1), [])\n\n const getContainerProps: PropGetter = useCallback(\n (props = {}, ref = null) => ({\n ...omitObject(rest, [\"onChange\"]),\n ...props,\n ref: mergeRefs(containerRef, ref),\n id,\n \"aria-disabled\": ariaAttr(isDisabled),\n \"aria-readonly\": ariaAttr(isReadOnly),\n onBlur: handlerAll(props.onBlur, onBlur),\n }),\n [id, isDisabled, isReadOnly, onBlur, rest],\n )\n\n const getInputProps: RequiredPropGetter<{ index: number }> = useCallback(\n ({ index, ...props } = {}, ref = null) => {\n const disabled = props.disabled ?? props.isDisabled ?? isDisabled\n const readOnly = props.readOnly ?? props.isReadOnly ?? isReadOnly\n const checked = props.value === selectedValue\n\n return {\n ...omitObject(props, [\"isDisabled\", \"isReadOnly\"]),\n ref,\n id: `${id}-${index}`,\n type: \"radio\",\n name,\n disabled: disabled || readOnly,\n readOnly,\n checked,\n \"aria-disabled\": ariaAttr(disabled),\n \"aria-readonly\": ariaAttr(readOnly),\n \"data-checked\": dataAttr(checked),\n \"data-focus\": dataAttr(index === focusedIndex),\n style: {\n border: \"0px\",\n clip: \"rect(0px, 0px, 0px, 0px)\",\n height: \"1px\",\n width: \"1px\",\n margin: \"-1px\",\n padding: \"0px\",\n overflow: \"hidden\",\n whiteSpace: \"nowrap\",\n position: \"absolute\",\n },\n onChange: handlerAll(props.onChange, (ev) =>\n !disabled && !readOnly\n ? onChange(ev as ChangeEvent<HTMLInputElement>)\n : {},\n ),\n }\n },\n [isDisabled, isReadOnly, selectedValue, id, name, focusedIndex, onChange],\n )\n\n const getLabelProps: RequiredPropGetter<{ index: number }> = useCallback(\n ({ index, ...props } = {}, ref = null) => {\n const disabled = props.disabled ?? props.isDisabled ?? isDisabled\n const readOnly = props.readOnly ?? props.isReadOnly ?? isReadOnly\n const checked = props.value === selectedValue\n const focused = index === focusedIndex\n\n return {\n props,\n ref: mergeRefs(\n (node) => labelRefs.current.set(props.value, node),\n ref,\n ),\n \"aria-disabled\": ariaAttr(disabled),\n \"aria-readonly\": ariaAttr(readOnly),\n \"data-checked\": dataAttr(checked),\n \"data-focus\": dataAttr(focused),\n \"data-focus-visible\": dataAttr(focused && isFocusVisible),\n onFocus: handlerAll(props.onFocus, () =>\n onFocus(index, disabled || readOnly),\n ),\n ...(disabled || readOnly\n ? {\n _hover: {},\n _active: {},\n _focus: {},\n _invalid: {},\n _focusVisible: {},\n }\n : {}),\n }\n },\n [\n focusedIndex,\n isDisabled,\n isFocusVisible,\n isReadOnly,\n onFocus,\n selectedValue,\n ],\n )\n\n useEffect(() => {\n return trackFocusVisible(setIsFocusVisible)\n }, [])\n\n const css: CSSUIObject = {\n display: \"inline-flex\",\n alignItems: \"center\",\n ...styles.container,\n }\n\n const validChildren = getValidChildren(children)\n let computedChildren: ReactElement[] = []\n\n if (!validChildren.length && items.length) {\n computedChildren = items.map(({ label, value, ...props }, i) => (\n <SegmentedControlButton key={i} value={value} {...props}>\n {label}\n </SegmentedControlButton>\n ))\n } else {\n computedChildren = validChildren\n }\n\n if (selectedValue == null && defaultValue == null) {\n for (const child of computedChildren) {\n if (child.type !== SegmentedControlButton)\n if (\n (child.type as any).displayName !==\n SegmentedControlButton.displayName\n )\n continue\n\n const value = child.props.value\n\n setSelectedValue(value)\n\n break\n }\n }\n\n return (\n <DescendantsContextProvider value={descendants}>\n <SegmentedControlProvider\n value={{ getInputProps, getLabelProps, styles, selectedValue }}\n >\n <LayoutGroup id={id}>\n <ui.div\n {...getContainerProps({}, ref)}\n className={cx(\"ui-segmented-control\", className)}\n __css={css}\n >\n {computedChildren}\n </ui.div>\n </LayoutGroup>\n </SegmentedControlProvider>\n </DescendantsContextProvider>\n )\n },\n)\n\ntype SegmentedControlButtonOptions = {\n /**\n * The value of the segmented control button.\n */\n value: string | number\n /**\n * The callback fired when any children radio is checked or unchecked.\n */\n onChange?: ChangeEventHandler<HTMLInputElement>\n /**\n * Props for motion component.\n */\n motionProps?: MotionProps\n}\n\nexport type SegmentedControlButtonProps = Omit<\n HTMLUIProps<\"label\">,\n \"onChange\"\n> &\n Pick<SegmentedControlProps, \"isDisabled\" | \"isReadOnly\"> &\n SegmentedControlButtonOptions\n\nexport const SegmentedControlButton = forwardRef<\n SegmentedControlButtonProps,\n \"input\"\n>(\n (\n {\n className,\n disabled,\n readOnly,\n isDisabled,\n isReadOnly,\n value,\n onChange,\n children,\n motionProps,\n ...rest\n },\n ref,\n ) => {\n const [, isMounted] = useIsMounted({ rerender: true })\n const { selectedValue, getInputProps, getLabelProps, styles } =\n useSegmentedControl()\n\n const { index, register } = useDescendant({\n disabled: isDisabled || isReadOnly,\n })\n\n const props = {\n index,\n value,\n onChange,\n disabled,\n readOnly,\n isDisabled,\n isReadOnly,\n }\n\n const css: CSSUIObject = {\n position: \"relative\",\n cursor: \"pointer\",\n flex: \"1 1 0%\",\n display: \"inline-flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n ...styles.button,\n }\n\n const isSelected = selectedValue === value\n\n return (\n <ui.label\n {...getLabelProps(omitObject(props, [\"onChange\"]))}\n className={cx(\"ui-segmented-control__button\", className)}\n __css={css}\n {...rest}\n >\n <ui.input {...getInputProps(props, mergeRefs(register, ref))} />\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\"\n\ntype SegmentedControlCursorProps = MotionProps & { className?: string }\n\nconst SegmentedControlCursor: FC<SegmentedControlCursorProps> = ({\n className,\n transition,\n ...rest\n}) => {\n const { styles } = useSegmentedControl()\n\n const css: CSSUIObject = {\n position: \"absolute\",\n w: \"full\",\n h: \"full\",\n ...styles.cursor,\n }\n\n return (\n <Motion\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"],"mappings":"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","names":["props","ref","value"]}
package/dist/index.mjs CHANGED
@@ -2,7 +2,7 @@
2
2
  import {
3
3
  SegmentedControl,
4
4
  SegmentedControlButton
5
- } from "./chunk-F234O63Q.mjs";
5
+ } from "./chunk-6LEHUYFW.mjs";
6
6
  export {
7
7
  SegmentedControl,
8
8
  SegmentedControlButton
package/dist/segmented-control.js CHANGED
@@ -188,7 +188,6 @@ var SegmentedControl = (0, import_core.forwardRef)(
188
188
  return (0, import_use_focus_visible.trackFocusVisible)(setIsFocusVisible);
189
189
  }, []);
190
190
  const css = {
191
- position: "relative",
192
191
  display: "inline-flex",
193
192
  alignItems: "center",
194
193
  ...styles.container
@@ -274,8 +273,8 @@ var SegmentedControlButton = (0, import_core.forwardRef)(
274
273
  ...rest,
275
274
  children: [
276
275
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.ui.input, { ...getInputProps(props, (0, import_utils.mergeRefs)(register, ref)) }),
277
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.ui.span, { children }),
278
- isSelected && isMounted ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SegmentedControlCursor, { ...motionProps }) : null
276
+ isSelected && isMounted ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SegmentedControlCursor, { ...motionProps }) : null,
277
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.ui.span, { zIndex: "1", children })
279
278
  ]
280
279
  }
281
280
  );
@@ -290,7 +289,6 @@ var SegmentedControlCursor = ({
290
289
  const { styles } = useSegmentedControl();
291
290
  const css = {
292
291
  position: "absolute",
293
- zIndex: "-10",
294
292
  w: "full",
295
293
  h: "full",
296
294
  ...styles.cursor
package/dist/segmented-control.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/segmented-control.tsx"],"sourcesContent":["import type { CSSUIObject, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n useMultiComponentStyle,\n omitThemeProps,\n} from \"@yamada-ui/core\"\nimport type { MotionProps } from \"@yamada-ui/motion\"\nimport { LayoutGroup, Motion } from \"@yamada-ui/motion\"\nimport { useControllableState } from \"@yamada-ui/use-controllable-state\"\nimport { createDescendant } from \"@yamada-ui/use-descendant\"\nimport { trackFocusVisible } from \"@yamada-ui/use-focus-visible\"\nimport type { PropGetter, RequiredPropGetter } from \"@yamada-ui/utils\"\nimport {\n ariaAttr,\n createContext,\n cx,\n dataAttr,\n getValidChildren,\n handlerAll,\n mergeRefs,\n omitObject,\n useCallbackRef,\n useIsMounted,\n} from \"@yamada-ui/utils\"\nimport type { ChangeEvent, ChangeEventHandler, FC, ReactElement } from \"react\"\nimport { useCallback, useEffect, useId, useRef, useState } from \"react\"\n\nexport type SegmentedControlItem = SegmentedControlButtonProps & {\n label?: string\n}\n\nconst { DescendantsContextProvider, useDescendants, useDescendant } =\n createDescendant<HTMLButtonElement>()\n\ntype SegmentedControlContext = {\n selectedValue: string\n getInputProps: RequiredPropGetter<{ index: number }>\n getLabelProps: RequiredPropGetter<{ index: number }>\n styles: Record<string, CSSUIObject>\n}\n\nconst [SegmentedControlProvider, useSegmentedControl] =\n createContext<SegmentedControlContext>({\n strict: false,\n name: \"SegmentedControlContext\",\n })\n\ntype SegmentedControlOptions = {\n /**\n * The HTML `name` attribute used for forms.\n */\n name?: string\n /**\n * The value of the segmented control.\n */\n value?: string\n /**\n * The initial value of the segmented control.\n */\n defaultValue?: string\n /**\n * The callback fired when any children radio is checked or unchecked.\n */\n onChange?: (value: string) => void\n /**\n * If `true`, the segmented control will be readonly.\n *\n * @default false\n */\n isReadOnly?: boolean\n /**\n * If `true`, the segmented control will be disabled.\n *\n * @default false\n */\n isDisabled?: boolean\n /**\n * If provided, generate segmented control buttons but based on items.\n *\n * @default '[]'\n */\n items?: SegmentedControlItem[]\n}\n\nexport type SegmentedControlProps = Omit<\n HTMLUIProps<\"div\">,\n \"value\" | \"defaultValue\" | \"onChange\"\n> &\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] = useMultiComponentStyle(\n \"SegmentedControl\",\n props,\n )\n let {\n className,\n id,\n name,\n isReadOnly,\n isDisabled,\n children,\n items = [],\n value,\n defaultValue,\n ...rest\n } = omitThemeProps(mergedProps)\n\n id ??= useId()\n name ??= `segmented-control-${useId()}`\n\n rest.onChange = useCallbackRef(rest.onChange)\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 const labelRefs = useRef<Map<string | number, HTMLLabelElement>>(new Map())\n\n const [selectedValue, setSelectedValue] = useControllableState({\n value,\n defaultValue,\n onChange: rest.onChange,\n })\n\n const onChange = useCallback(\n (ev: ChangeEvent<HTMLInputElement>) => {\n if (isDisabled || isReadOnly) {\n ev.preventDefault()\n\n return\n }\n\n setSelectedValue(ev.target.value)\n },\n [isDisabled, isReadOnly, setSelectedValue],\n )\n\n const onFocus = useCallback(\n (index: number, skip: boolean) => {\n if (isDisabled) return\n\n if (skip) {\n const next = descendants.enabledNextValue(index)\n\n if (next) setFocusedIndex(next.index)\n } else {\n setFocusedIndex(index)\n }\n },\n [descendants, isDisabled],\n )\n\n const onBlur = useCallback(() => setFocusedIndex(-1), [])\n\n const getContainerProps: PropGetter = useCallback(\n (props = {}, ref = null) => ({\n ...omitObject(rest, [\"onChange\"]),\n ...props,\n ref: mergeRefs(containerRef, ref),\n id,\n \"aria-disabled\": ariaAttr(isDisabled),\n \"aria-readonly\": ariaAttr(isReadOnly),\n onBlur: handlerAll(props.onBlur, onBlur),\n }),\n [id, isDisabled, isReadOnly, onBlur, rest],\n )\n\n const getInputProps: RequiredPropGetter<{ index: number }> = useCallback(\n ({ index, ...props } = {}, ref = null) => {\n const disabled = props.disabled ?? props.isDisabled ?? isDisabled\n const readOnly = props.readOnly ?? props.isReadOnly ?? isReadOnly\n const checked = props.value === selectedValue\n\n return {\n ...omitObject(props, [\"isDisabled\", \"isReadOnly\"]),\n ref,\n id: `${id}-${index}`,\n type: \"radio\",\n name,\n disabled: disabled || readOnly,\n readOnly,\n checked,\n \"aria-disabled\": ariaAttr(disabled),\n \"aria-readonly\": ariaAttr(readOnly),\n \"data-checked\": dataAttr(checked),\n \"data-focus\": dataAttr(index === focusedIndex),\n style: {\n border: \"0px\",\n clip: \"rect(0px, 0px, 0px, 0px)\",\n height: \"1px\",\n width: \"1px\",\n margin: \"-1px\",\n padding: \"0px\",\n overflow: \"hidden\",\n whiteSpace: \"nowrap\",\n position: \"absolute\",\n },\n onChange: handlerAll(props.onChange, (ev) =>\n !disabled && !readOnly\n ? onChange(ev as ChangeEvent<HTMLInputElement>)\n : {},\n ),\n }\n },\n [isDisabled, isReadOnly, selectedValue, id, name, focusedIndex, onChange],\n )\n\n const getLabelProps: RequiredPropGetter<{ index: number }> = useCallback(\n ({ index, ...props } = {}, ref = null) => {\n const disabled = props.disabled ?? props.isDisabled ?? isDisabled\n const readOnly = props.readOnly ?? props.isReadOnly ?? isReadOnly\n const checked = props.value === selectedValue\n const focused = index === focusedIndex\n\n return {\n props,\n ref: mergeRefs(\n (node) => labelRefs.current.set(props.value, node),\n ref,\n ),\n \"aria-disabled\": ariaAttr(disabled),\n \"aria-readonly\": ariaAttr(readOnly),\n \"data-checked\": dataAttr(checked),\n \"data-focus\": dataAttr(focused),\n \"data-focus-visible\": dataAttr(focused && isFocusVisible),\n onFocus: handlerAll(props.onFocus, () =>\n onFocus(index, disabled || readOnly),\n ),\n ...(disabled || readOnly\n ? {\n _hover: {},\n _active: {},\n _focus: {},\n _invalid: {},\n _focusVisible: {},\n }\n : {}),\n }\n },\n [\n focusedIndex,\n isDisabled,\n isFocusVisible,\n isReadOnly,\n onFocus,\n selectedValue,\n ],\n )\n\n useEffect(() => {\n return trackFocusVisible(setIsFocusVisible)\n }, [])\n\n const css: CSSUIObject = {\n position: \"relative\",\n display: \"inline-flex\",\n alignItems: \"center\",\n ...styles.container,\n }\n\n const validChildren = getValidChildren(children)\n let computedChildren: ReactElement[] = []\n\n if (!validChildren.length && items.length) {\n computedChildren = items.map(({ label, value, ...props }, i) => (\n <SegmentedControlButton key={i} value={value} {...props}>\n {label}\n </SegmentedControlButton>\n ))\n } else {\n computedChildren = validChildren\n }\n\n if (selectedValue == null && defaultValue == null) {\n for (const child of computedChildren) {\n if (child.type !== SegmentedControlButton)\n if (\n (child.type as any).displayName !==\n SegmentedControlButton.displayName\n )\n continue\n\n const value = child.props.value\n\n setSelectedValue(value)\n\n break\n }\n }\n\n return (\n <DescendantsContextProvider value={descendants}>\n <SegmentedControlProvider\n value={{ getInputProps, getLabelProps, styles, selectedValue }}\n >\n <LayoutGroup id={id}>\n <ui.div\n {...getContainerProps({}, ref)}\n className={cx(\"ui-segmented-control\", className)}\n __css={css}\n >\n {computedChildren}\n </ui.div>\n </LayoutGroup>\n </SegmentedControlProvider>\n </DescendantsContextProvider>\n )\n },\n)\n\ntype SegmentedControlButtonOptions = {\n /**\n * The value of the segmented control button.\n */\n value: string | number\n /**\n * The callback fired when any children radio is checked or unchecked.\n */\n onChange?: ChangeEventHandler<HTMLInputElement>\n /**\n * Props for motion component.\n */\n motionProps?: MotionProps\n}\n\nexport type SegmentedControlButtonProps = Omit<\n HTMLUIProps<\"label\">,\n \"onChange\"\n> &\n Pick<SegmentedControlProps, \"isDisabled\" | \"isReadOnly\"> &\n SegmentedControlButtonOptions\n\nexport const SegmentedControlButton = forwardRef<\n SegmentedControlButtonProps,\n \"input\"\n>(\n (\n {\n className,\n disabled,\n readOnly,\n isDisabled,\n isReadOnly,\n value,\n onChange,\n children,\n motionProps,\n ...rest\n },\n ref,\n ) => {\n const [, isMounted] = useIsMounted({ rerender: true })\n const { selectedValue, getInputProps, getLabelProps, styles } =\n useSegmentedControl()\n\n const { index, register } = useDescendant({\n disabled: isDisabled || isReadOnly,\n })\n\n const props = {\n index,\n value,\n onChange,\n disabled,\n readOnly,\n isDisabled,\n isReadOnly,\n }\n\n const css: CSSUIObject = {\n position: \"relative\",\n cursor: \"pointer\",\n flex: \"1 1 0%\",\n display: \"inline-flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n ...styles.button,\n }\n\n const isSelected = selectedValue === value\n\n return (\n <ui.label\n {...getLabelProps(omitObject(props, [\"onChange\"]))}\n className={cx(\"ui-segmented-control__button\", className)}\n __css={css}\n {...rest}\n >\n <ui.input {...getInputProps(props, mergeRefs(register, ref))} />\n <ui.span>{children}</ui.span>\n {isSelected && isMounted ? (\n <SegmentedControlCursor {...motionProps} />\n ) : null}\n </ui.label>\n )\n },\n)\n\nSegmentedControlButton.displayName = \"SegmentedControlButton\"\n\ntype SegmentedControlCursorProps = MotionProps & { className?: string }\n\nconst SegmentedControlCursor: FC<SegmentedControlCursorProps> = ({\n className,\n transition,\n ...rest\n}) => {\n const { styles } = useSegmentedControl()\n\n const css: CSSUIObject = {\n position: \"absolute\",\n zIndex: \"-10\",\n w: \"full\",\n h: \"full\",\n ...styles.cursor,\n }\n\n return (\n <Motion\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"],"mappings":"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","names":["props","ref","value"]}
1
+ {"version":3,"sources":["../src/segmented-control.tsx"],"sourcesContent":["import type { CSSUIObject, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n useMultiComponentStyle,\n omitThemeProps,\n} from \"@yamada-ui/core\"\nimport type { MotionProps } from \"@yamada-ui/motion\"\nimport { LayoutGroup, Motion } from \"@yamada-ui/motion\"\nimport { useControllableState } from \"@yamada-ui/use-controllable-state\"\nimport { createDescendant } from \"@yamada-ui/use-descendant\"\nimport { trackFocusVisible } from \"@yamada-ui/use-focus-visible\"\nimport type { PropGetter, RequiredPropGetter } from \"@yamada-ui/utils\"\nimport {\n ariaAttr,\n createContext,\n cx,\n dataAttr,\n getValidChildren,\n handlerAll,\n mergeRefs,\n omitObject,\n useCallbackRef,\n useIsMounted,\n} from \"@yamada-ui/utils\"\nimport type { ChangeEvent, ChangeEventHandler, FC, ReactElement } from \"react\"\nimport { useCallback, useEffect, useId, useRef, useState } from \"react\"\n\nexport type SegmentedControlItem = SegmentedControlButtonProps & {\n label?: string\n}\n\nconst { DescendantsContextProvider, useDescendants, useDescendant } =\n createDescendant<HTMLButtonElement>()\n\ntype SegmentedControlContext = {\n selectedValue: string\n getInputProps: RequiredPropGetter<{ index: number }>\n getLabelProps: RequiredPropGetter<{ index: number }>\n styles: Record<string, CSSUIObject>\n}\n\nconst [SegmentedControlProvider, useSegmentedControl] =\n createContext<SegmentedControlContext>({\n strict: false,\n name: \"SegmentedControlContext\",\n })\n\ntype SegmentedControlOptions = {\n /**\n * The HTML `name` attribute used for forms.\n */\n name?: string\n /**\n * The value of the segmented control.\n */\n value?: string\n /**\n * The initial value of the segmented control.\n */\n defaultValue?: string\n /**\n * The callback fired when any children radio is checked or unchecked.\n */\n onChange?: (value: string) => void\n /**\n * If `true`, the segmented control will be readonly.\n *\n * @default false\n */\n isReadOnly?: boolean\n /**\n * If `true`, the segmented control will be disabled.\n *\n * @default false\n */\n isDisabled?: boolean\n /**\n * If provided, generate segmented control buttons but based on items.\n *\n * @default '[]'\n */\n items?: SegmentedControlItem[]\n}\n\nexport type SegmentedControlProps = Omit<\n HTMLUIProps<\"div\">,\n \"value\" | \"defaultValue\" | \"onChange\"\n> &\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] = useMultiComponentStyle(\n \"SegmentedControl\",\n props,\n )\n let {\n className,\n id,\n name,\n isReadOnly,\n isDisabled,\n children,\n items = [],\n value,\n defaultValue,\n ...rest\n } = omitThemeProps(mergedProps)\n\n id ??= useId()\n name ??= `segmented-control-${useId()}`\n\n rest.onChange = useCallbackRef(rest.onChange)\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 const labelRefs = useRef<Map<string | number, HTMLLabelElement>>(new Map())\n\n const [selectedValue, setSelectedValue] = useControllableState({\n value,\n defaultValue,\n onChange: rest.onChange,\n })\n\n const onChange = useCallback(\n (ev: ChangeEvent<HTMLInputElement>) => {\n if (isDisabled || isReadOnly) {\n ev.preventDefault()\n\n return\n }\n\n setSelectedValue(ev.target.value)\n },\n [isDisabled, isReadOnly, setSelectedValue],\n )\n\n const onFocus = useCallback(\n (index: number, skip: boolean) => {\n if (isDisabled) return\n\n if (skip) {\n const next = descendants.enabledNextValue(index)\n\n if (next) setFocusedIndex(next.index)\n } else {\n setFocusedIndex(index)\n }\n },\n [descendants, isDisabled],\n )\n\n const onBlur = useCallback(() => setFocusedIndex(-1), [])\n\n const getContainerProps: PropGetter = useCallback(\n (props = {}, ref = null) => ({\n ...omitObject(rest, [\"onChange\"]),\n ...props,\n ref: mergeRefs(containerRef, ref),\n id,\n \"aria-disabled\": ariaAttr(isDisabled),\n \"aria-readonly\": ariaAttr(isReadOnly),\n onBlur: handlerAll(props.onBlur, onBlur),\n }),\n [id, isDisabled, isReadOnly, onBlur, rest],\n )\n\n const getInputProps: RequiredPropGetter<{ index: number }> = useCallback(\n ({ index, ...props } = {}, ref = null) => {\n const disabled = props.disabled ?? props.isDisabled ?? isDisabled\n const readOnly = props.readOnly ?? props.isReadOnly ?? isReadOnly\n const checked = props.value === selectedValue\n\n return {\n ...omitObject(props, [\"isDisabled\", \"isReadOnly\"]),\n ref,\n id: `${id}-${index}`,\n type: \"radio\",\n name,\n disabled: disabled || readOnly,\n readOnly,\n checked,\n \"aria-disabled\": ariaAttr(disabled),\n \"aria-readonly\": ariaAttr(readOnly),\n \"data-checked\": dataAttr(checked),\n \"data-focus\": dataAttr(index === focusedIndex),\n style: {\n border: \"0px\",\n clip: \"rect(0px, 0px, 0px, 0px)\",\n height: \"1px\",\n width: \"1px\",\n margin: \"-1px\",\n padding: \"0px\",\n overflow: \"hidden\",\n whiteSpace: \"nowrap\",\n position: \"absolute\",\n },\n onChange: handlerAll(props.onChange, (ev) =>\n !disabled && !readOnly\n ? onChange(ev as ChangeEvent<HTMLInputElement>)\n : {},\n ),\n }\n },\n [isDisabled, isReadOnly, selectedValue, id, name, focusedIndex, onChange],\n )\n\n const getLabelProps: RequiredPropGetter<{ index: number }> = useCallback(\n ({ index, ...props } = {}, ref = null) => {\n const disabled = props.disabled ?? props.isDisabled ?? isDisabled\n const readOnly = props.readOnly ?? props.isReadOnly ?? isReadOnly\n const checked = props.value === selectedValue\n const focused = index === focusedIndex\n\n return {\n props,\n ref: mergeRefs(\n (node) => labelRefs.current.set(props.value, node),\n ref,\n ),\n \"aria-disabled\": ariaAttr(disabled),\n \"aria-readonly\": ariaAttr(readOnly),\n \"data-checked\": dataAttr(checked),\n \"data-focus\": dataAttr(focused),\n \"data-focus-visible\": dataAttr(focused && isFocusVisible),\n onFocus: handlerAll(props.onFocus, () =>\n onFocus(index, disabled || readOnly),\n ),\n ...(disabled || readOnly\n ? {\n _hover: {},\n _active: {},\n _focus: {},\n _invalid: {},\n _focusVisible: {},\n }\n : {}),\n }\n },\n [\n focusedIndex,\n isDisabled,\n isFocusVisible,\n isReadOnly,\n onFocus,\n selectedValue,\n ],\n )\n\n useEffect(() => {\n return trackFocusVisible(setIsFocusVisible)\n }, [])\n\n const css: CSSUIObject = {\n display: \"inline-flex\",\n alignItems: \"center\",\n ...styles.container,\n }\n\n const validChildren = getValidChildren(children)\n let computedChildren: ReactElement[] = []\n\n if (!validChildren.length && items.length) {\n computedChildren = items.map(({ label, value, ...props }, i) => (\n <SegmentedControlButton key={i} value={value} {...props}>\n {label}\n </SegmentedControlButton>\n ))\n } else {\n computedChildren = validChildren\n }\n\n if (selectedValue == null && defaultValue == null) {\n for (const child of computedChildren) {\n if (child.type !== SegmentedControlButton)\n if (\n (child.type as any).displayName !==\n SegmentedControlButton.displayName\n )\n continue\n\n const value = child.props.value\n\n setSelectedValue(value)\n\n break\n }\n }\n\n return (\n <DescendantsContextProvider value={descendants}>\n <SegmentedControlProvider\n value={{ getInputProps, getLabelProps, styles, selectedValue }}\n >\n <LayoutGroup id={id}>\n <ui.div\n {...getContainerProps({}, ref)}\n className={cx(\"ui-segmented-control\", className)}\n __css={css}\n >\n {computedChildren}\n </ui.div>\n </LayoutGroup>\n </SegmentedControlProvider>\n </DescendantsContextProvider>\n )\n },\n)\n\ntype SegmentedControlButtonOptions = {\n /**\n * The value of the segmented control button.\n */\n value: string | number\n /**\n * The callback fired when any children radio is checked or unchecked.\n */\n onChange?: ChangeEventHandler<HTMLInputElement>\n /**\n * Props for motion component.\n */\n motionProps?: MotionProps\n}\n\nexport type SegmentedControlButtonProps = Omit<\n HTMLUIProps<\"label\">,\n \"onChange\"\n> &\n Pick<SegmentedControlProps, \"isDisabled\" | \"isReadOnly\"> &\n SegmentedControlButtonOptions\n\nexport const SegmentedControlButton = forwardRef<\n SegmentedControlButtonProps,\n \"input\"\n>(\n (\n {\n className,\n disabled,\n readOnly,\n isDisabled,\n isReadOnly,\n value,\n onChange,\n children,\n motionProps,\n ...rest\n },\n ref,\n ) => {\n const [, isMounted] = useIsMounted({ rerender: true })\n const { selectedValue, getInputProps, getLabelProps, styles } =\n useSegmentedControl()\n\n const { index, register } = useDescendant({\n disabled: isDisabled || isReadOnly,\n })\n\n const props = {\n index,\n value,\n onChange,\n disabled,\n readOnly,\n isDisabled,\n isReadOnly,\n }\n\n const css: CSSUIObject = {\n position: \"relative\",\n cursor: \"pointer\",\n flex: \"1 1 0%\",\n display: \"inline-flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n ...styles.button,\n }\n\n const isSelected = selectedValue === value\n\n return (\n <ui.label\n {...getLabelProps(omitObject(props, [\"onChange\"]))}\n className={cx(\"ui-segmented-control__button\", className)}\n __css={css}\n {...rest}\n >\n <ui.input {...getInputProps(props, mergeRefs(register, ref))} />\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\"\n\ntype SegmentedControlCursorProps = MotionProps & { className?: string }\n\nconst SegmentedControlCursor: FC<SegmentedControlCursorProps> = ({\n className,\n transition,\n ...rest\n}) => {\n const { styles } = useSegmentedControl()\n\n const css: CSSUIObject = {\n position: \"absolute\",\n w: \"full\",\n h: \"full\",\n ...styles.cursor,\n }\n\n return (\n <Motion\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"],"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-F234O63Q.mjs";
5
+ } from "./chunk-6LEHUYFW.mjs";
6
6
  export {
7
7
  SegmentedControl,
8
8
  SegmentedControlButton
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@yamada-ui/segmented-control",
3
- "version": "1.0.2",
3
+ "version": "1.0.3-dev-20231229025828",
4
4
  "description": "Yamada UI segmented control components",
5
5
  "keywords": [
6
6
  "yamada",
package/dist/chunk-F234O63Q.mjs.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/segmented-control.tsx"],"sourcesContent":["import type { CSSUIObject, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n useMultiComponentStyle,\n omitThemeProps,\n} from \"@yamada-ui/core\"\nimport type { MotionProps } from \"@yamada-ui/motion\"\nimport { LayoutGroup, Motion } from \"@yamada-ui/motion\"\nimport { useControllableState } from \"@yamada-ui/use-controllable-state\"\nimport { createDescendant } from \"@yamada-ui/use-descendant\"\nimport { trackFocusVisible } from \"@yamada-ui/use-focus-visible\"\nimport type { PropGetter, RequiredPropGetter } from \"@yamada-ui/utils\"\nimport {\n ariaAttr,\n createContext,\n cx,\n dataAttr,\n getValidChildren,\n handlerAll,\n mergeRefs,\n omitObject,\n useCallbackRef,\n useIsMounted,\n} from \"@yamada-ui/utils\"\nimport type { ChangeEvent, ChangeEventHandler, FC, ReactElement } from \"react\"\nimport { useCallback, useEffect, useId, useRef, useState } from \"react\"\n\nexport type SegmentedControlItem = SegmentedControlButtonProps & {\n label?: string\n}\n\nconst { DescendantsContextProvider, useDescendants, useDescendant } =\n createDescendant<HTMLButtonElement>()\n\ntype SegmentedControlContext = {\n selectedValue: string\n getInputProps: RequiredPropGetter<{ index: number }>\n getLabelProps: RequiredPropGetter<{ index: number }>\n styles: Record<string, CSSUIObject>\n}\n\nconst [SegmentedControlProvider, useSegmentedControl] =\n createContext<SegmentedControlContext>({\n strict: false,\n name: \"SegmentedControlContext\",\n })\n\ntype SegmentedControlOptions = {\n /**\n * The HTML `name` attribute used for forms.\n */\n name?: string\n /**\n * The value of the segmented control.\n */\n value?: string\n /**\n * The initial value of the segmented control.\n */\n defaultValue?: string\n /**\n * The callback fired when any children radio is checked or unchecked.\n */\n onChange?: (value: string) => void\n /**\n * If `true`, the segmented control will be readonly.\n *\n * @default false\n */\n isReadOnly?: boolean\n /**\n * If `true`, the segmented control will be disabled.\n *\n * @default false\n */\n isDisabled?: boolean\n /**\n * If provided, generate segmented control buttons but based on items.\n *\n * @default '[]'\n */\n items?: SegmentedControlItem[]\n}\n\nexport type SegmentedControlProps = Omit<\n HTMLUIProps<\"div\">,\n \"value\" | \"defaultValue\" | \"onChange\"\n> &\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] = useMultiComponentStyle(\n \"SegmentedControl\",\n props,\n )\n let {\n className,\n id,\n name,\n isReadOnly,\n isDisabled,\n children,\n items = [],\n value,\n defaultValue,\n ...rest\n } = omitThemeProps(mergedProps)\n\n id ??= useId()\n name ??= `segmented-control-${useId()}`\n\n rest.onChange = useCallbackRef(rest.onChange)\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 const labelRefs = useRef<Map<string | number, HTMLLabelElement>>(new Map())\n\n const [selectedValue, setSelectedValue] = useControllableState({\n value,\n defaultValue,\n onChange: rest.onChange,\n })\n\n const onChange = useCallback(\n (ev: ChangeEvent<HTMLInputElement>) => {\n if (isDisabled || isReadOnly) {\n ev.preventDefault()\n\n return\n }\n\n setSelectedValue(ev.target.value)\n },\n [isDisabled, isReadOnly, setSelectedValue],\n )\n\n const onFocus = useCallback(\n (index: number, skip: boolean) => {\n if (isDisabled) return\n\n if (skip) {\n const next = descendants.enabledNextValue(index)\n\n if (next) setFocusedIndex(next.index)\n } else {\n setFocusedIndex(index)\n }\n },\n [descendants, isDisabled],\n )\n\n const onBlur = useCallback(() => setFocusedIndex(-1), [])\n\n const getContainerProps: PropGetter = useCallback(\n (props = {}, ref = null) => ({\n ...omitObject(rest, [\"onChange\"]),\n ...props,\n ref: mergeRefs(containerRef, ref),\n id,\n \"aria-disabled\": ariaAttr(isDisabled),\n \"aria-readonly\": ariaAttr(isReadOnly),\n onBlur: handlerAll(props.onBlur, onBlur),\n }),\n [id, isDisabled, isReadOnly, onBlur, rest],\n )\n\n const getInputProps: RequiredPropGetter<{ index: number }> = useCallback(\n ({ index, ...props } = {}, ref = null) => {\n const disabled = props.disabled ?? props.isDisabled ?? isDisabled\n const readOnly = props.readOnly ?? props.isReadOnly ?? isReadOnly\n const checked = props.value === selectedValue\n\n return {\n ...omitObject(props, [\"isDisabled\", \"isReadOnly\"]),\n ref,\n id: `${id}-${index}`,\n type: \"radio\",\n name,\n disabled: disabled || readOnly,\n readOnly,\n checked,\n \"aria-disabled\": ariaAttr(disabled),\n \"aria-readonly\": ariaAttr(readOnly),\n \"data-checked\": dataAttr(checked),\n \"data-focus\": dataAttr(index === focusedIndex),\n style: {\n border: \"0px\",\n clip: \"rect(0px, 0px, 0px, 0px)\",\n height: \"1px\",\n width: \"1px\",\n margin: \"-1px\",\n padding: \"0px\",\n overflow: \"hidden\",\n whiteSpace: \"nowrap\",\n position: \"absolute\",\n },\n onChange: handlerAll(props.onChange, (ev) =>\n !disabled && !readOnly\n ? onChange(ev as ChangeEvent<HTMLInputElement>)\n : {},\n ),\n }\n },\n [isDisabled, isReadOnly, selectedValue, id, name, focusedIndex, onChange],\n )\n\n const getLabelProps: RequiredPropGetter<{ index: number }> = useCallback(\n ({ index, ...props } = {}, ref = null) => {\n const disabled = props.disabled ?? props.isDisabled ?? isDisabled\n const readOnly = props.readOnly ?? props.isReadOnly ?? isReadOnly\n const checked = props.value === selectedValue\n const focused = index === focusedIndex\n\n return {\n props,\n ref: mergeRefs(\n (node) => labelRefs.current.set(props.value, node),\n ref,\n ),\n \"aria-disabled\": ariaAttr(disabled),\n \"aria-readonly\": ariaAttr(readOnly),\n \"data-checked\": dataAttr(checked),\n \"data-focus\": dataAttr(focused),\n \"data-focus-visible\": dataAttr(focused && isFocusVisible),\n onFocus: handlerAll(props.onFocus, () =>\n onFocus(index, disabled || readOnly),\n ),\n ...(disabled || readOnly\n ? {\n _hover: {},\n _active: {},\n _focus: {},\n _invalid: {},\n _focusVisible: {},\n }\n : {}),\n }\n },\n [\n focusedIndex,\n isDisabled,\n isFocusVisible,\n isReadOnly,\n onFocus,\n selectedValue,\n ],\n )\n\n useEffect(() => {\n return trackFocusVisible(setIsFocusVisible)\n }, [])\n\n const css: CSSUIObject = {\n position: \"relative\",\n display: \"inline-flex\",\n alignItems: \"center\",\n ...styles.container,\n }\n\n const validChildren = getValidChildren(children)\n let computedChildren: ReactElement[] = []\n\n if (!validChildren.length && items.length) {\n computedChildren = items.map(({ label, value, ...props }, i) => (\n <SegmentedControlButton key={i} value={value} {...props}>\n {label}\n </SegmentedControlButton>\n ))\n } else {\n computedChildren = validChildren\n }\n\n if (selectedValue == null && defaultValue == null) {\n for (const child of computedChildren) {\n if (child.type !== SegmentedControlButton)\n if (\n (child.type as any).displayName !==\n SegmentedControlButton.displayName\n )\n continue\n\n const value = child.props.value\n\n setSelectedValue(value)\n\n break\n }\n }\n\n return (\n <DescendantsContextProvider value={descendants}>\n <SegmentedControlProvider\n value={{ getInputProps, getLabelProps, styles, selectedValue }}\n >\n <LayoutGroup id={id}>\n <ui.div\n {...getContainerProps({}, ref)}\n className={cx(\"ui-segmented-control\", className)}\n __css={css}\n >\n {computedChildren}\n </ui.div>\n </LayoutGroup>\n </SegmentedControlProvider>\n </DescendantsContextProvider>\n )\n },\n)\n\ntype SegmentedControlButtonOptions = {\n /**\n * The value of the segmented control button.\n */\n value: string | number\n /**\n * The callback fired when any children radio is checked or unchecked.\n */\n onChange?: ChangeEventHandler<HTMLInputElement>\n /**\n * Props for motion component.\n */\n motionProps?: MotionProps\n}\n\nexport type SegmentedControlButtonProps = Omit<\n HTMLUIProps<\"label\">,\n \"onChange\"\n> &\n Pick<SegmentedControlProps, \"isDisabled\" | \"isReadOnly\"> &\n SegmentedControlButtonOptions\n\nexport const SegmentedControlButton = forwardRef<\n SegmentedControlButtonProps,\n \"input\"\n>(\n (\n {\n className,\n disabled,\n readOnly,\n isDisabled,\n isReadOnly,\n value,\n onChange,\n children,\n motionProps,\n ...rest\n },\n ref,\n ) => {\n const [, isMounted] = useIsMounted({ rerender: true })\n const { selectedValue, getInputProps, getLabelProps, styles } =\n useSegmentedControl()\n\n const { index, register } = useDescendant({\n disabled: isDisabled || isReadOnly,\n })\n\n const props = {\n index,\n value,\n onChange,\n disabled,\n readOnly,\n isDisabled,\n isReadOnly,\n }\n\n const css: CSSUIObject = {\n position: \"relative\",\n cursor: \"pointer\",\n flex: \"1 1 0%\",\n display: \"inline-flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n ...styles.button,\n }\n\n const isSelected = selectedValue === value\n\n return (\n <ui.label\n {...getLabelProps(omitObject(props, [\"onChange\"]))}\n className={cx(\"ui-segmented-control__button\", className)}\n __css={css}\n {...rest}\n >\n <ui.input {...getInputProps(props, mergeRefs(register, ref))} />\n <ui.span>{children}</ui.span>\n {isSelected && isMounted ? (\n <SegmentedControlCursor {...motionProps} />\n ) : null}\n </ui.label>\n )\n },\n)\n\nSegmentedControlButton.displayName = \"SegmentedControlButton\"\n\ntype SegmentedControlCursorProps = MotionProps & { className?: string }\n\nconst SegmentedControlCursor: FC<SegmentedControlCursorProps> = ({\n className,\n transition,\n ...rest\n}) => {\n const { styles } = useSegmentedControl()\n\n const css: CSSUIObject = {\n position: \"absolute\",\n zIndex: \"-10\",\n w: \"full\",\n h: \"full\",\n ...styles.cursor,\n }\n\n return (\n <Motion\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"],"mappings":"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","names":["props","ref","value"]}