@optilogic/core 1.4.0 → 1.6.0

package/dist/index.cjs

@@ -2129,7 +2129,9 @@ function Modal({
   size = "md",
   zIndex = 50,
   className,
-  contentClassName
+  contentClassName,
+  responsive = false,
+  forceMobile = false
 }) {
   React20__namespace.useEffect(() => {
     if (!isOpen) return;
@@ -2160,10 +2162,18 @@ function Modal({
     "2xl": "max-w-6xl",
     full: "max-w-[95vw]"
   };
+  const responsiveOuter = "[@media(pointer:coarse)and(hover:none)]:!p-0";
+  const responsiveFrame = "[@media(pointer:coarse)and(hover:none)]:!w-screen [@media(pointer:coarse)and(hover:none)]:!h-[100dvh] [@media(pointer:coarse)and(hover:none)]:!max-h-[100dvh] [@media(pointer:coarse)and(hover:none)]:!max-w-none [@media(pointer:coarse)and(hover:none)]:!rounded-none [@media(pointer:coarse)and(hover:none)]:!border-0";
+  const forcedOuter = "!p-0";
+  const forcedFrame = "!w-screen !h-[100dvh] !max-h-[100dvh] !max-w-none !rounded-none !border-0";
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: "fixed inset-0 flex items-center justify-center p-4",
+      className: cn(
+        "fixed inset-0 flex items-center justify-center p-4",
+        responsive && responsiveOuter,
+        forceMobile && forcedOuter
+      ),
       style: { zIndex },
       onClick: onClose,
       children: [
@@ -2177,6 +2187,8 @@ function Modal({
               "flex flex-col",
               "max-h-[90vh]",
               sizeClasses[size],
+              responsive && responsiveFrame,
+              forceMobile && forcedFrame,
               contentClassName
             ),
             onClick: (e) => e.stopPropagation(),
@@ -2222,6 +2234,27 @@ function ModalButton({
     }
   );
 }
+var mobileSheetContentClasses = [
+  "[@media(pointer:coarse)and(hover:none)]:!top-auto",
+  "[@media(pointer:coarse)and(hover:none)]:!bottom-0",
+  "[@media(pointer:coarse)and(hover:none)]:!left-0",
+  "[@media(pointer:coarse)and(hover:none)]:!translate-x-0",
+  "[@media(pointer:coarse)and(hover:none)]:!translate-y-0",
+  "[@media(pointer:coarse)and(hover:none)]:!w-screen",
+  "[@media(pointer:coarse)and(hover:none)]:!max-w-none",
+  "[@media(pointer:coarse)and(hover:none)]:!rounded-t-xl",
+  "[@media(pointer:coarse)and(hover:none)]:!rounded-b-none",
+  "[@media(pointer:coarse)and(hover:none)]:!pb-[calc(1.5rem+env(safe-area-inset-bottom))]"
+].join(" ");
+var mobileSheetFooterClasses = [
+  // Stack buttons full-width with comfortable tap targets on touch devices.
+  "[@media(pointer:coarse)and(hover:none)]:!flex-col",
+  "[@media(pointer:coarse)and(hover:none)]:!gap-2"
+].join(" ");
+var mobileSheetActionClasses = [
+  "[@media(pointer:coarse)and(hover:none)]:!w-full",
+  "[@media(pointer:coarse)and(hover:none)]:!min-h-11"
+].join(" ");
 function ConfirmationModal({
   open,
   onOpenChange,
@@ -2241,18 +2274,28 @@ function ConfirmationModal({
     onConfirm();
     onOpenChange(false);
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(AlertDialog, { open, onOpenChange, children: /* @__PURE__ */ jsxRuntime.jsxs(AlertDialogContent, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(AlertDialog, { open, onOpenChange, children: /* @__PURE__ */ jsxRuntime.jsxs(AlertDialogContent, { className: mobileSheetContentClasses, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(AlertDialogHeader, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(AlertDialogTitle, { children: title }),
       /* @__PURE__ */ jsxRuntime.jsx(AlertDialogDescription, { children: description })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs(AlertDialogFooter, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(AlertDialogCancel, { onClick: handleCancel, children: cancelLabel }),
+    /* @__PURE__ */ jsxRuntime.jsxs(AlertDialogFooter, { className: mobileSheetFooterClasses, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        AlertDialogCancel,
+        {
+          onClick: handleCancel,
+          className: mobileSheetActionClasses,
+          children: cancelLabel
+        }
+      ),
       /* @__PURE__ */ jsxRuntime.jsx(
         AlertDialogAction,
         {
           onClick: handleConfirm,
-          className: destructive ? "bg-destructive text-destructive-foreground hover:bg-destructive/90" : void 0,
+          className: [
+            destructive ? "bg-destructive text-destructive-foreground hover:bg-destructive/90" : "",
+            mobileSheetActionClasses
+          ].filter(Boolean).join(" "),
           children: confirmLabel
         }
       )
@@ -2447,7 +2490,7 @@ function ResizablePanel({
   const currentWidthVW = isExpanded ? (isDragging && localWidth !== null ? localWidth : expandedWidthVW) || collapsedSizeVW : collapsedSizeVW;
   const clampWidth = React20__namespace.useCallback(
     (width) => {
-      let effectiveMinWidth = minWidthVW;
+      const effectiveMinWidth = minWidthVW;
       let effectiveMaxWidth = maxWidthVW;
       if (orientation === "right" && leftWidthVW !== void 0 && !isOverlay) {
         const availableSpace = 100 - leftWidthVW - 3;
@@ -3337,7 +3380,7 @@ function FilterPopover({
     ] })
   ] });
   const renderDateFilter = () => {
-    const dateValue = React20__namespace.useMemo(() => {
+    const dateValue = (() => {
       if (!value) return void 0;
       if (value instanceof Date) return value;
       if (typeof value === "string") {
@@ -3345,8 +3388,8 @@ function FilterPopover({
         return dateFns.isValid(parsed) ? parsed : void 0;
       }
       return void 0;
-    }, [value]);
-    const dateToValue = React20__namespace.useMemo(() => {
+    })();
+    const dateToValue = (() => {
       if (!valueTo) return void 0;
       if (valueTo instanceof Date) return valueTo;
       if (typeof valueTo === "string") {
@@ -3354,7 +3397,7 @@ function FilterPopover({
         return dateFns.isValid(parsed) ? parsed : void 0;
       }
       return void 0;
-    }, [valueTo]);
+    })();
     const handleDateChange = (date) => {
       setValue(date ? dateFns.format(date, "yyyy-MM-dd") : "");
     };
@@ -3744,7 +3787,7 @@ function CellEditor({
     }
   );
   const renderDateEditor = () => {
-    const dateValue = React20__namespace.useMemo(() => {
+    const dateValue = (() => {
       if (!currentValue) return void 0;
       if (currentValue instanceof Date) return currentValue;
       if (typeof currentValue === "string") {
@@ -3752,7 +3795,7 @@ function CellEditor({
         return dateFns.isValid(parsed) ? parsed : void 0;
       }
       return void 0;
-    }, [currentValue]);
+    })();
     const handleDateChange = (date) => {
       const stringValue = date ? dateFns.format(date, "yyyy-MM-dd") : "";
       if (validate(stringValue)) {
@@ -4715,10 +4758,11 @@ function applyFilterOperator(value, filterValue, filterValueTo, operator, filter
         return numValue < numFilterValue;
       case "lte":
         return numValue <= numFilterValue;
-      case "between":
+      case "between": {
         const singleFilterValueTo = extractSingleValue(filterValueTo);
         const numFilterValueTo = Number(singleFilterValueTo);
         return numValue >= numFilterValue && numValue <= numFilterValueTo;
+      }
       default:
         return true;
     }
@@ -6406,104 +6450,112 @@ function CopyButton({ content, className, size = "md" }) {
 }
 
 // src/theme/presets.ts
-var OPTILOGIC_LEGACY_THEME = {
-  id: "optilogic-legacy",
-  name: "Optilogic Legacy",
-  description: "Classic Optilogic color scheme with blue accents",
+var OPTILOGIC_LIGHT_THEME = {
+  id: "optilogic-light",
+  name: "Optilogic Light",
+  description: "The default Optilogic light theme",
   author: "Optilogic",
-  background: "#FFFFFF",
-  foreground: "#0C0A5A",
-  card: "#F9F9F9",
-  cardForeground: "#0C0A5A",
-  popover: "#FFFFFF",
-  popoverForeground: "#0C0A5A",
-  primary: "#0C0A5A",
-  primaryForeground: "#FFFFFF",
-  accent: "#CFD4FB",
+  background: "#F3F4FF",
+  foreground: "#000000",
+  card: "#EDEEFF",
+  cardForeground: "#000000",
+  popover: "#EDEEFF",
+  popoverForeground: "#000000",
+  primary: "#5766F2",
+  primaryForeground: "#000000",
+  primaryHover: "#4555E0",
+  accent: "#929BEF",
   accentForeground: "#0C0A5A",
-  secondary: "#5766F2",
-  secondaryForeground: "#FFFFFF",
-  muted: "#E6EAF0",
-  mutedForeground: "#737272",
-  destructive: "#DB2828",
+  secondary: "#CFD4FB",
+  secondaryForeground: "#000000",
+  muted: "#E8ECFF",
+  mutedForeground: "#2E2D5E",
+  destructive: "#DC2626",
   destructiveForeground: "#FFFFFF",
-  success: "#44BD7E",
-  successForeground: "#FFFFFF",
-  warning: "#F5CF47",
-  warningForeground: "#0C0A5A",
-  chip: "#B8C5F9",
-  chipForeground: "#0C0A5A",
-  border: "#D0D0D0",
-  input: "#D0D0D0",
+  success: "#929BEF",
+  successForeground: "#0C0A5A",
+  warning: "#B45309",
+  warningForeground: "#FFFFFF",
+  chip: "#5766F2",
+  chipForeground: "#FFFFFF",
+  border: "#C8CEFF",
+  input: "#C8CEFF",
   ring: "#5766F2",
-  popoverBorder: "#D0D0D0",
-  divider: "#D0D0D0",
-  toggleTrack: "#D0D0D0",
+  popoverBorder: "#C8CEFF",
+  divider: "#B8BEE0",
+  toggleTrack: "#929BEF",
   toggleTrackForeground: "#FFFFFF",
   inputHover: "#5766F2",
-  chart1: "#78D237",
-  chart2: "#F5CF47",
-  chart3: "#5766F2",
-  chart4: "#44BD7E",
-  chart5: "#929BEF",
-  chart6: "#DB2828",
-  chart7: "#E07B39",
-  chart8: "#2BBBAD",
-  chart9: "#A5673F",
-  chart10: "#00B5AD",
-  chart11: "#6435C9",
-  chart12: "#E03997",
-  radius: "0.5rem"
+  chart1: "#5766F2",
+  chart2: "#929BEF",
+  chart3: "#CFD4FB",
+  chart4: "#0C0A5A",
+  chart5: "#B45309",
+  chart6: "#DC2626",
+  chart7: "#A855F7",
+  chart8: "#EC4899",
+  chart9: "#55548C",
+  chart10: "#0C0A5A",
+  chart11: "#C05621",
+  chart12: "#06B6D4",
+  radius: "0.5rem",
+  brandGradientFrom: "#1A7B4A",
+  brandGradientTo: "#72DA60"
 };
 var OPTILOGIC_DARK_THEME = {
   id: "optilogic-dark",
   name: "Optilogic Dark",
-  description: "Optilogic branded dark theme with signature green",
+  description: "The default Optilogic dark theme",
   author: "Optilogic",
-  background: "#042926",
-  foreground: "#E0E7E6",
-  card: "#0A3F34",
-  cardForeground: "#E0E7E6",
-  popover: "#0A3F34",
-  popoverForeground: "#E0E7E6",
-  primary: "#23EF6A",
-  primaryForeground: "#042926",
-  accent: "#23EF6A",
-  accentForeground: "#042926",
-  secondary: "#0D4D3F",
-  secondaryForeground: "#E0E7E6",
-  muted: "#0D4D3F",
-  mutedForeground: "#9CB5B0",
+  background: "#141826",
+  foreground: "#E8EAF0",
+  card: "#2D3252",
+  cardForeground: "#E8EAF0",
+  popover: "#2D3252",
+  popoverForeground: "#E8EAF0",
+  primary: "#5766F2",
+  primaryForeground: "#FFFFFF",
+  primaryHover: "#7B8FF7",
+  accent: "#5766F2",
+  accentForeground: "#FFFFFF",
+  accentHover: "#7B8FF7",
+  secondary: "#2D3252",
+  secondaryForeground: "#E8EAF0",
+  muted: "#2D3252",
+  mutedForeground: "#C5C9D4",
   destructive: "#EF4444",
   destructiveForeground: "#FFFFFF",
-  success: "#23EF6A",
-  successForeground: "#042926",
-  warning: "#FBBF24",
-  warningForeground: "#042926",
-  chip: "#0D4D3F",
-  chipForeground: "#A7D5CA",
-  border: "#1A5C4C",
-  input: "#1A5C4C",
-  ring: "#23EF6A",
-  popoverBorder: "#237A64",
-  divider: "#1A5C4C",
-  toggleTrack: "#1A5C4C",
-  toggleTrackForeground: "#E0E7E6",
-  inputHover: "#23EF6A",
-  chart1: "#23EF6A",
-  chart2: "#3B82F6",
-  chart3: "#FBBF24",
-  chart4: "#F97316",
-  chart5: "#A78BFA",
+  success: "#22C55E",
+  successForeground: "#141826",
+  warning: "#F59E0B",
+  warningForeground: "#141826",
+  chip: "#5766F2",
+  chipForeground: "#FFFFFF",
+  border: "#3A3F5C",
+  input: "#2D3252",
+  ring: "#7B8FF7",
+  popoverBorder: "#3A3F5C",
+  divider: "#363B5C",
+  toggleTrack: "#4A5068",
+  toggleTrackForeground: "#141826",
+  inputHover: "#7B8FF7",
+  chart1: "#7B8FF7",
+  chart2: "#5766F2",
+  chart3: "#22D3EE",
+  chart4: "#22C55E",
+  chart5: "#F59E0B",
   chart6: "#EF4444",
-  chart7: "#06B6D4",
+  chart7: "#A855F7",
   chart8: "#EC4899",
-  chart9: "#84CC16",
+  chart9: "#C5C9D4",
   chart10: "#14B8A6",
-  chart11: "#F59E0B",
-  chart12: "#8B5CF6",
-  radius: "0.5rem"
+  chart11: "#FB923C",
+  chart12: "#60A5FA",
+  radius: "0.5rem",
+  brandGradientFrom: "#1A7B4A",
+  brandGradientTo: "#50FFA7"
 };
+var OPTILOGIC_LEGACY_THEME = OPTILOGIC_LIGHT_THEME;
 var MODERN_LIGHT_THEME = {
   id: "modern-light",
   name: "Modern Light",
@@ -6652,22 +6704,72 @@ var DARK_ELEGANT_THEME = {
   chart12: "#F06292",
   radius: "0.5rem"
 };
+var GREEN_THEME = {
+  id: "green-theme",
+  name: "Green Theme",
+  description: "A green theme with natural, earthy tones",
+  author: "Optilogic",
+  background: "#1a2820",
+  foreground: "#E6F5EC",
+  card: "#2d4038",
+  cardForeground: "#E6F5EC",
+  popover: "#243630",
+  popoverForeground: "#E6F5EC",
+  primary: "#6FCF97",
+  primaryForeground: "#1a2820",
+  accent: "#6FCF97",
+  accentForeground: "#1a2820",
+  secondary: "#1f3329",
+  secondaryForeground: "#E6F5EC",
+  muted: "#354840",
+  mutedForeground: "#9DB8A8",
+  destructive: "#EB5757",
+  destructiveForeground: "#E6F5EC",
+  success: "#6FCF97",
+  successForeground: "#1a2820",
+  warning: "#F2C94C",
+  warningForeground: "#1a2820",
+  chip: "#3a5045",
+  chipForeground: "#C5E3D1",
+  border: "#243630",
+  input: "#243630",
+  ring: "#6FCF97",
+  chart1: "#6FCF97",
+  chart2: "#8FE3B0",
+  chart3: "#9DB8A8",
+  chart4: "#2d4038",
+  chart5: "#354840",
+  chart6: "#EB5757",
+  chart7: "#F2C94C",
+  chart8: "#56CCF2",
+  chart9: "#BB6BD9",
+  chart10: "#4ECDC4",
+  chart11: "#A8D8B9",
+  chart12: "#E07B39",
+  radius: "0.5rem"
+};
 var PRESET_THEMES = [
-  OPTILOGIC_LEGACY_THEME,
+  OPTILOGIC_LIGHT_THEME,
   OPTILOGIC_DARK_THEME,
   MODERN_LIGHT_THEME,
   MODERN_DARK_THEME,
-  DARK_ELEGANT_THEME
+  GREEN_THEME
 ];
 var ALL_THEMES = PRESET_THEMES;
+var LEGACY_THEME_ID_MAP = {
+  "optilogic-legacy": OPTILOGIC_LIGHT_THEME.id,
+  "dark-elegant": OPTILOGIC_DARK_THEME.id
+};
 function getPresetTheme(id) {
-  return ALL_THEMES.find((theme) => theme.id === id);
+  const resolvedId = LEGACY_THEME_ID_MAP[id] ?? id;
+  return ALL_THEMES.find((theme) => theme.id === resolvedId);
 }
 function getDefaultTheme() {
-  return OPTILOGIC_LEGACY_THEME;
+  return OPTILOGIC_LIGHT_THEME;
 }
 function isPresetTheme(themeId) {
-  return ALL_THEMES.some((theme) => theme.id === themeId);
+  const resolvedId = LEGACY_THEME_ID_MAP[themeId] ?? themeId;
+  return ALL_THEMES.some((theme) => theme.id === resolvedId);
 }
 
 // src/theme/utils.ts
@@ -6749,6 +6851,21 @@ function themeToHsl(theme) {
     chart12: hexToHsl(theme.chart12)
   };
 }
+function blendHex(base, blend, amount) {
+  const a = base.replace(/^#/, "");
+  const b = blend.replace(/^#/, "");
+  const ar = parseInt(a.substring(0, 2), 16);
+  const ag = parseInt(a.substring(2, 4), 16);
+  const ab = parseInt(a.substring(4, 6), 16);
+  const br = parseInt(b.substring(0, 2), 16);
+  const bg = parseInt(b.substring(2, 4), 16);
+  const bb = parseInt(b.substring(4, 6), 16);
+  const r = Math.round(ar + (br - ar) * amount);
+  const g = Math.round(ag + (bg - ag) * amount);
+  const bl = Math.round(ab + (bb - ab) * amount);
+  const hex = (v) => Math.max(0, Math.min(255, v)).toString(16).padStart(2, "0");
+  return "#" + hex(r) + hex(g) + hex(bl);
+}
 function deriveInputHoverHsl(hslTheme) {
   const parts = hslTheme.foreground.split(/\s+/);
   if (parts.length >= 3) {
@@ -6821,6 +6938,27 @@ function applyTheme(theme, targetElement) {
     "--hover",
     `${hslTheme.hover ?? deriveHoverChannels(theme, hslTheme)} / 0.18`
   );
+  if (theme.primaryHover) {
+    element.style.setProperty("--primary-hover", hexToHsl(theme.primaryHover));
+  } else {
+    element.style.removeProperty("--primary-hover");
+  }
+  if (theme.card && theme.accent) {
+    const accentHover = theme.accentHover ? theme.accentHover : blendHex(theme.card, theme.accent, 0.08);
+    const accentActive = blendHex(theme.card, theme.accent, 0.15);
+    element.style.setProperty("--accent-hover", hexToHsl(accentHover));
+    element.style.setProperty("--accent-active", hexToHsl(accentActive));
+  }
+  if (theme.brandGradientFrom) {
+    element.style.setProperty("--brand-from", hexToHsl(theme.brandGradientFrom));
+  } else {
+    element.style.removeProperty("--brand-from");
+  }
+  if (theme.brandGradientTo) {
+    element.style.setProperty("--brand-to", hexToHsl(theme.brandGradientTo));
+  } else {
+    element.style.removeProperty("--brand-to");
+  }
   element.style.setProperty("--chart-1", hslTheme.chart1);
   element.style.setProperty("--chart-2", hslTheme.chart2);
   element.style.setProperty("--chart-3", hslTheme.chart3);
@@ -6939,6 +7077,10 @@ function areThemesEqual(theme1, theme2) {
     "toggleTrackForeground",
     "inputHover",
     "hover",
+    "primaryHover",
+    "accentHover",
+    "brandGradientFrom",
+    "brandGradientTo",
     "chart1",
     "chart2",
     "chart3",
@@ -7093,17 +7235,19 @@ function ThemePicker({
     const currentIndex = themes.findIndex((t) => t.id === selectedTheme?.id);
     switch (e.key) {
       case "ArrowRight":
-      case "ArrowDown":
+      case "ArrowDown": {
         e.preventDefault();
         const nextIndex = (currentIndex + 1) % themes.length;
         handleThemeSelect(themes[nextIndex]);
         break;
+      }
       case "ArrowLeft":
-      case "ArrowUp":
+      case "ArrowUp": {
         e.preventDefault();
         const prevIndex = currentIndex <= 0 ? themes.length - 1 : currentIndex - 1;
         handleThemeSelect(themes[prevIndex]);
         break;
+      }
     }
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open, onOpenChange: setOpen, children: [
@@ -8642,11 +8786,13 @@ exports.DropdownMenuSubTrigger = DropdownMenuSubTrigger;
 exports.DropdownMenuTrigger = DropdownMenuTrigger;
 exports.FileView = FileView;
 exports.FilterPopover = FilterPopover;
+exports.GREEN_THEME = GREEN_THEME;
 exports.HeaderCell = HeaderCell;
 exports.HtmlRenderer = HtmlRenderer;
 exports.IconButton = IconButton;
 exports.ImageRenderer = ImageRenderer;
 exports.Input = Input;
+exports.LEGACY_THEME_ID_MAP = LEGACY_THEME_ID_MAP;
 exports.Label = Label;
 exports.LoadingSpinner = LoadingSpinner;
 exports.MINIMALIST_LIGHT_THEME = MINIMALIST_LIGHT_THEME;
@@ -8658,6 +8804,7 @@ exports.ModalButton = ModalButton;
 exports.MultiSelect = MultiSelect;
 exports.OPTILOGIC_DARK_THEME = OPTILOGIC_DARK_THEME;
 exports.OPTILOGIC_LEGACY_THEME = OPTILOGIC_LEGACY_THEME;
+exports.OPTILOGIC_LIGHT_THEME = OPTILOGIC_LIGHT_THEME;
 exports.OptilogicLogo = OptilogicLogo;
 exports.OptilogicLogoWithText = OptilogicLogoWithText;
 exports.PRESET_THEMES = PRESET_THEMES;