npm - @nipsys/shadcn-lsd - Versions diffs - 0.1.0 → 0.2.1 - Mend

@nipsys/shadcn-lsd 0.1.0 → 0.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (115) hide show

package/README.md CHANGED Viewed

@@ -1,108 +1,126 @@
 # @nipsys/shadcn-lsd
-A React component library implementing the Logos Design System (LSD) using shadcn / Radix UI and Tailwind CSS.
-## Overview
-@nipsys/shadcn-lsd follows a minimalist design system. The library offers a comprehensive set of UI components with built-in light and dark theme support.
+A React component library implementing the Logos Design System (LSD). Built with Radix UI primitives and Tailwind CSS, following the shadcn/ui patterns.
 ## Installation
 ```bash
-npm install @nipsys/shadcn-lsd
-# or
 pnpm add @nipsys/shadcn-lsd
 ```
-## Quick Start
+## Usage
+### Import the CSS
+First, import the stylesheet in your application entry point:
 ```tsx
-import { Button, Input, Card } from '@nipsys/shadcn-lsd';
 import '@nipsys/shadcn-lsd/css';
+```
+You can also import it in CSS:
+```css
+@import "@nipsys/shadcn-lsd/css";
+```
+### Import Components
+```tsx
+import { Dialog, DialogTrigger, DialogContent, Button } from "@nipsys/shadcn-lsd";
 function App() {
   return (
-    <div className="min-h-screen bg-background text-foreground">
-      <Card className="p-6">
-        <h1 className="text-2xl mb-4">Welcome to LSD React</h1>
-        <Input placeholder="Enter your name" className="mb-4" />
-        <Button>Submit</Button>
-      </Card>
-    </div>
+    <Dialog>
+      <DialogTrigger>
+        <Button>Open</Button>
+      </DialogTrigger>
+      <DialogContent>
+        <p>Dialog content here</p>
+      </DialogContent>
+    </Dialog>
   );
 }
+export default App;
 ```
-## Theming
+### Theming
-LSD React uses CSS custom properties for theming. The theme can be switched by adding/removing the `.dark` class on the root element (or any container).
+The library supports light and dark themes out of the box. Add the `dark` class to your root element to enable dark mode:
-### Light Theme (Default)
+```html
+<html class="dark">
+  <!-- your app -->
+</html>
+```
-```css
-:root {
-  --lsd-text: 0 0 0;           /* Black */
-  --lsd-border: 0 0 0;         /* Black */
-  --lsd-surface-primary: 255 255 255; /* White */
-  --lsd-surface-secondary: 255 255 255; /* White */
-}
+### Theme Variants
+A teal theme variant is also available:
+```html
+<html class="theme-teal">
+  <!-- light teal theme -->
+</html>
+<html class="dark theme-teal">
+  <!-- dark teal theme -->
+</html>
 ```
-### Dark Theme
+### CSS Variables
+The design system uses CSS custom properties that you can override:
 ```css
