@j3m-quantum/ui 0.7.11 → 0.7.13

package/dist/styles/index.css

@@ -162,11 +162,11 @@
   --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-70: rgba(255, 255, 255, 0.8);
   --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-hover: rgba(255, 255, 255, 0.8);
   --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);
@@ -452,10 +452,11 @@
 .glass-context {
   --background: rgba(255, 255, 255, 0.8);
   --input: rgba(255, 255, 255, 0.3);
-  --card: rgba(255, 255, 255, 0.7);
+  --card: rgba(255, 255, 255, 0.8);
   --popover: rgba(255, 255, 255, 0.85);
   --muted: rgba(255, 255, 255, 0.6);
-  --secondary: rgba(255, 255, 255, 0.7);
+  --muted-foreground: rgba(0, 0, 0, 0.55);
+  --secondary: rgba(255, 255, 255, 0.8);
   --border: rgba(255, 255, 255, 0.3);
 }
 
@@ -543,26 +544,9 @@ textarea,
   border-radius: var(--j3m-radius-full) !important;
 }
 
-/* OTP Input Group - pill with squared middle */
-[data-slot="input-otp-group"] {
-  background: var(--background);
-  border: 1px solid var(--input);
-  border-radius: var(--j3m-radius-full) !important;
-  overflow: hidden;
-}
-[data-slot="input-otp-slot"] {
-  border-radius: 0 !important;
-  border: none !important;
-  border-right: 1px solid var(--input) !important;
-  box-shadow: none !important;
-}
-[data-slot="input-otp-slot"]:last-child {
-  border-right: none !important;
-}
-
 /* Native Select - pill shape */
 [data-slot="native-select"] {
-  border-radius: var(--j3m-radius-full) !important;
+  border-radius: 9999px !important;
 }
 
 /* ========================================
@@ -646,7 +630,7 @@ textarea,
 .glass-context [data-slot="input"],
 .glass-context textarea,
 .glass-context [data-slot="textarea"] {
-  background: rgba(255, 255, 255, 0.7) !important;
+  background: rgba(255, 255, 255, 0.8) !important;
   border-color: rgba(0, 0, 0, 0.15) !important;
   color: rgba(0, 0, 0, 0.85) !important;
 }
@@ -672,7 +656,7 @@ textarea,
 
 /* --- SELECT TRIGGER --- */
 .glass-context [data-slot="select-trigger"] {
-  background: rgba(255, 255, 255, 0.7) !important;
+  background: rgba(255, 255, 255, 0.8) !important;
   border-color: rgba(0, 0, 0, 0.15) !important;
   color: rgba(0, 0, 0, 0.85) !important;
 }
@@ -691,8 +675,9 @@ textarea,
 /* --- NATIVE SELECT --- */
 .glass-context select,
 .glass-context [data-slot="native-select"] {
-  background: rgba(255, 255, 255, 0.7) !important;
+  background: rgba(255, 255, 255, 0.8) !important;
   border-color: rgba(0, 0, 0, 0.15) !important;
+  border-radius: 9999px !important;
   color: rgba(0, 0, 0, 0.85) !important;
 }
 
@@ -702,19 +687,6 @@ textarea,
   --tw-ring-color: rgba(243, 108, 33, 0.3);
 }
 
-/* --- INPUT OTP --- */
-.glass-context [data-slot="input-otp-slot"],
-.glass-context [data-input-otp-slot] {
-  background: rgba(255, 255, 255, 0.7) !important;
-  border-color: rgba(0, 0, 0, 0.15) !important;
-  color: rgba(0, 0, 0, 0.85) !important;
-}
-
-.glass-context [data-slot="input-otp-slot"][data-active=true],
-.glass-context [data-input-otp-slot][data-active=true] {
-  border-color: var(--j3m-primary-300) !important;
-}
-
 /* --- BUTTONS --- */
 /* Default button hover in glass */
 .glass-context [data-slot="button"][data-variant="default"]:hover,
@@ -726,30 +698,30 @@ textarea,
 .glass-context [data-slot="button"][data-variant="outline"],
 .glass-context [data-slot="button"][data-variant="secondary"],
 .glass-context [data-slot="button"][data-variant="ghost"] {
-  background: rgba(255, 255, 255, 0.7) !important;
+  background: rgba(255, 255, 255, 0.8) !important;
   border-color: rgba(0, 0, 0, 0.15) !important;
   color: rgba(0, 0, 0, 0.8) !important;
 }
 
