@nipsys/shadcn-lsd 0.2.2 → 0.2.4

package/README.md

@@ -1,5 +1,8 @@
 # @nipsys/shadcn-lsd
 
+[![license](https://img.shields.io/npm/l/@nipsys/shadcn-lsd.svg)](https://github.com/nipsysdev/shadcn-lsd/blob/main/LICENSE)
+[![React](https://img.shields.io/npm/dependency-version/@nipsys/shadcn-lsd/peer/react.svg)](https://react.dev)
+
 A React component library implementing the Logos Design System (LSD). Built with Radix UI primitives and Tailwind CSS, following the shadcn/ui patterns.
 
 ## Installation
@@ -10,21 +13,25 @@ pnpm add @nipsys/shadcn-lsd
 
 ## Usage
 
-### Import the CSS
+### Import Components
 
-First, import the stylesheet in your application entry point:
+```tsx
+import { Dialog, DialogTrigger, DialogContent, Button } from "@nipsys/shadcn-lsd";
+```
+
+### CSS Import
 
 ```tsx
 import '@nipsys/shadcn-lsd/css';
 ```
 
-You can also import it in CSS:
+Or in a CSS stylesheet:
 
 ```css
 @import "@nipsys/shadcn-lsd/css";
 ```
 
-### Import Components
+### Example
 
 ```tsx
 import { Dialog, DialogTrigger, DialogContent, Button } from "@nipsys/shadcn-lsd";
@@ -32,7 +39,7 @@ import { Dialog, DialogTrigger, DialogContent, Button } from "@nipsys/shadcn-lsd
 function App() {
   return (
     <Dialog>
-      <DialogTrigger>
+      <DialogTrigger asChild>
         <Button>Open</Button>
       </DialogTrigger>
       <DialogContent>
@@ -75,50 +82,60 @@ The design system uses CSS custom properties that you can override:
 
 ```css
 :root {
+  /* Core colors */
   --lsd-primary: #000000;
+  --lsd-primary-foreground: #ffffff;
   --lsd-text-primary: #000000;
   --lsd-text-secondary: #808080;
   --lsd-border: #000000;
   --lsd-surface: #ffffff;
+
+  /* Icon colors */
+  --lsd-icon-primary: #000000;
+  --lsd-icon-secondary: #ffffff;
+
+  /* Semantic colors */
   --lsd-destructive: #b91c1c;
+  --lsd-destructive-text: #cb3939;
   --lsd-success: #15803d;
+  --lsd-success-text: #168440;
   --lsd-warning: #f59e0b;
+  --lsd-warning-text: #d68b09;
   --lsd-info: #2563eb;
+  --lsd-info-text: #2563eb;
 }
 ```
 
 ## Components
 
-| Component | Description |
-|-----------|-------------|
-| Accordion | Vertically stacked collapsible sections |
-| AlertDialog | Modal dialog for critical confirmations |
-| Autocomplete | Input with async suggestion fetching |
-| Badge | Small label for status or categorization |
-| Button | Interactive button with multiple variants |
-| ButtonGroup | Grouped buttons with optional separators |
-| Card | Container for related content |
-| Checkbox | Boolean input control |
-| Command | Command palette for keyboard navigation |
-| Dialog | Modal overlay for focused content |
-| Input | Text input field |
-| Label | Form field label |
-| Menubar | Horizontal menu bar with dropdown menus |
-| Popover | Floating content anchored to trigger |
-| Progress | Visual indicator of completion |
-| ScrollArea | Custom scrollbar container |
-| Select | Dropdown selection input |
-| Separator | Visual divider between sections |
-| Sheet | Slide-out panel overlay |
-| Sidebar | Navigation sidebar component |
-| Skeleton | Loading placeholder |
-| Sonner | Toast notifications |
-| Switch | Toggle switch input |
-| Tabs | Tabbed content navigation |
-| Toggle | Two-state button |
-| ToggleGroup | Group of toggle buttons |
-| Tooltip | Hover information popup |
-| Typography | Text styling components |
+| Component | Description | Playground |
+|-----------|-------------|------------|
+| [Accordion](https://lsd.nipsys.dev/?fixtureId=%7B%22path%22%3A%22src%2F__cosmos__%2Ffixtures%2FAccordion.fixture.tsx%22%7D) | Vertically stacked collapsible sections | [View →](https://lsd.nipsys.dev/?fixtureId=%7B%22path%22%3A%22src%2F__cosmos__%2Ffixtures%2FAccordion.fixture.tsx%22%7D) |
+| [AlertDialog](https://lsd.nipsys.dev/?fixtureId=%7B%22path%22%3A%22src%2F__cosmos__%2Ffixtures%2FAlertDialog.fixture.tsx%22%7D) | Modal dialog for critical confirmations | [View →](https://lsd.nipsys.dev/?fixtureId=%7B%22path%22%3A%22src%2F__cosmos__%2Ffixtures%2FAlertDialog.fixture.tsx%22%7D) |
+| [Autocomplete](https://lsd.nipsys.dev/?fixtureId=%7B%22path%22%3A%22src%2F__cosmos__%2Ffixtures%2FAutocomplete.fixture.tsx%22%7D) | Input with async suggestion fetching | [View →](https://lsd.nipsys.dev/?fixtureId=%7B%22path%22%3A%22src%2F__cosmos__%2Ffixtures%2FAutocomplete.fixture.tsx%22%7D) |
+| [Badge](https://lsd.nipsys.dev/?fixtureId=%7B%22path%22%3A%22src%2F__cosmos__%2Ffixtures%2FBadge.fixture.tsx%22%7D) | Small label for status or categorization | [View →](https://lsd.nipsys.dev/?fixtureId=%7B%22path%22%3A%22src%2F__cosmos__%2Ffixtures%2FBadge.fixture.tsx%22%7D) |
+| [Button](https://lsd.nipsys.dev/?fixtureId=%7B%22path%22%3A%22src%2F__cosmos__%2Ffixtures%2FButton.fixture.tsx%22%7D) | Interactive button with multiple variants | [View →](https://lsd.nipsys.dev/?fixtureId=%7B%22path%22%3A%22src%2F__cosmos__%2Ffixtures%2FButton.fixture.tsx%22%7D) |
+| [ButtonGroup](https://lsd.nipsys.dev/?fixtureId=%7B%22path%22%3A%22src%2F__cosmos__%2Ffixtures%2FButtonGroup.fixture.tsx%22%7D) | Grouped buttons with optional separators | [View →](https://lsd.nipsys.dev/?fixtureId=%7B%22path%22%3A%22src%2F__cosmos__%2Ffixtures%2FButtonGroup.fixture.tsx%22%7D) |
+| [Card](https://lsd.nipsys.dev/?fixtureId=%7B%22path%22%3A%22src%2F__cosmos__%2Ffixtures%2FCard.fixture.tsx%22%7D) | Container for related content | [View →](https://lsd.nipsys.dev/?fixtureId=%7B%22path%22%3A%22src%2F__cosmos__%2Ffixtures%2FCard.fixture.tsx%22%7D) |
+| [Checkbox](https://lsd.nipsys.dev/?fixtureId=%7B%22path%22%3A%22src%2F__cosmos__%2Ffixtures%2FCheckbox.fixture.tsx%22%7D) | Boolean input control | [View →](https://lsd.nipsys.dev/?fixtureId=%7B%22path%22%3A%22src%2F__cosmos__%2Ffixtures%2FCheckbox.fixture.tsx%22%7D) |
+| [Command](https://lsd.nipsys.dev/?fixtureId=%7B%22path%22%3A%22src%2F__cosmos__%2Ffixtures%2FCommand.fixture.tsx%22%7D) | Command palette for keyboard navigation | [View →](https://lsd.nipsys.dev/?fixtureId=%7B%22path%22%3A%22src%2F__cosmos__%2Ffixtures%2FCommand.fixture.tsx%22%7D) |
+| [Dialog](https://lsd.nipsys.dev/?fixtureId=%7B%22path%22%3A%22src%2F__cosmos__%2Ffixtures%2FDialog.fixture.tsx%22%7D) | Modal overlay for focused content | [View →](https://lsd.nipsys.dev/?fixtureId=%7B%22path%22%3A%22src%2F__cosmos__%2Ffixtures%2FDialog.fixture.tsx%22%7D) |
+| [Input](https://lsd.nipsys.dev/?fixtureId=%7B%22path%22%3A%22src%2F__cosmos__%2Ffixtures%2FInput.fixture.tsx%22%7D) | Text input field | [View →](https://lsd.nipsys.dev/?fixtureId=%7B%22path%22%3A%22src%2F__cosmos__%2Ffixtures%2FInput.fixture.tsx%22%7D) |
+| [Label](https://lsd.nipsys.dev/?fixtureId=%7B%22path%22%3A%22src%2F__cosmos__%2Ffixtures%2FLabel.fixture.tsx%22%7D) | Form field label | [View →](https://lsd.nipsys.dev/?fixtureId=%7B%22path%22%3A%22src%2F__cosmos__%2Ffixtures%2FLabel.fixture.tsx%22%7D) |
+| [Menubar](https://lsd.nipsys.dev/?fixtureId=%7B%22path%22%3A%22src%2F__cosmos__%2Ffixtures%2FMenubar.fixture.tsx%22%7D) | Horizontal menu bar with dropdown menus | [View →](https://lsd.nipsys.dev/?fixtureId=%7B%22path%22%3A%22src%2F__cosmos__%2Ffixtures%2FMenubar.fixture.tsx%22%7D) |
+| [Popover](https://lsd.nipsys.dev/?fixtureId=%7B%22path%22%3A%22src%2F__cosmos__%2Ffixtures%2FPopover.fixture.tsx%22%7D) | Floating content anchored to trigger | [View →](https://lsd.nipsys.dev/?fixtureId=%7B%22path%22%3A%22src%2F__cosmos__%2Ffixtures%2FPopover.fixture.tsx%22%7D) |
+| [Progress](https://lsd.nipsys.dev/?fixtureId=%7B%22path%22%3A%22src%2F__cosmos__%2Ffixtures%2FProgress.fixture.tsx%22%7D) | Visual indicator of completion | [View →](https://lsd.nipsys.dev/?fixtureId=%7B%22path%22%3A%22src%2F__cosmos__%2Ffixtures%2FProgress.fixture.tsx%22%7D) |
+| [ScrollArea](https://lsd.nipsys.dev/?fixtureId=%7B%22path%22%3A%22src%2F__cosmos__%2Ffixtures%2FScrollArea.fixture.tsx%22%7D) | Custom scrollbar container | [View →](https://lsd.nipsys.dev/?fixtureId=%7B%22path%22%3A%22src%2F__cosmos__%2Ffixtures%2FScrollArea.fixture.tsx%22%7D) |
+| [Select](https://lsd.nipsys.dev/?fixtureId=%7B%22path%22%3A%22src%2F__cosmos__%2Ffixtures%2FSelect.fixture.tsx%22%7D) | Dropdown selection input | [View →](https://lsd.nipsys.dev/?fixtureId=%7B%22path%22%3A%22src%2F__cosmos__%2Ffixtures%2FSelect.fixture.tsx%22%7D) |
+| [Separator](https://lsd.nipsys.dev/?fixtureId=%7B%22path%22%3A%22src%2F__cosmos__%2Ffixtures%2FSeparator.fixture.tsx%22%7D) | Visual divider between sections | [View →](https://lsd.nipsys.dev/?fixtureId=%7B%22path%22%3A%22src%2F__cosmos__%2Ffixtures%2FSeparator.fixture.tsx%22%7D) |
+| [Sheet](https://lsd.nipsys.dev/?fixtureId=%7B%22path%22%3A%22src%2F__cosmos__%2Ffixtures%2FSheet.fixture.tsx%22%7D) | Slide-out panel overlay | [View →](https://lsd.nipsys.dev/?fixtureId=%7B%22path%22%3A%22src%2F__cosmos__%2Ffixtures%2FSheet.fixture.tsx%22%7D) |
+| [Sidebar](https://lsd.nipsys.dev/?fixtureId=%7B%22path%22%3A%22src%2F__cosmos__%2Ffixtures%2FSidebar.fixture.tsx%22%7D) | Navigation sidebar component | [View →](https://lsd.nipsys.dev/?fixtureId=%7B%22path%22%3A%22src%2F__cosmos__%2Ffixtures%2FSidebar.fixture.tsx%22%7D) |
+| [Sonner](https://lsd.nipsys.dev/?fixtureId=%7B%22path%22%3A%22src%2F__cosmos__%2Ffixtures%2FSonner.fixture.tsx%22%7D) | Toast notifications | [View →](https://lsd.nipsys.dev/?fixtureId=%7B%22path%22%3A%22src%2F__cosmos__%2Ffixtures%2FSonner.fixture.tsx%22%7D) |
+| [Switch](https://lsd.nipsys.dev/?fixtureId=%7B%22path%22%3A%22src%2F__cosmos__%2Ffixtures%2FSwitch.fixture.tsx%22%7D) | Toggle switch input | [View →](https://lsd.nipsys.dev/?fixtureId=%7B%22path%22%3A%22src%2F__cosmos__%2Ffixtures%2FSwitch.fixture.tsx%22%7D) |
+| [Tabs](https://lsd.nipsys.dev/?fixtureId=%7B%22path%22%3A%22src%2F__cosmos__%2Ffixtures%2FTabs.fixture.tsx%22%7D) | Tabbed content navigation | [View →](https://lsd.nipsys.dev/?fixtureId=%7B%22path%22%3A%22src%2F__cosmos__%2Ffixtures%2FTabs.fixture.tsx%22%7D) |
+| [Toggle](https://lsd.nipsys.dev/?fixtureId=%7B%22path%22%3A%22src%2F__cosmos__%2Ffixtures%2FToggle.fixture.tsx%22%7D) | Two-state button | [View →](https://lsd.nipsys.dev/?fixtureId=%7B%22path%22%3A%22src%2F__cosmos__%2Ffixtures%2FToggle.fixture.tsx%22%7D) |
+| [ToggleGroup](https://lsd.nipsys.dev/?fixtureId=%7B%22path%22%3A%22src%2F__cosmos__%2Ffixtures%2FToggleGroup.fixture.tsx%22%7D) | Group of toggle buttons | [View →](https://lsd.nipsys.dev/?fixtureId=%7B%22path%22%3A%22src%2F__cosmos__%2Ffixtures%2FToggleGroup.fixture.tsx%22%7D) |
+| [Typography](https://lsd.nipsys.dev/?fixtureId=%7B%22path%22%3A%22src%2F__cosmos__%2Ffixtures%2FTypography.fixture.tsx%22%7D) | Text styling components | [View →](https://lsd.nipsys.dev/?fixtureId=%7B%22path%22%3A%22src%2F__cosmos__%2Ffixtures%2FTypography.fixture.tsx%22%7D) |
 
 ## Development
 M

package/dist/{Button-L-du0fyx.js → Button-DoTpV6G1.js}

@@ -1,8 +1,8 @@
-import { jsx as s, jsxs as n } from "react/jsx-runtime";
-import * as x from "react";
-import { c as o } from "./utils-DtaLkIY8.js";
-import { c as m } from "./index-D69Iqk5J.js";
-const h = m(
+import { jsx as d, jsxs as o } from "react/jsx-runtime";
+import * as g from "react";
+import { c as n } from "./utils-DtaLkIY8.js";
+import { c as p } from "./index-D69Iqk5J.js";
+const b = p(
   "lsd:inline-flex lsd:items-center lsd:justify-center lsd:border lsd:transition-colors lsd:cursor-pointer",
   {
     variants: {
@@ -12,6 +12,8 @@ const h = m(
         "filled-icon": "lsd:bg-primary lsd:text-primary-foreground lsd:rounded-full",
         "outlined-icon": "lsd:bg-transparent lsd:text-foreground lsd:rounded-full",
         link: "lsd:bg-transparent lsd:border-0 lsd:text-foreground lsd:hover:underline",
+        ghost: "lsd:bg-transparent lsd:text-foreground lsd:border-0 lsd:hover:bg-accent lsd:hover:text-accent-foreground",
+        "ghost-icon": "lsd:bg-transparent lsd:text-foreground lsd:border-0 lsd:rounded-full lsd:hover:bg-accent lsd:hover:text-accent-foreground",
         destructive: "lsd:bg-lsd-destructive lsd:text-white lsd:border-lsd-destructive lsd:hover:bg-lsd-destructive/90",
         "destructive-icon": "lsd:bg-lsd-destructive lsd:text-white lsd:border-lsd-destructive lsd:rounded-full lsd:hover:bg-lsd-destructive/90",
         success: "lsd:bg-lsd-success lsd:text-white lsd:border-lsd-success lsd:hover:bg-lsd-success/90",
@@ -23,6 +25,7 @@ const h = m(
         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",
         "icon-sm": "lsd:w-8 lsd:h-8",
         "icon-md": "lsd:w-10 lsd:h-10",
         "icon-lg": "lsd:w-12 lsd:h-12",
@@ -34,12 +37,14 @@ const h = m(
       size: "md"
     }
   }
-), f = ({ size: l }) => /* @__PURE__ */ n(
+), f = ({ size: l }) => /* @__PURE__ */ o(
   "svg",
   {
-    className: o("animate-spin", (() => {
+    className: n("animate-spin", (() => {
       switch (l) {
         case "xs":
+        case "icon-xs":
+          return "lsd:w-3 lsd:h-3";
         case "icon-sm":
           return "lsd:w-3 lsd:h-3";
         case "sm":
@@ -62,7 +67,7 @@ const h = m(
     viewBox: "0 0 24 24",
     "aria-hidden": "true",
     children: [
-      /* @__PURE__ */ s(
+      /* @__PURE__ */ d(
         "circle",
         {
           className: "lsd:opacity-25",
@@ -73,7 +78,7 @@ const h = m(
           strokeWidth: "4"
         }
       ),
-      /* @__PURE__ */ s(
+      /* @__PURE__ */ d(
         "path",
         {
           className: "lsd:opacity-75",
@@ -83,41 +88,41 @@ const h = m(
       )
     ]
   }
-), g = x.forwardRef(
+), m = g.forwardRef(
   ({
     className: l,
-    variant: d,
+    variant: s,
     size: r,
     loading: t = !1,
-    fullWidth: i = !1,
+    fullWidth: c = !1,
     children: e,
-    disabled: c,
+    disabled: i,
     ...a
   }, u) => {
-    const p = d === "link";
-    return /* @__PURE__ */ s(
+    const x = s === "link", h = s === "ghost" || s === "ghost-icon";
+    return /* @__PURE__ */ d(
       "button",
       {
-        className: o(
+        className: n(
           "lsd:text-foreground lsd:border lsd:hover:underline lsd:disabled:opacity-34 lsd:disabled:cursor-not-allowed lsd:disabled:no-underline",
-          h({ variant: d, size: r }),
-          i && "lsd:w-full",
-          p && "lsd:border-0",
+          b({ variant: s, size: r }),
+          c && "lsd:w-full",
+          (x || h) && "lsd:border-0",
           l
         ),
         ref: u,
-        disabled: c || t,
+        disabled: i || t,
         ...a,
-        children: t ? /* @__PURE__ */ n("span", { className: "lsd:flex lsd:items-center lsd:justify-center lsd:gap-2", children: [
-          /* @__PURE__ */ s(f, { size: r }),
-          e && /* @__PURE__ */ s("span", { className: "lsd:opacity-50", children: e })
+        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
       }
     );
   }
 );
-g.displayName = "Button";
+m.displayName = "Button";
 export {
-  g as B,
-  h as b
+  m as B,
+  b
 };

package/dist/{Typography-D8OaaVSH.js → Typography-BW4Kc9SY.js}

@@ -2,7 +2,7 @@ import { jsx as n } from "react/jsx-runtime";
 import * as m from "react";
 import { c as o } from "./utils-DtaLkIY8.js";
 import { c as i } from "./index-D69Iqk5J.js";
-const f = i("", {
+const c = i("", {
   variants: {
     variant: {
       // Display variants
@@ -32,7 +32,11 @@ const f = i("", {
     },
     color: {
       primary: "lsd:text-lsd-text-primary",
-      secondary: "lsd:text-lsd-text-secondary"
+      secondary: "lsd:text-lsd-text-secondary",
+      destructive: "lsd:text-lsd-destructive-text",
+      success: "lsd:text-lsd-success-text",
+      warning: "lsd:text-lsd-warning-text",
+      info: "lsd:text-lsd-info-text"
     }
   },
   defaultVariants: {
@@ -40,8 +44,8 @@ const f = i("", {
     color: "primary"
   }
 });
-function c(l) {
-  switch (l) {
+function x(e) {
+  switch (e) {
     // Display variants don't have default components
     case "display1":
     case "display2":
@@ -70,22 +74,22 @@ function c(l) {
       return "span";
   }
 }
-const p = m.forwardRef(
-  ({ className: l, variant: e, color: t, as: r, ...s }, d) => {
-    const a = r || c(e);
+const f = m.forwardRef(
+  ({ className: e, variant: l, color: t, as: s, ...d }, r) => {
+    const a = s || x(l);
     return /* @__PURE__ */ n(
       a,
       {
-        className: o(f({ variant: e, color: t }), l),
-        ref: d,
-        ...s
+        className: o(c({ variant: l, color: t }), e),
+        ref: r,
+        ...d
       }
     );
   }
 );
-p.displayName = "Typography";
+f.displayName = "Typography";
 export {
-  p as T,
-  c as g,
-  f as t
+  f as T,
+  x as g,
+  c as t
 };