bo-ui-kit 0.1.0

package/dist/index.js

@@ -0,0 +1,665 @@
+import { jsxs as h, jsx as t } from "react/jsx-runtime";
+import * as i from "react";
+import { cva as j } from "class-variance-authority";
+import { clsx as G } from "clsx";
+import { twMerge as B } from "tailwind-merge";
+function f(...e) {
+  return B(G(e));
+}
+const P = j(
+  // 공통: gap-0 + 라벨 자체 padding 으로 Figma 의 LabelFrame 구조를 재현
+  "inline-flex shrink-0 items-center justify-center gap-0 whitespace-nowrap border font-medium transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "border-primary bg-primary text-primary-foreground shadow-btn hover:bg-primary/90",
+        outline: "border-border bg-card text-foreground shadow-xs hover:bg-secondary/50",
+        secondary: "border-transparent bg-secondary text-foreground hover:bg-secondary/80",
+        destructive: "border-border bg-destructive text-primary-foreground shadow-btn hover:bg-destructive/90",
+        "destructive-outline": "border-border bg-background text-destructive-foreground shadow-xs hover:bg-destructive/10",
+        ghost: "border-transparent bg-transparent text-foreground hover:bg-secondary",
+        link: "border-transparent bg-transparent text-foreground underline-offset-4 hover:underline"
+      },
+      size: {
+        xs: "h-6 min-w-6 rounded-radius-lg px-1 text-xs [&_svg]:size-4",
+        sm: "h-7 min-w-7 rounded-radius px-1.5 text-sm [&_svg]:size-4",
+        md: "h-8 min-w-8 rounded-radius px-1.5 text-sm [&_svg]:size-[18px]",
+        lg: "h-9 min-w-9 rounded-radius px-2 text-sm [&_svg]:size-5 [&_[data-label]]:px-1.5",
+        xl: "h-10 min-w-10 rounded-radius px-2.5 text-base [&_svg]:size-5 [&_[data-label]]:px-1.5"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "md"
+    }
+  }
+), q = i.forwardRef(
+  ({ className: e, variant: n, size: l, type: o = "button", icon: a, rightIcon: d, children: s, ...u }, c) => /* @__PURE__ */ h(
+    "button",
+    {
+      ref: c,
+      type: o,
+      className: f(P({ variant: n, size: l }), e),
+      "data-node-id": "1692:74",
+      ...u,
+      children: [
+        a ? /* @__PURE__ */ t("span", { className: "inline-flex shrink-0 opacity-80", children: a }) : null,
+        s != null ? /* @__PURE__ */ t("span", { "data-label": !0, className: "px-1", children: s }) : null,
+        d ? /* @__PURE__ */ t("span", { className: "inline-flex shrink-0 opacity-80", children: d }) : null
+      ]
+    }
+  )
+);
+q.displayName = "Button";
+const C = i.forwardRef(
+  ({
+    checked: e,
+    defaultChecked: n,
+    indeterminate: l = !1,
+    disabled: o = !1,
+    mobile: a = !1,
+    onCheckedChange: d,
+    className: s,
+    ...u
+  }, c) => {
+    const x = e !== void 0, [b, g] = i.useState(n ?? !1), k = x ? e : b, m = i.useRef(null);
+    i.useImperativeHandle(c, () => m.current);
+    const v = k && !l, y = k && l;
+    i.useEffect(() => {
+      m.current && (m.current.indeterminate = y);
+    }, [y]);
+    const N = (w) => {
+      const z = w.target.checked;
+      x || g(z), d == null || d(z);
+    };
+    return /* @__PURE__ */ h(
+      "label",
+      {
+        className: f(
+          "inline-flex shrink-0 items-center justify-center",
+          o ? "cursor-not-allowed opacity-[0.64]" : "cursor-pointer",
+          s
+        ),
+        children: [
+          /* @__PURE__ */ t(
+            "input",
+            {
+              ref: m,
+              type: "checkbox",
+              className: "peer sr-only",
+              checked: x ? e : void 0,
+              defaultChecked: x ? void 0 : n,
+              disabled: o,
+              onChange: N,
+              ...u
+            }
+          ),
+          /* @__PURE__ */ h(
+            "span",
+            {
+              "aria-hidden": !0,
+              className: f(
+                "relative flex items-center justify-center rounded-radius-sm border transition-colors",
+                "peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-1 peer-focus-visible:ring-offset-background",
+                a ? "size-[18px]" : "size-4",
+                v ? "border-transparent bg-primary text-primary-foreground" : "border-input bg-card shadow-xs"
+              ),
+              children: [
+                v && /* @__PURE__ */ t(
+                  "svg",
+                  {
+                    viewBox: "0 0 8 8",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "1.5",
+                    className: a ? "size-2.5" : "size-2",
+                    "aria-hidden": !0,
+                    children: /* @__PURE__ */ t(
+                      "path",
+                      {
+                        d: "M1 4.2 3 6l4-4.5",
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round"
+                      }
+                    )
+                  }
+                ),
+                y && /* @__PURE__ */ t("span", { className: f("h-0.5 rounded-full bg-primary", a ? "w-2" : "w-1.5") })
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+C.displayName = "Checkbox";
+const F = j(
+  "flex w-full items-center gap-1 rounded-radius border bg-card text-sm text-foreground shadow-xs transition-colors focus-within:ring-[3px] focus-within:ring-offset-0 has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-[0.64]",
+  {
+    variants: {
+      inputSize: {
+        sm: "h-7 px-1.5",
+        md: "h-8 px-2",
+        lg: "h-9 px-2"
+      },
+      invalid: {
+        true: "border-destructive focus-within:ring-destructive/[0.15]",
+        false: "border-input focus-within:border-disabled/30 focus-within:ring-disabled/[0.07]"
+      }
+    },
+    defaultVariants: { inputSize: "md", invalid: !1 }
+  }
+), W = i.forwardRef(
+  ({
+    className: e,
+    containerClassName: n,
+    inputSize: l,
+    invalid: o = !1,
+    leftIcon: a,
+    rightIcon: d,
+    prefix: s,
+    suffix: u,
+    type: c = "text",
+    ...x
+  }, b) => /* @__PURE__ */ h(
+    "div",
+    {
+      className: f(F({ inputSize: l, invalid: o }), n),
+      "data-node-id": "7745:699",
+      children: [
+        a ? /* @__PURE__ */ t("span", { className: "inline-flex shrink-0 opacity-80 [&_svg]:size-4", children: a }) : null,
+        s != null ? /* @__PURE__ */ t("span", { className: "shrink-0 text-muted-foreground", children: s }) : null,
+        /* @__PURE__ */ t(
+          "input",
+          {
+            ref: b,
+            type: c,
+            className: f(
+              "min-w-0 flex-1 bg-transparent px-1 text-foreground outline-none placeholder:text-muted-foreground",
+              e
+            ),
+            ...x
+          }
+        ),
+        u != null ? /* @__PURE__ */ t("span", { className: "shrink-0 text-muted-foreground", children: u }) : null,
+        d ? /* @__PURE__ */ t("span", { className: "inline-flex shrink-0 opacity-80 [&_svg]:size-4", children: d }) : null
+      ]
+    }
+  )
+);
+W.displayName = "Input";
+const K = i.forwardRef(
+  ({ className: e, ...n }, l) => /* @__PURE__ */ t(
+    "label",
+    {
+      ref: l,
+      className: f(
+        "inline-flex items-center text-xs font-medium text-foreground",
+        "peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+        e
+      ),
+      "data-node-id": "7658:2157",
+      ...n
+    }
+  )
+);
+K.displayName = "Label";
+const $ = i.forwardRef(
+  ({ className: e, label: n, required: l = !1, htmlFor: o, description: a, error: d, validity: s, children: u, ...c }, x) => /* @__PURE__ */ h(
+    "div",
+    {
+      ref: x,
+      className: f("flex w-full flex-col gap-2", e),
+      "data-node-id": "7745:713",
+      ...c,
+      children: [
+        /* @__PURE__ */ h("div", { className: "flex flex-col gap-1.5", children: [
+          n != null && /* @__PURE__ */ h(
+            "label",
+            {
+              htmlFor: o,
+              className: "flex items-center gap-1.5 text-sm font-medium leading-5 text-foreground",
+              children: [
+                n,
+                l && /* @__PURE__ */ t("span", { className: "text-destructive-foreground", "aria-hidden": !0, children: "*" })
+              ]
+            }
+          ),
+          u
+        ] }),
+        d != null ? /* @__PURE__ */ t("p", { className: "text-xs leading-[14px] tracking-[0.12px] text-destructive-foreground", children: d }) : a != null ? /* @__PURE__ */ t("p", { className: "text-xs leading-[14px] tracking-[0.12px] text-muted-foreground", children: a }) : null,
+        s != null && /* @__PURE__ */ t("div", { className: "rounded-radius-lg bg-secondary p-2", children: /* @__PURE__ */ t("p", { className: "text-xs leading-[14px] tracking-[0.12px] text-foreground", children: s }) })
+      ]
+    }
+  )
+);
+$.displayName = "Field";
+const _ = i.createContext(!1), H = i.forwardRef(
+  ({
+    className: e,
+    isLarge: n = !1,
+    title: l = "Verification code",
+    showTitle: o = !0,
+    belowText: a = "Enter the 6-digit code sent to your email.",
+    showBelowText: d = !0,
+    children: s,
+    ...u
+  }, c) => /* @__PURE__ */ t(_.Provider, { value: n, children: /* @__PURE__ */ h(
+    "div",
+    {
+      ref: c,
+      className: f("flex flex-col items-center gap-2", e),
+      "data-node-id": "8060:1580",
+      ...u,
+      children: [
+        o ? /* @__PURE__ */ t("p", { className: "w-full text-center text-sm font-medium text-foreground", children: l }) : null,
+        /* @__PURE__ */ t("div", { className: "flex items-center justify-center gap-2", children: s }),
+        d ? /* @__PURE__ */ t("p", { className: "w-full text-center text-xs text-muted-foreground", children: a }) : null
+      ]
+    }
+  ) })
+);
+H.displayName = "InputOTP";
+const U = j(
+  "relative flex shrink-0 items-center justify-center rounded-radius border bg-card text-sm text-foreground shadow-xs transition-[color,box-shadow]",
+  {
+    variants: {
+      isLarge: { true: "size-9", false: "size-8" },
+      // active = 다음 입력 위치(캐럿). Figma 는 disabled(#45556c) 색의 테두리 + 부드러운 링.
+      active: {
+        true: "z-10 border-disabled/30 ring-[3px] ring-disabled/20",
+        false: "border-input"
+      }
+    },
+    defaultVariants: { isLarge: !1, active: !1 }
+  }
+), J = i.forwardRef(
+  ({ className: e, char: n, active: l = !1, isLarge: o, ...a }, d) => {
+    const s = i.useContext(_);
+    return /* @__PURE__ */ t(
+      "div",
+      {
+        ref: d,
+        className: f(U({ isLarge: o ?? s, active: l }), e),
+        ...a,
+        children: n != null ? /* @__PURE__ */ t("span", { className: "text-center", children: n }) : null
+      }
+    );
+  }
+);
+J.displayName = "InputOTPSlot";
+const Q = i.forwardRef(({ className: e, ...n }, l) => /* @__PURE__ */ t(
+  "div",
+  {
+    ref: l,
+    role: "separator",
+    className: f("flex w-3 shrink-0 items-center justify-center", e),
+    ...n,
+    children: /* @__PURE__ */ t("div", { className: "h-0.5 w-full rounded-full bg-border" })
+  }
+));
+Q.displayName = "InputOTPSeparator";
+const X = i.forwardRef(
+  ({
+    className: e,
+    value: n = 50,
+    min: l = 0,
+    max: o = 100,
+    label: a = "Label",
+    valueLabel: d,
+    showLabels: s = !0,
+    showSecondaryLabel: u = !0,
+    ...c
+  }, x) => {
+    const b = o - l || 1, g = Math.min(100, Math.max(0, (n - l) / b * 100));
+    return /* @__PURE__ */ h(
+      "div",
+      {
+        ref: x,
+        role: "meter",
+        "aria-valuenow": n,
+        "aria-valuemin": l,
+        "aria-valuemax": o,
+        "aria-label": a,
+        className: f("flex w-full flex-col gap-2", e),
+        "data-node-id": "7664:31",
+        ...c,
+        children: [
+          s ? /* @__PURE__ */ h("div", { className: "flex items-center justify-between", children: [
+            a != null ? /* @__PURE__ */ t("span", { className: "text-xs font-medium text-foreground", children: a }) : null,
+            u ? /* @__PURE__ */ t("span", { className: "text-xs font-medium text-foreground", children: d ?? `${Math.round(g)}%` }) : null
+          ] }) : null,
+          /* @__PURE__ */ t("div", { className: "relative h-2 w-full overflow-hidden bg-input", "data-node-id": "7664:42", children: /* @__PURE__ */ t(
+            "div",
+            {
+              className: "absolute inset-y-0 left-0 bg-primary transition-[width]",
+              style: { width: `${g}%` },
+              "data-node-id": "7664:44"
+            }
+          ) })
+        ]
+      }
+    );
+  }
+);
+X.displayName = "Meter";
+const A = j(
+  "inline-flex shrink-0 items-center justify-center gap-1 rounded-radius-lg text-sm text-foreground transition-colors outline-none focus-visible:ring-[3px] focus-visible:ring-offset-0 focus-visible:ring-disabled/[0.07] disabled:pointer-events-none disabled:opacity-50 data-[state=off]:hover:bg-card/50 data-[state=on]:bg-secondary/[0.64] [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        // 두 변형 모두 1px 테두리를 둬서 정렬/크기가 흔들리지 않게 한다(Default 는 투명 테두리).
+        default: "border border-transparent",
+        outline: "border border-border bg-card shadow-xs"
+      },
+      size: {
+        sm: "h-7 px-1.5",
+        md: "h-8 px-2",
+        lg: "h-9 px-2.5"
+      },
+      iconOnly: {
+        true: "px-0",
+        false: ""
+      }
+    },
+    compoundVariants: [
+      { iconOnly: !0, size: "sm", class: "w-7" },
+      { iconOnly: !0, size: "md", class: "w-8" },
+      { iconOnly: !0, size: "lg", class: "w-9" }
+    ],
+    defaultVariants: { variant: "default", size: "md", iconOnly: !1 }
+  }
+), Y = i.forwardRef(
+  ({
+    className: e,
+    variant: n,
+    size: l,
+    iconOnly: o,
+    pressed: a,
+    defaultPressed: d = !1,
+    onPressedChange: s,
+    onClick: u,
+    ...c
+  }, x) => {
+    const b = a !== void 0, [g, k] = i.useState(d), m = b ? a : g;
+    return /* @__PURE__ */ t(
+      "button",
+      {
+        ref: x,
+        type: "button",
+        "aria-pressed": m,
+        "data-state": m ? "on" : "off",
+        className: f(A({ variant: n, size: l, iconOnly: o }), e),
+        onClick: (v) => {
+          b || k((y) => !y), s == null || s(!m), u == null || u(v);
+        },
+        "data-node-id": "5685:204",
+        ...c
+      }
+    );
+  }
+);
+Y.displayName = "Toggle";
+const M = i.createContext(
+  null
+), Z = i.forwardRef(
+  (e, n) => {
+    const {
+      type: l,
+      variant: o = "outline",
+      size: a = "md",
+      orientation: d = "horizontal",
+      className: s,
+      children: u
+    } = e, c = e.value !== void 0, [x, b] = i.useState(() => e.defaultValue == null ? [] : Array.isArray(e.defaultValue) ? e.defaultValue : [e.defaultValue]), g = c ? Array.isArray(e.value) ? e.value : e.value ? [e.value] : [] : x, k = (m) => {
+      var y, N;
+      let v;
+      l === "single" ? (v = g[0] === m ? [] : [m], c || b(v), (y = e.onValueChange) == null || y.call(
+        e,
+        v[0] ?? ""
+      )) : (v = g.includes(m) ? g.filter((w) => w !== m) : [...g, m], c || b(v), (N = e.onValueChange) == null || N.call(e, v));
+    };
+    return /* @__PURE__ */ t(
+      M.Provider,
+      {
+        value: { value: g, toggle: k, variant: o, size: a, orientation: d },
+        children: /* @__PURE__ */ t(
+          "div",
+          {
+            ref: n,
+            role: "group",
+            "data-node-id": "5686:270",
+            className: f(
+              "inline-flex w-fit overflow-hidden rounded-radius-lg",
+              d === "vertical" ? "flex-col [&>*:not(:first-child)]:-mt-px" : "flex-row [&>*:not(:first-child)]:-ml-px",
+              s
+            ),
+            children: u
+          }
+        )
+      }
+    );
+  }
+);
+Z.displayName = "ToggleGroup";
+const ee = i.forwardRef(({ value: e, iconOnly: n, className: l, onClick: o, ...a }, d) => {
+  const s = i.useContext(M);
+  if (!s) throw new Error("ToggleGroupItem must be used within ToggleGroup");
+  const u = s.value.includes(e);
+  return /* @__PURE__ */ t(
+    "button",
+    {
+      ref: d,
+      type: "button",
+      "aria-pressed": u,
+      "data-state": u ? "on" : "off",
+      className: f(
+        A({ variant: s.variant, size: s.size, iconOnly: n }),
+        // twMerge 가 커스텀 radius 키(rounded-radius-lg)를 충돌로 인식 못 하므로 !important 로 강제.
+        // 그룹이 rounded+overflow-hidden 이라 바깥 모서리는 그룹이 둥글게 클립한다.
+        "!rounded-none focus-visible:z-10",
+        l
+      ),
+      onClick: (c) => {
+        s.toggle(e), o == null || o(c);
+      },
+      ...a
+    }
+  );
+});
+ee.displayName = "ToggleGroupItem";
+const te = j(
+  "flex w-full select-none items-center justify-between gap-1 rounded-radius border bg-card text-sm text-foreground shadow-xs transition-colors outline-none focus-visible:ring-[3px] focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-[0.64]",
+  {
+    variants: {
+      inputSize: { sm: "h-7 px-1.5", md: "h-8 px-2", lg: "h-9 px-2" },
+      invalid: {
+        true: "border-destructive focus-visible:ring-destructive/[0.15]",
+        false: "border-input focus-visible:border-disabled/30 focus-visible:ring-disabled/[0.07]"
+      }
+    },
+    defaultVariants: { inputSize: "md", invalid: !1 }
+  }
+);
+function re({ className: e }) {
+  return /* @__PURE__ */ t(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      className: e,
+      "aria-hidden": !0,
+      children: /* @__PURE__ */ t("path", { d: "m6 9 6 6 6-6", strokeLinecap: "round", strokeLinejoin: "round" })
+    }
+  );
+}
+function ne() {
+  return /* @__PURE__ */ t(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2.2",
+      className: "size-4",
+      "aria-hidden": !0,
+      children: /* @__PURE__ */ t("path", { d: "M20 6 9 17l-5-5", strokeLinecap: "round", strokeLinejoin: "round" })
+    }
+  );
+}
+const se = i.forwardRef(
+  ({
+    options: e,
+    value: n,
+    defaultValue: l,
+    onValueChange: o,
+    placeholder: a = "Select…",
+    disabled: d = !1,
+    inputSize: s,
+    invalid: u,
+    className: c,
+    contentClassName: x,
+    id: b,
+    name: g
+  }, k) => {
+    const m = n !== void 0, [v, y] = i.useState(
+      l
+    ), N = m ? n : v, [w, z] = i.useState(!1), L = i.useRef(null), T = i.useRef(null), I = e.find((r) => r.value === N);
+    i.useEffect(() => {
+      if (!w) return;
+      const r = (p) => {
+        L.current && !L.current.contains(p.target) && z(!1);
+      };
+      return document.addEventListener("mousedown", r), () => document.removeEventListener("mousedown", r);
+    }, [w]), i.useEffect(() => {
+      var R;
+      if (!w) return;
+      const r = (R = T.current) == null ? void 0 : R.querySelectorAll(
+        "[data-select-item]:not([disabled])"
+      );
+      if (!(r != null && r.length)) return;
+      (Array.from(r).find(
+        (S) => S.dataset.value === N
+      ) ?? r[0]).focus();
+    }, [w, N]);
+    const V = (r) => {
+      m || y(r), o == null || o(r), z(!1);
+    }, O = (r) => {
+      var E;
+      const p = Array.from(
+        ((E = T.current) == null ? void 0 : E.querySelectorAll(
+          "[data-select-item]:not([disabled])"
+        )) ?? []
+      ), R = p.findIndex((D) => D === document.activeElement), S = p[(R + r + p.length) % p.length];
+      S == null || S.focus();
+    };
+    return /* @__PURE__ */ h("div", { ref: L, className: "relative", children: [
+      /* @__PURE__ */ h(
+        "button",
+        {
+          ref: k,
+          type: "button",
+          id: b,
+          name: g,
+          disabled: d,
+          "aria-haspopup": "listbox",
+          "aria-expanded": w,
+          "data-node-id": "7751:1561",
+          className: f(te({ inputSize: s, invalid: u }), c),
+          onClick: () => z((r) => !r),
+          onKeyDown: (r) => {
+            (r.key === "ArrowDown" || r.key === "Enter" || r.key === " ") && (r.preventDefault(), z(!0));
+          },
+          children: [
+            /* @__PURE__ */ t(
+              "span",
+              {
+                className: f(
+                  "truncate",
+                  !I && "text-muted-foreground"
+                ),
+                children: I ? I.label : a
+              }
+            ),
+            /* @__PURE__ */ t(
+              re,
+              {
+                className: f(
+                  "size-4 shrink-0 opacity-50 transition-transform",
+                  w && "rotate-180"
+                )
+              }
+            )
+          ]
+        }
+      ),
+      w && /* @__PURE__ */ t(
+        "div",
+        {
+          ref: T,
+          role: "listbox",
+          tabIndex: -1,
+          className: f(
+            "absolute left-0 top-full z-50 mt-1 flex max-h-64 w-full flex-col gap-px overflow-auto rounded-radius-xl border border-border bg-popover p-1 shadow-popover",
+            x
+          ),
+          onKeyDown: (r) => {
+            var p, R;
+            r.key === "Escape" ? (z(!1), (R = (p = L.current) == null ? void 0 : p.querySelector("button")) == null || R.focus()) : r.key === "ArrowDown" ? (r.preventDefault(), O(1)) : r.key === "ArrowUp" && (r.preventDefault(), O(-1));
+          },
+          children: e.map((r) => {
+            const p = r.value === N;
+            return /* @__PURE__ */ h(
+              "button",
+              {
+                type: "button",
+                role: "option",
+                "aria-selected": p,
+                disabled: r.disabled,
+                "data-select-item": "",
+                "data-value": r.value,
+                className: f(
+                  "flex h-7 w-full items-center gap-0.5 rounded-radius-lg px-0.5 text-left text-xs font-medium text-accent-foreground outline-none transition-colors",
+                  "hover:bg-accent focus-visible:bg-accent",
+                  "disabled:pointer-events-none disabled:opacity-[0.64]",
+                  p && "bg-primary/[0.04]"
+                ),
+                onClick: () => V(r.value),
+                children: [
+                  /* @__PURE__ */ t("span", { className: "flex size-7 shrink-0 items-center justify-center", children: p ? /* @__PURE__ */ t(ne, {}) : null }),
+                  r.icon ? /* @__PURE__ */ t("span", { className: "inline-flex size-4 shrink-0 items-center justify-center [&_svg]:size-4", children: r.icon }) : null,
+                  /* @__PURE__ */ t("span", { className: "min-w-0 flex-1 truncate", children: r.label })
+                ]
+              },
+              r.value
+            );
+          })
+        }
+      )
+    ] });
+  }
+);
+se.displayName = "Select";
+export {
+  q as Button,
+  C as Checkbox,
+  $ as Field,
+  W as Input,
+  H as InputOTP,
+  Q as InputOTPSeparator,
+  J as InputOTPSlot,
+  K as Label,
+  X as Meter,
+  se as Select,
+  Y as Toggle,
+  Z as ToggleGroup,
+  ee as ToggleGroupItem,
+  P as buttonVariants,
+  F as inputVariants,
+  te as selectTriggerVariants,
+  U as slotVariants,
+  A as toggleVariants
+};

package/dist/lib/utils.d.ts

@@ -0,0 +1,3 @@
+import { type ClassValue } from "clsx";
+/** Tailwind 클래스 병합 유틸 (clsx + tailwind-merge) */
+export declare function cn(...inputs: ClassValue[]): string;