-/* Button hover: orange primary with white text */
+/* Button hover: default orange with white text */
 .glass-context [data-slot="button"][data-variant="outline"]:hover,
 .glass-context [data-slot="button"][data-variant="secondary"]:hover,
 .glass-context [data-slot="button"][data-variant="ghost"]:hover {
-  background: var(--j3m-primary-300) !important;
-  border-color: var(--j3m-primary-300) !important;
+  background: var(--j3m-primary-250) !important;
+  border-color: var(--j3m-primary-250) !important;
   color: #FFFFFF !important;
 }
 
 /* --- RADIO BUTTONS --- */
 .glass-context [data-slot="radio-group-item"],
 .glass-context [role="radio"] {
-  background: rgba(255, 255, 255, 0.7) !important;
+  background: rgba(255, 255, 255, 0.8) !important;
   border-color: rgba(0, 0, 0, 0.15) !important;
 }
 
 .glass-context [data-slot="radio-group-item"][data-state="checked"],
 .glass-context [role="radio"][data-state="checked"] {
-  background: rgba(255, 255, 255, 0.7) !important;
+  background: rgba(255, 255, 255, 0.8) !important;
   border-color: var(--j3m-primary-300) !important;
 }
 
@@ -761,7 +733,7 @@ textarea,
 /* --- CHECKBOX --- */
 .glass-context [data-slot="checkbox"],
 .glass-context [role="checkbox"] {
-  background: rgba(255, 255, 255, 0.7) !important;
+  background: rgba(255, 255, 255, 0.8) !important;
   border-color: rgba(0, 0, 0, 0.15) !important;
 }
 
@@ -780,14 +752,19 @@ textarea,
 
 .glass-context [data-slot="switch"][data-state="checked"],
 .glass-context [role="switch"][data-state="checked"] {
-  background: var(--j3m-primary-300) !important;
-  border-color: var(--j3m-primary-300) !important;
+  background: var(--j3m-primary-250) !important;
+  border-color: var(--j3m-primary-250) !important;
+}
+
+/* Switch thumb - always white */
+.glass-context [data-slot="switch-thumb"] {
+  background: #FFFFFF !important;
 }
 
 /* --- DATA TABLE --- */
 .glass-context table,
 .glass-context [data-slot="table"] {
-  background: rgba(255, 255, 255, 0.7) !important;
+  background: rgba(255, 255, 255, 0.8) !important;
 }
 
 .glass-context thead,
@@ -795,73 +772,113 @@ textarea,
   background: rgba(255, 255, 255, 0.5) !important;
 }
 
+.glass-context tfoot,
+.glass-context [data-slot="table-footer"] {
+  background: rgba(255, 255, 255, 0.8) !important;
+}
+
+.glass-context caption,
+.glass-context [data-slot="table-caption"] {
+  background: rgba(255, 255, 255, 0.8) !important;
+  margin-top: 0 !important;
+  padding: 0.75rem 0.5rem !important;
+  border-top: 1px solid rgba(0, 0, 0, 0.15) !important;
+}
+
 .glass-context th,
 .glass-context td {
-  border-color: rgba(0, 0, 0, 0.1) !important;
+  border-color: rgba(0, 0, 0, 0.15) !important;
   color: rgba(0, 0, 0, 0.85) !important;
 }
 
+.glass-context tr {
+  border-color: rgba(0, 0, 0, 0.15) !important;
+}
+
+/* --- SEPARATOR --- */
+.glass-context [data-slot="separator"],
+.glass-context hr {
+  background-color: rgba(0, 0, 0, 0.15) !important;
+  border-color: rgba(0, 0, 0, 0.15) !important;
+}
+
+/* --- SKELETON --- */
+/* Keep default orange pulsating animation */
+
 /* --- BADGE (outline) --- */
 .glass-context [data-slot="badge"][data-variant="outline"],
 .glass-context .badge-outline {
-  background: rgba(255, 255, 255, 0.7) !important;
+  background: rgba(255, 255, 255, 0.8) !important;
   border-color: rgba(0, 0, 0, 0.15) !important;
   color: rgba(0, 0, 0, 0.8) !important;
 }
 
 /* --- CALENDAR --- */
