'use strict';
import { jsxs, jsx } from 'react/jsx-runtime';
import { Switch as Switch$1 } from '@base-ui/react/switch';
import { cn } from '../../../fd-toolbox/lib/utils.js';
import { onSwitchChange } from './Switch.funcs.js';

var __defProp = Object.defineProperty;
var __name = (target, value) => __defProp(target, "name", {
  value,
  configurable: true
});
function Switch({
  className,
  label,
  id,
  name,
  checked,
  disabled,
  readOnly,
  onCheckedChange,
  ref
}) {
  return /* @__PURE__ */jsxs("div", {
    className: "flex h-9 items-center space-x-3 py-2",
    children: [/* @__PURE__ */jsx(Switch$1.Root, {
      ref,
      onCheckedChange: value => onSwitchChange(value, readOnly, onCheckedChange),
      className: cn("peer focus-visible:ring-primary inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", "data-[checked]:bg-primary data-[unchecked]:bg-input", className),
      checked,
      disabled,
      id,
      name,
      role: "checkbox",
      "aria-checked": checked,
      children: /* @__PURE__ */jsx(Switch$1.Thumb, {
        className: "bg-background pointer-events-none block size-4 rounded-full shadow-lg ring-0 transition-transform data-[checked]:translate-x-4 data-[unchecked]:translate-x-0"
      })
    }), /* @__PURE__ */jsx("div", {
      className: "grid gap-1.5 leading-none",
      children: /* @__PURE__ */jsx("label", {
        className: "text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
        children: label
      })
    })]
  });
}
__name(Switch, "Switch");
Switch.displayName = Switch$1.Root.displayName;

export { Switch };
