@yamada-ui/segmented-control 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Hirotomo Yamada
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,28 @@
+# @yamada-ui/segmented-control
+
+## Installation
+
+```sh
+$ pnpm add @yamada-ui/segmented-control
+```
+
+or
+
+```sh
+$ yarn add @yamada-ui/segmented-control
+```
+
+or
+
+```sh
+$ npm install @yamada-ui/segmented-control
+```
+
+## Contribution
+
+Wouldn't you like to contribute? That's amazing! We have prepared a [contribution guide](https://github.com/hirotomoyamada/yamada-ui/blob/main/CONTRIBUTING.md) to assist you.
+
+## Licence
+
+This package is licensed under the terms of the
+[MIT license](https://github.com/hirotomoyamada/yamada-ui/blob/main/LICENSE).

package/dist/chunk-4HOIPB3J.mjs

@@ -0,0 +1,274 @@
+// src/segmented-control.tsx
+import {
+  ui,
+  forwardRef,
+  useMultiComponentStyle,
+  omitThemeProps
+} from "@yamada-ui/core";
+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,
+  cx,
+  dataAttr,
+  getValidChildren,
+  handlerAll,
+  mergeRefs,
+  omitObject,
+  useCallbackRef
+} from "@yamada-ui/utils";
+import {
+  useCallback,
+  useEffect,
+  useId,
+  useRef,
+  useState
+} from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var { DescendantsContextProvider, useDescendants, useDescendant } = createDescendant();
+var [SegmentedControlProvider, useSegmentedControl] = createContext({
+  strict: false,
+  name: "SegmentedControlContext"
+});
+var SegmentedControl = forwardRef((props, ref) => {
+  const [styles, mergedProps] = useMultiComponentStyle("SegmentedControl", props);
+  let { className, id, name, isReadOnly, isDisabled, children, ...rest } = omitThemeProps(mergedProps);
+  id = id != null ? id : useId();
+  name = name != null ? 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 [activePosition, setActivePosition] = useState({
+    width: 0,
+    height: 0,
+    x: 0,
+    y: 0
+  });
+  const [value, setValue] = useControllableState({
+    value: rest.value,
+    defaultValue: rest.defaultValue,
+    onChange: rest.onChange
+  });
+  useEffect(() => {
+    return trackFocusVisible(setIsFocusVisible);
+  }, []);
+  useEffect(() => {
+    const el = labelRefs.current.get(value);
+    if (!el || !containerRef.current || !observerRef.current)
+      return;
+    const { paddingLeft, paddingTop } = getComputedStyle(containerRef.current);
+    const gutterX = parseFloat(paddingLeft) || 0;
+    const gutterY = parseFloat(paddingTop) || 0;
+    let { width, height } = el.getBoundingClientRect();
+    const x = el.offsetLeft - gutterX;
+    const y = el.offsetTop - gutterY;
+    width = width * (el.offsetWidth / width) || 0;
+    height = height * (el.offsetWidth / width) || 0;
+    setActivePosition({ width, height, x, y });
+  }, [focusedIndex, containerRect, labelRefs, observerRef, value]);
+  const onChange = useCallback(
+    (ev) => {
+      if (isDisabled || isReadOnly) {
+        ev.preventDefault();
+        return;
+      }
+      setValue(ev.target.value);
+    },
+    [isDisabled, isReadOnly, setValue]
+  );
+  const onFocus = useCallback(
+    (index, skip) => {
+      if (isDisabled)
+        return;
+      if (skip) {
+        const next = descendants.enabledNextValue(index);
+        if (next)
+          setFocusedIndex(next.index);
+      } else {
+        setFocusedIndex(index);
+      }
+    },
+    [descendants, isDisabled]
+  );
+  const onBlur = useCallback(() => setFocusedIndex(-1), []);
+  const getContainerProps = useCallback(
+    (props2 = {}, ref2 = null) => ({
+      ...omitObject(rest, ["value", "defaultValue", "onChange"]),
+      ...props2,
+      ref: mergeRefs(containerRef, observerRef, 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]
+  );
+  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;
+      return {
+        ...omitObject(props2, ["isDisabled", "isReadOnly"]),
+        ref: ref2,
+        id: `${id}-${index}`,
+        type: "radio",
+        name,
+        disabled: disabled || readOnly,
+        readOnly,
+        checked,
+        "aria-disabled": ariaAttr(disabled),
+        "aria-readonly": ariaAttr(readOnly),
+        "data-checked": dataAttr(checked),
+        "data-focus": dataAttr(index === focusedIndex),
+        style: {
+          border: "0px",
+          clip: "rect(0px, 0px, 0px, 0px)",
+          height: "1px",
+          width: "1px",
+          margin: "-1px",
+          padding: "0px",
+          overflow: "hidden",
+          whiteSpace: "nowrap",
+          position: "absolute"
+        },
+        onChange: handlerAll(
+          props2.onChange,
+          (ev) => !disabled && !readOnly ? onChange(ev) : {}
+        )
+      };
+    },
+    [isDisabled, isReadOnly, value, 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 focused = index === focusedIndex;
+      return {
+        props: props2,
+        ref: mergeRefs((node) => labelRefs.current.set(props2.value, node), ref2),
+        "aria-disabled": ariaAttr(disabled),
+        "aria-readonly": ariaAttr(readOnly),
+        "data-checked": dataAttr(checked),
+        "data-focus": dataAttr(focused),
+        "data-focus-visible": dataAttr(focused && isFocusVisible),
+        onFocus: handlerAll(props2.onFocus, () => onFocus(index, disabled || readOnly)),
+        ...disabled || readOnly ? {
+          _hover: {},
+          _active: {},
+          _focus: {},
+          _invalid: {},
+          _focusVisible: {}
+        } : {},
+        style: { position: "relative", zIndex: 2 }
+      };
+    },
+    [focusedIndex, isDisabled, isFocusVisible, isReadOnly, onFocus, value]
+  );
+  const css = {
+    position: "relative",
+    display: "inline-flex",
+    alignItems: "center",
+    ...styles.container
+  };
+  const validChildren = getValidChildren(children);
+  if (value == null && rest.defaultValue == null) {
+    for (const child of validChildren) {
+      if (child.type !== SegmentedControlButton)
+        continue;
+      const value2 = child.props.value;
+      setValue(value2);
+      break;
+    }
+  }
+  return /* @__PURE__ */ jsx(DescendantsContextProvider, { value: descendants, children: /* @__PURE__ */ jsx(SegmentedControlProvider, { value: { getInputProps, getLabelProps, styles }, children: /* @__PURE__ */ jsxs(
+    ui.div,
+    {
+      ...getContainerProps({}, ref),
+      className: cx("ui-segmented-control", className),
+      __css: css,
+      children: [
+        /* @__PURE__ */ jsx(
+          ui.span,
+          {
+            className: "ui-segmented-control-active",
+            ...getActiveProps(),
+            __css: styles.active
+          }
+        ),
+        validChildren
+      ]
+    }
+  ) }) });
+});
+var SegmentedControlButton = forwardRef(
+  ({ className, disabled, readOnly, isDisabled, isReadOnly, value, onChange, children, ...rest }, ref) => {
+    const { getInputProps, getLabelProps, styles } = useSegmentedControl();
+    const { index, register } = useDescendant({
+      disabled: isDisabled || isReadOnly
+    });
+    const props = {
+      index,
+      value,
+      onChange,
+      disabled,
+      readOnly,
+      isDisabled,
+      isReadOnly
+    };
+    const css = {
+      cursor: "pointer",
+      flex: "1 1 0%",
+      display: "inline-flex",
+      justifyContent: "center",
+      alignItems: "center",
+      ...styles.button
+    };
+    return /* @__PURE__ */ jsxs(
+      ui.label,
+      {
+        ...getLabelProps(omitObject(props, ["onChange"])),
+        className: cx("ui-segmented-control-button", className),
+        __css: css,
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx(ui.input, { ...getInputProps(props, mergeRefs(register, ref)) }),
+          /* @__PURE__ */ jsx(ui.span, { children })
+        ]
+      }
+    );
+  }
+);
+
+export {
+  SegmentedControl,
+  SegmentedControlButton
+};

