@j3m-quantum/ui 0.7.13 → 0.8.2

package/dist/styles/index.css

@@ -233,11 +233,11 @@
   --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);
+  --chart-1: var(--j3m-primary-250);
+  --chart-2: var(--j3m-primary-200);
+  --chart-3: var(--j3m-primary-300);
+  --chart-4: var(--j3m-primary-100);
+  --chart-5: var(--j3m-primary-350);
 
   /* Global Radius */
   --radius: 12px;
@@ -483,11 +483,12 @@ textarea,
   border-radius: var(--radius) !important;
 }
 
-/* Select - pill shape */
+/* Select - pill shape trigger and rounded content */
 [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;
@@ -875,17 +876,56 @@ textarea,
 }
 
 /* --- NAVIGATION MENU --- */
-.glass-context [data-slot="navigation-menu-trigger"],
-.glass-context [data-slot="navigation-menu-link"] {
-  border-radius: 9999px !important;
+/* Solid mode - orange gradient hover */
+[data-slot="navigation-menu-link"]:hover,
+[data-slot="navigation-menu-link"]:focus {
+  background: linear-gradient(135deg, var(--j3m-primary-200) 0%, var(--j3m-primary-250) 50%, var(--j3m-primary-300) 100%) !important;
+  color: #FFFFFF !important;
+}
+
+[data-slot="navigation-menu-link"]:hover *,
+[data-slot="navigation-menu-link"]:focus * {
+  color: #FFFFFF !important;
+}
+
+/* Glass mode - default orange hover, bright text */
+.glass-context [data-slot="navigation-menu-content"] a:hover,
+.glass-context [data-slot="navigation-menu-content"] a:focus {
+  background: var(--j3m-primary-250) !important;
+  color: #FFFFFF !important;
+}
+
+.glass-context [data-slot="navigation-menu-content"] a:hover *,
+.glass-context [data-slot="navigation-menu-content"] a:focus * {
+  color: #FFFFFF !important;
+}
+
+/* --- MENUBAR --- */
+.glass-context [data-slot="menubar"] {
   background: rgba(255, 255, 255, 0.8) !important;
   border: 1px solid rgba(0, 0, 0, 0.15) !important;
+  border-radius: var(--j3m-radius-l) !important;
 }
 
-.glass-context [data-slot="navigation-menu-trigger"]:hover,
-.glass-context [data-slot="navigation-menu-link"]:hover {
-  background: var(--j3m-primary-300) !important;
-  border-color: var(--j3m-primary-300) !important;
+.glass-context [data-slot="menubar-trigger"] {
+  color: rgba(0, 0, 0, 0.85) !important;
+}
+
+.glass-context [data-slot="menubar-trigger"]:hover,
+.glass-context [data-slot="menubar-trigger"][data-state="open"] {
+  background: var(--j3m-primary-250) !important;
+  color: #FFFFFF !important;
+}
+
+.glass-context [data-slot="menubar-content"] {
+  background: rgba(255, 255, 255, 0.9) !important;
+  backdrop-filter: blur(12px) !important;
+  border: 1px solid rgba(0, 0, 0, 0.15) !important;
+}
+
+.glass-context [data-slot="menubar-item"]:hover,
+.glass-context [data-slot="menubar-item"]:focus {
+  background: var(--j3m-primary-250) !important;
   color: #FFFFFF !important;
 }
 
@@ -965,7 +1005,7 @@ textarea,
 .glass-context [role="menuitem"]:hover,
 .glass-context [data-slot="dropdown-menu-item"]:focus,
 .glass-context [role="menuitem"]:focus {
-  background: var(--j3m-primary-300) !important;
+  background: var(--j3m-primary-250) !important;
   color: #FFFFFF !important;
 }
 
@@ -988,7 +1028,7 @@ textarea,
 }
 
 .glass-context [data-slot="progress-indicator"] {
-  background: var(--j3m-primary-300) !important;
+  background: var(--j3m-primary-250) !important;
 }
 
 /* --- ALERT --- */
@@ -1001,12 +1041,15 @@ textarea,
 .glass-context [data-slot="sheet-content"] {
   background: rgba(255, 255, 255, 0.95) !important;
   backdrop-filter: blur(16px) !important;
+  padding-left: 1.5rem !important;
+  padding-right: 1.5rem !important;
 }
 
-.glass-context [data-slot="sheet-content"] input,
-.glass-context [data-slot="sheet-content"] [data-slot="input"] {
-  margin-left: 0 !important;
-  margin-right: 0 !important;
+.glass-context [data-slot="sheet-header"],
+.glass-context [data-slot="sheet-footer"],
+.glass-context [data-slot="sheet-body"] {
+  padding-left: 0 !important;
+  padding-right: 0 !important;
 }
 
 /* --- DIALOG --- */
@@ -1016,6 +1059,11 @@ textarea,
 }
 
 /* --- COMMAND / SEARCH INPUT --- */
+/* Solid mode - icon color on selected */
+[data-slot="command-item"][data-selected=true] svg {
+  color: var(--accent-foreground) !important;
+}
+
 .glass-context [data-slot="command"] {
   background: transparent !important;
   background-color: transparent !important;
@@ -1067,6 +1115,10 @@ textarea,
   color: #FFFFFF !important;
 }
 
+.glass-context [data-slot="command-item"][data-selected=true] svg {
+  color: #FFFFFF !important;
+}
+
 .glass-context [data-slot="command-separator"] {
   background: rgba(0, 0, 0, 0.15) !important;
 }
@@ -1078,15 +1130,19 @@ textarea,
   border-radius: var(--radius) !important;
 }
 
+.glass-context [data-slot="scroll-area-thumb"] {
+  background: rgba(0, 0, 0, 0.5) !important;
+}
+
+.glass-context [data-slot="scroll-area-thumb"]:hover {
+  background: rgba(0, 0, 0, 0.7) !important;
+}
+
 /* --- COLLAPSIBLE --- */
+/* Trigger button - transparent, no fill */
 .glass-context [data-slot="collapsible-trigger"] {
-  background: rgba(255, 255, 255, 0.8) !important;
-  border: 1px solid rgba(0, 0, 0, 0.15) !important;
-  border-radius: var(--radius) !important;
-  padding: 0.5rem 1rem !important;
-  width: 100% !important;
-  text-align: left !important;
-  color: rgba(0, 0, 0, 0.85) !important;
+  background: transparent !important;
+  border: none !important;
 }
 
 /* --- CARD (ensure frosted glass in glass context) --- */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@j3m-quantum/ui",
-  "version": "0.7.13",
+  "version": "0.8.2",
   "description": "J3M UI Component Library - themed shadcn/ui components with design tokens",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -77,7 +77,6 @@
     "cmdk": "^1.0.0",
     "date-fns": "^4.0.0",
     "embla-carousel-react": "^8.0.0",
-    "input-otp": "^1.0.0",
     "lucide-react": "^0.400.0",
     "react-day-picker": "^9.0.0",
     "react-hook-form": "^7.0.0",