+/* Glass mode - same background as input boxes, keep default hover/selected states */
 .glass-context [data-slot="calendar"],
 .glass-context .rdp {
-  background: rgba(255, 255, 255, 0.7) !important;
-}
-
-.glass-context .rdp-day,
-.glass-context [data-slot="calendar-day"] {
-  color: rgba(0, 0, 0, 0.85) !important;
+  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;
+}
+
+/* Remove inner white background from calendar grid */
+.glass-context [data-slot="calendar"] table,
+.glass-context [data-slot="calendar"] tbody,
+.glass-context [data-slot="calendar"] thead,
+.glass-context [data-slot="calendar"] .rdp-months,
+.glass-context [data-slot="calendar"] .rdp-month,
+.glass-context [data-slot="calendar"] .rdp-month_grid,
+.glass-context [data-slot="calendar"] .rdp-weeks,
+.glass-context [data-slot="calendar"] .rdp-week,
+.glass-context .rdp table,
+.glass-context .rdp tbody,
+.glass-context .rdp thead,
+.glass-context .rdp-months,
+.glass-context .rdp-month,
+.glass-context .rdp-month_grid,
+.glass-context .rdp-weeks,
+.glass-context .rdp-week {
+  background: transparent !important;
+  background-color: transparent !important;
 }
 
