@yamada-ui/toggle/dist/chunk-NVKFLQH6.mjs

Yamada UI toggle component

"use client"
import {
  useToggleGroup
} from "./chunk-EFPQNQ3D.mjs";

// src/toggle.tsx
import {
  forwardRef,
  omitThemeProps,
  ui,
  useComponentMultiStyle
} from "@yamada-ui/core";
import { Ripple, useRipple } from "@yamada-ui/ripple";
import { useControllableState } from "@yamada-ui/use-controllable-state";
import {
  cx,
  dataAttr,
  handlerAll,
  isArray,
  isUndefined
} from "@yamada-ui/utils";
import { useMemo } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
var Toggle = forwardRef(
  (props, ref) => {
    var _a;
    const {
      controlled,
      disabled: groupDisabled,
      readOnly: groupReadOnly,
      value: groupValue,
      onChange: onChangeGroup,
      ...group
    } = (_a = useToggleGroup()) != null ? _a : {};
    const [styles, mergedProps] = useComponentMultiStyle("Toggle", {
      ...group,
      isDisabled: groupDisabled,
      isReadOnly: groupReadOnly,
      ...props
    });
    const {
      className,
      isActive,
      active = isActive,
      children,
      defaultIsSelected = false,
      defaultSelected = defaultIsSelected,
      isDisabled = groupDisabled,
      disabled = isDisabled,
      disableRipple,
      isRounded,
      fullRounded = isRounded,
      icon,
      isReadOnly = groupReadOnly,
      isSelected,
      readOnly = isReadOnly,
      selected: selectedProp = isSelected,
      value,
      onChange,
      ...rest
    } = omitThemeProps(mergedProps);
    const [selected, setSelected] = useControllableState({
      defaultValue: defaultSelected,
      value: selectedProp,
      onChange
    });
    if (controlled && isUndefined(value)) {
      console.warn(`Toggle: value is required. Please set the value.`);
    }
    const multi = isArray(groupValue);
    const included = multi ? groupValue.includes(value != null ? value : "") : value === groupValue;
    const trulySelected = controlled ? included : selected;
    const { onPointerDown, ...rippleProps } = useRipple({
      ...rest,
      disabled: disableRipple || disabled
    });
    const onClick = () => {
      setSelected((prev) => !prev);
      onChangeGroup == null ? void 0 : onChangeGroup(value);
    };
    const css = useMemo(
      () => ({
        alignItems: "center",
        appearance: "none",
        display: "inline-flex",
        gap: "fallback(2, 0.5rem)",
        justifyContent: "center",
        outline: "none",
        overflow: "hidden",
        pointerEvents: readOnly ? "none" : "auto",
        position: "relative",
        userSelect: "none",
        verticalAlign: "middle",
        ...styles,
        ...fullRounded ? { borderRadius: "fallback(full, 9999px)" } : {}
      }),
      [fullRounded, styles, readOnly]
    );
    return /* @__PURE__ */ jsxs(
      ui.button,
      {
        ref,
        type: "button",
        className: cx("ui-toggle", className),
        "aria-pressed": trulySelected,
        "data-active": dataAttr(active),
        "data-readonly": dataAttr(readOnly),
        "data-selected": dataAttr(trulySelected),
        disabled,
        tabIndex: readOnly ? -1 : 0,
        __css: css,
        ...rest,
        onClick: handlerAll(rest.onClick, onClick),
        onPointerDown,
        children: [
          children || icon,
          /* @__PURE__ */ jsx(Ripple, { ...rippleProps })
        ]
      }
    );
  }
);
Toggle.displayName = "Toggle";
Toggle.__ui__ = "Toggle";

export {
  Toggle
};
//# sourceMappingURL=chunk-NVKFLQH6.mjs.map