@nipsys/shadcn-lsd 0.2.3 → 0.2.5

package/dist/Autocomplete-DI2nShZk.js

@@ -0,0 +1,216 @@
+import { jsxs as w, jsx as r } from "react/jsx-runtime";
+import * as l from "react";
+import { Popover as B } from "./components/ui/popover/Popover.js";
+import { c as t } from "./utils-DtaLkIY8.js";
+import { PopoverTrigger as H } from "./components/ui/popover/PopoverTrigger.js";
+import { AutocompleteContent as W } from "./components/ui/autocomplete/AutocompleteList.js";
+import { X } from "./x-B9bYxG31.js";
+const Y = {
+  xs: {
+    container: "lsd:w-[140px]",
+    label: "lsd:mb-[var(--lsd-spacing-smaller)] lsd:ml-[var(--lsd-spacing-small)]",
+    inputContainer: "lsd:h-[var(--lsd-spacing-larger)]",
+    input: "lsd:px-[var(--lsd-spacing-smaller)] lsd:py-[var(--lsd-spacing-smallest)]",
+    icon: "lsd:px-[var(--lsd-spacing-smaller)] lsd:py-[var(--lsd-spacing-smaller)]"
+  },
+  sm: {
+    container: "lsd:w-[164px]",
+    label: "lsd:mb-[var(--lsd-spacing-smaller)] lsd:ml-[var(--lsd-spacing-small)]",
+    inputContainer: "lsd:h-[var(--lsd-spacing-largest)]",
+    input: "lsd:px-[var(--lsd-spacing-small)] lsd:py-[var(--lsd-spacing-smaller)]",
+    icon: "lsd:px-[var(--lsd-spacing-smaller)] lsd:py-[var(--lsd-spacing-smaller)]"
+  },
+  md: {
+    container: "lsd:w-[188px]",
+    label: "lsd:mb-[var(--lsd-spacing-smaller)] lsd:ml-[var(--lsd-spacing-base)]",
+    inputContainer: "lsd:h-8",
+    input: "lsd:px-[var(--lsd-spacing-base)] lsd:py-[var(--lsd-spacing-smaller)]",
+    icon: "lsd:px-[var(--lsd-spacing-small)] lsd:py-[var(--lsd-spacing-smaller)]"
+  },
+  lg: {
+    container: "lsd:w-[208px]",
+    label: "lsd:mb-[var(--lsd-spacing-smaller)] lsd:ml-[var(--lsd-spacing-base)]",
+    inputContainer: "lsd:h-10",
+    input: "lsd:px-[var(--lsd-spacing-base)] lsd:py-[var(--lsd-spacing-small)]",
+    icon: "lsd:px-[var(--lsd-spacing-base)] lsd:py-[var(--lsd-spacing-small)]"
+  },
+  xl: {
+    container: "lsd:w-[240px]",
+    label: "lsd:mb-[var(--lsd-spacing-smaller)] lsd:ml-[var(--lsd-spacing-base)]",
+    inputContainer: "lsd:h-12",
+    input: "lsd:px-[var(--lsd-spacing-large)] lsd:py-[var(--lsd-spacing-small)]",
+    icon: "lsd:px-[var(--lsd-spacing-base)] lsd:py-[var(--lsd-spacing-base)]"
+  }
+}, Z = 300;
+function q({
+  onOptionsFetch: a,
+  searchText: n,
+  open: c,
+  externalIsLoading: d
+}) {
+  const [y, v] = l.useState(
+    []
+  ), [p, g] = l.useState(!1), s = d !== void 0 ? d : p;
+  return l.useEffect(() => {
+    if (a && c && d === void 0) {
+      g(!0);
+      const f = async () => {
+        try {
+          const i = await a(n);
+          v(i);
+        } catch (i) {
+          console.error("Error fetching options:", i), v([]);
+        } finally {
+          g(!1);
+        }
+      }, h = setTimeout(() => {
+        f();
+      }, Z);
+      return () => clearTimeout(h);
+    }
+  }, [a, n, c, d]), { asyncOptions: y, isLoading: s };
+}
+const G = l.forwardRef(
+  ({
+    options: a,
+    onOptionsFetch: n,
+    placeholder: c = "Search...",
+    emptyText: d = "No results found.",
+    loadingText: y = "Loading...",
+    className: v,
+    onValueChange: p,
+    onClear: g,
+    disabled: s = !1,
+    label: f,
+    size: h = "md",
+    icon: i,
+    error: T = !1,
+    variant: I = "outlined",
+    clearable: P = !1,
+    value: m,
+    isLoading: R,
+    ...S
+  }, _) => {
+    const [E, A] = l.useState(!1), [j, N] = l.useState(""), x = m !== void 0 ? m : j, [u, b] = l.useState(""), O = l.useRef(null);
+    l.useImperativeHandle(_, () => O.current);
+    const { asyncOptions: C, isLoading: k } = q({
+      onOptionsFetch: n,
+      searchText: u,
+      open: E,
+      externalIsLoading: R
+    }), M = l.useCallback(
+      (e) => {
+        m === void 0 && N(e), b(""), A(!1), p?.(e);
+      },
+      [p, m]
+    ), U = () => {
+      m === void 0 && N(""), b(""), p?.(""), g?.();
+    }, D = l.useMemo(() => n ? C : a ? u ? a.filter(
+      (e) => e.label.toLowerCase().startsWith(u.toLowerCase())
+    ) : a : [], [a, C, u, n]), L = S.id || "autocomplete-input", o = Y[h], z = x && (a?.find((e) => e.value === x)?.label || C?.find((e) => e.value === x)?.label) || "";
+    return /* @__PURE__ */ w(
+      "div",
+      {
+        ...S,
+        className: t("lsd:box-border", o.container, v),
+        children: [
+          f && /* @__PURE__ */ r(
+            "label",
+            {
+              htmlFor: L,
+              className: t(
+                "lsd:block lsd:text-sm",
+                o.label,
+                s ? "lsd:text-lsd-text-secondary" : "lsd:text-lsd-text-primary"
+              ),
+              children: f
+            }
+          ),
+          /* @__PURE__ */ w(B, { open: E, onOpenChange: A, children: [
+            /* @__PURE__ */ r(H, { asChild: !0, children: /* @__PURE__ */ w(
+              "div",
+              {
+                className: t(
+                  "lsd:flex lsd:justify-between",
+                  o.inputContainer,
+                  I === "outlined" ? s ? "lsd:border lsd:border-lsd-text-secondary" : "lsd:border lsd:border-lsd-border" : s ? "lsd:border lsd:border-transparent lsd:border-b-lsd-text-secondary" : "lsd:border lsd:border-transparent lsd:border-b-lsd-border",
+                  s ? "lsd:cursor-not-allowed" : "lsd:cursor-pointer"
+                ),
+                children: [
+                  /* @__PURE__ */ r(
+                    "input",
+                    {
+                      ref: O,
+                      id: L,
+                      value: z,
+                      placeholder: c,
+                      onChange: (e) => b(e.target.value),
+                      disabled: s,
+                      readOnly: !0,
+                      className: t(
+                        "lsd:border-none lsd:outline-none lsd:bg-none lsd:w-full lsd:text-[14px]",
+                        o.input,
+                        s ? "lsd:text-lsd-text-secondary lsd:cursor-not-allowed" : "lsd:text-lsd-text-primary",
+                        T && "lsd:line-through",
+                        "lsd:placeholder:text-lsd-text-primary lsd:placeholder:opacity-30"
+                      )
+                    }
+                  ),
+                  i && /* @__PURE__ */ r(
+                    "div",
+                    {
+                      className: t("lsd:flex lsd:items-center", o.icon),
+                      children: i
+                    }
+                  ),
+                  x && P && /* @__PURE__ */ r(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: U,
+                      disabled: s,
+                      className: t(
+                        "lsd:flex lsd:items-center",
+                        o.icon,
+                        s ? "lsd:cursor-not-allowed" : "lsd:cursor-pointer"
+                      ),
+                      children: /* @__PURE__ */ r(
+                        X,
+                        {
+                          className: t(
+                            "lsd:h-4 lsd:w-4",
+                            s ? "lsd:text-lsd-text-secondary" : "lsd:text-lsd-icon-primary"
+                          )
+                        }
+                      )
+                    }
+                  )
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ r(
+              W,
+              {
+                searchText: u,
+                onSearchTextChange: b,
+                placeholder: c,
+                loadingText: y,
+                emptyText: d,
+                isLoading: k,
+                filteredOptions: D,
+                onSelect: M
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+G.displayName = "Autocomplete";
+export {
+  Z as A,
+  Y as a,
+  G as b,
+  q as u
+};

package/dist/{Badge-DHID7w-D.js → Badge-SDsdES93.js}

@@ -1,8 +1,8 @@
-import { jsx as s, jsxs as x, Fragment as v } from "react/jsx-runtime";
+import { jsx as l, jsxs as p, Fragment as x } from "react/jsx-runtime";
 import { S as y } from "./index-BvoZGpli.js";
 import { c as k } from "./utils-DtaLkIY8.js";
-import { c as z } from "./index-D69Iqk5J.js";
-const j = z(
+import { c as j } from "./index-D69Iqk5J.js";
+const z = j(
   "lsd:inline-flex lsd:items-center lsd:justify-center lsd:border lsd:border-lsd-border lsd:rounded-[20px] lsd:w-fit lsd:whitespace-nowrap lsd:shrink-0 lsd:[&>svg]:size-3 lsd:[&>svg]:pointer-events-none lsd:hover:underline lsd:focus:underline lsd:cursor-pointer lsd:transition-colors lsd:overflow-hidden",
   {
     variants: {
@@ -16,11 +16,9 @@ const j = z(
         dot: "lsd:rounded-full lsd:w-fit lsd:h-fit lsd:p-0"
       },
       size: {
-        xs: "lsd:h-[20px] lsd:px-[5px] lsd:py-[3px] lsd:gap-[4px] lsd:text-[0.625rem] [&>svg]:size-[10px]",
-        sm: "lsd:h-[24px] lsd:px-[7px] lsd:py-[3px] lsd:gap-[4px] lsd:text-[0.75rem] [&>svg]:size-3",
-        md: "lsd:h-[28px] lsd:px-[11px] lsd:py-[3px] lsd:gap-[6px] lsd:text-[0.875rem] [&>svg]:size-3",
-        lg: "lsd:h-[32px] lsd:px-[13px] lsd:py-[3px] lsd:gap-[8px] lsd:text-[1rem] [&>svg]:size-[14px]",
-        xl: "lsd:h-[36px] lsd:px-[15px] lsd:py-[3px] lsd:gap-[10px] lsd:text-[1.125rem] [&>svg]:size-[16px]"
+        sm: "lsd:h-[var(--lsd-spacing-larger)] lsd:px-[var(--lsd-spacing-smaller)] lsd:py-[var(--lsd-spacing-smallest)] lsd:gap-[var(--lsd-spacing-smallest)] lsd:text-[0.75rem] [&>svg]:size-3",
+        md: "lsd:h-[var(--lsd-spacing-largest)] lsd:px-[var(--lsd-spacing-small)] lsd:py-[var(--lsd-spacing-smallest)] lsd:gap-[var(--lsd-spacing-smaller)] lsd:text-[0.875rem] [&>svg]:size-3",
+        lg: "lsd:h-8 lsd:px-[var(--lsd-spacing-small)] lsd:py-[var(--lsd-spacing-smallest)] lsd:gap-[var(--lsd-spacing-smaller)] lsd:text-[1rem] [&>svg]:size-[14px]"
       }
     },
     defaultVariants: {
@@ -28,7 +26,7 @@ const j = z(
       size: "md"
     }
   }
-), D = () => /* @__PURE__ */ x(
+), D = () => /* @__PURE__ */ p(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -42,72 +40,69 @@ const j = z(
     strokeLinejoin: "round",
     "aria-hidden": "true",
     children: [
-      /* @__PURE__ */ s("path", { d: "M18 6L6 18" }),
-      /* @__PURE__ */ s("path", { d: "M6 6l12 12" })
+      /* @__PURE__ */ l("path", { d: "M18 6L6 18" }),
+      /* @__PURE__ */ l("path", { d: "M6 6l12 12" })
     ]
   }
 );
 function I({
-  className: c,
-  variant: n,
-  size: o,
-  asChild: u = !1,
+  className: g,
+  variant: a,
+  size: n,
+  asChild: m = !1,
   onDismiss: i,
-  onClick: t,
+  onClick: r,
   icon: e,
-  iconPosition: p = "left",
-  dot: h = !1,
-  children: a,
-  ...g
+  iconPosition: o = "left",
+  dot: u = !1,
+  children: c,
+  ...v
 }) {
-  const f = u ? y : "span", d = !!t, r = h || n === "dot", m = (l) => {
-    d && (l.key === "Enter" || l.key === " ") && (l.preventDefault(), t?.());
-  }, b = (l) => {
-    l.stopPropagation(), i?.();
-  }, w = r ? (() => {
-    switch (o) {
-      case "xs":
-        return "lsd:w-[8px] lsd:h-[8px]";
+  const f = m ? y : "span", d = !!r, t = u || a === "dot", h = (s) => {
+    d && (s.key === "Enter" || s.key === " ") && (s.preventDefault(), r?.());
+  }, b = (s) => {
+    s.stopPropagation(), i?.();
+  }, w = t ? (() => {
+    const s = "lsd:w-[var(--lsd-spacing-small)] lsd:h-[var(--lsd-spacing-small)]";
+    switch (n) {
       case "sm":
-        return "lsd:w-[10px] lsd:h-[10px]";
+        return "lsd:w-[var(--lsd-spacing-smaller)] lsd:h-[var(--lsd-spacing-smaller)]";
       case "md":
-        return "lsd:w-[12px] lsd:h-[12px]";
+        return s;
       case "lg":
-        return "lsd:w-[14px] lsd:h-[14px]";
-      case "xl":
-        return "lsd:w-[16px] lsd:h-[16px]";
+        return "lsd:w-[var(--lsd-spacing-base)] lsd:h-[var(--lsd-spacing-base)]";
       default:
-        return "lsd:w-[12px] lsd:h-[12px]";
+        return s;
     }
   })() : "";
-  return /* @__PURE__ */ s(
+  return /* @__PURE__ */ l(
     f,
     {
       "data-slot": "badge",
       className: k(
-        j({ variant: n, size: o }),
+        z({ variant: a, size: n }),
         d && "lsd:cursor-pointer",
-        r && "lsd:rounded-full lsd:p-0 lsd:border-0",
+        t && "lsd:rounded-full lsd:p-0 lsd:border-0",
         w,
-        c
+        g
       ),
       role: d ? "button" : void 0,
       tabIndex: d ? 0 : void 0,
-      onKeyDown: m,
-      onClick: d ? t : void 0,
-      ...g,
-      children: !r && /* @__PURE__ */ x(v, { children: [
-        e && p === "left" && /* @__PURE__ */ s("span", { className: "lsd:flex lsd:items-center lsd:justify-center", children: e }),
-        a && /* @__PURE__ */ s("span", { children: a }),
-        e && p === "right" && /* @__PURE__ */ s("span", { className: "lsd:flex lsd:items-center lsd:justify-center", children: e }),
-        i && /* @__PURE__ */ s(
+      onKeyDown: h,
+      onClick: d ? r : void 0,
+      ...v,
+      children: !t && /* @__PURE__ */ p(x, { children: [
+        e && o === "left" && /* @__PURE__ */ l("span", { className: "lsd:flex lsd:items-center lsd:justify-center", children: e }),
+        c && /* @__PURE__ */ l("span", { children: c }),
+        e && o === "right" && /* @__PURE__ */ l("span", { className: "lsd:flex lsd:items-center lsd:justify-center", children: e }),
+        i && /* @__PURE__ */ l(
           "button",
           {
             type: "button",
             className: "lsd:flex lsd:items-center lsd:justify-center lsd:rounded-full lsd:hover:bg-black/10 lsd:dark:hover:bg-white/10 lsd:transition-colors lsd:cursor-pointer lsd:border-0 lsd:p-0 lsd:bg-transparent",
             onClick: b,
             "aria-label": "Dismiss",
-            children: /* @__PURE__ */ s(D, {})
+            children: /* @__PURE__ */ l(D, {})
           }
         )
       ] })
@@ -116,5 +111,5 @@ function I({
 }
 export {
   I as B,
-  j as b
+  z as b
 };

package/dist/{Button-DoTpV6G1.js → Button-CCXyUaSw.js}

@@ -1,8 +1,8 @@
-import { jsx as d, jsxs as o } from "react/jsx-runtime";
-import * as g from "react";
+import { jsx as d, jsxs as a } from "react/jsx-runtime";
+import * as m from "react";
 import { c as n } from "./utils-DtaLkIY8.js";
-import { c as p } from "./index-D69Iqk5J.js";
-const b = p(
+import { c as b } from "./index-D69Iqk5J.js";
+const h = b(
   "lsd:inline-flex lsd:items-center lsd:justify-center lsd:border lsd:transition-colors lsd:cursor-pointer",
   {
     variants: {
@@ -20,16 +20,12 @@ const b = p(
         "success-icon": "lsd:bg-lsd-success lsd:text-white lsd:border-lsd-success lsd:rounded-full lsd:hover:bg-lsd-success/90"
       },
       size: {
-        xs: "lsd:h-7 lsd:px-2 lsd:py-1 lsd:text-xs",
-        sm: "lsd:h-8 lsd:px-3 lsd:py-[6px] lsd:text-sm",
-        md: "lsd:h-[34px] lsd:px-6 lsd:py-2 lsd:text-base",
-        lg: "lsd:h-12 lsd:px-8 lsd:py-[10px] lsd:text-lg",
-        xl: "lsd:h-14 lsd:px-10 lsd:py-3 lsd:text-xl",
-        "icon-xs": "lsd:w-6 lsd:h-6",
+        sm: "lsd:h-8 lsd:px-[var(--lsd-spacing-small)] lsd:py-[var(--lsd-spacing-smaller)] lsd:text-sm",
+        md: "lsd:h-10 lsd:px-[var(--lsd-spacing-larger)] lsd:py-[var(--lsd-spacing-smaller)] lsd:text-base",
+        lg: "lsd:h-12 lsd:px-8 lsd:py-[var(--lsd-spacing-small)] lsd:text-lg",
         "icon-sm": "lsd:w-8 lsd:h-8",
         "icon-md": "lsd:w-10 lsd:h-10",
-        "icon-lg": "lsd:w-12 lsd:h-12",
-        "icon-xl": "lsd:w-16 lsd:h-16"
+        "icon-lg": "lsd:w-12 lsd:h-12"
       }
     },
     defaultVariants: {
@@ -37,29 +33,24 @@ const b = p(
       size: "md"
     }
   }
-), f = ({ size: l }) => /* @__PURE__ */ o(
+), f = ({ size: e }) => /* @__PURE__ */ a(
   "svg",
   {
     className: n("animate-spin", (() => {
-      switch (l) {
-        case "xs":
-        case "icon-xs":
-          return "lsd:w-3 lsd:h-3";
+      const l = "lsd:w-[var(--lsd-spacing-large)] lsd:h-[var(--lsd-spacing-large)]";
+      switch (e) {
         case "icon-sm":
-          return "lsd:w-3 lsd:h-3";
+          return "lsd:w-[var(--lsd-spacing-small)] lsd:h-[var(--lsd-spacing-small)]";
         case "sm":
-          return "lsd:w-4 lsd:h-4";
+          return "lsd:w-[var(--lsd-spacing-base)] lsd:h-[var(--lsd-spacing-base)]";
         case "md":
         case "icon-md":
-          return "lsd:w-5 lsd:h-5";
+          return l;
         case "lg":
         case "icon-lg":
-          return "lsd:w-6 lsd:h-6";
-        case "xl":
-        case "icon-xl":
-          return "lsd:w-7 lsd:h-7";
+          return "lsd:w-[var(--lsd-spacing-larger)] lsd:h-[var(--lsd-spacing-larger)]";
         default:
-          return "lsd:w-5 lsd:h-5";
+          return l;
       }
     })()),
     xmlns: "http://www.w3.org/2000/svg",
@@ -88,41 +79,41 @@ const b = p(
       )
     ]
   }
-), m = g.forwardRef(
+), v = m.forwardRef(
   ({
-    className: l,
+    className: e,
     variant: s,
-    size: r,
+    size: l,
     loading: t = !1,
-    fullWidth: c = !1,
-    children: e,
-    disabled: i,
-    ...a
+    fullWidth: o = !1,
+    children: r,
+    disabled: c,
+    ...i
   }, u) => {
-    const x = s === "link", h = s === "ghost" || s === "ghost-icon";
+    const g = s === "link", p = s === "ghost" || s === "ghost-icon";
     return /* @__PURE__ */ d(
       "button",
       {
         className: n(
           "lsd:text-foreground lsd:border lsd:hover:underline lsd:disabled:opacity-34 lsd:disabled:cursor-not-allowed lsd:disabled:no-underline",
-          b({ variant: s, size: r }),
-          c && "lsd:w-full",
-          (x || h) && "lsd:border-0",
-          l
+          h({ variant: s, size: l }),
+          o && "lsd:w-full",
+          (g || p) && "lsd:border-0",
+          e
         ),
         ref: u,
-        disabled: i || t,
-        ...a,
-        children: t ? /* @__PURE__ */ o("span", { className: "lsd:flex lsd:items-center lsd:justify-center lsd:gap-2", children: [
-          /* @__PURE__ */ d(f, { size: r }),
-          e && /* @__PURE__ */ d("span", { className: "lsd:opacity-50", children: e })
-        ] }) : e
+        disabled: c || t,
+        ...i,
+        children: t ? /* @__PURE__ */ a("span", { className: "lsd:flex lsd:items-center lsd:justify-center lsd:gap-(--lsd-spacing-smaller)", children: [
+          /* @__PURE__ */ d(f, { size: l }),
+          r && /* @__PURE__ */ d("span", { className: "lsd:opacity-50", children: r })
+        ] }) : r
       }
     );
   }
 );
-m.displayName = "Button";
+v.displayName = "Button";
 export {
-  m as B,
-  b
+  v as B,
+  h as b
 };

package/dist/{ButtonGroup-BgylmC1j.js → ButtonGroup-WtMRnYIq.js}

@@ -1,9 +1,9 @@
 import { jsx as r } from "react/jsx-runtime";
-import * as d from "react";
-import { c as a } from "./utils-DtaLkIY8.js";
+import * as a from "react";
+import { c as d } from "./utils-DtaLkIY8.js";
 import { c as e } from "./index-D69Iqk5J.js";
 const i = e(
-  "lsd:flex lsd:w-fit lsd:items-stretch lsd:[&>*]:focus-visible:z-10 lsd:[&>*]:focus-visible:relative lsd:[&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit lsd:[&>input]:flex-1 has-[select[aria-hidden=true]:last-child]:lsd:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md has-[>[data-slot=button-group]]:lsd:gap-2",
+  "lsd:flex lsd:w-fit lsd:items-stretch lsd:[&>*]:focus-visible:z-10 lsd:[&>*]:focus-visible:relative lsd:[&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit lsd:[&>input]:flex-1 has-[select[aria-hidden=true]:last-child]:lsd:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md has-[>[data-slot=button-group]]:lsd:gap-[var(--lsd-spacing-smaller)]",
   {
     variants: {
       orientation: {
@@ -15,15 +15,15 @@ const i = e(
       orientation: "horizontal"
     }
   }
-), n = d.forwardRef(
-  ({ className: o, orientation: t, ...s }, l) => /* @__PURE__ */ r(
+), n = a.forwardRef(
+  ({ className: s, orientation: t, ...o }, l) => /* @__PURE__ */ r(
     "fieldset",
     {
       ref: l,
       "data-slot": "button-group",
       "data-orientation": t,
-      className: a(i({ orientation: t }), o),
-      ...s
+      className: d(i({ orientation: t }), s),
+      ...o
     }
   )
 );