@drjoshcsimmons/scl 0.1.0 → 0.1.2

package/dist/index13.js

@@ -1,100 +1,139 @@
-import { jsx as t, jsxs as i } from "react/jsx-runtime";
-import * as l from "react";
-import { Root as g, Portal as u, Trigger as x, Close as n, Overlay as d, Content as r, Title as c, Description as m } from "./index59.js";
-import { cn as s } from "./index2.js";
-import y from "./index60.js";
-const T = g, j = x, N = u, F = n, f = l.forwardRef(({ className: a, ...e }, o) => /* @__PURE__ */ t(
-  d,
-  {
-    ref: o,
-    className: s(
-      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      a
-    ),
-    ...e
-  }
-));
-f.displayName = d.displayName;
-const D = l.forwardRef(({ className: a, children: e, ...o }, p) => /* @__PURE__ */ i(N, { children: [
-  /* @__PURE__ */ t(f, {}),
-  /* @__PURE__ */ i(
-    r,
-    {
-      ref: p,
-      className: s(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
-        a
-      ),
-      ...o,
-      children: [
-        e,
-        /* @__PURE__ */ i(n, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground", children: [
-          /* @__PURE__ */ t(y, { className: "h-4 w-4" }),
-          /* @__PURE__ */ t("span", { className: "sr-only", children: "Close" })
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import * as h from "react";
+import { cn as f } from "./index2.js";
+import { Popover as v, PopoverTrigger as C, PopoverContent as S } from "./index21.js";
+import { Button as O } from "./index9.js";
+import j from "./index59.js";
+import { Command as k, CommandInput as P, CommandList as R, CommandEmpty as B, CommandGroup as I, CommandItem as L } from "./index14.js";
+import M from "./index57.js";
+const D = h.forwardRef(
+  ({
+    options: s,
+    value: l,
+    onValueChange: c,
+    placeholder: b = "Select option...",
+    searchPlaceholder: w = "Search...",
+    emptyText: x = "No option found.",
+    className: N,
+    disabled: u = !1
+  }, i) => {
+    const [n, t] = h.useState(!1), m = s.find((o) => o.value === l);
+    return /* @__PURE__ */ a(v, { open: n, onOpenChange: t, children: [
+      /* @__PURE__ */ e(C, { asChild: !0, children: /* @__PURE__ */ a(
+        O,
+        {
+          ref: i,
+          variant: "outline",
+          role: "combobox",
+          "aria-expanded": n,
+          className: f("w-[200px] justify-between", N),
+          disabled: u,
+          children: [
+            /* @__PURE__ */ e("span", { className: "truncate", children: m ? m.label : b }),
+            /* @__PURE__ */ e(j, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ e(S, { className: "w-[200px] p-0", children: /* @__PURE__ */ a(k, { children: [
+        /* @__PURE__ */ e(P, { placeholder: w }),
+        /* @__PURE__ */ a(R, { children: [
+          /* @__PURE__ */ e(B, { children: x }),
+          /* @__PURE__ */ e(I, { children: s.map((o) => /* @__PURE__ */ a(
+            L,
+            {
+              value: o.value,
+              onSelect: (d) => {
+                c == null || c(d === l ? "" : d), t(!1);
+              },
+              disabled: o.disabled,
+              children: [
+                /* @__PURE__ */ e(
+                  M,
+                  {
+                    className: f(
+                      "mr-2 h-4 w-4",
+                      l === o.value ? "opacity-100" : "opacity-0"
+                    )
+                  }
+                ),
+                o.label
+              ]
+            },
+            o.value
+          )) })
         ] })
-      ]
-    }
-  )
-] }));
-D.displayName = r.displayName;
-const b = ({
-  className: a,
-  ...e
-}) => /* @__PURE__ */ t(
-  "div",
-  {
-    className: s(
-      "flex flex-col space-y-1.5 text-center sm:text-left",
-      a
-    ),
-    ...e
+      ] }) })
+    ] });
   }
 );
-b.displayName = "DialogHeader";
-const h = ({
-  className: a,
-  ...e
-}) => /* @__PURE__ */ t(
-  "div",
-  {
-    className: s(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      a
-    ),
-    ...e
+D.displayName = "Combobox";
+const E = h.forwardRef(
+  ({
+    options: s,
+    value: l = [],
+    onValueChange: c,
+    placeholder: b = "Select options...",
+    searchPlaceholder: w = "Search...",
+    emptyText: x = "No option found.",
+    className: N,
+    disabled: u = !1,
+    maxSelected: i
+  }, n) => {
+    const [t, m] = h.useState(!1), o = l.map((r) => {
+      var p;
+      return (p = s.find((y) => y.value === r)) == null ? void 0 : p.label;
+    }).filter(Boolean).join(", "), d = (r) => {
+      const p = l.includes(r) ? l.filter((y) => y !== r) : i && l.length >= i ? l : [...l, r];
+      c == null || c(p);
+    };
+    return /* @__PURE__ */ a(v, { open: t, onOpenChange: m, children: [
+      /* @__PURE__ */ e(C, { asChild: !0, children: /* @__PURE__ */ a(
+        O,
+        {
+          ref: n,
+          variant: "outline",
+          role: "combobox",
+          "aria-expanded": t,
+          className: f("w-[200px] justify-between", N),
+          disabled: u,
+          children: [
+            /* @__PURE__ */ e("span", { className: "truncate", children: o || b }),
+            /* @__PURE__ */ e(j, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ e(S, { className: "w-[200px] p-0", children: /* @__PURE__ */ a(k, { children: [
+        /* @__PURE__ */ e(P, { placeholder: w }),
+        /* @__PURE__ */ a(R, { children: [
+          /* @__PURE__ */ e(B, { children: x }),
+          /* @__PURE__ */ e(I, { children: s.map((r) => /* @__PURE__ */ a(
+            L,
+            {
+              value: r.value,
+              onSelect: () => d(r.value),
+              disabled: r.disabled,
+              children: [
+                /* @__PURE__ */ e(
+                  M,
+                  {
+                    className: f(
+                      "mr-2 h-4 w-4",
+                      l.includes(r.value) ? "opacity-100" : "opacity-0"
+                    )
+                  }
+                ),
+                r.label
+              ]
+            },
+            r.value
+          )) })
+        ] })
+      ] }) })
+    ] });
   }
 );
-h.displayName = "DialogFooter";
-const w = l.forwardRef(({ className: a, ...e }, o) => /* @__PURE__ */ t(
-  c,
-  {
-    ref: o,
-    className: s(
-      "text-lg font-semibold leading-none tracking-tight",
-      a
-    ),
-    ...e
-  }
-));
-w.displayName = c.displayName;
-const v = l.forwardRef(({ className: a, ...e }, o) => /* @__PURE__ */ t(
-  m,
-  {
-    ref: o,
-    className: s("text-sm text-muted-foreground", a),
-    ...e
-  }
-));
-v.displayName = m.displayName;
+E.displayName = "ComboboxMulti";
 export {
-  T as Dialog,
-  F as DialogClose,
-  D as DialogContent,
-  v as DialogDescription,
-  h as DialogFooter,
-  b as DialogHeader,
-  f as DialogOverlay,
-  N as DialogPortal,
-  w as DialogTitle,
-  j as DialogTrigger
+  D as Combobox,
+  E as ComboboxMulti
 };