welcome-ui/dist/Toggle.js

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

"use client";
import './Toggle.css';
import { jsxs as d, jsx as s } from "react/jsx-runtime";
import { a as f } from "./I7KWAPMF-DQWZpGyL.js";
import { forwardRef as h } from "react";
import { useField as w } from "./Field.js";
import { Icon as a } from "./Icon.js";
import { c as u } from "./index-B6iGEm-i.js";
const z = "_root_1g41s_2", k = "_wrapper_1g41s_100", x = "_checked_1g41s_120", N = "_disabled_1g41s_124", b = {
  root: z,
  "size-sm": "_size-sm_1g41s_82",
  "size-md": "_size-md_1g41s_88",
  "size-lg": "_size-lg_1g41s_94",
  wrapper: k,
  "icon-wrapper": "_icon-wrapper_1g41s_106",
  checked: x,
  disabled: N
}, r = u(b), y = h(
  ({ checked: e, className: i, disabled: o, onClick: t, size: c = "md", withVisibilityIcon: l, ...n }, p) => {
    const { getInputProps: m } = w(), _ = m(n), g = o ? null : t;
    return /* @__PURE__ */ d("div", { className: r("wrapper", "field-input"), onClick: g, children: [
      l ? /* @__PURE__ */ s(
        "div",
        {
          className: r(
            "icon-wrapper",
            `size-${c}`,
            e && "checked",
            o && "disabled"
          ),
          children: e ? /* @__PURE__ */ s(a, { name: "eye" }) : /* @__PURE__ */ s(a, { name: "eye-slash" })
        }
      ) : null,
      /* @__PURE__ */ s(
        f,
        {
          checked: e,
          className: r("root", `size-${c}`, i),
          disabled: o,
          ref: p,
          ..._
        }
      )
    ] });
  }
);
y.displayName = "Toggle";
export {
  y as Toggle,
  b as toggleClasses
};