@yamada-ui/segmented-control 0.4.13 → 0.4.15

package/dist/{chunk-LCPXOL6W.mjs → chunk-DXWQZMEU.mjs}

@@ -7,10 +7,10 @@ import {
   useMultiComponentStyle,
   omitThemeProps
 } from "@yamada-ui/core";
+import { LayoutGroup, Motion } from "@yamada-ui/motion";
 import { useControllableState } from "@yamada-ui/use-controllable-state";
 import { createDescendant } from "@yamada-ui/use-descendant";
 import { trackFocusVisible } from "@yamada-ui/use-focus-visible";
-import { useResizeObserver } from "@yamada-ui/use-resize-observer";
 import {
   ariaAttr,
   createContext,
@@ -44,48 +44,32 @@ var SegmentedControl = forwardRef(
       isDisabled,
       children,
       items = [],
+      value,
+      defaultValue,
       ...rest
     } = omitThemeProps(mergedProps);
-    const isMountedRef = useIsMounted();
     id != null ? id : id = useId();
     name != null ? name : name = `segmented-control-${useId()}`;
     rest.onChange = useCallbackRef(rest.onChange);
     const descendants = useDescendants();
     const [focusedIndex, setFocusedIndex] = useState(-1);
     const [isFocusVisible, setIsFocusVisible] = useState(false);
-    const [observerRef, containerRect] = useResizeObserver();
     const containerRef = useRef(null);
     const labelRefs = useRef(/* @__PURE__ */ new Map());
-    const [value, setValue] = useControllableState({
-      value: rest.value,
-      defaultValue: rest.defaultValue,
+    const [selectedValue, setSelectedValue] = useControllableState({
+      value,
+      defaultValue,
       onChange: rest.onChange
     });
-    const getActivePosition = useCallback(() => {
-      const rect = { width: 0, height: 0, x: 0, y: 0 };
-      const el = labelRefs.current.get(value);
-      if (!el || !containerRef.current || !observerRef.current)
-        return rect;
-      const { paddingLeft, paddingTop } = getComputedStyle(containerRef.current);
-      const gutterX = parseFloat(paddingLeft) || 0;
-      const gutterY = parseFloat(paddingTop) || 0;
-      let { width, height } = el.getBoundingClientRect();
-      rect.x = el.offsetLeft - gutterX;
-      rect.y = el.offsetTop - gutterY;
-      rect.width = width * (el.offsetWidth / width) || 0;
-      rect.height = height * (el.offsetWidth / width) || 0;
-      return rect;
-    }, [observerRef, value]);
-    const [activePosition, setActivePosition] = useState(getActivePosition);
     const onChange = useCallback(
       (ev) => {
         if (isDisabled || isReadOnly) {
           ev.preventDefault();
           return;
         }
-        setValue(ev.target.value);
+        setSelectedValue(ev.target.value);
       },
-      [isDisabled, isReadOnly, setValue]
+      [isDisabled, isReadOnly, setSelectedValue]
     );
     const onFocus = useCallback(
       (index, skip) => {
@@ -104,39 +88,22 @@ var SegmentedControl = forwardRef(
     const onBlur = useCallback(() => setFocusedIndex(-1), []);
     const getContainerProps = useCallback(
       (props2 = {}, ref2 = null) => ({
-        ...omitObject(rest, ["value", "defaultValue", "onChange"]),
+        ...omitObject(rest, ["onChange"]),
         ...props2,
-        ref: mergeRefs(containerRef, observerRef, ref2),
+        ref: mergeRefs(containerRef, ref2),
         id,
         "aria-disabled": ariaAttr(isDisabled),
         "aria-readonly": ariaAttr(isReadOnly),
         onBlur: handlerAll(props2.onBlur, onBlur)
       }),
-      [id, isDisabled, isReadOnly, observerRef, onBlur, rest]
-    );
-    const getActiveProps = useCallback(
-      (props2 = {}, ref2 = null) => {
-        const { width, height, x, y } = activePosition;
-        return {
-          ...props2,
-          ref: ref2,
-          style: {
-            position: "absolute",
-            zIndex: 1,
-            width,
-            height,
-            transform: `translate(${x}px, ${y}px)`
-          }
-        };
-      },
-      [activePosition]
+      [id, isDisabled, isReadOnly, onBlur, rest]
     );
     const getInputProps = useCallback(
       ({ index, ...props2 } = {}, ref2 = null) => {
         var _a, _b, _c, _d;
         const disabled = (_b = (_a = props2.disabled) != null ? _a : props2.isDisabled) != null ? _b : isDisabled;
         const readOnly = (_d = (_c = props2.readOnly) != null ? _c : props2.isReadOnly) != null ? _d : isReadOnly;
-        const checked = props2.value === value;
+        const checked = props2.value === selectedValue;
         return {
           ...omitObject(props2, ["isDisabled", "isReadOnly"]),
           ref: ref2,
@@ -167,14 +134,14 @@ var SegmentedControl = forwardRef(
           )
         };
       },
-      [isDisabled, isReadOnly, value, id, name, focusedIndex, onChange]
+      [isDisabled, isReadOnly, selectedValue, id, name, focusedIndex, onChange]
     );
     const getLabelProps = useCallback(
       ({ index, ...props2 } = {}, ref2 = null) => {
         var _a, _b, _c, _d;
         const disabled = (_b = (_a = props2.disabled) != null ? _a : props2.isDisabled) != null ? _b : isDisabled;
         const readOnly = (_d = (_c = props2.readOnly) != null ? _c : props2.isReadOnly) != null ? _d : isReadOnly;
-        const checked = props2.value === value;
+        const checked = props2.value === selectedValue;
         const focused = index === focusedIndex;
         return {
           props: props2,
@@ -197,18 +164,21 @@ var SegmentedControl = forwardRef(
             _focus: {},
             _invalid: {},
             _focusVisible: {}
-          } : {},
-          style: { position: "relative", zIndex: 2 }
+          } : {}
         };
       },
-      [focusedIndex, isDisabled, isFocusVisible, isReadOnly, onFocus, value]
+      [
+        focusedIndex,
+        isDisabled,
+        isFocusVisible,
+        isReadOnly,
+        onFocus,
+        selectedValue
+      ]
     );
     useEffect(() => {
       return trackFocusVisible(setIsFocusVisible);
     }, []);
-    useEffect(() => {
-      setActivePosition(getActivePosition());
-    }, [focusedIndex, containerRect, value, getActivePosition]);
     const css = {
       position: "relative",
       display: "inline-flex",
@@ -222,38 +192,30 @@ var SegmentedControl = forwardRef(
     } else {
       computedChildren = validChildren;
     }
-    if (value == null && rest.defaultValue == null) {
+    if (selectedValue == null && defaultValue == null) {
       for (const child of computedChildren) {
-        if (child.type !== SegmentedControlButton)
-          continue;
+        if (child.type !== SegmentedControlButton) {
+          if (child.type.displayName !== SegmentedControlButton.displayName)
+            continue;
+        }
         const value2 = child.props.value;
-        setValue(value2);
+        setSelectedValue(value2);
         break;
       }
     }
     return /* @__PURE__ */ jsx(DescendantsContextProvider, { value: descendants, children: /* @__PURE__ */ jsx(
       SegmentedControlProvider,
       {
-        value: { getInputProps, getLabelProps, styles },
-        children: /* @__PURE__ */ jsxs(
+        value: { getInputProps, getLabelProps, styles, selectedValue },
+        children: /* @__PURE__ */ jsx(LayoutGroup, { id, children: /* @__PURE__ */ jsx(
           ui.div,
           {
             ...getContainerProps({}, ref),
             className: cx("ui-segmented-control", className),
             __css: css,
-            children: [
-              isMountedRef.current ? /* @__PURE__ */ jsx(
-                ui.span,
-                {
-                  className: "ui-segmented-control__active",
-                  ...getActiveProps(),
-                  __css: styles.active
-                }
-              ) : null,
-              computedChildren
-            ]
+            children: computedChildren
           }
-        )
+        ) })
       }
     ) });
   }
@@ -268,9 +230,11 @@ var SegmentedControlButton = forwardRef(
     value,
     onChange,
     children,
+    motionProps,
     ...rest
   }, ref) => {
-    const { getInputProps, getLabelProps, styles } = useSegmentedControl();
+    const [, isMounted] = useIsMounted({ rerender: true });
+    const { selectedValue, getInputProps, getLabelProps, styles } = useSegmentedControl();
     const { index, register } = useDescendant({
       disabled: isDisabled || isReadOnly
     });
@@ -284,6 +248,7 @@ var SegmentedControlButton = forwardRef(
       isReadOnly
     };
     const css = {
+      position: "relative",
       cursor: "pointer",
       flex: "1 1 0%",
       display: "inline-flex",
@@ -291,6 +256,7 @@ var SegmentedControlButton = forwardRef(
       alignItems: "center",
       ...styles.button
     };
+    const isSelected = selectedValue === value;
     return /* @__PURE__ */ jsxs(
       ui.label,
       {
@@ -300,15 +266,47 @@ var SegmentedControlButton = forwardRef(
         ...rest,
         children: [
           /* @__PURE__ */ jsx(ui.input, { ...getInputProps(props, mergeRefs(register, ref)) }),
-          /* @__PURE__ */ jsx(ui.span, { children })
+          /* @__PURE__ */ jsx(ui.span, { children }),
+          isSelected && isMounted ? /* @__PURE__ */ jsx(SegmentedControlCursor, { ...motionProps }) : null
         ]
       }
     );
   }
 );
+SegmentedControlButton.displayName = "SegmentedControlButton";
+var SegmentedControlCursor = ({
+  className,
+  transition,
+  ...rest
+}) => {
+  const { styles } = useSegmentedControl();
+  const css = {
+    position: "absolute",
+    zIndex: "-10",
+    w: "full",
+    h: "full",
+    ...styles.cursor
+  };
+  return /* @__PURE__ */ jsx(
+    Motion,
+    {
+      className: cx("ui-segmented-control__cursor", className),
+      layoutDependency: false,
+      layoutId: "cursor",
+      transition: {
+        type: "spring",
+        bounce: 0.15,
+        duration: 0.4,
+        ...transition
+      },
+      __css: css,
+      ...rest
+    }
+  );
+};
 
 export {
   SegmentedControl,
   SegmentedControlButton
 };
-//# sourceMappingURL=chunk-LCPXOL6W.mjs.map
+//# sourceMappingURL=chunk-DXWQZMEU.mjs.map

package/dist/chunk-DXWQZMEU.mjs.map

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

package/dist/index.d.mts

@@ -1,3 +1,4 @@
 export { SegmentedControl, SegmentedControlButton, SegmentedControlButtonProps, SegmentedControlItem, SegmentedControlProps } from './segmented-control.mjs';
 import '@yamada-ui/core';
+import '@yamada-ui/motion';
 import 'react';

package/dist/index.d.ts

@@ -1,3 +1,4 @@
 export { SegmentedControl, SegmentedControlButton, SegmentedControlButtonProps, SegmentedControlItem, SegmentedControlProps } from './segmented-control.js';
 import '@yamada-ui/core';
+import '@yamada-ui/motion';
 import 'react';

package/dist/index.js

@@ -28,10 +28,10 @@ module.exports = __toCommonJS(src_exports);
 
 // src/segmented-control.tsx
 var import_core = require("@yamada-ui/core");
+var import_motion = require("@yamada-ui/motion");
 var import_use_controllable_state = require("@yamada-ui/use-controllable-state");
 var import_use_descendant = require("@yamada-ui/use-descendant");
 var import_use_focus_visible = require("@yamada-ui/use-focus-visible");
-var import_use_resize_observer = require("@yamada-ui/use-resize-observer");
 var import_utils = require("@yamada-ui/utils");
 var import_react = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -54,48 +54,32 @@ var SegmentedControl = (0, import_core.forwardRef)(
       isDisabled,
       children,
       items = [],
+      value,
+      defaultValue,
       ...rest
     } = (0, import_core.omitThemeProps)(mergedProps);
-    const isMountedRef = (0, import_utils.useIsMounted)();
     id != null ? id : id = (0, import_react.useId)();
     name != null ? name : name = `segmented-control-${(0, import_react.useId)()}`;
     rest.onChange = (0, import_utils.useCallbackRef)(rest.onChange);
     const descendants = useDescendants();
     const [focusedIndex, setFocusedIndex] = (0, import_react.useState)(-1);
     const [isFocusVisible, setIsFocusVisible] = (0, import_react.useState)(false);
-    const [observerRef, containerRect] = (0, import_use_resize_observer.useResizeObserver)();
     const containerRef = (0, import_react.useRef)(null);
     const labelRefs = (0, import_react.useRef)(/* @__PURE__ */ new Map());
-    const [value, setValue] = (0, import_use_controllable_state.useControllableState)({
-      value: rest.value,
-      defaultValue: rest.defaultValue,
+    const [selectedValue, setSelectedValue] = (0, import_use_controllable_state.useControllableState)({
+      value,
+      defaultValue,
       onChange: rest.onChange
     });
-    const getActivePosition = (0, import_react.useCallback)(() => {
-      const rect = { width: 0, height: 0, x: 0, y: 0 };
-      const el = labelRefs.current.get(value);
-      if (!el || !containerRef.current || !observerRef.current)
-        return rect;
-      const { paddingLeft, paddingTop } = getComputedStyle(containerRef.current);
-      const gutterX = parseFloat(paddingLeft) || 0;
-      const gutterY = parseFloat(paddingTop) || 0;
-      let { width, height } = el.getBoundingClientRect();
-      rect.x = el.offsetLeft - gutterX;
-      rect.y = el.offsetTop - gutterY;
-      rect.width = width * (el.offsetWidth / width) || 0;
-      rect.height = height * (el.offsetWidth / width) || 0;
-      return rect;
-    }, [observerRef, value]);
-    const [activePosition, setActivePosition] = (0, import_react.useState)(getActivePosition);
     const onChange = (0, import_react.useCallback)(
       (ev) => {
         if (isDisabled || isReadOnly) {
           ev.preventDefault();
           return;
         }
-        setValue(ev.target.value);
+        setSelectedValue(ev.target.value);
       },
-      [isDisabled, isReadOnly, setValue]
+      [isDisabled, isReadOnly, setSelectedValue]
     );
     const onFocus = (0, import_react.useCallback)(
       (index, skip) => {
@@ -114,39 +98,22 @@ var SegmentedControl = (0, import_core.forwardRef)(
     const onBlur = (0, import_react.useCallback)(() => setFocusedIndex(-1), []);
     const getContainerProps = (0, import_react.useCallback)(
       (props2 = {}, ref2 = null) => ({
-        ...(0, import_utils.omitObject)(rest, ["value", "defaultValue", "onChange"]),
+        ...(0, import_utils.omitObject)(rest, ["onChange"]),
         ...props2,
-        ref: (0, import_utils.mergeRefs)(containerRef, observerRef, ref2),
+        ref: (0, import_utils.mergeRefs)(containerRef, ref2),
         id,
         "aria-disabled": (0, import_utils.ariaAttr)(isDisabled),
         "aria-readonly": (0, import_utils.ariaAttr)(isReadOnly),
         onBlur: (0, import_utils.handlerAll)(props2.onBlur, onBlur)
       }),
-      [id, isDisabled, isReadOnly, observerRef, onBlur, rest]
-    );
-    const getActiveProps = (0, import_react.useCallback)(
-      (props2 = {}, ref2 = null) => {
-        const { width, height, x, y } = activePosition;
-        return {
-          ...props2,
-          ref: ref2,
-          style: {
-            position: "absolute",
-            zIndex: 1,
-            width,
-            height,
-            transform: `translate(${x}px, ${y}px)`
-          }
-        };
-      },
-      [activePosition]
+      [id, isDisabled, isReadOnly, onBlur, rest]
     );
     const getInputProps = (0, import_react.useCallback)(
       ({ index, ...props2 } = {}, ref2 = null) => {
         var _a, _b, _c, _d;
         const disabled = (_b = (_a = props2.disabled) != null ? _a : props2.isDisabled) != null ? _b : isDisabled;
         const readOnly = (_d = (_c = props2.readOnly) != null ? _c : props2.isReadOnly) != null ? _d : isReadOnly;
-        const checked = props2.value === value;
+        const checked = props2.value === selectedValue;
         return {
           ...(0, import_utils.omitObject)(props2, ["isDisabled", "isReadOnly"]),
           ref: ref2,
@@ -177,14 +144,14 @@ var SegmentedControl = (0, import_core.forwardRef)(
           )
         };
       },
-      [isDisabled, isReadOnly, value, id, name, focusedIndex, onChange]
+      [isDisabled, isReadOnly, selectedValue, id, name, focusedIndex, onChange]
     );
     const getLabelProps = (0, import_react.useCallback)(
       ({ index, ...props2 } = {}, ref2 = null) => {
         var _a, _b, _c, _d;
         const disabled = (_b = (_a = props2.disabled) != null ? _a : props2.isDisabled) != null ? _b : isDisabled;
         const readOnly = (_d = (_c = props2.readOnly) != null ? _c : props2.isReadOnly) != null ? _d : isReadOnly;
-        const checked = props2.value === value;
+        const checked = props2.value === selectedValue;
         const focused = index === focusedIndex;
         return {
           props: props2,
@@ -207,18 +174,21 @@ var SegmentedControl = (0, import_core.forwardRef)(
             _focus: {},
             _invalid: {},
             _focusVisible: {}
-          } : {},
-          style: { position: "relative", zIndex: 2 }
+          } : {}
         };
       },
-      [focusedIndex, isDisabled, isFocusVisible, isReadOnly, onFocus, value]
+      [
+        focusedIndex,
+        isDisabled,
+        isFocusVisible,
+        isReadOnly,
+        onFocus,
+        selectedValue
+      ]
     );
     (0, import_react.useEffect)(() => {
       return (0, import_use_focus_visible.trackFocusVisible)(setIsFocusVisible);
     }, []);
-    (0, import_react.useEffect)(() => {
-      setActivePosition(getActivePosition());
-    }, [focusedIndex, containerRect, value, getActivePosition]);
     const css = {
       position: "relative",
       display: "inline-flex",
@@ -232,38 +202,30 @@ var SegmentedControl = (0, import_core.forwardRef)(
     } else {
       computedChildren = validChildren;
     }
-    if (value == null && rest.defaultValue == null) {
+    if (selectedValue == null && defaultValue == null) {
       for (const child of computedChildren) {
-        if (child.type !== SegmentedControlButton)
-          continue;
+        if (child.type !== SegmentedControlButton) {
+          if (child.type.displayName !== SegmentedControlButton.displayName)
+            continue;
+        }
         const value2 = child.props.value;
-        setValue(value2);
+        setSelectedValue(value2);
         break;
       }
     }
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DescendantsContextProvider, { value: descendants, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       SegmentedControlProvider,
       {
-        value: { getInputProps, getLabelProps, styles },
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        value: { getInputProps, getLabelProps, styles, selectedValue },
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_motion.LayoutGroup, { id, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           import_core.ui.div,
           {
             ...getContainerProps({}, ref),
             className: (0, import_utils.cx)("ui-segmented-control", className),
             __css: css,
-            children: [
-              isMountedRef.current ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                import_core.ui.span,
-                {
-                  className: "ui-segmented-control__active",
-                  ...getActiveProps(),
-                  __css: styles.active
-                }
-              ) : null,
-              computedChildren
-            ]
+            children: computedChildren
           }
-        )
+        ) })
       }
     ) });
   }
@@ -278,9 +240,11 @@ var SegmentedControlButton = (0, import_core.forwardRef)(
     value,
     onChange,
     children,
+    motionProps,
     ...rest
   }, ref) => {
-    const { getInputProps, getLabelProps, styles } = useSegmentedControl();
+    const [, isMounted] = (0, import_utils.useIsMounted)({ rerender: true });
+    const { selectedValue, getInputProps, getLabelProps, styles } = useSegmentedControl();
     const { index, register } = useDescendant({
       disabled: isDisabled || isReadOnly
     });
@@ -294,6 +258,7 @@ var SegmentedControlButton = (0, import_core.forwardRef)(
       isReadOnly
     };
     const css = {
+      position: "relative",
       cursor: "pointer",
       flex: "1 1 0%",
       display: "inline-flex",
@@ -301,6 +266,7 @@ var SegmentedControlButton = (0, import_core.forwardRef)(
       alignItems: "center",
       ...styles.button
     };
+    const isSelected = selectedValue === value;
     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
       import_core.ui.label,
       {
@@ -310,12 +276,44 @@ var SegmentedControlButton = (0, import_core.forwardRef)(
         ...rest,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.ui.input, { ...getInputProps(props, (0, import_utils.mergeRefs)(register, ref)) }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.ui.span, { children })
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.ui.span, { children }),
+          isSelected && isMounted ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SegmentedControlCursor, { ...motionProps }) : null
         ]
       }
     );
   }
 );
