"use client";
import { jsx as e, jsxs as z } from "react/jsx-runtime";
import { forwardRef as A, createContext as H, useContext as V } from "react";
import { F as W } from "./field-bmglk138wa8bf3ei.js";
import { c as i } from "./vendor-styling-ofvnbcuht98q88oo.js";
import { Q as L, U as E, bi as P } from "./vendor-base-ui-elpbzr8xeffrz4h2.js";
const re = {
  size: {
    sm: {
      classes: "h-5.5 w-8.5",
      description: "Small switch for compact UIs"
    },
    base: {
      classes: "h-6.5 w-10.5",
      description: "Default switch size"
    },
    lg: {
      classes: "h-7.5 w-12.5",
      description: "Large switch for prominent toggles"
    }
  },
  variant: {
    default: {
      classes: "",
      description: "Default switch with squircle shape and brand blue color"
    },
    neutral: {
      classes: "",
      description: "Monochrome switch with squircle shape for subtle toggles"
    }
  }
}, te = {
  size: "base",
  variant: "default"
}, T = H({
  controlFirst: !0
}), U = A(
  ({
    className: a,
    checked: o,
    disabled: n,
    size: c = "base",
    variant: l = "default",
    label: s,
    labelTooltip: u,
    required: f,
    controlFirst: w = !0,
    onCheckedChange: x,
    transitioning: N,
    id: r,
    ...d
  }, S) => {
    const v = typeof s == "string" ? s : "Switch", _ = /* @__PURE__ */ e(
      P,
      {
        ref: S,
        id: r,
        checked: o,
        disabled: n,
        onCheckedChange: x,
        nativeButton: !0,
        render: (R, t) => {
          const {
            ref: b,
            className: h,
            role: q,
            "aria-checked": k,
            "aria-pressed": F,
            ...y
          } = R, g = l === "neutral", p = "rounded-[5px] supports-[corner-shape:squircle]:rounded-[10px] [corner-shape:squircle]", m = {
            sm: { track: "h-4 w-8", thumb: "w-4", slide: "left-4" },
            base: { track: "h-4.5 w-9", thumb: "w-4.5", slide: "left-4.5" },
            lg: { track: "h-5 w-10", thumb: "w-5", slide: "left-5" }
          }[c], D = g ? t.checked ? "bg-neutral-500 dark:bg-kumo-base ring-neutral-600 dark:ring-neutral-700" : "bg-neutral-150 dark:bg-kumo-base ring-kumo-hairline" : t.checked ? "bg-blue-500 dark:bg-blue-600 ring-blue-600 dark:ring-blue-500" : "bg-neutral-200 dark:bg-neutral-700 ring-neutral-300 dark:ring-neutral-600", G = g ? t.checked ? "bg-kumo-base dark:bg-neutral-400" : "bg-kumo-base dark:bg-neutral-850" : t.checked ? "bg-kumo-base dark:bg-blue-300" : "bg-kumo-base dark:bg-neutral-850", K = i(
            "relative inline-flex items-center ring cursor-pointer border-none p-0",
            "focus:outline-none focus-visible:ring-2 focus-visible:ring-kumo-brand",
            "transition-colors duration-150 ease-out motion-reduce:transition-none",
            "disabled:cursor-not-allowed disabled:opacity-50",
            m.track,
            p,
            D,
            a,
            h
          ), M = i(
            "absolute top-0 bottom-0 shadow-[0_0_1px_0.5px_var(--color-kumo-shadow-edge),0_1px_2px_var(--color-kumo-shadow-drop)]",
            m.thumb,
            p,
            G,
            "transition-all duration-150 ease-out motion-reduce:transition-none",
            t.checked ? m.slide : "left-0"
          ), I = d.role ?? q ?? "switch", O = I === "switch" ? { "aria-checked": t.checked } : { "aria-pressed": t.checked };
          return /* @__PURE__ */ e(
            "button",
            {
              ...y,
              ...d,
              ref: b,
              "data-kumo-component": "Switch",
              type: "button",
              role: I,
              ...O,
              "aria-busy": N || void 0,
              "aria-label": d["aria-label"] ?? v,
              className: K,
              children: /* @__PURE__ */ e("div", { className: M })
            }
          );
        }
      }
    );
    return s ? /* @__PURE__ */ e(
      W,
      {
        label: s,
        required: f,
        labelTooltip: u,
        controlFirst: w,
        children: _
      }
    ) : _;
  }
);
U.displayName = "Switch";
const j = A(
  ({
    className: a,
    checked: o,
    disabled: n,
    size: c = "base",
    variant: l = "default",
    label: s,
    onCheckedChange: u,
    transitioning: f
  }, w) => {
    const { controlFirst: x } = V(T);
    return /* @__PURE__ */ z(
      "label",
      {
        "data-kumo-component": "Switch",
        "data-kumo-part": "item-label",
        className: i(
          "m-0 relative inline-flex items-center gap-2",
          // Control first (default): switch before label
          // Label first: label before switch using flex-row-reverse
          !x && "flex-row-reverse justify-end",
          n ? "cursor-not-allowed opacity-50" : "cursor-pointer",
          a
        ),
        children: [
          /* @__PURE__ */ e(
            P,
            {
              ref: w,
              checked: o,
              disabled: n,
              onCheckedChange: u,
              nativeButton: !0,
              render: (N, r) => {
                const {
                  ref: d,
                  className: S,
                  role: v,
                  "aria-checked": _,
                  "aria-pressed": R,
                  ...t
                } = N, b = l === "neutral", h = "rounded-[5px] supports-[corner-shape:squircle]:rounded-[10px] [corner-shape:squircle]", k = {
                  sm: { track: "h-4 w-8", thumb: "w-4", slide: "left-4" },
                  base: { track: "h-4.5 w-9", thumb: "w-4.5", slide: "left-4.5" },
                  lg: { track: "h-5 w-10", thumb: "w-5", slide: "left-5" }
                }[c], F = b ? r.checked ? "bg-neutral-500 dark:bg-kumo-base ring-neutral-600 dark:ring-neutral-700" : "bg-neutral-150 dark:bg-kumo-base ring-kumo-hairline" : r.checked ? "bg-blue-500 dark:bg-blue-600 ring-blue-600 dark:ring-blue-500" : "bg-neutral-200 dark:bg-neutral-700 ring-neutral-300 dark:ring-neutral-600", y = b ? r.checked ? "bg-kumo-base dark:bg-neutral-400" : "bg-kumo-base dark:bg-neutral-850" : r.checked ? "bg-kumo-base dark:bg-blue-300" : "bg-kumo-base dark:bg-neutral-850", g = i(
                  "relative inline-flex items-center ring cursor-pointer border-none p-0",
                  "focus:outline-none focus:ring-kumo-focus/50 focus-visible:ring-2 focus-visible:ring-kumo-brand",
                  "transition-colors duration-150 ease-out motion-reduce:transition-none",
                  "disabled:cursor-not-allowed disabled:opacity-50",
                  k.track,
                  h,
                  F,
                  S
                ), p = i(
                  "absolute top-0 bottom-0 shadow-[0_0_1px_0.5px_var(--color-kumo-shadow-edge),0_1px_2px_var(--color-kumo-shadow-drop)]",
                  k.thumb,
                  h,
                  y,
                  "transition-all duration-150 ease-out motion-reduce:transition-none",
                  r.checked ? k.slide : "left-0"
                ), C = v ?? "switch", m = C === "switch" ? { "aria-checked": r.checked } : { "aria-pressed": r.checked };
                return /* @__PURE__ */ e(
                  "button",
                  {
                    ...t,
                    ref: d,
                    "data-kumo-component": "Switch",
                    "data-kumo-part": "item",
                    type: "button",
                    role: C,
                    ...m,
                    "aria-busy": f || void 0,
                    className: g,
                    children: /* @__PURE__ */ e("div", { className: p })
                  }
                );
              }
            }
          ),
          /* @__PURE__ */ e("span", { className: "text-base font-medium text-kumo-default", children: s })
        ]
      }
    );
  }
);
j.displayName = "Switch.Item";
function B({ children: a, className: o }) {
  return /* @__PURE__ */ e(
    L,
    {
      className: i("text-base font-medium text-kumo-default", o),
      children: a
    }
  );
}
B.displayName = "Switch.Legend";
function Q({
  legend: a,
  children: o,
  error: n,
  description: c,
  disabled: l,
  controlFirst: s = !0,
  className: u
}) {
  return /* @__PURE__ */ e(T.Provider, { value: { controlFirst: s }, children: /* @__PURE__ */ z(
    E,
    {
      className: i("flex flex-col gap-4", u),
      disabled: l,
      children: [
        a && /* @__PURE__ */ e(L, { className: "text-base font-medium text-kumo-default", children: a }),
        /* @__PURE__ */ e("div", { className: "flex flex-col gap-2", children: o }),
        n && /* @__PURE__ */ e("p", { className: "text-sm text-kumo-danger", children: n }),
        c && /* @__PURE__ */ e("p", { className: "text-sm text-kumo-subtle", children: c })
      ]
    }
  ) });
}
const J = Object.assign(U, {
  Item: j,
  Group: Q,
  Legend: B
});
J.displayName = "Switch";
export {
  re as K,
  J as S,
  te as a
};
//# sourceMappingURL=switch-ljsq915e0l1a5mjd.js.map
