@j3m-quantum/ui 0.7.10 → 0.7.12

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);
@@ -223,7 +223,7 @@
   --ring: var(--j3m-primary-250);
 
   /* Sidebar */
-  --sidebar: var(--j3m-neutral-100);
+  --sidebar: var(--j3m-neutral-200);
   --sidebar-foreground: var(--j3m-neutral-900);
   --sidebar-primary: var(--j3m-primary-300);
   --sidebar-primary-foreground: #FFFFFF;
@@ -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);
 }
 
@@ -520,6 +521,34 @@ textarea,
   border-radius: var(--j3m-radius-full) !important;
 }
 
+/* Toggle Group - pill with squared middle (same as button group) */
+[data-slot="toggle-group"] {
+  background: var(--background);
+  border: 1px solid var(--input);
+  border-radius: var(--j3m-radius-full) !important;
+  overflow: hidden;
+}
+[data-slot="toggle-group-item"] {
+  border-radius: 0 !important;
+}
+[data-slot="toggle-group-item"]:first-child {
+  border-top-left-radius: var(--j3m-radius-full) !important;
+  border-bottom-left-radius: var(--j3m-radius-full) !important;
+}
+[data-slot="toggle-group-item"]:last-child {
+  border-top-right-radius: var(--j3m-radius-full) !important;
+  border-bottom-right-radius: var(--j3m-radius-full) !important;
+}
+/* Single item in toggle group - keep full pill */
+[data-slot="toggle-group-item"]:only-child {
+  border-radius: var(--j3m-radius-full) !important;
+}
+
+/* Native Select - pill shape */
+[data-slot="native-select"] {
+  border-radius: 9999px !important;
+}
+
 /* ========================================
    GLASS UTILITY CLASSES
    ======================================== */
@@ -601,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;
 }
@@ -627,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;
 }
@@ -646,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;
 }
 
@@ -657,23 +687,6 @@ textarea,
   --tw-ring-color: rgba(243, 108, 33, 0.3);
 }
 
-/* --- INPUT OTP --- */
-.glass-context [data-slot="input-otp-container"] {
-  background: transparent !important;
-}
-
-.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],
-.glass-context [data-input-otp-slot][data-active] {
-  border-color: var(--j3m-primary-300) !important;
-}
-
 /* --- BUTTONS --- */
 /* Default button hover in glass */
 .glass-context [data-slot="button"][data-variant="default"]:hover,
@@ -685,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;
 }
 
@@ -720,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;
 }
 
@@ -739,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,
@@ -754,16 +772,43 @@ 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;
 }
@@ -771,48 +816,76 @@ textarea,
 /* --- CALENDAR --- */
 .glass-context [data-slot="calendar"],
 .glass-context .rdp {
-  background: rgba(255, 255, 255, 0.7) !important;
+  background: rgba(255, 255, 255, 0.8) !important;
 }
 
+/* Remove inner white boxes around date grid */
+.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;
+  background: transparent !important;
+  border-radius: 9999px !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: rgba(0, 0, 0, 0.1) !important;
+  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-300) !important;
+  background: var(--j3m-primary-250) !important;
   color: #FFFFFF !important;
+  border-radius: 9999px !important;
 }
 
+/* Today indicator */
 .glass-context .rdp-day_today,
 .glass-context [data-slot="calendar-day"][data-today] {
-  border-color: var(--j3m-primary-300) !important;
+  border-color: var(--j3m-primary-250) !important;
 }
 
-/* Calendar navigation buttons */
+/* Calendar navigation buttons - transparent, no background */
 .glass-context .rdp-nav_button,
-.glass-context [data-slot="calendar"] button {
-  background: rgba(255, 255, 255, 0.7) !important;
-  border-color: rgba(0, 0, 0, 0.15) !important;
+.glass-context [data-slot="calendar"] button:not(.rdp-button) {
+  background: transparent !important;
+  border: none !important;
+  border-radius: 9999px !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;
+.glass-context [data-slot="calendar"] button:not(.rdp-button):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.7) !important;
+  background: rgba(255, 255, 255, 0.8) !important;
   border-color: rgba(0, 0, 0, 0.15) !important;
 }
 
@@ -820,7 +893,7 @@ textarea,
 .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;
 }
 
@@ -860,30 +933,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 --- */
-.glass-context [data-slot="toggle"] {
-  background: rgba(255, 255, 255, 0.7) !important;
+/* --- TOGGLE / TOGGLE GROUP --- */
+.glass-context [data-slot="toggle"],
+.glass-context [data-slot="toggle-group-item"] {
+  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"] {
-  background: var(--j3m-primary-300) !important;
-  border-color: var(--j3m-primary-300) !important;
+.glass-context [data-slot="toggle"][data-state="on"],
+.glass-context [data-slot="toggle-group-item"][data-state="on"] {
+  background: var(--j3m-primary-250) !important;
+  border-color: var(--j3m-primary-250) !important;
   color: #FFFFFF !important;
 }
 
-.glass-context [data-slot="toggle"]:hover {
-  background: var(--j3m-primary-300) !important;
-  border-color: var(--j3m-primary-300) !important;
+.glass-context [data-slot="toggle"]:hover,
+.glass-context [data-slot="toggle-group-item"]:hover {
+  background: var(--j3m-primary-250) !important;
+  border-color: var(--j3m-primary-250) !important;
   color: #FFFFFF !important;
 }
 
@@ -932,7 +1008,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;
 }
 
@@ -954,6 +1030,81 @@ textarea,
   backdrop-filter: blur(16px) !important;
 }
 
+/* --- COMMAND / SEARCH INPUT --- */
+.glass-context [data-slot="command"] {
+  background: transparent !important;
+  border: none !important;
+}
+
+.glass-context [data-slot="command-input-wrapper"] {
+  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;
+  padding-right: 1rem !important;
+}
+
+.glass-context [data-slot="command-input"] {
+  background: transparent !important;
+  color: rgba(0, 0, 0, 0.85) !important;
+}
+
+.glass-context [data-slot="command-input"]::placeholder {
+  color: rgba(0, 0, 0, 0.5) !important;
+}
+
+.glass-context [data-slot="command-input-wrapper"]:focus-within {
+  border-color: var(--j3m-primary-300) !important;
+  box-shadow: 0 0 0 3px rgba(243, 108, 33, 0.2) !important;
+}
+
+.glass-context [data-slot="command-item"][data-selected=true] {
+  background: var(--j3m-primary-300) !important;
+  color: #FFFFFF !important;
+}
+
+/* --- SCROLL AREA --- */
+.glass-context [data-slot="scroll-area"] {
+  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.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;
+}
+
+/* --- CARD (ensure frosted glass in glass context) --- */
+.glass-context [data-slot="card"]:not([class*="glass"]) {
+  background: var(--j3m-glass-frosted-card) !important;
+  backdrop-filter: blur(var(--j3m-blur-frosted)) !important;
+  -webkit-backdrop-filter: blur(var(--j3m-blur-frosted)) !important;
+  border: none !important;
+  box-shadow: var(--j3m-glass-shadow-md) !important;
+  position: relative;
+}
+
+.glass-context [data-slot="card"]:not([class*="glass"])::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  padding: 1px;
+  background: var(--j3m-glass-border-gradient);
+  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+  pointer-events: none;
+}
+
 /* ========================================
    TOAST/SONNER POSITIONING
    Position toasts at top-center of screen

package/package.json

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