-.dark {
-  --lsd-text: 255 255 255;     /* White */
-  --lsd-border: 255 255 255;   /* White */
-  --lsd-surface-primary: 0 0 0;     /* Black */
-  --lsd-surface-secondary: 0 0 0;     /* Black */
+:root {
+  --lsd-primary: #000000;
+  --lsd-text-primary: #000000;
+  --lsd-text-secondary: #808080;
+  --lsd-border: #000000;
+  --lsd-surface: #ffffff;
+  --lsd-destructive: #b91c1c;
+  --lsd-success: #15803d;
+  --lsd-warning: #f59e0b;
+  --lsd-info: #2563eb;
 }
 ```
 ## Components
-LSD React provides a comprehensive set of UI components:
-### Form Components
-- **Input**: Text input with size variants
-- **Autocomplete**: Searchable dropdown with async support
-- **Select**: Native select with custom styling
-- **Checkbox**: Accessible checkbox component
-- **Switch**: Toggle switch component
-- **Label**: Form label with variants
-### Navigation Components
-- **Tabs**: Tabbed interface with size variants
-- **Sidebar**: Collapsible sidebar with submenus
-- **Breadcrumb**: Navigation breadcrumb (coming soon)
-### Layout Components
-- **Card**: Container with header, content, and footer
-- **Sheet**: Slide-out panel component
-- **Separator**: Visual divider
-- **ScrollArea**: Custom scrollable area
-### Data Display Components
-- **Badge**: Status and label badges
-- **Typography**: Text components with variants
-- **Skeleton**: Loading placeholder
-- **Progress**: Progress bar with indeterminate state
-### Feedback Components
-- **Dialog**: Modal dialog component
-- **AlertDialog**: Confirmation dialog
-- **Popover**: Popup content component
-- **Tooltip**: Hover tooltip
-- **Sonner**: Toast notifications
-### Input Components
-- **Button**: Versatile button with variants and sizes
-- **ButtonGroup**: Grouped buttons
-- **Toggle**: Toggle button component
-- **ToggleGroup**: Grouped toggle buttons
+| 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 |
+| 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 |
 ## Development
+M
 ### Prerequisites
 - Node.js >= 24.0.0
@@ -111,20 +129,70 @@ LSD React provides a comprehensive set of UI components:
 ### Setup
 ```bash
+# Clone the repository
 git clone https://github.com/nipsysdev/shadcn-lsd.git
 cd shadcn-lsd
+# Install dependencies
 pnpm install
 ```
 ### Scripts
-- `pnpm dev` - Start development server
-- `pnpm build` - Build the library
-- `pnpm cosmos` - Start React Cosmos dev server
-- `pnpm cosmos:export` - Export Cosmos site
-- `pnpm lint` - Run linting
+```bash
+# Start component playground
+pnpm cosmos
+# Build the library
+pnpm build
+# Run tests
+pnpm test
+# Run tests in watch mode
+pnpm test:watch
+# Run tests with coverage
+pnpm test:coverage
+# Lint code
+pnpm lint
+# Format code
+pnpm format
+```
+### Component Playground
+The project uses React Cosmos for component development. Run `pnpm cosmos` to start the playground at `http://localhost:5000`.
+To export a static build for deployment:
+```bash
+pnpm cosmos-export
+```
+## Tech Stack
+- **React 19** - UI library
+- **TypeScript** - Type safety
+- **Tailwind CSS 4** - Utility-first styling
+- **Radix UI** - Accessible primitives
+- **Vite** - Build tooling
+- **Vitest** - Testing framework
+- **React Cosmos** - Component playground
+## Peer Dependencies
+Make sure your project has these installed:
+```json
+{
+  "react": "^19.2.4",
+  "react-dom": "^19.2.4"
+}
+```
 ## License
-Licensed under GNU GPL v3+
+[GPL-3.0-or-later](LICENSE)

package/dist/{Autocomplete-Cuui1Aca.js → Autocomplete-3wLa9P4X.js} RENAMED Viewed

@@ -1,4 +1,4 @@
-import { jsxs as w, jsx as r } from "react/jsx-runtime";
+import { jsxs as S, jsx as r } from "react/jsx-runtime";
 import * as s from "react";
 import { Popover as B } from "./components/ui/popover/Popover.js";
 import { c as n } from "./utils-DtaLkIY8.js";
@@ -56,10 +56,10 @@ function q({
       f(!0);
       const y = async () => {
         try {
-          const p = await l(d);
-          m(p);
-        } catch (p) {
-          console.error("Error fetching options:", p), m([]);
+          const a = await l(d);
+          m(a);
+        } catch (a) {
+          console.error("Error fetching options:", a), m([]);
         } finally {
           f(!1);
         }
@@ -83,7 +83,7 @@ const G = s.forwardRef(
     disabled: e = !1,
     label: y,
     size: v = "md",
-    icon: p,
+    icon: a,
     error: T = !1,
     variant: I = "outlined",
     clearable: P = !1,
@@ -93,7 +93,7 @@ const G = s.forwardRef(
   }, _) => {
     const [E, A] = s.useState(!1), [j, N] = s.useState(""), b = x !== void 0 ? x : j, [u, h] = s.useState(""), O = s.useRef(null);
     s.useImperativeHandle(_, () => O.current);
-    const { asyncOptions: S, isLoading: k } = q({
+    const { asyncOptions: w, isLoading: k } = q({
       onOptionsFetch: d,
       searchText: u,
       open: E,
@@ -105,14 +105,14 @@ const G = s.forwardRef(
       [c, x]
     ), U = () => {
       x === void 0 && N(""), h(""), c?.(""), f?.();
-    }, D = s.useMemo(() => d ? S : l ? u ? l.filter(
+    }, D = s.useMemo(() => d ? w : l ? u ? l.filter(
       (t) => t.label.toLowerCase().startsWith(u.toLowerCase())
-    ) : l : [], [l, S, u, d]), L = g.id || "autocomplete-input", a = Y[v], z = b && (l?.find((t) => t.value === b)?.label || S?.find((t) => t.value === b)?.label) || "";
-    return /* @__PURE__ */ w(
+    ) : l : [], [l, w, u, d]), L = g.id || "autocomplete-input", p = Y[v], z = b && (l?.find((t) => t.value === b)?.label || w?.find((t) => t.value === b)?.label) || "";
+    return /* @__PURE__ */ S(
       "div",
       {
         ...g,
-        className: n("lsd:box-border", a.container, m),
+        className: n("lsd:box-border", p.container, m),
         children: [
           y && /* @__PURE__ */ r(
             "label",
@@ -120,20 +120,20 @@ const G = s.forwardRef(
               htmlFor: L,
               className: n(
                 "lsd:block lsd:text-sm",
-                a.label,
+                p.label,
                 e ? "lsd:text-lsd-text-secondary" : "lsd:text-lsd-text-primary"
               ),
               children: y
             }
           ),
-          /* @__PURE__ */ w(B, { open: E, onOpenChange: A, children: [
-            /* @__PURE__ */ r(H, { asChild: !0, children: /* @__PURE__ */ w(
+          /* @__PURE__ */ S(B, { open: E, onOpenChange: A, children: [
+            /* @__PURE__ */ r(H, { asChild: !0, children: /* @__PURE__ */ S(
               "div",
               {
                 className: n(
                   "lsd:flex lsd:justify-between",
-                  a.inputContainer,
-                  I === "outlined" ? e ? "lsd:border lsd:border-lsd-text-secondary" : "lsd:border lsd:border-lsd-border-primary" : e ? "lsd:border lsd:border-transparent lsd:border-b-lsd-text-secondary" : "lsd:border lsd:border-transparent lsd:border-b-lsd-border-primary",
+                  p.inputContainer,
+                  I === "outlined" ? e ? "lsd:border lsd:border-lsd-text-secondary" : "lsd:border lsd:border-lsd-border" : e ? "lsd:border lsd:border-transparent lsd:border-b-lsd-text-secondary" : "lsd:border lsd:border-transparent lsd:border-b-lsd-border",
                   e ? "lsd:cursor-not-allowed" : "lsd:cursor-pointer"
                 ),
                 children: [
@@ -149,18 +149,18 @@ const G = s.forwardRef(
                       readOnly: !0,
                       className: n(
                         "lsd:border-none lsd:outline-none lsd:bg-none lsd:w-full lsd:text-[14px]",
-                        a.input,
-                        e ? "lsd:text-lsd-text-secondary" : "lsd:text-lsd-text-primary",
+                        p.input,
+                        e ? "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"
+                        "lsd:placeholder:text-lsd-text-primary lsd:placeholder:opacity-30"
                       )
                     }
                   ),
-                  p && /* @__PURE__ */ r(
+                  a && /* @__PURE__ */ r(
                     "div",
                     {
-                      className: n("lsd:flex lsd:items-center", a.icon),
-                      children: p
+                      className: n("lsd:flex lsd:items-center", p.icon),
+                      children: a
                     }
                   ),
                   b && P && /* @__PURE__ */ r(
@@ -171,7 +171,7 @@ const G = s.forwardRef(
                       disabled: e,
                       className: n(
                         "lsd:flex lsd:items-center",
-                        a.icon,
+                        p.icon,
                         e ? "lsd:cursor-not-allowed" : "lsd:cursor-pointer"
                       ),
                       children: /* @__PURE__ */ r(

package/dist/{Badge-DgWf6s7v.js → Badge-DHID7w-D.js} RENAMED Viewed

@@ -3,11 +3,11 @@ 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(
-  "lsd:inline-flex lsd:items-center lsd:justify-center lsd:border lsd:border-lsd-icon-primary 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",
+  "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: {
       variant: {
-        filled: "lsd:bg-lsd-primary lsd:text-lsd-surface-primary",
+        filled: "lsd:bg-lsd-primary lsd:text-lsd-surface",
         outlined: "lsd:bg-transparent lsd:text-lsd-text-primary",
         destructive: "lsd:bg-lsd-destructive lsd:text-white lsd:border-lsd-destructive",
         success: "lsd:bg-lsd-success lsd:text-white lsd:border-lsd-success",
@@ -50,9 +50,9 @@ const j = z(
 function I({
   className: c,
   variant: n,
-  size: i,
+  size: o,
   asChild: u = !1,
-  onDismiss: o,
+  onDismiss: i,
   onClick: t,
   icon: e,
   iconPosition: p = "left",
@@ -60,12 +60,12 @@ function I({
   children: a,
   ...g
 }) {
-  const f = u ? y : "span", l = !!t, r = h || n === "dot", m = (d) => {
-    l && (d.key === "Enter" || d.key === " ") && (d.preventDefault(), t?.());
-  }, w = (d) => {
-    d.stopPropagation(), o?.();
-  }, b = r ? (() => {
-    switch (i) {
+  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]";
       case "sm":
@@ -85,27 +85,27 @@ function I({
     {
       "data-slot": "badge",
       className: k(
-        j({ variant: n, size: i }),
-        l && "lsd:cursor-pointer",
+        j({ variant: n, size: o }),
+        d && "lsd:cursor-pointer",
         r && "lsd:rounded-full lsd:p-0 lsd:border-0",
-        b,
+        w,
         c
       ),
-      role: l ? "button" : void 0,
-      tabIndex: l ? 0 : void 0,
+      role: d ? "button" : void 0,
+      tabIndex: d ? 0 : void 0,
       onKeyDown: m,
-      onClick: l ? t : void 0,
+      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 }),
-        o && /* @__PURE__ */ s(
+        i && /* @__PURE__ */ s(
           "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: w,
+            onClick: b,
             "aria-label": "Dismiss",
             children: /* @__PURE__ */ s(D, {})
           }

package/dist/{Input-CNaDUPU7.js → Input-W8QqFI1v.js} RENAMED Viewed

@@ -1,7 +1,7 @@
-import { jsxs as p, jsx as s } from "react/jsx-runtime";
+import { jsxs as b, jsx as s } from "react/jsx-runtime";
 import * as i from "react";
 import { c as l } from "./utils-DtaLkIY8.js";
-function b(e) {
+function p(e) {
   switch (e) {
     case "xs":
       return "lsd:text-xs file:lsd:text-xs";
@@ -17,7 +17,7 @@ function b(e) {
       return "lsd:text-base file:lsd:text-base";
   }
 }
-function y(e) {
+function g(e) {
   switch (e) {
     case "xs":
       return "lsd:py-1";
@@ -33,7 +33,7 @@ function y(e) {
       return "lsd:py-3";
   }
 }
-function g(e) {
+function y(e) {
   switch (e) {
     case "xs":
       return "lsd:text-xs";
@@ -60,14 +60,14 @@ const h = i.forwardRef(
     id: x,
     type: o,
     ...u
-  }, m) => {
-    const f = i.useId(), n = x || f;
-    return /* @__PURE__ */ p("div", { className: l("lsd:flex lsd:flex-col lsd:box-border", e), children: [
+  }, f) => {
+    const m = i.useId(), n = x || m;
+    return /* @__PURE__ */ b("div", { className: l("lsd:flex lsd:flex-col lsd:box-border", e), children: [
       d && /* @__PURE__ */ s(
         "label",
         {
           htmlFor: n,
-          className: l("lsd:font-medium", g(t)),
+          className: l("lsd:font-medium", y(t)),
           children: d
         }
       ),
@@ -76,20 +76,20 @@ const h = i.forwardRef(
         {
           className: l(
             "lsd:flex lsd:items-center lsd:justify-between",
-            c === "outlined" ? "lsd:border lsd:border-lsd-border-primary" : "lsd:border lsd:border-transparent lsd:border-b-lsd-border-primary",
+            c === "outlined" ? "lsd:border lsd:border-lsd-border" : "lsd:border lsd:border-transparent lsd:border-b-lsd-border",
             a && "lsd:border-lsd-destructive"
           ),
           children: /* @__PURE__ */ s(
             "input",
             {
-              ref: m,
+              ref: f,
               type: o,
               id: n,
               className: l(
-                "file:lsd:text-lsd-text placeholder:lsd:text-lsd-text-primary placeholder:lsd:opacity-30 selection:lsd:bg-lsd-primary selection:lsd:text-lsd-surface-primary lsd:border-none lsd:outline-none lsd:bg-transparent lsd:text-lsd-text-primary lsd:w-full lsd:h-full file:lsd:inline-flex file:lsd:h-7 file:lsd:border-0 file:lsd:bg-transparent file:lsd:font-medium lsd:disabled:pointer-events-none lsd:disabled:cursor-not-allowed lsd:disabled:opacity-34",
+                "file:lsd:text-lsd-text-primary placeholder:lsd:text-lsd-text-primary placeholder:lsd:opacity-30 selection:lsd:bg-lsd-primary selection:lsd:text-lsd-surface lsd:border-none lsd:outline-none lsd:bg-transparent lsd:text-lsd-text-primary lsd:w-full lsd:h-full file:lsd:inline-flex file:lsd:h-7 file:lsd:border-0 file:lsd:bg-transparent file:lsd:font-medium lsd:disabled:pointer-events-none lsd:disabled:cursor-not-allowed lsd:disabled:opacity-34",
                 "focus-visible:lsd:outline-none lsd:px-4",
-                b(t),
-                y(t)
+                p(t),
+                g(t)
               ),
               ...u
             }
@@ -113,7 +113,7 @@ const h = i.forwardRef(
 h.displayName = "Input";
 export {
   h as I,
-  b as a,
-  y as b,
-  g
+  p as a,
+  g as b,
+  y as g
 };

package/dist/{Label-Bz0dz1Kz.js → Label-BEM-ZJXI.js} RENAMED Viewed

@@ -16,7 +16,7 @@ var m = "Label", s = d.forwardRef((t, a) => /* @__PURE__ */ l(
 s.displayName = m;
 var c = s;
 const u = n(
-  "lsd:flex lsd:items-center lsd:gap-2 lsd:select-none lsd:group-data-[disabled=true]:pointer-events-none lsd:group-data-[disabled=true]:opacity-50 peer-lsd:disabled:cursor-not-allowed peer-lsd:disabled:opacity-50",
+  "lsd:flex lsd:items-center lsd:gap-2 lsd:select-none lsd:group-data-[disabled=true]:pointer-events-none lsd:group-data-[disabled=true]:opacity-50 lsd:peer-disabled:cursor-not-allowed lsd:peer-disabled:opacity-50",
   {
     variants: {
       variant: {

package/dist/{SidebarContext-7jKqX7F3.js → SidebarContext-CRh-DPz_.js} RENAMED Viewed

@@ -16,7 +16,7 @@ function D() {
   }, []), !!a;
 }
 const k = "16rem", T = "18rem", A = "3rem", M = "b", L = y(
-  "peer/menu-button lsd:flex lsd:w-full lsd:items-center lsd:gap-2 lsd:overflow-hidden lsd:rounded-md lsd:p-2 lsd:text-left lsd:text-sm lsd:outline-hidden ring-sidebar-ring lsd:transition-[width,height,padding] lsd:hover:bg-sidebar-accent lsd:hover:text-sidebar-accent-foreground lsd:focus-visible:ring-2 lsd:active:bg-sidebar-accent lsd:active:text-sidebar-accent-foreground lsd:disabled:pointer-events-none lsd:disabled:opacity-50 lsd:group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-lsd:disabled:pointer-events-none aria-lsd:disabled:opacity-50 lsd:data-[active=true]:bg-sidebar-accent lsd:data-[active=true]:font-medium lsd:data-[active=true]:text-sidebar-accent-foreground lsd:data-[state=open]:hover:bg-sidebar-accent lsd:data-[state=open]:hover:text-sidebar-accent-foreground lsd:group-data-[collapsible=icon]:size-8! lsd:group-data-[collapsible=icon]:p-2! lsd:[&>span:last-child]:truncate lsd:[&>svg]:size-4 lsd:[&>svg]:shrink-0",
+  "peer/menu-button lsd:flex lsd:w-full lsd:items-center lsd:gap-2 lsd:overflow-hidden lsd:rounded-md lsd:p-2 lsd:text-left lsd:text-sm lsd:outline-hidden ring-sidebar-ring lsd:transition-[width,height,padding] lsd:hover:bg-sidebar-accent lsd:hover:text-sidebar-accent-foreground lsd:focus-visible:ring-2 lsd:active:bg-sidebar-accent lsd:active:text-sidebar-accent-foreground lsd:disabled:pointer-events-none lsd:disabled:opacity-50 lsd:group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-lsd:disabled:pointer-events-none aria-lsd:disabled:opacity-50 lsd:data-[active=true]:bg-sidebar-accent lsd:data-[active=true]:font-medium lsd:data-[active=true]:text-sidebar-accent-foreground lsd:data-[state=open]:hover:bg-sidebar-accent lsd:data-[state=open]:hover:text-sidebar-accent-foreground lsd:group-data-[collapsible=icon]:size-8! lsd:group-data-[collapsible=icon]:p-2! lsd:[&>span:last-child]:truncate lsd:[&>svg]:size-4 lsd:[&>svg]:shrink-0 lsd:hover:underline lsd:focus:underline",
   {
     variants: {
       variant: {
@@ -34,11 +34,11 @@ const k = "16rem", T = "18rem", A = "3rem", M = "b", L = y(
       size: "default"
     }
   }
-), m = t.createContext(
+), v = t.createContext(
   null
 );
 function K() {
-  const a = t.useContext(m);
+  const a = t.useContext(v);
   if (!a)
     throw new Error("useSidebar must be used within a SidebarProvider.");
   return a;
@@ -48,7 +48,7 @@ function W({
   open: r,
   onOpenChange: d,
   className: o,
-  style: v,
+  style: m,
   children: g,
   ...w
 }) {
@@ -77,14 +77,14 @@ function W({
     }),
     [f, n, l, i, p, c]
   );
-  return /* @__PURE__ */ u(m.Provider, { value: S, children: /* @__PURE__ */ u(I, { delayDuration: 0, children: /* @__PURE__ */ u(
+  return /* @__PURE__ */ u(v.Provider, { value: S, children: /* @__PURE__ */ u(I, { delayDuration: 0, children: /* @__PURE__ */ u(
     "div",
     {
       "data-slot": "sidebar-wrapper",
       style: {
         "--sidebar-width": "16rem",
         "--sidebar-width-icon": "3rem",
-        ...v
+        ...m
       },
       className: E(
         "lsd:group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar lsd:flex lsd:min-h-svh lsd:w-full",
@@ -101,7 +101,7 @@ export {
   A as b,
   T as c,
   W as d,
-  m as e,
+  v as e,
   L as s,
   K as u
 };

package/dist/{Toggle-B7BF2ro7.js → Toggle-DOc92BjI.js} RENAMED Viewed

@@ -4,7 +4,7 @@ import * as a from "react";
 import { c as o } from "./utils-DtaLkIY8.js";
 import { c as i } from "./index-D69Iqk5J.js";
 const n = i(
-  "lsd:inline-flex lsd:items-center lsd:justify-center lsd:border lsd:transition-colors lsd:bg-transparent lsd:text-lsd-text lsd:border-lsd-border lsd:hover:underline lsd:cursor-pointer lsd:disabled:opacity-34 lsd:disabled:cursor-not-allowed lsd:disabled:no-underline lsd:data-[state=on]:bg-lsd-primary lsd:data-[state=on]:text-lsd-surface-primary",
+  "lsd:inline-flex lsd:items-center lsd:justify-center lsd:border lsd:transition-colors lsd:bg-transparent lsd:text-lsd-text-primary lsd:border-lsd-border lsd:hover:underline lsd:cursor-pointer lsd:disabled:opacity-34 lsd:disabled:cursor-not-allowed lsd:disabled:no-underline lsd:data-[state=on]:bg-lsd-primary lsd:data-[state=on]:text-lsd-surface",
   {
     variants: {
       size: {