package/dist/index.d.ts

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

package/dist/index.js

@@ -0,0 +1,280 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  SegmentedControl: () => SegmentedControl,
+  SegmentedControlButton: () => SegmentedControlButton
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/segmented-control.tsx
+var import_core = require("@yamada-ui/core");
+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");
+var { DescendantsContextProvider, useDescendants, useDescendant } = (0, import_use_descendant.createDescendant)();
+var [SegmentedControlProvider, useSegmentedControl] = (0, import_utils.createContext)({
+  strict: false,
+  name: "SegmentedControlContext"
+});
+var SegmentedControl = (0, import_core.forwardRef)((props, ref) => {
+  const [styles, mergedProps] = (0, import_core.useMultiComponentStyle)("SegmentedControl", props);
+  let { className, id, name, isReadOnly, isDisabled, children, ...rest } = (0, import_core.omitThemeProps)(mergedProps);
+  id = id != null ? id : (0, import_react.useId)();
+  name = name != null ? 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 [activePosition, setActivePosition] = (0, import_react.useState)({
+    width: 0,
+    height: 0,
+    x: 0,
+    y: 0
+  });
+  const [value, setValue] = (0, import_use_controllable_state.useControllableState)({
+    value: rest.value,
+    defaultValue: rest.defaultValue,
+    onChange: rest.onChange
+  });
+  (0, import_react.useEffect)(() => {
+    return (0, import_use_focus_visible.trackFocusVisible)(setIsFocusVisible);
+  }, []);
+  (0, import_react.useEffect)(() => {
+    const el = labelRefs.current.get(value);
+    if (!el || !containerRef.current || !observerRef.current)
+      return;
+    const { paddingLeft, paddingTop } = getComputedStyle(containerRef.current);
+    const gutterX = parseFloat(paddingLeft) || 0;
+    const gutterY = parseFloat(paddingTop) || 0;
+    let { width, height } = el.getBoundingClientRect();
+    const x = el.offsetLeft - gutterX;
+    const y = el.offsetTop - gutterY;
+    width = width * (el.offsetWidth / width) || 0;
+    height = height * (el.offsetWidth / width) || 0;
+    setActivePosition({ width, height, x, y });
+  }, [focusedIndex, containerRect, labelRefs, observerRef, value]);
+  const onChange = (0, import_react.useCallback)(
+    (ev) => {
+      if (isDisabled || isReadOnly) {
+        ev.preventDefault();
+        return;
+      }
+      setValue(ev.target.value);
+    },
+    [isDisabled, isReadOnly, setValue]
+  );
+  const onFocus = (0, import_react.useCallback)(
+    (index, skip) => {
+      if (isDisabled)
+        return;
+      if (skip) {
+        const next = descendants.enabledNextValue(index);
+        if (next)
+          setFocusedIndex(next.index);
+      } else {
+        setFocusedIndex(index);
+      }
+    },
+    [descendants, isDisabled]
+  );
+  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"]),
+      ...props2,
+      ref: (0, import_utils.mergeRefs)(containerRef, observerRef, 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]
+  );
+  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;
+      return {
+        ...(0, import_utils.omitObject)(props2, ["isDisabled", "isReadOnly"]),
+        ref: ref2,
+        id: `${id}-${index}`,
+        type: "radio",
+        name,
+        disabled: disabled || readOnly,
+        readOnly,
+        checked,
+        "aria-disabled": (0, import_utils.ariaAttr)(disabled),
+        "aria-readonly": (0, import_utils.ariaAttr)(readOnly),
+        "data-checked": (0, import_utils.dataAttr)(checked),
+        "data-focus": (0, import_utils.dataAttr)(index === focusedIndex),
+        style: {
+          border: "0px",
+          clip: "rect(0px, 0px, 0px, 0px)",
+          height: "1px",
+          width: "1px",
+          margin: "-1px",
+          padding: "0px",
+          overflow: "hidden",
+          whiteSpace: "nowrap",
+          position: "absolute"
+        },
+        onChange: (0, import_utils.handlerAll)(
+          props2.onChange,
+          (ev) => !disabled && !readOnly ? onChange(ev) : {}
+        )
+      };
+    },
+    [isDisabled, isReadOnly, value, 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 focused = index === focusedIndex;
+      return {
+        props: props2,
+        ref: (0, import_utils.mergeRefs)((node) => labelRefs.current.set(props2.value, node), ref2),
+        "aria-disabled": (0, import_utils.ariaAttr)(disabled),
+        "aria-readonly": (0, import_utils.ariaAttr)(readOnly),
+        "data-checked": (0, import_utils.dataAttr)(checked),
+        "data-focus": (0, import_utils.dataAttr)(focused),
+        "data-focus-visible": (0, import_utils.dataAttr)(focused && isFocusVisible),
+        onFocus: (0, import_utils.handlerAll)(props2.onFocus, () => onFocus(index, disabled || readOnly)),
+        ...disabled || readOnly ? {
+          _hover: {},
+          _active: {},
+          _focus: {},
+          _invalid: {},
+          _focusVisible: {}
+        } : {},
+        style: { position: "relative", zIndex: 2 }
+      };
+    },
+    [focusedIndex, isDisabled, isFocusVisible, isReadOnly, onFocus, value]
+  );
+  const css = {
+    position: "relative",
+    display: "inline-flex",
+    alignItems: "center",
+    ...styles.container
+  };
+  const validChildren = (0, import_utils.getValidChildren)(children);
+  if (value == null && rest.defaultValue == null) {
+    for (const child of validChildren) {
+      if (child.type !== SegmentedControlButton)
+        continue;
+      const value2 = child.props.value;
+      setValue(value2);
+      break;
+    }
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DescendantsContextProvider, { value: descendants, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SegmentedControlProvider, { value: { getInputProps, getLabelProps, styles }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_core.ui.div,
+    {
+      ...getContainerProps({}, ref),
+      className: (0, import_utils.cx)("ui-segmented-control", className),
+      __css: css,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_core.ui.span,
+          {
+            className: "ui-segmented-control-active",
+            ...getActiveProps(),
+            __css: styles.active
+          }
+        ),
+        validChildren
+      ]
+    }
+  ) }) });
+});
+var SegmentedControlButton = (0, import_core.forwardRef)(
+  ({ className, disabled, readOnly, isDisabled, isReadOnly, value, onChange, children, ...rest }, ref) => {
+    const { getInputProps, getLabelProps, styles } = useSegmentedControl();
+    const { index, register } = useDescendant({
+      disabled: isDisabled || isReadOnly
+    });
+    const props = {
+      index,
+      value,
+      onChange,
+      disabled,
+      readOnly,
+      isDisabled,
+      isReadOnly
+    };
+    const css = {
+      cursor: "pointer",
+      flex: "1 1 0%",
+      display: "inline-flex",
+      justifyContent: "center",
+      alignItems: "center",
+      ...styles.button
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_core.ui.label,
+      {
+        ...getLabelProps((0, import_utils.omitObject)(props, ["onChange"])),
+        className: (0, import_utils.cx)("ui-segmented-control-button", className),
+        __css: css,
+        ...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 })
+        ]
+      }
+    );
+  }
+);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  SegmentedControl,
+  SegmentedControlButton
+});