+SegmentedControlButton.displayName = "SegmentedControlButton";
+var SegmentedControlCursor = ({
+  className,
+  transition,
+  ...rest
+}) => {
+  const { styles } = useSegmentedControl();
+  const css = {
+    position: "absolute",
+    zIndex: "-10",
+    w: "full",
+    h: "full",
+    ...styles.cursor
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_motion.Motion,
+    {
+      className: (0, import_utils.cx)("ui-segmented-control__cursor", className),
+      layoutDependency: false,
+      layoutId: "cursor",
+      transition: {
+        type: "spring",
+        bounce: 0.15,
+        duration: 0.4,
+        ...transition
+      },
+      __css: css,
+      ...rest
+    }
+  );
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   SegmentedControl,

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/segmented-control.tsx"],"sourcesContent":["export { SegmentedControl, SegmentedControlButton } from \"./segmented-control\"\nexport type {\n  SegmentedControlItem,\n  SegmentedControlProps,\n  SegmentedControlButtonProps,\n} from \"./segmented-control\"\n","import type { CSSUIObject, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport {\n  ui,\n  forwardRef,\n  useMultiComponentStyle,\n  omitThemeProps,\n} from \"@yamada-ui/core\"\nimport { useControllableState } from \"@yamada-ui/use-controllable-state\"\nimport { createDescendant } from \"@yamada-ui/use-descendant\"\nimport { trackFocusVisible } from \"@yamada-ui/use-focus-visible\"\nimport { useResizeObserver } from \"@yamada-ui/use-resize-observer\"\nimport type { PropGetter, RequiredPropGetter } from \"@yamada-ui/utils\"\nimport {\n  ariaAttr,\n  createContext,\n  cx,\n  dataAttr,\n  getValidChildren,\n  handlerAll,\n  mergeRefs,\n  omitObject,\n  useCallbackRef,\n  useIsMounted,\n} from \"@yamada-ui/utils\"\nimport type { ChangeEvent, ChangeEventHandler, ReactElement } from \"react\"\nimport { useCallback, useEffect, useId, useRef, useState } from \"react\"\n\nexport type SegmentedControlItem = SegmentedControlButtonProps & {\n  label?: string\n}\n\nconst { DescendantsContextProvider, useDescendants, useDescendant } =\n  createDescendant<HTMLButtonElement>()\n\ntype SegmentedControlContext = {\n  getInputProps: RequiredPropGetter<{ index: number }>\n  getLabelProps: RequiredPropGetter<{ index: number }>\n  styles: Record<string, CSSUIObject>\n}\n\nconst [SegmentedControlProvider, useSegmentedControl] =\n  createContext<SegmentedControlContext>({\n    strict: false,\n    name: \"SegmentedControlContext\",\n  })\n\ntype SegmentedControlOptions = {\n  /**\n   * The HTML `name` attribute used for forms.\n   */\n  name?: string\n  /**\n   * The value of the segmented control.\n   */\n  value?: string\n  /**\n   * The initial value of the segmented control.\n   */\n  defaultValue?: string\n  /**\n   * The callback fired when any children radio is checked or unchecked.\n   */\n  onChange?: (value: string) => void\n  /**\n   * If `true`, the segmented control will be readonly.\n   *\n   * @default false\n   */\n  isReadOnly?: boolean\n  /**\n   * If `true`, the segmented control will be disabled.\n   *\n   * @default false\n   */\n  isDisabled?: boolean\n  /**\n   * If provided, generate segmented control buttons but based on items.\n   *\n   * @default '[]'\n   */\n  items?: SegmentedControlItem[]\n}\n\nexport type SegmentedControlProps = Omit<HTMLUIProps<\"div\">, \"onChange\"> &\n  ThemeProps<\"SegmentedControl\"> &\n  SegmentedControlOptions\n\nexport const SegmentedControl = forwardRef<SegmentedControlProps, \"div\">(\n  (props, ref) => {\n    const [styles, mergedProps] = useMultiComponentStyle(\n      \"SegmentedControl\",\n      props,\n    )\n    let {\n      className,\n      id,\n      name,\n      isReadOnly,\n      isDisabled,\n      children,\n      items = [],\n      ...rest\n    } = omitThemeProps(mergedProps)\n    const isMountedRef = useIsMounted()\n\n    id ??= useId()\n    name ??= `segmented-control-${useId()}`\n\n    rest.onChange = useCallbackRef(rest.onChange)\n\n    const descendants = useDescendants()\n\n    const [focusedIndex, setFocusedIndex] = useState<number>(-1)\n    const [isFocusVisible, setIsFocusVisible] = useState<boolean>(false)\n    const [observerRef, containerRect] = useResizeObserver()\n    const containerRef = useRef<HTMLDivElement>(null)\n    const labelRefs = useRef<Map<string | number, HTMLLabelElement>>(new Map())\n\n    const [value, setValue] = useControllableState({\n      value: rest.value,\n      defaultValue: rest.defaultValue,\n      onChange: rest.onChange,\n    })\n\n    const getActivePosition = useCallback(() => {\n      const rect = { width: 0, height: 0, x: 0, y: 0 }\n\n      const el = labelRefs.current.get(value)\n\n      if (!el || !containerRef.current || !observerRef.current) return rect\n\n      const { paddingLeft, paddingTop } = getComputedStyle(containerRef.current)\n\n      const gutterX = parseFloat(paddingLeft) || 0\n      const gutterY = parseFloat(paddingTop) || 0\n\n      let { width, height } = el.getBoundingClientRect()\n      rect.x = el.offsetLeft - gutterX\n      rect.y = el.offsetTop - gutterY\n\n      rect.width = width * (el.offsetWidth / width) || 0\n      rect.height = height * (el.offsetWidth / width) || 0\n\n      return rect\n    }, [observerRef, value])\n\n    const [activePosition, setActivePosition] = useState(getActivePosition)\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        ...omitObject(rest, [\"value\", \"defaultValue\", \"onChange\"]),\n        ...props,\n        ref: mergeRefs(containerRef, observerRef, ref),\n        id,\n        \"aria-disabled\": ariaAttr(isDisabled),\n        \"aria-readonly\": ariaAttr(isReadOnly),\n        onBlur: handlerAll(props.onBlur, onBlur),\n      }),\n      [id, isDisabled, isReadOnly, observerRef, onBlur, rest],\n    )\n\n    const getActiveProps: PropGetter = useCallback(\n      (props = {}, ref = null) => {\n        const { width, height, x, y } = activePosition\n\n        return {\n          ...props,\n          ref,\n          style: {\n            position: \"absolute\",\n            zIndex: 1,\n            width,\n            height,\n            transform: `translate(${x}px, ${y}px)`,\n          },\n        }\n      },\n      [activePosition],\n    )\n\n    const getInputProps: RequiredPropGetter<{ index: number }> = useCallback(\n      ({ index, ...props } = {}, ref = null) => {\n        const disabled = props.disabled ?? props.isDisabled ?? isDisabled\n        const readOnly = props.readOnly ?? props.isReadOnly ?? isReadOnly\n        const checked = props.value === value\n\n        return {\n          ...omitObject(props, [\"isDisabled\", \"isReadOnly\"]),\n          ref,\n          id: `${id}-${index}`,\n          type: \"radio\",\n          name,\n          disabled: disabled || readOnly,\n          readOnly,\n          checked,\n          \"aria-disabled\": ariaAttr(disabled),\n          \"aria-readonly\": ariaAttr(readOnly),\n          \"data-checked\": dataAttr(checked),\n          \"data-focus\": dataAttr(index === focusedIndex),\n          style: {\n            border: \"0px\",\n            clip: \"rect(0px, 0px, 0px, 0px)\",\n            height: \"1px\",\n            width: \"1px\",\n            margin: \"-1px\",\n            padding: \"0px\",\n            overflow: \"hidden\",\n            whiteSpace: \"nowrap\",\n            position: \"absolute\",\n          },\n          onChange: handlerAll(props.onChange, (ev) =>\n            !disabled && !readOnly\n              ? onChange(ev as ChangeEvent<HTMLInputElement>)\n              : {},\n          ),\n        }\n      },\n      [isDisabled, isReadOnly, value, id, name, focusedIndex, onChange],\n    )\n\n    const getLabelProps: RequiredPropGetter<{ index: number }> = useCallback(\n      ({ index, ...props } = {}, ref = null) => {\n        const disabled = props.disabled ?? props.isDisabled ?? isDisabled\n        const readOnly = props.readOnly ?? props.isReadOnly ?? isReadOnly\n        const checked = props.value === value\n        const focused = index === focusedIndex\n\n        return {\n          props,\n          ref: mergeRefs(\n            (node) => labelRefs.current.set(props.value, node),\n            ref,\n          ),\n          \"aria-disabled\": ariaAttr(disabled),\n          \"aria-readonly\": ariaAttr(readOnly),\n          \"data-checked\": dataAttr(checked),\n          \"data-focus\": dataAttr(focused),\n          \"data-focus-visible\": dataAttr(focused && isFocusVisible),\n          onFocus: handlerAll(props.onFocus, () =>\n            onFocus(index, disabled || readOnly),\n          ),\n          ...(disabled || readOnly\n            ? {\n                _hover: {},\n                _active: {},\n                _focus: {},\n                _invalid: {},\n                _focusVisible: {},\n              }\n            : {}),\n          style: { position: \"relative\", zIndex: 2 },\n        }\n      },\n      [focusedIndex, isDisabled, isFocusVisible, isReadOnly, onFocus, value],\n    )\n\n    useEffect(() => {\n      return trackFocusVisible(setIsFocusVisible)\n    }, [])\n\n    useEffect(() => {\n      setActivePosition(getActivePosition())\n    }, [focusedIndex, containerRect, value, getActivePosition])\n\n    const css: CSSUIObject = {\n      position: \"relative\",\n      display: \"inline-flex\",\n      alignItems: \"center\",\n      ...styles.container,\n    }\n\n    const validChildren = getValidChildren(children)\n    let computedChildren: ReactElement[] = []\n\n    if (!validChildren.length && items.length) {\n      computedChildren = items.map(({ label, value, ...props }, i) => (\n        <SegmentedControlButton key={i} value={value} {...props}>\n          {label}\n        </SegmentedControlButton>\n      ))\n    } else {\n      computedChildren = validChildren\n    }\n\n    if (value == null && rest.defaultValue == null) {\n      for (const child of computedChildren) {\n        if (child.type !== SegmentedControlButton) 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={{ getInputProps, getLabelProps, styles }}\n        >\n          <ui.div\n            {...getContainerProps({}, ref)}\n            className={cx(\"ui-segmented-control\", className)}\n            __css={css}\n          >\n            {isMountedRef.current ? (\n              <ui.span\n                className=\"ui-segmented-control__active\"\n                {...getActiveProps()}\n                __css={styles.active}\n              />\n            ) : null}\n\n            {computedChildren}\n          </ui.div>\n        </SegmentedControlProvider>\n      </DescendantsContextProvider>\n    )\n  },\n)\n\ntype SegmentedControlButtonOptions = {\n  /**\n   * The value of the segmented control button.\n   */\n  value: string | number\n  /**\n   * The callback fired when any children radio is checked or unchecked.\n   */\n  onChange?: ChangeEventHandler<HTMLInputElement>\n}\n\nexport type SegmentedControlButtonProps = Omit<\n  HTMLUIProps<\"label\">,\n  \"onChange\"\n> &\n  Pick<SegmentedControlProps, \"isDisabled\" | \"isReadOnly\"> &\n  SegmentedControlButtonOptions\n\nexport const SegmentedControlButton = forwardRef<\n  SegmentedControlButtonProps,\n  \"input\"\n>(\n  (\n    {\n      className,\n      disabled,\n      readOnly,\n      isDisabled,\n      isReadOnly,\n      value,\n      onChange,\n      children,\n      ...rest\n    },\n    ref,\n  ) => {\n    const { getInputProps, getLabelProps, styles } = useSegmentedControl()\n\n    const { index, register } = useDescendant({\n      disabled: isDisabled || isReadOnly,\n    })\n\n    const props = {\n      index,\n      value,\n      onChange,\n      disabled,\n      readOnly,\n      isDisabled,\n      isReadOnly,\n    }\n\n    const css: CSSUIObject = {\n      cursor: \"pointer\",\n      flex: \"1 1 0%\",\n      display: \"inline-flex\",\n      justifyContent: \"center\",\n      alignItems: \"center\",\n      ...styles.button,\n    }\n\n    return (\n      <ui.label\n        {...getLabelProps(omitObject(props, [\"onChange\"]))}\n        className={cx(\"ui-segmented-control__button\", className)}\n        __css={css}\n        {...rest}\n      >\n        <ui.input {...getInputProps(props, mergeRefs(register, ref))} />\n        <ui.span>{children}</ui.span>\n      </ui.label>\n    )\n  },\n)\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACCA,kBAKO;AACP,oCAAqC;AACrC,4BAAiC;AACjC,+BAAkC;AAClC,iCAAkC;AAElC,mBAWO;AAEP,mBAAgE;AAyRxD;AAnRR,IAAM,EAAE,4BAA4B,gBAAgB,cAAc,QAChE,wCAAoC;AAQtC,IAAM,CAAC,0BAA0B,mBAAmB,QAClD,4BAAuC;AAAA,EACrC,QAAQ;AAAA,EACR,MAAM;AACR,CAAC;AA2CI,IAAM,uBAAmB;AAAA,EAC9B,CAAC,OAAO,QAAQ;AACd,UAAM,CAAC,QAAQ,WAAW,QAAI;AAAA,MAC5B;AAAA,MACA;AAAA,IACF;AACA,QAAI;AAAA,MACF;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,QAAQ,CAAC;AAAA,MACT,GAAG;AAAA,IACL,QAAI,4BAAe,WAAW;AAC9B,UAAM,mBAAe,2BAAa;AAElC,+BAAO,oBAAM;AACb,iCAAS,yBAAqB,oBAAM,CAAC;AAErC,SAAK,eAAW,6BAAe,KAAK,QAAQ;AAE5C,UAAM,cAAc,eAAe;AAEnC,UAAM,CAAC,cAAc,eAAe,QAAI,uBAAiB,EAAE;AAC3D,UAAM,CAAC,gBAAgB,iBAAiB,QAAI,uBAAkB,KAAK;AACnE,UAAM,CAAC,aAAa,aAAa,QAAI,8CAAkB;AACvD,UAAM,mBAAe,qBAAuB,IAAI;AAChD,UAAM,gBAAY,qBAA+C,oBAAI,IAAI,CAAC;AAE1E,UAAM,CAAC,OAAO,QAAQ,QAAI,oDAAqB;AAAA,MAC7C,OAAO,KAAK;AAAA,MACZ,cAAc,KAAK;AAAA,MACnB,UAAU,KAAK;AAAA,IACjB,CAAC;AAED,UAAM,wBAAoB,0BAAY,MAAM;AAC1C,YAAM,OAAO,EAAE,OAAO,GAAG,QAAQ,GAAG,GAAG,GAAG,GAAG,EAAE;AAE/C,YAAM,KAAK,UAAU,QAAQ,IAAI,KAAK;AAEtC,UAAI,CAAC,MAAM,CAAC,aAAa,WAAW,CAAC,YAAY;AAAS,eAAO;AAEjE,YAAM,EAAE,aAAa,WAAW,IAAI,iBAAiB,aAAa,OAAO;AAEzE,YAAM,UAAU,WAAW,WAAW,KAAK;AAC3C,YAAM,UAAU,WAAW,UAAU,KAAK;AAE1C,UAAI,EAAE,OAAO,OAAO,IAAI,GAAG,sBAAsB;AACjD,WAAK,IAAI,GAAG,aAAa;AACzB,WAAK,IAAI,GAAG,YAAY;AAExB,WAAK,QAAQ,SAAS,GAAG,cAAc,UAAU;AACjD,WAAK,SAAS,UAAU,GAAG,cAAc,UAAU;AAEnD,aAAO;AAAA,IACT,GAAG,CAAC,aAAa,KAAK,CAAC;AAEvB,UAAM,CAAC,gBAAgB,iBAAiB,QAAI,uBAAS,iBAAiB;AAEtE,UAAM,eAAW;AAAA,MACf,CAAC,OAAsC;AACrC,YAAI,cAAc,YAAY;AAC5B,aAAG,eAAe;AAElB;AAAA,QACF;AAEA,iBAAS,GAAG,OAAO,KAAK;AAAA,MAC1B;AAAA,MACA,CAAC,YAAY,YAAY,QAAQ;AAAA,IACnC;AAEA,UAAM,cAAU;AAAA,MACd,CAAC,OAAe,SAAkB;AAChC,YAAI;AAAY;AAEhB,YAAI,MAAM;AACR,gBAAM,OAAO,YAAY,iBAAiB,KAAK;AAE/C,cAAI;AAAM,4BAAgB,KAAK,KAAK;AAAA,QACtC,OAAO;AACL,0BAAgB,KAAK;AAAA,QACvB;AAAA,MACF;AAAA,MACA,CAAC,aAAa,UAAU;AAAA,IAC1B;AAEA,UAAM,aAAS,0BAAY,MAAM,gBAAgB,EAAE,GAAG,CAAC,CAAC;AAExD,UAAM,wBAAgC;AAAA,MACpC,CAACA,SAAQ,CAAC,GAAGC,OAAM,UAAU;AAAA,QAC3B,OAAG,yBAAW,MAAM,CAAC,SAAS,gBAAgB,UAAU,CAAC;AAAA,QACzD,GAAGD;AAAA,QACH,SAAK,wBAAU,cAAc,aAAaC,IAAG;AAAA,QAC7C;AAAA,QACA,qBAAiB,uBAAS,UAAU;AAAA,QACpC,qBAAiB,uBAAS,UAAU;AAAA,QACpC,YAAQ,yBAAWD,OAAM,QAAQ,MAAM;AAAA,MACzC;AAAA,MACA,CAAC,IAAI,YAAY,YAAY,aAAa,QAAQ,IAAI;AAAA,IACxD;AAEA,UAAM,qBAA6B;AAAA,MACjC,CAACA,SAAQ,CAAC,GAAGC,OAAM,SAAS;AAC1B,cAAM,EAAE,OAAO,QAAQ,GAAG,EAAE,IAAI;AAEhC,eAAO;AAAA,UACL,GAAGD;AAAA,UACH,KAAAC;AAAA,UACA,OAAO;AAAA,YACL,UAAU;AAAA,YACV,QAAQ;AAAA,YACR;AAAA,YACA;AAAA,YACA,WAAW,aAAa,CAAC,OAAO,CAAC;AAAA,UACnC;AAAA,QACF;AAAA,MACF;AAAA,MACA,CAAC,cAAc;AAAA,IACjB;AAEA,UAAM,oBAAuD;AAAA,MAC3D,CAAC,EAAE,OAAO,GAAGD,OAAM,IAAI,CAAC,GAAGC,OAAM,SAAS;AAnNhD;AAoNQ,cAAM,YAAW,WAAAD,OAAM,aAAN,YAAkBA,OAAM,eAAxB,YAAsC;AACvD,cAAM,YAAW,WAAAA,OAAM,aAAN,YAAkBA,OAAM,eAAxB,YAAsC;AACvD,cAAM,UAAUA,OAAM,UAAU;AAEhC,eAAO;AAAA,UACL,OAAG,yBAAWA,QAAO,CAAC,cAAc,YAAY,CAAC;AAAA,UACjD,KAAAC;AAAA,UACA,IAAI,GAAG,EAAE,IAAI,KAAK;AAAA,UAClB,MAAM;AAAA,UACN;AAAA,UACA,UAAU,YAAY;AAAA,UACtB;AAAA,UACA;AAAA,UACA,qBAAiB,uBAAS,QAAQ;AAAA,UAClC,qBAAiB,uBAAS,QAAQ;AAAA,UAClC,oBAAgB,uBAAS,OAAO;AAAA,UAChC,kBAAc,uBAAS,UAAU,YAAY;AAAA,UAC7C,OAAO;AAAA,YACL,QAAQ;AAAA,YACR,MAAM;AAAA,YACN,QAAQ;AAAA,YACR,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,SAAS;AAAA,YACT,UAAU;AAAA,YACV,YAAY;AAAA,YACZ,UAAU;AAAA,UACZ;AAAA,UACA,cAAU;AAAA,YAAWD,OAAM;AAAA,YAAU,CAAC,OACpC,CAAC,YAAY,CAAC,WACV,SAAS,EAAmC,IAC5C,CAAC;AAAA,UACP;AAAA,QACF;AAAA,MACF;AAAA,MACA,CAAC,YAAY,YAAY,OAAO,IAAI,MAAM,cAAc,QAAQ;AAAA,IAClE;AAEA,UAAM,oBAAuD;AAAA,MAC3D,CAAC,EAAE,OAAO,GAAGA,OAAM,IAAI,CAAC,GAAGC,OAAM,SAAS;AA3PhD;AA4PQ,cAAM,YAAW,WAAAD,OAAM,aAAN,YAAkBA,OAAM,eAAxB,YAAsC;AACvD,cAAM,YAAW,WAAAA,OAAM,aAAN,YAAkBA,OAAM,eAAxB,YAAsC;AACvD,cAAM,UAAUA,OAAM,UAAU;AAChC,cAAM,UAAU,UAAU;AAE1B,eAAO;AAAA,UACL,OAAAA;AAAA,UACA,SAAK;AAAA,YACH,CAAC,SAAS,UAAU,QAAQ,IAAIA,OAAM,OAAO,IAAI;AAAA,YACjDC;AAAA,UACF;AAAA,UACA,qBAAiB,uBAAS,QAAQ;AAAA,UAClC,qBAAiB,uBAAS,QAAQ;AAAA,UAClC,oBAAgB,uBAAS,OAAO;AAAA,UAChC,kBAAc,uBAAS,OAAO;AAAA,UAC9B,0BAAsB,uBAAS,WAAW,cAAc;AAAA,UACxD,aAAS;AAAA,YAAWD,OAAM;AAAA,YAAS,MACjC,QAAQ,OAAO,YAAY,QAAQ;AAAA,UACrC;AAAA,UACA,GAAI,YAAY,WACZ;AAAA,YACE,QAAQ,CAAC;AAAA,YACT,SAAS,CAAC;AAAA,YACV,QAAQ,CAAC;AAAA,YACT,UAAU,CAAC;AAAA,YACX,eAAe,CAAC;AAAA,UAClB,IACA,CAAC;AAAA,UACL,OAAO,EAAE,UAAU,YAAY,QAAQ,EAAE;AAAA,QAC3C;AAAA,MACF;AAAA,MACA,CAAC,cAAc,YAAY,gBAAgB,YAAY,SAAS,KAAK;AAAA,IACvE;AAEA,gCAAU,MAAM;AACd,iBAAO,4CAAkB,iBAAiB;AAAA,IAC5C,GAAG,CAAC,CAAC;AAEL,gCAAU,MAAM;AACd,wBAAkB,kBAAkB,CAAC;AAAA,IACvC,GAAG,CAAC,cAAc,eAAe,OAAO,iBAAiB,CAAC;AAE1D,UAAM,MAAmB;AAAA,MACvB,UAAU;AAAA,MACV,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,GAAG,OAAO;AAAA,IACZ;AAEA,UAAM,oBAAgB,+BAAiB,QAAQ;AAC/C,QAAI,mBAAmC,CAAC;AAExC,QAAI,CAAC,cAAc,UAAU,MAAM,QAAQ;AACzC,yBAAmB,MAAM,IAAI,CAAC,EAAE,OAAO,OAAAE,QAAO,GAAGF,OAAM,GAAG,MACxD,4CAAC,0BAA+B,OAAOE,QAAQ,GAAGF,QAC/C,mBAD0B,CAE7B,CACD;AAAA,IACH,OAAO;AACL,yBAAmB;AAAA,IACrB;AAEA,QAAI,SAAS,QAAQ,KAAK,gBAAgB,MAAM;AAC9C,iBAAW,SAAS,kBAAkB;AACpC,YAAI,MAAM,SAAS;AAAwB;AAE3C,cAAME,SAAQ,MAAM,MAAM;AAE1B,iBAASA,MAAK;AAEd;AAAA,MACF;AAAA,IACF;AAEA,WACE,4CAAC,8BAA2B,OAAO,aACjC;AAAA,MAAC;AAAA;AAAA,QACC,OAAO,EAAE,eAAe,eAAe,OAAO;AAAA,QAE9C;AAAA,UAAC,eAAG;AAAA,UAAH;AAAA,YACE,GAAG,kBAAkB,CAAC,GAAG,GAAG;AAAA,YAC7B,eAAW,iBAAG,wBAAwB,SAAS;AAAA,YAC/C,OAAO;AAAA,YAEN;AAAA,2BAAa,UACZ;AAAA,gBAAC,eAAG;AAAA,gBAAH;AAAA,kBACC,WAAU;AAAA,kBACT,GAAG,eAAe;AAAA,kBACnB,OAAO,OAAO;AAAA;AAAA,cAChB,IACE;AAAA,cAEH;AAAA;AAAA;AAAA,QACH;AAAA;AAAA,IACF,GACF;AAAA,EAEJ;AACF;AAoBO,IAAM,6BAAyB;AAAA,EAIpC,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,EAAE,eAAe,eAAe,OAAO,IAAI,oBAAoB;AAErE,UAAM,EAAE,OAAO,SAAS,IAAI,cAAc;AAAA,MACxC,UAAU,cAAc;AAAA,IAC1B,CAAC;AAED,UAAM,QAAQ;AAAA,MACZ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAEA,UAAM,MAAmB;AAAA,MACvB,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB,YAAY;AAAA,MACZ,GAAG,OAAO;AAAA,IACZ;AAEA,WACE;AAAA,MAAC,eAAG;AAAA,MAAH;AAAA,QACE,GAAG,kBAAc,yBAAW,OAAO,CAAC,UAAU,CAAC,CAAC;AAAA,QACjD,eAAW,iBAAG,gCAAgC,SAAS;AAAA,QACvD,OAAO;AAAA,QACN,GAAG;AAAA,QAEJ;AAAA,sDAAC,eAAG,OAAH,EAAU,GAAG,cAAc,WAAO,wBAAU,UAAU,GAAG,CAAC,GAAG;AAAA,UAC9D,4CAAC,eAAG,MAAH,EAAS,UAAS;AAAA;AAAA;AAAA,IACrB;AAAA,EAEJ;AACF;","names":["props","ref","value"]}
+{"version":3,"sources":["../src/index.ts","../src/segmented-control.tsx"],"sourcesContent":["export { SegmentedControl, SegmentedControlButton } from \"./segmented-control\"\nexport type {\n  SegmentedControlItem,\n  SegmentedControlProps,\n  SegmentedControlButtonProps,\n} from \"./segmented-control\"\n","import type { CSSUIObject, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport {\n  ui,\n  forwardRef,\n  useMultiComponentStyle,\n  omitThemeProps,\n} from \"@yamada-ui/core\"\nimport type { MotionProps } from \"@yamada-ui/motion\"\nimport { LayoutGroup, Motion } from \"@yamada-ui/motion\"\nimport { useControllableState } from \"@yamada-ui/use-controllable-state\"\nimport { createDescendant } from \"@yamada-ui/use-descendant\"\nimport { trackFocusVisible } from \"@yamada-ui/use-focus-visible\"\nimport type { PropGetter, RequiredPropGetter } from \"@yamada-ui/utils\"\nimport {\n  ariaAttr,\n  createContext,\n  cx,\n  dataAttr,\n  getValidChildren,\n  handlerAll,\n  mergeRefs,\n  omitObject,\n  useCallbackRef,\n  useIsMounted,\n} from \"@yamada-ui/utils\"\nimport type { ChangeEvent, ChangeEventHandler, FC, ReactElement } from \"react\"\nimport { useCallback, useEffect, useId, useRef, useState } from \"react\"\n\nexport type SegmentedControlItem = SegmentedControlButtonProps & {\n  label?: string\n}\n\nconst { DescendantsContextProvider, useDescendants, useDescendant } =\n  createDescendant<HTMLButtonElement>()\n\ntype SegmentedControlContext = {\n  selectedValue: string\n  getInputProps: RequiredPropGetter<{ index: number }>\n  getLabelProps: RequiredPropGetter<{ index: number }>\n  styles: Record<string, CSSUIObject>\n}\n\nconst [SegmentedControlProvider, useSegmentedControl] =\n  createContext<SegmentedControlContext>({\n    strict: false,\n    name: \"SegmentedControlContext\",\n  })\n\ntype SegmentedControlOptions = {\n  /**\n   * The HTML `name` attribute used for forms.\n   */\n  name?: string\n  /**\n   * The value of the segmented control.\n   */\n  value?: string\n  /**\n   * The initial value of the segmented control.\n   */\n  defaultValue?: string\n  /**\n   * The callback fired when any children radio is checked or unchecked.\n   */\n  onChange?: (value: string) => void\n  /**\n   * If `true`, the segmented control will be readonly.\n   *\n   * @default false\n   */\n  isReadOnly?: boolean\n  /**\n   * If `true`, the segmented control will be disabled.\n   *\n   * @default false\n   */\n  isDisabled?: boolean\n  /**\n   * If provided, generate segmented control buttons but based on items.\n   *\n   * @default '[]'\n   */\n  items?: SegmentedControlItem[]\n}\n\nexport type SegmentedControlProps = Omit<\n  HTMLUIProps<\"div\">,\n  \"value\" | \"defaultValue\" | \"onChange\"\n> &\n  ThemeProps<\"SegmentedControl\"> &\n  SegmentedControlOptions\n\nexport const SegmentedControl = forwardRef<SegmentedControlProps, \"div\">(\n  (props, ref) => {\n    const [styles, mergedProps] = useMultiComponentStyle(\n      \"SegmentedControl\",\n      props,\n    )\n    let {\n      className,\n      id,\n      name,\n      isReadOnly,\n      isDisabled,\n      children,\n      items = [],\n      value,\n      defaultValue,\n      ...rest\n    } = omitThemeProps(mergedProps)\n\n    id ??= useId()\n    name ??= `segmented-control-${useId()}`\n\n    rest.onChange = useCallbackRef(rest.onChange)\n\n    const descendants = useDescendants()\n\n    const [focusedIndex, setFocusedIndex] = useState<number>(-1)\n    const [isFocusVisible, setIsFocusVisible] = useState<boolean>(false)\n    const containerRef = useRef<HTMLDivElement>(null)\n    const labelRefs = useRef<Map<string | number, HTMLLabelElement>>(new Map())\n\n    const [selectedValue, setSelectedValue] = useControllableState({\n      value,\n      defaultValue,\n      onChange: rest.onChange,\n    })\n\n    const onChange = useCallback(\n      (ev: ChangeEvent<HTMLInputElement>) => {\n        if (isDisabled || isReadOnly) {\n          ev.preventDefault()\n\n          return\n        }\n\n        setSelectedValue(ev.target.value)\n      },\n      [isDisabled, isReadOnly, setSelectedValue],\n    )\n\n    const onFocus = useCallback(\n      (index: number, skip: boolean) => {\n        if (isDisabled) return\n\n        if (skip) {\n          const next = descendants.enabledNextValue(index)\n\n          if (next) setFocusedIndex(next.index)\n        } else {\n          setFocusedIndex(index)\n        }\n      },\n      [descendants, isDisabled],\n    )\n\n    const onBlur = useCallback(() => setFocusedIndex(-1), [])\n\n    const getContainerProps: PropGetter = useCallback(\n      (props = {}, ref = null) => ({\n        ...omitObject(rest, [\"onChange\"]),\n        ...props,\n        ref: mergeRefs(containerRef, ref),\n        id,\n        \"aria-disabled\": ariaAttr(isDisabled),\n        \"aria-readonly\": ariaAttr(isReadOnly),\n        onBlur: handlerAll(props.onBlur, onBlur),\n      }),\n      [id, isDisabled, isReadOnly, onBlur, rest],\n    )\n\n    const getInputProps: RequiredPropGetter<{ index: number }> = useCallback(\n      ({ index, ...props } = {}, ref = null) => {\n        const disabled = props.disabled ?? props.isDisabled ?? isDisabled\n        const readOnly = props.readOnly ?? props.isReadOnly ?? isReadOnly\n        const checked = props.value === selectedValue\n\n        return {\n          ...omitObject(props, [\"isDisabled\", \"isReadOnly\"]),\n          ref,\n          id: `${id}-${index}`,\n          type: \"radio\",\n          name,\n          disabled: disabled || readOnly,\n          readOnly,\n          checked,\n          \"aria-disabled\": ariaAttr(disabled),\n          \"aria-readonly\": ariaAttr(readOnly),\n          \"data-checked\": dataAttr(checked),\n          \"data-focus\": dataAttr(index === focusedIndex),\n          style: {\n            border: \"0px\",\n            clip: \"rect(0px, 0px, 0px, 0px)\",\n            height: \"1px\",\n            width: \"1px\",\n            margin: \"-1px\",\n            padding: \"0px\",\n            overflow: \"hidden\",\n            whiteSpace: \"nowrap\",\n            position: \"absolute\",\n          },\n          onChange: handlerAll(props.onChange, (ev) =>\n            !disabled && !readOnly\n              ? onChange(ev as ChangeEvent<HTMLInputElement>)\n              : {},\n          ),\n        }\n      },\n      [isDisabled, isReadOnly, selectedValue, id, name, focusedIndex, onChange],\n    )\n\n    const getLabelProps: RequiredPropGetter<{ index: number }> = useCallback(\n      ({ index, ...props } = {}, ref = null) => {\n        const disabled = props.disabled ?? props.isDisabled ?? isDisabled\n        const readOnly = props.readOnly ?? props.isReadOnly ?? isReadOnly\n        const checked = props.value === selectedValue\n        const focused = index === focusedIndex\n\n        return {\n          props,\n          ref: mergeRefs(\n            (node) => labelRefs.current.set(props.value, node),\n            ref,\n          ),\n          \"aria-disabled\": ariaAttr(disabled),\n          \"aria-readonly\": ariaAttr(readOnly),\n          \"data-checked\": dataAttr(checked),\n          \"data-focus\": dataAttr(focused),\n          \"data-focus-visible\": dataAttr(focused && isFocusVisible),\n          onFocus: handlerAll(props.onFocus, () =>\n            onFocus(index, disabled || readOnly),\n          ),\n          ...(disabled || readOnly\n            ? {\n                _hover: {},\n                _active: {},\n                _focus: {},\n                _invalid: {},\n                _focusVisible: {},\n              }\n            : {}),\n        }\n      },\n      [\n        focusedIndex,\n        isDisabled,\n        isFocusVisible,\n        isReadOnly,\n        onFocus,\n        selectedValue,\n      ],\n    )\n\n    useEffect(() => {\n      return trackFocusVisible(setIsFocusVisible)\n    }, [])\n\n    const css: CSSUIObject = {\n      position: \"relative\",\n      display: \"inline-flex\",\n      alignItems: \"center\",\n      ...styles.container,\n    }\n\n    const validChildren = getValidChildren(children)\n    let computedChildren: ReactElement[] = []\n\n    if (!validChildren.length && items.length) {\n      computedChildren = items.map(({ label, value, ...props }, i) => (\n        <SegmentedControlButton key={i} value={value} {...props}>\n          {label}\n        </SegmentedControlButton>\n      ))\n    } else {\n      computedChildren = validChildren\n    }\n\n    if (selectedValue == null && defaultValue == null) {\n      for (const child of computedChildren) {\n        if (child.type !== SegmentedControlButton)\n          if (\n            (child.type as any).displayName !==\n            SegmentedControlButton.displayName\n          )\n            continue\n\n        const value = child.props.value\n\n        setSelectedValue(value)\n\n        break\n      }\n    }\n\n    return (\n      <DescendantsContextProvider value={descendants}>\n        <SegmentedControlProvider\n          value={{ getInputProps, getLabelProps, styles, selectedValue }}\n        >\n          <LayoutGroup id={id}>\n            <ui.div\n              {...getContainerProps({}, ref)}\n              className={cx(\"ui-segmented-control\", className)}\n              __css={css}\n            >\n              {computedChildren}\n            </ui.div>\n          </LayoutGroup>\n        </SegmentedControlProvider>\n      </DescendantsContextProvider>\n    )\n  },\n)\n\ntype SegmentedControlButtonOptions = {\n  /**\n   * The value of the segmented control button.\n   */\n  value: string | number\n  /**\n   * The callback fired when any children radio is checked or unchecked.\n   */\n  onChange?: ChangeEventHandler<HTMLInputElement>\n  /**\n   * Props for motion component.\n   */\n  motionProps?: MotionProps\n}\n\nexport type SegmentedControlButtonProps = Omit<\n  HTMLUIProps<\"label\">,\n  \"onChange\"\n> &\n  Pick<SegmentedControlProps, \"isDisabled\" | \"isReadOnly\"> &\n  SegmentedControlButtonOptions\n\nexport const SegmentedControlButton = forwardRef<\n  SegmentedControlButtonProps,\n  \"input\"\n>(\n  (\n    {\n      className,\n      disabled,\n      readOnly,\n      isDisabled,\n      isReadOnly,\n      value,\n      onChange,\n      children,\n      motionProps,\n      ...rest\n    },\n    ref,\n  ) => {\n    const [, isMounted] = useIsMounted({ rerender: true })\n    const { selectedValue, getInputProps, getLabelProps, styles } =\n      useSegmentedControl()\n\n    const { index, register } = useDescendant({\n      disabled: isDisabled || isReadOnly,\n    })\n\n    const props = {\n      index,\n      value,\n      onChange,\n      disabled,\n      readOnly,\n      isDisabled,\n      isReadOnly,\n    }\n\n    const css: CSSUIObject = {\n      position: \"relative\",\n      cursor: \"pointer\",\n      flex: \"1 1 0%\",\n      display: \"inline-flex\",\n      justifyContent: \"center\",\n      alignItems: \"center\",\n      ...styles.button,\n    }\n\n    const isSelected = selectedValue === value\n\n    return (\n      <ui.label\n        {...getLabelProps(omitObject(props, [\"onChange\"]))}\n        className={cx(\"ui-segmented-control__button\", className)}\n        __css={css}\n        {...rest}\n      >\n        <ui.input {...getInputProps(props, mergeRefs(register, ref))} />\n        <ui.span>{children}</ui.span>\n        {isSelected && isMounted ? (\n          <SegmentedControlCursor {...motionProps} />\n        ) : null}\n      </ui.label>\n    )\n  },\n)\n\nSegmentedControlButton.displayName = \"SegmentedControlButton\"\n\ntype SegmentedControlCursorProps = MotionProps & { className?: string }\n\nconst SegmentedControlCursor: FC<SegmentedControlCursorProps> = ({\n  className,\n  transition,\n  ...rest\n}) => {\n  const { styles } = useSegmentedControl()\n\n  const css: CSSUIObject = {\n    position: \"absolute\",\n    zIndex: \"-10\",\n    w: \"full\",\n    h: \"full\",\n    ...styles.cursor,\n  }\n\n  return (\n    <Motion\n      className={cx(\"ui-segmented-control__cursor\", className)}\n      layoutDependency={false}\n      layoutId=\"cursor\"\n      transition={{\n        type: \"spring\",\n        bounce: 0.15,\n        duration: 0.4,\n        ...transition,\n      }}\n      __css={css}\n      {...rest}\n    />\n  )\n}\n"],"mappings":"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","names":["props","ref","value"]}

