import { jsx as r } from "react/jsx-runtime";
import * as a from "@radix-ui/react-switch";
import { c as t } from "../../index-BtlgVD4m.js";
const l = ({ ref: o, ...n }) => {
  const { value: i, onChange: s, disabled: e, ...c } = n;
  return /* @__PURE__ */ r(
    a.Root,
    {
      ref: o,
      className: t(
        "group",
        "relative inline-flex h-[var(--height-h-6)] w-[var(--width-w-11)] flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent",
        "transition-colors duration-200 ease-in-out",
        "focus:outline-none focus-visible:ring focus-visible:ring-[var(--base-ring)]",
        "bg-[var(--base-input)]",
        "data-[state=checked]:bg-[var(--base-primary)]",
        e && "cursor-not-allowed opacity-[var(--opacity-opacity-70)]"
      ),
      disabled: e,
      checked: i,
      onCheckedChange: s,
      ...c,
      children: /* @__PURE__ */ r(
        a.Thumb,
        {
          className: t(
            "pointer-events-none inline-block h-[var(--height-h-5)] w-[var(--width-w-5)] transform rounded-full",
            "bg-[var(--base-background)]",
            "transition duration-200 ease-in-out",
            "translate-x-0 data-[state=checked]:translate-x-[var(--width-w-5)]"
          )
        }
      )
    }
  );
};
l.displayName = "SwitchButton";
export {
  l as SwitchButton
};
//# sourceMappingURL=SwitchPrimitive.js.map
