@optilogic/core 1.3.4 → 1.3.6

package/dist/index.d.cts

@@ -2374,6 +2374,7 @@ interface Theme {
     toggleTrack?: string;
     toggleTrackForeground?: string;
     inputHover?: string;
+    hover?: string;
     /** Chart colors */
     chart1: string;
     chart2: string;
@@ -2435,6 +2436,7 @@ interface ThemeHSL extends Omit<Theme, keyof ThemeColorFields> {
     toggleTrack?: string;
     toggleTrackForeground?: string;
     inputHover?: string;
+    hover?: string;
     chart1: string;
     chart2: string;
     chart3: string;
@@ -2479,6 +2481,7 @@ type ThemeColorFields = {
     toggleTrack?: string;
     toggleTrackForeground?: string;
     inputHover?: string;
+    hover?: string;
     chart1: string;
     chart2: string;
     chart3: string;

package/dist/index.d.ts

@@ -2374,6 +2374,7 @@ interface Theme {
     toggleTrack?: string;
     toggleTrackForeground?: string;
     inputHover?: string;
+    hover?: string;
     /** Chart colors */
     chart1: string;
     chart2: string;
@@ -2435,6 +2436,7 @@ interface ThemeHSL extends Omit<Theme, keyof ThemeColorFields> {
     toggleTrack?: string;
     toggleTrackForeground?: string;
     inputHover?: string;
+    hover?: string;
     chart1: string;
     chart2: string;
     chart3: string;
@@ -2479,6 +2481,7 @@ type ThemeColorFields = {
     toggleTrack?: string;
     toggleTrackForeground?: string;
     inputHover?: string;
+    hover?: string;
     chart1: string;
     chart2: string;
     chart3: string;

package/dist/index.js

@@ -34,12 +34,12 @@ var buttonVariants = cva(
   {
     variants: {
       variant: {
-        default: "bg-muted text-foreground hover:bg-accent hover:text-accent-foreground disabled:opacity-50 disabled:text-muted-foreground",
+        default: "bg-muted text-foreground hover:bg-hover disabled:opacity-50 disabled:text-muted-foreground",
         primary: "bg-accent text-accent-foreground shadow hover:shadow-md disabled:opacity-50",
         destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90 hover:shadow-md disabled:opacity-50",
-        outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground disabled:opacity-50 disabled:bg-muted/20 disabled:text-muted-foreground",
+        outline: "border border-input bg-background shadow-sm hover:bg-hover disabled:opacity-50 disabled:bg-muted/20 disabled:text-muted-foreground",
         secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80 disabled:opacity-50",
-        ghost: "text-foreground hover:bg-accent hover:text-accent-foreground disabled:text-muted-foreground disabled:bg-muted/30 disabled:opacity-70",
+        ghost: "text-foreground hover:bg-hover disabled:text-muted-foreground disabled:bg-muted/30 disabled:opacity-70",
         link: "text-primary underline-offset-4 hover:underline disabled:opacity-50 disabled:text-muted-foreground"
       },
       size: {
@@ -351,7 +351,7 @@ var SelectItem = React20.forwardRef(({ className, children, ...props }, ref) =>
   {
     ref,
     className: cn(
-      "relative flex w-full cursor-default select-none items-start rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex w-full cursor-default select-none items-start rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-hover data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     ),
     ...props,
@@ -505,10 +505,10 @@ var accordionTriggerVariants = cva(
     variants: {
       variant: {
         default: "hover:text-foreground/80",
-        bordered: "px-4 hover:bg-muted/50",
-        card: "px-4 hover:bg-muted/30",
-        filled: "px-4 hover:bg-muted",
-        ghost: "px-2 rounded-md hover:bg-muted/50"
+        bordered: "px-4 hover:bg-hover",
+        card: "px-4 hover:bg-hover",
+        filled: "px-4 hover:bg-hover",
+        ghost: "px-2 rounded-md hover:bg-hover"
       }
     },
     defaultVariants: {
@@ -685,7 +685,7 @@ var DropdownMenuSubTrigger = React20.forwardRef(({ className, inset, children, .
     ref,
     className: cn(
       "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none",
-      "focus:bg-accent",
+      "focus:bg-hover",
       "data-[state=open]:bg-accent",
       inset && "pl-8",
       className
@@ -739,7 +739,7 @@ var DropdownMenuItem = React20.forwardRef(({ className, inset, destructive, ...p
     ref,
     className: cn(
       "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors",
-      "focus:bg-accent focus:text-accent-foreground",
+      "focus:bg-hover",
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       inset && "pl-8",
       destructive && "text-destructive focus:text-destructive",
@@ -755,7 +755,7 @@ var DropdownMenuCheckboxItem = React20.forwardRef(({ className, children, checke
     ref,
     className: cn(
       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors",
-      "focus:bg-accent focus:text-accent-foreground",
+      "focus:bg-hover",
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     ),
@@ -774,7 +774,7 @@ var DropdownMenuRadioItem = React20.forwardRef(({ className, children, ...props
     ref,
     className: cn(
       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors",
-      "focus:bg-accent focus:text-accent-foreground",
+      "focus:bg-hover",
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     ),
@@ -1526,7 +1526,7 @@ var TableRow = React20.forwardRef(
     {
       ref,
       className: cn(
-        "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+        "border-b transition-colors hover:bg-hover data-[state=selected]:bg-muted",
         className
       ),
       ...props
@@ -2658,8 +2658,7 @@ function Chip({
         // Clickable state
         isClickable && [
           "cursor-pointer",
-          "hover:bg-accent hover:text-accent-foreground",
-          "hover:border-accent",
+          "hover:bg-hover",
           "hover:shadow-md"
         ],
         // Non-clickable state
@@ -2819,7 +2818,7 @@ function Calendar({
                   /* @__PURE__ */ jsx(
                     SelectTrigger,
                     {
-                      className: "h-7 w-[110px] text-sm font-medium border-none shadow-none hover:bg-accent focus:ring-0 px-2",
+                      className: "h-7 w-[110px] text-sm font-medium border-none shadow-none hover:bg-hover focus:ring-0 px-2",
                       "aria-label": "Select month",
                       children: /* @__PURE__ */ jsx(SelectValue, { children: MONTHS[month] })
                     }
@@ -2841,7 +2840,7 @@ function Calendar({
                   /* @__PURE__ */ jsx(
                     SelectTrigger,
                     {
-                      className: "h-7 w-[70px] text-sm font-medium border-none shadow-none hover:bg-accent focus:ring-0 px-2",
+                      className: "h-7 w-[70px] text-sm font-medium border-none shadow-none hover:bg-hover focus:ring-0 px-2",
                       "aria-label": "Select year",
                       children: /* @__PURE__ */ jsx(SelectValue, { children: year })
                     }
@@ -3492,7 +3491,7 @@ function HeaderCell({
               "flex items-center gap-1 px-3 py-2 h-full",
               isResizable && "pr-6",
               // Extra padding to create space for resize handle
-              isSortable && "cursor-pointer hover:bg-accent/10",
+              isSortable && "cursor-pointer hover:bg-hover",
               column.align === "center" && "justify-center",
               column.align === "right" && "justify-end"
             ),
@@ -3563,7 +3562,7 @@ function HeaderCell({
             className: cn(
               "absolute top-0 right-0 w-4 h-full cursor-col-resize z-10",
               "flex items-center justify-center",
-              "hover:bg-accent/50 transition-colors",
+              "hover:bg-hover transition-colors",
               "group",
               isResizing && "bg-accent"
             ),
@@ -5193,7 +5192,7 @@ function DataGrid({
                             "absolute top-0 left-0 transition-colors border-b border-border",
                             onRowClick && "cursor-pointer",
                             isSelected && "bg-accent/20",
-                            !isSelected && "hover:bg-muted/50",
+                            !isSelected && "hover:bg-hover",
                             rowClassName && rowClassName(row, virtualRow.index)
                           ),
                           style: {
@@ -5389,7 +5388,7 @@ function DataGrid({
                   "flex border-b border-border transition-colors",
                   onRowClick && "cursor-pointer",
                   isSelected && "bg-accent/20",
-                  !isSelected && "hover:bg-muted/50",
+                  !isSelected && "hover:bg-hover",
                   rowClassName && rowClassName(row, rowIndex)
                 ),
                 style: { width: tableWidth ? `${tableWidth}px` : "100%" },
@@ -5638,8 +5637,8 @@ function Autocomplete({
       onClick: () => handleSelect(option.value),
       className: cn(
         "relative flex w-full cursor-pointer select-none items-start gap-2 rounded-sm px-2 py-1.5 text-sm outline-none",
-        "hover:bg-accent hover:text-accent-foreground",
-        "focus:bg-accent focus:text-accent-foreground",
+        "hover:bg-hover",
+        "focus:bg-hover",
         option.disabled && "pointer-events-none opacity-50",
         value === option.value && "bg-accent/50"
       ),
@@ -5679,7 +5678,7 @@ function Autocomplete({
                 role: "button",
                 tabIndex: -1,
                 onClick: handleClear,
-                className: "rounded-sm hover:bg-muted p-0.5",
+                className: "rounded-sm hover:bg-hover p-0.5",
                 children: /* @__PURE__ */ jsx(X, { className: "h-3.5 w-3.5 text-muted-foreground" })
               }
             ),
@@ -5713,7 +5712,7 @@ function Autocomplete({
               {
                 type: "button",
                 onClick: () => setSearch(""),
-                className: "p-1 hover:bg-muted rounded-sm",
+                className: "p-1 hover:bg-hover rounded-sm",
                 children: /* @__PURE__ */ jsx(X, { className: "h-3.5 w-3.5 text-muted-foreground" })
               }
             )
@@ -5844,7 +5843,7 @@ function MultiSelect({
       onClick: () => handleToggle(option.value),
       className: cn(
         "relative flex w-full cursor-pointer select-none items-start gap-2 rounded-sm px-2 py-1.5 text-sm outline-none",
-        "hover:bg-accent hover:text-accent-foreground",
+        "hover:bg-hover",
         option.disabled && "pointer-events-none opacity-50"
       ),
       children: [
@@ -5894,7 +5893,7 @@ function MultiSelect({
                       role: "button",
                       tabIndex: -1,
                       onClick: (e) => handleRemove(safeValue[i], e),
-                      className: "rounded-sm hover:bg-foreground/10 p-0.5",
+                      className: "rounded-sm hover:bg-hover p-0.5",
                       children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" })
                     }
                   )
@@ -5914,7 +5913,7 @@ function MultiSelect({
                 role: "button",
                 tabIndex: -1,
                 onClick: handleClearAll,
-                className: "rounded-sm hover:bg-muted p-0.5",
+                className: "rounded-sm hover:bg-hover p-0.5",
                 children: /* @__PURE__ */ jsx(X, { className: "h-3.5 w-3.5 text-muted-foreground" })
               }
             ),
@@ -5948,7 +5947,7 @@ function MultiSelect({
               {
                 type: "button",
                 onClick: () => setSearch(""),
-                className: "p-1 hover:bg-muted rounded-sm",
+                className: "p-1 hover:bg-hover rounded-sm",
                 children: /* @__PURE__ */ jsx(X, { className: "h-3.5 w-3.5 text-muted-foreground" })
               }
             )
@@ -5962,7 +5961,7 @@ function MultiSelect({
                   onClick: handleSelectAll,
                   className: cn(
                     "relative flex w-full cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none",
-                    "hover:bg-accent hover:text-accent-foreground"
+                    "hover:bg-hover"
                   ),
                   children: [
                     /* @__PURE__ */ jsx(
@@ -6134,8 +6133,8 @@ function Combobox({
       onClick: () => handleSelect(option.value),
       className: cn(
         "relative flex w-full cursor-pointer select-none items-start gap-2 rounded-sm px-2 py-1.5 text-sm outline-none",
-        "hover:bg-accent hover:text-accent-foreground",
-        "focus:bg-accent focus:text-accent-foreground",
+        "hover:bg-hover",
+        "focus:bg-hover",
         option.disabled && "pointer-events-none opacity-50",
         value === option.value && "bg-accent/50"
       ),
@@ -6189,7 +6188,7 @@ function Combobox({
                 tabIndex: -1,
                 onMouseDown: (e) => e.preventDefault(),
                 onClick: handleClear,
-                className: "rounded-sm hover:bg-muted p-0.5",
+                className: "rounded-sm hover:bg-hover p-0.5",
                 children: /* @__PURE__ */ jsx(X, { className: "h-3.5 w-3.5 text-muted-foreground" })
               }
             ),
@@ -6242,41 +6241,41 @@ var iconButtonVariants = cva(
     variants: {
       variant: {
         /**
-         * Default - subtle background with accent on hover
+         * Default - subtle hover tint
          */
         default: [
           "bg-transparent text-muted-foreground",
-          "hover:bg-accent hover:text-accent-foreground",
+          "hover:bg-hover",
           "border border-transparent"
         ],
         /**
-         * Ghost - no background, accent on hover
+         * Ghost - no background, subtle hover tint
          */
         ghost: [
           "bg-transparent text-muted-foreground",
-          "hover:bg-accent hover:text-accent-foreground"
+          "hover:bg-hover"
         ],
         /**
-         * Outline - border with accent on hover
+         * Outline - bordered, subtle hover tint
          */
         outline: [
           "bg-transparent text-muted-foreground",
           "border border-border",
-          "hover:bg-accent hover:text-accent-foreground hover:border-accent"
+          "hover:bg-hover"
         ],
         /**
-         * Filled - accent background
+         * Filled - accent background (branded; darkens on hover)
          */
         filled: [
           "bg-accent text-accent-foreground",
           "hover:bg-accent/90 hover:shadow-sm"
         ],
         /**
-         * Muted - muted background with accent on hover
+         * Muted - muted background with subtle hover tint
          */
         muted: [
           "bg-muted text-muted-foreground",
-          "hover:bg-accent hover:text-accent-foreground"
+          "hover:bg-hover"
         ]
       },
       size: {
@@ -6693,6 +6692,7 @@ function themeToHsl(theme) {
     toggleTrack: theme.toggleTrack ? hexToHsl(theme.toggleTrack) : void 0,
     toggleTrackForeground: theme.toggleTrackForeground ? hexToHsl(theme.toggleTrackForeground) : void 0,
     inputHover: theme.inputHover ? hexToHsl(theme.inputHover) : void 0,
+    hover: theme.hover ? hexToHsl(theme.hover) : void 0,
     chart1: hexToHsl(theme.chart1),
     chart2: hexToHsl(theme.chart2),
     chart3: hexToHsl(theme.chart3),
@@ -6716,6 +6716,11 @@ function deriveInputHoverHsl(hslTheme) {
   }
   return hslTheme.foreground;
 }
+var HOVER_PRIMARY_MIN_CONTRAST = 2;
+function deriveHoverChannels(theme, hslTheme) {
+  const primaryBgContrast = getContrastRatio(theme.primary, theme.background);
+  return primaryBgContrast >= HOVER_PRIMARY_MIN_CONTRAST ? hslTheme.primary : hslTheme.foreground;
+}
 function applyTheme(theme, targetElement) {
   const element = targetElement || document.documentElement;
   const hslTheme = themeToHsl(theme);
@@ -6770,6 +6775,10 @@ function applyTheme(theme, targetElement) {
     "--input-hover",
     hslTheme.inputHover ?? deriveInputHoverHsl(hslTheme)
   );
+  element.style.setProperty(
+    "--hover",
+    `${hslTheme.hover ?? deriveHoverChannels(theme, hslTheme)} / 0.12`
+  );
   element.style.setProperty("--chart-1", hslTheme.chart1);
   element.style.setProperty("--chart-2", hslTheme.chart2);
   element.style.setProperty("--chart-3", hslTheme.chart3);
@@ -6887,6 +6896,7 @@ function areThemesEqual(theme1, theme2) {
     "toggleTrack",
     "toggleTrackForeground",
     "inputHover",
+    "hover",
     "chart1",
     "chart2",
     "chart3",
@@ -6930,6 +6940,25 @@ function importTheme(jsonString) {
     };
   }
 }
+function hexToLinearRgb(hex) {
+  hex = hex.replace(/^#/, "");
+  const r = parseInt(hex.substring(0, 2), 16) / 255;
+  const g = parseInt(hex.substring(2, 4), 16) / 255;
+  const b = parseInt(hex.substring(4, 6), 16) / 255;
+  const toLinear = (c) => c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+  return [toLinear(r), toLinear(g), toLinear(b)];
+}
+function getRelativeLuminance(hex) {
+  const [r, g, b] = hexToLinearRgb(hex);
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
+function getContrastRatio(hex1, hex2) {
+  const l1 = getRelativeLuminance(hex1);
+  const l2 = getRelativeLuminance(hex2);
+  const lighter = Math.max(l1, l2);
+  const darker = Math.min(l1, l2);
+  return (lighter + 0.05) / (darker + 0.05);
+}
 function ThemeSwatch({ theme, isSelected, onClick }) {
   return /* @__PURE__ */ jsx(
     Tooltip,
@@ -6947,7 +6976,7 @@ function ThemeSwatch({ theme, isSelected, onClick }) {
           onClick,
           className: cn(
             "relative flex flex-col items-center gap-1.5 p-2 rounded-lg transition-all",
-            "hover:bg-accent/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            "hover:bg-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
             isSelected && "bg-accent ring-2 ring-primary"
           ),
           children: [
@@ -7182,8 +7211,8 @@ function MenuItem({ item, onClose, depth = 0 }) {
         className: cn(
           "w-full flex items-center gap-3 px-3 py-2 text-sm rounded-sm",
           "transition-colors text-left",
-          "focus:outline-none focus:bg-accent focus:text-accent-foreground",
-          item.disabled ? "opacity-50 cursor-not-allowed text-muted-foreground" : "hover:bg-accent hover:text-accent-foreground cursor-pointer",
+          "focus:outline-none focus:bg-hover",
+          item.disabled ? "opacity-50 cursor-not-allowed text-muted-foreground" : "hover:bg-hover cursor-pointer",
           item.destructive && !item.disabled && "text-destructive hover:text-destructive"
         ),
         children: [
@@ -8180,7 +8209,7 @@ function DefaultErrorState({ error }) {
         onClick: error.onRetry,
         className: cn(
           "rounded-md border border-border bg-background px-3 py-1.5 text-sm text-foreground",
-          "transition-colors hover:bg-muted"
+          "transition-colors hover:bg-hover"
         ),
         children: "Retry"
       }