@yamada-ui/segmented-control 1.0.44-next-20241029032539 → 1.1.0-dev-20241101055506

package/dist/{chunk-AVVQKQV6.mjs → chunk-VTK3QCXK.mjs}

@@ -86,12 +86,13 @@ var SegmentedControl = forwardRef(
     const onBlur = useCallback(() => setFocusedIndex(-1), []);
     const getContainerProps = useCallback(
       (props2 = {}, ref2 = null) => ({
+        "aria-disabled": ariaAttr(isDisabled),
+        "data-readonly": dataAttr(isReadOnly),
+        role: "radiogroup",
         ...rest,
         ...props2,
         id,
         ref: mergeRefs(containerRef, ref2),
-        "aria-disabled": ariaAttr(isDisabled),
-        "data-readonly": dataAttr(isReadOnly),
         onBlur: handlerAll(props2.onBlur, onBlur)
       }),
       [id, isDisabled, isReadOnly, onBlur, rest]
@@ -319,4 +320,4 @@ export {
   SegmentedControl,
   SegmentedControlButton
 };
-//# sourceMappingURL=chunk-AVVQKQV6.mjs.map
+//# sourceMappingURL=chunk-VTK3QCXK.mjs.map

package/dist/chunk-VTK3QCXK.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/segmented-control.tsx"],"sourcesContent":["import type {\n  CSSUIObject,\n  FC,\n  HTMLProps,\n  HTMLUIProps,\n  PropGetter,\n  RequiredPropGetter,\n  ThemeProps,\n} from \"@yamada-ui/core\"\nimport type { MotionProps } from \"@yamada-ui/motion\"\nimport type {\n  ChangeEvent,\n  ChangeEventHandler,\n  FocusEventHandler,\n  ReactElement,\n} from \"react\"\nimport {\n  forwardRef,\n  omitThemeProps,\n  ui,\n  useComponentMultiStyle,\n} from \"@yamada-ui/core\"\nimport { LayoutGroup, motion } from \"@yamada-ui/motion\"\nimport { useControllableState } from \"@yamada-ui/use-controllable-state\"\nimport { createDescendant } from \"@yamada-ui/use-descendant\"\nimport { trackFocusVisible } from \"@yamada-ui/use-focus-visible\"\nimport {\n  ariaAttr,\n  createContext,\n  cx,\n  dataAttr,\n  getValidChildren,\n  handlerAll,\n  mergeRefs,\n  useCallbackRef,\n  useIsMounted,\n} from \"@yamada-ui/utils\"\nimport { useCallback, useEffect, useId, useRef, useState } from \"react\"\n\nexport interface SegmentedControlItem extends SegmentedControlButtonProps {\n  label?: string\n}\n\nconst { DescendantsContextProvider, useDescendant, useDescendants } =\n  createDescendant<HTMLButtonElement>()\n\ninterface SegmentedControlContext {\n  styles: { [key: string]: CSSUIObject | undefined }\n  value: string\n  getInputProps: RequiredPropGetter<\n    {\n      index: number\n      isDisabled?: boolean\n      isReadOnly?: boolean\n    } & HTMLProps<\"input\">,\n    HTMLProps<\"input\">\n  >\n  getLabelProps: RequiredPropGetter<\n    {\n      index: number\n      value: string\n      disabled?: boolean\n      isDisabled?: boolean\n      isReadOnly?: boolean\n      readOnly?: boolean\n    } & HTMLProps<\"label\">,\n    HTMLProps<\"label\">\n  >\n}\n\nconst [SegmentedControlProvider, useSegmentedControl] =\n  createContext<SegmentedControlContext>({\n    name: \"SegmentedControlContext\",\n    errorMessage: `useSegmentedControl returned is 'undefined'. Seems you forgot to wrap the components in \"<SegmentedControl />\"`,\n  })\n\ninterface SegmentedControlOptions {\n  /**\n   * The HTML `name` attribute used for forms.\n   */\n  name?: string\n  /**\n   * The initial value of the segmented control.\n   */\n  defaultValue?: string\n  /**\n   * If `true`, the segmented control will be disabled.\n   *\n   * @default false\n   */\n  isDisabled?: boolean\n  /**\n   * If `true`, the segmented control will be readonly.\n   *\n   * @default false\n   */\n  isReadOnly?: boolean\n  /**\n   * If provided, generate segmented control buttons but based on items.\n   *\n   * @default '[]'\n   */\n  items?: SegmentedControlItem[]\n  /**\n   * The value of the segmented control.\n   */\n  value?: string\n  /**\n   * The callback fired when any children radio is checked or unchecked.\n   */\n  onChange?: (value: string) => void\n}\n\nexport interface SegmentedControlProps\n  extends Omit<HTMLUIProps, \"defaultValue\" | \"onChange\" | \"value\">,\n    ThemeProps<\"SegmentedControl\">,\n    SegmentedControlOptions {}\n\n/**\n * `SegmentedControl` is a component used for allowing users to select one option from multiple choices.\n *\n * @see Docs https://yamada-ui.com/components/forms/segmented-control\n */\nexport const SegmentedControl = forwardRef<SegmentedControlProps, \"div\">(\n  (props, ref) => {\n    const [styles, mergedProps] = useComponentMultiStyle(\n      \"SegmentedControl\",\n      props,\n    )\n    let {\n      id,\n      name,\n      className,\n      children,\n      defaultValue,\n      isDisabled,\n      isReadOnly,\n      items = [],\n      value: valueProp,\n      onChange: onChangeProp,\n      ...rest\n    } = omitThemeProps(mergedProps)\n    const uuid = useId()\n\n    id ??= uuid\n    name ??= `segmented-control-${uuid}`\n\n    const onChangeRef = useCallbackRef(onChangeProp)\n\n    const descendants = useDescendants()\n\n    const [focusedIndex, setFocusedIndex] = useState<number>(-1)\n    const [isFocusVisible, setIsFocusVisible] = useState<boolean>(false)\n    const containerRef = useRef<HTMLDivElement>(null)\n\n    const [value, setValue] = useControllableState({\n      defaultValue,\n      value: valueProp,\n      onChange: onChangeRef,\n    })\n\n    const onChange = useCallback(\n      (ev: ChangeEvent<HTMLInputElement>) => {\n        if (isDisabled || isReadOnly) {\n          ev.preventDefault()\n\n          return\n        }\n\n        setValue(ev.target.value)\n      },\n      [isDisabled, isReadOnly, setValue],\n    )\n\n    const onFocus = useCallback(\n      (index: number, skip: boolean) => {\n        if (isDisabled) return\n\n        if (skip) {\n          const next = descendants.enabledNextValue(index)\n\n          if (next) setFocusedIndex(next.index)\n        } else {\n          setFocusedIndex(index)\n        }\n      },\n      [descendants, isDisabled],\n    )\n\n    const onBlur = useCallback(() => setFocusedIndex(-1), [])\n\n    const getContainerProps: PropGetter = useCallback(\n      (props = {}, ref = null) => ({\n        \"aria-disabled\": ariaAttr(isDisabled),\n        \"data-readonly\": dataAttr(isReadOnly),\n        role: \"radiogroup\",\n        ...rest,\n        ...props,\n        id,\n        ref: mergeRefs(containerRef, ref),\n        onBlur: handlerAll(props.onBlur, onBlur),\n      }),\n      [id, isDisabled, isReadOnly, onBlur, rest],\n    )\n\n    const getInputProps: RequiredPropGetter<\n      {\n        index: number\n        isDisabled?: boolean\n        isReadOnly?: boolean\n      } & HTMLProps<\"input\">,\n      HTMLUIProps<\"input\">\n    > = useCallback(\n      (\n        {\n          index,\n          isDisabled: isDisabledProp,\n          isReadOnly: isReadOnlyProp,\n          ...props\n        },\n        ref = null,\n      ) => {\n        const disabled = props.disabled ?? isDisabledProp ?? isDisabled\n        const readOnly = props.readOnly ?? isReadOnlyProp ?? isReadOnly\n        const checked = props.value === value\n\n        return {\n          ...props,\n          id: `${id}-${index}`,\n          ref,\n          type: \"radio\",\n          name,\n          style: {\n            border: \"0px\",\n            clip: \"rect(0px, 0px, 0px, 0px)\",\n            height: \"1px\",\n            margin: \"-1px\",\n            overflow: \"hidden\",\n            padding: \"0px\",\n            position: \"absolute\",\n            whiteSpace: \"nowrap\",\n            width: \"1px\",\n          },\n          \"aria-disabled\": ariaAttr(disabled),\n          \"data-checked\": dataAttr(checked),\n          \"data-focus\": dataAttr(index === focusedIndex),\n          \"data-readonly\": dataAttr(readOnly),\n          checked,\n          disabled: disabled || readOnly,\n          readOnly,\n          onChange: handlerAll(props.onChange, (ev) =>\n            !disabled && !readOnly\n              ? onChange(ev as ChangeEvent<HTMLInputElement>)\n              : {},\n          ),\n        }\n      },\n      [isDisabled, isReadOnly, value, id, name, focusedIndex, onChange],\n    )\n\n    const getLabelProps: RequiredPropGetter<\n      {\n        index: number\n        value: string\n        disabled?: boolean\n        isDisabled?: boolean\n        isReadOnly?: boolean\n        readOnly?: boolean\n      } & HTMLProps<\"label\">,\n      HTMLProps<\"label\">\n    > = useCallback(\n      (\n        {\n          index,\n          isDisabled: isDisabledProp,\n          isReadOnly: isReadOnlyProp,\n          ...props\n        },\n        ref = null,\n      ) => {\n        const disabled = props.disabled ?? isDisabledProp ?? isDisabled\n        const readOnly = props.readOnly ?? isReadOnlyProp ?? isReadOnly\n        const checked = props.value === value\n        const focused = index === focusedIndex\n\n        return {\n          ...props,\n          ref,\n          \"aria-disabled\": ariaAttr(disabled),\n          \"data-checked\": dataAttr(checked),\n          \"data-focus\": dataAttr(focused),\n          \"data-focus-visible\": dataAttr(focused && isFocusVisible),\n          \"data-readonly\": dataAttr(readOnly),\n          onFocus: handlerAll(\n            props.onFocus as unknown as FocusEventHandler<HTMLLabelElement>,\n            () => onFocus(index, disabled || readOnly || false),\n          ),\n          ...(disabled || readOnly\n            ? {\n                _active: {},\n                _focus: {},\n                _focusVisible: {},\n                _hover: {},\n                _invalid: {},\n              }\n            : {}),\n        }\n      },\n      [focusedIndex, isDisabled, isFocusVisible, isReadOnly, onFocus, value],\n    )\n\n    useEffect(() => {\n      return trackFocusVisible(setIsFocusVisible)\n    }, [])\n\n    const css: CSSUIObject = {\n      alignItems: \"center\",\n      display: \"inline-flex\",\n      ...styles.container,\n    }\n\n    const validChildren = getValidChildren(children)\n    let computedChildren: ReactElement[] = []\n\n    if (!validChildren.length && items.length) {\n      computedChildren = items.map(({ label, value, ...props }, i) => (\n        <SegmentedControlButton key={i} value={value} {...props}>\n          {label}\n        </SegmentedControlButton>\n      ))\n    } else {\n      computedChildren = validChildren\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n    if (value == null && defaultValue == null) {\n      for (const child of computedChildren) {\n        if (child.type !== SegmentedControlButton)\n          if (\n            (child.type as any).displayName !==\n            SegmentedControlButton.displayName\n          )\n            continue\n\n        const value = child.props.value\n\n        setValue(value)\n\n        break\n      }\n    }\n\n    return (\n      <DescendantsContextProvider value={descendants}>\n        <SegmentedControlProvider\n          value={{ styles, value, getInputProps, getLabelProps }}\n        >\n          <LayoutGroup id={id}>\n            <ui.div\n              {...getContainerProps({}, ref)}\n              className={cx(\"ui-segmented-control\", className)}\n              __css={css}\n            >\n              {computedChildren}\n            </ui.div>\n          </LayoutGroup>\n        </SegmentedControlProvider>\n      </DescendantsContextProvider>\n    )\n  },\n)\n\nSegmentedControl.displayName = \"SegmentedControl\"\nSegmentedControl.__ui__ = \"SegmentedControl\"\n\ninterface SegmentedControlButtonOptions {\n  /**\n   * The value of the segmented control button.\n   */\n  value: string\n  /**\n   * Props for motion component.\n   */\n  motionProps?: MotionProps\n  /**\n   * The callback fired when any children radio is checked or unchecked.\n   */\n  onChange?: ChangeEventHandler<HTMLInputElement>\n}\n\nexport interface SegmentedControlButtonProps\n  extends Omit<HTMLUIProps<\"label\">, \"onChange\">,\n    Pick<SegmentedControlProps, \"isDisabled\" | \"isReadOnly\">,\n    SegmentedControlButtonOptions {}\n\nexport const SegmentedControlButton = forwardRef<\n  SegmentedControlButtonProps,\n  \"input\"\n>(\n  (\n    {\n      className,\n      children,\n      disabled,\n      isDisabled,\n      isReadOnly,\n      readOnly,\n      value,\n      motionProps,\n      onChange,\n      ...rest\n    },\n    ref,\n  ) => {\n    const [, isMounted] = useIsMounted({ rerender: true })\n    const {\n      styles,\n      value: selectedValue,\n      getInputProps,\n      getLabelProps,\n    } = useSegmentedControl()\n\n    const { index, register } = useDescendant({\n      disabled: isDisabled || isReadOnly,\n    })\n\n    const props = {\n      disabled,\n      index,\n      isDisabled,\n      isReadOnly,\n      readOnly,\n      value,\n    }\n\n    const css: CSSUIObject = {\n      alignItems: \"center\",\n      cursor: \"pointer\",\n      display: \"inline-flex\",\n      flex: \"1 1 0%\",\n      justifyContent: \"center\",\n      position: \"relative\",\n      ...styles.button,\n    }\n\n    const isSelected = value === selectedValue\n\n    return (\n      <ui.label\n        {...getLabelProps(props)}\n        className={cx(\"ui-segmented-control__button\", className)}\n        __css={css}\n        {...rest}\n      >\n        <ui.input\n          {...getInputProps({ onChange, ...props }, mergeRefs(register, ref))}\n        />\n        {isSelected && isMounted ? (\n          <SegmentedControlCursor {...motionProps} />\n        ) : null}\n        <ui.span zIndex=\"1\">{children}</ui.span>\n      </ui.label>\n    )\n  },\n)\n\nSegmentedControlButton.displayName = \"SegmentedControlButton\"\nSegmentedControlButton.__ui__ = \"SegmentedControlButton\"\n\ninterface SegmentedControlCursorProps extends MotionProps {\n  className?: string\n}\n\nconst SegmentedControlCursor: FC<SegmentedControlCursorProps> = ({\n  className,\n  transition,\n  ...rest\n}) => {\n  const { styles } = useSegmentedControl()\n\n  const css: CSSUIObject = {\n    h: \"100%\",\n    position: \"absolute\",\n    w: \"100%\",\n    ...styles.cursor,\n  }\n\n  return (\n    <motion.div\n      className={cx(\"ui-segmented-control__cursor\", className)}\n      layoutDependency={false}\n      layoutId=\"cursor\"\n      transition={{\n        type: \"spring\",\n        bounce: 0.15,\n        duration: 0.4,\n        ...transition,\n      }}\n      __css={css}\n      {...rest}\n    />\n  )\n}\n\nSegmentedControlCursor.displayName = \"SegmentedControlCursor\"\nSegmentedControlCursor.__ui__ = \"SegmentedControlCursor\"\n"],"mappings":"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","names":["props","ref","value"]}

