@optilogic/core 1.3.6 → 1.4.0

package/dist/index.d.cts

@@ -1002,17 +1002,25 @@ interface ModalProps {
      */
     footer?: React$1.ReactNode;
     /**
-     * Size variant
+     * Size variant. Maps to a `max-width` on the modal frame. For arbitrary
+     * widths, use `contentClassName` to override.
      */
-    size?: "sm" | "md" | "lg";
+    size?: "sm" | "md" | "lg" | "xl" | "2xl" | "full";
     /**
      * Z-index for stacking modals (default: 50)
      */
     zIndex?: number;
     /**
-     * Additional class names for modal content
+     * Additional class names for the modal body (the scrollable content area).
      */
     className?: string;
+    /**
+     * Additional class names for the modal frame (the outer card containing
+     * header, body, and footer). Merges with the `size` class — pass width
+     * utilities here to override the named size, e.g. `"max-w-[1200px]"` or
+     * `"w-[80vw] max-w-none"`.
+     */
+    contentClassName?: string;
 }
 /**
  * Modal component
@@ -1033,8 +1041,19 @@ interface ModalProps {
  *     <Button variant="primary" onClick={handleConfirm}>Confirm</Button>
  *   </footer>
  * </Modal>
+ *
+ * @example
+ * // Custom width override
+ * <Modal
+ *   isOpen={open}
+ *   onClose={() => setOpen(false)}
+ *   title="Report"
+ *   contentClassName="max-w-[1200px]"
+ * >
+ *   ...
+ * </Modal>
  */
-declare function Modal({ isOpen, onClose, title, children, footer, size, zIndex, className, }: ModalProps): react_jsx_runtime.JSX.Element | null;
+declare function Modal({ isOpen, onClose, title, children, footer, size, zIndex, className, contentClassName, }: ModalProps): react_jsx_runtime.JSX.Element | null;
 /**
  * ModalButton component
  * @deprecated Use Button component from @optilogic/core instead

package/dist/index.d.ts

@@ -1002,17 +1002,25 @@ interface ModalProps {
      */
     footer?: React$1.ReactNode;
     /**
-     * Size variant
+     * Size variant. Maps to a `max-width` on the modal frame. For arbitrary
+     * widths, use `contentClassName` to override.
      */
-    size?: "sm" | "md" | "lg";
+    size?: "sm" | "md" | "lg" | "xl" | "2xl" | "full";
     /**
      * Z-index for stacking modals (default: 50)
      */
     zIndex?: number;
     /**
-     * Additional class names for modal content
+     * Additional class names for the modal body (the scrollable content area).
      */
     className?: string;
+    /**
+     * Additional class names for the modal frame (the outer card containing
+     * header, body, and footer). Merges with the `size` class — pass width
+     * utilities here to override the named size, e.g. `"max-w-[1200px]"` or
+     * `"w-[80vw] max-w-none"`.
+     */
+    contentClassName?: string;
 }
 /**
  * Modal component
@@ -1033,8 +1041,19 @@ interface ModalProps {
  *     <Button variant="primary" onClick={handleConfirm}>Confirm</Button>
  *   </footer>
  * </Modal>
+ *
+ * @example
+ * // Custom width override
+ * <Modal
+ *   isOpen={open}
+ *   onClose={() => setOpen(false)}
+ *   title="Report"
+ *   contentClassName="max-w-[1200px]"
+ * >
+ *   ...
+ * </Modal>
  */
-declare function Modal({ isOpen, onClose, title, children, footer, size, zIndex, className, }: ModalProps): react_jsx_runtime.JSX.Element | null;
+declare function Modal({ isOpen, onClose, title, children, footer, size, zIndex, className, contentClassName, }: ModalProps): react_jsx_runtime.JSX.Element | null;
 /**
  * ModalButton component
  * @deprecated Use Button component from @optilogic/core instead

package/dist/index.js

@@ -2091,7 +2091,8 @@ function Modal({
   footer,
   size = "md",
   zIndex = 50,
-  className
+  className,
+  contentClassName
 }) {
   React20.useEffect(() => {
     if (!isOpen) return;
@@ -2117,7 +2118,10 @@ function Modal({
   const sizeClasses = {
     sm: "max-w-md",
     md: "max-w-lg",
-    lg: "max-w-2xl"
+    lg: "max-w-2xl",
+    xl: "max-w-4xl",
+    "2xl": "max-w-6xl",
+    full: "max-w-[95vw]"
   };
   return /* @__PURE__ */ jsxs(
     "div",
@@ -2135,7 +2139,8 @@ function Modal({
               "bg-card border border-border rounded-lg shadow-lg",
               "flex flex-col",
               "max-h-[90vh]",
-              sizeClasses[size]
+              sizeClasses[size],
+              contentClassName
             ),
             onClick: (e) => e.stopPropagation(),
             children: [
@@ -6777,7 +6782,7 @@ function applyTheme(theme, targetElement) {
   );
   element.style.setProperty(
     "--hover",
-    `${hslTheme.hover ?? deriveHoverChannels(theme, hslTheme)} / 0.12`
+    `${hslTheme.hover ?? deriveHoverChannels(theme, hslTheme)} / 0.18`
   );
   element.style.setProperty("--chart-1", hslTheme.chart1);
   element.style.setProperty("--chart-2", hslTheme.chart2);