package/dist/index.mjs

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

package/dist/segmented-control.d.mts

@@ -1,5 +1,6 @@
 import * as _yamada_ui_core from '@yamada-ui/core';
 import { HTMLUIProps, ThemeProps } from '@yamada-ui/core';
+import { MotionProps } from '@yamada-ui/motion';
 import { ChangeEventHandler } from 'react';
 
 type SegmentedControlItem = SegmentedControlButtonProps & {
@@ -41,7 +42,7 @@ type SegmentedControlOptions = {
      */
     items?: SegmentedControlItem[];
 };
-type SegmentedControlProps = Omit<HTMLUIProps<"div">, "onChange"> & ThemeProps<"SegmentedControl"> & SegmentedControlOptions;
+type SegmentedControlProps = Omit<HTMLUIProps<"div">, "value" | "defaultValue" | "onChange"> & ThemeProps<"SegmentedControl"> & SegmentedControlOptions;
 declare const SegmentedControl: _yamada_ui_core.Component<"div", SegmentedControlProps>;
 type SegmentedControlButtonOptions = {
     /**
@@ -52,6 +53,10 @@ type SegmentedControlButtonOptions = {
      * The callback fired when any children radio is checked or unchecked.
      */
     onChange?: ChangeEventHandler<HTMLInputElement>;
+    /**
+     * Props for motion component.
+     */
+    motionProps?: MotionProps;
 };
 type SegmentedControlButtonProps = Omit<HTMLUIProps<"label">, "onChange"> & Pick<SegmentedControlProps, "isDisabled" | "isReadOnly"> & SegmentedControlButtonOptions;
 declare const SegmentedControlButton: _yamada_ui_core.Component<"input", SegmentedControlButtonProps>;

package/dist/segmented-control.d.ts

@@ -1,5 +1,6 @@
 import * as _yamada_ui_core from '@yamada-ui/core';
 import { HTMLUIProps, ThemeProps } from '@yamada-ui/core';
+import { MotionProps } from '@yamada-ui/motion';
 import { ChangeEventHandler } from 'react';
 
 type SegmentedControlItem = SegmentedControlButtonProps & {
@@ -41,7 +42,7 @@ type SegmentedControlOptions = {
      */
     items?: SegmentedControlItem[];
 };
-type SegmentedControlProps = Omit<HTMLUIProps<"div">, "onChange"> & ThemeProps<"SegmentedControl"> & SegmentedControlOptions;
+type SegmentedControlProps = Omit<HTMLUIProps<"div">, "value" | "defaultValue" | "onChange"> & ThemeProps<"SegmentedControl"> & SegmentedControlOptions;
 declare const SegmentedControl: _yamada_ui_core.Component<"div", SegmentedControlProps>;
 type SegmentedControlButtonOptions = {
     /**
@@ -52,6 +53,10 @@ type SegmentedControlButtonOptions = {
      * The callback fired when any children radio is checked or unchecked.
      */
     onChange?: ChangeEventHandler<HTMLInputElement>;
+    /**
+     * Props for motion component.
+     */
+    motionProps?: MotionProps;
 };
 type SegmentedControlButtonProps = Omit<HTMLUIProps<"label">, "onChange"> & Pick<SegmentedControlProps, "isDisabled" | "isReadOnly"> & SegmentedControlButtonOptions;
 declare const SegmentedControlButton: _yamada_ui_core.Component<"input", SegmentedControlButtonProps>;

package/dist/segmented-control.js

@@ -26,10 +26,10 @@ __export(segmented_control_exports, {
 });
 module.exports = __toCommonJS(segmented_control_exports);
 var import_core = require("@yamada-ui/core");
+var import_motion = require("@yamada-ui/motion");
 var import_use_controllable_state = require("@yamada-ui/use-controllable-state");
 var import_use_descendant = require("@yamada-ui/use-descendant");
 var import_use_focus_visible = require("@yamada-ui/use-focus-visible");
-var import_use_resize_observer = require("@yamada-ui/use-resize-observer");
 var import_utils = require("@yamada-ui/utils");
 var import_react = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -52,48 +52,32 @@ var SegmentedControl = (0, import_core.forwardRef)(
       isDisabled,
       children,
       items = [],
+      value,
+      defaultValue,
       ...rest
     } = (0, import_core.omitThemeProps)(mergedProps);
-    const isMountedRef = (0, import_utils.useIsMounted)();
     id != null ? id : id = (0, import_react.useId)();
     name != null ? name : name = `segmented-control-${(0, import_react.useId)()}`;
     rest.onChange = (0, import_utils.useCallbackRef)(rest.onChange);
     const descendants = useDescendants();
     const [focusedIndex, setFocusedIndex] = (0, import_react.useState)(-1);
     const [isFocusVisible, setIsFocusVisible] = (0, import_react.useState)(false);
-    const [observerRef, containerRect] = (0, import_use_resize_observer.useResizeObserver)();
     const containerRef = (0, import_react.useRef)(null);
     const labelRefs = (0, import_react.useRef)(/* @__PURE__ */ new Map());
-    const [value, setValue] = (0, import_use_controllable_state.useControllableState)({
-      value: rest.value,
-      defaultValue: rest.defaultValue,
+    const [selectedValue, setSelectedValue] = (0, import_use_controllable_state.useControllableState)({
+      value,
+      defaultValue,
       onChange: rest.onChange
     });
-    const getActivePosition = (0, import_react.useCallback)(() => {
-      const rect = { width: 0, height: 0, x: 0, y: 0 };
-      const el = labelRefs.current.get(value);
-      if (!el || !containerRef.current || !observerRef.current)
-        return rect;
-      const { paddingLeft, paddingTop } = getComputedStyle(containerRef.current);
-      const gutterX = parseFloat(paddingLeft) || 0;
-      const gutterY = parseFloat(paddingTop) || 0;
-      let { width, height } = el.getBoundingClientRect();
-      rect.x = el.offsetLeft - gutterX;
-      rect.y = el.offsetTop - gutterY;
-      rect.width = width * (el.offsetWidth / width) || 0;
-      rect.height = height * (el.offsetWidth / width) || 0;
-      return rect;
-    }, [observerRef, value]);
-    const [activePosition, setActivePosition] = (0, import_react.useState)(getActivePosition);
     const onChange = (0, import_react.useCallback)(
       (ev) => {
         if (isDisabled || isReadOnly) {
           ev.preventDefault();
           return;
         }
-        setValue(ev.target.value);
+        setSelectedValue(ev.target.value);
       },
-      [isDisabled, isReadOnly, setValue]
+      [isDisabled, isReadOnly, setSelectedValue]
     );
     const onFocus = (0, import_react.useCallback)(
       (index, skip) => {
@@ -112,39 +96,22 @@ var SegmentedControl = (0, import_core.forwardRef)(
     const onBlur = (0, import_react.useCallback)(() => setFocusedIndex(-1), []);
     const getContainerProps = (0, import_react.useCallback)(
       (props2 = {}, ref2 = null) => ({
-        ...(0, import_utils.omitObject)(rest, ["value", "defaultValue", "onChange"]),
+        ...(0, import_utils.omitObject)(rest, ["onChange"]),
         ...props2,
-        ref: (0, import_utils.mergeRefs)(containerRef, observerRef, ref2),
+        ref: (0, import_utils.mergeRefs)(containerRef, ref2),
         id,
         "aria-disabled": (0, import_utils.ariaAttr)(isDisabled),
         "aria-readonly": (0, import_utils.ariaAttr)(isReadOnly),
         onBlur: (0, import_utils.handlerAll)(props2.onBlur, onBlur)
       }),
-      [id, isDisabled, isReadOnly, observerRef, onBlur, rest]
-    );
-    const getActiveProps = (0, import_react.useCallback)(
-      (props2 = {}, ref2 = null) => {
-        const { width, height, x, y } = activePosition;
-        return {
-          ...props2,
-          ref: ref2,
-          style: {
-            position: "absolute",
-            zIndex: 1,
-            width,
-            height,
-            transform: `translate(${x}px, ${y}px)`
-          }
-        };
-      },
-      [activePosition]
+      [id, isDisabled, isReadOnly, onBlur, rest]
     );
     const getInputProps = (0, import_react.useCallback)(
       ({ index, ...props2 } = {}, ref2 = null) => {
         var _a, _b, _c, _d;
         const disabled = (_b = (_a = props2.disabled) != null ? _a : props2.isDisabled) != null ? _b : isDisabled;
         const readOnly = (_d = (_c = props2.readOnly) != null ? _c : props2.isReadOnly) != null ? _d : isReadOnly;
-        const checked = props2.value === value;
+        const checked = props2.value === selectedValue;
         return {
           ...(0, import_utils.omitObject)(props2, ["isDisabled", "isReadOnly"]),
           ref: ref2,
@@ -175,14 +142,14 @@ var SegmentedControl = (0, import_core.forwardRef)(
           )
         };
       },
-      [isDisabled, isReadOnly, value, id, name, focusedIndex, onChange]
+      [isDisabled, isReadOnly, selectedValue, id, name, focusedIndex, onChange]
     );
     const getLabelProps = (0, import_react.useCallback)(
       ({ index, ...props2 } = {}, ref2 = null) => {
         var _a, _b, _c, _d;
         const disabled = (_b = (_a = props2.disabled) != null ? _a : props2.isDisabled) != null ? _b : isDisabled;
         const readOnly = (_d = (_c = props2.readOnly) != null ? _c : props2.isReadOnly) != null ? _d : isReadOnly;
-        const checked = props2.value === value;
+        const checked = props2.value === selectedValue;
         const focused = index === focusedIndex;
         return {
           props: props2,
@@ -205,18 +172,21 @@ var SegmentedControl = (0, import_core.forwardRef)(
             _focus: {},
             _invalid: {},
             _focusVisible: {}
-          } : {},
-          style: { position: "relative", zIndex: 2 }
+          } : {}
         };
       },
-      [focusedIndex, isDisabled, isFocusVisible, isReadOnly, onFocus, value]
+      [
+        focusedIndex,
+        isDisabled,
+        isFocusVisible,
+        isReadOnly,
+        onFocus,
+        selectedValue
+      ]
     );
     (0, import_react.useEffect)(() => {
       return (0, import_use_focus_visible.trackFocusVisible)(setIsFocusVisible);
     }, []);
-    (0, import_react.useEffect)(() => {
-      setActivePosition(getActivePosition());
-    }, [focusedIndex, containerRect, value, getActivePosition]);
     const css = {
       position: "relative",
       display: "inline-flex",
@@ -230,38 +200,30 @@ var SegmentedControl = (0, import_core.forwardRef)(
     } else {
       computedChildren = validChildren;
     }
-    if (value == null && rest.defaultValue == null) {
+    if (selectedValue == null && defaultValue == null) {
       for (const child of computedChildren) {
-        if (child.type !== SegmentedControlButton)
-          continue;
+        if (child.type !== SegmentedControlButton) {
+          if (child.type.displayName !== SegmentedControlButton.displayName)
+            continue;
+        }
         const value2 = child.props.value;
-        setValue(value2);
+        setSelectedValue(value2);
         break;
       }
     }
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DescendantsContextProvider, { value: descendants, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       SegmentedControlProvider,
       {
-        value: { getInputProps, getLabelProps, styles },
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        value: { getInputProps, getLabelProps, styles, selectedValue },
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_motion.LayoutGroup, { id, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           import_core.ui.div,
           {
             ...getContainerProps({}, ref),
             className: (0, import_utils.cx)("ui-segmented-control", className),
             __css: css,
-            children: [
-              isMountedRef.current ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                import_core.ui.span,
-                {
-                  className: "ui-segmented-control__active",
-                  ...getActiveProps(),
-                  __css: styles.active
-                }
-              ) : null,
-              computedChildren
-            ]
+            children: computedChildren
           }
-        )
+        ) })
       }
     ) });
   }
@@ -276,9 +238,11 @@ var SegmentedControlButton = (0, import_core.forwardRef)(
     value,
     onChange,
     children,
+    motionProps,
     ...rest
   }, ref) => {
-    const { getInputProps, getLabelProps, styles } = useSegmentedControl();
+    const [, isMounted] = (0, import_utils.useIsMounted)({ rerender: true });
+    const { selectedValue, getInputProps, getLabelProps, styles } = useSegmentedControl();
     const { index, register } = useDescendant({
       disabled: isDisabled || isReadOnly
     });
@@ -292,6 +256,7 @@ var SegmentedControlButton = (0, import_core.forwardRef)(
       isReadOnly
     };
     const css = {
+      position: "relative",
       cursor: "pointer",
       flex: "1 1 0%",
       display: "inline-flex",
@@ -299,6 +264,7 @@ var SegmentedControlButton = (0, import_core.forwardRef)(
       alignItems: "center",
       ...styles.button
     };
+    const isSelected = selectedValue === value;
     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
       import_core.ui.label,
       {
@@ -308,12 +274,44 @@ var SegmentedControlButton = (0, import_core.forwardRef)(
         ...rest,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.ui.input, { ...getInputProps(props, (0, import_utils.mergeRefs)(register, ref)) }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.ui.span, { children })
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.ui.span, { children }),
+          isSelected && isMounted ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SegmentedControlCursor, { ...motionProps }) : null
         ]
       }
     );
   }
 );
