@j3m-quantum/ui 0.1.0 → 0.3.0

package/dist/styles/index.css

@@ -1,16 +1,32 @@
 /* ========================================
    J3M UI STYLES
    
-   Main entry point for J3M UI styling.
-   Import this in your app to get the full J3M theme.
+   Import this AFTER shadcn's globals.css to apply J3M theming.
    
-   Usage:
-     import '@j3m-quantum/ui/styles'
+   Prerequisites:
+     1. Run `npx shadcn@latest init` first
+     2. npm install @j3m-quantum/ui
+   
+   Usage in your CSS file:
+   
+     For Vite + React:
+       @import "tailwindcss";
+       @source "../node_modules/@j3m-quantum/ui/dist";
+       @import "@j3m-quantum/ui/styles";
+   
+     For Next.js:
+       @import "tailwindcss";
+       @import "@j3m-quantum/ui/styles";
+   
+   Note: Vite requires the @source directive for Tailwind v4
+   to scan the package's compiled classes.
    ======================================== */
 
-/* 1. J3M Design Tokens (primitives, scales) */
+/* 1. J3M Design Tokens (color scales, spacing, radii, glass effects) */
 @import "./tokens.css";
 
-/* 2. J3M Theme Overrides (shadcn variable customizations) */
-@import "./theme.css";
+/* 2. J3M Theme Overrides (maps shadcn vars to J3M colors) */
+@import "./j3m-overrides.css";
 
+/* 3. Component-specific overrides (toast styling, glass utilities) */
+@import "./theme.css";

package/dist/styles/j3m-overrides.css

@@ -0,0 +1,115 @@
+/* ========================================
+   J3M THEME OVERRIDES
+   
+   Overrides shadcn's default theme variables with J3M colors.
+   Import this AFTER shadcn's globals.css to apply J3M branding.
+   
+   Requires: User has run `npx shadcn init` first
+   ======================================== */
+
+:root {
+  /* ========================================
+     OVERRIDE SHADCN THEME COLORS WITH J3M
+     ======================================== */
+  
+  /* Primary - J3M Orange */
+  --primary: var(--j3m-primary-300);
+  --primary-foreground: #FFFFFF;
+  
+  /* Secondary - J3M Neutral */
+  --secondary: var(--j3m-neutral-200);
+  --secondary-foreground: var(--j3m-neutral-900);
+  
+  /* Muted */
+  --muted: var(--j3m-neutral-200);
+  --muted-foreground: var(--j3m-neutral-600);
+  
+  /* Accent */
+  --accent: var(--j3m-primary-100);
+  --accent-foreground: var(--j3m-primary-500);
+  
+  /* Destructive - J3M Red */
+  --destructive: var(--j3m-red-100);
+  --destructive-foreground: #FFFFFF;
+  
+  /* Background & Foreground */
+  --background: var(--j3m-neutral-100);
+  --foreground: var(--j3m-neutral-1000);
+  
+  /* Card */
+  --card: var(--j3m-neutral-100);
+  --card-foreground: var(--j3m-neutral-1000);
+  
+  /* Popover */
+  --popover: var(--j3m-neutral-100);
+  --popover-foreground: var(--j3m-neutral-1000);
+  
+  /* Border & Input */
+  --border: var(--j3m-neutral-300);
+  --input: var(--j3m-neutral-300);
+  --ring: var(--j3m-primary-250);
+  
+  /* Sidebar - J3M branded */
+  --sidebar-background: var(--j3m-neutral-100);
+  --sidebar-foreground: var(--j3m-neutral-900);
+  --sidebar-primary: var(--j3m-primary-300);
+  --sidebar-primary-foreground: #FFFFFF;
+  --sidebar-accent: var(--j3m-neutral-200);
+  --sidebar-accent-foreground: var(--j3m-neutral-900);
+  --sidebar-border: var(--j3m-neutral-200);
+  --sidebar-ring: var(--j3m-primary-300);
+  
+  /* Chart colors - J3M palette */
+  --chart-1: var(--j3m-primary-300);
+  --chart-2: var(--j3m-green-200);
+  --chart-3: var(--j3m-neutral-700);
+  --chart-4: var(--j3m-yellow-100);
+  --chart-5: var(--j3m-primary-200);
+  
+  /* Radius - J3M values */
+  --radius: var(--j3m-radius-s);
+}
+
+/* ========================================
+   DARK MODE OVERRIDES
+   ======================================== */
+
+.dark {
+  --primary: var(--j3m-primary-250);
+  --primary-foreground: var(--j3m-neutral-1000);
+  
+  --secondary: var(--j3m-neutral-800);
+  --secondary-foreground: var(--j3m-neutral-100);
+  
+  --muted: var(--j3m-neutral-800);
+  --muted-foreground: var(--j3m-neutral-400);
+  
+  --accent: var(--j3m-neutral-800);
+  --accent-foreground: var(--j3m-neutral-100);
+  
+  --destructive: var(--j3m-red-200);
+  --destructive-foreground: #FFFFFF;
+  
+  --background: var(--j3m-neutral-1000);
+  --foreground: var(--j3m-neutral-100);
+  
+  --card: var(--j3m-neutral-1000);
+  --card-foreground: var(--j3m-neutral-100);
+  
+  --popover: var(--j3m-neutral-1000);
+  --popover-foreground: var(--j3m-neutral-100);
+  
+  --border: var(--j3m-neutral-800);
+  --input: var(--j3m-neutral-800);
+  --ring: var(--j3m-primary-250);
+  
+  --sidebar-background: var(--j3m-neutral-1000);
+  --sidebar-foreground: var(--j3m-neutral-100);
+  --sidebar-primary: var(--j3m-primary-250);
+  --sidebar-primary-foreground: var(--j3m-neutral-1000);
+  --sidebar-accent: var(--j3m-neutral-800);
+  --sidebar-accent-foreground: var(--j3m-neutral-100);
+  --sidebar-border: var(--j3m-neutral-800);
+  --sidebar-ring: var(--j3m-primary-250);
+}
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@j3m-quantum/ui",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "description": "J3M UI Component Library - themed shadcn/ui components with design tokens",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -92,16 +92,36 @@
     "vaul": "^1.0.0"
   },
   "peerDependenciesMeta": {
-    "cmdk": { "optional": true },
-    "date-fns": { "optional": true },
-    "embla-carousel-react": { "optional": true },
-    "input-otp": { "optional": true },
-    "react-day-picker": { "optional": true },
-    "react-hook-form": { "optional": true },
-    "react-resizable-panels": { "optional": true },
-    "recharts": { "optional": true },
-    "sonner": { "optional": true },
-    "vaul": { "optional": true }
+    "cmdk": {
+      "optional": true
+    },
+    "date-fns": {
+      "optional": true
+    },
+    "embla-carousel-react": {
+      "optional": true
+    },
+    "input-otp": {
+      "optional": true
+    },
+    "react-day-picker": {
+      "optional": true
+    },
+    "react-hook-form": {
+      "optional": true
+    },
+    "react-resizable-panels": {
+      "optional": true
+    },
+    "recharts": {
+      "optional": true
+    },
+    "sonner": {
+      "optional": true
+    },
+    "vaul": {
+      "optional": true
+    }
   },
   "devDependencies": {
     "@changesets/cli": "^2.29.4",