welcome-ui/dist/Toggle.js

Customizable design system with react, typescript, tailwindcss and ariakit.

"use client";
import { jsxs as b, jsx as _ } from "react/jsx-runtime";
import { C as d } from "./KPUWHTQJ-CKDqSAor.js";
import { forwardRef as w } from "react";
import { useField as x } from "./Field.js";
import { c as f } from "./index-PAaZGbyz.js";
const z = "_root_1p0tb_2", g = "_wrapper_1p0tb_91", h = "_checked_1p0tb_112", u = {
  root: z,
  "size-md": "_size-md_1p0tb_64",
  "size-sm": "_size-sm_1p0tb_73",
  "size-xs": "_size-xs_1p0tb_82",
  wrapper: g,
  "icon-wrapper": "_icon-wrapper_1p0tb_97",
  checked: h
}, r = f(u), C = w(
  ({ checked: s, checkedIcon: o, className: i, disabled: a, onClick: e, size: t = "xs", uncheckedIcon: p, ...c }, m) => {
    const { getInputProps: n } = x(), l = o && p;
    return /* @__PURE__ */ b("div", { className: r("wrapper"), onClick: e, children: [
      l ? /* @__PURE__ */ _(
        "div",
        {
          className: r("icon-wrapper", `size-${t}`, s && "checked"),
          onClick: e,
          children: s ? o : p
        }
      ) : null,
      /* @__PURE__ */ _(
        d,
        {
          checked: s,
          className: r("root", `size-${t}`, i),
          disabled: a,
          ref: m,
          ...n(c)
        }
      )
    ] });
  }
);
export {
  C as Toggle
};