@dimasbaguspm/versaur 0.0.0

package/dist/chip-input-C1PJPDFq.js

@@ -0,0 +1,189 @@
+import { c as w, j as e } from "./index-DU1SCUkk.js";
+import x, { createContext as N, useContext as I } from "react";
+import { c as f } from "./cn-Ca4KprQ1.js";
+import { Check as k } from "lucide-react";
+const v = N(
+  null
+), O = () => {
+  const s = I(v);
+  if (!s)
+    throw new Error("useChipInputContext must be used within ChipInputContext");
+  return s;
+}, R = w(
+  "inline-flex items-center px-2 py-1 text-xs bg-neutral rounded-full font-medium transition-colors duration-200 cursor-pointer border border-slate-100",
+  {
+    variants: {
+      variant: {
+        primary: [
+          "hover:bg-coral/10",
+          "hover:border-coral/30",
+          "focus:border-coral/30",
+          "data-[selected=true]:bg-coral/10",
+          "data-[selected=true]:border-coral"
+        ].join(" "),
+        secondary: [
+          "hover:bg-sage/10",
+          "hover:border-sage/30",
+          "focus:border-sage/30",
+          "data-[selected=true]:bg-sage/10",
+          "data-[selected=true]:border-sage"
+        ].join(" "),
+        tertiary: [
+          "hover:bg-mist/10",
+          "hover:border-mist/30",
+          "focus:border-mist/30",
+          "data-[selected=true]:bg-mist/10",
+          "data-[selected=true]:border-mist"
+        ].join(" "),
+        ghost: [
+          "hover:bg-slate/10",
+          "hover:border-slate/30",
+          "focus:border-slate/30",
+          "data-[selected=true]:bg-slate/10",
+          "data-[selected=true]:border-slate"
+        ].join(" "),
+        neutral: [
+          "hover:bg-gray/10",
+          "hover:border-gray/30",
+          "focus:border-gray/30",
+          "data-[selected=true]:bg-gray/10",
+          "data-[selected=true]:border-gray"
+        ].join(" "),
+        success: [
+          "hover:bg-success/10",
+          "hover:border-success/30",
+          "focus:border-success/30",
+          "data-[selected=true]:bg-success/10",
+          "data-[selected=true]:border-success"
+        ].join(" "),
+        info: [
+          "hover:bg-info/10",
+          "hover:border-info/30",
+          "focus:border-info/30",
+          "data-[selected=true]:bg-info/10",
+          "data-[selected=true]:border-info"
+        ].join(" "),
+        warning: [
+          "hover:bg-warning/10",
+          "hover:border-warning/30",
+          "focus:border-warning/30",
+          "data-[selected=true]:bg-warning/10",
+          "data-[selected=true]:border-warning"
+        ].join(" "),
+        danger: [
+          "hover:bg-danger/10",
+          "hover:border-danger/30",
+          "focus:border-danger/30",
+          "data-[selected=true]:bg-danger/10",
+          "data-[selected=true]:border-danger"
+        ].join(" ")
+      },
+      selected: {
+        true: "",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      variant: "primary",
+      selected: !1
+    }
+  }
+), j = x.forwardRef(({ children: s, className: d, disabled: c, id: i, value: o, ...l }, g) => {
+  const a = O(), b = x.useId(), u = i || b, n = c || a.disabled, r = a.error ? "danger" : a.variant || "primary", t = a.value?.includes(o) ?? !1, h = (y) => {
+    if (!n) {
+      const p = a.value || [];
+      let m;
+      t ? m = p.filter((C) => C !== o) : m = [...p, o], a.onChange?.(m);
+    }
+    l.onChange?.(y);
+  };
+  return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+    /* @__PURE__ */ e.jsx(
+      "input",
+      {
+        ref: g,
+        type: "checkbox",
+        id: u,
+        name: `${a.name}[]`,
+        value: o,
+        checked: t,
+        disabled: n,
+        onChange: h,
+        className: "sr-only",
+        ...l
+      }
+    ),
+    /* @__PURE__ */ e.jsx(
+      "label",
+      {
+        htmlFor: u,
+        "data-selected": t,
+        className: f(
+          R({
+            variant: r,
+            selected: t
+          }),
+          n && "opacity-50 cursor-not-allowed pointer-events-none",
+          d
+        ),
+        children: /* @__PURE__ */ e.jsxs("span", { className: "flex items-center", children: [
+          /* @__PURE__ */ e.jsx(
+            "span",
+            {
+              className: f(
+                "flex items-center",
+                "transition-transform transition-opacity duration-200",
+                t ? "opacity-100 scale-100 mr-1" : "opacity-0 scale-75"
+              ),
+              "aria-hidden": "true",
+              children: t && /* @__PURE__ */ e.jsx(
+                k,
+                {
+                  size: 16,
+                  className: r === "primary" ? "text-coral" : r === "secondary" ? "text-sage" : r === "tertiary" ? "text-mist" : r === "ghost" ? "text-slate" : r === "success" ? "text-success" : r === "info" ? "text-info" : r === "warning" ? "text-warning" : r === "danger" ? "text-danger" : "text-coral"
+                }
+              )
+            }
+          ),
+          s
+        ] })
+      }
+    )
+  ] });
+});
+j.displayName = "ChipOption";
+const V = x.forwardRef(
+  ({
+    variant: s = "primary",
+    label: d,
+    helperText: c,
+    error: i,
+    className: o,
+    disabled: l,
+    name: g,
+    value: a = [],
+    onChange: b,
+    children: u,
+    ...n
+  }, r) => {
+    const t = !!i, h = {
+      variant: s,
+      disabled: l,
+      error: t,
+      name: g,
+      value: a,
+      onChange: b
+    };
+    return /* @__PURE__ */ e.jsx(v.Provider, { value: h, children: /* @__PURE__ */ e.jsxs("div", { ref: r, className: f("w-full", o), ...n, children: [
+      d && /* @__PURE__ */ e.jsx("div", { className: "block text-sm font-medium text-foreground mb-3", children: d }),
+      /* @__PURE__ */ e.jsx("div", { className: "flex flex-wrap gap-2", children: u }),
+      t && /* @__PURE__ */ e.jsx("div", { className: "mt-2 text-sm text-danger", role: "alert", children: i }),
+      !t && c && /* @__PURE__ */ e.jsx("div", { className: "mt-2 text-sm text-gray-600", children: c })
+    ] }) });
+  }
+), B = Object.assign(V, {
+  Option: j
+});
+export {
+  B as C
+};