package/dist/index.mjs

@@ -0,0 +1,8 @@
+import {
+  SegmentedControl,
+  SegmentedControlButton
+} from "./chunk-4HOIPB3J.mjs";
+export {
+  SegmentedControl,
+  SegmentedControlButton
+};

package/dist/segmented-control.d.ts

@@ -0,0 +1,22 @@
+import * as _yamada_ui_core from '@yamada-ui/core';
+import { HTMLUIProps, ThemeProps } from '@yamada-ui/core';
+import { ChangeEventHandler } from 'react';
+
+type SegmentedControlOptions = {
+    name?: string;
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    isReadOnly?: boolean;
+    isDisabled?: boolean;
+};
+type SegmentedControlProps = Omit<HTMLUIProps<'div'>, 'onChange'> & ThemeProps<'SegmentedControl'> & SegmentedControlOptions;
+declare const SegmentedControl: _yamada_ui_core.Component<"div", SegmentedControlProps>;
+type SegmentedControlButtonOptions = {
+    value: string | number;
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+};
+type SegmentedControlButtonProps = Omit<HTMLUIProps<'label'>, 'onChange'> & Pick<SegmentedControlProps, 'isDisabled' | 'isReadOnly'> & SegmentedControlButtonOptions;
+declare const SegmentedControlButton: _yamada_ui_core.Component<"input", SegmentedControlButtonProps>;
+
+export { SegmentedControl, SegmentedControlButton, SegmentedControlButtonProps, SegmentedControlProps };

