@nipsys/shadcn-lsd 0.2.3 → 0.2.5

package/dist/components/ui/command/__tests__/command-item.test.js

@@ -1,16 +1,16 @@
 import { jsxs as s, jsx as e } from "react/jsx-runtime";
 import { d as n, i as l, r as d, g as a, s as i } from "../../../../vi.2VT5v0um-D9hIOtVQ.js";
 import { Command as r } from "../Command.js";
-import { CommandInput as o } from "../CommandInput.js";
-import { CommandItem as c } from "../CommandItem.js";
+import { CommandInput as c } from "../CommandInput.js";
+import { CommandItem as o } from "../CommandItem.js";
 import { CommandList as m } from "../CommandList.js";
 import { CommandShortcut as h } from "../CommandShortcut.js";
 n("CommandItem", () => {
   l("renders without crashing", () => {
     d(
       /* @__PURE__ */ s(r, { children: [
-        /* @__PURE__ */ e(o, { placeholder: "Search..." }),
-        /* @__PURE__ */ e(m, { children: /* @__PURE__ */ e(c, { children: "Item 1" }) })
+        /* @__PURE__ */ e(c, { placeholder: "Search..." }),
+        /* @__PURE__ */ e(m, { children: /* @__PURE__ */ e(o, { children: "Item 1" }) })
       ] })
     ), a(
       document.querySelector('[data-slot="command-item"]')
@@ -18,8 +18,8 @@ n("CommandItem", () => {
   }), l("applies data-slot attribute", () => {
     d(
       /* @__PURE__ */ s(r, { children: [
-        /* @__PURE__ */ e(o, { placeholder: "Search..." }),
-        /* @__PURE__ */ e(m, { children: /* @__PURE__ */ e(c, { children: "Item 1" }) })
+        /* @__PURE__ */ e(c, { placeholder: "Search..." }),
+        /* @__PURE__ */ e(m, { children: /* @__PURE__ */ e(o, { children: "Item 1" }) })
       ] })
     );
     const t = document.querySelector('[data-slot="command-item"]');
@@ -27,17 +27,17 @@ n("CommandItem", () => {
   }), l("applies base classes correctly", () => {
     d(
       /* @__PURE__ */ s(r, { children: [
-        /* @__PURE__ */ e(o, { placeholder: "Search..." }),
-        /* @__PURE__ */ e(m, { children: /* @__PURE__ */ e(c, { children: "Item 1" }) })
+        /* @__PURE__ */ e(c, { placeholder: "Search..." }),
+        /* @__PURE__ */ e(m, { children: /* @__PURE__ */ e(o, { children: "Item 1" }) })
       ] })
     );
     const t = document.querySelector('[data-slot="command-item"]');
-    a(t).toHaveClass("lsd:relative"), a(t).toHaveClass("lsd:flex"), a(t).toHaveClass("lsd:cursor-default"), a(t).toHaveClass("lsd:items-center"), a(t).toHaveClass("lsd:gap-2"), a(t).toHaveClass("lsd:px-2"), a(t).toHaveClass("lsd:py-1.5"), a(t).toHaveClass("lsd:text-sm");
+    a(t).toHaveClass("lsd:relative"), a(t).toHaveClass("lsd:flex"), a(t).toHaveClass("lsd:cursor-default"), a(t).toHaveClass("lsd:items-center"), a(t).toHaveClass("lsd:gap-(--lsd-spacing-smaller)"), a(t).toHaveClass("lsd:px-(--lsd-spacing-smaller)"), a(t).toHaveClass("lsd:py-(--lsd-spacing-smaller)"), a(t).toHaveClass("lsd:text-sm");
   }), l("applies selected state classes", () => {
     d(
       /* @__PURE__ */ s(r, { children: [
-        /* @__PURE__ */ e(o, { placeholder: "Search..." }),
-        /* @__PURE__ */ e(m, { children: /* @__PURE__ */ e(c, { children: "Item 1" }) })
+        /* @__PURE__ */ e(c, { placeholder: "Search..." }),
+        /* @__PURE__ */ e(m, { children: /* @__PURE__ */ e(o, { children: "Item 1" }) })
       ] })
     );
     const t = document.querySelector('[data-slot="command-item"]');
@@ -45,8 +45,8 @@ n("CommandItem", () => {
   }), l("applies disabled state classes", () => {
     d(
       /* @__PURE__ */ s(r, { children: [
-        /* @__PURE__ */ e(o, { placeholder: "Search..." }),
-        /* @__PURE__ */ e(m, { children: /* @__PURE__ */ e(c, { disabled: !0, children: "Item 1" }) })
+        /* @__PURE__ */ e(c, { placeholder: "Search..." }),
+        /* @__PURE__ */ e(m, { children: /* @__PURE__ */ e(o, { disabled: !0, children: "Item 1" }) })
       ] })
     );
     const t = document.querySelector('[data-slot="command-item"]');
@@ -54,8 +54,8 @@ n("CommandItem", () => {
   }), l("merges custom className with component classes", () => {
     d(
       /* @__PURE__ */ s(r, { children: [
-        /* @__PURE__ */ e(o, { placeholder: "Search..." }),
-        /* @__PURE__ */ e(m, { children: /* @__PURE__ */ e(c, { className: "custom-item-class", children: "Item 1" }) })
+        /* @__PURE__ */ e(c, { placeholder: "Search..." }),
+        /* @__PURE__ */ e(m, { children: /* @__PURE__ */ e(o, { className: "custom-item-class", children: "Item 1" }) })
       ] })
     );
     const t = document.querySelector('[data-slot="command-item"]');
@@ -63,8 +63,8 @@ n("CommandItem", () => {
   }), l("passes through additional props", () => {
     d(
       /* @__PURE__ */ s(r, { children: [
-        /* @__PURE__ */ e(o, { placeholder: "Search..." }),
-        /* @__PURE__ */ e(m, { children: /* @__PURE__ */ e(c, { "data-testid": "test-item", children: "Item 1" }) })
+        /* @__PURE__ */ e(c, { placeholder: "Search..." }),
+        /* @__PURE__ */ e(m, { children: /* @__PURE__ */ e(o, { "data-testid": "test-item", children: "Item 1" }) })
       ] })
     );
     const t = document.querySelector('[data-slot="command-item"]');
@@ -72,8 +72,8 @@ n("CommandItem", () => {
   }), l("renders children correctly", () => {
     d(
       /* @__PURE__ */ s(r, { children: [
-        /* @__PURE__ */ e(o, { placeholder: "Search..." }),
-        /* @__PURE__ */ e(m, { children: /* @__PURE__ */ s(c, { children: [
+        /* @__PURE__ */ e(c, { placeholder: "Search..." }),
+        /* @__PURE__ */ e(m, { children: /* @__PURE__ */ s(o, { children: [
           /* @__PURE__ */ e("span", { children: "Item 1" }),
           /* @__PURE__ */ e(h, { children: "⌘K" })
         ] }) })

package/dist/components/ui/command/__tests__/command-list.test.js

@@ -1,12 +1,12 @@
 import { jsxs as l, jsx as t } from "react/jsx-runtime";
-import { d as i, i as o, r as a, g as s } from "../../../../vi.2VT5v0um-D9hIOtVQ.js";
+import { d as i, i as a, r as o, g as s } from "../../../../vi.2VT5v0um-D9hIOtVQ.js";
 import { Command as r } from "../Command.js";
 import { CommandInput as c } from "../CommandInput.js";
 import { CommandItem as d } from "../CommandItem.js";
 import { CommandList as m } from "../CommandList.js";
 i("CommandList", () => {
-  o("renders without crashing", () => {
-    a(
+  a("renders without crashing", () => {
+    o(
       /* @__PURE__ */ l(r, { children: [
         /* @__PURE__ */ t(c, { placeholder: "Search..." }),
         /* @__PURE__ */ t(m, { children: /* @__PURE__ */ t(d, { children: "Item 1" }) })
@@ -14,8 +14,8 @@ i("CommandList", () => {
     ), s(
       document.querySelector('[data-slot="command-list"]')
     ).toBeInTheDocument();
-  }), o("applies data-slot attribute", () => {
-    a(
+  }), a("applies data-slot attribute", () => {
+    o(
       /* @__PURE__ */ l(r, { children: [
         /* @__PURE__ */ t(c, { placeholder: "Search..." }),
         /* @__PURE__ */ t(m, { children: /* @__PURE__ */ t(d, { children: "Item 1" }) })
@@ -23,17 +23,17 @@ i("CommandList", () => {
     );
     const e = document.querySelector('[data-slot="command-list"]');
     s(e).toHaveAttribute("data-slot", "command-list");
-  }), o("applies base classes correctly", () => {
-    a(
+  }), a("applies base classes correctly", () => {
+    o(
       /* @__PURE__ */ l(r, { children: [
         /* @__PURE__ */ t(c, { placeholder: "Search..." }),
         /* @__PURE__ */ t(m, { children: /* @__PURE__ */ t(d, { children: "Item 1" }) })
       ] })
     );
     const e = document.querySelector('[data-slot="command-list"]');
-    s(e).toHaveClass("lsd:max-h-[300px]"), s(e).toHaveClass("lsd:scroll-py-1"), s(e).toHaveClass("lsd:overflow-x-hidden"), s(e).toHaveClass("lsd:overflow-y-auto");
-  }), o("merges custom className with component classes", () => {
-    a(
+    s(e).toHaveClass("lsd:max-h-[300px]"), s(e).toHaveClass("lsd:scroll-py-(--lsd-spacing-smallest)"), s(e).toHaveClass("lsd:overflow-x-hidden"), s(e).toHaveClass("lsd:overflow-y-auto");
+  }), a("merges custom className with component classes", () => {
+    o(
       /* @__PURE__ */ l(r, { children: [
         /* @__PURE__ */ t(c, { placeholder: "Search..." }),
         /* @__PURE__ */ t(m, { className: "custom-list-class", children: /* @__PURE__ */ t(d, { children: "Item 1" }) })
@@ -41,8 +41,8 @@ i("CommandList", () => {
     );
     const e = document.querySelector('[data-slot="command-list"]');
     s(e).toHaveClass("custom-list-class");
-  }), o("passes through additional props", () => {
-    a(
+  }), a("passes through additional props", () => {
+    o(
       /* @__PURE__ */ l(r, { children: [
         /* @__PURE__ */ t(c, { placeholder: "Search..." }),
         /* @__PURE__ */ t(m, { "data-testid": "test-list", children: /* @__PURE__ */ t(d, { children: "Item 1" }) })

package/dist/components/ui/command/__tests__/command-separator.test.js

@@ -1,19 +1,19 @@
-import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
 import { d as i, i as s, r as m, g as o } from "../../../../vi.2VT5v0um-D9hIOtVQ.js";
 import { Command as c } from "../Command.js";
 import { CommandInput as l } from "../CommandInput.js";
-import { CommandItem as a } from "../CommandItem.js";
+import { CommandItem as r } from "../CommandItem.js";
 import { CommandList as d } from "../CommandList.js";
 import { CommandSeparator as n } from "../CommandSeparator.js";
 i("CommandSeparator", () => {
   s("renders without crashing", () => {
     m(
-      /* @__PURE__ */ r(c, { children: [
+      /* @__PURE__ */ a(c, { children: [
         /* @__PURE__ */ e(l, { placeholder: "Search..." }),
-        /* @__PURE__ */ r(d, { children: [
-          /* @__PURE__ */ e(a, { children: "Item 1" }),
+        /* @__PURE__ */ a(d, { children: [
+          /* @__PURE__ */ e(r, { children: "Item 1" }),
           /* @__PURE__ */ e(n, {}),
-          /* @__PURE__ */ e(a, { children: "Item 2" })
+          /* @__PURE__ */ e(r, { children: "Item 2" })
         ] })
       ] })
     ), o(
@@ -21,12 +21,12 @@ i("CommandSeparator", () => {
     ).toBeInTheDocument();
   }), s("applies data-slot attribute", () => {
     m(
-      /* @__PURE__ */ r(c, { children: [
+      /* @__PURE__ */ a(c, { children: [
         /* @__PURE__ */ e(l, { placeholder: "Search..." }),
-        /* @__PURE__ */ r(d, { children: [
-          /* @__PURE__ */ e(a, { children: "Item 1" }),
+        /* @__PURE__ */ a(d, { children: [
+          /* @__PURE__ */ e(r, { children: "Item 1" }),
           /* @__PURE__ */ e(n, {}),
-          /* @__PURE__ */ e(a, { children: "Item 2" })
+          /* @__PURE__ */ e(r, { children: "Item 2" })
         ] })
       ] })
     );
@@ -34,25 +34,25 @@ i("CommandSeparator", () => {
     o(t).toHaveAttribute("data-slot", "command-separator");
   }), s("applies base classes correctly", () => {
     m(
-      /* @__PURE__ */ r(c, { children: [
+      /* @__PURE__ */ a(c, { children: [
         /* @__PURE__ */ e(l, { placeholder: "Search..." }),
-        /* @__PURE__ */ r(d, { children: [
-          /* @__PURE__ */ e(a, { children: "Item 1" }),
+        /* @__PURE__ */ a(d, { children: [
+          /* @__PURE__ */ e(r, { children: "Item 1" }),
           /* @__PURE__ */ e(n, {}),
-          /* @__PURE__ */ e(a, { children: "Item 2" })
+          /* @__PURE__ */ e(r, { children: "Item 2" })
         ] })
       ] })
     );
     const t = document.querySelector('[data-slot="command-separator"]');
-    o(t).toHaveClass("lsd:bg-lsd-border"), o(t).toHaveClass("lsd:-mx-1"), o(t).toHaveClass("lsd:h-px");
+    o(t).toHaveClass("lsd:bg-lsd-border"), o(t).toHaveClass("lsd:-mx-(--lsd-spacing-smallest)"), o(t).toHaveClass("lsd:h-px");
   }), s("merges custom className with component classes", () => {
     m(
-      /* @__PURE__ */ r(c, { children: [
+      /* @__PURE__ */ a(c, { children: [
         /* @__PURE__ */ e(l, { placeholder: "Search..." }),
-        /* @__PURE__ */ r(d, { children: [
-          /* @__PURE__ */ e(a, { children: "Item 1" }),
+        /* @__PURE__ */ a(d, { children: [
+          /* @__PURE__ */ e(r, { children: "Item 1" }),
           /* @__PURE__ */ e(n, { className: "custom-separator-class" }),
-          /* @__PURE__ */ e(a, { children: "Item 2" })
+          /* @__PURE__ */ e(r, { children: "Item 2" })
         ] })
       ] })
     );

package/dist/components/ui/dialog/DialogContent.js

@@ -4,11 +4,11 @@ import { c as r } from "../../../utils-DtaLkIY8.js";
 import { DialogClose as n } from "./DialogClose.js";
 import { DialogOverlay as i } from "./DialogOverlay.js";
 import { DialogPortal as p } from "./DialogPortal.js";
-import { X as m } from "../../../x-B9bYxG31.js";
+import { X as c } from "../../../x-B9bYxG31.js";
 function v({
-  className: d,
-  children: t,
-  showCloseButton: a = !0,
+  className: a,
+  children: d,
+  showCloseButton: t = !0,
   ...o
 }) {
   return /* @__PURE__ */ s(p, { "data-slot": "dialog-portal", children: [
@@ -18,19 +18,19 @@ function v({
       {
         "data-slot": "dialog-content",
         className: r(
-          "lsd:bg-lsd-surface lsd:data-[state=open]:animate-in lsd:data-[state=closed]:animate-out lsd:data-[state=closed]:fade-out-0 lsd:data-[state=open]:fade-in-0 lsd:data-[state=closed]:zoom-out-95 lsd:data-[state=open]:zoom-in-95 lsd:fixed lsd:top-[50%] lsd:left-[50%] lsd:z-50 lsd:grid lsd:w-full lsd:max-w-[calc(100%-2rem)] lsd:translate-x-[-50%] lsd:translate-y-[-50%] lsd:gap-4 lsd:border lsd:border-lsd-border lsd:p-6 lsd:shadow-lg lsd:duration-200 lsd:sm:max-w-lg",
-          d
+          "lsd:bg-lsd-surface lsd:data-[state=open]:animate-in lsd:data-[state=closed]:animate-out lsd:data-[state=closed]:fade-out-0 lsd:data-[state=open]:fade-in-0 lsd:data-[state=closed]:zoom-out-95 lsd:data-[state=open]:zoom-in-95 lsd:fixed lsd:top-[50%] lsd:left-[50%] lsd:z-50 lsd:grid lsd:w-full lsd:max-w-[calc(100%-2rem)] lsd:translate-x-[-50%] lsd:translate-y-[-50%] lsd:gap-(--lsd-spacing-base) lsd:border lsd:border-lsd-border lsd:p-(--lsd-spacing-larger) lsd:shadow-lg lsd:duration-200 lsd:sm:max-w-lg",
+          a
         ),
         ...o,
         children: [
-          t,
-          a && /* @__PURE__ */ s(
+          d,
+          t && /* @__PURE__ */ s(
             n,
             {
               "data-slot": "dialog-close",
-              className: "lsd:p-2 focus:lsd:outline-hidden lsd:data-[state=open]:bg-lsd-surface lsd:data-[state=open]:text-lsd-text-primary lsd:absolute lsd:top-4 lsd:right-4 lsd:rounded-xs lsd:opacity-70 lsd:transition-opacity lsd:hover:opacity-100 lsd:disabled:pointer-events-none lsd:[&_svg]:pointer-events-none lsd:[&_svg]:shrink-0 lsd:[&_svg:not([class*='size-'])]:size-4 lsd:cursor-pointer",
+              className: "lsd:p-(--lsd-spacing-smaller) focus:lsd:outline-hidden lsd:data-[state=open]:bg-lsd-surface lsd:data-[state=open]:text-lsd-text-primary lsd:absolute lsd:top-(--lsd-spacing-base) lsd:right-(--lsd-spacing-base) lsd:rounded-xs lsd:opacity-70 lsd:transition-opacity lsd:hover:opacity-100 lsd:disabled:pointer-events-none lsd:[&_svg]:pointer-events-none lsd:[&_svg]:shrink-0 lsd:[&_svg:not([class*='size-'])]:size-4 lsd:cursor-pointer",
               children: [
-                /* @__PURE__ */ l(m, {}),
+                /* @__PURE__ */ l(c, {}),
                 /* @__PURE__ */ l("span", { className: "lsd:sr-only", children: "Close" })
               ]
             }

package/dist/components/ui/dialog/DialogFooter.js

@@ -1,15 +1,15 @@
-import { jsx as l } from "react/jsx-runtime";
+import { jsx as o } from "react/jsx-runtime";
 import { c as e } from "../../../utils-DtaLkIY8.js";
-function d({ className: o, ...s }) {
-  return /* @__PURE__ */ l(
+function d({ className: s, ...l }) {
+  return /* @__PURE__ */ o(
     "div",
     {
       "data-slot": "dialog-footer",
       className: e(
-        "lsd:flex lsd:flex-col-reverse lsd:gap-2 lsd:sm:flex-row lsd:sm:justify-end",
-        o
+        "lsd:flex lsd:flex-col-reverse lsd:gap-(--lsd-spacing-smaller) lsd:sm:flex-row lsd:sm:justify-end",
+        s
       ),
-      ...s
+      ...l
     }
   );
 }

package/dist/components/ui/dialog/DialogHeader.js

@@ -1,18 +1,18 @@
-import { jsx as t } from "react/jsx-runtime";
-import { c as s } from "../../../utils-DtaLkIY8.js";
-function o({ className: e, ...l }) {
-  return /* @__PURE__ */ t(
+import { jsx as s } from "react/jsx-runtime";
+import { c as t } from "../../../utils-DtaLkIY8.js";
+function r({ className: l, ...e }) {
+  return /* @__PURE__ */ s(
     "div",
     {
       "data-slot": "dialog-header",
-      className: s(
-        "lsd:flex lsd:flex-col lsd:gap-2 lsd:text-center lsd:sm:text-left",
-        e
+      className: t(
+        "lsd:flex lsd:flex-col lsd:gap-(--lsd-spacing-smaller) lsd:text-center lsd:sm:text-left",
+        l
       ),
-      ...l
+      ...e
     }
   );
 }
 export {
-  o as DialogHeader
+  r as DialogHeader
 };

package/dist/components/ui/dialog/__tests__/dialog-content.test.js

@@ -14,7 +14,7 @@ h("DialogContent", () => {
       /* @__PURE__ */ e(s, { open: !0, children: /* @__PURE__ */ e(c, { children: /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(d, { children: "Title" }) }) }) })
     );
     const t = document.querySelector('[data-slot="dialog-content"]');
-    o(t).toHaveClass("lsd:bg-lsd-surface"), o(t).toHaveClass("lsd:fixed"), o(t).toHaveClass("lsd:top-[50%]"), o(t).toHaveClass("lsd:left-[50%]"), o(t).toHaveClass("lsd:z-50"), o(t).toHaveClass("lsd:grid"), o(t).toHaveClass("lsd:w-full"), o(t).toHaveClass("lsd:border"), o(t).toHaveClass("lsd:border-lsd-border"), o(t).toHaveClass("lsd:p-6");
+    o(t).toHaveClass("lsd:bg-lsd-surface"), o(t).toHaveClass("lsd:fixed"), o(t).toHaveClass("lsd:top-[50%]"), o(t).toHaveClass("lsd:left-[50%]"), o(t).toHaveClass("lsd:z-50"), o(t).toHaveClass("lsd:grid"), o(t).toHaveClass("lsd:w-full"), o(t).toHaveClass("lsd:border"), o(t).toHaveClass("lsd:border-lsd-border"), o(t).toHaveClass("lsd:p-(--lsd-spacing-larger)");
   }), l("applies data-slot attribute", () => {
     n(
       /* @__PURE__ */ e(s, { open: !0, children: /* @__PURE__ */ e(c, { children: /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(d, { children: "Title" }) }) }) })

package/dist/components/ui/dialog/__tests__/dialog-footer.test.js

@@ -1,12 +1,12 @@
 import { jsx as e, jsxs as c } from "react/jsx-runtime";
 import { d as i, i as r, r as l, g as o } from "../../../../vi.2VT5v0um-D9hIOtVQ.js";
 import { Dialog as a } from "../Dialog.js";
-import { DialogContent as n } from "../DialogContent.js";
-import { DialogFooter as s } from "../DialogFooter.js";
+import { DialogContent as s } from "../DialogContent.js";
+import { DialogFooter as n } from "../DialogFooter.js";
 i("DialogFooter", () => {
   r("renders without crashing", () => {
     l(
-      /* @__PURE__ */ e(a, { open: !0, children: /* @__PURE__ */ e(n, { children: /* @__PURE__ */ c(s, { children: [
+      /* @__PURE__ */ e(a, { open: !0, children: /* @__PURE__ */ e(s, { children: /* @__PURE__ */ c(n, { children: [
         /* @__PURE__ */ e("button", { type: "button", children: "Cancel" }),
         /* @__PURE__ */ e("button", { type: "button", children: "Confirm" })
       ] }) }) })
@@ -15,19 +15,19 @@ i("DialogFooter", () => {
     ).toBeInTheDocument();
   }), r("applies base classes correctly", () => {
     l(
-      /* @__PURE__ */ e(a, { open: !0, children: /* @__PURE__ */ e(n, { children: /* @__PURE__ */ e(s, { children: /* @__PURE__ */ e("button", { type: "button", children: "Cancel" }) }) }) })
+      /* @__PURE__ */ e(a, { open: !0, children: /* @__PURE__ */ e(s, { children: /* @__PURE__ */ e(n, { children: /* @__PURE__ */ e("button", { type: "button", children: "Cancel" }) }) }) })
     );
     const t = document.querySelector('[data-slot="dialog-footer"]');
-    o(t).toHaveClass("lsd:flex"), o(t).toHaveClass("lsd:flex-col-reverse"), o(t).toHaveClass("lsd:gap-2");
+    o(t).toHaveClass("lsd:flex"), o(t).toHaveClass("lsd:flex-col-reverse"), o(t).toHaveClass("lsd:gap-(--lsd-spacing-smaller)");
   }), r("applies data-slot attribute", () => {
     l(
-      /* @__PURE__ */ e(a, { open: !0, children: /* @__PURE__ */ e(n, { children: /* @__PURE__ */ e(s, { children: /* @__PURE__ */ e("button", { type: "button", children: "Cancel" }) }) }) })
+      /* @__PURE__ */ e(a, { open: !0, children: /* @__PURE__ */ e(s, { children: /* @__PURE__ */ e(n, { children: /* @__PURE__ */ e("button", { type: "button", children: "Cancel" }) }) }) })
     );
     const t = document.querySelector('[data-slot="dialog-footer"]');
     o(t).toHaveAttribute("data-slot", "dialog-footer");
   }), r("merges custom className with component classes", () => {
     l(
-      /* @__PURE__ */ e(a, { open: !0, children: /* @__PURE__ */ e(n, { children: /* @__PURE__ */ e(s, { className: "custom-footer-class", children: /* @__PURE__ */ e("button", { type: "button", children: "Cancel" }) }) }) })
+      /* @__PURE__ */ e(a, { open: !0, children: /* @__PURE__ */ e(s, { children: /* @__PURE__ */ e(n, { className: "custom-footer-class", children: /* @__PURE__ */ e("button", { type: "button", children: "Cancel" }) }) }) })
     );
     const t = document.querySelector('[data-slot="dialog-footer"]');
     o(t).toHaveClass("custom-footer-class");

package/dist/components/ui/dialog/__tests__/dialog-header.test.js

@@ -16,7 +16,7 @@ c("DialogHeader", () => {
       /* @__PURE__ */ e(d, { open: !0, children: /* @__PURE__ */ e(o, { children: /* @__PURE__ */ e(s, { children: /* @__PURE__ */ e(i, { children: "Title" }) }) }) })
     );
     const t = document.querySelector('[data-slot="dialog-header"]');
-    a(t).toHaveClass("lsd:flex"), a(t).toHaveClass("lsd:flex-col"), a(t).toHaveClass("lsd:gap-2"), a(t).toHaveClass("lsd:text-center");
+    a(t).toHaveClass("lsd:flex"), a(t).toHaveClass("lsd:flex-col"), a(t).toHaveClass("lsd:gap-(--lsd-spacing-smaller)"), a(t).toHaveClass("lsd:text-center");
   }), r("applies data-slot attribute", () => {
     l(
       /* @__PURE__ */ e(d, { open: !0, children: /* @__PURE__ */ e(o, { children: /* @__PURE__ */ e(s, { children: /* @__PURE__ */ e(i, { children: "Title" }) }) }) })

package/dist/components/ui/input/Input.js

@@ -1,7 +1,7 @@
 import "react/jsx-runtime";
 import "react";
 import "../../../utils-DtaLkIY8.js";
-import { I as i } from "../../../Input-W8QqFI1v.js";
+import { I as i } from "../../../Input-BNaFAHs9.js";
 export {
   i as Input
 };

package/dist/components/ui/input/input.test.js

@@ -1,6 +1,6 @@
 import { jsx as o } from "react/jsx-runtime";
 import { d as p, i as l, r as a, g as t, s, v as i, f as d } from "../../../vi.2VT5v0um-D9hIOtVQ.js";
-import { I as n } from "../../../Input-W8QqFI1v.js";
+import { I as n } from "../../../Input-BNaFAHs9.js";
 p("Input", () => {
   l("renders without crashing", () => {
     a(/* @__PURE__ */ o(n, {})), t(s.getByRole("textbox")).toBeInTheDocument();
@@ -17,15 +17,15 @@ p("Input", () => {
   }), l("renders with default size (medium)", () => {
     a(/* @__PURE__ */ o(n, {}));
     const e = s.getByRole("textbox");
-    t(e).toHaveClass("lsd:text-base"), t(e).toHaveClass("lsd:py-3");
+    t(e).toHaveClass("lsd:text-base"), t(e).toHaveClass("lsd:py-[var(--lsd-spacing-small)]");
   }), l("renders with large size", () => {
     a(/* @__PURE__ */ o(n, { size: "lg" }));
     const e = s.getByRole("textbox");
-    t(e).toHaveClass("lsd:text-lg"), t(e).toHaveClass("lsd:py-4");
+    t(e).toHaveClass("lsd:text-lg"), t(e).toHaveClass("lsd:py-[var(--lsd-spacing-base)]");
   }), l("renders with small size", () => {
     a(/* @__PURE__ */ o(n, { size: "sm" }));
     const e = s.getByRole("textbox");
-    t(e).toHaveClass("lsd:text-sm"), t(e).toHaveClass("lsd:py-2");
+    t(e).toHaveClass("lsd:text-sm"), t(e).toHaveClass("lsd:py-[var(--lsd-spacing-smaller)]");
   }), l("renders with label", () => {
     a(/* @__PURE__ */ o(n, { label: "Email" })), t(s.getByText("Email")).toBeInTheDocument(), t(s.getByText("Email").tagName).toBe("LABEL");
   }), l("associates label with input", () => {
@@ -95,7 +95,7 @@ p("Input", () => {
   }), l("applies focus-visible classes", () => {
     a(/* @__PURE__ */ o(n, {}));
     const e = s.getByRole("textbox");
-    t(e).toHaveClass("focus-visible:lsd:outline-none"), t(e).toHaveClass("lsd:px-4");
+    t(e).toHaveClass("focus-visible:lsd:outline-none"), t(e).toHaveClass("lsd:px-(--lsd-spacing-base)");
   }), l("applies base classes correctly", () => {
     a(/* @__PURE__ */ o(n, {}));
     const e = s.getByRole("textbox");

package/dist/components/ui/label/Label.js

@@ -1,5 +1,5 @@
 import "react/jsx-runtime";
-import { L as t } from "../../../Label-BEM-ZJXI.js";
+import { L as t } from "../../../Label-CjkQmoNz.js";
 import "../../../utils-DtaLkIY8.js";
 export {
   t as Label

package/dist/components/ui/label/label.test.js

@@ -1,6 +1,6 @@
 import { jsx as a } from "react/jsx-runtime";
 import { d as i, i as s, r as l, g as e, s as n, v as d } from "../../../vi.2VT5v0um-D9hIOtVQ.js";
-import { l as o, L as r } from "../../../Label-BEM-ZJXI.js";
+import { l as o, L as r } from "../../../Label-CjkQmoNz.js";
 i("Label", () => {
   s("renders without crashing", () => {
     l(/* @__PURE__ */ a(r, { children: "Label" })), e(n.getByText("Label")).toBeInTheDocument();
@@ -39,7 +39,7 @@ i("Label", () => {
   }), s("applies base classes correctly", () => {
     l(/* @__PURE__ */ a(r, { children: "Label" }));
     const t = n.getByText("Label");
-    e(t).toHaveClass("lsd:flex"), e(t).toHaveClass("lsd:items-center"), e(t).toHaveClass("lsd:gap-2"), e(t).toHaveClass("lsd:select-none");
+    e(t).toHaveClass("lsd:flex"), e(t).toHaveClass("lsd:items-center"), e(t).toHaveClass("lsd:gap-[var(--lsd-spacing-smaller)]"), e(t).toHaveClass("lsd:select-none");
   }), s("merges custom className with component classes", () => {
     l(/* @__PURE__ */ a(r, { className: "custom-class", children: "Label" }));
     const t = n.getByText("Label");

package/dist/components/ui/menubar/Menubar.js

@@ -1,6 +1,6 @@
 import { jsx as a } from "react/jsx-runtime";
 import { c as m } from "../../../utils-DtaLkIY8.js";
-import { m as t } from "../../../types-BSbBWG9A.js";
+import { m as t } from "../../../types-DsORryJJ.js";
 import { R as n } from "../../../index-CUMPAqVa.js";
 function p({ className: r, ...o }) {
   return /* @__PURE__ */ a(

package/dist/components/ui/menubar/MenubarCheckboxItem.js

@@ -1,28 +1,28 @@
-import { jsxs as t, jsx as e } from "react/jsx-runtime";
-import { c as l } from "../../../utils-DtaLkIY8.js";
-import { a as n } from "../../../types-BSbBWG9A.js";
-import { C as m } from "../../../check-Bt2UikoU.js";
-import { C as c, I as i } from "../../../index-CUMPAqVa.js";
-function b({
-  className: s,
-  children: r,
-  checked: o,
-  ...a
+import { jsxs as n, jsx as s } from "react/jsx-runtime";
+import { c as o } from "../../../utils-DtaLkIY8.js";
+import { a as t } from "../../../types-DsORryJJ.js";
+import { C as c } from "../../../check-Bt2UikoU.js";
+import { C as m, I as i } from "../../../index-CUMPAqVa.js";
+function h({
+  className: e,
+  children: a,
+  checked: r,
+  ...l
 }) {
-  return /* @__PURE__ */ t(
-    c,
+  return /* @__PURE__ */ n(
+    m,
     {
       "data-slot": "menubar-checkbox-item",
-      className: l(n(), "lsd:group", s),
-      checked: o,
-      ...a,
+      className: o(t(), "lsd:group", e),
+      checked: r,
+      ...l,
       children: [
-        /* @__PURE__ */ e("span", { className: "lsd:pointer-events-none lsd:absolute lsd:left-2 lsd:flex lsd:size-3.5 lsd:items-center lsd:justify-center", children: /* @__PURE__ */ e(i, { children: /* @__PURE__ */ e(m, { className: "lsd:size-4" }) }) }),
-        /* @__PURE__ */ e("span", { className: "lsd:group-hover:underline lsd:group-focus:underline", children: r })
+        /* @__PURE__ */ s("span", { className: "lsd:pointer-events-none lsd:absolute lsd:left-(--lsd-spacing-smaller) lsd:flex lsd:size-(--lsd-spacing-base) lsd:items-center lsd:justify-center", children: /* @__PURE__ */ s(i, { children: /* @__PURE__ */ s(c, { className: "lsd:size-(--lsd-spacing-base)" }) }) }),
+        /* @__PURE__ */ s("span", { className: "lsd:group-hover:underline lsd:group-focus:underline", children: a })
       ]
     }
   );
 }
 export {
-  b as MenubarCheckboxItem
+  h as MenubarCheckboxItem
 };

package/dist/components/ui/menubar/MenubarContent.js

@@ -1,7 +1,7 @@
 import { jsx as t } from "react/jsx-runtime";
 import { c as e } from "../../../utils-DtaLkIY8.js";
 import { MenubarPortal as s } from "./MenubarPortal.js";
-import { b as i } from "../../../types-BSbBWG9A.js";
+import { b as i } from "../../../types-DsORryJJ.js";
 import { a as c } from "../../../index-CUMPAqVa.js";
 function C({
   className: r,

package/dist/components/ui/menubar/MenubarItem.js

@@ -1,6 +1,6 @@
 import { jsxs as m, jsx as r } from "react/jsx-runtime";
 import { c as n } from "../../../utils-DtaLkIY8.js";
-import { c as o } from "../../../types-BSbBWG9A.js";
+import { c as o } from "../../../types-DsORryJJ.js";
 import { b as i } from "../../../index-CUMPAqVa.js";
 function x({
   className: t,

package/dist/components/ui/menubar/MenubarLabel.js

@@ -1,6 +1,6 @@
 import { jsx as o } from "react/jsx-runtime";
 import { c as t } from "../../../utils-DtaLkIY8.js";
-import { d as e } from "../../../types-BSbBWG9A.js";
+import { d as e } from "../../../types-DsORryJJ.js";
 import { L as n } from "../../../index-CUMPAqVa.js";
 function f({ className: r, inset: a, ...m }) {
   return /* @__PURE__ */ o(

package/dist/components/ui/menubar/MenubarRadioItem.js

@@ -1,27 +1,27 @@
-import { jsxs as o, jsx as e } from "react/jsx-runtime";
-import { c as a } from "../../../utils-DtaLkIY8.js";
-import { h as c } from "../../../types-BSbBWG9A.js";
-import { c as i } from "../../../createLucideIcon-CP-mMPfa.js";
-import { f as n, I as t } from "../../../index-CUMPAqVa.js";
-const d = [["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }]], m = i("circle", d);
-function x({
-  className: s,
+import { jsxs as a, jsx as s } from "react/jsx-runtime";
+import { c } from "../../../utils-DtaLkIY8.js";
+import { h as i } from "../../../types-DsORryJJ.js";
+import { c as n } from "../../../createLucideIcon-CP-mMPfa.js";
+import { f as o, I as t } from "../../../index-CUMPAqVa.js";
+const d = [["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }]], m = n("circle", d);
+function b({
+  className: e,
   children: r,
   ...l
 }) {
-  return /* @__PURE__ */ o(
-    n,
+  return /* @__PURE__ */ a(
+    o,
     {
       "data-slot": "menubar-radio-item",
-      className: a(c(), "lsd:group", s),
+      className: c(i(), "lsd:group", e),
       ...l,
       children: [
-        /* @__PURE__ */ e("span", { className: "lsd:pointer-events-none lsd:absolute lsd:left-2 lsd:flex lsd:size-3.5 lsd:items-center lsd:justify-center", children: /* @__PURE__ */ e(t, { children: /* @__PURE__ */ e(m, { className: "lsd:size-2 lsd:fill-current" }) }) }),
-        /* @__PURE__ */ e("span", { className: "lsd:group-hover:underline lsd:group-focus:underline", children: r })
+        /* @__PURE__ */ s("span", { className: "lsd:pointer-events-none lsd:absolute lsd:left-(--lsd-spacing-smaller) lsd:flex lsd:size-(--lsd-spacing-base) lsd:items-center lsd:justify-center", children: /* @__PURE__ */ s(t, { children: /* @__PURE__ */ s(m, { className: "lsd:size-(--lsd-spacing-smaller) lsd:fill-current" }) }) }),
+        /* @__PURE__ */ s("span", { className: "lsd:group-hover:underline lsd:group-focus:underline", children: r })
       ]
     }
   );
 }
 export {
-  x as MenubarRadioItem
+  b as MenubarRadioItem
 };

package/dist/components/ui/menubar/MenubarSeparator.js

@@ -1,6 +1,6 @@
 import { jsx as o } from "react/jsx-runtime";
 import { c as t } from "../../../utils-DtaLkIY8.js";
-import { e } from "../../../types-BSbBWG9A.js";
+import { e } from "../../../types-DsORryJJ.js";
 import { S as m } from "../../../index-CUMPAqVa.js";
 function f({ className: r, ...a }) {
   return /* @__PURE__ */ o(

package/dist/components/ui/menubar/MenubarSubContent.js

@@ -1,6 +1,6 @@
 import { jsx as o } from "react/jsx-runtime";
 import { c as r } from "../../../utils-DtaLkIY8.js";
-import { f as a } from "../../../types-BSbBWG9A.js";
+import { f as a } from "../../../types-DsORryJJ.js";
 import { e } from "../../../index-CUMPAqVa.js";
 function f({ className: t, ...n }) {
   return /* @__PURE__ */ o(