@yamada-ui/segmented-control 1.0.42-next-20241005220055 → 1.0.42

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

@@ -2,10 +2,10 @@
 
 // src/segmented-control.tsx
 import {
-  ui,
   forwardRef,
-  useComponentMultiStyle,
-  omitThemeProps
+  omitThemeProps,
+  ui,
+  useComponentMultiStyle
 } from "@yamada-ui/core";
 import { LayoutGroup, motion } from "@yamada-ui/motion";
 import { useControllableState } from "@yamada-ui/use-controllable-state";
@@ -24,10 +24,10 @@ import {
 } from "@yamada-ui/utils";
 import { useCallback, useEffect, useId, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-var { DescendantsContextProvider, useDescendants, useDescendant } = createDescendant();
+var { DescendantsContextProvider, useDescendant, useDescendants } = createDescendant();
 var [SegmentedControlProvider, useSegmentedControl] = createContext({
-  strict: false,
-  name: "SegmentedControlContext"
+  name: "SegmentedControlContext",
+  errorMessage: `useSegmentedControl returned is 'undefined'. Seems you forgot to wrap the components in "<SegmentedControl />"`
 });
 var SegmentedControl = forwardRef(
   (props, ref) => {
@@ -36,15 +36,15 @@ var SegmentedControl = forwardRef(
       props
     );
     let {
-      className,
       id,
       name,
-      isReadOnly,
-      isDisabled,
+      className,
       children,
-      items = [],
-      value,
       defaultValue,
+      isDisabled,
+      isReadOnly,
+      items = [],
+      value: valueProp,
       onChange: onChangeProp,
       ...rest
     } = omitThemeProps(mergedProps);
@@ -56,9 +56,9 @@ var SegmentedControl = forwardRef(
     const [focusedIndex, setFocusedIndex] = useState(-1);
     const [isFocusVisible, setIsFocusVisible] = useState(false);
     const containerRef = useRef(null);
-    const [selectedValue, setSelectedValue] = useControllableState({
-      value,
+    const [value, setValue] = useControllableState({
       defaultValue,
+      value: valueProp,
       onChange: onChangeRef
     });
     const onChange = useCallback(
@@ -67,9 +67,9 @@ var SegmentedControl = forwardRef(
           ev.preventDefault();
           return;
         }
-        setSelectedValue(ev.target.value);
+        setValue(ev.target.value);
       },
-      [isDisabled, isReadOnly, setSelectedValue]
+      [isDisabled, isReadOnly, setValue]
     );
     const onFocus = useCallback(
       (index, skip) => {
@@ -88,8 +88,8 @@ var SegmentedControl = forwardRef(
       (props2 = {}, ref2 = null) => ({
         ...rest,
         ...props2,
-        ref: mergeRefs(containerRef, ref2),
         id,
+        ref: mergeRefs(containerRef, ref2),
         "aria-disabled": ariaAttr(isDisabled),
         "data-readonly": dataAttr(isReadOnly),
         onBlur: handlerAll(props2.onBlur, onBlur)
@@ -106,38 +106,38 @@ var SegmentedControl = forwardRef(
         var _a, _b, _c, _d;
         const disabled = (_b = (_a = props2.disabled) != null ? _a : isDisabledProp) != null ? _b : isDisabled;
         const readOnly = (_d = (_c = props2.readOnly) != null ? _c : isReadOnlyProp) != null ? _d : isReadOnly;
-        const checked = props2.value === selectedValue;
+        const checked = props2.value === value;
         return {
           ...props2,
-          ref: ref2,
           id: `${id}-${index}`,
+          ref: ref2,
           type: "radio",
           name,
-          disabled: disabled || readOnly,
-          readOnly,
-          checked,
-          "aria-disabled": ariaAttr(disabled),
-          "data-readonly": dataAttr(readOnly),
-          "data-checked": dataAttr(checked),
-          "data-focus": dataAttr(index === focusedIndex),
           style: {
             border: "0px",
             clip: "rect(0px, 0px, 0px, 0px)",
             height: "1px",
-            width: "1px",
             margin: "-1px",
-            padding: "0px",
             overflow: "hidden",
+            padding: "0px",
+            position: "absolute",
             whiteSpace: "nowrap",
-            position: "absolute"
+            width: "1px"
           },
+          "aria-disabled": ariaAttr(disabled),
+          "data-checked": dataAttr(checked),
+          "data-focus": dataAttr(index === focusedIndex),
+          "data-readonly": dataAttr(readOnly),
+          checked,
+          disabled: disabled || readOnly,
+          readOnly,
           onChange: handlerAll(
             props2.onChange,
             (ev) => !disabled && !readOnly ? onChange(ev) : {}
           )
         };
       },
-      [isDisabled, isReadOnly, selectedValue, id, name, focusedIndex, onChange]
+      [isDisabled, isReadOnly, value, id, name, focusedIndex, onChange]
     );
     const getLabelProps = useCallback(
       ({
@@ -149,44 +149,37 @@ var SegmentedControl = forwardRef(
         var _a, _b, _c, _d;
         const disabled = (_b = (_a = props2.disabled) != null ? _a : isDisabledProp) != null ? _b : isDisabled;
         const readOnly = (_d = (_c = props2.readOnly) != null ? _c : isReadOnlyProp) != null ? _d : isReadOnly;
-        const checked = props2.value === selectedValue;
+        const checked = props2.value === value;
         const focused = index === focusedIndex;
         return {
           ...props2,
           ref: ref2,
           "aria-disabled": ariaAttr(disabled),
-          "data-readonly": dataAttr(readOnly),
           "data-checked": dataAttr(checked),
           "data-focus": dataAttr(focused),
           "data-focus-visible": dataAttr(focused && isFocusVisible),
+          "data-readonly": dataAttr(readOnly),
           onFocus: handlerAll(
             props2.onFocus,
             () => onFocus(index, disabled || readOnly || false)
           ),
           ...disabled || readOnly ? {
-            _hover: {},
             _active: {},
             _focus: {},
-            _invalid: {},
-            _focusVisible: {}
+            _focusVisible: {},
+            _hover: {},
+            _invalid: {}
           } : {}
         };
       },
-      [
-        focusedIndex,
-        isDisabled,
-        isFocusVisible,
-        isReadOnly,
-        onFocus,
-        selectedValue
-      ]
+      [focusedIndex, isDisabled, isFocusVisible, isReadOnly, onFocus, value]
     );
     useEffect(() => {
       return trackFocusVisible(setIsFocusVisible);
     }, []);
     const css = {
-      display: "inline-flex",
       alignItems: "center",
+      display: "inline-flex",
       ...styles.container
     };
     const validChildren = getValidChildren(children);
@@ -196,21 +189,21 @@ var SegmentedControl = forwardRef(
     } else {
       computedChildren = validChildren;
     }
-    if (selectedValue == null && defaultValue == null) {
+    if (value == null && defaultValue == null) {
       for (const child of computedChildren) {
         if (child.type !== SegmentedControlButton) {
           if (child.type.displayName !== SegmentedControlButton.displayName)
             continue;
         }
         const value2 = child.props.value;
-        setSelectedValue(value2);
+        setValue(value2);
         break;
       }
     }
     return /* @__PURE__ */ jsx(DescendantsContextProvider, { value: descendants, children: /* @__PURE__ */ jsx(
       SegmentedControlProvider,
       {
-        value: { getInputProps, getLabelProps, styles, selectedValue },
+        value: { styles, value, getInputProps, getLabelProps },
         children: /* @__PURE__ */ jsx(LayoutGroup, { id, children: /* @__PURE__ */ jsx(
           ui.div,
           {
@@ -229,39 +222,44 @@ SegmentedControl.__ui__ = "SegmentedControl";
 var SegmentedControlButton = forwardRef(
   ({
     className,
+    children,
     disabled,
-    readOnly,
     isDisabled,
     isReadOnly,
+    readOnly,
     value,
-    onChange,
-    children,
     motionProps,
+    onChange,
     ...rest
   }, ref) => {
     const [, isMounted] = useIsMounted({ rerender: true });
-    const { selectedValue, getInputProps, getLabelProps, styles } = useSegmentedControl();
+    const {
+      styles,
+      value: selectedValue,
+      getInputProps,
+      getLabelProps
+    } = useSegmentedControl();
     const { index, register } = useDescendant({
       disabled: isDisabled || isReadOnly
     });
     const props = {
-      index,
-      value,
       disabled,
-      readOnly,
+      index,
       isDisabled,
-      isReadOnly
+      isReadOnly,
+      readOnly,
+      value
     };
     const css = {
-      position: "relative",
+      alignItems: "center",
       cursor: "pointer",
-      flex: "1 1 0%",
       display: "inline-flex",
+      flex: "1 1 0%",
       justifyContent: "center",
-      alignItems: "center",
+      position: "relative",
       ...styles.button
     };
-    const isSelected = selectedValue === value;
+    const isSelected = value === selectedValue;
     return /* @__PURE__ */ jsxs(
       ui.label,
       {
@@ -292,9 +290,9 @@ var SegmentedControlCursor = ({
 }) => {
   const { styles } = useSegmentedControl();
   const css = {
+    h: "100%",
     position: "absolute",
     w: "100%",
-    h: "100%",
     ...styles.cursor
   };
   return /* @__PURE__ */ jsx(
@@ -321,4 +319,4 @@ export {
   SegmentedControl,
   SegmentedControlButton
 };
-//# sourceMappingURL=chunk-LYUWFTFJ.mjs.map
+//# sourceMappingURL=chunk-AVVQKQV6.mjs.map

package/dist/chunk-AVVQKQV6.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        ...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"]}

package/dist/index.js

@@ -35,10 +35,10 @@ var import_use_focus_visible = require("@yamada-ui/use-focus-visible");
 var import_utils = require("@yamada-ui/utils");
 var import_react = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
-var { DescendantsContextProvider, useDescendants, useDescendant } = (0, import_use_descendant.createDescendant)();
+var { DescendantsContextProvider, useDescendant, useDescendants } = (0, import_use_descendant.createDescendant)();
 var [SegmentedControlProvider, useSegmentedControl] = (0, import_utils.createContext)({
-  strict: false,
-  name: "SegmentedControlContext"
+  name: "SegmentedControlContext",
+  errorMessage: `useSegmentedControl returned is 'undefined'. Seems you forgot to wrap the components in "<SegmentedControl />"`
 });
 var SegmentedControl = (0, import_core.forwardRef)(
   (props, ref) => {
@@ -47,15 +47,15 @@ var SegmentedControl = (0, import_core.forwardRef)(
       props
     );
     let {
-      className,
       id,
       name,
-      isReadOnly,
-      isDisabled,
+      className,
       children,
-      items = [],
-      value,
       defaultValue,
+      isDisabled,
+      isReadOnly,
+      items = [],
+      value: valueProp,
       onChange: onChangeProp,
       ...rest
     } = (0, import_core.omitThemeProps)(mergedProps);
@@ -67,9 +67,9 @@ var SegmentedControl = (0, import_core.forwardRef)(
     const [focusedIndex, setFocusedIndex] = (0, import_react.useState)(-1);
     const [isFocusVisible, setIsFocusVisible] = (0, import_react.useState)(false);
     const containerRef = (0, import_react.useRef)(null);
-    const [selectedValue, setSelectedValue] = (0, import_use_controllable_state.useControllableState)({
-      value,
+    const [value, setValue] = (0, import_use_controllable_state.useControllableState)({
       defaultValue,
+      value: valueProp,
       onChange: onChangeRef
     });
     const onChange = (0, import_react.useCallback)(
@@ -78,9 +78,9 @@ var SegmentedControl = (0, import_core.forwardRef)(
           ev.preventDefault();
           return;
         }
-        setSelectedValue(ev.target.value);
+        setValue(ev.target.value);
       },
-      [isDisabled, isReadOnly, setSelectedValue]
+      [isDisabled, isReadOnly, setValue]
     );
     const onFocus = (0, import_react.useCallback)(
       (index, skip) => {
@@ -99,8 +99,8 @@ var SegmentedControl = (0, import_core.forwardRef)(
       (props2 = {}, ref2 = null) => ({
         ...rest,
         ...props2,
-        ref: (0, import_utils.mergeRefs)(containerRef, ref2),
         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)
@@ -117,38 +117,38 @@ var SegmentedControl = (0, import_core.forwardRef)(
         var _a, _b, _c, _d;
         const disabled = (_b = (_a = props2.disabled) != null ? _a : isDisabledProp) != null ? _b : isDisabled;
         const readOnly = (_d = (_c = props2.readOnly) != null ? _c : isReadOnlyProp) != null ? _d : isReadOnly;
-        const checked = props2.value === selectedValue;
+        const checked = props2.value === value;
         return {
           ...props2,
-          ref: ref2,
           id: `${id}-${index}`,
+          ref: ref2,
           type: "radio",
           name,
-          disabled: disabled || readOnly,
-          readOnly,
-          checked,
-          "aria-disabled": (0, import_utils.ariaAttr)(disabled),
-          "data-readonly": (0, import_utils.dataAttr)(readOnly),
-          "data-checked": (0, import_utils.dataAttr)(checked),
-          "data-focus": (0, import_utils.dataAttr)(index === focusedIndex),
           style: {
             border: "0px",
             clip: "rect(0px, 0px, 0px, 0px)",
             height: "1px",
-            width: "1px",
             margin: "-1px",
-            padding: "0px",
             overflow: "hidden",
+            padding: "0px",
+            position: "absolute",
             whiteSpace: "nowrap",
-            position: "absolute"
+            width: "1px"
           },
+          "aria-disabled": (0, import_utils.ariaAttr)(disabled),
+          "data-checked": (0, import_utils.dataAttr)(checked),
+          "data-focus": (0, import_utils.dataAttr)(index === focusedIndex),
+          "data-readonly": (0, import_utils.dataAttr)(readOnly),
+          checked,
+          disabled: disabled || readOnly,
+          readOnly,
           onChange: (0, import_utils.handlerAll)(
             props2.onChange,
             (ev) => !disabled && !readOnly ? onChange(ev) : {}
           )
         };
       },
-      [isDisabled, isReadOnly, selectedValue, id, name, focusedIndex, onChange]
+      [isDisabled, isReadOnly, value, id, name, focusedIndex, onChange]
     );
     const getLabelProps = (0, import_react.useCallback)(
       ({
@@ -160,44 +160,37 @@ var SegmentedControl = (0, import_core.forwardRef)(
         var _a, _b, _c, _d;
         const disabled = (_b = (_a = props2.disabled) != null ? _a : isDisabledProp) != null ? _b : isDisabled;
         const readOnly = (_d = (_c = props2.readOnly) != null ? _c : isReadOnlyProp) != null ? _d : isReadOnly;
-        const checked = props2.value === selectedValue;
+        const checked = props2.value === value;
         const focused = index === focusedIndex;
         return {
           ...props2,
           ref: ref2,
           "aria-disabled": (0, import_utils.ariaAttr)(disabled),
-          "data-readonly": (0, import_utils.dataAttr)(readOnly),
           "data-checked": (0, import_utils.dataAttr)(checked),
           "data-focus": (0, import_utils.dataAttr)(focused),
           "data-focus-visible": (0, import_utils.dataAttr)(focused && isFocusVisible),
+          "data-readonly": (0, import_utils.dataAttr)(readOnly),
           onFocus: (0, import_utils.handlerAll)(
             props2.onFocus,
             () => onFocus(index, disabled || readOnly || false)
           ),
           ...disabled || readOnly ? {
-            _hover: {},
             _active: {},
             _focus: {},
-            _invalid: {},
-            _focusVisible: {}
+            _focusVisible: {},
+            _hover: {},
+            _invalid: {}
           } : {}
         };
       },
-      [
-        focusedIndex,
-        isDisabled,
-        isFocusVisible,
-        isReadOnly,
-        onFocus,
-        selectedValue
-      ]
+      [focusedIndex, isDisabled, isFocusVisible, isReadOnly, onFocus, value]
     );
     (0, import_react.useEffect)(() => {
       return (0, import_use_focus_visible.trackFocusVisible)(setIsFocusVisible);
     }, []);
     const css = {
-      display: "inline-flex",
       alignItems: "center",
+      display: "inline-flex",
       ...styles.container
     };
     const validChildren = (0, import_utils.getValidChildren)(children);
@@ -207,21 +200,21 @@ var SegmentedControl = (0, import_core.forwardRef)(
     } else {
       computedChildren = validChildren;
     }
-    if (selectedValue == null && defaultValue == null) {
+    if (value == null && defaultValue == null) {
       for (const child of computedChildren) {
         if (child.type !== SegmentedControlButton) {
           if (child.type.displayName !== SegmentedControlButton.displayName)
             continue;
         }
         const value2 = child.props.value;
-        setSelectedValue(value2);
+        setValue(value2);
         break;
       }
     }
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DescendantsContextProvider, { value: descendants, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       SegmentedControlProvider,
       {
-        value: { getInputProps, getLabelProps, styles, selectedValue },
+        value: { styles, value, getInputProps, getLabelProps },
         children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_motion.LayoutGroup, { id, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           import_core.ui.div,
           {
@@ -240,39 +233,44 @@ SegmentedControl.__ui__ = "SegmentedControl";
 var SegmentedControlButton = (0, import_core.forwardRef)(
   ({
     className,
+    children,
     disabled,
-    readOnly,
     isDisabled,
     isReadOnly,
+    readOnly,
     value,
-    onChange,
-    children,
     motionProps,
+    onChange,
     ...rest
   }, ref) => {
     const [, isMounted] = (0, import_utils.useIsMounted)({ rerender: true });
-    const { selectedValue, getInputProps, getLabelProps, styles } = useSegmentedControl();
+    const {
+      styles,
+      value: selectedValue,
+      getInputProps,
+      getLabelProps
+    } = useSegmentedControl();
     const { index, register } = useDescendant({
       disabled: isDisabled || isReadOnly
     });
     const props = {
-      index,
-      value,
       disabled,
-      readOnly,
+      index,
       isDisabled,
-      isReadOnly
+      isReadOnly,
+      readOnly,
+      value
     };
     const css = {
-      position: "relative",
+      alignItems: "center",
       cursor: "pointer",
-      flex: "1 1 0%",
       display: "inline-flex",
+      flex: "1 1 0%",
       justifyContent: "center",
-      alignItems: "center",
+      position: "relative",
       ...styles.button
     };
-    const isSelected = selectedValue === value;
+    const isSelected = value === selectedValue;
     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
       import_core.ui.label,
       {
@@ -303,9 +301,9 @@ var SegmentedControlCursor = ({
 }) => {
   const { styles } = useSegmentedControl();
   const css = {
+    h: "100%",
     position: "absolute",
     w: "100%",
-    h: "100%",
     ...styles.cursor
   };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(

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  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"]}
+{"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":"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","names":["props","ref","value"]}

package/dist/index.mjs

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

package/dist/segmented-control.d.mts

@@ -11,38 +11,38 @@ interface SegmentedControlOptions {
      * The HTML `name` attribute used for forms.
      */
     name?: string;
-    /**
-     * The value of the segmented control.
-     */
-    value?: string;
     /**
      * The initial value of the segmented control.
      */
     defaultValue?: string;
     /**
-     * The callback fired when any children radio is checked or unchecked.
-     */
-    onChange?: (value: string) => void;
-    /**
-     * If `true`, the segmented control will be readonly.
+     * If `true`, the segmented control will be disabled.
      *
      * @default false
      */
-    isReadOnly?: boolean;
+    isDisabled?: boolean;
     /**
-     * If `true`, the segmented control will be disabled.
+     * If `true`, the segmented control will be readonly.
      *
      * @default false
      */
-    isDisabled?: boolean;
+    isReadOnly?: boolean;
     /**
      * If provided, generate segmented control buttons but based on items.
      *
      * @default '[]'
      */
     items?: SegmentedControlItem[];
+    /**
+     * The value of the segmented control.
+     */
+    value?: string;
+    /**
+     * The callback fired when any children radio is checked or unchecked.
+     */
+    onChange?: (value: string) => void;
 }
-interface SegmentedControlProps extends Omit<HTMLUIProps, "value" | "defaultValue" | "onChange">, ThemeProps<"SegmentedControl">, SegmentedControlOptions {
+interface SegmentedControlProps extends Omit<HTMLUIProps, "defaultValue" | "onChange" | "value">, ThemeProps<"SegmentedControl">, SegmentedControlOptions {
 }
 /**
  * `SegmentedControl` is a component used for allowing users to select one option from multiple choices.
@@ -55,14 +55,14 @@ interface SegmentedControlButtonOptions {
      * The value of the segmented control button.
      */
     value: string;
-    /**
-     * The callback fired when any children radio is checked or unchecked.
-     */
-    onChange?: ChangeEventHandler<HTMLInputElement>;
     /**
      * Props for motion component.
      */
     motionProps?: MotionProps;
+    /**
+     * The callback fired when any children radio is checked or unchecked.
+     */
+    onChange?: ChangeEventHandler<HTMLInputElement>;
 }
 interface SegmentedControlButtonProps extends Omit<HTMLUIProps<"label">, "onChange">, Pick<SegmentedControlProps, "isDisabled" | "isReadOnly">, SegmentedControlButtonOptions {
 }

package/dist/segmented-control.d.ts

@@ -11,38 +11,38 @@ interface SegmentedControlOptions {
      * The HTML `name` attribute used for forms.
      */
     name?: string;
-    /**
-     * The value of the segmented control.
-     */
-    value?: string;
     /**
      * The initial value of the segmented control.
      */
     defaultValue?: string;
     /**
-     * The callback fired when any children radio is checked or unchecked.
-     */
-    onChange?: (value: string) => void;
-    /**
-     * If `true`, the segmented control will be readonly.
+     * If `true`, the segmented control will be disabled.
      *
      * @default false
      */
-    isReadOnly?: boolean;
+    isDisabled?: boolean;
     /**
-     * If `true`, the segmented control will be disabled.
+     * If `true`, the segmented control will be readonly.
      *
      * @default false
      */
-    isDisabled?: boolean;
+    isReadOnly?: boolean;
     /**
      * If provided, generate segmented control buttons but based on items.
      *
      * @default '[]'
      */
     items?: SegmentedControlItem[];
+    /**
+     * The value of the segmented control.
+     */
+    value?: string;
+    /**
+     * The callback fired when any children radio is checked or unchecked.
+     */
+    onChange?: (value: string) => void;
 }
-interface SegmentedControlProps extends Omit<HTMLUIProps, "value" | "defaultValue" | "onChange">, ThemeProps<"SegmentedControl">, SegmentedControlOptions {
+interface SegmentedControlProps extends Omit<HTMLUIProps, "defaultValue" | "onChange" | "value">, ThemeProps<"SegmentedControl">, SegmentedControlOptions {
 }
 /**
  * `SegmentedControl` is a component used for allowing users to select one option from multiple choices.
@@ -55,14 +55,14 @@ interface SegmentedControlButtonOptions {
      * The value of the segmented control button.
      */
     value: string;
-    /**
-     * The callback fired when any children radio is checked or unchecked.
-     */
-    onChange?: ChangeEventHandler<HTMLInputElement>;
     /**
      * Props for motion component.
      */
     motionProps?: MotionProps;
+    /**
+     * The callback fired when any children radio is checked or unchecked.
+     */
+    onChange?: ChangeEventHandler<HTMLInputElement>;
 }
 interface SegmentedControlButtonProps extends Omit<HTMLUIProps<"label">, "onChange">, Pick<SegmentedControlProps, "isDisabled" | "isReadOnly">, SegmentedControlButtonOptions {
 }

package/dist/segmented-control.js

@@ -33,10 +33,10 @@ var import_use_focus_visible = require("@yamada-ui/use-focus-visible");
 var import_utils = require("@yamada-ui/utils");
 var import_react = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
-var { DescendantsContextProvider, useDescendants, useDescendant } = (0, import_use_descendant.createDescendant)();
+var { DescendantsContextProvider, useDescendant, useDescendants } = (0, import_use_descendant.createDescendant)();
 var [SegmentedControlProvider, useSegmentedControl] = (0, import_utils.createContext)({
-  strict: false,
-  name: "SegmentedControlContext"
+  name: "SegmentedControlContext",
+  errorMessage: `useSegmentedControl returned is 'undefined'. Seems you forgot to wrap the components in "<SegmentedControl />"`
 });
 var SegmentedControl = (0, import_core.forwardRef)(
   (props, ref) => {
@@ -45,15 +45,15 @@ var SegmentedControl = (0, import_core.forwardRef)(
       props
     );
     let {
-      className,
       id,
       name,
-      isReadOnly,
-      isDisabled,
+      className,
       children,
-      items = [],
-      value,
       defaultValue,
+      isDisabled,
+      isReadOnly,
+      items = [],
+      value: valueProp,
       onChange: onChangeProp,
       ...rest
     } = (0, import_core.omitThemeProps)(mergedProps);
@@ -65,9 +65,9 @@ var SegmentedControl = (0, import_core.forwardRef)(
     const [focusedIndex, setFocusedIndex] = (0, import_react.useState)(-1);
     const [isFocusVisible, setIsFocusVisible] = (0, import_react.useState)(false);
     const containerRef = (0, import_react.useRef)(null);
-    const [selectedValue, setSelectedValue] = (0, import_use_controllable_state.useControllableState)({
-      value,
+    const [value, setValue] = (0, import_use_controllable_state.useControllableState)({
       defaultValue,
+      value: valueProp,
       onChange: onChangeRef
     });
     const onChange = (0, import_react.useCallback)(
@@ -76,9 +76,9 @@ var SegmentedControl = (0, import_core.forwardRef)(
           ev.preventDefault();
           return;
         }
-        setSelectedValue(ev.target.value);
+        setValue(ev.target.value);
       },
-      [isDisabled, isReadOnly, setSelectedValue]
+      [isDisabled, isReadOnly, setValue]
     );
     const onFocus = (0, import_react.useCallback)(
       (index, skip) => {
@@ -97,8 +97,8 @@ var SegmentedControl = (0, import_core.forwardRef)(
       (props2 = {}, ref2 = null) => ({
         ...rest,
         ...props2,
-        ref: (0, import_utils.mergeRefs)(containerRef, ref2),
         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)
@@ -115,38 +115,38 @@ var SegmentedControl = (0, import_core.forwardRef)(
         var _a, _b, _c, _d;
         const disabled = (_b = (_a = props2.disabled) != null ? _a : isDisabledProp) != null ? _b : isDisabled;
         const readOnly = (_d = (_c = props2.readOnly) != null ? _c : isReadOnlyProp) != null ? _d : isReadOnly;
-        const checked = props2.value === selectedValue;
+        const checked = props2.value === value;
         return {
           ...props2,
-          ref: ref2,
           id: `${id}-${index}`,
+          ref: ref2,
           type: "radio",
           name,
-          disabled: disabled || readOnly,
-          readOnly,
-          checked,
-          "aria-disabled": (0, import_utils.ariaAttr)(disabled),
-          "data-readonly": (0, import_utils.dataAttr)(readOnly),
-          "data-checked": (0, import_utils.dataAttr)(checked),
-          "data-focus": (0, import_utils.dataAttr)(index === focusedIndex),
           style: {
             border: "0px",
             clip: "rect(0px, 0px, 0px, 0px)",
             height: "1px",
-            width: "1px",
             margin: "-1px",
-            padding: "0px",
             overflow: "hidden",
+            padding: "0px",
+            position: "absolute",
             whiteSpace: "nowrap",
-            position: "absolute"
+            width: "1px"
           },
+          "aria-disabled": (0, import_utils.ariaAttr)(disabled),
+          "data-checked": (0, import_utils.dataAttr)(checked),
+          "data-focus": (0, import_utils.dataAttr)(index === focusedIndex),
+          "data-readonly": (0, import_utils.dataAttr)(readOnly),
+          checked,
+          disabled: disabled || readOnly,
+          readOnly,
           onChange: (0, import_utils.handlerAll)(
             props2.onChange,
             (ev) => !disabled && !readOnly ? onChange(ev) : {}
           )
         };
       },
-      [isDisabled, isReadOnly, selectedValue, id, name, focusedIndex, onChange]
+      [isDisabled, isReadOnly, value, id, name, focusedIndex, onChange]
     );
     const getLabelProps = (0, import_react.useCallback)(
       ({
@@ -158,44 +158,37 @@ var SegmentedControl = (0, import_core.forwardRef)(
         var _a, _b, _c, _d;
         const disabled = (_b = (_a = props2.disabled) != null ? _a : isDisabledProp) != null ? _b : isDisabled;
         const readOnly = (_d = (_c = props2.readOnly) != null ? _c : isReadOnlyProp) != null ? _d : isReadOnly;
-        const checked = props2.value === selectedValue;
+        const checked = props2.value === value;
         const focused = index === focusedIndex;
         return {
           ...props2,
           ref: ref2,
           "aria-disabled": (0, import_utils.ariaAttr)(disabled),
-          "data-readonly": (0, import_utils.dataAttr)(readOnly),
           "data-checked": (0, import_utils.dataAttr)(checked),
           "data-focus": (0, import_utils.dataAttr)(focused),
           "data-focus-visible": (0, import_utils.dataAttr)(focused && isFocusVisible),
+          "data-readonly": (0, import_utils.dataAttr)(readOnly),
           onFocus: (0, import_utils.handlerAll)(
             props2.onFocus,
             () => onFocus(index, disabled || readOnly || false)
           ),
           ...disabled || readOnly ? {
-            _hover: {},
             _active: {},
             _focus: {},
-            _invalid: {},
-            _focusVisible: {}
+            _focusVisible: {},
+            _hover: {},
+            _invalid: {}
           } : {}
         };
       },
-      [
-        focusedIndex,
-        isDisabled,
-        isFocusVisible,
-        isReadOnly,
-        onFocus,
-        selectedValue
-      ]
+      [focusedIndex, isDisabled, isFocusVisible, isReadOnly, onFocus, value]
     );
     (0, import_react.useEffect)(() => {
       return (0, import_use_focus_visible.trackFocusVisible)(setIsFocusVisible);
     }, []);
     const css = {
-      display: "inline-flex",
       alignItems: "center",
+      display: "inline-flex",
       ...styles.container
     };
     const validChildren = (0, import_utils.getValidChildren)(children);
@@ -205,21 +198,21 @@ var SegmentedControl = (0, import_core.forwardRef)(
     } else {
       computedChildren = validChildren;
     }
-    if (selectedValue == null && defaultValue == null) {
+    if (value == null && defaultValue == null) {
       for (const child of computedChildren) {
         if (child.type !== SegmentedControlButton) {
           if (child.type.displayName !== SegmentedControlButton.displayName)
             continue;
         }
         const value2 = child.props.value;
-        setSelectedValue(value2);
+        setValue(value2);
         break;
       }
     }
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DescendantsContextProvider, { value: descendants, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       SegmentedControlProvider,
       {
-        value: { getInputProps, getLabelProps, styles, selectedValue },
+        value: { styles, value, getInputProps, getLabelProps },
         children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_motion.LayoutGroup, { id, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           import_core.ui.div,
           {
@@ -238,39 +231,44 @@ SegmentedControl.__ui__ = "SegmentedControl";
 var SegmentedControlButton = (0, import_core.forwardRef)(
   ({
     className,
+    children,
     disabled,
-    readOnly,
     isDisabled,
     isReadOnly,
+    readOnly,
     value,
-    onChange,
-    children,
     motionProps,
+    onChange,
     ...rest
   }, ref) => {
     const [, isMounted] = (0, import_utils.useIsMounted)({ rerender: true });
-    const { selectedValue, getInputProps, getLabelProps, styles } = useSegmentedControl();
+    const {
+      styles,
+      value: selectedValue,
+      getInputProps,
+      getLabelProps
+    } = useSegmentedControl();
     const { index, register } = useDescendant({
       disabled: isDisabled || isReadOnly
     });
     const props = {
-      index,
-      value,
       disabled,
-      readOnly,
+      index,
       isDisabled,
-      isReadOnly
+      isReadOnly,
+      readOnly,
+      value
     };
     const css = {
-      position: "relative",
+      alignItems: "center",
       cursor: "pointer",
-      flex: "1 1 0%",
       display: "inline-flex",
+      flex: "1 1 0%",
       justifyContent: "center",
-      alignItems: "center",
+      position: "relative",
       ...styles.button
     };
-    const isSelected = selectedValue === value;
+    const isSelected = value === selectedValue;
     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
       import_core.ui.label,
       {
@@ -301,9 +299,9 @@ var SegmentedControlCursor = ({
 }) => {
   const { styles } = useSegmentedControl();
   const css = {
+    h: "100%",
     position: "absolute",
     w: "100%",
-    h: "100%",
     ...styles.cursor
   };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(

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  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"]}
+{"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"]}

package/dist/segmented-control.mjs

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yamada-ui/segmented-control",
-  "version": "1.0.42-next-20241005220055",
+  "version": "1.0.42",
   "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.2-next-20241005220055",
-    "@yamada-ui/motion": "2.2.4-next-20241005220055",
-    "@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"
+    "@yamada-ui/core": "1.15.2",
+    "@yamada-ui/motion": "2.2.4",
+    "@yamada-ui/use-controllable-state": "1.0.22",
+    "@yamada-ui/use-descendant": "1.0.23",
+    "@yamada-ui/use-focus-visible": "1.1.9",
+    "@yamada-ui/utils": "1.5.3"
   },
   "devDependencies": {
     "clean-package": "2.2.0",

package/dist/chunk-LYUWFTFJ.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  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"]}