@nar-bus/lena-ui-shared 1.0.0

package/dist/theme.css

@@ -0,0 +1,464 @@
+@custom-variant dark (&:is(.dark *));
+
+/* =============================================================================
+   LENA UI - Slate Blue Professional Theme
+   ============================================================================= */
+
+/* =============================================================================
+   LIGHT MODE
+   ============================================================================= */
+:root {
+  --radius: 0.625rem;
+
+  /* Custom Font Sizes - Small Scale for Data-Dense UI */
+  --text-2xs: 0.625rem;      /* 10px */
+
+  /* Filter System Sizing */
+  --filter-width-xs: 4.375rem;   /* 70px - boolean/short */
+  --filter-width-sm: 5rem;       /* 80px - number inputs */
+  --filter-width-md: 6.25rem;    /* 100px - operators */
+  --filter-width-lg: 7.5rem;     /* 120px - text/date inputs, field select */
+  --filter-width-xl: 8.125rem;   /* 130px - long enums */
+
+  /* Sidebar Layout */
+  --sidebar-icon-size: 1.125rem;      /* 18px */
+  --sidebar-indent-step: 0.75rem;     /* 12px per depth level */
+  --sidebar-toggle-offset: 3.25rem;   /* 52px from top */
+
+  /* Component Sizing */
+  --property-label-max-width: 11.25rem;  /* 180px */
+  --tree-indent-step: 1rem;              /* 16px per depth level */
+  --dropdown-menu-width-sm: 7.5rem;      /* 120px */
+  --dropdown-menu-width-md: 10rem;       /* 160px */
+
+  /* Surfaces */
+  --background: oklch(0.984 0.003 265);
+  --foreground: oklch(0.129 0.042 265);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.129 0.042 265);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.129 0.042 265);
+
+  /* Primary */
+  --primary: oklch(0.208 0.042 265);
+  --primary-foreground: oklch(0.984 0.003 265);
+
+  /* Secondary & Muted */
+  --secondary: oklch(0.968 0.007 265);
+  --secondary-foreground: oklch(0.208 0.042 265);
+  --muted: oklch(0.968 0.007 265);
+  --muted-foreground: oklch(0.554 0.046 257);
+
+  /* Accent */
+  --accent: oklch(0.968 0.007 265);
+  --accent-foreground: oklch(0.208 0.042 265);
+
+  /* Destructive */
+  --destructive: oklch(0.577 0.245 27);
+  --destructive-foreground: oklch(0.985 0 0);
+
+  /* Borders & Inputs */
+  --border: oklch(0.929 0.013 265);
+  --input: oklch(0.929 0.013 265);
+  --ring: oklch(0.554 0.046 257);
+
+  /* Overlay */
+  --overlay: oklch(0 0 0 / 0.5);
+
+  /* Sidebar - Deep Navy Blue */
+  --sidebar: oklch(0.16 0.05 245);
+  --sidebar-foreground: oklch(0.82 0.02 245);
+  --sidebar-primary: oklch(0.92 0.02 245);
+  --sidebar-primary-foreground: oklch(0.98 0.01 245);
+  --sidebar-accent: oklch(0.22 0.06 245);
+  --sidebar-accent-foreground: oklch(0.92 0.02 245);
+  --sidebar-border: oklch(0.24 0.05 245);
+  --sidebar-ring: oklch(0.85 0.02 245);
+
+  /* Status */
+  --status-online: oklch(0.627 0.194 149);
+  --status-offline: oklch(0.554 0.046 257);
+  --status-warning: oklch(0.769 0.188 70);
+  --status-error: oklch(0.577 0.245 27);
+
+  /* Accent Colors */
+  --accent-cyan: oklch(0.25 0.25 220);
+  --accent-violet: oklch(0.541 0.281 293);
+
+  /* Semantic Status (extended) */
+  --status-success: oklch(0.548 0.205 152);
+  --status-success-foreground: oklch(0.432 0.17 153);
+  --status-info: oklch(0.623 0.214 259);
+  --status-info-foreground: oklch(0.546 0.215 262);
+  --status-neutral: oklch(0.554 0.046 257);
+  --status-neutral-foreground: oklch(0.446 0.043 257.3);
+  --status-purple: oklch(0.627 0.265 303);
+  --status-purple-foreground: oklch(0.558 0.288 302);
+
+  /* Surface Backgrounds (for containers, cards, banners) */
+  --surface-success: oklch(0.95 0.05 152);
+  --surface-success-foreground: oklch(0.432 0.17 153);
+  --surface-warning: oklch(0.95 0.06 85);
+  --surface-warning-foreground: oklch(0.55 0.18 70);
+  --surface-error: oklch(0.95 0.04 25);
+  --surface-error-foreground: oklch(0.50 0.21 27);
+  --surface-info: oklch(0.95 0.04 255);
+  --surface-info-foreground: oklch(0.546 0.215 262);
+  --surface-purple: oklch(0.95 0.04 295);
+  --surface-purple-foreground: oklch(0.558 0.288 302);
+
+  /* Syntax Highlighting */
+  --syntax-string: oklch(0.548 0.205 152);
+  --syntax-boolean: oklch(0.702 0.183 56);
+  --syntax-number: var(--accent-cyan);
+  --syntax-key: var(--accent-violet);
+  --syntax-null: var(--muted-foreground);
+
+  /* Feedback */
+  --feedback-success: oklch(0.548 0.205 152);
+  --feedback-warning: oklch(0.769 0.188 70);
+  --feedback-error: oklch(0.577 0.245 27);
+
+  /* Sidebar Theming */
+  --sidebar-active-gradient: linear-gradient(90deg, oklch(0.92 0.015 250 / 0.15) 0%, transparent 100%);
+  --sidebar-indicator-gradient: linear-gradient(180deg, oklch(0.92 0.015 250) 0%, oklch(0.80 0.02 250) 100%);
+  --sidebar-indicator-glow: 0 0 8px oklch(0.92 0.015 250 / 0.5);
+  --sidebar-logo-gradient: linear-gradient(135deg, oklch(0.92 0.015 250) 0%, oklch(0.80 0.02 250) 100%);
+  --sidebar-logo-shadow: 0 2px 8px oklch(0.92 0.015 250 / 0.3);
+  --sidebar-overlay-gradient: linear-gradient(180deg, oklch(0.18 0.04 250) 0%, transparent 20%, transparent 80%, oklch(0.12 0.04 250) 100%);
+  --sidebar-inset-shadow: inset -1px 0 0 0 oklch(0.25 0.04 250 / 0.5);
+
+  /* Charts */
+  --chart-1: oklch(0.40 0.20 245);
+  --chart-2: oklch(0.627 0.194 149);
+  --chart-3: oklch(0.769 0.188 70);
+  --chart-4: oklch(0.554 0.046 257);
+  --chart-5: oklch(0.606 0.25 292);
+
+  /* Table Rows */
+  --table-row-even: oklch(0.984 0.003 265);
+  --table-row-hover: oklch(0.968 0.007 265);
+  --table-row-selected: oklch(0.929 0.013 265);
+}
+
+/* =============================================================================
+   DARK MODE
+   ============================================================================= */
+.dark {
+  /* Surfaces - Neutral Zinc */
+  --background: oklch(0.145 0.000 0);
+  --foreground: oklch(0.985 0.000 0);
+  --card: oklch(0.180 0.000 0);
+  --card-foreground: oklch(0.985 0.000 0);
+  --popover: oklch(0.205 0.000 0);
+  --popover-foreground: oklch(0.985 0.000 0);
+
+  /* Primary */
+  --primary: oklch(0.985 0.000 0);
+  --primary-foreground: oklch(0.205 0.000 0);
+
+  /* Secondary & Muted - Neutral */
+  --secondary: oklch(0.270 0.000 0);
+  --secondary-foreground: oklch(0.985 0.000 0);
+  --muted: oklch(0.270 0.000 0);
+  --muted-foreground: oklch(0.710 0.000 0);
+
+  /* Accent - Neutral */
+  --accent: oklch(0.270 0.000 0);
+  --accent-foreground: oklch(0.985 0.000 0);
+
+  /* Destructive */
+  --destructive: oklch(0.577 0.245 27);
+  --destructive-foreground: oklch(0.985 0 0);
+
+  /* Borders & Inputs - Neutral */
+  --border: oklch(0.270 0.000 0);
+  --input: oklch(0.270 0.000 0);
+  --ring: oklch(0.520 0.000 0);
+
+  /* Overlay */
+  --overlay: oklch(0 0 0 / 0.5);
+
+  /* Sidebar - Neutral */
+  --sidebar: oklch(0.160 0.000 0);
+  --sidebar-foreground: oklch(0.820 0.000 0);
+  --sidebar-primary: oklch(0.920 0.000 0);
+  --sidebar-primary-foreground: oklch(0.980 0.000 0);
+  --sidebar-accent: oklch(0.220 0.000 0);
+  --sidebar-accent-foreground: oklch(0.920 0.000 0);
+  --sidebar-border: oklch(0.240 0.000 0);
+  --sidebar-ring: oklch(0.850 0.000 0);
+
+  /* Status */
+  --status-online: oklch(0.723 0.15 149);
+  --status-offline: oklch(0.554 0.046 257);
+  --status-warning: oklch(0.828 0.15 84);
+  --status-error: oklch(0.637 0.20 25);
+
+  /* Accent Colors */
+  --accent-cyan: oklch(0.750 0.000 0);
+  --accent-violet: oklch(0.650 0.000 0);
+
+  /* Semantic Status (extended) */
+  --status-success: oklch(0.723 0.15 149);
+  --status-success-foreground: oklch(0.723 0.15 149);
+  --status-info: oklch(0.707 0.165 254);
+  --status-info-foreground: oklch(0.707 0.165 254);
+  --status-neutral: oklch(0.704 0.04 256);
+  --status-neutral-foreground: oklch(0.704 0.04 256);
+  --status-purple: oklch(0.702 0.18 292);
+  --status-purple-foreground: oklch(0.702 0.18 292);
+
+  /* Surface Backgrounds */
+  --surface-success: oklch(0.25 0.06 152 / 0.3);
+  --surface-success-foreground: oklch(0.75 0.12 149);
+  --surface-warning: oklch(0.28 0.06 85 / 0.3);
+  --surface-warning-foreground: oklch(0.80 0.12 84);
+  --surface-error: oklch(0.25 0.06 25 / 0.3);
+  --surface-error-foreground: oklch(0.72 0.15 25);
+  --surface-info: oklch(0.25 0.06 255 / 0.3);
+  --surface-info-foreground: oklch(0.75 0.12 254);
+  --surface-purple: oklch(0.25 0.06 295 / 0.3);
+  --surface-purple-foreground: oklch(0.75 0.12 292);
+
+  /* Syntax Highlighting */
+  --syntax-string: oklch(0.723 0.15 149);
+  --syntax-boolean: oklch(0.792 0.16 56);
+  --syntax-number: var(--accent-cyan);
+  --syntax-key: var(--accent-violet);
+  --syntax-null: var(--muted-foreground);
+
+  /* Feedback */
+  --feedback-success: oklch(0.723 0.15 149);
+  --feedback-warning: oklch(0.828 0.15 84);
+  --feedback-error: oklch(0.637 0.20 25);
+
+  /* Sidebar Theming */
+  --sidebar-active-gradient: linear-gradient(90deg, oklch(0.92 0.000 0 / 0.10) 0%, transparent 100%);
+  --sidebar-indicator-gradient: linear-gradient(180deg, oklch(0.75 0.000 0) 0%, oklch(0.60 0.000 0) 100%);
+  --sidebar-indicator-glow: 0 0 8px oklch(0.75 0.000 0 / 0.4);
+  --sidebar-logo-gradient: linear-gradient(135deg, oklch(0.75 0.000 0) 0%, oklch(0.55 0.000 0) 100%);
+  --sidebar-logo-shadow: 0 2px 8px oklch(0.75 0.000 0 / 0.2);
+  --sidebar-overlay-gradient: linear-gradient(180deg, oklch(0.18 0.000 0) 0%, transparent 20%, transparent 80%, oklch(0.12 0.000 0) 100%);
+  --sidebar-inset-shadow: inset -1px 0 0 0 oklch(0.25 0.000 0 / 0.5);
+
+  /* Charts */
+  --chart-1: oklch(0.55 0.18 245);
+  --chart-2: oklch(0.723 0.15 149);
+  --chart-3: oklch(0.828 0.15 84);
+  --chart-4: oklch(0.704 0.04 256);
+  --chart-5: oklch(0.702 0.18 292);
+
+  /* Table Rows - Neutral */
+  --table-row-even: oklch(0.160 0.000 0);
+  --table-row-hover: oklch(0.220 0.000 0);
+  --table-row-selected: oklch(0.270 0.000 0);
+}
+
+/* =============================================================================
+   TAILWIND THEME MAPPING
+   ============================================================================= */
+@theme inline {
+  --text-2xs: 0.625rem;
+  --text-2xs--line-height: 0.875rem;
+
+  /* Filter System Widths */
+  --spacing-filter-xs: var(--filter-width-xs);
+  --spacing-filter-sm: var(--filter-width-sm);
+  --spacing-filter-md: var(--filter-width-md);
+  --spacing-filter-lg: var(--filter-width-lg);
+  --spacing-filter-xl: var(--filter-width-xl);
+
+  /* Sidebar Layout */
+  --spacing-sidebar-icon: var(--sidebar-icon-size);
+  --spacing-sidebar-indent: var(--sidebar-indent-step);
+
+  /* Component Sizing */
+  --spacing-property-label: var(--property-label-max-width);
+  --spacing-tree-indent: var(--tree-indent-step);
+  --spacing-dropdown-sm: var(--dropdown-menu-width-sm);
+  --spacing-dropdown-md: var(--dropdown-menu-width-md);
+
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-2xl: calc(var(--radius) + 8px);
+
+  --color-overlay: var(--overlay);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+
+  --color-status-online: var(--status-online);
+  --color-status-offline: var(--status-offline);
+  --color-status-warning: var(--status-warning);
+  --color-status-error: var(--status-error);
+
+  --color-accent-cyan: var(--accent-cyan);
+  --color-accent-violet: var(--accent-violet);
+
+  --color-status-success: var(--status-success);
+  --color-status-success-foreground: var(--status-success-foreground);
+  --color-status-info: var(--status-info);
+  --color-status-info-foreground: var(--status-info-foreground);
+  --color-status-neutral: var(--status-neutral);
+  --color-status-neutral-foreground: var(--status-neutral-foreground);
+  --color-status-purple: var(--status-purple);
+  --color-status-purple-foreground: var(--status-purple-foreground);
+
+  --color-surface-success: var(--surface-success);
+  --color-surface-success-foreground: var(--surface-success-foreground);
+  --color-surface-warning: var(--surface-warning);
+  --color-surface-warning-foreground: var(--surface-warning-foreground);
+  --color-surface-error: var(--surface-error);
+  --color-surface-error-foreground: var(--surface-error-foreground);
+  --color-surface-info: var(--surface-info);
+  --color-surface-info-foreground: var(--surface-info-foreground);
+  --color-surface-purple: var(--surface-purple);
+  --color-surface-purple-foreground: var(--surface-purple-foreground);
+
+  --color-syntax-string: var(--syntax-string);
+  --color-syntax-boolean: var(--syntax-boolean);
+  --color-syntax-number: var(--syntax-number);
+  --color-syntax-key: var(--syntax-key);
+  --color-syntax-null: var(--syntax-null);
+
+  --color-feedback-success: var(--feedback-success);
+  --color-feedback-warning: var(--feedback-warning);
+  --color-feedback-error: var(--feedback-error);
+
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+
+  --color-table-row-even: var(--table-row-even);
+  --color-table-row-hover: var(--table-row-hover);
+  --color-table-row-selected: var(--table-row-selected);
+}
+
+/* =============================================================================
+   BASE STYLES
+   ============================================================================= */
+@layer base {
+  * {
+    @apply border-border;
+    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  }
+
+  body {
+    @apply bg-background text-foreground antialiased;
+    font-feature-settings: "rlig" 1, "calt" 1;
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    @apply font-semibold tracking-tight;
+  }
+
+  ::-webkit-scrollbar {
+    @apply w-1.5 h-1.5;
+  }
+
+  ::-webkit-scrollbar-track {
+    @apply bg-transparent;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    @apply bg-border rounded-full;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    @apply bg-muted-foreground;
+  }
+}
+
+/* =============================================================================
+   DATA TABLE ROW STATES
+   ============================================================================= */
+.data-table-row:nth-child(even) {
+  background-color: var(--table-row-even);
+}
+
+.data-table-row:hover {
+  background-color: var(--table-row-hover);
+}
+
+.data-table-row[data-state="selected"] {
+  background-color: var(--table-row-selected);
+}
+
+.data-table-row {
+  @apply transition-colors duration-150;
+}
+
+/* =============================================================================
+   UTILITY CLASSES
+   ============================================================================= */
+.scrollbar-none {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.scrollbar-none::-webkit-scrollbar {
+  display: none;
+}
+
+/* =============================================================================
+   TAB PANEL ANIMATIONS
+   ============================================================================= */
+@keyframes tab-fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes tab-slide-in-from-right {
+  from { opacity: 0; transform: translateX(8px); }
+  to { opacity: 1; transform: translateX(0); }
+}
+
+@keyframes tab-slide-in-from-left {
+  from { opacity: 0; transform: translateX(-8px); }
+  to { opacity: 1; transform: translateX(0); }
+}
+
+.tab-panel-enter {
+  animation: tab-fade-in 200ms ease-out;
+}
+
+.tab-panel-enter[data-tab-direction="1"] {
+  animation: tab-slide-in-from-right 200ms ease-out;
+}
+
+.tab-panel-enter[data-tab-direction="-1"] {
+  animation: tab-slide-in-from-left 200ms ease-out;
+}
+
+/* Scan package dist for Tailwind class detection */
+@source "..";

package/package.json

@@ -0,0 +1,106 @@
+{
+  "name": "@nar-bus/lena-ui-shared",
+  "version": "1.0.0",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./theme.css": "./dist/theme.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "peerDependencies": {
+    "@tanstack/react-query": "^5.0.0",
+    "@tanstack/react-router": "^1.0.0",
+    "@tanstack/react-table": "^8.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-hook-form": "^7.0.0",
+    "tailwindcss": "^4.0.0",
+    "zod": "^4.0.0",
+    "zustand": "^5.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react-hook-form": {
+      "optional": true
+    },
+    "zod": {
+      "optional": true
+    },
+    "@tanstack/react-table": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "@hookform/resolvers": "^5.2.2",
+    "@radix-ui/react-accordion": "^1.2.12",
+    "@radix-ui/react-alert-dialog": "^1.1.15",
+    "@radix-ui/react-avatar": "^1.1.11",
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-collapsible": "^1.1.12",
+    "@radix-ui/react-context-menu": "^2.2.16",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-label": "^2.1.8",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-progress": "^1.1.8",
+    "@radix-ui/react-radio-group": "^1.3.8",
+    "@radix-ui/react-scroll-area": "^1.2.10",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-separator": "^1.1.8",
+    "@radix-ui/react-slider": "^1.3.6",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-switch": "^1.2.6",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-toggle": "^1.1.10",
+    "@radix-ui/react-toggle-group": "^1.1.11",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "@tanstack/react-virtual": "^3.13.18",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "date-fns": "^4.1.0",
+    "immer": "^11.1.3",
+    "lucide-react": "^0.563.0",
+    "nanoid": "^5.1.6",
+    "next-themes": "^0.4.6",
+    "react-day-picker": "^9.13.0",
+    "react-resizable-panels": "^4.6.4",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^3.4.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.1.18",
+    "@tanstack/react-query": "^5.90.20",
+    "@tanstack/react-router": "^1.157.15",
+    "@tanstack/react-table": "^8.21.3",
+    "@types/node": "^24.10.9",
+    "@types/react": "^19.2.5",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-hook-form": "^7.71.1",
+    "tailwindcss": "^4.1.18",
+    "typescript": "~5.9.3",
+    "vite": "7.1.7",
+    "vite-plugin-dts": "^4.0.0",
+    "zod": "^4.3.6",
+    "zustand": "^5.0.10"
+  },
+  "scripts": {
+    "build": "vite build && cp src/styles/theme.css dist/theme.css",
+    "dev": "vite build --watch",
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "npm run build"
+  }
+}