+SegmentedControlButton.displayName = "SegmentedControlButton";
+var SegmentedControlCursor = ({
+  className,
+  transition,
+  ...rest
+}) => {
+  const { styles } = useSegmentedControl();
+  const css = {
+    position: "absolute",
+    zIndex: "-10",
+    w: "full",
+    h: "full",
+    ...styles.cursor
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_motion.Motion,
+    {
+      className: (0, import_utils.cx)("ui-segmented-control__cursor", className),
+      layoutDependency: false,
+      layoutId: "cursor",
+      transition: {
+        type: "spring",
+        bounce: 0.15,
+        duration: 0.4,
+        ...transition
+      },
+      __css: css,
+      ...rest
+    }
+  );
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   SegmentedControl,

package/dist/segmented-control.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/segmented-control.tsx"],"sourcesContent":["import type { CSSUIObject, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport {\n  ui,\n  forwardRef,\n  useMultiComponentStyle,\n  omitThemeProps,\n} from \"@yamada-ui/core\"\nimport { useControllableState } from \"@yamada-ui/use-controllable-state\"\nimport { createDescendant } from \"@yamada-ui/use-descendant\"\nimport { trackFocusVisible } from \"@yamada-ui/use-focus-visible\"\nimport { useResizeObserver } from \"@yamada-ui/use-resize-observer\"\nimport type { PropGetter, RequiredPropGetter } from \"@yamada-ui/utils\"\nimport {\n  ariaAttr,\n  createContext,\n  cx,\n  dataAttr,\n  getValidChildren,\n  handlerAll,\n  mergeRefs,\n  omitObject,\n  useCallbackRef,\n  useIsMounted,\n} from \"@yamada-ui/utils\"\nimport type { ChangeEvent, ChangeEventHandler, ReactElement } from \"react\"\nimport { useCallback, useEffect, useId, useRef, useState } from \"react\"\n\nexport type SegmentedControlItem = SegmentedControlButtonProps & {\n  label?: string\n}\n\nconst { DescendantsContextProvider, useDescendants, useDescendant } =\n  createDescendant<HTMLButtonElement>()\n\ntype SegmentedControlContext = {\n  getInputProps: RequiredPropGetter<{ index: number }>\n  getLabelProps: RequiredPropGetter<{ index: number }>\n  styles: Record<string, CSSUIObject>\n}\n\nconst [SegmentedControlProvider, useSegmentedControl] =\n  createContext<SegmentedControlContext>({\n    strict: false,\n    name: \"SegmentedControlContext\",\n  })\n\ntype SegmentedControlOptions = {\n  /**\n   * The HTML `name` attribute used for forms.\n   */\n  name?: string\n  /**\n   * The value of the segmented control.\n   */\n  value?: string\n  /**\n   * The initial value of the segmented control.\n   */\n  defaultValue?: string\n  /**\n   * The callback fired when any children radio is checked or unchecked.\n   */\n  onChange?: (value: string) => void\n  /**\n   * If `true`, the segmented control will be readonly.\n   *\n   * @default false\n   */\n  isReadOnly?: boolean\n  /**\n   * If `true`, the segmented control will be disabled.\n   *\n   * @default false\n   */\n  isDisabled?: boolean\n  /**\n   * If provided, generate segmented control buttons but based on items.\n   *\n   * @default '[]'\n   */\n  items?: SegmentedControlItem[]\n}\n\nexport type SegmentedControlProps = Omit<HTMLUIProps<\"div\">, \"onChange\"> &\n  ThemeProps<\"SegmentedControl\"> &\n  SegmentedControlOptions\n\nexport const SegmentedControl = forwardRef<SegmentedControlProps, \"div\">(\n  (props, ref) => {\n    const [styles, mergedProps] = useMultiComponentStyle(\n      \"SegmentedControl\",\n      props,\n    )\n    let {\n      className,\n      id,\n      name,\n      isReadOnly,\n      isDisabled,\n      children,\n      items = [],\n      ...rest\n    } = omitThemeProps(mergedProps)\n    const isMountedRef = useIsMounted()\n\n    id ??= useId()\n    name ??= `segmented-control-${useId()}`\n\n    rest.onChange = useCallbackRef(rest.onChange)\n\n    const descendants = useDescendants()\n\n    const [focusedIndex, setFocusedIndex] = useState<number>(-1)\n    const [isFocusVisible, setIsFocusVisible] = useState<boolean>(false)\n    const [observerRef, containerRect] = useResizeObserver()\n    const containerRef = useRef<HTMLDivElement>(null)\n    const labelRefs = useRef<Map<string | number, HTMLLabelElement>>(new Map())\n\n    const [value, setValue] = useControllableState({\n      value: rest.value,\n      defaultValue: rest.defaultValue,\n      onChange: rest.onChange,\n    })\n\n    const getActivePosition = useCallback(() => {\n      const rect = { width: 0, height: 0, x: 0, y: 0 }\n\n      const el = labelRefs.current.get(value)\n\n      if (!el || !containerRef.current || !observerRef.current) return rect\n\n      const { paddingLeft, paddingTop } = getComputedStyle(containerRef.current)\n\n      const gutterX = parseFloat(paddingLeft) || 0\n      const gutterY = parseFloat(paddingTop) || 0\n\n      let { width, height } = el.getBoundingClientRect()\n      rect.x = el.offsetLeft - gutterX\n      rect.y = el.offsetTop - gutterY\n\n      rect.width = width * (el.offsetWidth / width) || 0\n      rect.height = height * (el.offsetWidth / width) || 0\n\n      return rect\n    }, [observerRef, value])\n\n    const [activePosition, setActivePosition] = useState(getActivePosition)\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        ...omitObject(rest, [\"value\", \"defaultValue\", \"onChange\"]),\n        ...props,\n        ref: mergeRefs(containerRef, observerRef, ref),\n        id,\n        \"aria-disabled\": ariaAttr(isDisabled),\n        \"aria-readonly\": ariaAttr(isReadOnly),\n        onBlur: handlerAll(props.onBlur, onBlur),\n      }),\n      [id, isDisabled, isReadOnly, observerRef, onBlur, rest],\n    )\n\n    const getActiveProps: PropGetter = useCallback(\n      (props = {}, ref = null) => {\n        const { width, height, x, y } = activePosition\n\n        return {\n          ...props,\n          ref,\n          style: {\n            position: \"absolute\",\n            zIndex: 1,\n            width,\n            height,\n            transform: `translate(${x}px, ${y}px)`,\n          },\n        }\n      },\n      [activePosition],\n    )\n\n    const getInputProps: RequiredPropGetter<{ index: number }> = useCallback(\n      ({ index, ...props } = {}, ref = null) => {\n        const disabled = props.disabled ?? props.isDisabled ?? isDisabled\n        const readOnly = props.readOnly ?? props.isReadOnly ?? isReadOnly\n        const checked = props.value === value\n\n        return {\n          ...omitObject(props, [\"isDisabled\", \"isReadOnly\"]),\n          ref,\n          id: `${id}-${index}`,\n          type: \"radio\",\n          name,\n          disabled: disabled || readOnly,\n          readOnly,\n          checked,\n          \"aria-disabled\": ariaAttr(disabled),\n          \"aria-readonly\": ariaAttr(readOnly),\n          \"data-checked\": dataAttr(checked),\n          \"data-focus\": dataAttr(index === focusedIndex),\n          style: {\n            border: \"0px\",\n            clip: \"rect(0px, 0px, 0px, 0px)\",\n            height: \"1px\",\n            width: \"1px\",\n            margin: \"-1px\",\n            padding: \"0px\",\n            overflow: \"hidden\",\n            whiteSpace: \"nowrap\",\n            position: \"absolute\",\n          },\n          onChange: handlerAll(props.onChange, (ev) =>\n            !disabled && !readOnly\n              ? onChange(ev as ChangeEvent<HTMLInputElement>)\n              : {},\n          ),\n        }\n      },\n      [isDisabled, isReadOnly, value, id, name, focusedIndex, onChange],\n    )\n\n    const getLabelProps: RequiredPropGetter<{ index: number }> = useCallback(\n      ({ index, ...props } = {}, ref = null) => {\n        const disabled = props.disabled ?? props.isDisabled ?? isDisabled\n        const readOnly = props.readOnly ?? props.isReadOnly ?? isReadOnly\n        const checked = props.value === value\n        const focused = index === focusedIndex\n\n        return {\n          props,\n          ref: mergeRefs(\n            (node) => labelRefs.current.set(props.value, node),\n            ref,\n          ),\n          \"aria-disabled\": ariaAttr(disabled),\n          \"aria-readonly\": ariaAttr(readOnly),\n          \"data-checked\": dataAttr(checked),\n          \"data-focus\": dataAttr(focused),\n          \"data-focus-visible\": dataAttr(focused && isFocusVisible),\n          onFocus: handlerAll(props.onFocus, () =>\n            onFocus(index, disabled || readOnly),\n          ),\n          ...(disabled || readOnly\n            ? {\n                _hover: {},\n                _active: {},\n                _focus: {},\n                _invalid: {},\n                _focusVisible: {},\n              }\n            : {}),\n          style: { position: \"relative\", zIndex: 2 },\n        }\n      },\n      [focusedIndex, isDisabled, isFocusVisible, isReadOnly, onFocus, value],\n    )\n\n    useEffect(() => {\n      return trackFocusVisible(setIsFocusVisible)\n    }, [])\n\n    useEffect(() => {\n      setActivePosition(getActivePosition())\n    }, [focusedIndex, containerRect, value, getActivePosition])\n\n    const css: CSSUIObject = {\n      position: \"relative\",\n      display: \"inline-flex\",\n      alignItems: \"center\",\n      ...styles.container,\n    }\n\n    const validChildren = getValidChildren(children)\n    let computedChildren: ReactElement[] = []\n\n    if (!validChildren.length && items.length) {\n      computedChildren = items.map(({ label, value, ...props }, i) => (\n        <SegmentedControlButton key={i} value={value} {...props}>\n          {label}\n        </SegmentedControlButton>\n      ))\n    } else {\n      computedChildren = validChildren\n    }\n\n    if (value == null && rest.defaultValue == null) {\n      for (const child of computedChildren) {\n        if (child.type !== SegmentedControlButton) 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={{ getInputProps, getLabelProps, styles }}\n        >\n          <ui.div\n            {...getContainerProps({}, ref)}\n            className={cx(\"ui-segmented-control\", className)}\n            __css={css}\n          >\n            {isMountedRef.current ? (\n              <ui.span\n                className=\"ui-segmented-control__active\"\n                {...getActiveProps()}\n                __css={styles.active}\n              />\n            ) : null}\n\n            {computedChildren}\n          </ui.div>\n        </SegmentedControlProvider>\n      </DescendantsContextProvider>\n    )\n  },\n)\n\ntype SegmentedControlButtonOptions = {\n  /**\n   * The value of the segmented control button.\n   */\n  value: string | number\n  /**\n   * The callback fired when any children radio is checked or unchecked.\n   */\n  onChange?: ChangeEventHandler<HTMLInputElement>\n}\n\nexport type SegmentedControlButtonProps = Omit<\n  HTMLUIProps<\"label\">,\n  \"onChange\"\n> &\n  Pick<SegmentedControlProps, \"isDisabled\" | \"isReadOnly\"> &\n  SegmentedControlButtonOptions\n\nexport const SegmentedControlButton = forwardRef<\n  SegmentedControlButtonProps,\n  \"input\"\n>(\n  (\n    {\n      className,\n      disabled,\n      readOnly,\n      isDisabled,\n      isReadOnly,\n      value,\n      onChange,\n      children,\n      ...rest\n    },\n    ref,\n  ) => {\n    const { getInputProps, getLabelProps, styles } = useSegmentedControl()\n\n    const { index, register } = useDescendant({\n      disabled: isDisabled || isReadOnly,\n    })\n\n    const props = {\n      index,\n      value,\n      onChange,\n      disabled,\n      readOnly,\n      isDisabled,\n      isReadOnly,\n    }\n\n    const css: CSSUIObject = {\n      cursor: \"pointer\",\n      flex: \"1 1 0%\",\n      display: \"inline-flex\",\n      justifyContent: \"center\",\n      alignItems: \"center\",\n      ...styles.button,\n    }\n\n    return (\n      <ui.label\n        {...getLabelProps(omitObject(props, [\"onChange\"]))}\n        className={cx(\"ui-segmented-control__button\", className)}\n        __css={css}\n        {...rest}\n      >\n        <ui.input {...getInputProps(props, mergeRefs(register, ref))} />\n        <ui.span>{children}</ui.span>\n      </ui.label>\n    )\n  },\n)\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,kBAKO;AACP,oCAAqC;AACrC,4BAAiC;AACjC,+BAAkC;AAClC,iCAAkC;AAElC,mBAWO;AAEP,mBAAgE;AAyRxD;AAnRR,IAAM,EAAE,4BAA4B,gBAAgB,cAAc,QAChE,wCAAoC;AAQtC,IAAM,CAAC,0BAA0B,mBAAmB,QAClD,4BAAuC;AAAA,EACrC,QAAQ;AAAA,EACR,MAAM;AACR,CAAC;AA2CI,IAAM,uBAAmB;AAAA,EAC9B,CAAC,OAAO,QAAQ;AACd,UAAM,CAAC,QAAQ,WAAW,QAAI;AAAA,MAC5B;AAAA,MACA;AAAA,IACF;AACA,QAAI;AAAA,MACF;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,QAAQ,CAAC;AAAA,MACT,GAAG;AAAA,IACL,QAAI,4BAAe,WAAW;AAC9B,UAAM,mBAAe,2BAAa;AAElC,+BAAO,oBAAM;AACb,iCAAS,yBAAqB,oBAAM,CAAC;AAErC,SAAK,eAAW,6BAAe,KAAK,QAAQ;AAE5C,UAAM,cAAc,eAAe;AAEnC,UAAM,CAAC,cAAc,eAAe,QAAI,uBAAiB,EAAE;AAC3D,UAAM,CAAC,gBAAgB,iBAAiB,QAAI,uBAAkB,KAAK;AACnE,UAAM,CAAC,aAAa,aAAa,QAAI,8CAAkB;AACvD,UAAM,mBAAe,qBAAuB,IAAI;AAChD,UAAM,gBAAY,qBAA+C,oBAAI,IAAI,CAAC;AAE1E,UAAM,CAAC,OAAO,QAAQ,QAAI,oDAAqB;AAAA,MAC7C,OAAO,KAAK;AAAA,MACZ,cAAc,KAAK;AAAA,MACnB,UAAU,KAAK;AAAA,IACjB,CAAC;AAED,UAAM,wBAAoB,0BAAY,MAAM;AAC1C,YAAM,OAAO,EAAE,OAAO,GAAG,QAAQ,GAAG,GAAG,GAAG,GAAG,EAAE;AAE/C,YAAM,KAAK,UAAU,QAAQ,IAAI,KAAK;AAEtC,UAAI,CAAC,MAAM,CAAC,aAAa,WAAW,CAAC,YAAY;AAAS,eAAO;AAEjE,YAAM,EAAE,aAAa,WAAW,IAAI,iBAAiB,aAAa,OAAO;AAEzE,YAAM,UAAU,WAAW,WAAW,KAAK;AAC3C,YAAM,UAAU,WAAW,UAAU,KAAK;AAE1C,UAAI,EAAE,OAAO,OAAO,IAAI,GAAG,sBAAsB;AACjD,WAAK,IAAI,GAAG,aAAa;AACzB,WAAK,IAAI,GAAG,YAAY;AAExB,WAAK,QAAQ,SAAS,GAAG,cAAc,UAAU;AACjD,WAAK,SAAS,UAAU,GAAG,cAAc,UAAU;AAEnD,aAAO;AAAA,IACT,GAAG,CAAC,aAAa,KAAK,CAAC;AAEvB,UAAM,CAAC,gBAAgB,iBAAiB,QAAI,uBAAS,iBAAiB;AAEtE,UAAM,eAAW;AAAA,MACf,CAAC,OAAsC;AACrC,YAAI,cAAc,YAAY;AAC5B,aAAG,eAAe;AAElB;AAAA,QACF;AAEA,iBAAS,GAAG,OAAO,KAAK;AAAA,MAC1B;AAAA,MACA,CAAC,YAAY,YAAY,QAAQ;AAAA,IACnC;AAEA,UAAM,cAAU;AAAA,MACd,CAAC,OAAe,SAAkB;AAChC,YAAI;AAAY;AAEhB,YAAI,MAAM;AACR,gBAAM,OAAO,YAAY,iBAAiB,KAAK;AAE/C,cAAI;AAAM,4BAAgB,KAAK,KAAK;AAAA,QACtC,OAAO;AACL,0BAAgB,KAAK;AAAA,QACvB;AAAA,MACF;AAAA,MACA,CAAC,aAAa,UAAU;AAAA,IAC1B;AAEA,UAAM,aAAS,0BAAY,MAAM,gBAAgB,EAAE,GAAG,CAAC,CAAC;AAExD,UAAM,wBAAgC;AAAA,MACpC,CAACA,SAAQ,CAAC,GAAGC,OAAM,UAAU;AAAA,QAC3B,OAAG,yBAAW,MAAM,CAAC,SAAS,gBAAgB,UAAU,CAAC;AAAA,QACzD,GAAGD;AAAA,QACH,SAAK,wBAAU,cAAc,aAAaC,IAAG;AAAA,QAC7C;AAAA,QACA,qBAAiB,uBAAS,UAAU;AAAA,QACpC,qBAAiB,uBAAS,UAAU;AAAA,QACpC,YAAQ,yBAAWD,OAAM,QAAQ,MAAM;AAAA,MACzC;AAAA,MACA,CAAC,IAAI,YAAY,YAAY,aAAa,QAAQ,IAAI;AAAA,IACxD;AAEA,UAAM,qBAA6B;AAAA,MACjC,CAACA,SAAQ,CAAC,GAAGC,OAAM,SAAS;AAC1B,cAAM,EAAE,OAAO,QAAQ,GAAG,EAAE,IAAI;AAEhC,eAAO;AAAA,UACL,GAAGD;AAAA,UACH,KAAAC;AAAA,UACA,OAAO;AAAA,YACL,UAAU;AAAA,YACV,QAAQ;AAAA,YACR;AAAA,YACA;AAAA,YACA,WAAW,aAAa,CAAC,OAAO,CAAC;AAAA,UACnC;AAAA,QACF;AAAA,MACF;AAAA,MACA,CAAC,cAAc;AAAA,IACjB;AAEA,UAAM,oBAAuD;AAAA,MAC3D,CAAC,EAAE,OAAO,GAAGD,OAAM,IAAI,CAAC,GAAGC,OAAM,SAAS;AAnNhD;AAoNQ,cAAM,YAAW,WAAAD,OAAM,aAAN,YAAkBA,OAAM,eAAxB,YAAsC;AACvD,cAAM,YAAW,WAAAA,OAAM,aAAN,YAAkBA,OAAM,eAAxB,YAAsC;AACvD,cAAM,UAAUA,OAAM,UAAU;AAEhC,eAAO;AAAA,UACL,OAAG,yBAAWA,QAAO,CAAC,cAAc,YAAY,CAAC;AAAA,UACjD,KAAAC;AAAA,UACA,IAAI,GAAG,EAAE,IAAI,KAAK;AAAA,UAClB,MAAM;AAAA,UACN;AAAA,UACA,UAAU,YAAY;AAAA,UACtB;AAAA,UACA;AAAA,UACA,qBAAiB,uBAAS,QAAQ;AAAA,UAClC,qBAAiB,uBAAS,QAAQ;AAAA,UAClC,oBAAgB,uBAAS,OAAO;AAAA,UAChC,kBAAc,uBAAS,UAAU,YAAY;AAAA,UAC7C,OAAO;AAAA,YACL,QAAQ;AAAA,YACR,MAAM;AAAA,YACN,QAAQ;AAAA,YACR,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,SAAS;AAAA,YACT,UAAU;AAAA,YACV,YAAY;AAAA,YACZ,UAAU;AAAA,UACZ;AAAA,UACA,cAAU;AAAA,YAAWD,OAAM;AAAA,YAAU,CAAC,OACpC,CAAC,YAAY,CAAC,WACV,SAAS,EAAmC,IAC5C,CAAC;AAAA,UACP;AAAA,QACF;AAAA,MACF;AAAA,MACA,CAAC,YAAY,YAAY,OAAO,IAAI,MAAM,cAAc,QAAQ;AAAA,IAClE;AAEA,UAAM,oBAAuD;AAAA,MAC3D,CAAC,EAAE,OAAO,GAAGA,OAAM,IAAI,CAAC,GAAGC,OAAM,SAAS;AA3PhD;AA4PQ,cAAM,YAAW,WAAAD,OAAM,aAAN,YAAkBA,OAAM,eAAxB,YAAsC;AACvD,cAAM,YAAW,WAAAA,OAAM,aAAN,YAAkBA,OAAM,eAAxB,YAAsC;AACvD,cAAM,UAAUA,OAAM,UAAU;AAChC,cAAM,UAAU,UAAU;AAE1B,eAAO;AAAA,UACL,OAAAA;AAAA,UACA,SAAK;AAAA,YACH,CAAC,SAAS,UAAU,QAAQ,IAAIA,OAAM,OAAO,IAAI;AAAA,YACjDC;AAAA,UACF;AAAA,UACA,qBAAiB,uBAAS,QAAQ;AAAA,UAClC,qBAAiB,uBAAS,QAAQ;AAAA,UAClC,oBAAgB,uBAAS,OAAO;AAAA,UAChC,kBAAc,uBAAS,OAAO;AAAA,UAC9B,0BAAsB,uBAAS,WAAW,cAAc;AAAA,UACxD,aAAS;AAAA,YAAWD,OAAM;AAAA,YAAS,MACjC,QAAQ,OAAO,YAAY,QAAQ;AAAA,UACrC;AAAA,UACA,GAAI,YAAY,WACZ;AAAA,YACE,QAAQ,CAAC;AAAA,YACT,SAAS,CAAC;AAAA,YACV,QAAQ,CAAC;AAAA,YACT,UAAU,CAAC;AAAA,YACX,eAAe,CAAC;AAAA,UAClB,IACA,CAAC;AAAA,UACL,OAAO,EAAE,UAAU,YAAY,QAAQ,EAAE;AAAA,QAC3C;AAAA,MACF;AAAA,MACA,CAAC,cAAc,YAAY,gBAAgB,YAAY,SAAS,KAAK;AAAA,IACvE;AAEA,gCAAU,MAAM;AACd,iBAAO,4CAAkB,iBAAiB;AAAA,IAC5C,GAAG,CAAC,CAAC;AAEL,gCAAU,MAAM;AACd,wBAAkB,kBAAkB,CAAC;AAAA,IACvC,GAAG,CAAC,cAAc,eAAe,OAAO,iBAAiB,CAAC;AAE1D,UAAM,MAAmB;AAAA,MACvB,UAAU;AAAA,MACV,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,GAAG,OAAO;AAAA,IACZ;AAEA,UAAM,oBAAgB,+BAAiB,QAAQ;AAC/C,QAAI,mBAAmC,CAAC;AAExC,QAAI,CAAC,cAAc,UAAU,MAAM,QAAQ;AACzC,yBAAmB,MAAM,IAAI,CAAC,EAAE,OAAO,OAAAE,QAAO,GAAGF,OAAM,GAAG,MACxD,4CAAC,0BAA+B,OAAOE,QAAQ,GAAGF,QAC/C,mBAD0B,CAE7B,CACD;AAAA,IACH,OAAO;AACL,yBAAmB;AAAA,IACrB;AAEA,QAAI,SAAS,QAAQ,KAAK,gBAAgB,MAAM;AAC9C,iBAAW,SAAS,kBAAkB;AACpC,YAAI,MAAM,SAAS;AAAwB;AAE3C,cAAME,SAAQ,MAAM,MAAM;AAE1B,iBAASA,MAAK;AAEd;AAAA,MACF;AAAA,IACF;AAEA,WACE,4CAAC,8BAA2B,OAAO,aACjC;AAAA,MAAC;AAAA;AAAA,QACC,OAAO,EAAE,eAAe,eAAe,OAAO;AAAA,QAE9C;AAAA,UAAC,eAAG;AAAA,UAAH;AAAA,YACE,GAAG,kBAAkB,CAAC,GAAG,GAAG;AAAA,YAC7B,eAAW,iBAAG,wBAAwB,SAAS;AAAA,YAC/C,OAAO;AAAA,YAEN;AAAA,2BAAa,UACZ;AAAA,gBAAC,eAAG;AAAA,gBAAH;AAAA,kBACC,WAAU;AAAA,kBACT,GAAG,eAAe;AAAA,kBACnB,OAAO,OAAO;AAAA;AAAA,cAChB,IACE;AAAA,cAEH;AAAA;AAAA;AAAA,QACH;AAAA;AAAA,IACF,GACF;AAAA,EAEJ;AACF;AAoBO,IAAM,6BAAyB;AAAA,EAIpC,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,EAAE,eAAe,eAAe,OAAO,IAAI,oBAAoB;AAErE,UAAM,EAAE,OAAO,SAAS,IAAI,cAAc;AAAA,MACxC,UAAU,cAAc;AAAA,IAC1B,CAAC;AAED,UAAM,QAAQ;AAAA,MACZ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAEA,UAAM,MAAmB;AAAA,MACvB,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB,YAAY;AAAA,MACZ,GAAG,OAAO;AAAA,IACZ;AAEA,WACE;AAAA,MAAC,eAAG;AAAA,MAAH;AAAA,QACE,GAAG,kBAAc,yBAAW,OAAO,CAAC,UAAU,CAAC,CAAC;AAAA,QACjD,eAAW,iBAAG,gCAAgC,SAAS;AAAA,QACvD,OAAO;AAAA,QACN,GAAG;AAAA,QAEJ;AAAA,sDAAC,eAAG,OAAH,EAAU,GAAG,cAAc,WAAO,wBAAU,UAAU,GAAG,CAAC,GAAG;AAAA,UAC9D,4CAAC,eAAG,MAAH,EAAS,UAAS;AAAA;AAAA;AAAA,IACrB;AAAA,EAEJ;AACF;","names":["props","ref","value"]}
+{"version":3,"sources":["../src/segmented-control.tsx"],"sourcesContent":["import type { CSSUIObject, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport {\n  ui,\n  forwardRef,\n  useMultiComponentStyle,\n  omitThemeProps,\n} from \"@yamada-ui/core\"\nimport type { MotionProps } from \"@yamada-ui/motion\"\nimport { LayoutGroup, Motion } from \"@yamada-ui/motion\"\nimport { useControllableState } from \"@yamada-ui/use-controllable-state\"\nimport { createDescendant } from \"@yamada-ui/use-descendant\"\nimport { trackFocusVisible } from \"@yamada-ui/use-focus-visible\"\nimport type { PropGetter, RequiredPropGetter } from \"@yamada-ui/utils\"\nimport {\n  ariaAttr,\n  createContext,\n  cx,\n  dataAttr,\n  getValidChildren,\n  handlerAll,\n  mergeRefs,\n  omitObject,\n  useCallbackRef,\n  useIsMounted,\n} from \"@yamada-ui/utils\"\nimport type { ChangeEvent, ChangeEventHandler, FC, ReactElement } from \"react\"\nimport { useCallback, useEffect, useId, useRef, useState } from \"react\"\n\nexport type SegmentedControlItem = SegmentedControlButtonProps & {\n  label?: string\n}\n\nconst { DescendantsContextProvider, useDescendants, useDescendant } =\n  createDescendant<HTMLButtonElement>()\n\ntype SegmentedControlContext = {\n  selectedValue: string\n  getInputProps: RequiredPropGetter<{ index: number }>\n  getLabelProps: RequiredPropGetter<{ index: number }>\n  styles: Record<string, CSSUIObject>\n}\n\nconst [SegmentedControlProvider, useSegmentedControl] =\n  createContext<SegmentedControlContext>({\n    strict: false,\n    name: \"SegmentedControlContext\",\n  })\n\ntype SegmentedControlOptions = {\n  /**\n   * The HTML `name` attribute used for forms.\n   */\n  name?: string\n  /**\n   * The value of the segmented control.\n   */\n  value?: string\n  /**\n   * The initial value of the segmented control.\n   */\n  defaultValue?: string\n  /**\n   * The callback fired when any children radio is checked or unchecked.\n   */\n  onChange?: (value: string) => void\n  /**\n   * If `true`, the segmented control will be readonly.\n   *\n   * @default false\n   */\n  isReadOnly?: boolean\n  /**\n   * If `true`, the segmented control will be disabled.\n   *\n   * @default false\n   */\n  isDisabled?: boolean\n  /**\n   * If provided, generate segmented control buttons but based on items.\n   *\n   * @default '[]'\n   */\n  items?: SegmentedControlItem[]\n}\n\nexport type SegmentedControlProps = Omit<\n  HTMLUIProps<\"div\">,\n  \"value\" | \"defaultValue\" | \"onChange\"\n> &\n  ThemeProps<\"SegmentedControl\"> &\n  SegmentedControlOptions\n\nexport const SegmentedControl = forwardRef<SegmentedControlProps, \"div\">(\n  (props, ref) => {\n    const [styles, mergedProps] = useMultiComponentStyle(\n      \"SegmentedControl\",\n      props,\n    )\n    let {\n      className,\n      id,\n      name,\n      isReadOnly,\n      isDisabled,\n      children,\n      items = [],\n      value,\n      defaultValue,\n      ...rest\n    } = omitThemeProps(mergedProps)\n\n    id ??= useId()\n    name ??= `segmented-control-${useId()}`\n\n    rest.onChange = useCallbackRef(rest.onChange)\n\n    const descendants = useDescendants()\n\n    const [focusedIndex, setFocusedIndex] = useState<number>(-1)\n    const [isFocusVisible, setIsFocusVisible] = useState<boolean>(false)\n    const containerRef = useRef<HTMLDivElement>(null)\n    const labelRefs = useRef<Map<string | number, HTMLLabelElement>>(new Map())\n\n    const [selectedValue, setSelectedValue] = useControllableState({\n      value,\n      defaultValue,\n      onChange: rest.onChange,\n    })\n\n    const onChange = useCallback(\n      (ev: ChangeEvent<HTMLInputElement>) => {\n        if (isDisabled || isReadOnly) {\n          ev.preventDefault()\n\n          return\n        }\n\n        setSelectedValue(ev.target.value)\n      },\n      [isDisabled, isReadOnly, setSelectedValue],\n    )\n\n    const onFocus = useCallback(\n      (index: number, skip: boolean) => {\n        if (isDisabled) return\n\n        if (skip) {\n          const next = descendants.enabledNextValue(index)\n\n          if (next) setFocusedIndex(next.index)\n        } else {\n          setFocusedIndex(index)\n        }\n      },\n      [descendants, isDisabled],\n    )\n\n    const onBlur = useCallback(() => setFocusedIndex(-1), [])\n\n    const getContainerProps: PropGetter = useCallback(\n      (props = {}, ref = null) => ({\n        ...omitObject(rest, [\"onChange\"]),\n        ...props,\n        ref: mergeRefs(containerRef, ref),\n        id,\n        \"aria-disabled\": ariaAttr(isDisabled),\n        \"aria-readonly\": ariaAttr(isReadOnly),\n        onBlur: handlerAll(props.onBlur, onBlur),\n      }),\n      [id, isDisabled, isReadOnly, onBlur, rest],\n    )\n\n    const getInputProps: RequiredPropGetter<{ index: number }> = useCallback(\n      ({ index, ...props } = {}, ref = null) => {\n        const disabled = props.disabled ?? props.isDisabled ?? isDisabled\n        const readOnly = props.readOnly ?? props.isReadOnly ?? isReadOnly\n        const checked = props.value === selectedValue\n\n        return {\n          ...omitObject(props, [\"isDisabled\", \"isReadOnly\"]),\n          ref,\n          id: `${id}-${index}`,\n          type: \"radio\",\n          name,\n          disabled: disabled || readOnly,\n          readOnly,\n          checked,\n          \"aria-disabled\": ariaAttr(disabled),\n          \"aria-readonly\": ariaAttr(readOnly),\n          \"data-checked\": dataAttr(checked),\n          \"data-focus\": dataAttr(index === focusedIndex),\n          style: {\n            border: \"0px\",\n            clip: \"rect(0px, 0px, 0px, 0px)\",\n            height: \"1px\",\n            width: \"1px\",\n            margin: \"-1px\",\n            padding: \"0px\",\n            overflow: \"hidden\",\n            whiteSpace: \"nowrap\",\n            position: \"absolute\",\n          },\n          onChange: handlerAll(props.onChange, (ev) =>\n            !disabled && !readOnly\n              ? onChange(ev as ChangeEvent<HTMLInputElement>)\n              : {},\n          ),\n        }\n      },\n      [isDisabled, isReadOnly, selectedValue, id, name, focusedIndex, onChange],\n    )\n\n    const getLabelProps: RequiredPropGetter<{ index: number }> = useCallback(\n      ({ index, ...props } = {}, ref = null) => {\n        const disabled = props.disabled ?? props.isDisabled ?? isDisabled\n        const readOnly = props.readOnly ?? props.isReadOnly ?? isReadOnly\n        const checked = props.value === selectedValue\n        const focused = index === focusedIndex\n\n        return {\n          props,\n          ref: mergeRefs(\n            (node) => labelRefs.current.set(props.value, node),\n            ref,\n          ),\n          \"aria-disabled\": ariaAttr(disabled),\n          \"aria-readonly\": ariaAttr(readOnly),\n          \"data-checked\": dataAttr(checked),\n          \"data-focus\": dataAttr(focused),\n          \"data-focus-visible\": dataAttr(focused && isFocusVisible),\n          onFocus: handlerAll(props.onFocus, () =>\n            onFocus(index, disabled || readOnly),\n          ),\n          ...(disabled || readOnly\n            ? {\n                _hover: {},\n                _active: {},\n                _focus: {},\n                _invalid: {},\n                _focusVisible: {},\n              }\n            : {}),\n        }\n      },\n      [\n        focusedIndex,\n        isDisabled,\n        isFocusVisible,\n        isReadOnly,\n        onFocus,\n        selectedValue,\n      ],\n    )\n\n    useEffect(() => {\n      return trackFocusVisible(setIsFocusVisible)\n    }, [])\n\n    const css: CSSUIObject = {\n      position: \"relative\",\n      display: \"inline-flex\",\n      alignItems: \"center\",\n      ...styles.container,\n    }\n\n    const validChildren = getValidChildren(children)\n    let computedChildren: ReactElement[] = []\n\n    if (!validChildren.length && items.length) {\n      computedChildren = items.map(({ label, value, ...props }, i) => (\n        <SegmentedControlButton key={i} value={value} {...props}>\n          {label}\n        </SegmentedControlButton>\n      ))\n    } else {\n      computedChildren = validChildren\n    }\n\n    if (selectedValue == null && defaultValue == null) {\n      for (const child of computedChildren) {\n        if (child.type !== SegmentedControlButton)\n          if (\n            (child.type as any).displayName !==\n            SegmentedControlButton.displayName\n          )\n            continue\n\n        const value = child.props.value\n\n        setSelectedValue(value)\n\n        break\n      }\n    }\n\n    return (\n      <DescendantsContextProvider value={descendants}>\n        <SegmentedControlProvider\n          value={{ getInputProps, getLabelProps, styles, selectedValue }}\n        >\n          <LayoutGroup id={id}>\n            <ui.div\n              {...getContainerProps({}, ref)}\n              className={cx(\"ui-segmented-control\", className)}\n              __css={css}\n            >\n              {computedChildren}\n            </ui.div>\n          </LayoutGroup>\n        </SegmentedControlProvider>\n      </DescendantsContextProvider>\n    )\n  },\n)\n\ntype SegmentedControlButtonOptions = {\n  /**\n   * The value of the segmented control button.\n   */\n  value: string | number\n  /**\n   * The callback fired when any children radio is checked or unchecked.\n   */\n  onChange?: ChangeEventHandler<HTMLInputElement>\n  /**\n   * Props for motion component.\n   */\n  motionProps?: MotionProps\n}\n\nexport type SegmentedControlButtonProps = Omit<\n  HTMLUIProps<\"label\">,\n  \"onChange\"\n> &\n  Pick<SegmentedControlProps, \"isDisabled\" | \"isReadOnly\"> &\n  SegmentedControlButtonOptions\n\nexport const SegmentedControlButton = forwardRef<\n  SegmentedControlButtonProps,\n  \"input\"\n>(\n  (\n    {\n      className,\n      disabled,\n      readOnly,\n      isDisabled,\n      isReadOnly,\n      value,\n      onChange,\n      children,\n      motionProps,\n      ...rest\n    },\n    ref,\n  ) => {\n    const [, isMounted] = useIsMounted({ rerender: true })\n    const { selectedValue, getInputProps, getLabelProps, styles } =\n      useSegmentedControl()\n\n    const { index, register } = useDescendant({\n      disabled: isDisabled || isReadOnly,\n    })\n\n    const props = {\n      index,\n      value,\n      onChange,\n      disabled,\n      readOnly,\n      isDisabled,\n      isReadOnly,\n    }\n\n    const css: CSSUIObject = {\n      position: \"relative\",\n      cursor: \"pointer\",\n      flex: \"1 1 0%\",\n      display: \"inline-flex\",\n      justifyContent: \"center\",\n      alignItems: \"center\",\n      ...styles.button,\n    }\n\n    const isSelected = selectedValue === value\n\n    return (\n      <ui.label\n        {...getLabelProps(omitObject(props, [\"onChange\"]))}\n        className={cx(\"ui-segmented-control__button\", className)}\n        __css={css}\n        {...rest}\n      >\n        <ui.input {...getInputProps(props, mergeRefs(register, ref))} />\n        <ui.span>{children}</ui.span>\n        {isSelected && isMounted ? (\n          <SegmentedControlCursor {...motionProps} />\n        ) : null}\n      </ui.label>\n    )\n  },\n)\n\nSegmentedControlButton.displayName = \"SegmentedControlButton\"\n\ntype SegmentedControlCursorProps = MotionProps & { className?: string }\n\nconst SegmentedControlCursor: FC<SegmentedControlCursorProps> = ({\n  className,\n  transition,\n  ...rest\n}) => {\n  const { styles } = useSegmentedControl()\n\n  const css: CSSUIObject = {\n    position: \"absolute\",\n    zIndex: \"-10\",\n    w: \"full\",\n    h: \"full\",\n    ...styles.cursor,\n  }\n\n  return (\n    <Motion\n      className={cx(\"ui-segmented-control__cursor\", className)}\n      layoutDependency={false}\n      layoutId=\"cursor\"\n      transition={{\n        type: \"spring\",\n        bounce: 0.15,\n        duration: 0.4,\n        ...transition,\n      }}\n      __css={css}\n      {...rest}\n    />\n  )\n}\n"],"mappings":"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","names":["props","ref","value"]}

package/dist/segmented-control.mjs

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yamada-ui/segmented-control",
-  "version": "0.4.13",
+  "version": "0.4.15",
   "description": "Yamada UI segmented control components",
   "keywords": [
     "yamada",
@@ -35,12 +35,12 @@
     "url": "https://github.com/hirotomoyamada/yamada-ui/issues"
   },
   "dependencies": {
-    "@yamada-ui/core": "0.15.1",
-    "@yamada-ui/utils": "0.5.0",
-    "@yamada-ui/use-focus-visible": "0.2.8",
-    "@yamada-ui/use-descendant": "0.2.10",
-    "@yamada-ui/use-resize-observer": "0.2.8",
-    "@yamada-ui/use-controllable-state": "0.4.3"
+    "@yamada-ui/core": "0.15.3",
+    "@yamada-ui/utils": "0.5.1",
+    "@yamada-ui/motion": "0.4.28",
+    "@yamada-ui/use-focus-visible": "0.2.9",
+    "@yamada-ui/use-descendant": "0.2.11",
+    "@yamada-ui/use-controllable-state": "0.4.4"
   },
   "devDependencies": {
     "react": "^18.0.0",

package/dist/chunk-LCPXOL6W.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/segmented-control.tsx"],"sourcesContent":["import type { CSSUIObject, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport {\n  ui,\n  forwardRef,\n  useMultiComponentStyle,\n  omitThemeProps,\n} from \"@yamada-ui/core\"\nimport { useControllableState } from \"@yamada-ui/use-controllable-state\"\nimport { createDescendant } from \"@yamada-ui/use-descendant\"\nimport { trackFocusVisible } from \"@yamada-ui/use-focus-visible\"\nimport { useResizeObserver } from \"@yamada-ui/use-resize-observer\"\nimport type { PropGetter, RequiredPropGetter } from \"@yamada-ui/utils\"\nimport {\n  ariaAttr,\n  createContext,\n  cx,\n  dataAttr,\n  getValidChildren,\n  handlerAll,\n  mergeRefs,\n  omitObject,\n  useCallbackRef,\n  useIsMounted,\n} from \"@yamada-ui/utils\"\nimport type { ChangeEvent, ChangeEventHandler, ReactElement } from \"react\"\nimport { useCallback, useEffect, useId, useRef, useState } from \"react\"\n\nexport type SegmentedControlItem = SegmentedControlButtonProps & {\n  label?: string\n}\n\nconst { DescendantsContextProvider, useDescendants, useDescendant } =\n  createDescendant<HTMLButtonElement>()\n\ntype SegmentedControlContext = {\n  getInputProps: RequiredPropGetter<{ index: number }>\n  getLabelProps: RequiredPropGetter<{ index: number }>\n  styles: Record<string, CSSUIObject>\n}\n\nconst [SegmentedControlProvider, useSegmentedControl] =\n  createContext<SegmentedControlContext>({\n    strict: false,\n    name: \"SegmentedControlContext\",\n  })\n\ntype SegmentedControlOptions = {\n  /**\n   * The HTML `name` attribute used for forms.\n   */\n  name?: string\n  /**\n   * The value of the segmented control.\n   */\n  value?: string\n  /**\n   * The initial value of the segmented control.\n   */\n  defaultValue?: string\n  /**\n   * The callback fired when any children radio is checked or unchecked.\n   */\n  onChange?: (value: string) => void\n  /**\n   * If `true`, the segmented control will be readonly.\n   *\n   * @default false\n   */\n  isReadOnly?: boolean\n  /**\n   * If `true`, the segmented control will be disabled.\n   *\n   * @default false\n   */\n  isDisabled?: boolean\n  /**\n   * If provided, generate segmented control buttons but based on items.\n   *\n   * @default '[]'\n   */\n  items?: SegmentedControlItem[]\n}\n\nexport type SegmentedControlProps = Omit<HTMLUIProps<\"div\">, \"onChange\"> &\n  ThemeProps<\"SegmentedControl\"> &\n  SegmentedControlOptions\n\nexport const SegmentedControl = forwardRef<SegmentedControlProps, \"div\">(\n  (props, ref) => {\n    const [styles, mergedProps] = useMultiComponentStyle(\n      \"SegmentedControl\",\n      props,\n    )\n    let {\n      className,\n      id,\n      name,\n      isReadOnly,\n      isDisabled,\n      children,\n      items = [],\n      ...rest\n    } = omitThemeProps(mergedProps)\n    const isMountedRef = useIsMounted()\n\n    id ??= useId()\n    name ??= `segmented-control-${useId()}`\n\n    rest.onChange = useCallbackRef(rest.onChange)\n\n    const descendants = useDescendants()\n\n    const [focusedIndex, setFocusedIndex] = useState<number>(-1)\n    const [isFocusVisible, setIsFocusVisible] = useState<boolean>(false)\n    const [observerRef, containerRect] = useResizeObserver()\n    const containerRef = useRef<HTMLDivElement>(null)\n    const labelRefs = useRef<Map<string | number, HTMLLabelElement>>(new Map())\n\n    const [value, setValue] = useControllableState({\n      value: rest.value,\n      defaultValue: rest.defaultValue,\n      onChange: rest.onChange,\n    })\n\n    const getActivePosition = useCallback(() => {\n      const rect = { width: 0, height: 0, x: 0, y: 0 }\n\n      const el = labelRefs.current.get(value)\n\n      if (!el || !containerRef.current || !observerRef.current) return rect\n\n      const { paddingLeft, paddingTop } = getComputedStyle(containerRef.current)\n\n      const gutterX = parseFloat(paddingLeft) || 0\n      const gutterY = parseFloat(paddingTop) || 0\n\n      let { width, height } = el.getBoundingClientRect()\n      rect.x = el.offsetLeft - gutterX\n      rect.y = el.offsetTop - gutterY\n\n      rect.width = width * (el.offsetWidth / width) || 0\n      rect.height = height * (el.offsetWidth / width) || 0\n\n      return rect\n    }, [observerRef, value])\n\n    const [activePosition, setActivePosition] = useState(getActivePosition)\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        ...omitObject(rest, [\"value\", \"defaultValue\", \"onChange\"]),\n        ...props,\n        ref: mergeRefs(containerRef, observerRef, ref),\n        id,\n        \"aria-disabled\": ariaAttr(isDisabled),\n        \"aria-readonly\": ariaAttr(isReadOnly),\n        onBlur: handlerAll(props.onBlur, onBlur),\n      }),\n      [id, isDisabled, isReadOnly, observerRef, onBlur, rest],\n    )\n\n    const getActiveProps: PropGetter = useCallback(\n      (props = {}, ref = null) => {\n        const { width, height, x, y } = activePosition\n\n        return {\n          ...props,\n          ref,\n          style: {\n            position: \"absolute\",\n            zIndex: 1,\n            width,\n            height,\n            transform: `translate(${x}px, ${y}px)`,\n          },\n        }\n      },\n      [activePosition],\n    )\n\n    const getInputProps: RequiredPropGetter<{ index: number }> = useCallback(\n      ({ index, ...props } = {}, ref = null) => {\n        const disabled = props.disabled ?? props.isDisabled ?? isDisabled\n        const readOnly = props.readOnly ?? props.isReadOnly ?? isReadOnly\n        const checked = props.value === value\n\n        return {\n          ...omitObject(props, [\"isDisabled\", \"isReadOnly\"]),\n          ref,\n          id: `${id}-${index}`,\n          type: \"radio\",\n          name,\n          disabled: disabled || readOnly,\n          readOnly,\n          checked,\n          \"aria-disabled\": ariaAttr(disabled),\n          \"aria-readonly\": ariaAttr(readOnly),\n          \"data-checked\": dataAttr(checked),\n          \"data-focus\": dataAttr(index === focusedIndex),\n          style: {\n            border: \"0px\",\n            clip: \"rect(0px, 0px, 0px, 0px)\",\n            height: \"1px\",\n            width: \"1px\",\n            margin: \"-1px\",\n            padding: \"0px\",\n            overflow: \"hidden\",\n            whiteSpace: \"nowrap\",\n            position: \"absolute\",\n          },\n          onChange: handlerAll(props.onChange, (ev) =>\n            !disabled && !readOnly\n              ? onChange(ev as ChangeEvent<HTMLInputElement>)\n              : {},\n          ),\n        }\n      },\n      [isDisabled, isReadOnly, value, id, name, focusedIndex, onChange],\n    )\n\n    const getLabelProps: RequiredPropGetter<{ index: number }> = useCallback(\n      ({ index, ...props } = {}, ref = null) => {\n        const disabled = props.disabled ?? props.isDisabled ?? isDisabled\n        const readOnly = props.readOnly ?? props.isReadOnly ?? isReadOnly\n        const checked = props.value === value\n        const focused = index === focusedIndex\n\n        return {\n          props,\n          ref: mergeRefs(\n            (node) => labelRefs.current.set(props.value, node),\n            ref,\n          ),\n          \"aria-disabled\": ariaAttr(disabled),\n          \"aria-readonly\": ariaAttr(readOnly),\n          \"data-checked\": dataAttr(checked),\n          \"data-focus\": dataAttr(focused),\n          \"data-focus-visible\": dataAttr(focused && isFocusVisible),\n          onFocus: handlerAll(props.onFocus, () =>\n            onFocus(index, disabled || readOnly),\n          ),\n          ...(disabled || readOnly\n            ? {\n                _hover: {},\n                _active: {},\n                _focus: {},\n                _invalid: {},\n                _focusVisible: {},\n              }\n            : {}),\n          style: { position: \"relative\", zIndex: 2 },\n        }\n      },\n      [focusedIndex, isDisabled, isFocusVisible, isReadOnly, onFocus, value],\n    )\n\n    useEffect(() => {\n      return trackFocusVisible(setIsFocusVisible)\n    }, [])\n\n    useEffect(() => {\n      setActivePosition(getActivePosition())\n    }, [focusedIndex, containerRect, value, getActivePosition])\n\n    const css: CSSUIObject = {\n      position: \"relative\",\n      display: \"inline-flex\",\n      alignItems: \"center\",\n      ...styles.container,\n    }\n\n    const validChildren = getValidChildren(children)\n    let computedChildren: ReactElement[] = []\n\n    if (!validChildren.length && items.length) {\n      computedChildren = items.map(({ label, value, ...props }, i) => (\n        <SegmentedControlButton key={i} value={value} {...props}>\n          {label}\n        </SegmentedControlButton>\n      ))\n    } else {\n      computedChildren = validChildren\n    }\n\n    if (value == null && rest.defaultValue == null) {\n      for (const child of computedChildren) {\n        if (child.type !== SegmentedControlButton) 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={{ getInputProps, getLabelProps, styles }}\n        >\n          <ui.div\n            {...getContainerProps({}, ref)}\n            className={cx(\"ui-segmented-control\", className)}\n            __css={css}\n          >\n            {isMountedRef.current ? (\n              <ui.span\n                className=\"ui-segmented-control__active\"\n                {...getActiveProps()}\n                __css={styles.active}\n              />\n            ) : null}\n\n            {computedChildren}\n          </ui.div>\n        </SegmentedControlProvider>\n      </DescendantsContextProvider>\n    )\n  },\n)\n\ntype SegmentedControlButtonOptions = {\n  /**\n   * The value of the segmented control button.\n   */\n  value: string | number\n  /**\n   * The callback fired when any children radio is checked or unchecked.\n   */\n  onChange?: ChangeEventHandler<HTMLInputElement>\n}\n\nexport type SegmentedControlButtonProps = Omit<\n  HTMLUIProps<\"label\">,\n  \"onChange\"\n> &\n  Pick<SegmentedControlProps, \"isDisabled\" | \"isReadOnly\"> &\n  SegmentedControlButtonOptions\n\nexport const SegmentedControlButton = forwardRef<\n  SegmentedControlButtonProps,\n  \"input\"\n>(\n  (\n    {\n      className,\n      disabled,\n      readOnly,\n      isDisabled,\n      isReadOnly,\n      value,\n      onChange,\n      children,\n      ...rest\n    },\n    ref,\n  ) => {\n    const { getInputProps, getLabelProps, styles } = useSegmentedControl()\n\n    const { index, register } = useDescendant({\n      disabled: isDisabled || isReadOnly,\n    })\n\n    const props = {\n      index,\n      value,\n      onChange,\n      disabled,\n      readOnly,\n      isDisabled,\n      isReadOnly,\n    }\n\n    const css: CSSUIObject = {\n      cursor: \"pointer\",\n      flex: \"1 1 0%\",\n      display: \"inline-flex\",\n      justifyContent: \"center\",\n      alignItems: \"center\",\n      ...styles.button,\n    }\n\n    return (\n      <ui.label\n        {...getLabelProps(omitObject(props, [\"onChange\"]))}\n        className={cx(\"ui-segmented-control__button\", className)}\n        __css={css}\n        {...rest}\n      >\n        <ui.input {...getInputProps(props, mergeRefs(register, ref))} />\n        <ui.span>{children}</ui.span>\n      </ui.label>\n    )\n  },\n)\n"],"mappings":"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","names":["props","ref","value"]}