@j3m-quantum/ui 0.4.0 → 0.7.1

package/package.json

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

package/dist/styles/animations.css

@@ -1,370 +0,0 @@
-/* ========================================
-   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

@@ -1,130 +0,0 @@
-/* ========================================
-   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/j3m-overrides.css

@@ -1,132 +0,0 @@
-/* ========================================
-   J3M THEME OVERRIDES
-   
-   Overrides shadcn's default theme with J3M brand colors.
-   Uses direct values for maximum compatibility.
-   ======================================== */
-
-@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;
-
-  /* ========================================
-     POPOVER
-     ======================================== */
-  --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 - J3M Dark Theme
-   ======================================== */
-
-.dark {
-  --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/dist/styles/theme.css

@@ -1,59 +0,0 @@
-/* ========================================
-   J3M THEME OVERRIDES
-   
-   This file contains CSS variable overrides
-   that transform shadcn components into J3M styled components.
-   
-   Edit this file to customize the J3M theme.
-   ======================================== */
-
-@import "./tokens.css";
-
-/* ========================================
-   GLOBAL THEME OVERRIDES
-   ======================================== */
-
-/* Add your global theme overrides here */
-
-/* ========================================
-   COMPONENT-SPECIFIC OVERRIDES
-   Add custom styles for specific components
-   ======================================== */
-
-/* Toast/Sonner styles */
-[data-sonner-toast] {
-  background: var(--j3m-neutral-100) !important;
-  box-shadow: inset 0 0 0 1px var(--j3m-stroke-primary-350-50) !important;
-}
-
-[data-sonner-toast] [data-description] {
-  color: var(--j3m-neutral-800) !important;
-}
-
-/* ========================================
-   GLASS UTILITY CLASSES
-   ======================================== */
-
-.glass-light {
-  background: var(--j3m-glass-light);
-  backdrop-filter: blur(var(--j3m-blur-lg));
-  -webkit-backdrop-filter: blur(var(--j3m-blur-lg));
-  border: 1px solid var(--j3m-glass-border-light);
-  box-shadow: var(--j3m-glass-shadow-md);
-}
-
-.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);
-  backdrop-filter: blur(var(--j3m-blur-md));
-  -webkit-backdrop-filter: blur(var(--j3m-blur-md));
-  border: 1px solid var(--j3m-glass-border-dark);
-  box-shadow: var(--j3m-glass-shadow-sm);
-}