import { jsxs as p, jsx as r } from "react/jsx-runtime";
import { useId as h } from "react";
import { SwitchButton as g } from "./SwitchPrimitive.js";
import a from "../box/Box.js";
import { c as e } from "../../index-BtlgVD4m.js";
import u from "../label/Label.js";
import w from "../text/Text.js";
import y from "../error-message/ErrorMessage.js";
const x = ({
  ref: l,
  label: t,
  description: s,
  value: c,
  onChange: f,
  disabled: m,
  textAlign: o = "right",
  errorMessage: n,
  ...d
}) => {
  const i = `jtl-switch-${h()}`;
  return /* @__PURE__ */ p(
    "div",
    {
      className: e("relative grid grid-flow-row gap-x-[var(--spacing-2)]", t && s && " grid-cols-2", m && "cursor-not-allowed"),
      style: { gridTemplateColumns: o === "left" ? "1fr 44px" : "44px 1fr" },
      children: [
        /* @__PURE__ */ r(a, { className: e("flex items-center leading-none", o === "left" && "order-2"), children: /* @__PURE__ */ r(g, { value: c, onChange: f, disabled: m, id: i, ...d, ref: l }) }),
        t && /* @__PURE__ */ r(a, { className: e("flex items-center leading-none", o === "left" && "order-1"), children: /* @__PURE__ */ r(
          u,
          {
            htmlFor: i,
            className: e(
              m ? "cursor-not-allowed opacity-[var(--opacity-opacity-70)]" : "cursor-pointer",
              "text-[length:var(--typography-base-sizes-small-font-size)]",
              "leading-[var(--height-h-4)]",
              "text-[var(--font-weight-medium)]"
            ),
            children: t
          }
        ) }),
        t && s && /* @__PURE__ */ r(a, { className: e("empty-cell", o === "left" && "order-4") }),
        s && /* @__PURE__ */ r(a, { className: e("flex justify-start", o === "left" && (t ? "order-3" : "order-1")), children: /* @__PURE__ */ r(w, { type: "muted", weight: "regular", children: s }) }),
        /* @__PURE__ */ r(y, { message: n })
      ]
    }
  );
};
x.displayName = "Switch";
export {
  x as default
};
//# sourceMappingURL=Switch.js.map
