@j3m-quantum/ui 0.7.12 → 0.7.13

package/dist/styles/index.css

@@ -814,79 +814,64 @@ textarea,
 }
 
 /* --- 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.8) !important;
-}
-
-/* Remove inner white boxes around date grid */
+  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-table,
-.glass-context .rdp-tbody,
-.glass-context .rdp-row,
-.glass-context .rdp-cell {
-  background: transparent !important;
-}
-
-/* Day cells - only circular */
-.glass-context .rdp-day,
-.glass-context [data-slot="calendar-day"] {
-  color: rgba(0, 0, 0, 0.85) !important;
+.glass-context .rdp-month_grid,
+.glass-context .rdp-weeks,
+.glass-context .rdp-week {
   background: transparent !important;
-  border-radius: 9999px !important;
+  background-color: transparent !important;
 }
 
-/* Day button inside - circular hover with orange */
-.glass-context .rdp-day button,
-.glass-context .rdp-button,
-.glass-context [data-slot="calendar-day"] button {
-  border-radius: 9999px !important;
-  background: transparent !important;
-}
-
-.glass-context .rdp-day:hover,
-.glass-context .rdp-day button:hover,
-.glass-context .rdp-button:hover,
-.glass-context [data-slot="calendar-day"]:hover {
-  background: var(--j3m-primary-250) !important;
-  color: #FFFFFF !important;
-  border-radius: 9999px !important;
-}
-
-/* Selected date - orange with white text */
-.glass-context .rdp-day_selected,
-.glass-context .rdp-day_selected button,
-.glass-context [data-slot="calendar-day"][data-selected] {
-  background: var(--j3m-primary-250) !important;
-  color: #FFFFFF !important;
-  border-radius: 9999px !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;
 }
 
-/* Today indicator */
-.glass-context .rdp-day_today,
-.glass-context [data-slot="calendar-day"][data-today] {
-  border-color: var(--j3m-primary-250) !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;
 }
 
-/* Calendar navigation buttons - transparent, no background */
-.glass-context .rdp-nav_button,
-.glass-context [data-slot="calendar"] button:not(.rdp-button) {
-  background: transparent !important;
-  border: none !important;
-  border-radius: 9999px !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;
 }
 
-.glass-context .rdp-nav_button:hover,
-.glass-context [data-slot="calendar"] button:not(.rdp-button):hover {
-  background: rgba(0, 0, 0, 0.1) !important;
+.glass-context [data-slot="item"] {
+  background-color: transparent !important;
+  border-color: rgba(0, 0, 0, 0.15) !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 [data-slot="item-separator"] {
+  background-color: rgba(0, 0, 0, 0.15) !important;
 }
 
 /* --- NAVIGATION MENU --- */
@@ -1033,7 +1018,11 @@ 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"] {
@@ -1058,11 +1047,30 @@ 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.8) !important;

package/package.json

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