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

Yamada UI toggle component

"use client"

// src/toggle-group.tsx
import { forwardRef, ui } from "@yamada-ui/core";
import { useControllableState } from "@yamada-ui/use-controllable-state";
import {
  createContext,
  cx,
  isArray,
  isUndefined,
  useUpdateEffect
} from "@yamada-ui/utils";
import { useCallback, useMemo, useRef } from "react";
import { jsx } from "react/jsx-runtime";
var [ToggleGroupProvider, useToggleGroup] = createContext(
  {
    name: "ToggleGroupContext",
    strict: false
  }
);
var ToggleGroup = forwardRef(
  ({
    className,
    size,
    variant,
    defaultValue,
    direction,
    isDisabled,
    disabled = isDisabled,
    flexDirection = direction,
    isReadOnly,
    readOnly = isReadOnly,
    value: valueProp,
    onChange: onChangeProp,
    ...rest
  }, ref) => {
    const [value, setValue] = useControllableState({
      defaultValue,
      value: valueProp,
      onChange: onChangeProp
    });
    const controlledRef = useRef(!isUndefined(value));
    const onChange = useCallback(
      (value2) => {
        if (isUndefined(value2)) return;
        setValue((prev) => {
          if (isArray(prev)) {
            const isIncluded = prev.includes(value2);
            if (isIncluded) {
              return prev.filter((prevValue) => prevValue !== value2);
            } else {
              return [...prev, value2];
            }
          } else {
            if (value2 === prev) {
              return void 0;
            } else {
              return value2;
            }
          }
        });
      },
      [setValue]
    );
    const css = {
      display: "inline-flex",
      flexDirection,
      gap: "0.5rem"
    };
    const values = useMemo(
      () => ({
        size,
        variant,
        controlled: controlledRef.current,
        disabled,
        readOnly,
        value,
        onChange
      }),
      [value, size, variant, disabled, readOnly, onChange]
    );
    useUpdateEffect(() => {
      if (isUndefined(value)) return;
      controlledRef.current = true;
    }, [valueProp]);
    return /* @__PURE__ */ jsx(ToggleGroupProvider, { value: values, children: /* @__PURE__ */ jsx(
      ui.div,
      {
        ref,
        className: cx("ui-toggle-group", className),
        role: "group",
        __css: css,
        ...rest
      }
    ) });
  }
);
ToggleGroup.displayName = "ToggleGroup";
ToggleGroup.__ui__ = "ToggleGroup";

export {
  useToggleGroup,
  ToggleGroup
};
//# sourceMappingURL=chunk-EFPQNQ3D.mjs.map