@j3m-quantum/ui 0.7.10 → 0.7.11

package/dist/styles/index.css

@@ -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;
@@ -520,6 +520,51 @@ 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;
+}
+
+/* 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;
+}
+
 /* ========================================
    GLASS UTILITY CLASSES
    ======================================== */
@@ -658,10 +703,6 @@ textarea,
 }
 
 /* --- 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;
@@ -669,8 +710,8 @@ textarea,
   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] {
+.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;
 }
 
@@ -868,20 +909,23 @@ textarea,
   border-color: var(--j3m-primary-300) !important;
 }
 
-/* --- TOGGLE --- */
-.glass-context [data-slot="toggle"] {
+/* --- TOGGLE / TOGGLE GROUP --- */
+.glass-context [data-slot="toggle"],
+.glass-context [data-slot="toggle-group-item"] {
   background: rgba(255, 255, 255, 0.7) !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"][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;
   color: #FFFFFF !important;
 }
 
-.glass-context [data-slot="toggle"]:hover {
+.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;
   color: #FFFFFF !important;
@@ -954,6 +998,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.7) !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.7) !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;
+  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.11",
   "description": "J3M UI Component Library - themed shadcn/ui components with design tokens",
   "type": "module",
   "main": "./dist/index.cjs",