@nipsys/shadcn-lsd 0.1.0

package/README.md

@@ -0,0 +1,130 @@
+# @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.
+
+## Installation
+
+```bash
+npm install @nipsys/shadcn-lsd
+# or
+pnpm add @nipsys/shadcn-lsd
+```
+
+## Quick Start
+
+```tsx
+import { Button, Input, Card } from '@nipsys/shadcn-lsd';
+import '@nipsys/shadcn-lsd/css';
+
+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>
+  );
+}
+```
+
+## 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).
+
+### Light Theme (Default)
+
+```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 */
+}
+```
+
+### Dark Theme
+
+```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 */
+}
+```
+
+## 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
+
+## Development
+
+### Prerequisites
+
+- Node.js >= 24.0.0
+- pnpm >= 10
+
+### Setup
+
+```bash
+git clone https://github.com/nipsysdev/shadcn-lsd.git
+cd shadcn-lsd
+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
+
+
+## License
+
+Licensed under GNU GPL v3+

package/dist/Autocomplete-Cuui1Aca.js

@@ -0,0 +1,216 @@
+import { jsxs as w, 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";
+import { PopoverTrigger as H } from "./components/ui/popover/PopoverTrigger.js";
+import { AutocompleteContent as W } from "./components/ui/autocomplete/AutocompleteList.js";
+import { X } from "./x-B9bYxG31.js";
+const Y = {
+  xs: {
+    container: "lsd:w-[140px]",
+    label: "lsd:mb-1.5 lsd:ml-[10px]",
+    inputContainer: "lsd:h-[24px]",
+    input: "lsd:px-[9px] lsd:py-[4px]",
+    icon: "lsd:px-[7px] lsd:py-[5px]"
+  },
+  sm: {
+    container: "lsd:w-[164px]",
+    label: "lsd:mb-1.5 lsd:ml-[12px]",
+    inputContainer: "lsd:h-[28px]",
+    input: "lsd:px-[11px] lsd:py-[5px]",
+    icon: "lsd:px-[9px] lsd:py-[6px]"
+  },
+  md: {
+    container: "lsd:w-[188px]",
+    label: "lsd:mb-1.5 lsd:ml-[14px]",
+    inputContainer: "lsd:h-[32px]",
+    input: "lsd:px-[13px] lsd:py-[5px]",
+    icon: "lsd:px-[11px] lsd:py-[8px]"
+  },
+  lg: {
+    container: "lsd:w-[208px]",
+    label: "lsd:mb-1.5 lsd:ml-[14px]",
+    inputContainer: "lsd:h-[40px]",
+    input: "lsd:px-[17px] lsd:py-[9px]",
+    icon: "lsd:px-[13px] lsd:py-[12px]"
+  },
+  xl: {
+    container: "lsd:w-[240px]",
+    label: "lsd:mb-1.5 lsd:ml-[16px]",
+    inputContainer: "lsd:h-[48px]",
+    input: "lsd:px-[20px] lsd:py-[12px]",
+    icon: "lsd:px-[15px] lsd:py-[14px]"
+  }
+}, Z = 300;
+function q({
+  onOptionsFetch: l,
+  searchText: d,
+  open: i,
+  externalIsLoading: o
+}) {
+  const [C, m] = s.useState(
+    []
+  ), [c, f] = s.useState(!1), e = o !== void 0 ? o : c;
+  return s.useEffect(() => {
+    if (l && i && o === void 0) {
+      f(!0);
+      const y = async () => {
+        try {
+          const p = await l(d);
+          m(p);
+        } catch (p) {
+          console.error("Error fetching options:", p), m([]);
+        } finally {
+          f(!1);
+        }
+      }, v = setTimeout(() => {
+        y();
+      }, Z);
+      return () => clearTimeout(v);
+    }
+  }, [l, d, i, o]), { asyncOptions: C, isLoading: e };
+}
+const G = s.forwardRef(
+  ({
+    options: l,
+    onOptionsFetch: d,
+    placeholder: i = "Search...",
+    emptyText: o = "No results found.",
+    loadingText: C = "Loading...",
+    className: m,
+    onValueChange: c,
+    onClear: f,
+    disabled: e = !1,
+    label: y,
+    size: v = "md",
+    icon: p,
+    error: T = !1,
+    variant: I = "outlined",
+    clearable: P = !1,
+    value: x,
+    isLoading: R,
+    ...g
+  }, _) => {
+    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({
+      onOptionsFetch: d,
+      searchText: u,
+      open: E,
+      externalIsLoading: R
+    }), M = s.useCallback(
+      (t) => {
+        x === void 0 && N(t), h(""), A(!1), c?.(t);
+      },
+      [c, x]
+    ), U = () => {
+      x === void 0 && N(""), h(""), c?.(""), f?.();
+    }, D = s.useMemo(() => d ? S : 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(
+      "div",
+      {
+        ...g,
+        className: n("lsd:box-border", a.container, m),
+        children: [
+          y && /* @__PURE__ */ r(
+            "label",
+            {
+              htmlFor: L,
+              className: n(
+                "lsd:block lsd:text-sm",
+                a.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(
+              "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",
+                  e ? "lsd:cursor-not-allowed" : "lsd:cursor-pointer"
+                ),
+                children: [
+                  /* @__PURE__ */ r(
+                    "input",
+                    {
+                      ref: O,
+                      id: L,
+                      value: z,
+                      placeholder: i,
+                      onChange: (t) => h(t.target.value),
+                      disabled: e,
+                      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",
+                        T && "lsd:line-through",
+                        "lsd:[&::placeholder]:text-lsd-text-primary lsd:[&::placeholder]:opacity-30"
+                      )
+                    }
+                  ),
+                  p && /* @__PURE__ */ r(
+                    "div",
+                    {
+                      className: n("lsd:flex lsd:items-center", a.icon),
+                      children: p
+                    }
+                  ),
+                  b && P && /* @__PURE__ */ r(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: U,
+                      disabled: e,
+                      className: n(
+                        "lsd:flex lsd:items-center",
+                        a.icon,
+                        e ? "lsd:cursor-not-allowed" : "lsd:cursor-pointer"
+                      ),
+                      children: /* @__PURE__ */ r(
+                        X,
+                        {
+                          className: n(
+                            "lsd:h-4 lsd:w-4",
+                            e ? "lsd:text-lsd-text-secondary" : "lsd:text-lsd-icon-primary"
+                          )
+                        }
+                      )
+                    }
+                  )
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ r(
+              W,
+              {
+                searchText: u,
+                onSearchTextChange: h,
+                placeholder: i,
+                loadingText: C,
+                emptyText: o,
+                isLoading: k,
+                filteredOptions: D,
+                onSelect: M
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+G.displayName = "Autocomplete";
+export {
+  Z as A,
+  Y as a,
+  G as b,
+  q as u
+};

package/dist/Badge-DgWf6s7v.js

@@ -0,0 +1,120 @@
+import { jsx as s, jsxs as x, Fragment as v } from "react/jsx-runtime";
+import { S as y } from "./index-BvoZGpli.js";
+import { c as k } from "./utils-DtaLkIY8.js";
+import { c as z } from "./index-D69Iqk5J.js";
+const j = z(
+  "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",
+  {
+    variants: {
+      variant: {
+        filled: "lsd:bg-lsd-primary lsd:text-lsd-surface-primary",
+        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",
+        warning: "lsd:bg-lsd-warning lsd:text-white lsd:border-lsd-warning",
+        info: "lsd:bg-lsd-info lsd:text-white lsd:border-lsd-info",
+        dot: "lsd:rounded-full lsd:w-fit lsd:h-fit lsd:p-0"
+      },
+      size: {
+        xs: "lsd:h-[20px] lsd:px-[5px] lsd:py-[3px] lsd:gap-[4px] lsd:text-[0.625rem] [&>svg]:size-[10px]",
+        sm: "lsd:h-[24px] lsd:px-[7px] lsd:py-[3px] lsd:gap-[4px] lsd:text-[0.75rem] [&>svg]:size-3",
+        md: "lsd:h-[28px] lsd:px-[11px] lsd:py-[3px] lsd:gap-[6px] lsd:text-[0.875rem] [&>svg]:size-3",
+        lg: "lsd:h-[32px] lsd:px-[13px] lsd:py-[3px] lsd:gap-[8px] lsd:text-[1rem] [&>svg]:size-[14px]",
+        xl: "lsd:h-[36px] lsd:px-[15px] lsd:py-[3px] lsd:gap-[10px] lsd:text-[1.125rem] [&>svg]:size-[16px]"
+      }
+    },
+    defaultVariants: {
+      variant: "filled",
+      size: "md"
+    }
+  }
+), D = () => /* @__PURE__ */ x(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "12",
+    height: "12",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": "true",
+    children: [
+      /* @__PURE__ */ s("path", { d: "M18 6L6 18" }),
+      /* @__PURE__ */ s("path", { d: "M6 6l12 12" })
+    ]
+  }
+);
+function I({
+  className: c,
+  variant: n,
+  size: i,
+  asChild: u = !1,
+  onDismiss: o,
+  onClick: t,
+  icon: e,
+  iconPosition: p = "left",
+  dot: h = !1,
+  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) {
+      case "xs":
+        return "lsd:w-[8px] lsd:h-[8px]";
+      case "sm":
+        return "lsd:w-[10px] lsd:h-[10px]";
+      case "md":
+        return "lsd:w-[12px] lsd:h-[12px]";
+      case "lg":
+        return "lsd:w-[14px] lsd:h-[14px]";
+      case "xl":
+        return "lsd:w-[16px] lsd:h-[16px]";
+      default:
+        return "lsd:w-[12px] lsd:h-[12px]";
+    }
+  })() : "";
+  return /* @__PURE__ */ s(
+    f,
+    {
+      "data-slot": "badge",
+      className: k(
+        j({ variant: n, size: i }),
+        l && "lsd:cursor-pointer",
+        r && "lsd:rounded-full lsd:p-0 lsd:border-0",
+        b,
+        c
+      ),
+      role: l ? "button" : void 0,
+      tabIndex: l ? 0 : void 0,
+      onKeyDown: m,
+      onClick: l ? 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(
+          "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,
+            "aria-label": "Dismiss",
+            children: /* @__PURE__ */ s(D, {})
+          }
+        )
+      ] })
+    }
+  );
+}
+export {
+  I as B,
+  j as b
+};

package/dist/Button-L-du0fyx.js

@@ -0,0 +1,123 @@
+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(
+  "lsd:inline-flex lsd:items-center lsd:justify-center lsd:border lsd:transition-colors lsd:cursor-pointer",
+  {
+    variants: {
+      variant: {
+        filled: "lsd:bg-primary lsd:text-primary-foreground",
+        outlined: "lsd:bg-transparent lsd:text-foreground",
+        "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",
+        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",
+        "success-icon": "lsd:bg-lsd-success lsd:text-white lsd:border-lsd-success lsd:rounded-full lsd:hover:bg-lsd-success/90"
+      },
+      size: {
+        xs: "lsd:h-7 lsd:px-2 lsd:py-1 lsd:text-xs",
+        sm: "lsd:h-8 lsd:px-3 lsd:py-[6px] lsd:text-sm",
+        md: "lsd:h-[34px] lsd:px-6 lsd:py-2 lsd:text-base",
+        lg: "lsd:h-12 lsd:px-8 lsd:py-[10px] lsd:text-lg",
+        xl: "lsd:h-14 lsd:px-10 lsd:py-3 lsd:text-xl",
+        "icon-sm": "lsd:w-8 lsd:h-8",
+        "icon-md": "lsd:w-10 lsd:h-10",
+        "icon-lg": "lsd:w-12 lsd:h-12",
+        "icon-xl": "lsd:w-16 lsd:h-16"
+      }
+    },
+    defaultVariants: {
+      variant: "filled",
+      size: "md"
+    }
+  }
+), f = ({ size: l }) => /* @__PURE__ */ n(
+  "svg",
+  {
+    className: o("animate-spin", (() => {
+      switch (l) {
+        case "xs":
+        case "icon-sm":
+          return "lsd:w-3 lsd:h-3";
+        case "sm":
+          return "lsd:w-4 lsd:h-4";
+        case "md":
+        case "icon-md":
+          return "lsd:w-5 lsd:h-5";
+        case "lg":
+        case "icon-lg":
+          return "lsd:w-6 lsd:h-6";
+        case "xl":
+        case "icon-xl":
+          return "lsd:w-7 lsd:h-7";
+        default:
+          return "lsd:w-5 lsd:h-5";
+      }
+    })()),
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    "aria-hidden": "true",
+    children: [
+      /* @__PURE__ */ s(
+        "circle",
+        {
+          className: "lsd:opacity-25",
+          cx: "12",
+          cy: "12",
+          r: "10",
+          stroke: "currentColor",
+          strokeWidth: "4"
+        }
+      ),
+      /* @__PURE__ */ s(
+        "path",
+        {
+          className: "lsd:opacity-75",
+          fill: "currentColor",
+          d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+        }
+      )
+    ]
+  }
+), g = x.forwardRef(
+  ({
+    className: l,
+    variant: d,
+    size: r,
+    loading: t = !1,
+    fullWidth: i = !1,
+    children: e,
+    disabled: c,
+    ...a
+  }, u) => {
+    const p = d === "link";
+    return /* @__PURE__ */ s(
+      "button",
+      {
+        className: o(
+          "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",
+          l
+        ),
+        ref: u,
+        disabled: c || 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 })
+        ] }) : e
+      }
+    );
+  }
+);
+g.displayName = "Button";
+export {
+  g as B,
+  h as b
+};

package/dist/ButtonGroup-BgylmC1j.js

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