package/dist/index.js

@@ -97,12 +97,13 @@ var SegmentedControl = (0, import_core.forwardRef)(
     const onBlur = (0, import_react.useCallback)(() => setFocusedIndex(-1), []);
     const getContainerProps = (0, import_react.useCallback)(
       (props2 = {}, ref2 = null) => ({
+        "aria-disabled": (0, import_utils.ariaAttr)(isDisabled),
+        "data-readonly": (0, import_utils.dataAttr)(isReadOnly),
+        role: "radiogroup",
         ...rest,
         ...props2,
         id,
         ref: (0, import_utils.mergeRefs)(containerRef, ref2),
-        "aria-disabled": (0, import_utils.ariaAttr)(isDisabled),
-        "data-readonly": (0, import_utils.dataAttr)(isReadOnly),
         onBlur: (0, import_utils.handlerAll)(props2.onBlur, onBlur)
       }),
       [id, isDisabled, isReadOnly, onBlur, rest]

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/segmented-control.tsx"],"sourcesContent":["export { SegmentedControl, SegmentedControlButton } from \"./segmented-control\"\nexport type {\n  SegmentedControlButtonProps,\n  SegmentedControlItem,\n  SegmentedControlProps,\n} from \"./segmented-control\"\n","import type {\n  CSSUIObject,\n  FC,\n  HTMLProps,\n  HTMLUIProps,\n  PropGetter,\n  RequiredPropGetter,\n  ThemeProps,\n} from \"@yamada-ui/core\"\nimport type { MotionProps } from \"@yamada-ui/motion\"\nimport type {\n  ChangeEvent,\n  ChangeEventHandler,\n  FocusEventHandler,\n  ReactElement,\n} from \"react\"\nimport {\n  forwardRef,\n  omitThemeProps,\n  ui,\n  useComponentMultiStyle,\n} from \"@yamada-ui/core\"\nimport { LayoutGroup, motion } from \"@yamada-ui/motion\"\nimport { useControllableState } from \"@yamada-ui/use-controllable-state\"\nimport { createDescendant } from \"@yamada-ui/use-descendant\"\nimport { trackFocusVisible } from \"@yamada-ui/use-focus-visible\"\nimport {\n  ariaAttr,\n  createContext,\n  cx,\n  dataAttr,\n  getValidChildren,\n  handlerAll,\n  mergeRefs,\n  useCallbackRef,\n  useIsMounted,\n} from \"@yamada-ui/utils\"\nimport { useCallback, useEffect, useId, useRef, useState } from \"react\"\n\nexport interface SegmentedControlItem extends SegmentedControlButtonProps {\n  label?: string\n}\n\nconst { DescendantsContextProvider, useDescendant, useDescendants } =\n  createDescendant<HTMLButtonElement>()\n\ninterface SegmentedControlContext {\n  styles: { [key: string]: CSSUIObject | undefined }\n  value: string\n  getInputProps: RequiredPropGetter<\n    {\n      index: number\n      isDisabled?: boolean\n      isReadOnly?: boolean\n    } & HTMLProps<\"input\">,\n    HTMLProps<\"input\">\n  >\n  getLabelProps: RequiredPropGetter<\n    {\n      index: number\n      value: string\n      disabled?: boolean\n      isDisabled?: boolean\n      isReadOnly?: boolean\n      readOnly?: boolean\n    } & HTMLProps<\"label\">,\n    HTMLProps<\"label\">\n  >\n}\n\nconst [SegmentedControlProvider, useSegmentedControl] =\n  createContext<SegmentedControlContext>({\n    name: \"SegmentedControlContext\",\n    errorMessage: `useSegmentedControl returned is 'undefined'. Seems you forgot to wrap the components in \"<SegmentedControl />\"`,\n  })\n\ninterface SegmentedControlOptions {\n  /**\n   * The HTML `name` attribute used for forms.\n   */\n  name?: string\n  /**\n   * The initial value of the segmented control.\n   */\n  defaultValue?: string\n  /**\n   * If `true`, the segmented control will be disabled.\n   *\n   * @default false\n   */\n  isDisabled?: boolean\n  /**\n   * If `true`, the segmented control will be readonly.\n   *\n   * @default false\n   */\n  isReadOnly?: boolean\n  /**\n   * If provided, generate segmented control buttons but based on items.\n   *\n   * @default '[]'\n   */\n  items?: SegmentedControlItem[]\n  /**\n   * The value of the segmented control.\n   */\n  value?: string\n  /**\n   * The callback fired when any children radio is checked or unchecked.\n   */\n  onChange?: (value: string) => void\n}\n\nexport interface SegmentedControlProps\n  extends Omit<HTMLUIProps, \"defaultValue\" | \"onChange\" | \"value\">,\n    ThemeProps<\"SegmentedControl\">,\n    SegmentedControlOptions {}\n\n/**\n * `SegmentedControl` is a component used for allowing users to select one option from multiple choices.\n *\n * @see Docs https://yamada-ui.com/components/forms/segmented-control\n */\nexport const SegmentedControl = forwardRef<SegmentedControlProps, \"div\">(\n  (props, ref) => {\n    const [styles, mergedProps] = useComponentMultiStyle(\n      \"SegmentedControl\",\n      props,\n    )\n    let {\n      id,\n      name,\n      className,\n      children,\n      defaultValue,\n      isDisabled,\n      isReadOnly,\n      items = [],\n      value: valueProp,\n      onChange: onChangeProp,\n      ...rest\n    } = omitThemeProps(mergedProps)\n    const uuid = useId()\n\n    id ??= uuid\n    name ??= `segmented-control-${uuid}`\n\n    const onChangeRef = useCallbackRef(onChangeProp)\n\n    const descendants = useDescendants()\n\n    const [focusedIndex, setFocusedIndex] = useState<number>(-1)\n    const [isFocusVisible, setIsFocusVisible] = useState<boolean>(false)\n    const containerRef = useRef<HTMLDivElement>(null)\n\n    const [value, setValue] = useControllableState({\n      defaultValue,\n      value: valueProp,\n      onChange: onChangeRef,\n    })\n\n    const onChange = useCallback(\n      (ev: ChangeEvent<HTMLInputElement>) => {\n        if (isDisabled || isReadOnly) {\n          ev.preventDefault()\n\n          return\n        }\n\n        setValue(ev.target.value)\n      },\n      [isDisabled, isReadOnly, setValue],\n    )\n\n    const onFocus = useCallback(\n      (index: number, skip: boolean) => {\n        if (isDisabled) return\n\n        if (skip) {\n          const next = descendants.enabledNextValue(index)\n\n          if (next) setFocusedIndex(next.index)\n        } else {\n          setFocusedIndex(index)\n        }\n      },\n      [descendants, isDisabled],\n    )\n\n    const onBlur = useCallback(() => setFocusedIndex(-1), [])\n\n    const getContainerProps: PropGetter = useCallback(\n      (props = {}, ref = null) => ({\n        ...rest,\n        ...props,\n        id,\n        ref: mergeRefs(containerRef, ref),\n        \"aria-disabled\": ariaAttr(isDisabled),\n        \"data-readonly\": dataAttr(isReadOnly),\n        onBlur: handlerAll(props.onBlur, onBlur),\n      }),\n      [id, isDisabled, isReadOnly, onBlur, rest],\n    )\n\n    const getInputProps: RequiredPropGetter<\n      {\n        index: number\n        isDisabled?: boolean\n        isReadOnly?: boolean\n      } & HTMLProps<\"input\">,\n      HTMLUIProps<\"input\">\n    > = useCallback(\n      (\n        {\n          index,\n          isDisabled: isDisabledProp,\n          isReadOnly: isReadOnlyProp,\n          ...props\n        },\n        ref = null,\n      ) => {\n        const disabled = props.disabled ?? isDisabledProp ?? isDisabled\n        const readOnly = props.readOnly ?? isReadOnlyProp ?? isReadOnly\n        const checked = props.value === value\n\n        return {\n          ...props,\n          id: `${id}-${index}`,\n          ref,\n          type: \"radio\",\n          name,\n          style: {\n            border: \"0px\",\n            clip: \"rect(0px, 0px, 0px, 0px)\",\n            height: \"1px\",\n            margin: \"-1px\",\n            overflow: \"hidden\",\n            padding: \"0px\",\n            position: \"absolute\",\n            whiteSpace: \"nowrap\",\n            width: \"1px\",\n          },\n          \"aria-disabled\": ariaAttr(disabled),\n          \"data-checked\": dataAttr(checked),\n          \"data-focus\": dataAttr(index === focusedIndex),\n          \"data-readonly\": dataAttr(readOnly),\n          checked,\n          disabled: disabled || readOnly,\n          readOnly,\n          onChange: handlerAll(props.onChange, (ev) =>\n            !disabled && !readOnly\n              ? onChange(ev as ChangeEvent<HTMLInputElement>)\n              : {},\n          ),\n        }\n      },\n      [isDisabled, isReadOnly, value, id, name, focusedIndex, onChange],\n    )\n\n    const getLabelProps: RequiredPropGetter<\n      {\n        index: number\n        value: string\n        disabled?: boolean\n        isDisabled?: boolean\n        isReadOnly?: boolean\n        readOnly?: boolean\n      } & HTMLProps<\"label\">,\n      HTMLProps<\"label\">\n    > = useCallback(\n      (\n        {\n          index,\n          isDisabled: isDisabledProp,\n          isReadOnly: isReadOnlyProp,\n          ...props\n        },\n        ref = null,\n      ) => {\n        const disabled = props.disabled ?? isDisabledProp ?? isDisabled\n        const readOnly = props.readOnly ?? isReadOnlyProp ?? isReadOnly\n        const checked = props.value === value\n        const focused = index === focusedIndex\n\n        return {\n          ...props,\n          ref,\n          \"aria-disabled\": ariaAttr(disabled),\n          \"data-checked\": dataAttr(checked),\n          \"data-focus\": dataAttr(focused),\n          \"data-focus-visible\": dataAttr(focused && isFocusVisible),\n          \"data-readonly\": dataAttr(readOnly),\n          onFocus: handlerAll(\n            props.onFocus as unknown as FocusEventHandler<HTMLLabelElement>,\n            () => onFocus(index, disabled || readOnly || false),\n          ),\n          ...(disabled || readOnly\n            ? {\n                _active: {},\n                _focus: {},\n                _focusVisible: {},\n                _hover: {},\n                _invalid: {},\n              }\n            : {}),\n        }\n      },\n      [focusedIndex, isDisabled, isFocusVisible, isReadOnly, onFocus, value],\n    )\n\n    useEffect(() => {\n      return trackFocusVisible(setIsFocusVisible)\n    }, [])\n\n    const css: CSSUIObject = {\n      alignItems: \"center\",\n      display: \"inline-flex\",\n      ...styles.container,\n    }\n\n    const validChildren = getValidChildren(children)\n    let computedChildren: ReactElement[] = []\n\n    if (!validChildren.length && items.length) {\n      computedChildren = items.map(({ label, value, ...props }, i) => (\n        <SegmentedControlButton key={i} value={value} {...props}>\n          {label}\n        </SegmentedControlButton>\n      ))\n    } else {\n      computedChildren = validChildren\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n    if (value == null && defaultValue == null) {\n      for (const child of computedChildren) {\n        if (child.type !== SegmentedControlButton)\n          if (\n            (child.type as any).displayName !==\n            SegmentedControlButton.displayName\n          )\n            continue\n\n        const value = child.props.value\n\n        setValue(value)\n\n        break\n      }\n    }\n\n    return (\n      <DescendantsContextProvider value={descendants}>\n        <SegmentedControlProvider\n          value={{ styles, value, getInputProps, getLabelProps }}\n        >\n          <LayoutGroup id={id}>\n            <ui.div\n              {...getContainerProps({}, ref)}\n              className={cx(\"ui-segmented-control\", className)}\n              __css={css}\n            >\n              {computedChildren}\n            </ui.div>\n          </LayoutGroup>\n        </SegmentedControlProvider>\n      </DescendantsContextProvider>\n    )\n  },\n)\n\nSegmentedControl.displayName = \"SegmentedControl\"\nSegmentedControl.__ui__ = \"SegmentedControl\"\n\ninterface SegmentedControlButtonOptions {\n  /**\n   * The value of the segmented control button.\n   */\n  value: string\n  /**\n   * Props for motion component.\n   */\n  motionProps?: MotionProps\n  /**\n   * The callback fired when any children radio is checked or unchecked.\n   */\n  onChange?: ChangeEventHandler<HTMLInputElement>\n}\n\nexport interface SegmentedControlButtonProps\n  extends Omit<HTMLUIProps<\"label\">, \"onChange\">,\n    Pick<SegmentedControlProps, \"isDisabled\" | \"isReadOnly\">,\n    SegmentedControlButtonOptions {}\n\nexport const SegmentedControlButton = forwardRef<\n  SegmentedControlButtonProps,\n  \"input\"\n>(\n  (\n    {\n      className,\n      children,\n      disabled,\n      isDisabled,\n      isReadOnly,\n      readOnly,\n      value,\n      motionProps,\n      onChange,\n      ...rest\n    },\n    ref,\n  ) => {\n    const [, isMounted] = useIsMounted({ rerender: true })\n    const {\n      styles,\n      value: selectedValue,\n      getInputProps,\n      getLabelProps,\n    } = useSegmentedControl()\n\n    const { index, register } = useDescendant({\n      disabled: isDisabled || isReadOnly,\n    })\n\n    const props = {\n      disabled,\n      index,\n      isDisabled,\n      isReadOnly,\n      readOnly,\n      value,\n    }\n\n    const css: CSSUIObject = {\n      alignItems: \"center\",\n      cursor: \"pointer\",\n      display: \"inline-flex\",\n      flex: \"1 1 0%\",\n      justifyContent: \"center\",\n      position: \"relative\",\n      ...styles.button,\n    }\n\n    const isSelected = value === selectedValue\n\n    return (\n      <ui.label\n        {...getLabelProps(props)}\n        className={cx(\"ui-segmented-control__button\", className)}\n        __css={css}\n        {...rest}\n      >\n        <ui.input\n          {...getInputProps({ onChange, ...props }, mergeRefs(register, ref))}\n        />\n        {isSelected && isMounted ? (\n          <SegmentedControlCursor {...motionProps} />\n        ) : null}\n        <ui.span zIndex=\"1\">{children}</ui.span>\n      </ui.label>\n    )\n  },\n)\n\nSegmentedControlButton.displayName = \"SegmentedControlButton\"\nSegmentedControlButton.__ui__ = \"SegmentedControlButton\"\n\ninterface SegmentedControlCursorProps extends MotionProps {\n  className?: string\n}\n\nconst SegmentedControlCursor: FC<SegmentedControlCursorProps> = ({\n  className,\n  transition,\n  ...rest\n}) => {\n  const { styles } = useSegmentedControl()\n\n  const css: CSSUIObject = {\n    h: \"100%\",\n    position: \"absolute\",\n    w: \"100%\",\n    ...styles.cursor,\n  }\n\n  return (\n    <motion.div\n      className={cx(\"ui-segmented-control__cursor\", className)}\n      layoutDependency={false}\n      layoutId=\"cursor\"\n      transition={{\n        type: \"spring\",\n        bounce: 0.15,\n        duration: 0.4,\n        ...transition,\n      }}\n      __css={css}\n      {...rest}\n    />\n  )\n}\n\nSegmentedControlCursor.displayName = \"SegmentedControlCursor\"\nSegmentedControlCursor.__ui__ = \"SegmentedControlCursor\"\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACgBA,kBAKO;AACP,oBAAoC;AACpC,oCAAqC;AACrC,4BAAiC;AACjC,+BAAkC;AAClC,mBAUO;AACP,mBAAgE;AAgSxD;AA1RR,IAAM,EAAE,4BAA4B,eAAe,eAAe,QAChE,wCAAoC;AA0BtC,IAAM,CAAC,0BAA0B,mBAAmB,QAClD,4BAAuC;AAAA,EACrC,MAAM;AAAA,EACN,cAAc;AAChB,CAAC;AAiDI,IAAM,uBAAmB;AAAA,EAC9B,CAAC,OAAO,QAAQ;AACd,UAAM,CAAC,QAAQ,WAAW,QAAI;AAAA,MAC5B;AAAA,MACA;AAAA,IACF;AACA,QAAI;AAAA,MACF;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,QAAQ,CAAC;AAAA,MACT,OAAO;AAAA,MACP,UAAU;AAAA,MACV,GAAG;AAAA,IACL,QAAI,4BAAe,WAAW;AAC9B,UAAM,WAAO,oBAAM;AAEnB,2BAAO;AACP,iCAAS,qBAAqB,IAAI;AAElC,UAAM,kBAAc,6BAAe,YAAY;AAE/C,UAAM,cAAc,eAAe;AAEnC,UAAM,CAAC,cAAc,eAAe,QAAI,uBAAiB,EAAE;AAC3D,UAAM,CAAC,gBAAgB,iBAAiB,QAAI,uBAAkB,KAAK;AACnE,UAAM,mBAAe,qBAAuB,IAAI;AAEhD,UAAM,CAAC,OAAO,QAAQ,QAAI,oDAAqB;AAAA,MAC7C;AAAA,MACA,OAAO;AAAA,MACP,UAAU;AAAA,IACZ,CAAC;AAED,UAAM,eAAW;AAAA,MACf,CAAC,OAAsC;AACrC,YAAI,cAAc,YAAY;AAC5B,aAAG,eAAe;AAElB;AAAA,QACF;AAEA,iBAAS,GAAG,OAAO,KAAK;AAAA,MAC1B;AAAA,MACA,CAAC,YAAY,YAAY,QAAQ;AAAA,IACnC;AAEA,UAAM,cAAU;AAAA,MACd,CAAC,OAAe,SAAkB;AAChC,YAAI,WAAY;AAEhB,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,UAAU;AAAA,IAC1B;AAEA,UAAM,aAAS,0BAAY,MAAM,gBAAgB,EAAE,GAAG,CAAC,CAAC;AAExD,UAAM,wBAAgC;AAAA,MACpC,CAACA,SAAQ,CAAC,GAAGC,OAAM,UAAU;AAAA,QAC3B,GAAG;AAAA,QACH,GAAGD;AAAA,QACH;AAAA,QACA,SAAK,wBAAU,cAAcC,IAAG;AAAA,QAChC,qBAAiB,uBAAS,UAAU;AAAA,QACpC,qBAAiB,uBAAS,UAAU;AAAA,QACpC,YAAQ,yBAAWD,OAAM,QAAQ,MAAM;AAAA,MACzC;AAAA,MACA,CAAC,IAAI,YAAY,YAAY,QAAQ,IAAI;AAAA,IAC3C;AAEA,UAAM,oBAOF;AAAA,MACF,CACE;AAAA,QACE;AAAA,QACA,YAAY;AAAA,QACZ,YAAY;AAAA,QACZ,GAAGA;AAAA,MACL,GACAC,OAAM,SACH;AA5NX;AA6NQ,cAAM,YAAW,WAAAD,OAAM,aAAN,YAAkB,mBAAlB,YAAoC;AACrD,cAAM,YAAW,WAAAA,OAAM,aAAN,YAAkB,mBAAlB,YAAoC;AACrD,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,QAAQ;AAAA,UAClC,oBAAgB,uBAAS,OAAO;AAAA,UAChC,kBAAc,uBAAS,UAAU,YAAY;AAAA,UAC7C,qBAAiB,uBAAS,QAAQ;AAAA,UAClC;AAAA,UACA,UAAU,YAAY;AAAA,UACtB;AAAA,UACA,cAAU;AAAA,YAAWD,OAAM;AAAA,YAAU,CAAC,OACpC,CAAC,YAAY,CAAC,WACV,SAAS,EAAmC,IAC5C,CAAC;AAAA,UACP;AAAA,QACF;AAAA,MACF;AAAA,MACA,CAAC,YAAY,YAAY,OAAO,IAAI,MAAM,cAAc,QAAQ;AAAA,IAClE;AAEA,UAAM,oBAUF;AAAA,MACF,CACE;AAAA,QACE;AAAA,QACA,YAAY;AAAA,QACZ,YAAY;AAAA,QACZ,GAAGA;AAAA,MACL,GACAC,OAAM,SACH;AAtRX;AAuRQ,cAAM,YAAW,WAAAD,OAAM,aAAN,YAAkB,mBAAlB,YAAoC;AACrD,cAAM,YAAW,WAAAA,OAAM,aAAN,YAAkB,mBAAlB,YAAoC;AACrD,cAAM,UAAUA,OAAM,UAAU;AAChC,cAAM,UAAU,UAAU;AAE1B,eAAO;AAAA,UACL,GAAGA;AAAA,UACH,KAAAC;AAAA,UACA,qBAAiB,uBAAS,QAAQ;AAAA,UAClC,oBAAgB,uBAAS,OAAO;AAAA,UAChC,kBAAc,uBAAS,OAAO;AAAA,UAC9B,0BAAsB,uBAAS,WAAW,cAAc;AAAA,UACxD,qBAAiB,uBAAS,QAAQ;AAAA,UAClC,aAAS;AAAA,YACPD,OAAM;AAAA,YACN,MAAM,QAAQ,OAAO,YAAY,YAAY,KAAK;AAAA,UACpD;AAAA,UACA,GAAI,YAAY,WACZ;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,YAAY,gBAAgB,YAAY,SAAS,KAAK;AAAA,IACvE;AAEA,gCAAU,MAAM;AACd,iBAAO,4CAAkB,iBAAiB;AAAA,IAC5C,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;AAsBnB,IAAM,6BAAyB;AAAA,EAIpC,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,CAAC,EAAE,SAAS,QAAI,2BAAa,EAAE,UAAU,KAAK,CAAC;AACrD,UAAM;AAAA,MACJ;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MACA;AAAA,IACF,IAAI,oBAAoB;AAExB,UAAM,EAAE,OAAO,SAAS,IAAI,cAAc;AAAA,MACxC,UAAU,cAAc;AAAA,IAC1B,CAAC;AAED,UAAM,QAAQ;AAAA,MACZ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAEA,UAAM,MAAmB;AAAA,MACvB,YAAY;AAAA,MACZ,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,MAAM;AAAA,MACN,gBAAgB;AAAA,MAChB,UAAU;AAAA,MACV,GAAG,OAAO;AAAA,IACZ;AAEA,UAAM,aAAa,UAAU;AAE7B,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,cAAc,YACb,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"]}
+{"version":3,"sources":["../src/index.ts","../src/segmented-control.tsx"],"sourcesContent":["export { SegmentedControl, SegmentedControlButton } from \"./segmented-control\"\nexport type {\n  SegmentedControlButtonProps,\n  SegmentedControlItem,\n  SegmentedControlProps,\n} from \"./segmented-control\"\n","import type {\n  CSSUIObject,\n  FC,\n  HTMLProps,\n  HTMLUIProps,\n  PropGetter,\n  RequiredPropGetter,\n  ThemeProps,\n} from \"@yamada-ui/core\"\nimport type { MotionProps } from \"@yamada-ui/motion\"\nimport type {\n  ChangeEvent,\n  ChangeEventHandler,\n  FocusEventHandler,\n  ReactElement,\n} from \"react\"\nimport {\n  forwardRef,\n  omitThemeProps,\n  ui,\n  useComponentMultiStyle,\n} from \"@yamada-ui/core\"\nimport { LayoutGroup, motion } from \"@yamada-ui/motion\"\nimport { useControllableState } from \"@yamada-ui/use-controllable-state\"\nimport { createDescendant } from \"@yamada-ui/use-descendant\"\nimport { trackFocusVisible } from \"@yamada-ui/use-focus-visible\"\nimport {\n  ariaAttr,\n  createContext,\n  cx,\n  dataAttr,\n  getValidChildren,\n  handlerAll,\n  mergeRefs,\n  useCallbackRef,\n  useIsMounted,\n} from \"@yamada-ui/utils\"\nimport { useCallback, useEffect, useId, useRef, useState } from \"react\"\n\nexport interface SegmentedControlItem extends SegmentedControlButtonProps {\n  label?: string\n}\n\nconst { DescendantsContextProvider, useDescendant, useDescendants } =\n  createDescendant<HTMLButtonElement>()\n\ninterface SegmentedControlContext {\n  styles: { [key: string]: CSSUIObject | undefined }\n  value: string\n  getInputProps: RequiredPropGetter<\n    {\n      index: number\n      isDisabled?: boolean\n      isReadOnly?: boolean\n    } & HTMLProps<\"input\">,\n    HTMLProps<\"input\">\n  >\n  getLabelProps: RequiredPropGetter<\n    {\n      index: number\n      value: string\n      disabled?: boolean\n      isDisabled?: boolean\n      isReadOnly?: boolean\n      readOnly?: boolean\n    } & HTMLProps<\"label\">,\n    HTMLProps<\"label\">\n  >\n}\n\nconst [SegmentedControlProvider, useSegmentedControl] =\n  createContext<SegmentedControlContext>({\n    name: \"SegmentedControlContext\",\n    errorMessage: `useSegmentedControl returned is 'undefined'. Seems you forgot to wrap the components in \"<SegmentedControl />\"`,\n  })\n\ninterface SegmentedControlOptions {\n  /**\n   * The HTML `name` attribute used for forms.\n   */\n  name?: string\n  /**\n   * The initial value of the segmented control.\n   */\n  defaultValue?: string\n  /**\n   * If `true`, the segmented control will be disabled.\n   *\n   * @default false\n   */\n  isDisabled?: boolean\n  /**\n   * If `true`, the segmented control will be readonly.\n   *\n   * @default false\n   */\n  isReadOnly?: boolean\n  /**\n   * If provided, generate segmented control buttons but based on items.\n   *\n   * @default '[]'\n   */\n  items?: SegmentedControlItem[]\n  /**\n   * The value of the segmented control.\n   */\n  value?: string\n  /**\n   * The callback fired when any children radio is checked or unchecked.\n   */\n  onChange?: (value: string) => void\n}\n\nexport interface SegmentedControlProps\n  extends Omit<HTMLUIProps, \"defaultValue\" | \"onChange\" | \"value\">,\n    ThemeProps<\"SegmentedControl\">,\n    SegmentedControlOptions {}\n\n/**\n * `SegmentedControl` is a component used for allowing users to select one option from multiple choices.\n *\n * @see Docs https://yamada-ui.com/components/forms/segmented-control\n */\nexport const SegmentedControl = forwardRef<SegmentedControlProps, \"div\">(\n  (props, ref) => {\n    const [styles, mergedProps] = useComponentMultiStyle(\n      \"SegmentedControl\",\n      props,\n    )\n    let {\n      id,\n      name,\n      className,\n      children,\n      defaultValue,\n      isDisabled,\n      isReadOnly,\n      items = [],\n      value: valueProp,\n      onChange: onChangeProp,\n      ...rest\n    } = omitThemeProps(mergedProps)\n    const uuid = useId()\n\n    id ??= uuid\n    name ??= `segmented-control-${uuid}`\n\n    const onChangeRef = useCallbackRef(onChangeProp)\n\n    const descendants = useDescendants()\n\n    const [focusedIndex, setFocusedIndex] = useState<number>(-1)\n    const [isFocusVisible, setIsFocusVisible] = useState<boolean>(false)\n    const containerRef = useRef<HTMLDivElement>(null)\n\n    const [value, setValue] = useControllableState({\n      defaultValue,\n      value: valueProp,\n      onChange: onChangeRef,\n    })\n\n    const onChange = useCallback(\n      (ev: ChangeEvent<HTMLInputElement>) => {\n        if (isDisabled || isReadOnly) {\n          ev.preventDefault()\n\n          return\n        }\n\n        setValue(ev.target.value)\n      },\n      [isDisabled, isReadOnly, setValue],\n    )\n\n    const onFocus = useCallback(\n      (index: number, skip: boolean) => {\n        if (isDisabled) return\n\n        if (skip) {\n          const next = descendants.enabledNextValue(index)\n\n          if (next) setFocusedIndex(next.index)\n        } else {\n          setFocusedIndex(index)\n        }\n      },\n      [descendants, isDisabled],\n    )\n\n    const onBlur = useCallback(() => setFocusedIndex(-1), [])\n\n    const getContainerProps: PropGetter = useCallback(\n      (props = {}, ref = null) => ({\n        \"aria-disabled\": ariaAttr(isDisabled),\n        \"data-readonly\": dataAttr(isReadOnly),\n        role: \"radiogroup\",\n        ...rest,\n        ...props,\n        id,\n        ref: mergeRefs(containerRef, ref),\n        onBlur: handlerAll(props.onBlur, onBlur),\n      }),\n      [id, isDisabled, isReadOnly, onBlur, rest],\n    )\n\n    const getInputProps: RequiredPropGetter<\n      {\n        index: number\n        isDisabled?: boolean\n        isReadOnly?: boolean\n      } & HTMLProps<\"input\">,\n      HTMLUIProps<\"input\">\n    > = useCallback(\n      (\n        {\n          index,\n          isDisabled: isDisabledProp,\n          isReadOnly: isReadOnlyProp,\n          ...props\n        },\n        ref = null,\n      ) => {\n        const disabled = props.disabled ?? isDisabledProp ?? isDisabled\n        const readOnly = props.readOnly ?? isReadOnlyProp ?? isReadOnly\n        const checked = props.value === value\n\n        return {\n          ...props,\n          id: `${id}-${index}`,\n          ref,\n          type: \"radio\",\n          name,\n          style: {\n            border: \"0px\",\n            clip: \"rect(0px, 0px, 0px, 0px)\",\n            height: \"1px\",\n            margin: \"-1px\",\n            overflow: \"hidden\",\n            padding: \"0px\",\n            position: \"absolute\",\n            whiteSpace: \"nowrap\",\n            width: \"1px\",\n          },\n          \"aria-disabled\": ariaAttr(disabled),\n          \"data-checked\": dataAttr(checked),\n          \"data-focus\": dataAttr(index === focusedIndex),\n          \"data-readonly\": dataAttr(readOnly),\n          checked,\n          disabled: disabled || readOnly,\n          readOnly,\n          onChange: handlerAll(props.onChange, (ev) =>\n            !disabled && !readOnly\n              ? onChange(ev as ChangeEvent<HTMLInputElement>)\n              : {},\n          ),\n        }\n      },\n      [isDisabled, isReadOnly, value, id, name, focusedIndex, onChange],\n    )\n\n    const getLabelProps: RequiredPropGetter<\n      {\n        index: number\n        value: string\n        disabled?: boolean\n        isDisabled?: boolean\n        isReadOnly?: boolean\n        readOnly?: boolean\n      } & HTMLProps<\"label\">,\n      HTMLProps<\"label\">\n    > = useCallback(\n      (\n        {\n          index,\n          isDisabled: isDisabledProp,\n          isReadOnly: isReadOnlyProp,\n          ...props\n        },\n        ref = null,\n      ) => {\n        const disabled = props.disabled ?? isDisabledProp ?? isDisabled\n        const readOnly = props.readOnly ?? isReadOnlyProp ?? isReadOnly\n        const checked = props.value === value\n        const focused = index === focusedIndex\n\n        return {\n          ...props,\n          ref,\n          \"aria-disabled\": ariaAttr(disabled),\n          \"data-checked\": dataAttr(checked),\n          \"data-focus\": dataAttr(focused),\n          \"data-focus-visible\": dataAttr(focused && isFocusVisible),\n          \"data-readonly\": dataAttr(readOnly),\n          onFocus: handlerAll(\n            props.onFocus as unknown as FocusEventHandler<HTMLLabelElement>,\n            () => onFocus(index, disabled || readOnly || false),\n          ),\n          ...(disabled || readOnly\n            ? {\n                _active: {},\n                _focus: {},\n                _focusVisible: {},\n                _hover: {},\n                _invalid: {},\n              }\n            : {}),\n        }\n      },\n      [focusedIndex, isDisabled, isFocusVisible, isReadOnly, onFocus, value],\n    )\n\n    useEffect(() => {\n      return trackFocusVisible(setIsFocusVisible)\n    }, [])\n\n    const css: CSSUIObject = {\n      alignItems: \"center\",\n      display: \"inline-flex\",\n      ...styles.container,\n    }\n\n    const validChildren = getValidChildren(children)\n    let computedChildren: ReactElement[] = []\n\n    if (!validChildren.length && items.length) {\n      computedChildren = items.map(({ label, value, ...props }, i) => (\n        <SegmentedControlButton key={i} value={value} {...props}>\n          {label}\n        </SegmentedControlButton>\n      ))\n    } else {\n      computedChildren = validChildren\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n    if (value == null && defaultValue == null) {\n      for (const child of computedChildren) {\n        if (child.type !== SegmentedControlButton)\n          if (\n            (child.type as any).displayName !==\n            SegmentedControlButton.displayName\n          )\n            continue\n\n        const value = child.props.value\n\n        setValue(value)\n\n        break\n      }\n    }\n\n    return (\n      <DescendantsContextProvider value={descendants}>\n        <SegmentedControlProvider\n          value={{ styles, value, getInputProps, getLabelProps }}\n        >\n          <LayoutGroup id={id}>\n            <ui.div\n              {...getContainerProps({}, ref)}\n              className={cx(\"ui-segmented-control\", className)}\n              __css={css}\n            >\n              {computedChildren}\n            </ui.div>\n          </LayoutGroup>\n        </SegmentedControlProvider>\n      </DescendantsContextProvider>\n    )\n  },\n)\n\nSegmentedControl.displayName = \"SegmentedControl\"\nSegmentedControl.__ui__ = \"SegmentedControl\"\n\ninterface SegmentedControlButtonOptions {\n  /**\n   * The value of the segmented control button.\n   */\n  value: string\n  /**\n   * Props for motion component.\n   */\n  motionProps?: MotionProps\n  /**\n   * The callback fired when any children radio is checked or unchecked.\n   */\n  onChange?: ChangeEventHandler<HTMLInputElement>\n}\n\nexport interface SegmentedControlButtonProps\n  extends Omit<HTMLUIProps<\"label\">, \"onChange\">,\n    Pick<SegmentedControlProps, \"isDisabled\" | \"isReadOnly\">,\n    SegmentedControlButtonOptions {}\n\nexport const SegmentedControlButton = forwardRef<\n  SegmentedControlButtonProps,\n  \"input\"\n>(\n  (\n    {\n      className,\n      children,\n      disabled,\n      isDisabled,\n      isReadOnly,\n      readOnly,\n      value,\n      motionProps,\n      onChange,\n      ...rest\n    },\n    ref,\n  ) => {\n    const [, isMounted] = useIsMounted({ rerender: true })\n    const {\n      styles,\n      value: selectedValue,\n      getInputProps,\n      getLabelProps,\n    } = useSegmentedControl()\n\n    const { index, register } = useDescendant({\n      disabled: isDisabled || isReadOnly,\n    })\n\n    const props = {\n      disabled,\n      index,\n      isDisabled,\n      isReadOnly,\n      readOnly,\n      value,\n    }\n\n    const css: CSSUIObject = {\n      alignItems: \"center\",\n      cursor: \"pointer\",\n      display: \"inline-flex\",\n      flex: \"1 1 0%\",\n      justifyContent: \"center\",\n      position: \"relative\",\n      ...styles.button,\n    }\n\n    const isSelected = value === selectedValue\n\n    return (\n      <ui.label\n        {...getLabelProps(props)}\n        className={cx(\"ui-segmented-control__button\", className)}\n        __css={css}\n        {...rest}\n      >\n        <ui.input\n          {...getInputProps({ onChange, ...props }, mergeRefs(register, ref))}\n        />\n        {isSelected && isMounted ? (\n          <SegmentedControlCursor {...motionProps} />\n        ) : null}\n        <ui.span zIndex=\"1\">{children}</ui.span>\n      </ui.label>\n    )\n  },\n)\n\nSegmentedControlButton.displayName = \"SegmentedControlButton\"\nSegmentedControlButton.__ui__ = \"SegmentedControlButton\"\n\ninterface SegmentedControlCursorProps extends MotionProps {\n  className?: string\n}\n\nconst SegmentedControlCursor: FC<SegmentedControlCursorProps> = ({\n  className,\n  transition,\n  ...rest\n}) => {\n  const { styles } = useSegmentedControl()\n\n  const css: CSSUIObject = {\n    h: \"100%\",\n    position: \"absolute\",\n    w: \"100%\",\n    ...styles.cursor,\n  }\n\n  return (\n    <motion.div\n      className={cx(\"ui-segmented-control__cursor\", className)}\n      layoutDependency={false}\n      layoutId=\"cursor\"\n      transition={{\n        type: \"spring\",\n        bounce: 0.15,\n        duration: 0.4,\n        ...transition,\n      }}\n      __css={css}\n      {...rest}\n    />\n  )\n}\n\nSegmentedControlCursor.displayName = \"SegmentedControlCursor\"\nSegmentedControlCursor.__ui__ = \"SegmentedControlCursor\"\n"],"mappings":"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","names":["props","ref","value"]}