package/dist/segmented-control.js

@@ -0,0 +1,278 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/segmented-control.tsx
+var segmented_control_exports = {};
+__export(segmented_control_exports, {
+  SegmentedControl: () => SegmentedControl,
+  SegmentedControlButton: () => SegmentedControlButton
+});
+module.exports = __toCommonJS(segmented_control_exports);
+var import_core = require("@yamada-ui/core");
+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");
+var { DescendantsContextProvider, useDescendants, useDescendant } = (0, import_use_descendant.createDescendant)();
+var [SegmentedControlProvider, useSegmentedControl] = (0, import_utils.createContext)({
+  strict: false,
+  name: "SegmentedControlContext"
+});
+var SegmentedControl = (0, import_core.forwardRef)((props, ref) => {
+  const [styles, mergedProps] = (0, import_core.useMultiComponentStyle)("SegmentedControl", props);
+  let { className, id, name, isReadOnly, isDisabled, children, ...rest } = (0, import_core.omitThemeProps)(mergedProps);
+  id = id != null ? id : (0, import_react.useId)();
+  name = name != null ? 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 [activePosition, setActivePosition] = (0, import_react.useState)({
+    width: 0,
+    height: 0,
+    x: 0,
+    y: 0
+  });
+  const [value, setValue] = (0, import_use_controllable_state.useControllableState)({
+    value: rest.value,
+    defaultValue: rest.defaultValue,
+    onChange: rest.onChange
+  });
+  (0, import_react.useEffect)(() => {
+    return (0, import_use_focus_visible.trackFocusVisible)(setIsFocusVisible);
+  }, []);
+  (0, import_react.useEffect)(() => {
+    const el = labelRefs.current.get(value);
+    if (!el || !containerRef.current || !observerRef.current)
+      return;
+    const { paddingLeft, paddingTop } = getComputedStyle(containerRef.current);
+    const gutterX = parseFloat(paddingLeft) || 0;
+    const gutterY = parseFloat(paddingTop) || 0;
+    let { width, height } = el.getBoundingClientRect();
+    const x = el.offsetLeft - gutterX;
+    const y = el.offsetTop - gutterY;
+    width = width * (el.offsetWidth / width) || 0;
+    height = height * (el.offsetWidth / width) || 0;
+    setActivePosition({ width, height, x, y });
+  }, [focusedIndex, containerRect, labelRefs, observerRef, value]);
+  const onChange = (0, import_react.useCallback)(
+    (ev) => {
+      if (isDisabled || isReadOnly) {
+        ev.preventDefault();
+        return;
+      }
+      setValue(ev.target.value);
+    },
+    [isDisabled, isReadOnly, setValue]
+  );
+  const onFocus = (0, import_react.useCallback)(
+    (index, skip) => {
+      if (isDisabled)
+        return;
+      if (skip) {
+        const next = descendants.enabledNextValue(index);
+        if (next)
+          setFocusedIndex(next.index);
+      } else {
+        setFocusedIndex(index);
+      }
+    },
+    [descendants, isDisabled]
+  );
+  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"]),
+      ...props2,
+      ref: (0, import_utils.mergeRefs)(containerRef, observerRef, 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]
+  );
+  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;
+      return {
+        ...(0, import_utils.omitObject)(props2, ["isDisabled", "isReadOnly"]),
+        ref: ref2,
+        id: `${id}-${index}`,
+        type: "radio",
+        name,
+        disabled: disabled || readOnly,
+        readOnly,
+        checked,
+        "aria-disabled": (0, import_utils.ariaAttr)(disabled),
+        "aria-readonly": (0, import_utils.ariaAttr)(readOnly),
+        "data-checked": (0, import_utils.dataAttr)(checked),
+        "data-focus": (0, import_utils.dataAttr)(index === focusedIndex),
+        style: {
+          border: "0px",
+          clip: "rect(0px, 0px, 0px, 0px)",
+          height: "1px",
+          width: "1px",
+          margin: "-1px",
+          padding: "0px",
+          overflow: "hidden",
+          whiteSpace: "nowrap",
+          position: "absolute"
+        },
+        onChange: (0, import_utils.handlerAll)(
+          props2.onChange,
+          (ev) => !disabled && !readOnly ? onChange(ev) : {}
+        )
+      };
+    },
+    [isDisabled, isReadOnly, value, 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 focused = index === focusedIndex;
+      return {
+        props: props2,
+        ref: (0, import_utils.mergeRefs)((node) => labelRefs.current.set(props2.value, node), ref2),
+        "aria-disabled": (0, import_utils.ariaAttr)(disabled),
+        "aria-readonly": (0, import_utils.ariaAttr)(readOnly),
+        "data-checked": (0, import_utils.dataAttr)(checked),
+        "data-focus": (0, import_utils.dataAttr)(focused),
+        "data-focus-visible": (0, import_utils.dataAttr)(focused && isFocusVisible),
+        onFocus: (0, import_utils.handlerAll)(props2.onFocus, () => onFocus(index, disabled || readOnly)),
+        ...disabled || readOnly ? {
+          _hover: {},
+          _active: {},
+          _focus: {},
+          _invalid: {},
+          _focusVisible: {}
+        } : {},
+        style: { position: "relative", zIndex: 2 }
+      };
+    },
+    [focusedIndex, isDisabled, isFocusVisible, isReadOnly, onFocus, value]
+  );
+  const css = {
+    position: "relative",
+    display: "inline-flex",
+    alignItems: "center",
+    ...styles.container
+  };
+  const validChildren = (0, import_utils.getValidChildren)(children);
+  if (value == null && rest.defaultValue == null) {
+    for (const child of validChildren) {
+      if (child.type !== SegmentedControlButton)
+        continue;
+      const value2 = child.props.value;
+      setValue(value2);
+      break;
+    }
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DescendantsContextProvider, { value: descendants, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SegmentedControlProvider, { value: { getInputProps, getLabelProps, styles }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_core.ui.div,
+    {
+      ...getContainerProps({}, ref),
+      className: (0, import_utils.cx)("ui-segmented-control", className),
+      __css: css,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_core.ui.span,
+          {
+            className: "ui-segmented-control-active",
+            ...getActiveProps(),
+            __css: styles.active
+          }
+        ),
+        validChildren
+      ]
+    }
+  ) }) });
+});
+var SegmentedControlButton = (0, import_core.forwardRef)(
+  ({ className, disabled, readOnly, isDisabled, isReadOnly, value, onChange, children, ...rest }, ref) => {
+    const { getInputProps, getLabelProps, styles } = useSegmentedControl();
+    const { index, register } = useDescendant({
+      disabled: isDisabled || isReadOnly
+    });
+    const props = {
+      index,
+      value,
+      onChange,
+      disabled,
+      readOnly,
+      isDisabled,
+      isReadOnly
+    };
+    const css = {
+      cursor: "pointer",
+      flex: "1 1 0%",
+      display: "inline-flex",
+      justifyContent: "center",
+      alignItems: "center",
+      ...styles.button
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_core.ui.label,
+      {
+        ...getLabelProps((0, import_utils.omitObject)(props, ["onChange"])),
+        className: (0, import_utils.cx)("ui-segmented-control-button", className),
+        __css: css,
+        ...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 })
+        ]
+      }
+    );
+  }
+);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  SegmentedControl,
+  SegmentedControlButton
+});

