@nipsys/shadcn-lsd 0.2.4 → 0.2.5

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

@@ -1,154 +1,150 @@
 import { jsx as n } from "react/jsx-runtime";
-import { d as c, i as o, r as l, g as t, s as i, v as r, f as u } from "../../../vi.2VT5v0um-D9hIOtVQ.js";
-import { b as e, B as a } from "../../../Button-DoTpV6G1.js";
-c("Button", () => {
+import { d, i as o, r as a, g as t, s as r, v as i, f as u } from "../../../vi.2VT5v0um-D9hIOtVQ.js";
+import { b as e, B as l } from "../../../Button-CCXyUaSw.js";
+d("Button", () => {
   o("renders without crashing", () => {
-    l(/* @__PURE__ */ n(a, { children: "Click me" })), t(i.getByRole("button")).toBeInTheDocument();
+    a(/* @__PURE__ */ n(l, { children: "Click me" })), t(r.getByRole("button")).toBeInTheDocument();
   }), o("renders children correctly", () => {
-    l(/* @__PURE__ */ n(a, { children: "Test Button" })), t(i.getByRole("button")).toHaveTextContent("Test Button");
+    a(/* @__PURE__ */ n(l, { children: "Test Button" })), t(r.getByRole("button")).toHaveTextContent("Test Button");
   }), o("applies filled variant classes correctly", () => {
-    l(/* @__PURE__ */ n(a, { variant: "filled", children: "Filled" }));
-    const s = i.getByRole("button");
+    a(/* @__PURE__ */ n(l, { variant: "filled", children: "Filled" }));
+    const s = r.getByRole("button");
     t(s).toHaveClass("lsd:bg-primary"), t(s).toHaveClass("lsd:text-primary-foreground");
   }), o("applies outlined variant classes correctly", () => {
-    l(/* @__PURE__ */ n(a, { variant: "outlined", children: "Outlined" }));
-    const s = i.getByRole("button");
+    a(/* @__PURE__ */ n(l, { variant: "outlined", children: "Outlined" }));
+    const s = r.getByRole("button");
     t(s).toHaveClass("lsd:bg-transparent"), t(s).toHaveClass("lsd:text-foreground");
   }), o("applies filled-icon variant classes correctly", () => {
-    l(/* @__PURE__ */ n(a, { variant: "filled-icon", children: "Icon" }));
-    const s = i.getByRole("button");
+    a(/* @__PURE__ */ n(l, { variant: "filled-icon", children: "Icon" }));
+    const s = r.getByRole("button");
     t(s).toHaveClass("lsd:bg-primary"), t(s).toHaveClass("lsd:rounded-full");
   }), o("applies outlined-icon variant classes correctly", () => {
-    l(/* @__PURE__ */ n(a, { variant: "outlined-icon", children: "Icon" }));
-    const s = i.getByRole("button");
+    a(/* @__PURE__ */ n(l, { variant: "outlined-icon", children: "Icon" }));
+    const s = r.getByRole("button");
     t(s).toHaveClass("lsd:bg-transparent"), t(s).toHaveClass("lsd:rounded-full");
   }), o("applies link variant classes correctly", () => {
-    l(/* @__PURE__ */ n(a, { variant: "link", children: "Link" }));
-    const s = i.getByRole("button");
+    a(/* @__PURE__ */ n(l, { variant: "link", children: "Link" }));
+    const s = r.getByRole("button");
     t(s).toHaveClass("lsd:bg-transparent"), t(s).toHaveClass("lsd:text-foreground"), t(s).toHaveClass("lsd:border-0"), t(s).toHaveClass("lsd:hover:underline");
   }), o("applies ghost variant classes correctly", () => {
-    l(/* @__PURE__ */ n(a, { variant: "ghost", children: "Ghost" }));
-    const s = i.getByRole("button");
+    a(/* @__PURE__ */ n(l, { variant: "ghost", children: "Ghost" }));
+    const s = r.getByRole("button");
     t(s).toHaveClass("lsd:bg-transparent"), t(s).toHaveClass("lsd:text-foreground"), t(s).toHaveClass("lsd:border-0"), t(s).toHaveClass("lsd:hover:bg-accent"), t(s).toHaveClass("lsd:hover:text-accent-foreground");
   }), o("applies ghost-icon variant classes correctly", () => {
-    l(/* @__PURE__ */ n(a, { variant: "ghost-icon", children: "Icon" }));
-    const s = i.getByRole("button");
+    a(/* @__PURE__ */ n(l, { variant: "ghost-icon", children: "Icon" }));
+    const s = r.getByRole("button");
     t(s).toHaveClass("lsd:bg-transparent"), t(s).toHaveClass("lsd:text-foreground"), t(s).toHaveClass("lsd:border-0"), t(s).toHaveClass("lsd:rounded-full"), t(s).toHaveClass("lsd:hover:bg-accent"), t(s).toHaveClass("lsd:hover:text-accent-foreground");
   }), o("applies destructive variant classes correctly", () => {
-    l(/* @__PURE__ */ n(a, { variant: "destructive", children: "Delete" }));
-    const s = i.getByRole("button");
+    a(/* @__PURE__ */ n(l, { variant: "destructive", children: "Delete" }));
+    const s = r.getByRole("button");
     t(s).toHaveClass("lsd:bg-lsd-destructive"), t(s).toHaveClass("lsd:text-white"), t(s).toHaveClass("lsd:border-lsd-destructive"), t(s).toHaveClass("lsd:hover:bg-lsd-destructive/90");
   }), o("applies destructive-icon variant classes correctly", () => {
-    l(/* @__PURE__ */ n(a, { variant: "destructive-icon", children: "Delete" }));
-    const s = i.getByRole("button");
+    a(/* @__PURE__ */ n(l, { variant: "destructive-icon", children: "Delete" }));
+    const s = r.getByRole("button");
     t(s).toHaveClass("lsd:bg-lsd-destructive"), t(s).toHaveClass("lsd:text-white"), t(s).toHaveClass("lsd:border-lsd-destructive"), t(s).toHaveClass("lsd:rounded-full"), t(s).toHaveClass("lsd:hover:bg-lsd-destructive/90");
   }), o("applies success variant classes correctly", () => {
-    l(/* @__PURE__ */ n(a, { variant: "success", children: "Save" }));
-    const s = i.getByRole("button");
+    a(/* @__PURE__ */ n(l, { variant: "success", children: "Save" }));
+    const s = r.getByRole("button");
     t(s).toHaveClass("lsd:bg-lsd-success"), t(s).toHaveClass("lsd:text-white"), t(s).toHaveClass("lsd:border-lsd-success"), t(s).toHaveClass("lsd:hover:bg-lsd-success/90");
   }), o("applies success-icon variant classes correctly", () => {
-    l(/* @__PURE__ */ n(a, { variant: "success-icon", children: "Save" }));
-    const s = i.getByRole("button");
+    a(/* @__PURE__ */ n(l, { variant: "success-icon", children: "Save" }));
+    const s = r.getByRole("button");
     t(s).toHaveClass("lsd:bg-lsd-success"), t(s).toHaveClass("lsd:text-white"), t(s).toHaveClass("lsd:border-lsd-success"), t(s).toHaveClass("lsd:rounded-full"), t(s).toHaveClass("lsd:hover:bg-lsd-success/90");
   }), o("applies medium size classes correctly", () => {
-    l(/* @__PURE__ */ n(a, { size: "md", children: "Medium" }));
-    const s = i.getByRole("button");
-    t(s).toHaveClass("lsd:h-[34px]"), t(s).toHaveClass("lsd:px-6"), t(s).toHaveClass("lsd:py-2"), t(s).toHaveClass("lsd:text-base");
+    a(/* @__PURE__ */ n(l, { size: "md", children: "Medium" }));
+    const s = r.getByRole("button");
+    t(s).toHaveClass("lsd:h-10"), t(s).toHaveClass("lsd:px-[var(--lsd-spacing-larger)]"), t(s).toHaveClass("lsd:py-[var(--lsd-spacing-smaller)]"), t(s).toHaveClass("lsd:text-base");
   }), o("applies small size classes correctly", () => {
-    l(/* @__PURE__ */ n(a, { size: "sm", children: "Small" }));
-    const s = i.getByRole("button");
-    t(s).toHaveClass("lsd:h-8"), t(s).toHaveClass("lsd:px-3"), t(s).toHaveClass("lsd:py-[6px]"), t(s).toHaveClass("lsd:text-sm");
+    a(/* @__PURE__ */ n(l, { size: "sm", children: "Small" }));
+    const s = r.getByRole("button");
+    t(s).toHaveClass("lsd:h-8"), t(s).toHaveClass("lsd:px-[var(--lsd-spacing-small)]"), t(s).toHaveClass("lsd:py-[var(--lsd-spacing-smaller)]"), t(s).toHaveClass("lsd:text-sm");
   }), o("applies large size classes correctly", () => {
-    l(/* @__PURE__ */ n(a, { size: "lg", children: "Large" }));
-    const s = i.getByRole("button");
-    t(s).toHaveClass("lsd:h-12"), t(s).toHaveClass("lsd:px-8"), t(s).toHaveClass("lsd:py-[10px]"), t(s).toHaveClass("lsd:text-lg");
+    a(/* @__PURE__ */ n(l, { size: "lg", children: "Large" }));
+    const s = r.getByRole("button");
+    t(s).toHaveClass("lsd:h-12"), t(s).toHaveClass("lsd:px-8"), t(s).toHaveClass("lsd:py-[var(--lsd-spacing-small)]"), t(s).toHaveClass("lsd:text-lg");
   }), o("applies icon-md size classes correctly", () => {
-    l(/* @__PURE__ */ n(a, { size: "icon-md", children: "Icon" }));
-    const s = i.getByRole("button");
+    a(/* @__PURE__ */ n(l, { size: "icon-md", children: "Icon" }));
+    const s = r.getByRole("button");
     t(s).toHaveClass("lsd:w-10"), t(s).toHaveClass("lsd:h-10");
   }), o("applies icon-sm size classes correctly", () => {
-    l(/* @__PURE__ */ n(a, { size: "icon-sm", children: "Icon" }));
-    const s = i.getByRole("button");
+    a(/* @__PURE__ */ n(l, { size: "icon-sm", children: "Icon" }));
+    const s = r.getByRole("button");
     t(s).toHaveClass("lsd:w-8"), t(s).toHaveClass("lsd:h-8");
-  }), o("applies icon-xs size classes correctly", () => {
-    l(/* @__PURE__ */ n(a, { size: "icon-xs", children: "Icon" }));
-    const s = i.getByRole("button");
-    t(s).toHaveClass("lsd:w-6"), t(s).toHaveClass("lsd:h-6");
+  }), o("applies icon-md size classes correctly", () => {
+    a(/* @__PURE__ */ n(l, { size: "icon-md", children: "Icon" }));
+    const s = r.getByRole("button");
+    t(s).toHaveClass("lsd:w-10"), t(s).toHaveClass("lsd:h-10");
   }), o("applies icon-lg size classes correctly", () => {
-    l(/* @__PURE__ */ n(a, { size: "icon-lg", children: "Icon" }));
-    const s = i.getByRole("button");
+    a(/* @__PURE__ */ n(l, { size: "icon-lg", children: "Icon" }));
+    const s = r.getByRole("button");
     t(s).toHaveClass("lsd:w-12"), t(s).toHaveClass("lsd:h-12");
-  }), o("applies icon-xl size classes correctly", () => {
-    l(/* @__PURE__ */ n(a, { size: "icon-xl", children: "Icon" }));
-    const s = i.getByRole("button");
-    t(s).toHaveClass("lsd:w-16"), t(s).toHaveClass("lsd:h-16");
   }), o("uses default variant when not specified", () => {
-    l(/* @__PURE__ */ n(a, { children: "Default" }));
-    const s = i.getByRole("button");
+    a(/* @__PURE__ */ n(l, { children: "Default" }));
+    const s = r.getByRole("button");
     t(s).toHaveClass("lsd:bg-primary");
   }), o("uses default size when not specified", () => {
-    l(/* @__PURE__ */ n(a, { children: "Default" }));
-    const s = i.getByRole("button");
-    t(s).toHaveClass("lsd:h-[34px]");
+    a(/* @__PURE__ */ n(l, { children: "Default" }));
+    const s = r.getByRole("button");
+    t(s).toHaveClass("lsd:h-10");
   }), o("handles click events", () => {
-    const s = r.fn();
-    l(/* @__PURE__ */ n(a, { onClick: s, children: "Click me" })), u.click(i.getByRole("button")), t(s).toHaveBeenCalledTimes(1);
+    const s = i.fn();
+    a(/* @__PURE__ */ n(l, { onClick: s, children: "Click me" })), u.click(r.getByRole("button")), t(s).toHaveBeenCalledTimes(1);
   }), o("forwards ref to underlying button element", () => {
-    const s = r.fn();
-    l(/* @__PURE__ */ n(a, { ref: s, children: "Ref Test" })), t(s).toHaveBeenCalled(), t(s.mock.calls[0][0]).toBeInstanceOf(HTMLButtonElement);
+    const s = i.fn();
+    a(/* @__PURE__ */ n(l, { ref: s, children: "Ref Test" })), t(s).toHaveBeenCalled(), t(s.mock.calls[0][0]).toBeInstanceOf(HTMLButtonElement);
   }), o("applies disabled state correctly", () => {
-    l(/* @__PURE__ */ n(a, { disabled: !0, children: "Disabled" }));
-    const s = i.getByRole("button");
+    a(/* @__PURE__ */ n(l, { disabled: !0, children: "Disabled" }));
+    const s = r.getByRole("button");
     t(s).toBeDisabled(), t(s).toHaveClass("lsd:disabled:opacity-34"), t(s).toHaveClass("lsd:disabled:cursor-not-allowed");
   }), o("merges custom className with component classes", () => {
-    l(/* @__PURE__ */ n(a, { className: "custom-class", children: "Custom" }));
-    const s = i.getByRole("button");
+    a(/* @__PURE__ */ n(l, { className: "custom-class", children: "Custom" }));
+    const s = r.getByRole("button");
     t(s).toHaveClass("custom-class");
   }), o("applies base classes correctly", () => {
-    l(/* @__PURE__ */ n(a, { children: "Base" }));
-    const s = i.getByRole("button");
+    a(/* @__PURE__ */ n(l, { children: "Base" }));
+    const s = r.getByRole("button");
     t(s).toHaveClass("lsd:inline-flex"), t(s).toHaveClass("lsd:items-center"), t(s).toHaveClass("lsd:justify-center"), t(s).toHaveClass("lsd:border"), t(s).toHaveClass("lsd:transition-colors"), t(s).toHaveClass("lsd:cursor-pointer"), t(s).toHaveClass("lsd:text-primary-foreground"), t(s).toHaveClass("lsd:hover:underline");
   }), o("passes through additional props", () => {
-    l(
-      /* @__PURE__ */ n(a, { "data-testid": "test-button", "aria-label": "Test", children: "Button" })
+    a(
+      /* @__PURE__ */ n(l, { "data-testid": "test-button", "aria-label": "Test", children: "Button" })
     );
-    const s = i.getByRole("button");
+    const s = r.getByRole("button");
     t(s).toHaveAttribute("data-testid", "test-button"), t(s).toHaveAttribute("aria-label", "Test");
   }), o("shows loading spinner when loading prop is true", () => {
-    l(/* @__PURE__ */ n(a, { loading: !0, children: "Loading" }));
-    const s = i.getByRole("button");
+    a(/* @__PURE__ */ n(l, { loading: !0, children: "Loading" }));
+    const s = r.getByRole("button");
     t(s).toBeDisabled(), t(s.querySelector("svg")).toBeInTheDocument();
   }), o("dims content when loading", () => {
-    l(/* @__PURE__ */ n(a, { loading: !0, children: "Click me" }));
-    const d = i.getByRole("button").querySelector("span.lsd\\:opacity-50");
-    t(d).toHaveTextContent("Click me");
+    a(/* @__PURE__ */ n(l, { loading: !0, children: "Click me" }));
+    const c = r.getByRole("button").querySelector("span.lsd\\:opacity-50");
+    t(c).toHaveTextContent("Click me");
   }), o("does not show spinner when loading prop is false", () => {
-    l(/* @__PURE__ */ n(a, { loading: !1, children: "Click me" }));
-    const s = i.getByRole("button");
+    a(/* @__PURE__ */ n(l, { loading: !1, children: "Click me" }));
+    const s = r.getByRole("button");
     t(s).not.toBeDisabled(), t(s.querySelector("svg")).not.toBeInTheDocument();
   }), o("applies fullWidth class when fullWidth prop is true", () => {
-    l(/* @__PURE__ */ n(a, { fullWidth: !0, children: "Full Width" }));
-    const s = i.getByRole("button");
+    a(/* @__PURE__ */ n(l, { fullWidth: !0, children: "Full Width" }));
+    const s = r.getByRole("button");
     t(s).toHaveClass("lsd:w-full");
   }), o("does not apply fullWidth class when fullWidth prop is false", () => {
-    l(/* @__PURE__ */ n(a, { fullWidth: !1, children: "Normal Width" }));
-    const s = i.getByRole("button");
+    a(/* @__PURE__ */ n(l, { fullWidth: !1, children: "Normal Width" }));
+    const s = r.getByRole("button");
     t(s).not.toHaveClass("lsd:w-full");
   }), o("disables button when loading is true even if disabled prop is false", () => {
-    l(
-      /* @__PURE__ */ n(a, { loading: !0, disabled: !1, children: "Loading" })
+    a(
+      /* @__PURE__ */ n(l, { loading: !0, disabled: !1, children: "Loading" })
     );
-    const s = i.getByRole("button");
+    const s = r.getByRole("button");
     t(s).toBeDisabled();
   }), o("keeps button disabled when both loading and disabled are true", () => {
-    l(
-      /* @__PURE__ */ n(a, { loading: !0, disabled: !0, children: "Loading" })
+    a(
+      /* @__PURE__ */ n(l, { loading: !0, disabled: !0, children: "Loading" })
     );
-    const s = i.getByRole("button");
+    const s = r.getByRole("button");
     t(s).toBeDisabled();
   });
 });
-c("buttonVariants", () => {
+d("buttonVariants", () => {
   o("returns correct classes for filled variant", () => {
     t(e({ variant: "filled" })).toContain("lsd:bg-primary"), t(e({ variant: "filled" })).toContain(
       "lsd:text-primary-foreground"
@@ -234,25 +230,33 @@ c("buttonVariants", () => {
       "lsd:hover:bg-lsd-success/90"
     );
   }), o("returns correct classes for medium size", () => {
-    t(e({ size: "md" })).toContain("lsd:h-[34px]"), t(e({ size: "md" })).toContain("lsd:px-6"), t(e({ size: "md" })).toContain("lsd:py-2"), t(e({ size: "md" })).toContain("lsd:text-base");
+    t(e({ size: "md" })).toContain("lsd:h-10"), t(e({ size: "md" })).toContain(
+      "lsd:px-[var(--lsd-spacing-larger)]"
+    ), t(e({ size: "md" })).toContain(
+      "lsd:py-[var(--lsd-spacing-smaller)]"
+    ), t(e({ size: "md" })).toContain("lsd:text-base");
   }), o("returns correct classes for small size", () => {
-    t(e({ size: "sm" })).toContain("lsd:h-8"), t(e({ size: "sm" })).toContain("lsd:px-3"), t(e({ size: "sm" })).toContain("lsd:py-[6px]"), t(e({ size: "sm" })).toContain("lsd:text-sm");
+    t(e({ size: "sm" })).toContain("lsd:h-8"), t(e({ size: "sm" })).toContain(
+      "lsd:px-[var(--lsd-spacing-small)]"
+    ), t(e({ size: "sm" })).toContain(
+      "lsd:py-[var(--lsd-spacing-smaller)]"
+    ), t(e({ size: "sm" })).toContain("lsd:text-sm");
   }), o("returns correct classes for large size", () => {
-    t(e({ size: "lg" })).toContain("lsd:h-12"), t(e({ size: "lg" })).toContain("lsd:px-8"), t(e({ size: "lg" })).toContain("lsd:py-[10px]"), t(e({ size: "lg" })).toContain("lsd:text-lg");
+    t(e({ size: "lg" })).toContain("lsd:h-12"), t(e({ size: "lg" })).toContain("lsd:px-8"), t(e({ size: "lg" })).toContain(
+      "lsd:py-[var(--lsd-spacing-small)]"
+    ), t(e({ size: "lg" })).toContain("lsd:text-lg");
   }), o("returns correct classes for icon-md size", () => {
     t(e({ size: "icon-md" })).toContain("lsd:w-10"), t(e({ size: "icon-md" })).toContain("lsd:h-10");
   }), o("returns correct classes for icon-sm size", () => {
     t(e({ size: "icon-sm" })).toContain("lsd:w-8"), t(e({ size: "icon-sm" })).toContain("lsd:h-8");
-  }), o("returns correct classes for icon-xs size", () => {
-    t(e({ size: "icon-xs" })).toContain("lsd:w-6"), t(e({ size: "icon-xs" })).toContain("lsd:h-6");
+  }), o("returns correct classes for icon-md size", () => {
+    t(e({ size: "icon-md" })).toContain("lsd:w-10"), t(e({ size: "icon-md" })).toContain("lsd:h-10");
   }), o("returns correct classes for icon-lg size", () => {
     t(e({ size: "icon-lg" })).toContain("lsd:w-12"), t(e({ size: "icon-lg" })).toContain("lsd:h-12");
-  }), o("returns correct classes for icon-xl size", () => {
-    t(e({ size: "icon-xl" })).toContain("lsd:w-16"), t(e({ size: "icon-xl" })).toContain("lsd:h-16");
   }), o("uses default variant when not specified", () => {
     t(e({})).toContain("lsd:bg-primary");
   }), o("uses default size when not specified", () => {
-    t(e({})).toContain("lsd:h-[34px]");
+    t(e({})).toContain("lsd:h-10");
   }), o("combines variant and size correctly", () => {
     const s = e({ variant: "outlined", size: "lg" });
     t(s).toContain("lsd:bg-transparent"), t(s).toContain("lsd:h-12");

package/dist/components/ui/button/types.d.ts

@@ -3,7 +3,7 @@ import { IconSize, SizeVariant } from '../../../lib/types';
 export type ButtonVariant = 'filled' | 'outlined' | 'filled-icon' | 'outlined-icon' | 'link' | 'ghost' | 'ghost-icon' | 'destructive' | 'destructive-icon' | 'success' | 'success-icon';
 export declare const buttonVariants: (props?: ({
     variant?: "link" | "outlined" | "filled" | "filled-icon" | "outlined-icon" | "ghost" | "ghost-icon" | "destructive" | "destructive-icon" | "success" | "success-icon" | null | undefined;
-    size?: "xs" | "sm" | "md" | "lg" | "xl" | "icon-xs" | "icon-sm" | "icon-md" | "icon-lg" | "icon-xl" | null | undefined;
+    size?: "sm" | "md" | "lg" | "icon-sm" | "icon-md" | "icon-lg" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export type ButtonVariants = VariantProps<typeof buttonVariants> & {
     variant?: ButtonVariant;

package/dist/components/ui/button-group/ButtonGroup.js

@@ -1,7 +1,7 @@
 import "react/jsx-runtime";
 import "react";
 import "../../../utils-DtaLkIY8.js";
-import { B as i } from "../../../ButtonGroup-BgylmC1j.js";
+import { B as i } from "../../../ButtonGroup-WtMRnYIq.js";
 export {
   i as ButtonGroup
 };

package/dist/components/ui/button-group/ButtonGroupText.js

@@ -1,21 +1,21 @@
-import { jsx as t } from "react/jsx-runtime";
-import { S as r } from "../../../index-BvoZGpli.js";
-import * as l from "react";
-import { c as m } from "../../../utils-DtaLkIY8.js";
-const a = l.forwardRef(
-  ({ className: s, asChild: o = !1, ...d }, e) => /* @__PURE__ */ t(
-    o ? r : "div",
+import { jsx as l } from "react/jsx-runtime";
+import { S as t } from "../../../index-BvoZGpli.js";
+import * as r from "react";
+import { c as a } from "../../../utils-DtaLkIY8.js";
+const m = r.forwardRef(
+  ({ className: s, asChild: o = !1, ...d }, e) => /* @__PURE__ */ l(
+    o ? t : "div",
     {
       ref: e,
-      className: m(
-        "lsd:bg-secondary lsd:flex lsd:items-center lsd:gap-2 lsd:rounded-md lsd:border lsd:px-4 lsd:text-sm lsd:font-medium lsd:shadow-xs lsd:[&_svg]:pointer-events-none lsd:[&_svg:not([class*='size-'])]:size-4 lsd:disabled:cursor-not-allowed",
+      className: a(
+        "lsd:bg-secondary lsd:flex lsd:items-center lsd:gap-(--lsd-spacing-smaller) lsd:rounded-md lsd:border lsd:px-(--lsd-spacing-base) lsd:text-sm lsd:font-medium lsd:shadow-xs lsd:[&_svg]:pointer-events-none lsd:[&_svg:not([class*='size-'])]:size-4 lsd:disabled:cursor-not-allowed",
         s
       ),
       ...d
     }
   )
 );
-a.displayName = "ButtonGroupText";
+m.displayName = "ButtonGroupText";
 export {
-  a as ButtonGroupText
+  m as ButtonGroupText
 };

package/dist/components/ui/button-group/__tests__/button-group-separator.test.js

@@ -1,6 +1,6 @@
 import { jsx as r } from "react/jsx-runtime";
 import { d as l, i as e, r as s, g as o, s as c } from "../../../../vi.2VT5v0um-D9hIOtVQ.js";
-import "../../../../ButtonGroup-BgylmC1j.js";
+import "../../../../ButtonGroup-WtMRnYIq.js";
 import { ButtonGroupSeparator as n } from "../ButtonGroupSeparator.js";
 import "../ButtonGroupText.js";
 const i = (t, a) => t.querySelector(`[data-slot="${a}"]`);

package/dist/components/ui/button-group/__tests__/button-group-text.test.js

@@ -1,36 +1,36 @@
 import { jsx as s } from "react/jsx-runtime";
-import { d, i as a, r as o, g as t, s as l } from "../../../../vi.2VT5v0um-D9hIOtVQ.js";
-import "../../../../ButtonGroup-BgylmC1j.js";
+import { d, i as a, r as l, g as t, s as o } from "../../../../vi.2VT5v0um-D9hIOtVQ.js";
+import "../../../../ButtonGroup-WtMRnYIq.js";
 import "../ButtonGroupSeparator.js";
 import { ButtonGroupText as r } from "../ButtonGroupText.js";
 d("ButtonGroupText", () => {
   a("renders without crashing", () => {
-    o(/* @__PURE__ */ s(r, { children: "Text" })), t(l.getByText("Text")).toBeInTheDocument();
+    l(/* @__PURE__ */ s(r, { children: "Text" })), t(o.getByText("Text")).toBeInTheDocument();
   }), a("renders with custom className", () => {
-    o(/* @__PURE__ */ s(r, { className: "custom-class", children: "Text" })), t(l.getByText("Text")).toHaveClass("custom-class");
+    l(/* @__PURE__ */ s(r, { className: "custom-class", children: "Text" })), t(o.getByText("Text")).toHaveClass("custom-class");
   }), a("applies default classes", () => {
-    o(/* @__PURE__ */ s(r, { children: "Text" }));
-    const e = l.getByText("Text");
-    t(e).toHaveClass("lsd:bg-secondary"), t(e).toHaveClass("lsd:flex"), t(e).toHaveClass("lsd:items-center"), t(e).toHaveClass("lsd:gap-2"), t(e).toHaveClass("lsd:rounded-md"), t(e).toHaveClass("lsd:border"), t(e).toHaveClass("lsd:px-4"), t(e).toHaveClass("lsd:text-sm"), t(e).toHaveClass("lsd:font-medium"), t(e).toHaveClass("lsd:shadow-xs");
+    l(/* @__PURE__ */ s(r, { children: "Text" }));
+    const e = o.getByText("Text");
+    t(e).toHaveClass("lsd:bg-secondary"), t(e).toHaveClass("lsd:flex"), t(e).toHaveClass("lsd:items-center"), t(e).toHaveClass("lsd:gap-(--lsd-spacing-smaller)"), t(e).toHaveClass("lsd:rounded-md"), t(e).toHaveClass("lsd:border"), t(e).toHaveClass("lsd:px-(--lsd-spacing-base)"), t(e).toHaveClass("lsd:text-sm"), t(e).toHaveClass("lsd:font-medium"), t(e).toHaveClass("lsd:shadow-xs");
   }), a("renders as div by default", () => {
-    o(/* @__PURE__ */ s(r, { children: "Text" }));
-    const e = l.getByText("Text");
+    l(/* @__PURE__ */ s(r, { children: "Text" }));
+    const e = o.getByText("Text");
     t(e.tagName).toBe("DIV");
   }), a("renders as Slot when asChild is true", () => {
-    o(
+    l(
       /* @__PURE__ */ s(r, { asChild: !0, children: /* @__PURE__ */ s("span", { children: "Text" }) })
     );
-    const e = l.getByText("Text");
+    const e = o.getByText("Text");
     t(e.tagName).toBe("SPAN");
   }), a("passes through additional props", () => {
-    o(
+    l(
       /* @__PURE__ */ s(r, { "data-testid": "test-text", "data-custom": "value", children: "Text" })
-    ), t(l.getByTestId("test-text")).toHaveAttribute(
+    ), t(o.getByTestId("test-text")).toHaveAttribute(
       "data-custom",
       "value"
     );
   }), a("forwards ref", () => {
     const e = { current: null };
-    o(/* @__PURE__ */ s(r, { ref: e, children: "Text" })), t(e.current).toBeInstanceOf(HTMLDivElement);
+    l(/* @__PURE__ */ s(r, { ref: e, children: "Text" })), t(e.current).toBeInstanceOf(HTMLDivElement);
   });
 });

package/dist/components/ui/button-group/__tests__/button-group.test.js

@@ -1,6 +1,6 @@
 import { jsx as e, jsxs as i } from "react/jsx-runtime";
 import { d, i as r, r as s, g as t, s as u } from "../../../../vi.2VT5v0um-D9hIOtVQ.js";
-import { b as c, B as a } from "../../../../ButtonGroup-BgylmC1j.js";
+import { b as c, B as a } from "../../../../ButtonGroup-WtMRnYIq.js";
 import { ButtonGroupSeparator as p } from "../ButtonGroupSeparator.js";
 import { ButtonGroupText as h } from "../ButtonGroupText.js";
 const l = (o, n) => o.querySelector(`[data-slot="${n}"]`);

package/dist/components/ui/card/CardContent.js

@@ -1,13 +1,16 @@
-import { jsx as o } from "react/jsx-runtime";
-import * as s from "react";
+import { jsx as s } from "react/jsx-runtime";
+import * as o from "react";
 import { c as d } from "../../../utils-DtaLkIY8.js";
-const e = s.forwardRef(({ className: t, ...r }, a) => /* @__PURE__ */ o(
+const e = o.forwardRef(({ className: r, ...a }, t) => /* @__PURE__ */ s(
   "div",
   {
-    ref: a,
+    ref: t,
     "data-slot": "card-content",
-    className: d("lsd:px-6 lsd:py-6", t),
-    ...r
+    className: d(
+      "lsd:px-(--lsd-spacing-larger) lsd:py-(--lsd-spacing-larger)",
+      r
+    ),
+    ...a
   }
 ));
 e.displayName = "CardContent";

package/dist/components/ui/card/CardFooter.js

@@ -1,19 +1,19 @@
-import { jsx as s } from "react/jsx-runtime";
+import { jsx as a } from "react/jsx-runtime";
 import * as e from "react";
-import { c as t } from "../../../utils-DtaLkIY8.js";
-const a = e.forwardRef(({ className: r, ...o }, d) => /* @__PURE__ */ s(
+import { c as o } from "../../../utils-DtaLkIY8.js";
+const l = e.forwardRef(({ className: r, ...s }, d) => /* @__PURE__ */ a(
   "div",
   {
     ref: d,
     "data-slot": "card-footer",
-    className: t(
-      "lsd:flex lsd:items-center lsd:px-6 lsd:py-6 lsd:border-t lsd:border-lsd-border lsd:pt-6",
+    className: o(
+      "lsd:flex lsd:items-center lsd:px-(--lsd-spacing-larger) lsd:py-(--lsd-spacing-larger) lsd:border-t lsd:border-lsd-border lsd:pt-(--lsd-spacing-larger)",
       r
     ),
-    ...o
+    ...s
   }
 ));
-a.displayName = "CardFooter";
+l.displayName = "CardFooter";
 export {
-  a as CardFooter
+  l as CardFooter
 };

package/dist/components/ui/card/CardHeader.js

@@ -1,19 +1,19 @@
 import { jsx as s } from "react/jsx-runtime";
-import * as o from "react";
-import { c as t } from "../../../utils-DtaLkIY8.js";
-const e = o.forwardRef(({ className: r, ...d }, a) => /* @__PURE__ */ s(
+import * as l from "react";
+import { c as e } from "../../../utils-DtaLkIY8.js";
+const o = l.forwardRef(({ className: r, ...a }, d) => /* @__PURE__ */ s(
   "div",
   {
-    ref: a,
+    ref: d,
     "data-slot": "card-header",
-    className: t(
-      "@container/card-header lsd:grid lsd:auto-rows-min lsd:grid-rows-[auto_auto] lsd:items-start lsd:gap-2 lsd:px-6 lsd:py-6 lsd:has-data-[slot=card-action]:grid-cols-[1fr_auto] lsd:border-b lsd:border-lsd-border lsd:pb-6",
+    className: e(
+      "@container/card-header lsd:grid lsd:auto-rows-min lsd:grid-rows-[auto_auto] lsd:items-start lsd:gap-(--lsd-spacing-smaller) lsd:px-(--lsd-spacing-larger) lsd:py-(--lsd-spacing-larger) lsd:has-data-[slot=card-action]:grid-cols-[1fr_auto] lsd:border-b lsd:border-lsd-border lsd:pb-(--lsd-spacing-larger)",
       r
     ),
-    ...d
+    ...a
   }
 ));
-e.displayName = "CardHeader";
+o.displayName = "CardHeader";
 export {
-  e as CardHeader
+  o as CardHeader
 };

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

@@ -1,29 +1,29 @@
 import { jsx as n } from "react/jsx-runtime";
-import { d as i, i as r, r as s, g as o, s as l } from "../../../../vi.2VT5v0um-D9hIOtVQ.js";
+import { d as l, i as s, r as o, g as r, s as i } from "../../../../vi.2VT5v0um-D9hIOtVQ.js";
 import "../Card.js";
 import "../CardAction.js";
-import { CardContent as c } from "../CardContent.js";
+import { CardContent as a } from "../CardContent.js";
 import "../CardDescription.js";
 import "../CardFooter.js";
 import "../CardHeader.js";
 import "../CardTitle.js";
-const a = (t, e) => t.querySelector(`[data-slot="${e}"]`);
-i("CardContent", () => {
-  r("renders without crashing", () => {
-    const { container: t } = s(/* @__PURE__ */ n(c, {}));
-    o(a(t, "card-content")).toBeInTheDocument();
-  }), r("renders with custom className", () => {
-    const { container: t } = s(/* @__PURE__ */ n(c, { className: "custom-class" })), e = a(t, "card-content");
-    o(e).toHaveClass("custom-class");
-  }), r("applies default classes", () => {
-    const { container: t } = s(/* @__PURE__ */ n(c, {})), e = a(t, "card-content");
-    o(e).toHaveClass("lsd:px-6"), o(e).toHaveClass("lsd:py-6");
-  }), r("renders children", () => {
-    s(
-      /* @__PURE__ */ n(c, { children: /* @__PURE__ */ n("span", { children: "Content" }) })
-    ), o(l.getByText("Content")).toBeInTheDocument();
-  }), r("forwards ref", () => {
+const c = (t, e) => t.querySelector(`[data-slot="${e}"]`);
+l("CardContent", () => {
+  s("renders without crashing", () => {
+    const { container: t } = o(/* @__PURE__ */ n(a, {}));
+    r(c(t, "card-content")).toBeInTheDocument();
+  }), s("renders with custom className", () => {
+    const { container: t } = o(/* @__PURE__ */ n(a, { className: "custom-class" })), e = c(t, "card-content");
+    r(e).toHaveClass("custom-class");
+  }), s("applies default classes", () => {
+    const { container: t } = o(/* @__PURE__ */ n(a, {})), e = c(t, "card-content");
+    r(e).toHaveClass("lsd:px-(--lsd-spacing-larger)"), r(e).toHaveClass("lsd:py-(--lsd-spacing-larger)");
+  }), s("renders children", () => {
+    o(
+      /* @__PURE__ */ n(a, { children: /* @__PURE__ */ n("span", { children: "Content" }) })
+    ), r(i.getByText("Content")).toBeInTheDocument();
+  }), s("forwards ref", () => {
     const t = { current: null };
-    s(/* @__PURE__ */ n(c, { ref: t })), o(t.current).toBeInstanceOf(HTMLDivElement);
+    o(/* @__PURE__ */ n(a, { ref: t })), r(t.current).toBeInstanceOf(HTMLDivElement);
   });
 });

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

@@ -1,29 +1,29 @@
-import { jsx as r } from "react/jsx-runtime";
-import { d as l, i as s, r as a, g as e, s as d } from "../../../../vi.2VT5v0um-D9hIOtVQ.js";
+import { jsx as s } from "react/jsx-runtime";
+import { d as c, i as o, r as a, g as t, s as d } from "../../../../vi.2VT5v0um-D9hIOtVQ.js";
 import "../Card.js";
 import "../CardAction.js";
 import "../CardContent.js";
 import "../CardDescription.js";
-import { CardFooter as n } from "../CardFooter.js";
+import { CardFooter as l } from "../CardFooter.js";
 import "../CardHeader.js";
 import "../CardTitle.js";
-const c = (o, t) => o.querySelector(`[data-slot="${t}"]`);
-l("CardFooter", () => {
-  s("renders without crashing", () => {
-    const { container: o } = a(/* @__PURE__ */ r(n, {}));
-    e(c(o, "card-footer")).toBeInTheDocument();
-  }), s("renders with custom className", () => {
-    const { container: o } = a(/* @__PURE__ */ r(n, { className: "custom-class" })), t = c(o, "card-footer");
-    e(t).toHaveClass("custom-class");
-  }), s("applies default classes", () => {
-    const { container: o } = a(/* @__PURE__ */ r(n, {})), t = c(o, "card-footer");
-    e(t).toHaveClass("lsd:flex"), e(t).toHaveClass("lsd:items-center"), e(t).toHaveClass("lsd:px-6"), e(t).toHaveClass("lsd:py-6"), e(t).toHaveClass("lsd:border-t"), e(t).toHaveClass("lsd:border-lsd-border"), e(t).toHaveClass("lsd:pt-6");
-  }), s("renders children", () => {
+const n = (r, e) => r.querySelector(`[data-slot="${e}"]`);
+c("CardFooter", () => {
+  o("renders without crashing", () => {
+    const { container: r } = a(/* @__PURE__ */ s(l, {}));
+    t(n(r, "card-footer")).toBeInTheDocument();
+  }), o("renders with custom className", () => {
+    const { container: r } = a(/* @__PURE__ */ s(l, { className: "custom-class" })), e = n(r, "card-footer");
+    t(e).toHaveClass("custom-class");
+  }), o("applies default classes", () => {
+    const { container: r } = a(/* @__PURE__ */ s(l, {})), e = n(r, "card-footer");
+    t(e).toHaveClass("lsd:flex"), t(e).toHaveClass("lsd:items-center"), t(e).toHaveClass("lsd:px-(--lsd-spacing-larger)"), t(e).toHaveClass("lsd:py-(--lsd-spacing-larger)"), t(e).toHaveClass("lsd:border-t"), t(e).toHaveClass("lsd:border-lsd-border"), t(e).toHaveClass("lsd:pt-(--lsd-spacing-larger)");
+  }), o("renders children", () => {
     a(
-      /* @__PURE__ */ r(n, { children: /* @__PURE__ */ r("button", { type: "button", children: "Footer Action" }) })
-    ), e(d.getByRole("button")).toBeInTheDocument();
-  }), s("forwards ref", () => {
-    const o = { current: null };
-    a(/* @__PURE__ */ r(n, { ref: o })), e(o.current).toBeInstanceOf(HTMLDivElement);
+      /* @__PURE__ */ s(l, { children: /* @__PURE__ */ s("button", { type: "button", children: "Footer Action" }) })
+    ), t(d.getByRole("button")).toBeInTheDocument();
+  }), o("forwards ref", () => {
+    const r = { current: null };
+    a(/* @__PURE__ */ s(l, { ref: r })), t(r.current).toBeInstanceOf(HTMLDivElement);
   });
 });