@optilogic/core 1.0.0-beta.16 → 1.0.0-beta.18

package/dist/index.cjs

@@ -67,17 +67,17 @@ function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
 var buttonVariants = classVarianceAuthority.cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   {
     variants: {
       variant: {
-        default: "bg-muted text-muted-foreground hover:bg-accent hover:text-accent-foreground",
-        primary: "bg-accent text-accent-foreground shadow hover:shadow-md",
-        destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90 hover:shadow-md",
-        outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
-        secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 hover:underline"
+        default: "bg-muted text-foreground hover:bg-accent hover:text-accent-foreground 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",
+        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",
+        link: "text-primary underline-offset-4 hover:underline disabled:opacity-50 disabled:text-muted-foreground"
       },
       size: {
         default: "h-9 px-4 py-2",
@@ -113,7 +113,7 @@ var Input = React20__namespace.forwardRef(
       {
         type,
         className: cn(
-          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground hover:border-input-hover focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:border-input md:text-sm",
           className
         ),
         ref,
@@ -141,7 +141,7 @@ var Textarea = React20__namespace.forwardRef(
       "textarea",
       {
         className: cn(
-          "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm placeholder:text-muted-foreground hover:border-input-hover focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:border-input md:text-sm",
           className
         ),
         ref,
@@ -229,9 +229,11 @@ var Switch = React20__namespace.forwardRef(({ className, ...props }, ref) => /*
       // Focus styles
       "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
       // Disabled styles
-      "disabled:cursor-not-allowed disabled:opacity-50",
+      "disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-muted",
       // Unchecked state
-      "bg-input",
+      "bg-toggle-track",
+      // Hover
+      "hover:bg-toggle-track/80 data-[state=checked]:hover:bg-primary/80",
       // Checked state
       "data-[state=checked]:bg-primary",
       className
@@ -244,7 +246,7 @@ var Switch = React20__namespace.forwardRef(({ className, ...props }, ref) => /*
         className: cn(
           // Base styles
           "pointer-events-none block h-4 w-4 rounded-full",
-          "bg-background shadow-lg ring-0",
+          "bg-toggle-track-foreground shadow-lg ring-0",
           "transition-transform",
           // Position based on state
           "data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
@@ -307,7 +309,7 @@ var SelectTrigger = React20__namespace.forwardRef(({ className, children, ...pro
   {
     ref,
     className: cn(
-      "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background data-[placeholder]:text-muted-foreground hover:border-input-hover focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:border-input [&>span]:line-clamp-1",
       className
     ),
     ...props,
@@ -643,7 +645,7 @@ var PopoverContent = React20__namespace.forwardRef(({ className, align = "center
     align,
     sideOffset,
     className: cn(
-      "z-50 w-72 rounded-md border border-border bg-popover p-4 text-popover-foreground shadow-md outline-none",
+      "z-50 w-auto max-w-[90vw] rounded-md border border-border bg-popover p-4 text-popover-foreground shadow-md outline-none",
       // Animation
       "data-[state=open]:animate-in data-[state=closed]:animate-out",
       "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
@@ -704,7 +706,7 @@ var DropdownMenuContent = React20__namespace.forwardRef(({ className, sideOffset
     ref,
     sideOffset,
     className: cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md",
+      "z-50 min-w-[8rem] max-w-[90vw] overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md",
       "data-[state=open]:animate-in data-[state=closed]:animate-out",
       "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
@@ -2741,19 +2743,19 @@ function Calendar({
       className: cn("p-3", className),
       classNames: {
         months: "flex flex-col sm:flex-row gap-4",
-        month: "flex flex-col gap-4",
-        month_caption: "flex justify-center pt-1 relative items-center h-7 px-10",
+        month: "flex flex-col gap-2 relative px-8",
+        month_caption: "flex justify-center pt-1 items-center h-7",
         caption_label: "text-sm font-medium hidden",
         nav: "flex items-center gap-1",
         button_previous: cn(
           buttonVariants({ variant: "outline" }),
-          "absolute left-1 h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 z-10"
+          "absolute left-1 top-1/2 -translate-y-1/2 h-6 w-6 bg-transparent p-0 opacity-50 hover:opacity-100 z-10"
         ),
         button_next: cn(
           buttonVariants({ variant: "outline" }),
-          "absolute right-1 h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 z-10"
+          "absolute right-1 top-1/2 -translate-y-1/2 h-6 w-6 bg-transparent p-0 opacity-50 hover:opacity-100 z-10"
         ),
-        month_grid: "w-full border-collapse px-1",
+        month_grid: "border-collapse mx-auto",
         weekdays: "flex",
         weekday: "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
         week: "flex w-full mt-2",
@@ -2778,12 +2780,12 @@ function Calendar({
       components: {
         Chevron: ({ orientation }) => {
           const Icon2 = orientation === "left" ? lucideReact.ChevronLeft : lucideReact.ChevronRight;
-          return /* @__PURE__ */ jsxRuntime.jsx(Icon2, { className: "h-4 w-4" });
+          return /* @__PURE__ */ jsxRuntime.jsx(Icon2, { className: "h-3.5 w-3.5" });
         },
         MonthCaption: ({ calendarMonth }) => {
           const month = calendarMonth.date.getMonth();
           const year = calendarMonth.date.getFullYear();
-          return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-1 px-10", children: [
+          return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-1", children: [
             /* @__PURE__ */ jsxRuntime.jsxs(
               Select,
               {
@@ -3019,8 +3021,9 @@ function DatePickerInput({
       {
         className: cn(
           "flex items-center rounded-md border border-input bg-background ring-offset-background",
+          "hover:border-input-hover",
           "focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2",
-          disabled && "opacity-50 cursor-not-allowed",
+          disabled && "opacity-50 cursor-not-allowed hover:border-input",
           sizeClasses[size]
         ),
         children: [
@@ -3652,7 +3655,7 @@ function CellEditor({
       onKeyDown: handleKeyDown,
       onBlur: handleBlur,
       className: cn(
-        "h-full w-full border-0 rounded-none focus:ring-2 focus:ring-primary text-sm px-2",
+        "h-full w-full border-0 rounded-none bg-background focus:ring-0 text-sm px-2",
         validationError && "ring-2 ring-destructive focus:ring-destructive",
         className
       ),
@@ -3670,7 +3673,7 @@ function CellEditor({
       onKeyDown: handleKeyDown,
       onBlur: handleBlur,
       className: cn(
-        "h-full w-full border-0 rounded-none focus:ring-2 focus:ring-primary text-sm px-2",
+        "h-full w-full border-0 rounded-none bg-background focus:ring-0 text-sm px-2",
         validationError && "ring-2 ring-destructive focus:ring-destructive",
         className
       ),
@@ -3740,7 +3743,7 @@ function CellEditor({
             {
               ref: selectRef,
               className: cn(
-                "h-full w-full border-0 rounded-none focus:ring-2 focus:ring-primary text-sm",
+                "h-full w-full border-0 rounded-none bg-background focus:ring-0 text-sm",
                 validationError && "ring-2 ring-destructive focus:ring-destructive",
                 className
               ),
@@ -3885,6 +3888,7 @@ function useDataGridState(options) {
   const [internalColumnWidths, setInternalColumnWidths] = React20.useState(defaultColumnWidths);
   const [internalFocusedCell, setInternalFocusedCell] = React20.useState(null);
   const [editingCell, setEditingCell] = React20.useState(null);
+  const processedDataRef = React20.useRef([]);
   const sorting = isControlled.sorting ? controlledSorting : internalSorting;
   const filters = isControlled.filters ? controlledFilters : internalFilters;
   const focusedCell = isControlled.focusedCell ? controlledFocusedCell : internalFocusedCell;
@@ -4005,7 +4009,8 @@ function useDataGridState(options) {
       }
       const column = columns.find((c) => c.key === columnKey);
       if (!column || !column.editable) return;
-      const row = data[rowIndex];
+      const resolvedData = processedDataRef.current.length > 0 ? processedDataRef.current : data;
+      const row = resolvedData[rowIndex];
       if (!row) return;
       const value = getCellValue2(row, column);
       setEditingCell({
@@ -4027,7 +4032,8 @@ function useDataGridState(options) {
     const value = valueOverride !== void 0 ? valueOverride : editingCell.value;
     const column = columns.find((c) => c.key === columnKey);
     if (column?.validator) {
-      const row = data[rowIndex];
+      const resolvedData = processedDataRef.current.length > 0 ? processedDataRef.current : data;
+      const row = resolvedData[rowIndex];
       const validationResult = column.validator(value, row);
       if (validationResult !== true && typeof validationResult === "string") {
         return;
@@ -4059,6 +4065,7 @@ function useDataGridState(options) {
       commitEdit,
       cancelEdit
     },
+    processedDataRef,
     isControlled
   };
 }
@@ -4512,16 +4519,44 @@ function applySorting(data, sorting, columns) {
       if (aVal == null) return sort.direction === "asc" ? 1 : -1;
       if (bVal == null) return sort.direction === "asc" ? -1 : 1;
       let comparison = 0;
-      if (typeof aVal === "string" && typeof bVal === "string") {
-        comparison = aVal.localeCompare(bVal);
-      } else if (typeof aVal === "number" && typeof bVal === "number") {
-        comparison = aVal - bVal;
-      } else if (aVal instanceof Date && bVal instanceof Date) {
-        comparison = aVal.getTime() - bVal.getTime();
-      } else if (typeof aVal === "boolean" && typeof bVal === "boolean") {
-        comparison = aVal === bVal ? 0 : aVal ? 1 : -1;
-      } else {
+      if (column.dataType === "number") {
+        const aNum = Number(aVal);
+        const bNum = Number(bVal);
+        if (!isNaN(aNum) && !isNaN(bNum)) {
+          comparison = aNum - bNum;
+        } else {
+          comparison = String(aVal).localeCompare(String(bVal));
+        }
+      } else if (column.dataType === "date") {
+        const aDate = aVal instanceof Date ? aVal : new Date(aVal);
+        const bDate = bVal instanceof Date ? bVal : new Date(bVal);
+        const aTime = isNaN(aDate.getTime()) ? 0 : aDate.getTime();
+        const bTime = isNaN(bDate.getTime()) ? 0 : bDate.getTime();
+        comparison = aTime - bTime;
+      } else if (column.dataType === "boolean") {
+        const aBool = aVal === true || aVal === "true" || aVal === 1;
+        const bBool = bVal === true || bVal === "true" || bVal === 1;
+        comparison = aBool === bBool ? 0 : aBool ? 1 : -1;
+      } else if (column.dataType === "string") {
         comparison = String(aVal).localeCompare(String(bVal));
+      } else {
+        if (typeof aVal === "number" && typeof bVal === "number") {
+          comparison = aVal - bVal;
+        } else if (aVal instanceof Date && bVal instanceof Date) {
+          comparison = aVal.getTime() - bVal.getTime();
+        } else if (typeof aVal === "boolean" && typeof bVal === "boolean") {
+          comparison = aVal === bVal ? 0 : aVal ? 1 : -1;
+        } else {
+          const aStr = String(aVal);
+          const bStr = String(bVal);
+          const aNum = Number(aStr);
+          const bNum = Number(bStr);
+          if (!isNaN(aNum) && !isNaN(bNum) && aStr !== "" && bStr !== "") {
+            comparison = aNum - bNum;
+          } else {
+            comparison = aStr.localeCompare(bStr);
+          }
+        }
       }
       return sort.direction === "asc" ? comparison : -comparison;
     });
@@ -4743,7 +4778,7 @@ function DataGrid({
     },
     []
   );
-  const { state, actions, isControlled } = useDataGridState({
+  const { state, actions, processedDataRef, isControlled } = useDataGridState({
     sorting: controlledSorting,
     filters: controlledFilters,
     columnWidths: controlledColumnWidths,
@@ -4782,6 +4817,7 @@ function DataGrid({
     state.sorting,
     visibleColumns
   ]);
+  processedDataRef.current = processedData;
   const { resizingColumn, getResizeProps } = useColumnResizeManager({
     columns: visibleColumns,
     columnWidths: state.columnWidths,
@@ -5117,6 +5153,7 @@ function DataGrid({
                                   "flex-shrink-0 px-3 py-2 text-sm overflow-hidden",
                                   showColumnBorders && "border-r border-border last:border-r-0",
                                   isFocused && !isEditingThisCell && "ring-2 ring-inset ring-primary",
+                                  isEditingThisCell && "ring-2 ring-inset ring-primary bg-background",
                                   column.align === "center" && "text-center",
                                   column.align === "right" && "text-right"
                                 ),
@@ -5286,6 +5323,7 @@ function DataGrid({
                         "flex-shrink-0 px-3 py-2 text-sm overflow-hidden",
                         showColumnBorders && "border-r border-border last:border-r-0",
                         isFocused && !isEditingThisCell && "ring-2 ring-inset ring-primary",
+                        isEditingThisCell && "ring-2 ring-inset ring-primary bg-background",
                         column.align === "center" && "text-center",
                         column.align === "right" && "text-right"
                       ),
@@ -5541,8 +5579,9 @@ function Autocomplete({
         disabled,
         className: cn(
           "flex h-9 w-full items-center justify-between gap-2 whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background",
+          "hover:border-input-hover",
           "focus:outline-none focus:ring-1 focus:ring-ring",
-          "disabled:cursor-not-allowed disabled:opacity-50",
+          "disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:border-input",
           !selectedOption && "text-muted-foreground",
           className
         ),
@@ -5773,6 +5812,9 @@ var GREEN_THEME = {
   border: "#243630",
   input: "#243630",
   ring: "#6FCF97",
+  toggleTrack: "#354840",
+  toggleTrackForeground: "#E6F5EC",
+  inputHover: "#6FCF97",
   chart1: "#6FCF97",
   chart2: "#8FE3B0",
   chart3: "#9DB8A8",
@@ -5808,8 +5850,11 @@ var OPTILOGIC_LEGACY_THEME = {
   chip: "#B8C5F9",
   chipForeground: "#0C0A5A",
   border: "#D0D0D0",
-  input: "#FFFFFF",
+  input: "#D0D0D0",
   ring: "#5766F2",
+  toggleTrack: "#D0D0D0",
+  toggleTrackForeground: "#FFFFFF",
+  inputHover: "#5766F2",
   chart1: "#78D237",
   chart2: "#F5CF47",
   chart3: "#5766F2",
@@ -5847,6 +5892,9 @@ var FUTURISTIC_THEME = {
   border: "#1e293b",
   input: "#1e293b",
   ring: "#6366f1",
+  toggleTrack: "#334155",
+  toggleTrackForeground: "#e0e7ff",
+  inputHover: "#6366f1",
   chart1: "#6366f1",
   chart2: "#8b5cf6",
   chart3: "#a855f7",
@@ -5884,6 +5932,9 @@ var NATURE_THEME = {
   border: "#243824",
   input: "#243824",
   ring: "#4caf50",
+  toggleTrack: "#3d5a3d",
+  toggleTrackForeground: "#e8f5e9",
+  inputHover: "#4caf50",
   chart1: "#4caf50",
   chart2: "#66bb6a",
   chart3: "#81c784",
@@ -5921,6 +5972,9 @@ var SCIFI_THEME = {
   border: "#30363d",
   input: "#21262d",
   ring: "#00d9ff",
+  toggleTrack: "#30363d",
+  toggleTrackForeground: "#c9d1d9",
+  inputHover: "#00d9ff",
   chart1: "#00d9ff",
   chart2: "#ff00ff",
   chart3: "#00ff88",
@@ -5958,6 +6012,9 @@ var OCEAN_THEME = {
   border: "#1e3a5f",
   input: "#1e3a5f",
   ring: "#2196f3",
+  toggleTrack: "#264a6e",
+  toggleTrackForeground: "#e3f2fd",
+  inputHover: "#2196f3",
   chart1: "#2196f3",
   chart2: "#00bcd4",
   chart3: "#03a9f4",
@@ -5995,6 +6052,9 @@ var SUNSET_THEME = {
   border: "#241424",
   input: "#241424",
   ring: "#ff6b35",
+  toggleTrack: "#3d2a3d",
+  toggleTrackForeground: "#ffe0e6",
+  inputHover: "#ff6b35",
   chart1: "#ff6b35",
   chart2: "#c44569",
   chart3: "#f7931e",
@@ -6032,6 +6092,9 @@ var FOREST_THEME = {
   border: "#1b5e20",
   input: "#1a2e1a",
   ring: "#2e7d32",
+  toggleTrack: "#2d4a2d",
+  toggleTrackForeground: "#e8f5e9",
+  inputHover: "#2e7d32",
   chart1: "#2e7d32",
   chart2: "#388e3c",
   chart3: "#43a047",
@@ -6069,6 +6132,9 @@ var CYBERPUNK_THEME = {
   border: "#1a1a2e",
   input: "#16213e",
   ring: "#ff00ff",
+  toggleTrack: "#2a2a4e",
+  toggleTrackForeground: "#f0f0f0",
+  inputHover: "#ff00ff",
   chart1: "#ff00ff",
   chart2: "#00ffff",
   chart3: "#00ff88",
@@ -6104,8 +6170,11 @@ var MINIMALIST_LIGHT_THEME = {
   chip: "#e9ecef",
   chipForeground: "#495057",
   border: "#dee2e6",
-  input: "#ffffff",
+  input: "#dee2e6",
   ring: "#000000",
+  toggleTrack: "#ced4da",
+  toggleTrackForeground: "#ffffff",
+  inputHover: "#6c757d",
   chart1: "#000000",
   chart2: "#6c757d",
   chart3: "#adb5bd",
@@ -6143,6 +6212,9 @@ var DARK_ELEGANT_THEME = {
   border: "#2d2d2d",
   input: "#1e1e1e",
   ring: "#bb86fc",
+  toggleTrack: "#3d3d3d",
+  toggleTrackForeground: "#e0e0e0",
+  inputHover: "#bb86fc",
   chart1: "#bb86fc",
   chart2: "#03dac6",
   chart3: "#4caf50",
@@ -6233,6 +6305,9 @@ function themeToHsl(theme) {
     border: hexToHsl(theme.border),
     input: hexToHsl(theme.input),
     ring: hexToHsl(theme.ring),
+    toggleTrack: theme.toggleTrack ? hexToHsl(theme.toggleTrack) : void 0,
+    toggleTrackForeground: theme.toggleTrackForeground ? hexToHsl(theme.toggleTrackForeground) : void 0,
+    inputHover: theme.inputHover ? hexToHsl(theme.inputHover) : void 0,
     chart1: hexToHsl(theme.chart1),
     chart2: hexToHsl(theme.chart2),
     chart3: hexToHsl(theme.chart3),
@@ -6240,6 +6315,15 @@ function themeToHsl(theme) {
     chart5: hexToHsl(theme.chart5)
   };
 }
+function deriveInputHoverHsl(hslTheme) {
+  const parts = hslTheme.foreground.split(/\s+/);
+  if (parts.length >= 3) {
+    const h = parts[0];
+    const s = parts[1];
+    return `${h} ${s} 50%`;
+  }
+  return hslTheme.foreground;
+}
 function applyTheme(theme, targetElement) {
   const element = targetElement || document.documentElement;
   const hslTheme = themeToHsl(theme);
@@ -6274,11 +6358,26 @@ function applyTheme(theme, targetElement) {
   element.style.setProperty("--border", hslTheme.border);
   element.style.setProperty("--input", hslTheme.input);
   element.style.setProperty("--ring", hslTheme.ring);
+  element.style.setProperty(
+    "--toggle-track",
+    hslTheme.toggleTrack ?? hslTheme.muted
+  );
+  element.style.setProperty(
+    "--toggle-track-foreground",
+    hslTheme.toggleTrackForeground ?? hslTheme.background
+  );
+  element.style.setProperty(
+    "--input-hover",
+    hslTheme.inputHover ?? deriveInputHoverHsl(hslTheme)
+  );
   element.style.setProperty("--chart-1", hslTheme.chart1);
   element.style.setProperty("--chart-2", hslTheme.chart2);
   element.style.setProperty("--chart-3", hslTheme.chart3);
   element.style.setProperty("--chart-4", hslTheme.chart4);
   element.style.setProperty("--chart-5", hslTheme.chart5);
+  if (theme.disabledOpacity) {
+    element.style.setProperty("--disabled-opacity", theme.disabledOpacity);
+  }
   if (theme.radius) {
     element.style.setProperty("--radius", theme.radius);
   }
@@ -6369,6 +6468,9 @@ function areThemesEqual(theme1, theme2) {
     "border",
     "input",
     "ring",
+    "toggleTrack",
+    "toggleTrackForeground",
+    "inputHover",
     "chart1",
     "chart2",
     "chart3",
@@ -7549,7 +7651,7 @@ function HtmlRenderer({
     "iframe",
     {
       srcDoc: content ?? "",
-      sandbox: "",
+      sandbox: "allow-scripts",
       title: fileName,
       className: cn("h-full w-full border-0", className)
     }