@j3m-quantum/ui 0.7.9 → 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
    ======================================== */
@@ -591,6 +636,471 @@ textarea,
   pointer-events: none;
 }
 
+/* ========================================
+   GLASS MODE COMPONENT OVERRIDES
+   Styling for components inside .glass-context
+   ======================================== */
+
+/* --- INPUT FIELDS --- */
+.glass-context input,
+.glass-context [data-slot="input"],
+.glass-context textarea,
+.glass-context [data-slot="textarea"] {
+  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 input::placeholder,
+.glass-context [data-slot="input"]::placeholder,
+.glass-context textarea::placeholder,
+.glass-context [data-slot="textarea"]::placeholder {
+  color: rgba(0, 0, 0, 0.5) !important;
+}
+
+.glass-context input:focus,
+.glass-context [data-slot="input"]:focus,
+.glass-context textarea:focus,
+.glass-context [data-slot="textarea"]:focus,
+.glass-context input:focus-visible,
+.glass-context [data-slot="input"]:focus-visible,
+.glass-context textarea:focus-visible,
+.glass-context [data-slot="textarea"]:focus-visible {
+  border-color: var(--j3m-primary-300) !important;
+  --tw-ring-color: rgba(243, 108, 33, 0.3);
+}
+
+/* --- SELECT TRIGGER --- */
+.glass-context [data-slot="select-trigger"] {
+  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="select-trigger"] [data-slot="select-value"] {
+  color: rgba(0, 0, 0, 0.85) !important;
+}
+
+.glass-context [data-slot="select-trigger"]:focus,
+.glass-context [data-slot="select-trigger"]:focus-visible,
+.glass-context [data-slot="select-trigger"][data-state="open"] {
+  border-color: var(--j3m-primary-300) !important;
+  --tw-ring-color: rgba(243, 108, 33, 0.3);
+}
+
+/* --- NATIVE SELECT --- */
+.glass-context select,
+.glass-context [data-slot="native-select"] {
+  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 select:focus,
+.glass-context [data-slot="native-select"]:focus {
+  border-color: var(--j3m-primary-300) !important;
+  --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,
+.glass-context [data-slot="button"]:not([data-variant]):hover {
+  background: var(--j3m-primary-350) !important;
+}
+
+/* Outline/Secondary/Ghost buttons - white fill, dark border */
+.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;
+  border-color: rgba(0, 0, 0, 0.15) !important;
+  color: rgba(0, 0, 0, 0.8) !important;
+}
+
+/* Button hover: orange primary 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;
+  color: #FFFFFF !important;
+}
+
+/* --- RADIO BUTTONS --- */
+.glass-context [data-slot="radio-group-item"],
+.glass-context [role="radio"] {
+  background: rgba(255, 255, 255, 0.7) !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;
+  border-color: var(--j3m-primary-300) !important;
+}
+
+.glass-context [data-slot="radio-group-item"][data-state="checked"] span,
+.glass-context [role="radio"][data-state="checked"] span {
+  background: var(--j3m-primary-300) !important;
+}
+
+/* --- CHECKBOX --- */
+.glass-context [data-slot="checkbox"],
+.glass-context [role="checkbox"] {
+  background: rgba(255, 255, 255, 0.7) !important;
+  border-color: rgba(0, 0, 0, 0.15) !important;
+}
+
+.glass-context [data-slot="checkbox"][data-state="checked"],
+.glass-context [role="checkbox"][data-state="checked"] {
+  background: var(--j3m-primary-300) !important;
+  border-color: var(--j3m-primary-300) !important;
+}
+
+/* --- SWITCH --- */
+.glass-context [data-slot="switch"],
+.glass-context [role="switch"] {
+  background: rgba(255, 255, 255, 0.5) !important;
+  border-color: rgba(0, 0, 0, 0.15) !important;
+}
+
+.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;
+}
+
+/* --- DATA TABLE --- */
+.glass-context table,
+.glass-context [data-slot="table"] {
+  background: rgba(255, 255, 255, 0.7) !important;
+}
+
+.glass-context thead,
+.glass-context [data-slot="table-header"] {
+  background: rgba(255, 255, 255, 0.5) !important;
+}
+
+.glass-context th,
+.glass-context td {
+  border-color: rgba(0, 0, 0, 0.1) !important;
+  color: rgba(0, 0, 0, 0.85) !important;
+}
+
+/* --- BADGE (outline) --- */
+.glass-context [data-slot="badge"][data-variant="outline"],
+.glass-context .badge-outline {
+  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;
+}
+
+/* --- CALENDAR --- */
+.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;
+}
+
+.glass-context .rdp-day:hover,
+.glass-context [data-slot="calendar-day"]:hover {
+  background: rgba(0, 0, 0, 0.1) !important;
+}
+
+.glass-context .rdp-day_selected,
+.glass-context [data-slot="calendar-day"][data-selected] {
+  background: var(--j3m-primary-300) !important;
+  color: #FFFFFF !important;
+}
+
+.glass-context .rdp-day_today,
+.glass-context [data-slot="calendar-day"][data-today] {
+  border-color: var(--j3m-primary-300) !important;
+}
+
+/* Calendar navigation buttons */
+.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 .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;
+}
+
+/* --- 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;
+  border: 1px solid rgba(0, 0, 0, 0.15) !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;
+  color: #FFFFFF !important;
+}
+
+/* --- TABS --- */
+.glass-context [data-slot="tabs-list"] {
+  background: rgba(255, 255, 255, 0.5) !important;
+}
+
+.glass-context [data-slot="tabs-trigger"] {
+  color: rgba(0, 0, 0, 0.7) !important;
+}
+
+.glass-context [data-slot="tabs-trigger"][data-state="active"] {
+  background: rgba(255, 255, 255, 0.9) !important;
+  color: rgba(0, 0, 0, 0.9) !important;
+}
+
+/* --- ACCORDION --- */
+.glass-context [data-slot="accordion-item"] {
+  border-color: rgba(0, 0, 0, 0.1) !important;
+}
+
+.glass-context [data-slot="accordion-trigger"] {
+  color: rgba(0, 0, 0, 0.85) !important;
+}
+
+/* --- SLIDER --- */
+.glass-context [data-slot="slider-track"] {
+  background: rgba(255, 255, 255, 0.5) !important;
+}
+
+.glass-context [data-slot="slider-range"] {
+  background: var(--j3m-primary-300) !important;
+}
+
+.glass-context [data-slot="slider-thumb"] {
+  background: #FFFFFF !important;
+  border-color: var(--j3m-primary-300) !important;
+}
+
+/* --- 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-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-group-item"]:hover {
+  background: var(--j3m-primary-300) !important;
+  border-color: var(--j3m-primary-300) !important;
+  color: #FFFFFF !important;
+}
+
+/* --- DROPDOWN MENU --- */
+.glass-context [data-slot="dropdown-menu-content"],
+.glass-context [role="menu"] {
+  background: rgba(255, 255, 255, 0.9) !important;
+  backdrop-filter: blur(12px) !important;
+  border-color: rgba(0, 0, 0, 0.15) !important;
+}
+
+.glass-context [data-slot="dropdown-menu-item"],
+.glass-context [role="menuitem"] {
+  color: rgba(0, 0, 0, 0.85) !important;
+}
+
+.glass-context [data-slot="dropdown-menu-item"]:hover,
+.glass-context [role="menuitem"]:hover,
+.glass-context [data-slot="dropdown-menu-item"]:focus,
+.glass-context [role="menuitem"]:focus {
+  background: var(--j3m-primary-300) !important;
+  color: #FFFFFF !important;
+}
+
+/* --- POPOVER --- */
+.glass-context [data-slot="popover-content"] {
+  background: rgba(255, 255, 255, 0.9) !important;
+  backdrop-filter: blur(12px) !important;
+  border-color: rgba(0, 0, 0, 0.15) !important;
+}
+
+/* --- TOOLTIP --- */
+.glass-context [data-slot="tooltip-content"] {
+  background: rgba(0, 0, 0, 0.85) !important;
+  color: #FFFFFF !important;
+}
+
+/* --- PROGRESS --- */
+.glass-context [data-slot="progress"] {
+  background: rgba(255, 255, 255, 0.5) !important;
+}
+
+.glass-context [data-slot="progress-indicator"] {
+  background: var(--j3m-primary-300) !important;
+}
+
+/* --- ALERT --- */
+.glass-context [data-slot="alert"] {
+  background: rgba(255, 255, 255, 0.7) !important;
+  border-color: rgba(0, 0, 0, 0.15) !important;
+}
+
+/* --- SHEET --- */
+.glass-context [data-slot="sheet-content"] {
+  background: rgba(255, 255, 255, 0.95) !important;
+  backdrop-filter: blur(16px) !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;
+}
+
+/* --- DIALOG --- */
+.glass-context [data-slot="dialog-content"] {
+  background: rgba(255, 255, 255, 0.95) !important;
+  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
+   ======================================== */
+
+[data-sonner-toaster],
+.sonner-toast-wrapper {
+  --toast-position: top-center;
+}
+
+[data-sonner-toaster][data-position="top-center"],
+.sonner-toaster[data-position="top-center"] {
+  top: 1rem !important;
+  left: 50% !important;
+  right: auto !important;
+  bottom: auto !important;
+  transform: translateX(-50%) !important;
+}
+
+/* Glass mode toast styling */
+.glass-context [data-sonner-toast],
+.glass-context .sonner-toast {
+  background: rgba(255, 255, 255, 0.95) !important;
+  backdrop-filter: blur(12px) !important;
+  border-color: rgba(0, 0, 0, 0.15) !important;
+  color: rgba(0, 0, 0, 0.85) !important;
+}
+
 /* ========================================
    ANIMATIONS (tw-animate-css compatible)
    Composable animation system using CSS variables

package/package.json

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