package/dist/segmented-control.mjs

@@ -0,0 +1,8 @@
+import {
+  SegmentedControl,
+  SegmentedControlButton
+} from "./chunk-4HOIPB3J.mjs";
+export {
+  SegmentedControl,
+  SegmentedControlButton
+};

package/package.json

@@ -0,0 +1,79 @@
+{
+  "name": "@yamada-ui/segmented-control",
+  "version": "0.1.0",
+  "description": "Yamada UI segmented control components",
+  "keywords": [
+    "yamada",
+    "yamada ui",
+    "react",
+    "emotion",
+    "component",
+    "segmented-control",
+    "ui",
+    "uikit",
+    "styled",
+    "style-props",
+    "styled-component",
+    "css-in-js"
+  ],
+  "author": "Hirotomo Yamada <hirotomo.yamada@avap.co.jp>",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hirotomoyamada/yamada-ui",
+    "directory": "packages/components/segmented-control"
+  },
+  "bugs": {
+    "url": "https://github.com/hirotomoyamada/yamada-ui/issues"
+  },
+  "dependencies": {
+    "@yamada-ui/core": "0.1.0",
+    "@yamada-ui/utils": "0.1.0",
+    "@yamada-ui/use-resize-observer": "0.1.0",
+    "@yamada-ui/use-focus-visible": "0.1.0",
+    "@yamada-ui/use-controllable-state": "0.1.0",
+    "@yamada-ui/use-descendant": "0.1.0"
+  },
+  "devDependencies": {
+    "react": "^18.0.0",
+    "clean-package": "2.2.0"
+  },
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "clean-package": "../../../clean-package.config.json",
+  "tsup": {
+    "clean": true,
+    "target": "es2019",
+    "format": [
+      "cjs",
+      "esm"
+    ]
+  },
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "dev": "pnpm build:fast -- --watch",
+    "build": "tsup src --dts",
+    "build:fast": "tsup src",
+    "clean": "rimraf dist .turbo",
+    "typecheck": "tsc --noEmit",
+    "gen:docs": "tsx ../../../scripts/generate-docs"
+  }
+}