@yamada-ui/segmented-control 1.0.41-dev-20240928131117 → 1.0.42-dev-20241005172943

package/dist/{chunk-NVQSOYQF.mjs → chunk-LYUWFTFJ.mjs}

@@ -224,6 +224,8 @@ var SegmentedControl = forwardRef(
     ) });
   }
 );
+SegmentedControl.displayName = "SegmentedControl";
+SegmentedControl.__ui__ = "SegmentedControl";
 var SegmentedControlButton = forwardRef(
   ({
     className,
@@ -282,6 +284,7 @@ var SegmentedControlButton = forwardRef(
   }
 );
 SegmentedControlButton.displayName = "SegmentedControlButton";
+SegmentedControlButton.__ui__ = "SegmentedControlButton";
 var SegmentedControlCursor = ({
   className,
   transition,
@@ -311,9 +314,11 @@ var SegmentedControlCursor = ({
     }
   );
 };
+SegmentedControlCursor.displayName = "SegmentedControlCursor";
+SegmentedControlCursor.__ui__ = "SegmentedControlCursor";
 
 export {
   SegmentedControl,
   SegmentedControlButton
 };
-//# sourceMappingURL=chunk-NVQSOYQF.mjs.map
+//# sourceMappingURL=chunk-LYUWFTFJ.mjs.map

package/dist/chunk-LYUWFTFJ.mjs.map

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

package/dist/index.js

@@ -235,6 +235,8 @@ var SegmentedControl = (0, import_core.forwardRef)(
     ) });
   }
 );
+SegmentedControl.displayName = "SegmentedControl";
+SegmentedControl.__ui__ = "SegmentedControl";
 var SegmentedControlButton = (0, import_core.forwardRef)(
   ({
     className,
@@ -293,6 +295,7 @@ var SegmentedControlButton = (0, import_core.forwardRef)(
   }
 );
 SegmentedControlButton.displayName = "SegmentedControlButton";
+SegmentedControlButton.__ui__ = "SegmentedControlButton";
 var SegmentedControlCursor = ({
   className,
   transition,
@@ -322,6 +325,8 @@ var SegmentedControlCursor = ({
     }
   );
 };
+SegmentedControlCursor.displayName = "SegmentedControlCursor";
+SegmentedControlCursor.__ui__ = "SegmentedControlCursor";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   SegmentedControl,

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

package/dist/index.mjs

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

package/dist/segmented-control.js

@@ -233,6 +233,8 @@ var SegmentedControl = (0, import_core.forwardRef)(
     ) });
   }
 );
+SegmentedControl.displayName = "SegmentedControl";
+SegmentedControl.__ui__ = "SegmentedControl";
 var SegmentedControlButton = (0, import_core.forwardRef)(
   ({
     className,
@@ -291,6 +293,7 @@ var SegmentedControlButton = (0, import_core.forwardRef)(
   }
 );
 SegmentedControlButton.displayName = "SegmentedControlButton";
+SegmentedControlButton.__ui__ = "SegmentedControlButton";
 var SegmentedControlCursor = ({
   className,
   transition,
@@ -320,6 +323,8 @@ var SegmentedControlCursor = ({
     }
   );
 };
+SegmentedControlCursor.displayName = "SegmentedControlCursor";
+SegmentedControlCursor.__ui__ = "SegmentedControlCursor";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   SegmentedControl,

package/dist/segmented-control.js.map

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

package/dist/segmented-control.mjs

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yamada-ui/segmented-control",
-  "version": "1.0.41-dev-20240928131117",
+  "version": "1.0.42-dev-20241005172943",
   "description": "Yamada UI segmented control components",
   "keywords": [
     "yamada",
@@ -36,12 +36,12 @@
     "url": "https://github.com/yamada-ui/yamada-ui/issues"
   },
   "dependencies": {
-    "@yamada-ui/core": "1.15.1-dev-20240928131117",
-    "@yamada-ui/use-controllable-state": "1.0.21-dev-20240928131117",
-    "@yamada-ui/use-descendant": "1.0.22-dev-20240928131117",
-    "@yamada-ui/utils": "1.5.2-dev-20240928131117",
-    "@yamada-ui/use-focus-visible": "1.1.8-dev-20240928131117",
-    "@yamada-ui/motion": "2.2.3-dev-20240928131117"
+    "@yamada-ui/core": "1.15.1",
+    "@yamada-ui/motion": "2.2.3",
+    "@yamada-ui/use-controllable-state": "1.0.21",
+    "@yamada-ui/use-descendant": "1.0.22",
+    "@yamada-ui/use-focus-visible": "1.1.8",
+    "@yamada-ui/utils": "1.5.2"
   },
   "devDependencies": {
     "clean-package": "2.2.0",

package/dist/chunk-NVQSOYQF.mjs.map

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