-.glass-context .rdp-day:hover,
-.glass-context [data-slot="calendar-day"]:hover {
-  background: rgba(0, 0, 0, 0.1) !important;
+/* --- COLLAPSIBLE --- */
+.glass-context [data-slot="collapsible-content"] > *,
+.glass-context [data-state="open"] > [data-slot="collapsible-content"] > * {
+  background: rgba(255, 255, 255, 0.8) !important;
+  border-color: rgba(0, 0, 0, 0.15) !important;
 }
 
-.glass-context .rdp-day_selected,
-.glass-context [data-slot="calendar-day"][data-selected] {
-  background: var(--j3m-primary-300) !important;
-  color: #FFFFFF !important;
+/* --- EMPTY STATE --- */
+.glass-context [data-slot="empty"] {
+  background: rgba(255, 255, 255, 0.8) !important;
+  border: 2px dashed rgba(0, 0, 0, 0.25) !important;
+  border-radius: var(--j3m-radius-l) !important;
 }
 
-.glass-context .rdp-day_today,
-.glass-context [data-slot="calendar-day"][data-today] {
-  border-color: var(--j3m-primary-300) !important;
+/* --- ITEM --- */
+.glass-context [data-slot="item-group"] {
+  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;
+  overflow: hidden;
 }
 
-/* Calendar navigation buttons */
-.glass-context .rdp-nav_button,
-.glass-context [data-slot="calendar"] button {
-  background: rgba(255, 255, 255, 0.7) !important;
+.glass-context [data-slot="item"] {
+  background-color: transparent !important;
   border-color: rgba(0, 0, 0, 0.15) !important;
 }
 
-.glass-context .rdp-nav_button:hover,
-.glass-context [data-slot="calendar"] button:hover {
-  background: var(--j3m-primary-300) !important;
-  border-color: var(--j3m-primary-300) !important;
-  color: #FFFFFF !important;
-}
-
-/* --- COLLAPSIBLE --- */
-.glass-context [data-slot="collapsible-content"] > *,
-.glass-context [data-state="open"] > [data-slot="collapsible-content"] > * {
-  background: rgba(255, 255, 255, 0.7) !important;
-  border-color: rgba(0, 0, 0, 0.15) !important;
+.glass-context [data-slot="item-separator"] {
+  background-color: rgba(0, 0, 0, 0.15) !important;
 }
 
 /* --- NAVIGATION MENU --- */
 .glass-context [data-slot="navigation-menu-trigger"],
 .glass-context [data-slot="navigation-menu-link"] {
   border-radius: 9999px !important;
-  background: rgba(255, 255, 255, 0.7) !important;
+  background: rgba(255, 255, 255, 0.8) !important;
   border: 1px solid rgba(0, 0, 0, 0.15) !important;
 }
 
@@ -901,33 +918,33 @@ textarea,
 }
 
 .glass-context [data-slot="slider-range"] {
-  background: var(--j3m-primary-300) !important;
+  background: var(--j3m-primary-250) !important;
 }
 
 .glass-context [data-slot="slider-thumb"] {
   background: #FFFFFF !important;
-  border-color: var(--j3m-primary-300) !important;
+  border-color: var(--j3m-primary-250) !important;
 }
 
 /* --- TOGGLE / TOGGLE GROUP --- */
 .glass-context [data-slot="toggle"],
 .glass-context [data-slot="toggle-group-item"] {
-  background: rgba(255, 255, 255, 0.7) !important;
+  background: rgba(255, 255, 255, 0.8) !important;
   border-color: rgba(0, 0, 0, 0.15) !important;
   color: rgba(0, 0, 0, 0.8) !important;
 }
 
 .glass-context [data-slot="toggle"][data-state="on"],
 .glass-context [data-slot="toggle-group-item"][data-state="on"] {
-  background: var(--j3m-primary-300) !important;
-  border-color: var(--j3m-primary-300) !important;
+  background: var(--j3m-primary-250) !important;
+  border-color: var(--j3m-primary-250) !important;
   color: #FFFFFF !important;
 }
 
 .glass-context [data-slot="toggle"]:hover,
 .glass-context [data-slot="toggle-group-item"]:hover {
-  background: var(--j3m-primary-300) !important;
-  border-color: var(--j3m-primary-300) !important;
+  background: var(--j3m-primary-250) !important;
+  border-color: var(--j3m-primary-250) !important;
   color: #FFFFFF !important;
 }
 
@@ -976,7 +993,7 @@ textarea,
 
 /* --- ALERT --- */
 .glass-context [data-slot="alert"] {
-  background: rgba(255, 255, 255, 0.7) !important;
+  background: rgba(255, 255, 255, 0.8) !important;
   border-color: rgba(0, 0, 0, 0.15) !important;
 }
 
@@ -1001,11 +1018,15 @@ textarea,
 /* --- COMMAND / SEARCH INPUT --- */
 .glass-context [data-slot="command"] {
   background: transparent !important;
+  background-color: transparent !important;
   border: none !important;
+  box-shadow: none !important;
+  outline: none !important;
+  --tw-bg-opacity: 0 !important;
 }
 
 .glass-context [data-slot="command-input-wrapper"] {
-  background: rgba(255, 255, 255, 0.7) !important;
+  background: rgba(255, 255, 255, 0.8) !important;
   border: 1px solid rgba(0, 0, 0, 0.15) !important;
   border-radius: var(--j3m-radius-full) !important;
   padding-left: 1rem !important;
@@ -1026,21 +1047,40 @@ textarea,
   box-shadow: 0 0 0 3px rgba(243, 108, 33, 0.2) !important;
 }
 
+.glass-context [data-slot="command-list"] {
+  background: rgba(255, 255, 255, 0.7) !important;
+  border: 1px solid rgba(0, 0, 0, 0.15) !important;
+  border-radius: var(--j3m-radius-l) !important;
+  margin-top: 0.25rem !important;
+}
+
+.glass-context [data-slot="command-group"] {
+  background: transparent !important;
+}
+
+.glass-context [data-slot="command-item"] {
+  color: rgba(0, 0, 0, 0.85) !important;
+}
+
 .glass-context [data-slot="command-item"][data-selected=true] {
-  background: var(--j3m-primary-300) !important;
+  background: var(--j3m-primary-250) !important;
   color: #FFFFFF !important;
 }
 
+.glass-context [data-slot="command-separator"] {
+  background: rgba(0, 0, 0, 0.15) !important;
+}
+
 /* --- SCROLL AREA --- */
 .glass-context [data-slot="scroll-area"] {
-  background: rgba(255, 255, 255, 0.7) !important;
+  background: rgba(255, 255, 255, 0.8) !important;
   border: 1px solid rgba(0, 0, 0, 0.15) !important;
   border-radius: var(--radius) !important;
 }
 
 /* --- COLLAPSIBLE --- */
 .glass-context [data-slot="collapsible-trigger"] {
-  background: rgba(255, 255, 255, 0.7) !important;
+  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;

package/package.json

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