flikkui 0.2.0-beta.2 → 0.2.0-beta.5

package/dist/components/core/Card/Card.js

@@ -7,12 +7,18 @@ import { CardDescription } from './CardDescription.js';
 import { CardContent } from './CardContent.js';
 import { CardFooter } from './CardFooter.js';
 
-const CardRoot = React__default.forwardRef(({ children, className, theme: customTheme = {}, ...props }, ref) => {
+const CardRoot = React__default.forwardRef(({ children, className, theme: customTheme = {}, title, description, footer, darkMode = false, ...props }, ref) => {
     const theme = {
         ...cardTheme,
         ...customTheme,
     };
-    return (React__default.createElement("div", { ref: ref, className: cn(theme.baseStyle, className), ...props }, children));
+    const hasHeader = title || description;
+    return (React__default.createElement("div", { ref: ref, className: cn(theme.baseStyle, darkMode && "dark", className), ...props },
+        hasHeader && (React__default.createElement("div", { className: theme.headerStyle },
+            title && React__default.createElement("div", { className: theme.titleStyle }, title),
+            description && React__default.createElement("div", { className: theme.descriptionStyle }, description))),
+        hasHeader ? (React__default.createElement("div", { className: theme.contentStyle }, children)) : (children),
+        footer && React__default.createElement("div", { className: theme.footerStyle }, footer)));
 });
 CardRoot.displayName = 'Card';
 // Create compound component with proper typing

package/dist/components/core/Card/Card.theme.js

@@ -1,5 +1,5 @@
 const cardTheme = {
-    baseStyle: "rounded-xl overflow-hidden bg-[var(--color-background)] border border-[var(--color-border)] shadow-xs ",
+    baseStyle: "rounded-xl overflow-hidden bg-white border border-[var(--color-border)] shadow-xs dark:bg-[var(--color-background-secondary)]",
     headerStyle: "flex flex-col space-y-1.5 p-4",
     titleStyle: "text-base font-semibold leading-none text-[var(--color-text-primary)]",
     descriptionStyle: "text-sm text-[var(--color-text-muted)]",

package/dist/components/core/Card/Card.types.d.ts

@@ -15,7 +15,7 @@ export interface CardThemeOverrides {
     contentStyle?: string;
     footerStyle?: string;
 }
-export interface CardProps extends HTMLAttributes<HTMLDivElement> {
+export interface CardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
     /**
      * The content to be displayed inside the card
      */
@@ -28,6 +28,29 @@ export interface CardProps extends HTMLAttributes<HTMLDivElement> {
      * Component-level theme overrides
      */
     theme?: CardThemeOverrides;
+    /**
+     * Card title - auto-generates header when provided
+     * Use this for simple cards instead of Card.Header/Card.Title
+     */
+    title?: ReactNode;
+    /**
+     * Card description - displayed below title in auto-generated header
+     * Use this for simple cards instead of Card.Header/Card.Description
+     */
+    description?: ReactNode;
+    /**
+     * Card footer content - auto-generates footer when provided
+     * Use this for simple cards instead of Card.Footer
+     */
+    footer?: ReactNode;
+    /**
+     * Force dark mode styling for the component. Use when placing the component
+     * on a dark background while the page is in light mode. This applies the
+     * 'dark' class to the container, making text, borders, and other elements
+     * use light colors for visibility.
+     * @default false
+     */
+    darkMode?: boolean;
 }
 export interface CardComponent extends ForwardRefExoticComponent<CardProps & RefAttributes<HTMLDivElement>> {
     Header: ForwardRefExoticComponent<CardHeaderProps & RefAttributes<HTMLDivElement>>;

package/dist/components/core/Drawer/Drawer.d.ts

@@ -2,7 +2,7 @@ import React from "react";
 import { DrawerProps, DrawerContextValue } from "./Drawer.types";
 export declare const useDrawerContext: () => DrawerContextValue;
 export declare const Drawer: {
-    ({ isOpen, onClose, position, size, closeOnOverlayClick, closeOnEsc, showCloseButton, children, className, theme: themeOverrides, ...props }: DrawerProps): React.ReactPortal;
+    ({ isOpen, onClose, position, size, closeOnOverlayClick, closeOnEsc, showCloseButton, children, className, theme: themeOverrides, ...props }: DrawerProps): React.JSX.Element;
     displayName: string;
 } & {
     Header: {

package/dist/components/core/Drawer/Drawer.js

@@ -1,9 +1,8 @@
-import React__default, { createContext, useCallback, useEffect, useContext } from 'react';
-import { createPortal } from 'react-dom';
-import { AnimatePresence, motion } from 'motion/react';
+import React__default, { createContext, useContext } from 'react';
 import { cn } from '../../../utils/cn.js';
-import { drawerTheme, drawerSizeVariants, drawerPositionVariantsFullWidth, drawerPositionVariantsWithMargin } from './Drawer.theme.js';
-import { drawerOverlayAnimations, getDrawerContentAnimations } from './Drawer.animations.js';
+import { Overlay } from '../../effects/Overlay/Overlay.js';
+import { drawerSizeVariants, drawerPositionVariantsFullWidth, drawerPositionVariantsWithMargin, drawerTheme } from './Drawer.theme.js';
+import { getDrawerContentAnimations, drawerOverlayAnimations } from './Drawer.animations.js';
 import { DrawerHeader } from './DrawerHeader.js';
 import { DrawerContent } from './DrawerContent.js';
 import { DrawerFooter } from './DrawerFooter.js';
@@ -17,30 +16,6 @@ const useDrawerContext = () => {
     return ctx;
 };
 const DrawerRoot = ({ isOpen, onClose, position = "right", size = "md", closeOnOverlayClick = true, closeOnEsc = true, showCloseButton = true, children, className, theme: themeOverrides, ...props }) => {
-    // Handle ESC key
-    const handleEscKey = useCallback((event) => {
-        if (event.key === "Escape" && closeOnEsc) {
-            onClose();
-        }
-    }, [closeOnEsc, onClose]);
-    // Handle overlay click
-    const handleOverlayClick = useCallback((event) => {
-        if (event.target === event.currentTarget && closeOnOverlayClick) {
-            onClose();
-        }
-    }, [closeOnOverlayClick, onClose]);
-    // Setup event listeners
-    useEffect(() => {
-        if (isOpen) {
-            document.addEventListener("keydown", handleEscKey);
-            // Prevent body scroll
-            document.body.style.overflow = "hidden";
-            return () => {
-                document.removeEventListener("keydown", handleEscKey);
-                document.body.style.overflow = "unset";
-            };
-        }
-    }, [isOpen, handleEscKey]);
     // Merge theme with overrides
     const theme = {
         ...drawerTheme,
@@ -66,17 +41,12 @@ const DrawerRoot = ({ isOpen, onClose, position = "right", size = "md", closeOnO
     const positionVariant = size === "full"
         ? drawerPositionVariantsFullWidth[position]
         : drawerPositionVariantsWithMargin[position];
-    // Detect dark mode from document
-    const isDarkMode = typeof document !== "undefined" &&
-        (document.documentElement.classList.contains("dark") ||
-            document.body.classList.contains("dark") ||
-            document.querySelector(".dark") !== null);
-    const drawerContent = (React__default.createElement(DrawerContext.Provider, { value: contextValue },
-        React__default.createElement(AnimatePresence, null, isOpen && (React__default.createElement(motion.div, { className: cn(isDarkMode && "dark", theme.overlay), onClick: handleOverlayClick, variants: drawerOverlayAnimations, initial: "initial", animate: "animate", exit: "exit" },
-            React__default.createElement(motion.div, { className: cn(theme.container, positionVariant, size !== "full" && sizeVariant, className), variants: getDrawerContentAnimations(position), initial: "initial", animate: "animate", exit: "exit", onClick: (e) => e.stopPropagation(), ...props },
-                React__default.createElement("div", { className: cn(theme.content) }, children)))))));
-    // Render in portal
-    return createPortal(drawerContent, document.body);
+    return (React__default.createElement(Overlay, { isOpen: isOpen, onClose: onClose, closeOnOverlayClick: closeOnOverlayClick, closeOnEsc: closeOnEsc, position: "none", contentClassName: cn(theme.container, positionVariant, size !== "full" && sizeVariant, className), animations: {
+            overlay: drawerOverlayAnimations,
+            content: getDrawerContentAnimations(position),
+        }, ...props },
+        React__default.createElement(DrawerContext.Provider, { value: contextValue },
+            React__default.createElement("div", { className: theme.content }, children))));
 };
 DrawerRoot.displayName = "Drawer";
 // Attach compound subcomponents

package/dist/components/core/Drawer/Drawer.theme.js

@@ -1,5 +1,6 @@
 const drawerTheme = {
-    overlay: "fixed inset-0 bg-[var(--overlay-bg)] backdrop-blur-[var(--overlay-blur)] z-50",
+    // Note: overlay styling is now handled by the shared Overlay component
+    overlay: "",
     container: "fixed bg-[var(--color-background)] shadow-2xl shadow-black/30 " +
         "border border-[var(--color-border)] ring-6 ring-white/20 " +
         "flex flex-col overflow-hidden rounded-2xl " +

package/dist/components/core/Drawer/Drawer.types.d.ts

@@ -40,6 +40,14 @@ export interface DrawerProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
     children: React.ReactNode;
     className?: string;
     theme?: DrawerThemeOverrides;
+    /**
+     * Force dark mode styling for the component. Use when placing the component
+     * on a dark background while the page is in light mode. This applies the
+     * 'dark' class to the container, making text, borders, and other elements
+     * use light colors for visibility.
+     * @default false
+     */
+    darkMode?: boolean;
 }
 export interface DrawerHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;

package/dist/components/core/Dropdown/Dropdown.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import { DropdownProps } from "./Dropdown.types";
 export declare const Dropdown: {
-    ({ children, className, isOpen: controlledIsOpen, defaultIsOpen, onOpenChange, placement, offset, closeOnSelect, disabledKeys, selectedKeys: controlledSelectedKeys, defaultSelectedKeys, selectionMode, onAction, onSelectionChange, theme: themeOverrides, ...props }: DropdownProps): React.JSX.Element;
+    ({ children, className, isOpen: controlledIsOpen, defaultIsOpen, onOpenChange, placement, offset, closeOnSelect, disabledKeys, selectedKeys: controlledSelectedKeys, defaultSelectedKeys, selectionMode, onAction, onSelectionChange, theme: themeOverrides, darkMode, ...props }: DropdownProps): React.JSX.Element;
     displayName: string;
 } & {
     Trigger: {

package/dist/components/core/Dropdown/Dropdown.js

@@ -25,7 +25,7 @@ import { dropdownTheme } from './Dropdown.theme.js';
  * </Dropdown>
  * ```
  */
-const DropdownRoot = ({ children, className, isOpen: controlledIsOpen, defaultIsOpen = false, onOpenChange, placement = "bottom-start", offset = 4, closeOnSelect = true, disabledKeys = [], selectedKeys: controlledSelectedKeys, defaultSelectedKeys = [], selectionMode = "none", onAction, onSelectionChange, theme: themeOverrides, ...props }) => {
+const DropdownRoot = ({ children, className, isOpen: controlledIsOpen, defaultIsOpen = false, onOpenChange, placement = "bottom-start", offset = 4, closeOnSelect = true, disabledKeys = [], selectedKeys: controlledSelectedKeys, defaultSelectedKeys = [], selectionMode = "none", onAction, onSelectionChange, theme: themeOverrides, darkMode = false, ...props }) => {
     // State for uncontrolled open
     const [uncontrolledIsOpen, setUncontrolledIsOpen] = useState(defaultIsOpen);
     // State for uncontrolled selection
@@ -78,7 +78,7 @@ const DropdownRoot = ({ children, className, isOpen: controlledIsOpen, defaultIs
         theme,
     };
     return (React__default.createElement(DropdownContext.Provider, { value: contextValue },
-        React__default.createElement("div", { className: cn("dropdown", className), "data-state": isOpen ? "open" : "closed", ...props }, children)));
+        React__default.createElement("div", { className: cn("dropdown", darkMode && "dark", className), "data-state": isOpen ? "open" : "closed", ...props }, children)));
 };
 DropdownRoot.displayName = "Dropdown";
 // Export as a unified component with sub-components

package/dist/components/core/Dropdown/Dropdown.types.d.ts

@@ -32,6 +32,14 @@ export interface DropdownProps extends React.HTMLAttributes<HTMLDivElement> {
     onAction?: (key: string) => void;
     onSelectionChange?: (keys: string[]) => void;
     theme?: Partial<DropdownTheme>;
+    /**
+     * Force dark mode styling for the component. Use when placing the component
+     * on a dark background while the page is in light mode. This applies the
+     * 'dark' class to the container, making text, borders, and other elements
+     * use light colors for visibility.
+     * @default false
+     */
+    darkMode?: boolean;
 }
 export interface DropdownTriggerProps {
     children: React.ReactElement;

package/dist/components/core/Metric/Metric.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
 import { MetricProps } from "./Metric.types";
-export default function Metric({ value, label, description, trendValue, trendDirection, trendChart, size, color, icon, noBorder, className, ...props }: MetricProps): React.JSX.Element;
+export default function Metric({ value, label, description, trendValue, trendDirection, trendChart, size, variant, color, icon, className, ...props }: MetricProps): React.JSX.Element;

package/dist/components/core/Metric/Metric.js

@@ -4,21 +4,25 @@ import { metricTheme } from './Metric.theme.js';
 import { Badge } from '../Badge/Badge.js';
 import { ArrowTrendingUpIcon, ArrowTrendingDownIcon } from '@heroicons/react/24/outline';
 
-function Metric({ value, label, description, trendValue, trendDirection = "up", trendChart, size = "md", color = "primary", icon, noBorder = false, className, ...props }) {
+function Metric({ value, label, description, trendValue, trendDirection = "up", trendChart, size = "md", variant = "filled", color = "primary", icon, className, ...props }) {
+    var _a;
     const trendIcon = trendDirection === "up" ? (React__default.createElement(ArrowTrendingUpIcon, { className: "size-3.5", strokeWidth: 2.5 })) : (React__default.createElement(ArrowTrendingDownIcon, { className: "size-3.5", strokeWidth: 2.5 }));
     const sizeStyles = metricTheme.sizes[size];
-    return (React__default.createElement("div", { className: cn(metricTheme.baseStyle, metricTheme.colorStyles[color], sizeStyles.container, noBorder && "border-transparent", className), "data-color": color, "data-size": size, ...props },
+    const variantStyles = metricTheme.variants[variant];
+    const variantColorStyles = metricTheme.variantColors[variant] || "";
+    const iconStyles = ((_a = metricTheme.iconContainerVariantColors[variant]) === null || _a === void 0 ? void 0 : _a[color]) || "";
+    return (React__default.createElement("div", { className: cn(metricTheme.baseStyle, variantStyles, variantColorStyles, sizeStyles.container, className), "data-size": size, ...props },
         React__default.createElement("div", { className: "flex flex-col gap-3 " },
             React__default.createElement("div", { className: cn("flex items-start gap-3", sizeStyles.contentPadding) },
-                icon && (React__default.createElement("div", { className: cn(metricTheme.iconContainerStyle, metricTheme.iconContainerColorStyles[color], sizeStyles.iconContainer), "data-color": color }, icon)),
+                icon && (React__default.createElement("div", { className: cn(metricTheme.iconContainerStyle, iconStyles, sizeStyles.iconContainer) }, icon)),
                 React__default.createElement("div", { className: "flex flex-col flex-1" },
                     React__default.createElement("div", { className: cn(metricTheme.labelStyle, sizeStyles.label) }, label),
                     React__default.createElement("div", { className: "flex items-center gap-2" },
                         React__default.createElement("div", { className: cn(metricTheme.valueStyle, sizeStyles.value) }, value),
                         trendValue && (React__default.createElement("div", { className: "flex items-center gap-1" },
                             React__default.createElement("div", { className: cn("rounded-full p-1 flex flex-shrink-0 w-fit h-fit", trendDirection === "up"
-                                    ? "bg-[var(--color-success-100)] text-[var(--color-success)]"
-                                    : "bg-[var(--color-danger-100)] text-[var(--color-danger)]") }, trendIcon),
+                                    ? "bg-[var(--color-success-100)] text-[var(--color-success)] dark:bg-[var(--color-success-100)]/20"
+                                    : "bg-[var(--color-danger-100)] text-[var(--color-danger)] dark:bg-[var(--color-danger-100)]/20") }, trendIcon),
                             React__default.createElement(Badge, { color: trendDirection === "up" ? "success" : "danger", variant: "ghost", className: cn("!bg-transparent p-0 font-semibold !gap-1 !ring-0", trendDirection === "up"
                                     ? "!text-[var(--color-success)]"
                                     : "!text-[var(--color-danger)]") }, trendValue)))),

package/dist/components/core/Metric/Metric.theme.d.ts

@@ -1,6 +1,6 @@
 import { MetricTheme } from "./Metric.types";
 /**
  * Default theme for the Metric component
- * Following Button component pattern with data attributes
+ * Uses variant-first color organization for reliable dark mode support
  */
 export declare const metricTheme: MetricTheme;

package/dist/components/core/Metric/Metric.theme.js

@@ -1,35 +1,45 @@
 /**
  * Default theme for the Metric component
- * Following Button component pattern with data attributes
+ * Uses variant-first color organization for reliable dark mode support
  */
 const metricTheme = {
-    // Base container styles
-    baseStyle: "rounded-2xl glass-effect transition-colors duration-200 overflow-hidden",
-    // Container border colors
-    colorStyles: {
-        // neutral: 'data-[color=neutral]:border-[var(--color-border)]',
-        // primary: 'data-[color=primary]:border-[var(--color-border)]',
-        // success: 'data-[color=success]:border-[var(--color-border)]',
-        // warning: 'data-[color=warning]:border-[var(--color-border)]',
-        // danger: 'data-[color=danger]:border-[var(--color-border)]',
-        neutral: "",
-        primary: "",
-        success: "",
-        warning: "",
-        danger: "",
+    // Base container styles (shared across all variants)
+    baseStyle: "rounded-2xl transition-colors duration-200 overflow-hidden",
+    // Visual style variants (structure only, no colors)
+    variants: {
+        filled: "border border-[var(--color-border)]",
+        glass: "glass-effect",
     },
-    // Icon container colors - applied directly with data attributes
-    iconContainerColorStyles: {
-        neutral: "data-[color=neutral]:bg-gray-100 " +
-            "data-[color=neutral]:text-[var(--color-text-primary)]",
-        primary: "data-[color=primary]:bg-[var(--color-primary-100)] " +
-            "data-[color=primary]:text-[var(--color-primary)] data-[color=primary]:shadow-blue-500/20",
-        success: "data-[color=success]:bg-[var(--color-success-50)] " +
-            "data-[color=success]:text-[var(--color-success)] data-[color=success]:shadow-green-500/20",
-        warning: "data-[color=warning]:bg-[var(--color-warning-50)] " +
-            "data-[color=warning]:text-[var(--color-warning)] data-[color=warning]:shadow-yellow-500/20",
-        danger: "data-[color=danger]:bg-[var(--color-danger-50)] " +
-            "data-[color=danger]:text-[var(--color-danger)] data-[color=danger]:shadow-rose-400/20",
+    // Container background styles per variant (color only applies to icon)
+    variantColors: {
+        filled: "bg-white dark:bg-transparent",
+        glass: "",
+    },
+    // Icon container styles organized PER VARIANT (color applies to icon)
+    iconContainerVariantColors: {
+        filled: {
+            neutral: "bg-white text-[var(--color-text-primary)] border border-[var(--color-border)] " +
+                "dark:bg-[var(--color-background-secondary)] dark:border-0",
+            primary: "bg-white text-[var(--color-primary)] border border-[var(--color-border)] " +
+                "dark:bg-[var(--color-background-secondary)] dark:border-0",
+            success: "bg-white text-[var(--color-success)] border border-[var(--color-border)] " +
+                "dark:bg-[var(--color-background-secondary)] dark:border-0",
+            warning: "bg-white text-[var(--color-warning)] border border-[var(--color-border)] " +
+                "dark:bg-[var(--color-background-secondary)] dark:border-0",
+            danger: "bg-white text-[var(--color-danger)] border border-[var(--color-border)] " +
+                "dark:bg-[var(--color-background-secondary)] dark:border-0",
+        },
+        glass: {
+            neutral: "glass-effect-1 !ring-0 text-[var(--color-text-primary)]",
+            primary: "glass-effect-2 !ring-0 shadow-lg shadow-blue-500/10 text-[var(--color-primary)] " +
+                "dark:text-[var(--color-primary-400)]",
+            success: "glass-effect-2 !ring-0 shadow-lg shadow-green-500/10 text-[var(--color-success)] " +
+                "dark:text-[var(--color-success-400)]",
+            warning: "glass-effect-2 !ring-0 shadow-lg shadow-yellow-500/10 text-[var(--color-warning)] " +
+                "dark:text-[var(--color-warning-400)]",
+            danger: "glass-effect-2 !ring-0 shadow-lg shadow-rose-500/10 text-[var(--color-danger)] " +
+                "dark:text-[var(--color-danger-400)]",
+        },
     },
     // Size variants for container and sub-elements
     sizes: {
@@ -62,7 +72,7 @@ const metricTheme = {
     labelStyle: "font-semibold text-[var(--color-text-secondary)] mb-1",
     valueStyle: "font-bold text-[var(--color-text-primary)] tracking-tight",
     descriptionStyle: "text-[var(--color-text-secondary)]/80",
-    iconContainerStyle: "rounded-full flex items-center justify-center flex-shrink-0 p-3.5 border-t glass-effect !to-transparent !ring-0 shadow-lg",
+    iconContainerStyle: "rounded-full flex items-center justify-center flex-shrink-0 p-3.5",
 };
 
 export { metricTheme };

package/dist/components/core/Metric/Metric.types.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 export type MetricSize = 'sm' | 'md' | 'lg';
 export type MetricColor = 'neutral' | 'primary' | 'success' | 'warning' | 'danger';
+export type MetricVariant = 'filled' | 'glass';
 export type TrendDirection = 'up' | 'down';
 export interface MetricProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
@@ -34,6 +35,11 @@ export interface MetricProps extends React.HTMLAttributes<HTMLDivElement> {
      * @default 'md'
      */
     size?: MetricSize;
+    /**
+     * Visual style variant
+     * @default 'filled'
+     */
+    variant?: MetricVariant;
     /**
      * Semantic color for icon and accents
      * @default 'primary'
@@ -43,11 +49,6 @@ export interface MetricProps extends React.HTMLAttributes<HTMLDivElement> {
      * Optional icon to display
      */
     icon?: React.ReactNode;
-    /**
-     * Remove border from container
-     * @default false
-     */
-    noBorder?: boolean;
     /**
      * Custom className for styling overrides
      */
@@ -55,8 +56,9 @@ export interface MetricProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 export interface MetricTheme {
     baseStyle: string;
-    colorStyles: Record<MetricColor, string>;
-    iconContainerColorStyles: Record<MetricColor, string>;
+    variants: Record<MetricVariant, string>;
+    variantColors: Record<MetricVariant, string>;
+    iconContainerVariantColors: Record<MetricVariant, Record<MetricColor, string>>;
     sizes: Record<MetricSize, {
         container: string;
         contentPadding: string;
@@ -70,4 +72,21 @@ export interface MetricTheme {
     descriptionStyle: string;
     iconContainerStyle: string;
 }
-export type MetricThemeOverrides = Partial<MetricTheme>;
+export interface MetricThemeOverrides {
+    baseStyle?: string;
+    variants?: Partial<Record<MetricVariant, string>>;
+    variantColors?: Partial<Record<MetricVariant, string>>;
+    iconContainerVariantColors?: Partial<Record<MetricVariant, Partial<Record<MetricColor, string>>>>;
+    sizes?: Partial<Record<MetricSize, Partial<{
+        container: string;
+        contentPadding: string;
+        iconContainer: string;
+        label: string;
+        value: string;
+        description: string;
+    }>>>;
+    labelStyle?: string;
+    valueStyle?: string;
+    descriptionStyle?: string;
+    iconContainerStyle?: string;
+}

package/dist/components/core/Modal/Modal.d.ts

@@ -2,7 +2,7 @@ import React from "react";
 import { ModalProps, ModalContextValue } from "./Modal.types";
 export declare const useModalContext: () => ModalContextValue;
 export declare const Modal: {
-    ({ isOpen, onClose, size, closeOnOverlayClick, closeOnEsc, showCloseButton, children, className, theme: themeOverrides, ...props }: ModalProps): React.ReactPortal;
+    ({ isOpen, onClose, size, variant, closeOnOverlayClick, closeOnEsc, showCloseButton, children, className, theme: themeOverrides, ...props }: ModalProps): React.JSX.Element;
     displayName: string;
 } & {
     Header: {

package/dist/components/core/Modal/Modal.js

@@ -1,9 +1,8 @@
-import React__default, { createContext, useState, useCallback, useEffect, useContext } from 'react';
-import { createPortal } from 'react-dom';
-import { AnimatePresence, motion } from 'motion/react';
+import React__default, { createContext, useState, useEffect, useContext } from 'react';
 import { cn } from '../../../utils/cn.js';
+import { Overlay } from '../../effects/Overlay/Overlay.js';
 import { modalTheme, modalSizeVariants } from './Modal.theme.js';
-import { modalOverlayAnimations, modalContentAnimations } from './Modal.animations.js';
+import { modalContentAnimations, modalOverlayAnimations } from './Modal.animations.js';
 import { ModalHeader } from './ModalHeader.js';
 import { ModalTitle } from './ModalTitle.js';
 import { ModalDescription } from './ModalDescription.js';
@@ -18,41 +17,24 @@ const useModalContext = () => {
         throw new Error("Modal compound components must be used within <Modal>");
     return ctx;
 };
-const ModalRoot = ({ isOpen, onClose, size = "md", closeOnOverlayClick = true, closeOnEsc = true, showCloseButton = true, children, className, theme: themeOverrides, ...props }) => {
+const ModalRoot = ({ isOpen, onClose, size = "md", variant = "default", closeOnOverlayClick = true, closeOnEsc = true, showCloseButton = true, children, className, theme: themeOverrides, ...props }) => {
+    var _a;
     // State for tracking if modal body is scrollable
     const [isBodyScrollable, setIsBodyScrollable] = useState(false);
-    // Handle ESC key
-    const handleEscKey = useCallback((event) => {
-        if (event.key === "Escape" && closeOnEsc) {
-            onClose();
-        }
-    }, [closeOnEsc, onClose]);
-    // Handle overlay click
-    const handleOverlayClick = useCallback((event) => {
-        if (event.target === event.currentTarget && closeOnOverlayClick) {
-            onClose();
-        }
-    }, [closeOnOverlayClick, onClose]);
-    // Setup event listeners
+    // Reset scroll state when modal closes
     useEffect(() => {
-        if (isOpen) {
-            document.addEventListener("keydown", handleEscKey);
-            // Prevent body scroll
-            document.body.style.overflow = "hidden";
-            return () => {
-                document.removeEventListener("keydown", handleEscKey);
-                document.body.style.overflow = "unset";
-            };
-        }
-        else {
-            // Reset scroll state when modal closes
+        if (!isOpen) {
             setIsBodyScrollable(false);
         }
-    }, [isOpen, handleEscKey]);
+    }, [isOpen]);
     // Merge theme with overrides
     const theme = {
         ...modalTheme,
         ...(themeOverrides || {}),
+        containerVariants: {
+            ...modalTheme.containerVariants,
+            ...((themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.containerVariants) || {}),
+        },
     };
     // Context value
     const contextValue = {
@@ -66,16 +48,11 @@ const ModalRoot = ({ isOpen, onClose, size = "md", closeOnOverlayClick = true, c
         isBodyScrollable,
         setIsBodyScrollable,
     };
-    // Detect dark mode from document
-    const isDarkMode = typeof document !== "undefined" &&
-        (document.documentElement.classList.contains("dark") ||
-            document.body.classList.contains("dark") ||
-            document.querySelector(".dark") !== null);
-    const modalContent = (React__default.createElement(ModalContext.Provider, { value: contextValue },
-        React__default.createElement(AnimatePresence, null, isOpen && (React__default.createElement(motion.div, { className: cn(isDarkMode && "dark", theme.overlay), onClick: handleOverlayClick, variants: modalOverlayAnimations, initial: "initial", animate: "animate", exit: "exit" },
-            React__default.createElement(motion.div, { className: cn(theme.container, modalSizeVariants[size], className), variants: modalContentAnimations, initial: "initial", animate: "animate", exit: "exit", ...props }, children))))));
-    // Render in portal
-    return createPortal(modalContent, document.body);
+    return (React__default.createElement(Overlay, { isOpen: isOpen, onClose: onClose, closeOnOverlayClick: closeOnOverlayClick, closeOnEsc: closeOnEsc, position: "center", contentClassName: cn(theme.container, (_a = theme.containerVariants) === null || _a === void 0 ? void 0 : _a[variant], modalSizeVariants[size], className), animations: {
+            overlay: modalOverlayAnimations,
+            content: modalContentAnimations,
+        }, ...props },
+        React__default.createElement(ModalContext.Provider, { value: contextValue }, children)));
 };
 ModalRoot.displayName = "Modal";
 // Attach compound subcomponents

package/dist/components/core/Modal/Modal.theme.js

@@ -1,10 +1,15 @@
 const modalTheme = {
-    overlay: "fixed inset-0 bg-[var(--overlay-bg)] backdrop-blur-[var(--overlay-blur)] z-50 flex items-center justify-center",
-    container: "relative glass-effect-2 w-full max-h-[calc(100vh-2rem)] !bg-[var(--color-background)]/90 rounded-[var(--modal-rounded)] shadow-2xl shadow-black/30 !ring-4 !ring-white/10 flex flex-col my-4 min-h-0 overflow-hidden ",
+    // Note: overlay styling is now handled by the shared Overlay component
+    overlay: "",
+    container: "relative w-full max-h-[calc(100vh-2rem)] rounded-[var(--modal-rounded)] shadow-2xl shadow-black/30 flex flex-col my-4 min-h-0 overflow-hidden",
+    containerVariants: {
+        default: "bg-white !ring-4 !ring-white/10 dark:bg-[var(--color-background-secondary)]",
+        translucent: "bg-gradient-to-b from-white/90 to-white/70 backdrop-blur-xl ring-4 ring-white/20 border-t border-white dark:border-white/20 dark:from-neutral-900/80 dark:to-neutral-900/60 dark:ring-neutral-500/20 ",
+    },
     header: "flex items-start justify-between p-6 pb-0 shrink-0 border-b border-transparent gap-6 relative",
     headerContent: "flex flex-col items-start gap-2 flex-1",
     title: "text-base leading-6 font-semibold text-[var(--color-text-primary)]",
-    description: "text-sm text-[var(--color-text-muted)] mt-0.5",
+    description: "text-sm text-[var(--color-text-secondary)] mt-0.5",
     body: "flex-1 overflow-y-auto p-6 pb-3",
     footer: "flex items-center justify-end gap-2 p-6 py-3 border-t border-transparent",
 };

package/dist/components/core/Modal/Modal.types.d.ts

@@ -1,8 +1,10 @@
 import React from "react";
 export type ModalSize = "sm" | "md" | "lg" | "xl" | "full";
+export type ModalVariant = "default" | "translucent";
 export interface ModalTheme {
     overlay: string;
     container: string;
+    containerVariants: Record<ModalVariant, string>;
     header: string;
     headerContent: string;
     title: string;
@@ -13,6 +15,7 @@ export interface ModalTheme {
 export interface ModalThemeOverrides {
     overlay?: string;
     container?: string;
+    containerVariants?: Partial<Record<ModalVariant, string>>;
     header?: string;
     headerContent?: string;
     title?: string;
@@ -35,12 +38,27 @@ export interface ModalProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "
     isOpen: boolean;
     onClose: () => void;
     size?: ModalSize;
+    /**
+     * Visual variant of the modal container.
+     * - `default`: Solid background with subtle ring
+     * - `translucent`: Frosted glass effect with reduced opacity and backdrop blur
+     * @default "default"
+     */
+    variant?: ModalVariant;
     closeOnOverlayClick?: boolean;
     closeOnEsc?: boolean;
     showCloseButton?: boolean;
     children: React.ReactNode;
     className?: string;
     theme?: ModalThemeOverrides;
+    /**
+     * Force dark mode styling for the component. Use when placing the component
+     * on a dark background while the page is in light mode. This applies the
+     * 'dark' class to the container, making text, borders, and other elements
+     * use light colors for visibility.
+     * @default false
+     */
+    darkMode?: boolean;
 }
 export interface ModalHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;

package/dist/components/core/Modal/index.d.ts

@@ -1,2 +1,2 @@
 export { Modal } from "./Modal";
-export type { ModalProps, ModalSize, ModalThemeOverrides } from "./Modal.types";
+export type { ModalProps, ModalSize, ModalVariant, ModalThemeOverrides } from "./Modal.types";

package/dist/components/core/Notification/Notification.js

@@ -37,6 +37,7 @@ import '../Modal/Modal.js';
 import '../Pagination/Pagination.js';
 import '../Popover/Popover.js';
 import '../Popover/PopoverContext.js';
+import '../Progress/Progress.js';
 import '../ProgressiveBlur/ProgressiveBlur.js';
 import '../Segmented/Segmented.js';
 import '../Skeleton/Skeleton.js';
@@ -50,6 +51,7 @@ import '../Tabs/TabsContext.js';
 import '../Tooltip/Tooltip.js';
 import '../Tooltip/Tooltip.animations.js';
 import '../Tree/Tree.js';
+import '../Tag/Tag.js';
 import '../Alert/Alert.js';
 import '../Toast/Toast.js';
 import '../Toast/ToastProvider.js';