@j3m-quantum/ui 0.3.0 → 0.4.0

package/dist/styles/animations.css

@@ -0,0 +1,370 @@
+/* ========================================
+   SHADCN ANIMATIONS
+   
+   All animation keyframes required by shadcn components.
+   Based on tw-animate-css / tailwindcss-animate.
+   ======================================== */
+
+/* ========================================
+   ACCORDION ANIMATIONS
+   ======================================== */
+
+@keyframes accordion-down {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--radix-accordion-content-height);
+  }
+}
+
+@keyframes accordion-up {
+  from {
+    height: var(--radix-accordion-content-height);
+  }
+  to {
+    height: 0;
+  }
+}
+
+/* ========================================
+   COLLAPSIBLE ANIMATIONS
+   ======================================== */
+
+@keyframes collapsible-down {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--radix-collapsible-content-height);
+  }
+}
+
+@keyframes collapsible-up {
+  from {
+    height: var(--radix-collapsible-content-height);
+  }
+  to {
+    height: 0;
+  }
+}
+
+/* ========================================
+   FADE ANIMATIONS
+   ======================================== */
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+/* ========================================
+   ZOOM ANIMATIONS
+   ======================================== */
+
+@keyframes zoom-in {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes zoom-out {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+}
+
+/* ========================================
+   SLIDE ANIMATIONS
+   ======================================== */
+
+@keyframes slide-in-from-top {
+  from {
+    transform: translateY(-100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes slide-in-from-bottom {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes slide-in-from-left {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes slide-in-from-right {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes slide-out-to-top {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(-100%);
+  }
+}
+
+@keyframes slide-out-to-bottom {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(100%);
+  }
+}
+
+@keyframes slide-out-to-left {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(-100%);
+  }
+}
+
+@keyframes slide-out-to-right {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(100%);
+  }
+}
+
+/* ========================================
+   SPIN ANIMATION
+   ======================================== */
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* ========================================
+   PING ANIMATION
+   ======================================== */
+
+@keyframes ping {
+  75%, 100% {
+    transform: scale(2);
+    opacity: 0;
+  }
+}
+
+/* ========================================
+   PULSE ANIMATION
+   ======================================== */
+
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+/* ========================================
+   BOUNCE ANIMATION
+   ======================================== */
+
+@keyframes bounce {
+  0%, 100% {
+    transform: translateY(-25%);
+    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
+  }
+  50% {
+    transform: translateY(0);
+    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+  }
+}
+
+/* ========================================
+   ANIMATION UTILITIES
+   ======================================== */
+
+.animate-accordion-down {
+  animation: accordion-down 0.2s ease-out;
+}
+
+.animate-accordion-up {
+  animation: accordion-up 0.2s ease-out;
+}
+
+.animate-collapsible-down {
+  animation: collapsible-down 0.2s ease-out;
+}
+
+.animate-collapsible-up {
+  animation: collapsible-up 0.2s ease-out;
+}
+
+.animate-fade-in {
+  animation: fade-in 0.2s ease-out;
+}
+
+.animate-fade-out {
+  animation: fade-out 0.2s ease-out;
+}
+
+.animate-zoom-in {
+  animation: zoom-in 0.2s ease-out;
+}
+
+.animate-zoom-out {
+  animation: zoom-out 0.2s ease-out;
+}
+
+.animate-spin {
+  animation: spin 1s linear infinite;
+}
+
+.animate-ping {
+  animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
+}
+
+.animate-pulse {
+  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+.animate-bounce {
+  animation: bounce 1s infinite;
+}
+
+/* ========================================
+   ENTER/EXIT ANIMATIONS (for Radix)
+   ======================================== */
+
+[data-state="open"] {
+  --tw-enter-opacity: 1;
+  --tw-enter-scale: 1;
+  --tw-enter-translate-x: 0;
+  --tw-enter-translate-y: 0;
+}
+
+[data-state="closed"] {
+  --tw-exit-opacity: 0;
+  --tw-exit-scale: 0.95;
+}
+
+.animate-in {
+  animation-name: fade-in, zoom-in;
+  animation-duration: 0.2s;
+  animation-timing-function: ease-out;
+  animation-fill-mode: both;
+}
+
+.animate-out {
+  animation-name: fade-out, zoom-out;
+  animation-duration: 0.2s;
+  animation-timing-function: ease-in;
+  animation-fill-mode: both;
+}
+
+.fade-in-0 {
+  --tw-enter-opacity: 0;
+}
+
+.fade-out-0 {
+  --tw-exit-opacity: 0;
+}
+
+.zoom-in-95 {
+  --tw-enter-scale: 0.95;
+}
+
+.zoom-out-95 {
+  --tw-exit-scale: 0.95;
+}
+
+.slide-in-from-top-2 {
+  --tw-enter-translate-y: -0.5rem;
+}
+
+.slide-in-from-bottom-2 {
+  --tw-enter-translate-y: 0.5rem;
+}
+
+.slide-in-from-left-2 {
+  --tw-enter-translate-x: -0.5rem;
+}
+
+.slide-in-from-right-2 {
+  --tw-enter-translate-x: 0.5rem;
+}
+
+.slide-out-to-top-2 {
+  --tw-exit-translate-y: -0.5rem;
+}
+
+.slide-out-to-bottom-2 {
+  --tw-exit-translate-y: 0.5rem;
+}
+
+.slide-out-to-left-2 {
+  --tw-exit-translate-x: -0.5rem;
+}
+
+.slide-out-to-right-2 {
+  --tw-exit-translate-x: 0.5rem;
+}
+
+/* Duration utilities */
+.duration-200 {
+  animation-duration: 200ms;
+}
+
+.duration-300 {
+  animation-duration: 300ms;
+}
+
+.duration-500 {
+  animation-duration: 500ms;
+}
+

package/dist/styles/base.css

@@ -0,0 +1,130 @@
+/* ========================================
+   SHADCN BASE THEME
+   
+   Base theme variables required by shadcn components.
+   This ensures components work without running shadcn init.
+   ======================================== */
+
+@custom-variant dark (&:is(.dark *));
+
+/* ========================================
+   THEME VARIABLES (Light Mode)
+   ======================================== */
+
+@theme {
+  /* Background & Foreground */
+  --color-background: #ffffff;
+  --color-foreground: #09090b;
+
+  /* Card */
+  --color-card: #ffffff;
+  --color-card-foreground: #09090b;
+
+  /* Popover */
+  --color-popover: #ffffff;
+  --color-popover-foreground: #09090b;
+
+  /* Primary */
+  --color-primary: #18181b;
+  --color-primary-foreground: #fafafa;
+
+  /* Secondary */
+  --color-secondary: #f4f4f5;
+  --color-secondary-foreground: #18181b;
+
+  /* Muted */
+  --color-muted: #f4f4f5;
+  --color-muted-foreground: #71717a;
+
+  /* Accent */
+  --color-accent: #f4f4f5;
+  --color-accent-foreground: #18181b;
+
+  /* Destructive */
+  --color-destructive: #ef4444;
+  --color-destructive-foreground: #fafafa;
+
+  /* Border, Input, Ring */
+  --color-border: #e4e4e7;
+  --color-input: #e4e4e7;
+  --color-ring: #18181b;
+
+  /* Sidebar */
+  --color-sidebar: #fafafa;
+  --color-sidebar-foreground: #09090b;
+  --color-sidebar-primary: #18181b;
+  --color-sidebar-primary-foreground: #fafafa;
+  --color-sidebar-accent: #f4f4f5;
+  --color-sidebar-accent-foreground: #18181b;
+  --color-sidebar-border: #e4e4e7;
+  --color-sidebar-ring: #18181b;
+
+  /* Chart Colors */
+  --color-chart-1: #e76e50;
+  --color-chart-2: #2a9d90;
+  --color-chart-3: #274754;
+  --color-chart-4: #e8c468;
+  --color-chart-5: #f4a462;
+
+  /* Radius */
+  --radius: 0.5rem;
+}
+
+/* ========================================
+   DARK MODE OVERRIDES
+   ======================================== */
+
+.dark {
+  --color-background: #09090b;
+  --color-foreground: #fafafa;
+
+  --color-card: #09090b;
+  --color-card-foreground: #fafafa;
+
+  --color-popover: #09090b;
+  --color-popover-foreground: #fafafa;
+
+  --color-primary: #fafafa;
+  --color-primary-foreground: #18181b;
+
+  --color-secondary: #27272a;
+  --color-secondary-foreground: #fafafa;
+
+  --color-muted: #27272a;
+  --color-muted-foreground: #a1a1aa;
+
+  --color-accent: #27272a;
+  --color-accent-foreground: #fafafa;
+
+  --color-destructive: #7f1d1d;
+  --color-destructive-foreground: #fafafa;
+
+  --color-border: #27272a;
+  --color-input: #27272a;
+  --color-ring: #d4d4d8;
+
+  --color-sidebar: #09090b;
+  --color-sidebar-foreground: #fafafa;
+  --color-sidebar-primary: #fafafa;
+  --color-sidebar-primary-foreground: #18181b;
+  --color-sidebar-accent: #27272a;
+  --color-sidebar-accent-foreground: #fafafa;
+  --color-sidebar-border: #27272a;
+  --color-sidebar-ring: #d4d4d8;
+}
+
+/* ========================================
+   BASE LAYER STYLES
+   ======================================== */
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  
+  body {
+    @apply bg-background text-foreground;
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  }
+}
+

package/dist/styles/index.css

@@ -1,32 +1,26 @@
 /* ========================================
-   J3M UI STYLES
+   J3M QUANTUM UI - COMPLETE STYLES
    
-   Import this AFTER shadcn's globals.css to apply J3M theming.
+   Self-contained styles for J3M UI components.
+   No need to run shadcn init - everything is included.
    
-   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.
+   Usage:
+     @import "tailwindcss";
+     @source "../node_modules/@j3m-quantum/ui/dist";
+     @import "@j3m-quantum/ui/styles";
    ======================================== */
 
-/* 1. J3M Design Tokens (color scales, spacing, radii, glass effects) */
+/* 1. Base shadcn theme (theme variables, dark mode, base layer) */
+@import "./base.css";
+
+/* 2. Animations (keyframes for all shadcn components) */
+@import "./animations.css";
+
+/* 3. J3M Design Tokens (color scales, spacing, radii, glass effects) */
 @import "./tokens.css";
 
-/* 2. J3M Theme Overrides (maps shadcn vars to J3M colors) */
+/* 4. J3M Theme Overrides (replaces shadcn colors with J3M palette) */
 @import "./j3m-overrides.css";
 
-/* 3. Component-specific overrides (toast styling, glass utilities) */
+/* 5. Component-specific styles (toast, glass utilities) */
 @import "./theme.css";

package/dist/styles/j3m-overrides.css

@@ -1,115 +1,132 @@
 /* ========================================
    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
+   Overrides shadcn's default theme with J3M brand colors.
+   Uses direct values for maximum compatibility.
    ======================================== */
 
-:root {
+@theme {
+  /* ========================================
+     PRIMARY - J3M Orange
+     ======================================== */
+  --color-primary: #F36C21;
+  --color-primary-foreground: #FFFFFF;
+
+  /* ========================================
+     SECONDARY - J3M Neutral
+     ======================================== */
+  --color-secondary: #E8E8E8;
+  --color-secondary-foreground: #4A4A4A;
+
+  /* ========================================
+     MUTED
+     ======================================== */
+  --color-muted: #E8E8E8;
+  --color-muted-foreground: #8E8E8E;
+
+  /* ========================================
+     ACCENT
+     ======================================== */
+  --color-accent: #FBCEB5;
+  --color-accent-foreground: #8F3808;
+
+  /* ========================================
+     DESTRUCTIVE - J3M Red
+     ======================================== */
+  --color-destructive: #FB3748;
+  --color-destructive-foreground: #FFFFFF;
+
+  /* ========================================
+     BACKGROUND & FOREGROUND
+     ======================================== */
+  --color-background: #FFFFFF;
+  --color-foreground: #333333;
+
+  /* ========================================
+     CARD
+     ======================================== */
+  --color-card: #FFFFFF;
+  --color-card-foreground: #333333;
+
   /* ========================================
-     OVERRIDE SHADCN THEME COLORS WITH J3M
+     POPOVER
      ======================================== */
-  
-  /* 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);
+  --color-popover: #FFFFFF;
+  --color-popover-foreground: #333333;
+
+  /* ========================================
+     BORDER & INPUT
+     ======================================== */
+  --color-border: #D2D2D2;
+  --color-input: #D2D2D2;
+  --color-ring: #F58446;
+
+  /* ========================================
+     SIDEBAR - J3M Branded
+     ======================================== */
+  --color-sidebar: #FFFFFF;
+  --color-sidebar-foreground: #4A4A4A;
+  --color-sidebar-primary: #F36C21;
+  --color-sidebar-primary-foreground: #FFFFFF;
+  --color-sidebar-accent: #E8E8E8;
+  --color-sidebar-accent-foreground: #4A4A4A;
+  --color-sidebar-border: #E8E8E8;
+  --color-sidebar-ring: #F36C21;
+
+  /* ========================================
+     CHART COLORS - J3M Palette
+     ======================================== */
+  --color-chart-1: #F36C21;
+  --color-chart-2: #1FC16B;
+  --color-chart-3: #777777;
+  --color-chart-4: #FFDB43;
+  --color-chart-5: #F79D6B;
+
+  /* ========================================
+     RADIUS - J3M Values
+     ======================================== */
+  --radius: 8px;
 }
 
 /* ========================================
-   DARK MODE OVERRIDES
+   DARK MODE - J3M Dark Theme
    ======================================== */
 
 .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);
-}
+  --color-primary: #F58446;
+  --color-primary-foreground: #333333;
+
+  --color-secondary: #606060;
+  --color-secondary-foreground: #FFFFFF;
+
+  --color-muted: #606060;
+  --color-muted-foreground: #BBBBBB;
+
+  --color-accent: #606060;
+  --color-accent-foreground: #FFFFFF;
+
+  --color-destructive: #D00416;
+  --color-destructive-foreground: #FFFFFF;
 
+  --color-background: #333333;
+  --color-foreground: #FFFFFF;
+
+  --color-card: #333333;
+  --color-card-foreground: #FFFFFF;
+
+  --color-popover: #333333;
+  --color-popover-foreground: #FFFFFF;
+
+  --color-border: #606060;
+  --color-input: #606060;
+  --color-ring: #F58446;
+
+  --color-sidebar: #333333;
+  --color-sidebar-foreground: #FFFFFF;
+  --color-sidebar-primary: #F58446;
+  --color-sidebar-primary-foreground: #333333;
+  --color-sidebar-accent: #606060;
+  --color-sidebar-accent-foreground: #FFFFFF;
+  --color-sidebar-border: #606060;
+  --color-sidebar-ring: #F58446;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@j3m-quantum/ui",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "J3M UI Component Library - themed shadcn/ui components with design tokens",
   "type": "module",
   "main": "./dist/index.cjs",