package/dist/index.mjs

@@ -2,7 +2,7 @@
 import {
   SegmentedControl,
   SegmentedControlButton
-} from "./chunk-AVVQKQV6.mjs";
+} from "./chunk-VTK3QCXK.mjs";
 export {
   SegmentedControl,
   SegmentedControlButton

package/dist/segmented-control.js

@@ -95,12 +95,13 @@ var SegmentedControl = (0, import_core.forwardRef)(
     const onBlur = (0, import_react.useCallback)(() => setFocusedIndex(-1), []);
     const getContainerProps = (0, import_react.useCallback)(
       (props2 = {}, ref2 = null) => ({
+        "aria-disabled": (0, import_utils.ariaAttr)(isDisabled),
+        "data-readonly": (0, import_utils.dataAttr)(isReadOnly),
+        role: "radiogroup",
         ...rest,
         ...props2,
         id,
         ref: (0, import_utils.mergeRefs)(containerRef, ref2),
-        "aria-disabled": (0, import_utils.ariaAttr)(isDisabled),
-        "data-readonly": (0, import_utils.dataAttr)(isReadOnly),
         onBlur: (0, import_utils.handlerAll)(props2.onBlur, onBlur)
       }),
       [id, isDisabled, isReadOnly, onBlur, rest]

package/dist/segmented-control.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/segmented-control.tsx"],"sourcesContent":["import type {\n  CSSUIObject,\n  FC,\n  HTMLProps,\n  HTMLUIProps,\n  PropGetter,\n  RequiredPropGetter,\n  ThemeProps,\n} from \"@yamada-ui/core\"\nimport type { MotionProps } from \"@yamada-ui/motion\"\nimport type {\n  ChangeEvent,\n  ChangeEventHandler,\n  FocusEventHandler,\n  ReactElement,\n} from \"react\"\nimport {\n  forwardRef,\n  omitThemeProps,\n  ui,\n  useComponentMultiStyle,\n} from \"@yamada-ui/core\"\nimport { LayoutGroup, motion } from \"@yamada-ui/motion\"\nimport { useControllableState } from \"@yamada-ui/use-controllable-state\"\nimport { createDescendant } from \"@yamada-ui/use-descendant\"\nimport { trackFocusVisible } from \"@yamada-ui/use-focus-visible\"\nimport {\n  ariaAttr,\n  createContext,\n  cx,\n  dataAttr,\n  getValidChildren,\n  handlerAll,\n  mergeRefs,\n  useCallbackRef,\n  useIsMounted,\n} from \"@yamada-ui/utils\"\nimport { useCallback, useEffect, useId, useRef, useState } from \"react\"\n\nexport interface SegmentedControlItem extends SegmentedControlButtonProps {\n  label?: string\n}\n\nconst { DescendantsContextProvider, useDescendant, useDescendants } =\n  createDescendant<HTMLButtonElement>()\n\ninterface SegmentedControlContext {\n  styles: { [key: string]: CSSUIObject | undefined }\n  value: string\n  getInputProps: RequiredPropGetter<\n    {\n      index: number\n      isDisabled?: boolean\n      isReadOnly?: boolean\n    } & HTMLProps<\"input\">,\n    HTMLProps<\"input\">\n  >\n  getLabelProps: RequiredPropGetter<\n    {\n      index: number\n      value: string\n      disabled?: boolean\n      isDisabled?: boolean\n      isReadOnly?: boolean\n      readOnly?: boolean\n    } & HTMLProps<\"label\">,\n    HTMLProps<\"label\">\n  >\n}\n\nconst [SegmentedControlProvider, useSegmentedControl] =\n  createContext<SegmentedControlContext>({\n    name: \"SegmentedControlContext\",\n    errorMessage: `useSegmentedControl returned is 'undefined'. Seems you forgot to wrap the components in \"<SegmentedControl />\"`,\n  })\n\ninterface SegmentedControlOptions {\n  /**\n   * The HTML `name` attribute used for forms.\n   */\n  name?: string\n  /**\n   * The initial value of the segmented control.\n   */\n  defaultValue?: string\n  /**\n   * If `true`, the segmented control will be disabled.\n   *\n   * @default false\n   */\n  isDisabled?: boolean\n  /**\n   * If `true`, the segmented control will be readonly.\n   *\n   * @default false\n   */\n  isReadOnly?: boolean\n  /**\n   * If provided, generate segmented control buttons but based on items.\n   *\n   * @default '[]'\n   */\n  items?: SegmentedControlItem[]\n  /**\n   * The value of the segmented control.\n   */\n  value?: string\n  /**\n   * The callback fired when any children radio is checked or unchecked.\n   */\n  onChange?: (value: string) => void\n}\n\nexport interface SegmentedControlProps\n  extends Omit<HTMLUIProps, \"defaultValue\" | \"onChange\" | \"value\">,\n    ThemeProps<\"SegmentedControl\">,\n    SegmentedControlOptions {}\n\n/**\n * `SegmentedControl` is a component used for allowing users to select one option from multiple choices.\n *\n * @see Docs https://yamada-ui.com/components/forms/segmented-control\n */\nexport const SegmentedControl = forwardRef<SegmentedControlProps, \"div\">(\n  (props, ref) => {\n    const [styles, mergedProps] = useComponentMultiStyle(\n      \"SegmentedControl\",\n      props,\n    )\n    let {\n      id,\n      name,\n      className,\n      children,\n      defaultValue,\n      isDisabled,\n      isReadOnly,\n      items = [],\n      value: valueProp,\n      onChange: onChangeProp,\n      ...rest\n    } = omitThemeProps(mergedProps)\n    const uuid = useId()\n\n    id ??= uuid\n    name ??= `segmented-control-${uuid}`\n\n    const onChangeRef = useCallbackRef(onChangeProp)\n\n    const descendants = useDescendants()\n\n    const [focusedIndex, setFocusedIndex] = useState<number>(-1)\n    const [isFocusVisible, setIsFocusVisible] = useState<boolean>(false)\n    const containerRef = useRef<HTMLDivElement>(null)\n\n    const [value, setValue] = useControllableState({\n      defaultValue,\n      value: valueProp,\n      onChange: onChangeRef,\n    })\n\n    const onChange = useCallback(\n      (ev: ChangeEvent<HTMLInputElement>) => {\n        if (isDisabled || isReadOnly) {\n          ev.preventDefault()\n\n          return\n        }\n\n        setValue(ev.target.value)\n      },\n      [isDisabled, isReadOnly, setValue],\n    )\n\n    const onFocus = useCallback(\n      (index: number, skip: boolean) => {\n        if (isDisabled) return\n\n        if (skip) {\n          const next = descendants.enabledNextValue(index)\n\n          if (next) setFocusedIndex(next.index)\n        } else {\n          setFocusedIndex(index)\n        }\n      },\n      [descendants, isDisabled],\n    )\n\n    const onBlur = useCallback(() => setFocusedIndex(-1), [])\n\n    const getContainerProps: PropGetter = useCallback(\n      (props = {}, ref = null) => ({\n        ...rest,\n        ...props,\n        id,\n        ref: mergeRefs(containerRef, ref),\n        \"aria-disabled\": ariaAttr(isDisabled),\n        \"data-readonly\": dataAttr(isReadOnly),\n        onBlur: handlerAll(props.onBlur, onBlur),\n      }),\n      [id, isDisabled, isReadOnly, onBlur, rest],\n    )\n\n    const getInputProps: RequiredPropGetter<\n      {\n        index: number\n        isDisabled?: boolean\n        isReadOnly?: boolean\n      } & HTMLProps<\"input\">,\n      HTMLUIProps<\"input\">\n    > = useCallback(\n      (\n        {\n          index,\n          isDisabled: isDisabledProp,\n          isReadOnly: isReadOnlyProp,\n          ...props\n        },\n        ref = null,\n      ) => {\n        const disabled = props.disabled ?? isDisabledProp ?? isDisabled\n        const readOnly = props.readOnly ?? isReadOnlyProp ?? isReadOnly\n        const checked = props.value === value\n\n        return {\n          ...props,\n          id: `${id}-${index}`,\n          ref,\n          type: \"radio\",\n          name,\n          style: {\n            border: \"0px\",\n            clip: \"rect(0px, 0px, 0px, 0px)\",\n            height: \"1px\",\n            margin: \"-1px\",\n            overflow: \"hidden\",\n            padding: \"0px\",\n            position: \"absolute\",\n            whiteSpace: \"nowrap\",\n            width: \"1px\",\n          },\n          \"aria-disabled\": ariaAttr(disabled),\n          \"data-checked\": dataAttr(checked),\n          \"data-focus\": dataAttr(index === focusedIndex),\n          \"data-readonly\": dataAttr(readOnly),\n          checked,\n          disabled: disabled || readOnly,\n          readOnly,\n          onChange: handlerAll(props.onChange, (ev) =>\n            !disabled && !readOnly\n              ? onChange(ev as ChangeEvent<HTMLInputElement>)\n              : {},\n          ),\n        }\n      },\n      [isDisabled, isReadOnly, value, id, name, focusedIndex, onChange],\n    )\n\n    const getLabelProps: RequiredPropGetter<\n      {\n        index: number\n        value: string\n        disabled?: boolean\n        isDisabled?: boolean\n        isReadOnly?: boolean\n        readOnly?: boolean\n      } & HTMLProps<\"label\">,\n      HTMLProps<\"label\">\n    > = useCallback(\n      (\n        {\n          index,\n          isDisabled: isDisabledProp,\n          isReadOnly: isReadOnlyProp,\n          ...props\n        },\n        ref = null,\n      ) => {\n        const disabled = props.disabled ?? isDisabledProp ?? isDisabled\n        const readOnly = props.readOnly ?? isReadOnlyProp ?? isReadOnly\n        const checked = props.value === value\n        const focused = index === focusedIndex\n\n        return {\n          ...props,\n          ref,\n          \"aria-disabled\": ariaAttr(disabled),\n          \"data-checked\": dataAttr(checked),\n          \"data-focus\": dataAttr(focused),\n          \"data-focus-visible\": dataAttr(focused && isFocusVisible),\n          \"data-readonly\": dataAttr(readOnly),\n          onFocus: handlerAll(\n            props.onFocus as unknown as FocusEventHandler<HTMLLabelElement>,\n            () => onFocus(index, disabled || readOnly || false),\n          ),\n          ...(disabled || readOnly\n            ? {\n                _active: {},\n                _focus: {},\n                _focusVisible: {},\n                _hover: {},\n                _invalid: {},\n              }\n            : {}),\n        }\n      },\n      [focusedIndex, isDisabled, isFocusVisible, isReadOnly, onFocus, value],\n    )\n\n    useEffect(() => {\n      return trackFocusVisible(setIsFocusVisible)\n    }, [])\n\n    const css: CSSUIObject = {\n      alignItems: \"center\",\n      display: \"inline-flex\",\n      ...styles.container,\n    }\n\n    const validChildren = getValidChildren(children)\n    let computedChildren: ReactElement[] = []\n\n    if (!validChildren.length && items.length) {\n      computedChildren = items.map(({ label, value, ...props }, i) => (\n        <SegmentedControlButton key={i} value={value} {...props}>\n          {label}\n        </SegmentedControlButton>\n      ))\n    } else {\n      computedChildren = validChildren\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n    if (value == null && defaultValue == null) {\n      for (const child of computedChildren) {\n        if (child.type !== SegmentedControlButton)\n          if (\n            (child.type as any).displayName !==\n            SegmentedControlButton.displayName\n          )\n            continue\n\n        const value = child.props.value\n\n        setValue(value)\n\n        break\n      }\n    }\n\n    return (\n      <DescendantsContextProvider value={descendants}>\n        <SegmentedControlProvider\n          value={{ styles, value, getInputProps, getLabelProps }}\n        >\n          <LayoutGroup id={id}>\n            <ui.div\n              {...getContainerProps({}, ref)}\n              className={cx(\"ui-segmented-control\", className)}\n              __css={css}\n            >\n              {computedChildren}\n            </ui.div>\n          </LayoutGroup>\n        </SegmentedControlProvider>\n      </DescendantsContextProvider>\n    )\n  },\n)\n\nSegmentedControl.displayName = \"SegmentedControl\"\nSegmentedControl.__ui__ = \"SegmentedControl\"\n\ninterface SegmentedControlButtonOptions {\n  /**\n   * The value of the segmented control button.\n   */\n  value: string\n  /**\n   * Props for motion component.\n   */\n  motionProps?: MotionProps\n  /**\n   * The callback fired when any children radio is checked or unchecked.\n   */\n  onChange?: ChangeEventHandler<HTMLInputElement>\n}\n\nexport interface SegmentedControlButtonProps\n  extends Omit<HTMLUIProps<\"label\">, \"onChange\">,\n    Pick<SegmentedControlProps, \"isDisabled\" | \"isReadOnly\">,\n    SegmentedControlButtonOptions {}\n\nexport const SegmentedControlButton = forwardRef<\n  SegmentedControlButtonProps,\n  \"input\"\n>(\n  (\n    {\n      className,\n      children,\n      disabled,\n      isDisabled,\n      isReadOnly,\n      readOnly,\n      value,\n      motionProps,\n      onChange,\n      ...rest\n    },\n    ref,\n  ) => {\n    const [, isMounted] = useIsMounted({ rerender: true })\n    const {\n      styles,\n      value: selectedValue,\n      getInputProps,\n      getLabelProps,\n    } = useSegmentedControl()\n\n    const { index, register } = useDescendant({\n      disabled: isDisabled || isReadOnly,\n    })\n\n    const props = {\n      disabled,\n      index,\n      isDisabled,\n      isReadOnly,\n      readOnly,\n      value,\n    }\n\n    const css: CSSUIObject = {\n      alignItems: \"center\",\n      cursor: \"pointer\",\n      display: \"inline-flex\",\n      flex: \"1 1 0%\",\n      justifyContent: \"center\",\n      position: \"relative\",\n      ...styles.button,\n    }\n\n    const isSelected = value === selectedValue\n\n    return (\n      <ui.label\n        {...getLabelProps(props)}\n        className={cx(\"ui-segmented-control__button\", className)}\n        __css={css}\n        {...rest}\n      >\n        <ui.input\n          {...getInputProps({ onChange, ...props }, mergeRefs(register, ref))}\n        />\n        {isSelected && isMounted ? (\n          <SegmentedControlCursor {...motionProps} />\n        ) : null}\n        <ui.span zIndex=\"1\">{children}</ui.span>\n      </ui.label>\n    )\n  },\n)\n\nSegmentedControlButton.displayName = \"SegmentedControlButton\"\nSegmentedControlButton.__ui__ = \"SegmentedControlButton\"\n\ninterface SegmentedControlCursorProps extends MotionProps {\n  className?: string\n}\n\nconst SegmentedControlCursor: FC<SegmentedControlCursorProps> = ({\n  className,\n  transition,\n  ...rest\n}) => {\n  const { styles } = useSegmentedControl()\n\n  const css: CSSUIObject = {\n    h: \"100%\",\n    position: \"absolute\",\n    w: \"100%\",\n    ...styles.cursor,\n  }\n\n  return (\n    <motion.div\n      className={cx(\"ui-segmented-control__cursor\", className)}\n      layoutDependency={false}\n      layoutId=\"cursor\"\n      transition={{\n        type: \"spring\",\n        bounce: 0.15,\n        duration: 0.4,\n        ...transition,\n      }}\n      __css={css}\n      {...rest}\n    />\n  )\n}\n\nSegmentedControlCursor.displayName = \"SegmentedControlCursor\"\nSegmentedControlCursor.__ui__ = \"SegmentedControlCursor\"\n"],"mappings":"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","names":["props","ref","value"]}
+{"version":3,"sources":["../src/segmented-control.tsx"],"sourcesContent":["import type {\n  CSSUIObject,\n  FC,\n  HTMLProps,\n  HTMLUIProps,\n  PropGetter,\n  RequiredPropGetter,\n  ThemeProps,\n} from \"@yamada-ui/core\"\nimport type { MotionProps } from \"@yamada-ui/motion\"\nimport type {\n  ChangeEvent,\n  ChangeEventHandler,\n  FocusEventHandler,\n  ReactElement,\n} from \"react\"\nimport {\n  forwardRef,\n  omitThemeProps,\n  ui,\n  useComponentMultiStyle,\n} from \"@yamada-ui/core\"\nimport { LayoutGroup, motion } from \"@yamada-ui/motion\"\nimport { useControllableState } from \"@yamada-ui/use-controllable-state\"\nimport { createDescendant } from \"@yamada-ui/use-descendant\"\nimport { trackFocusVisible } from \"@yamada-ui/use-focus-visible\"\nimport {\n  ariaAttr,\n  createContext,\n  cx,\n  dataAttr,\n  getValidChildren,\n  handlerAll,\n  mergeRefs,\n  useCallbackRef,\n  useIsMounted,\n} from \"@yamada-ui/utils\"\nimport { useCallback, useEffect, useId, useRef, useState } from \"react\"\n\nexport interface SegmentedControlItem extends SegmentedControlButtonProps {\n  label?: string\n}\n\nconst { DescendantsContextProvider, useDescendant, useDescendants } =\n  createDescendant<HTMLButtonElement>()\n\ninterface SegmentedControlContext {\n  styles: { [key: string]: CSSUIObject | undefined }\n  value: string\n  getInputProps: RequiredPropGetter<\n    {\n      index: number\n      isDisabled?: boolean\n      isReadOnly?: boolean\n    } & HTMLProps<\"input\">,\n    HTMLProps<\"input\">\n  >\n  getLabelProps: RequiredPropGetter<\n    {\n      index: number\n      value: string\n      disabled?: boolean\n      isDisabled?: boolean\n      isReadOnly?: boolean\n      readOnly?: boolean\n    } & HTMLProps<\"label\">,\n    HTMLProps<\"label\">\n  >\n}\n\nconst [SegmentedControlProvider, useSegmentedControl] =\n  createContext<SegmentedControlContext>({\n    name: \"SegmentedControlContext\",\n    errorMessage: `useSegmentedControl returned is 'undefined'. Seems you forgot to wrap the components in \"<SegmentedControl />\"`,\n  })\n\ninterface SegmentedControlOptions {\n  /**\n   * The HTML `name` attribute used for forms.\n   */\n  name?: string\n  /**\n   * The initial value of the segmented control.\n   */\n  defaultValue?: string\n  /**\n   * If `true`, the segmented control will be disabled.\n   *\n   * @default false\n   */\n  isDisabled?: boolean\n  /**\n   * If `true`, the segmented control will be readonly.\n   *\n   * @default false\n   */\n  isReadOnly?: boolean\n  /**\n   * If provided, generate segmented control buttons but based on items.\n   *\n   * @default '[]'\n   */\n  items?: SegmentedControlItem[]\n  /**\n   * The value of the segmented control.\n   */\n  value?: string\n  /**\n   * The callback fired when any children radio is checked or unchecked.\n   */\n  onChange?: (value: string) => void\n}\n\nexport interface SegmentedControlProps\n  extends Omit<HTMLUIProps, \"defaultValue\" | \"onChange\" | \"value\">,\n    ThemeProps<\"SegmentedControl\">,\n    SegmentedControlOptions {}\n\n/**\n * `SegmentedControl` is a component used for allowing users to select one option from multiple choices.\n *\n * @see Docs https://yamada-ui.com/components/forms/segmented-control\n */\nexport const SegmentedControl = forwardRef<SegmentedControlProps, \"div\">(\n  (props, ref) => {\n    const [styles, mergedProps] = useComponentMultiStyle(\n      \"SegmentedControl\",\n      props,\n    )\n    let {\n      id,\n      name,\n      className,\n      children,\n      defaultValue,\n      isDisabled,\n      isReadOnly,\n      items = [],\n      value: valueProp,\n      onChange: onChangeProp,\n      ...rest\n    } = omitThemeProps(mergedProps)\n    const uuid = useId()\n\n    id ??= uuid\n    name ??= `segmented-control-${uuid}`\n\n    const onChangeRef = useCallbackRef(onChangeProp)\n\n    const descendants = useDescendants()\n\n    const [focusedIndex, setFocusedIndex] = useState<number>(-1)\n    const [isFocusVisible, setIsFocusVisible] = useState<boolean>(false)\n    const containerRef = useRef<HTMLDivElement>(null)\n\n    const [value, setValue] = useControllableState({\n      defaultValue,\n      value: valueProp,\n      onChange: onChangeRef,\n    })\n\n    const onChange = useCallback(\n      (ev: ChangeEvent<HTMLInputElement>) => {\n        if (isDisabled || isReadOnly) {\n          ev.preventDefault()\n\n          return\n        }\n\n        setValue(ev.target.value)\n      },\n      [isDisabled, isReadOnly, setValue],\n    )\n\n    const onFocus = useCallback(\n      (index: number, skip: boolean) => {\n        if (isDisabled) return\n\n        if (skip) {\n          const next = descendants.enabledNextValue(index)\n\n          if (next) setFocusedIndex(next.index)\n        } else {\n          setFocusedIndex(index)\n        }\n      },\n      [descendants, isDisabled],\n    )\n\n    const onBlur = useCallback(() => setFocusedIndex(-1), [])\n\n    const getContainerProps: PropGetter = useCallback(\n      (props = {}, ref = null) => ({\n        \"aria-disabled\": ariaAttr(isDisabled),\n        \"data-readonly\": dataAttr(isReadOnly),\n        role: \"radiogroup\",\n        ...rest,\n        ...props,\n        id,\n        ref: mergeRefs(containerRef, ref),\n        onBlur: handlerAll(props.onBlur, onBlur),\n      }),\n      [id, isDisabled, isReadOnly, onBlur, rest],\n    )\n\n    const getInputProps: RequiredPropGetter<\n      {\n        index: number\n        isDisabled?: boolean\n        isReadOnly?: boolean\n      } & HTMLProps<\"input\">,\n      HTMLUIProps<\"input\">\n    > = useCallback(\n      (\n        {\n          index,\n          isDisabled: isDisabledProp,\n          isReadOnly: isReadOnlyProp,\n          ...props\n        },\n        ref = null,\n      ) => {\n        const disabled = props.disabled ?? isDisabledProp ?? isDisabled\n        const readOnly = props.readOnly ?? isReadOnlyProp ?? isReadOnly\n        const checked = props.value === value\n\n        return {\n          ...props,\n          id: `${id}-${index}`,\n          ref,\n          type: \"radio\",\n          name,\n          style: {\n            border: \"0px\",\n            clip: \"rect(0px, 0px, 0px, 0px)\",\n            height: \"1px\",\n            margin: \"-1px\",\n            overflow: \"hidden\",\n            padding: \"0px\",\n            position: \"absolute\",\n            whiteSpace: \"nowrap\",\n            width: \"1px\",\n          },\n          \"aria-disabled\": ariaAttr(disabled),\n          \"data-checked\": dataAttr(checked),\n          \"data-focus\": dataAttr(index === focusedIndex),\n          \"data-readonly\": dataAttr(readOnly),\n          checked,\n          disabled: disabled || readOnly,\n          readOnly,\n          onChange: handlerAll(props.onChange, (ev) =>\n            !disabled && !readOnly\n              ? onChange(ev as ChangeEvent<HTMLInputElement>)\n              : {},\n          ),\n        }\n      },\n      [isDisabled, isReadOnly, value, id, name, focusedIndex, onChange],\n    )\n\n    const getLabelProps: RequiredPropGetter<\n      {\n        index: number\n        value: string\n        disabled?: boolean\n        isDisabled?: boolean\n        isReadOnly?: boolean\n        readOnly?: boolean\n      } & HTMLProps<\"label\">,\n      HTMLProps<\"label\">\n    > = useCallback(\n      (\n        {\n          index,\n          isDisabled: isDisabledProp,\n          isReadOnly: isReadOnlyProp,\n          ...props\n        },\n        ref = null,\n      ) => {\n        const disabled = props.disabled ?? isDisabledProp ?? isDisabled\n        const readOnly = props.readOnly ?? isReadOnlyProp ?? isReadOnly\n        const checked = props.value === value\n        const focused = index === focusedIndex\n\n        return {\n          ...props,\n          ref,\n          \"aria-disabled\": ariaAttr(disabled),\n          \"data-checked\": dataAttr(checked),\n          \"data-focus\": dataAttr(focused),\n          \"data-focus-visible\": dataAttr(focused && isFocusVisible),\n          \"data-readonly\": dataAttr(readOnly),\n          onFocus: handlerAll(\n            props.onFocus as unknown as FocusEventHandler<HTMLLabelElement>,\n            () => onFocus(index, disabled || readOnly || false),\n          ),\n          ...(disabled || readOnly\n            ? {\n                _active: {},\n                _focus: {},\n                _focusVisible: {},\n                _hover: {},\n                _invalid: {},\n              }\n            : {}),\n        }\n      },\n      [focusedIndex, isDisabled, isFocusVisible, isReadOnly, onFocus, value],\n    )\n\n    useEffect(() => {\n      return trackFocusVisible(setIsFocusVisible)\n    }, [])\n\n    const css: CSSUIObject = {\n      alignItems: \"center\",\n      display: \"inline-flex\",\n      ...styles.container,\n    }\n\n    const validChildren = getValidChildren(children)\n    let computedChildren: ReactElement[] = []\n\n    if (!validChildren.length && items.length) {\n      computedChildren = items.map(({ label, value, ...props }, i) => (\n        <SegmentedControlButton key={i} value={value} {...props}>\n          {label}\n        </SegmentedControlButton>\n      ))\n    } else {\n      computedChildren = validChildren\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n    if (value == null && defaultValue == null) {\n      for (const child of computedChildren) {\n        if (child.type !== SegmentedControlButton)\n          if (\n            (child.type as any).displayName !==\n            SegmentedControlButton.displayName\n          )\n            continue\n\n        const value = child.props.value\n\n        setValue(value)\n\n        break\n      }\n    }\n\n    return (\n      <DescendantsContextProvider value={descendants}>\n        <SegmentedControlProvider\n          value={{ styles, value, getInputProps, getLabelProps }}\n        >\n          <LayoutGroup id={id}>\n            <ui.div\n              {...getContainerProps({}, ref)}\n              className={cx(\"ui-segmented-control\", className)}\n              __css={css}\n            >\n              {computedChildren}\n            </ui.div>\n          </LayoutGroup>\n        </SegmentedControlProvider>\n      </DescendantsContextProvider>\n    )\n  },\n)\n\nSegmentedControl.displayName = \"SegmentedControl\"\nSegmentedControl.__ui__ = \"SegmentedControl\"\n\ninterface SegmentedControlButtonOptions {\n  /**\n   * The value of the segmented control button.\n   */\n  value: string\n  /**\n   * Props for motion component.\n   */\n  motionProps?: MotionProps\n  /**\n   * The callback fired when any children radio is checked or unchecked.\n   */\n  onChange?: ChangeEventHandler<HTMLInputElement>\n}\n\nexport interface SegmentedControlButtonProps\n  extends Omit<HTMLUIProps<\"label\">, \"onChange\">,\n    Pick<SegmentedControlProps, \"isDisabled\" | \"isReadOnly\">,\n    SegmentedControlButtonOptions {}\n\nexport const SegmentedControlButton = forwardRef<\n  SegmentedControlButtonProps,\n  \"input\"\n>(\n  (\n    {\n      className,\n      children,\n      disabled,\n      isDisabled,\n      isReadOnly,\n      readOnly,\n      value,\n      motionProps,\n      onChange,\n      ...rest\n    },\n    ref,\n  ) => {\n    const [, isMounted] = useIsMounted({ rerender: true })\n    const {\n      styles,\n      value: selectedValue,\n      getInputProps,\n      getLabelProps,\n    } = useSegmentedControl()\n\n    const { index, register } = useDescendant({\n      disabled: isDisabled || isReadOnly,\n    })\n\n    const props = {\n      disabled,\n      index,\n      isDisabled,\n      isReadOnly,\n      readOnly,\n      value,\n    }\n\n    const css: CSSUIObject = {\n      alignItems: \"center\",\n      cursor: \"pointer\",\n      display: \"inline-flex\",\n      flex: \"1 1 0%\",\n      justifyContent: \"center\",\n      position: \"relative\",\n      ...styles.button,\n    }\n\n    const isSelected = value === selectedValue\n\n    return (\n      <ui.label\n        {...getLabelProps(props)}\n        className={cx(\"ui-segmented-control__button\", className)}\n        __css={css}\n        {...rest}\n      >\n        <ui.input\n          {...getInputProps({ onChange, ...props }, mergeRefs(register, ref))}\n        />\n        {isSelected && isMounted ? (\n          <SegmentedControlCursor {...motionProps} />\n        ) : null}\n        <ui.span zIndex=\"1\">{children}</ui.span>\n      </ui.label>\n    )\n  },\n)\n\nSegmentedControlButton.displayName = \"SegmentedControlButton\"\nSegmentedControlButton.__ui__ = \"SegmentedControlButton\"\n\ninterface SegmentedControlCursorProps extends MotionProps {\n  className?: string\n}\n\nconst SegmentedControlCursor: FC<SegmentedControlCursorProps> = ({\n  className,\n  transition,\n  ...rest\n}) => {\n  const { styles } = useSegmentedControl()\n\n  const css: CSSUIObject = {\n    h: \"100%\",\n    position: \"absolute\",\n    w: \"100%\",\n    ...styles.cursor,\n  }\n\n  return (\n    <motion.div\n      className={cx(\"ui-segmented-control__cursor\", className)}\n      layoutDependency={false}\n      layoutId=\"cursor\"\n      transition={{\n        type: \"spring\",\n        bounce: 0.15,\n        duration: 0.4,\n        ...transition,\n      }}\n      __css={css}\n      {...rest}\n    />\n  )\n}\n\nSegmentedControlCursor.displayName = \"SegmentedControlCursor\"\nSegmentedControlCursor.__ui__ = \"SegmentedControlCursor\"\n"],"mappings":"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","names":["props","ref","value"]}

package/dist/segmented-control.mjs

@@ -2,7 +2,7 @@
 import {
   SegmentedControl,
   SegmentedControlButton
-} from "./chunk-AVVQKQV6.mjs";
+} from "./chunk-VTK3QCXK.mjs";
 export {
   SegmentedControl,
   SegmentedControlButton

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yamada-ui/segmented-control",
-  "version": "1.0.44-next-20241029032539",
+  "version": "1.1.0-dev-20241101055506",
   "description": "Yamada UI segmented control components",
   "keywords": [
     "yamada",
@@ -36,10 +36,10 @@
     "url": "https://github.com/yamada-ui/yamada-ui/issues"
   },
   "dependencies": {
-    "@yamada-ui/core": "1.15.4-next-20241029032539",
-    "@yamada-ui/motion": "2.2.6-next-20241029032539",
+    "@yamada-ui/core": "1.15.4",
+    "@yamada-ui/motion": "2.2.6",
     "@yamada-ui/use-controllable-state": "1.0.23",
-    "@yamada-ui/use-descendant": "1.0.25-next-20241029032539",
+    "@yamada-ui/use-descendant": "1.0.25",
     "@yamada-ui/use-focus-visible": "1.1.10",
     "@yamada-ui/utils": "1.5.4"
   },

package/dist/chunk-AVVQKQV6.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/segmented-control.tsx"],"sourcesContent":["import type {\n  CSSUIObject,\n  FC,\n  HTMLProps,\n  HTMLUIProps,\n  PropGetter,\n  RequiredPropGetter,\n  ThemeProps,\n} from \"@yamada-ui/core\"\nimport type { MotionProps } from \"@yamada-ui/motion\"\nimport type {\n  ChangeEvent,\n  ChangeEventHandler,\n  FocusEventHandler,\n  ReactElement,\n} from \"react\"\nimport {\n  forwardRef,\n  omitThemeProps,\n  ui,\n  useComponentMultiStyle,\n} from \"@yamada-ui/core\"\nimport { LayoutGroup, motion } from \"@yamada-ui/motion\"\nimport { useControllableState } from \"@yamada-ui/use-controllable-state\"\nimport { createDescendant } from \"@yamada-ui/use-descendant\"\nimport { trackFocusVisible } from \"@yamada-ui/use-focus-visible\"\nimport {\n  ariaAttr,\n  createContext,\n  cx,\n  dataAttr,\n  getValidChildren,\n  handlerAll,\n  mergeRefs,\n  useCallbackRef,\n  useIsMounted,\n} from \"@yamada-ui/utils\"\nimport { useCallback, useEffect, useId, useRef, useState } from \"react\"\n\nexport interface SegmentedControlItem extends SegmentedControlButtonProps {\n  label?: string\n}\n\nconst { DescendantsContextProvider, useDescendant, useDescendants } =\n  createDescendant<HTMLButtonElement>()\n\ninterface SegmentedControlContext {\n  styles: { [key: string]: CSSUIObject | undefined }\n  value: string\n  getInputProps: RequiredPropGetter<\n    {\n      index: number\n      isDisabled?: boolean\n      isReadOnly?: boolean\n    } & HTMLProps<\"input\">,\n    HTMLProps<\"input\">\n  >\n  getLabelProps: RequiredPropGetter<\n    {\n      index: number\n      value: string\n      disabled?: boolean\n      isDisabled?: boolean\n      isReadOnly?: boolean\n      readOnly?: boolean\n    } & HTMLProps<\"label\">,\n    HTMLProps<\"label\">\n  >\n}\n\nconst [SegmentedControlProvider, useSegmentedControl] =\n  createContext<SegmentedControlContext>({\n    name: \"SegmentedControlContext\",\n    errorMessage: `useSegmentedControl returned is 'undefined'. Seems you forgot to wrap the components in \"<SegmentedControl />\"`,\n  })\n\ninterface SegmentedControlOptions {\n  /**\n   * The HTML `name` attribute used for forms.\n   */\n  name?: string\n  /**\n   * The initial value of the segmented control.\n   */\n  defaultValue?: string\n  /**\n   * If `true`, the segmented control will be disabled.\n   *\n   * @default false\n   */\n  isDisabled?: boolean\n  /**\n   * If `true`, the segmented control will be readonly.\n   *\n   * @default false\n   */\n  isReadOnly?: boolean\n  /**\n   * If provided, generate segmented control buttons but based on items.\n   *\n   * @default '[]'\n   */\n  items?: SegmentedControlItem[]\n  /**\n   * The value of the segmented control.\n   */\n  value?: string\n  /**\n   * The callback fired when any children radio is checked or unchecked.\n   */\n  onChange?: (value: string) => void\n}\n\nexport interface SegmentedControlProps\n  extends Omit<HTMLUIProps, \"defaultValue\" | \"onChange\" | \"value\">,\n    ThemeProps<\"SegmentedControl\">,\n    SegmentedControlOptions {}\n\n/**\n * `SegmentedControl` is a component used for allowing users to select one option from multiple choices.\n *\n * @see Docs https://yamada-ui.com/components/forms/segmented-control\n */\nexport const SegmentedControl = forwardRef<SegmentedControlProps, \"div\">(\n  (props, ref) => {\n    const [styles, mergedProps] = useComponentMultiStyle(\n      \"SegmentedControl\",\n      props,\n    )\n    let {\n      id,\n      name,\n      className,\n      children,\n      defaultValue,\n      isDisabled,\n      isReadOnly,\n      items = [],\n      value: valueProp,\n      onChange: onChangeProp,\n      ...rest\n    } = omitThemeProps(mergedProps)\n    const uuid = useId()\n\n    id ??= uuid\n    name ??= `segmented-control-${uuid}`\n\n    const onChangeRef = useCallbackRef(onChangeProp)\n\n    const descendants = useDescendants()\n\n    const [focusedIndex, setFocusedIndex] = useState<number>(-1)\n    const [isFocusVisible, setIsFocusVisible] = useState<boolean>(false)\n    const containerRef = useRef<HTMLDivElement>(null)\n\n    const [value, setValue] = useControllableState({\n      defaultValue,\n      value: valueProp,\n      onChange: onChangeRef,\n    })\n\n    const onChange = useCallback(\n      (ev: ChangeEvent<HTMLInputElement>) => {\n        if (isDisabled || isReadOnly) {\n          ev.preventDefault()\n\n          return\n        }\n\n        setValue(ev.target.value)\n      },\n      [isDisabled, isReadOnly, setValue],\n    )\n\n    const onFocus = useCallback(\n      (index: number, skip: boolean) => {\n        if (isDisabled) return\n\n        if (skip) {\n          const next = descendants.enabledNextValue(index)\n\n          if (next) setFocusedIndex(next.index)\n        } else {\n          setFocusedIndex(index)\n        }\n      },\n      [descendants, isDisabled],\n    )\n\n    const onBlur = useCallback(() => setFocusedIndex(-1), [])\n\n    const getContainerProps: PropGetter = useCallback(\n      (props = {}, ref = null) => ({\n        ...rest,\n        ...props,\n        id,\n        ref: mergeRefs(containerRef, ref),\n        \"aria-disabled\": ariaAttr(isDisabled),\n        \"data-readonly\": dataAttr(isReadOnly),\n        onBlur: handlerAll(props.onBlur, onBlur),\n      }),\n      [id, isDisabled, isReadOnly, onBlur, rest],\n    )\n\n    const getInputProps: RequiredPropGetter<\n      {\n        index: number\n        isDisabled?: boolean\n        isReadOnly?: boolean\n      } & HTMLProps<\"input\">,\n      HTMLUIProps<\"input\">\n    > = useCallback(\n      (\n        {\n          index,\n          isDisabled: isDisabledProp,\n          isReadOnly: isReadOnlyProp,\n          ...props\n        },\n        ref = null,\n      ) => {\n        const disabled = props.disabled ?? isDisabledProp ?? isDisabled\n        const readOnly = props.readOnly ?? isReadOnlyProp ?? isReadOnly\n        const checked = props.value === value\n\n        return {\n          ...props,\n          id: `${id}-${index}`,\n          ref,\n          type: \"radio\",\n          name,\n          style: {\n            border: \"0px\",\n            clip: \"rect(0px, 0px, 0px, 0px)\",\n            height: \"1px\",\n            margin: \"-1px\",\n            overflow: \"hidden\",\n            padding: \"0px\",\n            position: \"absolute\",\n            whiteSpace: \"nowrap\",\n            width: \"1px\",\n          },\n          \"aria-disabled\": ariaAttr(disabled),\n          \"data-checked\": dataAttr(checked),\n          \"data-focus\": dataAttr(index === focusedIndex),\n          \"data-readonly\": dataAttr(readOnly),\n          checked,\n          disabled: disabled || readOnly,\n          readOnly,\n          onChange: handlerAll(props.onChange, (ev) =>\n            !disabled && !readOnly\n              ? onChange(ev as ChangeEvent<HTMLInputElement>)\n              : {},\n          ),\n        }\n      },\n      [isDisabled, isReadOnly, value, id, name, focusedIndex, onChange],\n    )\n\n    const getLabelProps: RequiredPropGetter<\n      {\n        index: number\n        value: string\n        disabled?: boolean\n        isDisabled?: boolean\n        isReadOnly?: boolean\n        readOnly?: boolean\n      } & HTMLProps<\"label\">,\n      HTMLProps<\"label\">\n    > = useCallback(\n      (\n        {\n          index,\n          isDisabled: isDisabledProp,\n          isReadOnly: isReadOnlyProp,\n          ...props\n        },\n        ref = null,\n      ) => {\n        const disabled = props.disabled ?? isDisabledProp ?? isDisabled\n        const readOnly = props.readOnly ?? isReadOnlyProp ?? isReadOnly\n        const checked = props.value === value\n        const focused = index === focusedIndex\n\n        return {\n          ...props,\n          ref,\n          \"aria-disabled\": ariaAttr(disabled),\n          \"data-checked\": dataAttr(checked),\n          \"data-focus\": dataAttr(focused),\n          \"data-focus-visible\": dataAttr(focused && isFocusVisible),\n          \"data-readonly\": dataAttr(readOnly),\n          onFocus: handlerAll(\n            props.onFocus as unknown as FocusEventHandler<HTMLLabelElement>,\n            () => onFocus(index, disabled || readOnly || false),\n          ),\n          ...(disabled || readOnly\n            ? {\n                _active: {},\n                _focus: {},\n                _focusVisible: {},\n                _hover: {},\n                _invalid: {},\n              }\n            : {}),\n        }\n      },\n      [focusedIndex, isDisabled, isFocusVisible, isReadOnly, onFocus, value],\n    )\n\n    useEffect(() => {\n      return trackFocusVisible(setIsFocusVisible)\n    }, [])\n\n    const css: CSSUIObject = {\n      alignItems: \"center\",\n      display: \"inline-flex\",\n      ...styles.container,\n    }\n\n    const validChildren = getValidChildren(children)\n    let computedChildren: ReactElement[] = []\n\n    if (!validChildren.length && items.length) {\n      computedChildren = items.map(({ label, value, ...props }, i) => (\n        <SegmentedControlButton key={i} value={value} {...props}>\n          {label}\n        </SegmentedControlButton>\n      ))\n    } else {\n      computedChildren = validChildren\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n    if (value == null && defaultValue == null) {\n      for (const child of computedChildren) {\n        if (child.type !== SegmentedControlButton)\n          if (\n            (child.type as any).displayName !==\n            SegmentedControlButton.displayName\n          )\n            continue\n\n        const value = child.props.value\n\n        setValue(value)\n\n        break\n      }\n    }\n\n    return (\n      <DescendantsContextProvider value={descendants}>\n        <SegmentedControlProvider\n          value={{ styles, value, getInputProps, getLabelProps }}\n        >\n          <LayoutGroup id={id}>\n            <ui.div\n              {...getContainerProps({}, ref)}\n              className={cx(\"ui-segmented-control\", className)}\n              __css={css}\n            >\n              {computedChildren}\n            </ui.div>\n          </LayoutGroup>\n        </SegmentedControlProvider>\n      </DescendantsContextProvider>\n    )\n  },\n)\n\nSegmentedControl.displayName = \"SegmentedControl\"\nSegmentedControl.__ui__ = \"SegmentedControl\"\n\ninterface SegmentedControlButtonOptions {\n  /**\n   * The value of the segmented control button.\n   */\n  value: string\n  /**\n   * Props for motion component.\n   */\n  motionProps?: MotionProps\n  /**\n   * The callback fired when any children radio is checked or unchecked.\n   */\n  onChange?: ChangeEventHandler<HTMLInputElement>\n}\n\nexport interface SegmentedControlButtonProps\n  extends Omit<HTMLUIProps<\"label\">, \"onChange\">,\n    Pick<SegmentedControlProps, \"isDisabled\" | \"isReadOnly\">,\n    SegmentedControlButtonOptions {}\n\nexport const SegmentedControlButton = forwardRef<\n  SegmentedControlButtonProps,\n  \"input\"\n>(\n  (\n    {\n      className,\n      children,\n      disabled,\n      isDisabled,\n      isReadOnly,\n      readOnly,\n      value,\n      motionProps,\n      onChange,\n      ...rest\n    },\n    ref,\n  ) => {\n    const [, isMounted] = useIsMounted({ rerender: true })\n    const {\n      styles,\n      value: selectedValue,\n      getInputProps,\n      getLabelProps,\n    } = useSegmentedControl()\n\n    const { index, register } = useDescendant({\n      disabled: isDisabled || isReadOnly,\n    })\n\n    const props = {\n      disabled,\n      index,\n      isDisabled,\n      isReadOnly,\n      readOnly,\n      value,\n    }\n\n    const css: CSSUIObject = {\n      alignItems: \"center\",\n      cursor: \"pointer\",\n      display: \"inline-flex\",\n      flex: \"1 1 0%\",\n      justifyContent: \"center\",\n      position: \"relative\",\n      ...styles.button,\n    }\n\n    const isSelected = value === selectedValue\n\n    return (\n      <ui.label\n        {...getLabelProps(props)}\n        className={cx(\"ui-segmented-control__button\", className)}\n        __css={css}\n        {...rest}\n      >\n        <ui.input\n          {...getInputProps({ onChange, ...props }, mergeRefs(register, ref))}\n        />\n        {isSelected && isMounted ? (\n          <SegmentedControlCursor {...motionProps} />\n        ) : null}\n        <ui.span zIndex=\"1\">{children}</ui.span>\n      </ui.label>\n    )\n  },\n)\n\nSegmentedControlButton.displayName = \"SegmentedControlButton\"\nSegmentedControlButton.__ui__ = \"SegmentedControlButton\"\n\ninterface SegmentedControlCursorProps extends MotionProps {\n  className?: string\n}\n\nconst SegmentedControlCursor: FC<SegmentedControlCursorProps> = ({\n  className,\n  transition,\n  ...rest\n}) => {\n  const { styles } = useSegmentedControl()\n\n  const css: CSSUIObject = {\n    h: \"100%\",\n    position: \"absolute\",\n    w: \"100%\",\n    ...styles.cursor,\n  }\n\n  return (\n    <motion.div\n      className={cx(\"ui-segmented-control__cursor\", className)}\n      layoutDependency={false}\n      layoutId=\"cursor\"\n      transition={{\n        type: \"spring\",\n        bounce: 0.15,\n        duration: 0.4,\n        ...transition,\n      }}\n      __css={css}\n      {...rest}\n    />\n  )\n}\n\nSegmentedControlCursor.displayName = \"SegmentedControlCursor\"\nSegmentedControlCursor.__ui__ = \"SegmentedControlCursor\"\n"],"mappings":"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","names":["props","ref","value"]}