@j3m-quantum/ui 0.4.0 → 0.7.0

package/dist/styles/index.css

@@ -1,26 +1,607 @@
 /* ========================================
-   J3M QUANTUM UI - COMPLETE STYLES
-   
-   Self-contained styles for J3M UI components.
-   No need to run shadcn init - everything is included.
+   J3M QUANTUM UI - Complete Theme
+   TweakCN-style structure for global theming
    
    Usage:
      @import "tailwindcss";
-     @source "../node_modules/@j3m-quantum/ui/dist";
      @import "@j3m-quantum/ui/styles";
    ======================================== */
 
-/* 1. Base shadcn theme (theme variables, dark mode, base layer) */
-@import "./base.css";
+/* ========================================
+   SCALE TOKENS (Primitives)
+   Direct values - source of truth
+   ======================================== */
+
+:root {
+  /* Primary Orange Scale */
+  --j3m-primary-100: #FBCEB5;
+  --j3m-primary-200: #F79D6B;
+  --j3m-primary-250: #F58446;
+  --j3m-primary-300: #F36C21;
+  --j3m-primary-350: #EA5B0C;
+  --j3m-primary-400: #CA4F0B;
+  --j3m-primary-500: #8F3808;
+
+  /* Neutral Gray Scale */
+  --j3m-neutral-100: #FFFFFF;
+  --j3m-neutral-200: #E8E8E8;
+  --j3m-neutral-250: #DADBDC;
+  --j3m-neutral-300: #D2D2D2;
+  --j3m-neutral-350: #D1D1D1;
+  --j3m-neutral-400: #BBBBBB;
+  --j3m-neutral-500: #A4A4A4;
+  --j3m-neutral-600: #8E8E8E;
+  --j3m-neutral-700: #777777;
+  --j3m-neutral-750: #747474;
+  --j3m-neutral-800: #606060;
+  --j3m-neutral-900: #4A4A4A;
+  --j3m-neutral-1000: #333333;
+
+  /* Status Colors */
+  --j3m-red-100: #FB3748;
+  --j3m-red-200: #D00416;
+  --j3m-yellow-100: #FFDB43;
+  --j3m-yellow-200: #DFB400;
+  --j3m-green-100: #84EBB4;
+  --j3m-green-200: #1FC16B;
+
+  /* ========================================
+     SEMANTIC TOKENS
+     Purpose-driven aliases
+     ======================================== */
+
+  /* Background Hierarchy */
+  --color-bg-app: var(--j3m-neutral-350);
+  --color-bg-page: var(--j3m-neutral-200);
+  --color-bg-surface: var(--j3m-neutral-100);
+  --color-bg-subtle: var(--j3m-neutral-200);
+  --color-bg-toolbar: var(--j3m-neutral-250);
+
+  /* Text Colors (opacity-based for glass) */
+  --color-text-main: rgba(0, 0, 0, 0.7);
+  --color-text-muted: rgba(0, 0, 0, 0.5);
+  --color-text-soft: rgba(0, 0, 0, 0.4);
+  --color-text-on-accent: #FFFFFF;
+  --color-text-on-accent-muted: rgba(255, 255, 255, 0.5);
+
+  /* Border Colors */
+  --color-border-subtle: var(--j3m-neutral-200);
+  --color-border-strong: var(--j3m-neutral-400);
+
+  /* Accent/Interactive Colors */
+  --color-accent: var(--j3m-primary-250);
+  --color-accent-hover: var(--j3m-primary-300);
+  --color-accent-active: var(--j3m-primary-350);
+
+  /* Interactive Component Patterns */
+  --color-interactive-bg: var(--j3m-primary-250);
+  --color-interactive-text: var(--j3m-neutral-100);
+  --color-cta-bg: var(--j3m-primary-300);
+  --color-cta-text: var(--j3m-neutral-100);
+  --color-focus-ring: rgba(245, 132, 70, 0.2);
+  --color-hover-overlay-light: rgba(255, 255, 255, 0.2);
+  --color-hover-overlay-dark: rgba(51, 51, 51, 0.1);
+
+  /* Status Semantic */
+  --color-success-bg: var(--j3m-green-100);
+  --color-success-border: var(--j3m-green-200);
+  --color-success-text: var(--j3m-green-200);
+  --color-warning-bg: var(--j3m-yellow-100);
+  --color-warning-border: var(--j3m-yellow-200);
+  --color-warning-text: var(--j3m-yellow-200);
+  --color-error-bg: var(--j3m-red-100);
+  --color-error-border: var(--j3m-red-200);
+  --color-error-text: var(--j3m-red-100);
+
+  /* Tooltip */
+  --color-tooltip-bg: var(--j3m-neutral-1000);
+  --color-tooltip-text: var(--j3m-neutral-100);
+
+  /* Progress */
+  --color-progress-fill: var(--j3m-primary-250);
+  --color-progress-track: rgba(255, 255, 255, 0.5);
+
+  /* Form Controls */
+  --color-checkbox-bg: rgba(255, 255, 255, 0.5);
+  --color-radio-bg: rgba(255, 255, 255, 0.5);
+
+  /* ========================================
+     RADIUS TOKENS
+     ======================================== */
+  --j3m-radius-none: 0px;
+  --j3m-radius-2xs: 4px;
+  --j3m-radius-xs: 5px;
+  --j3m-radius-s: 8px;
+  --j3m-radius-m: 10px;
+  --j3m-radius-l: 18px;
+  --j3m-radius-xl: 22px;
+  --j3m-radius-2xl: 26px;
+  --j3m-radius-full: 9999px;
+
+  /* ========================================
+     SPACING TOKENS
+     ======================================== */
+  --j3m-spacing-xs: 8px;
+  --j3m-spacing-s: 12px;
+  --j3m-spacing-m: 16px;
+  --j3m-spacing-l: 24px;
+  --j3m-spacing-xl: 32px;
+
+  /* ========================================
+     STROKE/BORDER TOKENS
+     ======================================== */
+  --j3m-stroke-none: 0px;
+  --j3m-stroke-s: 1px;
+  --j3m-stroke-m: 2px;
+  --j3m-stroke-l: 3px;
+  --j3m-stroke-xl: 4px;
+
+  /* Stroke Colors (opacity-based) */
+  --j3m-stroke-dark-5: rgba(0, 0, 0, 0.05);
+  --j3m-stroke-dark-10: rgba(0, 0, 0, 0.1);
+  --j3m-stroke-dark-20: rgba(0, 0, 0, 0.2);
+  --j3m-stroke-light-5: rgba(255, 255, 255, 0.05);
+  --j3m-stroke-light-10: rgba(255, 255, 255, 0.1);
+  --j3m-stroke-light-20: rgba(255, 255, 255, 0.2);
+  --j3m-stroke-white: rgba(255, 255, 255, 1);
+  --j3m-stroke-primary-10: rgba(243, 108, 33, 0.1);
+  --j3m-stroke-primary-350-50: rgba(234, 91, 12, 0.5);
+  --j3m-stroke-neutral-1000-10: rgba(51, 51, 51, 0.1);
+
+  /* ========================================
+     GLASS EFFECTS
+     ======================================== */
+  
+  /* Blur Scale */
+  --j3m-blur-sm: 10px;
+  --j3m-blur-md: 20px;
+  --j3m-blur-lg: 50px;
+
+  /* Glass Backgrounds */
+  --j3m-glass-light-10: rgba(255, 255, 255, 0.1);
+  --j3m-glass-light-20: rgba(255, 255, 255, 0.2);
+  --j3m-glass-light-40: rgba(255, 255, 255, 0.4);
+  --j3m-glass-light-50: rgba(255, 255, 255, 0.5);
+  --j3m-glass-light-70: rgba(255, 255, 255, 0.7);
+  --j3m-glass-light-80: rgba(255, 255, 255, 0.8);
+  --j3m-glass-light-subtle: rgba(255, 255, 255, 0.1);
+  --j3m-glass-light: rgba(255, 255, 255, 0.5);
+  --j3m-glass-light-hover: rgba(255, 255, 255, 0.7);
+  --j3m-glass-light-strong: rgba(255, 255, 255, 0.81);
+  --j3m-glass-dark: rgba(51, 51, 51, 0.6);
+  --j3m-glass-dark-hover: rgba(51, 51, 51, 0.7);
+  --j3m-glass-dark-strong: rgba(51, 51, 51, 0.85);
+  --j3m-glass-neutral-subtle: rgba(227, 227, 227, 0.3);
+  --j3m-glass-neutral: rgba(227, 227, 227, 0.5);
+  --j3m-glass-neutral-strong: rgba(227, 227, 227, 0.7);
+  --j3m-glass-primary: rgba(243, 108, 33, 0.1);
+  --j3m-glass-primary-highlight: rgba(243, 108, 33, 0.2);
+
+  /* Glass Borders */
+  --j3m-glass-border-light: rgba(255, 255, 255, 0.3);
+  --j3m-glass-border-subtle: rgba(255, 255, 255, 0.1);
+  --j3m-glass-border-white: rgba(255, 255, 255, 0.2);
+
+  /* Glass Shadows */
+  --j3m-glass-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
+  --j3m-glass-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.08);
+  --j3m-glass-shadow-lg: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  --j3m-glass-shadow-glow: 0 0 10px var(--j3m-primary-300);
+  --j3m-glass-shadow-glow-active: 0 0 20px var(--j3m-primary-350);
+
+  /* ========================================
+     SHADCN/TAILWIND SEMANTIC TOKENS
+     For standard shadcn component compatibility
+     ======================================== */
+  --primary: var(--j3m-primary-250);
+  --primary-foreground: #FFFFFF;
+  --secondary: var(--j3m-neutral-200);
+  --secondary-foreground: var(--j3m-neutral-900);
+  --muted: var(--j3m-neutral-200);
+  --muted-foreground: var(--j3m-neutral-600);
+  --accent: var(--j3m-primary-250);
+  --accent-foreground: #FFFFFF;
+  --destructive: var(--j3m-red-100);
+  --destructive-foreground: #FFFFFF;
+  --background: var(--j3m-neutral-100);
+  --foreground: var(--j3m-neutral-1000);
+  --card: var(--j3m-neutral-100);
+  --card-foreground: var(--j3m-neutral-1000);
+  --popover: var(--j3m-neutral-100);
+  --popover-foreground: var(--j3m-neutral-1000);
+  --border: var(--j3m-neutral-300);
+  --input: var(--j3m-neutral-300);
+  --ring: var(--j3m-primary-250);
+
+  /* Sidebar */
+  --sidebar: 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 */
+  --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);
+
+  /* Global Radius */
+  --radius: 12px;
+
+  /* Shadows */
+  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
+}
+
+/* ========================================
+   DARK MODE
+   ======================================== */
+
+.dark {
+  /* Background Hierarchy */
+  --color-bg-app: var(--j3m-neutral-1000);
+  --color-bg-page: var(--j3m-neutral-900);
+  --color-bg-surface: var(--j3m-neutral-800);
+  --color-bg-subtle: var(--j3m-neutral-700);
+  --color-bg-toolbar: var(--j3m-neutral-750);
+
+  /* Text Colors */
+  --color-text-main: rgba(255, 255, 255, 0.9);
+  --color-text-muted: rgba(255, 255, 255, 0.6);
+  --color-text-soft: rgba(255, 255, 255, 0.4);
+
+  /* Border Colors */
+  --color-border-subtle: var(--j3m-neutral-700);
+  --color-border-strong: var(--j3m-neutral-600);
+
+  /* Shadcn tokens */
+  --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-900);
+  --card-foreground: var(--j3m-neutral-100);
+  --popover: var(--j3m-neutral-900);
+  --popover-foreground: var(--j3m-neutral-100);
+  --border: var(--j3m-neutral-700);
+  --input: var(--j3m-neutral-700);
+  --ring: var(--j3m-primary-250);
+
+  /* Sidebar */
+  --sidebar: var(--j3m-neutral-900);
+  --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-700);
+  --sidebar-ring: var(--j3m-primary-250);
+}
+
+/* ========================================
+   THEME MODE: SOLID (Default)
+   Opaque surfaces for admin/forms/data-heavy screens
+   ======================================== */
+
+.theme-solid,
+:root:not(.theme-glass) {
+  /* Surface tokens for solid mode */
+  --surface-bg: var(--color-bg-surface);
+  --surface-border: var(--color-border-subtle);
+  --surface-shadow: var(--shadow-sm);
+  --surface-radius: var(--j3m-radius-l);
+  --surface-blur: 0px;
+  
+  /* Overlay surfaces (dialogs, popovers, etc) */
+  --overlay-bg: var(--color-bg-surface);
+  --overlay-border: var(--color-border-subtle);
+  --overlay-shadow: var(--shadow-lg);
+  --overlay-blur: 0px;
+}
+
+/* ========================================
+   THEME MODE: GLASS
+   Frosted translucent surfaces for overlays/HUDs
+   ======================================== */
+
+.theme-glass {
+  /* Surface tokens for glass mode */
+  --surface-bg: var(--j3m-glass-light-40);
+  --surface-border: var(--j3m-glass-border-white);
+  --surface-shadow: var(--j3m-glass-shadow-md);
+  --surface-radius: var(--j3m-radius-l);
+  --surface-blur: var(--j3m-blur-lg);
+  
+  /* Overlay surfaces (dialogs, popovers, etc) */
+  --overlay-bg: var(--j3m-glass-light-70);
+  --overlay-border: var(--j3m-glass-border-light);
+  --overlay-shadow: var(--j3m-glass-shadow-lg);
+  --overlay-blur: var(--j3m-blur-2xl);
+  
+  /* Adjust input backgrounds for glass */
+  --input-bg: var(--j3m-glass-light-50);
+  --card: var(--j3m-glass-light-50);
+  --popover: var(--j3m-glass-light-70);
+}
+
+.theme-glass.dark {
+  /* Dark glass overrides */
+  --surface-bg: var(--j3m-glass-dark);
+  --surface-border: var(--j3m-stroke-light-10);
+  --overlay-bg: var(--j3m-glass-dark-hover);
+  --overlay-border: var(--j3m-stroke-light-20);
+}
+
+/* ========================================
+   GLASS CONTEXT
+   Applied inside glass surfaces to adjust nested components
+   ======================================== */
+
+.glass-context {
+  --background: var(--j3m-glass-light-80);
+  --input: var(--j3m-glass-light-50);
+  --card: var(--j3m-glass-light-70);
+  --popover: var(--j3m-glass-light-80);
+  --muted: var(--j3m-glass-light-50);
+  --secondary: var(--j3m-glass-light-70);
+  --border: var(--j3m-glass-border-light);
+}
+
+/* ========================================
+   TAILWIND THEME MAPPING
+   @theme inline for Tailwind v4
+   ======================================== */
+
+@theme inline {
+  /* Colors */
+  --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);
+
+  /* Chart */
+  --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);
+
+  /* Sidebar */
+  --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);
+
+  /* Radius */
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+
+  /* Shadows */
+  --shadow-sm: var(--shadow-sm);
+  --shadow: var(--shadow);
+  --shadow-md: var(--shadow-md);
+  --shadow-lg: var(--shadow-lg);
+}
+
+/* ========================================
+   BASE STYLES
+   ======================================== */
+
+@layer base {
+  * {
+    border-color: var(--border);
+  }
+
+  body {
+    background-color: var(--background);
+    color: var(--foreground);
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  }
+}
+
+/* ========================================
+   GLASS CONTEXT
+   Apply when inside a glass container
+   ======================================== */
+
+.glass-context {
+  --background: rgba(255, 255, 255, 0.8);
+  --input: rgba(255, 255, 255, 0.3);
+  --card: rgba(255, 255, 255, 0.7);
+  --popover: rgba(255, 255, 255, 0.85);
+  --muted: rgba(255, 255, 255, 0.6);
+  --secondary: rgba(255, 255, 255, 0.7);
+  --border: rgba(255, 255, 255, 0.3);
+}
+
+/* ========================================
+   COMPONENT-LEVEL OVERRIDES
+   Pill shapes for J3M design
+   ======================================== */
+
+/* Buttons - pill shape */
+button:where([class*="bg-primary"], [class*="bg-secondary"], [class*="bg-destructive"], [class*="border-input"]),
+[data-slot="button"] {
+  border-radius: var(--j3m-radius-full) !important;
+}
+
+/* Inputs - pill shape */
+input:where([class*="border-input"], [class*="rounded-md"]),
+[data-slot="input"] {
+  border-radius: var(--j3m-radius-full) !important;
+}
+
+/* Textarea - standard radius */
+textarea,
+[data-slot="textarea"] {
+  border-radius: var(--radius) !important;
+}
+
+/* Select - pill shape */
+[data-slot="select-trigger"] {
+  border-radius: var(--j3m-radius-full) !important;
+}
+
+/* Button Group - pill with squared middle (must override !important on base buttons) */
+[data-slot="button-group"] > * {
+  border-radius: 0 !important;
+}
+[data-slot="button-group"] > *:first-child {
+  border-top-left-radius: var(--j3m-radius-full) !important;
+  border-bottom-left-radius: var(--j3m-radius-full) !important;
+}
+[data-slot="button-group"] > *:last-child {
+  border-top-right-radius: var(--j3m-radius-full) !important;
+  border-bottom-right-radius: var(--j3m-radius-full) !important;
+}
+/* Single item in group - keep full pill */
+[data-slot="button-group"] > *:only-child {
+  border-radius: var(--j3m-radius-full) !important;
+}
+
+/* Tabs - pill shape */
+[data-slot="tabs-list"] {
+  border-radius: var(--j3m-radius-full) !important;
+}
+[data-slot="tabs-trigger"] {
+  border-radius: var(--j3m-radius-full) !important;
+}
+
+/* Menubar - pill shape */
+[data-slot="menubar"] {
+  border-radius: var(--j3m-radius-full) !important;
+}
+[data-slot="menubar-trigger"] {
+  border-radius: var(--j3m-radius-full) !important;
+}
+
+/* ========================================
+   GLASS UTILITY CLASSES
+   ======================================== */
+
+.glass-light {
+  background: var(--j3m-glass-light-subtle);
+  backdrop-filter: blur(var(--j3m-blur-lg));
+  -webkit-backdrop-filter: blur(var(--j3m-blur-lg));
+  border: 1px solid var(--j3m-stroke-white);
+  box-shadow: var(--j3m-glass-shadow-lg);
+}
+
+.glass-dark {
+  background: var(--j3m-glass-dark);
+  backdrop-filter: blur(var(--j3m-blur-md));
+  -webkit-backdrop-filter: blur(var(--j3m-blur-md));
+  border: 1px solid var(--j3m-stroke-light-10);
+  box-shadow: var(--j3m-glass-shadow-lg);
+}
+
+.glass-neutral {
+  background: var(--j3m-glass-neutral-subtle);
+  backdrop-filter: blur(var(--j3m-blur-lg));
+  -webkit-backdrop-filter: blur(var(--j3m-blur-lg));
+  border: 1px solid var(--j3m-stroke-primary-10);
+  box-shadow: var(--j3m-glass-shadow-lg);
+}
+
+.glass-primary {
+  background: var(--j3m-glass-primary);
+  backdrop-filter: blur(var(--j3m-blur-sm));
+  -webkit-backdrop-filter: blur(var(--j3m-blur-sm));
+  border: 1px solid var(--j3m-stroke-dark-10);
+  box-shadow: var(--j3m-glass-shadow-glow);
+}
+
+/* ========================================
+   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; }
+}
+
+@keyframes fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes fade-out {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+
+@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); }
+}
+
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+.animate-accordion-down {
+  animation: accordion-down 0.2s ease-out;
+}
 
-/* 2. Animations (keyframes for all shadcn components) */
-@import "./animations.css";
+.animate-accordion-up {
+  animation: accordion-up 0.2s ease-out;
+}
 
-/* 3. J3M Design Tokens (color scales, spacing, radii, glass effects) */
-@import "./tokens.css";
+.animate-in {
+  animation: fade-in 0.2s ease-out, zoom-in 0.2s ease-out;
+}
 
-/* 4. J3M Theme Overrides (replaces shadcn colors with J3M palette) */
-@import "./j3m-overrides.css";
+.animate-out {
+  animation: fade-out 0.2s ease-in, zoom-out 0.2s ease-in;
+}
 
-/* 5. Component-specific styles (toast, glass utilities) */
-@import "./theme.css";
+.animate-spin {
+  animation: spin 1s linear infinite;
+}

package/package.json

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