@flikk/ui 1.0.0-beta.27 → 1.0.0-beta.29

package/dist/components/core/ContextMenu/ContextMenuSubTrigger.js

@@ -53,7 +53,7 @@ const ContextMenuSubTrigger = React__default.forwardRef(({ children, className,
             ref.current = el;
         }
     }, [ref, triggerRef]);
-    return (jsxs("div", { ref: handleRef, role: "menuitem", "aria-haspopup": "true", "aria-expanded": isOpen, "aria-disabled": disabled, "data-state": isOpen ? "open" : "closed", "data-disabled": disabled, tabIndex: disabled ? undefined : -1, className: cn(theme.subTriggerStyle, theme.itemFocusStyle, className), onMouseEnter: handleMouseEnter, onKeyDown: handleKeyDown, ...props, children: [jsx("span", { className: "flex-1 truncate", children: children }), jsx(ChevronRightIcon, { className: "absolute right-2 top-1/2 -translate-y-1/2 w-4 h-4 text-[var(--color-text-muted)]", "aria-hidden": "true" })] }));
+    return (jsxs("div", { ref: handleRef, role: "menuitem", "aria-haspopup": "true", "aria-expanded": isOpen, "aria-disabled": disabled, "data-state": isOpen ? "open" : "closed", "data-disabled": disabled, tabIndex: disabled ? undefined : -1, className: cn(theme.subTriggerStyle, theme.itemFocusStyle, className), onMouseEnter: handleMouseEnter, onKeyDown: handleKeyDown, ...props, children: [jsx("span", { className: "flex-1 truncate", children: children }), jsx(ChevronRightIcon, { className: "absolute right-2 top-1/2 -translate-y-1/2 size-3 text-[var(--color-text-secondary)]", "aria-hidden": "true", strokeWidth: 2 })] }));
 });
 ContextMenuSubTrigger.displayName = "ContextMenuSubTrigger";
 

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

@@ -2,14 +2,14 @@ import { menuItemTheme } from '../MenuItem/MenuItem.theme.js';
 
 const dropdownTheme = {
     // Menu container - similar to Popover but with menu-specific styling
-    menuStyle: "min-w-[200px] max-h-[400px] overflow-y-auto rounded-[var(--dropdown-radius)] border border-[var(--color-border)] bg-[var(--color-surface-overlay)] shadow-real-xl focus:outline-none flex disabled:cursor-not-allowed " +
-        "dark:bg-[var(--color-surface-overlay)]",
+    menuStyle: "min-w-[200px] max-h-[400px] overflow-y-auto rounded-[var(--dropdown-radius)] border border-[var(--color-border)] bg-[var(--color-surface-overlay)]/80 backdrop-blur-md shadow-real-xl focus:outline-none flex disabled:cursor-not-allowed " +
+        "dark:bg-[var(--color-surface-overlay)]/80",
     // Delegate item styles to shared MenuItem theme
     itemBaseStyle: menuItemTheme.baseStyle,
     itemDangerStyle: menuItemTheme.dangerStyle,
     itemFocusStyle: menuItemTheme.focusStyle,
     // Section title styling
-    sectionTitleStyle: "px-2 py-1.5 text-xs font-semibold text-[var(--color-text-muted)] uppercase tracking-tight",
+    sectionTitleStyle: "px-2 py-1.5 text-[11px] font-medium text-[var(--color-text-secondary)] uppercase tracking-tight",
     // Section container styling
     sectionStyle: "py-1",
     // Separator between sections (--color-border flips for dark mode on its own)

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

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import React__default, { useRef, useState, useCallback, useEffect } from 'react';
+import React__default, { useRef, useState, useEffect, useCallback } from 'react';
 import { useReducedMotion, AnimatePresence, motion } from 'motion/react';
 import { createPortal } from 'react-dom';
 import { cn } from '../../../utils/cn.js';
@@ -23,7 +23,7 @@ const DropdownMenu = React__default.forwardRef(({ children, className, animation
     const [typeaheadString, setTypeaheadString] = useState("");
     const typeaheadTimeoutRef = useRef(null);
     // Use the positioning hook from Popover/Select
-    const { position, cssVariables, contentRef: portalContentRef, } = useSelectPortal({
+    const { position, cssVariables, contentRef: portalContentRef, actualPlacement, } = useSelectPortal({
         triggerRef,
         isOpen: isOpen || false,
         placement,
@@ -31,6 +31,22 @@ const DropdownMenu = React__default.forwardRef(({ children, className, animation
         autoWidth: false,
         stickyTracking: true,
     });
+    // Escape must close the menu even when focus never entered it — after a
+    // mouse-open, focus stays on the trigger, so the menu's own onKeyDown
+    // (which also handles Escape) never fires.
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const onDocKeyDown = (e) => {
+            var _a;
+            if (e.key !== "Escape")
+                return;
+            onOpenChange(false);
+            (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        };
+        document.addEventListener("keydown", onDocKeyDown);
+        return () => document.removeEventListener("keydown", onDocKeyDown);
+    }, [isOpen, onOpenChange, triggerRef]);
     // Get all menu items (not separators or sections)
     const getMenuItems = useCallback(() => {
         if (!localRef.current)
@@ -121,21 +137,32 @@ const DropdownMenu = React__default.forwardRef(({ children, className, animation
         }
         onOpenChange(false);
     });
-    // Focus first item when menu opens
+    // Focus first item when menu opens. Retry until focus actually LANDS:
+    // useSelectPortal keeps the menu `visibility: hidden` until positioning
+    // completes, and focus() on a hidden element is a silent no-op — a
+    // single-shot focus fires inside that window, leaving focus on the
+    // trigger, which kills the whole keyboard layer (arrows, Enter, and
+    // typeahead all hang off focus being inside the menu).
     useEffect(() => {
-        if (isOpen) {
-            // Focus first item after a small delay to allow render
-            requestAnimationFrame(() => {
-                const items = getMenuItems();
-                if (items.length > 0) {
-                    focusItem(0);
-                }
-            });
-        }
-        else {
+        if (!isOpen) {
             setFocusedIndex(-1);
             setTypeaheadString("");
+            return;
         }
+        let raf = 0;
+        let tries = 0;
+        const tryFocus = () => {
+            const items = getMenuItems();
+            if (items.length > 0) {
+                focusItem(0);
+                if (document.activeElement === items[0])
+                    return; // focus landed
+            }
+            if (++tries < 10)
+                raf = requestAnimationFrame(tryFocus);
+        };
+        raf = requestAnimationFrame(tryFocus);
+        return () => cancelAnimationFrame(raf);
     }, [isOpen, getMenuItems, focusItem]);
     // Combine refs
     const handleRef = useCallback((el) => {
@@ -156,23 +183,23 @@ const DropdownMenu = React__default.forwardRef(({ children, className, animation
                 el;
         }
     }, [ref, menuRef, portalContentRef]);
-    // Animation variants
+    // Animation variants — enter/exit from the trigger's side. A menu opening
+    // above the trigger slides up into place and scales from its bottom edge;
+    // a hardcoded top-down drop reads backwards there. `actualPlacement` (not
+    // the prop) so a viewport-flipped menu animates from its real side.
+    const side = (actualPlacement || placement || "bottom").split("-")[0];
+    const closedShift = side === "top"
+        ? { y: 10 }
+        : side === "left"
+            ? { x: 10 }
+            : side === "right"
+                ? { x: -10 }
+                : { y: -10 };
+    const transformOrigin = side === "top" ? "bottom" : side === "left" ? "right" : side === "right" ? "left" : "top";
     const menuVariants = {
-        hidden: {
-            opacity: 0,
-            scale: 0.95,
-            y: -10,
-        },
-        visible: {
-            opacity: 1,
-            scale: 1,
-            y: 0,
-        },
-        exit: {
-            opacity: 0,
-            scale: 0.95,
-            y: -10,
-        },
+        hidden: { opacity: 0, scale: 0.95, x: 0, y: 0, ...closedShift },
+        visible: { opacity: 1, scale: 1, x: 0, y: 0 },
+        exit: { opacity: 0, scale: 0.95, x: 0, y: 0, ...closedShift },
     };
     // Extract DOM props to avoid type conflicts with Framer Motion
     const { onAnimationStart, onAnimationEnd, onDrag, onDragStart, onDragEnd, ...domProps } = props;
@@ -180,6 +207,7 @@ const DropdownMenu = React__default.forwardRef(({ children, className, animation
                 ...cssVariables,
                 top: `${position.top}px`,
                 left: `${position.left}px`,
+                transformOrigin,
             }, id: menuId, role: "menu", "aria-label": ariaLabel || undefined, "aria-orientation": horizontal ? "horizontal" : "vertical", tabIndex: -1, onKeyDown: handleKeyDown, variants: shouldReduceMotion || !animation ? {} : menuVariants, initial: shouldReduceMotion || !animation ? undefined : "hidden", animate: shouldReduceMotion || !animation ? undefined : "visible", exit: shouldReduceMotion || !animation ? undefined : "exit", transition: shouldReduceMotion || !animation
                 ? { duration: 0 }
                 : {

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

@@ -0,0 +1,5 @@
+import React from "react";
+import type { HeroCardProps } from "./HeroCard.types";
+/** Default backdrop — one of the bundled `@flikk/ui/bg/*` blobs. */
+export declare const HERO_CARD_DEFAULT_IMAGE = "/bg/1.webp";
+export declare const HeroCard: React.ForwardRefExoticComponent<HeroCardProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/core/HeroCard/HeroCard.js

@@ -0,0 +1,99 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default, { useRef, useCallback, useEffect } from 'react';
+import { useReducedMotion } from 'motion/react';
+import { cn } from '../../../utils/cn.js';
+import { heroCardTheme } from './HeroCard.theme.js';
+
+/** Default backdrop — one of the bundled `@flikk/ui/bg/*` blobs. */
+const HERO_CARD_DEFAULT_IMAGE = "/bg/1.webp";
+const HeroCard = React__default.forwardRef(({ image = HERO_CARD_DEFAULT_IMAGE, imageBlur = 40, imageScale = 1.5, imageOpacity = 0.25, imageBlend = "multiply", imagePosition = "center", parallax = false, parallaxIntensity = 32, contentClassName, theme, className, children, ...rest }, ref) => {
+    const outerRef = useRef(null);
+    const bgRef = useRef(null);
+    // Merge the forwarded ref with our internal one (we need the node for the listener)
+    const setOuterRef = useCallback((node) => {
+        outerRef.current = node;
+        if (typeof ref === "function")
+            ref(node);
+        else if (ref)
+            ref.current = node;
+    }, [ref]);
+    const prefersReducedMotion = useReducedMotion();
+    const parallaxOn = parallax && !!image && !prefersReducedMotion;
+    // Resting transform — also the SSR/no-JS value; the parallax loop overrides it imperatively.
+    const baseTransform = imageScale !== 1 ? `scale(${imageScale})` : undefined;
+    useEffect(() => {
+        const outer = outerRef.current;
+        const bg = bgRef.current;
+        if (!parallaxOn || !outer || !bg)
+            return;
+        let disposed = false;
+        // Travel can't exceed the overscan or the card edge would show through.
+        const maxTravel = (size) => Math.min(parallaxIntensity, ((imageScale - 1) / 2) * size);
+        let pointer = null;
+        const st = { tx: 0, ty: 0, x: 0, y: 0, raf: 0, running: false, last: 0 };
+        const apply = () => {
+            bg.style.transform = `translate3d(${st.x.toFixed(2)}px, ${st.y.toFixed(2)}px, 0) scale(${imageScale})`;
+        };
+        const loop = (now) => {
+            if (disposed)
+                return;
+            const dt = Math.min(Math.max((now - st.last) / 1000, 0.001), 0.05);
+            st.last = now;
+            const a = 1 - Math.exp(-9 * dt); // dt-normalized easing — same feel at 60/120Hz
+            st.x += (st.tx - st.x) * a;
+            st.y += (st.ty - st.y) * a;
+            apply();
+            if (Math.abs(st.tx - st.x) < 0.1 && Math.abs(st.ty - st.y) < 0.1 && !pointer) {
+                st.running = false;
+                return; // settled at rest, pointer gone → idle (no per-frame cost)
+            }
+            st.raf = requestAnimationFrame(loop);
+        };
+        const start = () => {
+            if (st.running || disposed)
+                return;
+            st.running = true;
+            st.last = performance.now();
+            st.raf = requestAnimationFrame(loop);
+        };
+        const onMove = (e) => {
+            if (e.pointerType !== "mouse")
+                return;
+            const r = outer.getBoundingClientRect();
+            pointer = { x: e.clientX, y: e.clientY };
+            const nx = (e.clientX - r.left) / r.width - 0.5; // -0.5 … 0.5
+            const ny = (e.clientY - r.top) / r.height - 0.5;
+            // Opposite the cursor → parallax depth; full intensity at the edges.
+            st.tx = -nx * 2 * maxTravel(r.width);
+            st.ty = -ny * 2 * maxTravel(r.height);
+            start();
+        };
+        const onLeave = () => {
+            pointer = null;
+            st.tx = 0;
+            st.ty = 0;
+            start(); // ease back to rest, then the loop self-stops
+        };
+        outer.addEventListener("pointermove", onMove, { passive: true });
+        outer.addEventListener("pointerleave", onLeave);
+        return () => {
+            disposed = true;
+            outer.removeEventListener("pointermove", onMove);
+            outer.removeEventListener("pointerleave", onLeave);
+            cancelAnimationFrame(st.raf);
+            bg.style.transform = baseTransform !== null && baseTransform !== void 0 ? baseTransform : "";
+        };
+    }, [parallaxOn, imageScale, parallaxIntensity, baseTransform]);
+    return (jsxs("div", { ref: setOuterRef, className: cn(heroCardTheme.baseStyle, theme === null || theme === void 0 ? void 0 : theme.baseStyle, className), ...rest, children: [image && (jsx("div", { ref: bgRef, "aria-hidden": "true", className: cn(heroCardTheme.imageStyle, theme === null || theme === void 0 ? void 0 : theme.imageStyle), style: {
+                    backgroundImage: `url(${image})`,
+                    backgroundPosition: imagePosition,
+                    // Numeric knobs go inline — no dynamic Tailwind classes to purge-miss.
+                    filter: imageBlur > 0 ? `blur(${imageBlur}px)` : undefined,
+                    transform: baseTransform,
+                    opacity: imageOpacity,
+                    mixBlendMode: imageBlend,
+                } })), jsx("div", { className: cn(heroCardTheme.contentStyle, theme === null || theme === void 0 ? void 0 : theme.contentStyle, contentClassName), children: children })] }));
+});
+HeroCard.displayName = "HeroCard";
+
+export { HERO_CARD_DEFAULT_IMAGE, HeroCard };

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

@@ -0,0 +1,3 @@
+import type { HeroCardThemeOverrides } from "./HeroCard.types";
+export type HeroCardTheme = Required<HeroCardThemeOverrides>;
+export declare const heroCardTheme: HeroCardTheme;

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

@@ -0,0 +1,8 @@
+const heroCardTheme = {
+    // Shares Card's radius token; gradient runs on the primary scale so it follows the app theme.
+    baseStyle: "relative overflow-hidden rounded-[calc(var(--card-radius)*2)] p-10 text-white bg-gradient-to-br from-[var(--color-primary-600)] via-[var(--color-primary-700)] to-[var(--color-primary-500)] ring-4 ring-[var(--color-primary)]/20 ",
+    imageStyle: "absolute inset-0 z-0 pointer-events-none bg-cover",
+    contentStyle: "relative z-10",
+};
+
+export { heroCardTheme };

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

@@ -0,0 +1,70 @@
+import React from "react";
+/** How the backdrop image composites over the gradient fill. */
+export type HeroCardBlendMode = "multiply" | "overlay" | "soft-light" | "hard-light" | "screen" | "luminosity" | "normal";
+export interface HeroCardThemeOverrides {
+    baseStyle?: string;
+    imageStyle?: string;
+    contentStyle?: string;
+}
+/**
+ * HeroCard — a gradient hero shell with an ambient blurred backdrop image.
+ * Children are the content (anything) and render above the backdrop.
+ *
+ * @example Default (bundled image + gradient)
+ * ```tsx
+ * <HeroCard>
+ *   <h2 className="text-3xl font-semibold">Good morning, Maya</h2>
+ * </HeroCard>
+ * ```
+ *
+ * @example Full backdrop control
+ * ```tsx
+ * <HeroCard
+ *   image="/bg/7.webp"
+ *   imageBlur={32}
+ *   imageScale={1.5}
+ *   imageOpacity={0.35}
+ *   imageBlend="overlay"
+ *   imagePosition="top right"
+ *   className="from-rose-500 via-purple-700 to-indigo-900"
+ * >
+ *   …
+ * </HeroCard>
+ * ```
+ */
+export interface HeroCardProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Backdrop image src. Defaults to the bundled `/bg/3.webp`
+     * (ship the `@flikk/ui/bg/*` assets at `/bg/` or pass your own URL).
+     * Pass `null` for a gradient-only hero.
+     */
+    image?: string | null;
+    /** Backdrop blur radius in px. @default 24 */
+    imageBlur?: number;
+    /** Backdrop scale factor — zooming the abstract blobs in/out reframes the texture. @default 1.25 */
+    imageScale?: number;
+    /** Backdrop opacity, 0–1. @default 0.5 */
+    imageOpacity?: number;
+    /** Blend mode compositing the image over the gradient. @default "multiply" */
+    imageBlend?: HeroCardBlendMode;
+    /** CSS `background-position` — e.g. `"top right"`, `"30% 70%"`. @default "center" */
+    imagePosition?: string;
+    /**
+     * On pointer hover, drift the backdrop image opposite the cursor (damped) for a
+     * parallax-depth effect. Pairs with a `TiltCard` wrapper. Mouse-driven; respects
+     * `prefers-reduced-motion`; no-op without an `image`. Travel is bounded by the
+     * `imageScale` overscan so card edges never show.
+     * @default false
+     */
+    parallax?: boolean;
+    /**
+     * Max backdrop travel in px (each direction) when `parallax` is on. Auto-clamped
+     * to the available `imageScale` overscan.
+     * @default 32
+     */
+    parallaxIntensity?: number;
+    /** className for the content wrapper (the layer lifted above the backdrop). */
+    contentClassName?: string;
+    /** Theme overrides (shadcn approach — `className` still wins). */
+    theme?: HeroCardThemeOverrides;
+}

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

@@ -0,0 +1,4 @@
+export { HeroCard, HERO_CARD_DEFAULT_IMAGE } from "./HeroCard";
+export { heroCardTheme } from "./HeroCard.theme";
+export type { HeroCardTheme } from "./HeroCard.theme";
+export type { HeroCardProps, HeroCardThemeOverrides, HeroCardBlendMode } from "./HeroCard.types";

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

@@ -2,7 +2,7 @@
  * Default theme configuration for Kbd component
  */
 const kbdTheme = {
-    baseStyle: 'inline-flex items-center justify-center leading-none font-sans font-medium rounded-[calc(var(--radius-base)*0.75)] bg-[var(--color-background-secondary)] border border-[var(--color-border)] text-[var(--color-text-secondary)] glass-effect',
+    baseStyle: 'inline-flex items-center justify-center leading-none font-sans font-medium rounded-[calc(var(--radius-base)*0.75)] bg-[var(--color-surface-raised)] border border-[var(--color-border)] text-[var(--color-text-secondary)]',
     sizes: {
         sm: 'text-xs px-1 min-w-5 h-5',
         md: 'text-xs px-1.5 min-w-6 h-6',

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

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

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

@@ -18,8 +18,7 @@ const useModalContext = () => {
         throw new Error("Modal compound components must be used within <Modal>");
     return ctx;
 };
-const ModalRoot = ({ isOpen, onClose, size = "md", variant = "default", closeOnOverlayClick = true, closeOnEsc = true, showCloseButton = true, role = "dialog", children, className, theme: themeOverrides, ...props }) => {
-    var _a;
+const ModalRoot = ({ isOpen, onClose, size = "md", closeOnOverlayClick = true, closeOnEsc = true, showCloseButton = true, role = "dialog", children, className, theme: themeOverrides, ...props }) => {
     // Generate unique IDs for ARIA linkage
     const id = useId();
     const titleId = `${id}-title`;
@@ -39,10 +38,6 @@ const ModalRoot = ({ isOpen, onClose, size = "md", variant = "default", closeOnO
     const theme = {
         ...modalTheme,
         ...(themeOverrides || {}),
-        containerVariants: {
-            ...modalTheme.containerVariants,
-            ...((themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.containerVariants) || {}),
-        },
     };
     // Context value
     const contextValue = useMemo(() => ({
@@ -59,7 +54,7 @@ const ModalRoot = ({ isOpen, onClose, size = "md", variant = "default", closeOnO
         titleId,
         subtitleId,
     }), [isOpen, onClose, size, isSizeToken, closeOnOverlayClick, closeOnEsc, showCloseButton, theme, isBodyScrollable, setIsBodyScrollable, titleId, subtitleId]);
-    return (jsx(Overlay, { isOpen: isOpen, onClose: onClose, closeOnOverlayClick: closeOnOverlayClick, closeOnEsc: closeOnEsc, position: "center", role: role, ariaModal: true, ariaLabelledBy: titleId, ariaDescribedBy: subtitleId, contentClassName: cn(theme.container, (_a = theme.containerVariants) === null || _a === void 0 ? void 0 : _a[variant], isSizeToken ? modalSizeVariants[size] : size, className), animations: {
+    return (jsx(Overlay, { isOpen: isOpen, onClose: onClose, closeOnOverlayClick: closeOnOverlayClick, closeOnEsc: closeOnEsc, position: "center", role: role, ariaModal: true, ariaLabelledBy: titleId, ariaDescribedBy: subtitleId, contentClassName: cn(theme.container, isSizeToken ? modalSizeVariants[size] : size, className), animations: {
             overlay: modalOverlayAnimations,
             content: modalContentAnimations,
         }, ...props, children: jsx(ModalContext.Provider, { value: contextValue, children: children }) }));

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

@@ -1,17 +1,13 @@
 const modalTheme = {
     // Note: overlay styling is now handled by the shared Overlay component
     overlay: "",
-    container: "relative w-full max-h-[calc(100vh-2rem)] rounded-[var(--modal-radius)] shadow-2xl shadow-black/30 flex flex-col my-4 min-h-0 overflow-hidden",
-    containerVariants: {
-        default: "bg-[var(--color-surface-raised)] ring-4 !ring-white/10 dark:bg-[var(--color-surface-raised)] border border-[var(--color-border)]",
-        translucent: "bg-gradient-to-b from-[var(--color-background)]/90 to-[var(--color-background)]/70 backdrop-blur-xl ring-4 ring-white/20 border-t border-[var(--color-border)]",
-    },
-    header: "flex items-start justify-between p-6 pb-0 shrink-0 border-b border-transparent gap-6 relative",
+    container: "relative w-full max-h-[calc(100vh-2rem)] rounded-[var(--modal-radius)] shadow-2xl shadow-black/30 flex flex-col my-4 min-h-0 overflow-hidden bg-[var(--color-surface-raised)]/80 ring-6 !ring-white/10 border border-[var(--color-border)]",
+    header: "flex items-start justify-between p-4 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)]",
     subtitle: "text-sm text-[var(--color-text-muted)] 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",
+    body: "flex-1 overflow-y-auto p-4 pb-3",
+    footer: "flex items-center justify-end gap-2 p-3 py-2 border-t border-transparent",
 };
 // Size variants for the modal container
 const modalSizeVariants = {

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

@@ -2,11 +2,9 @@ import React from "react";
 export type ModalSizeToken = "sm" | "md" | "lg" | "xl" | "full";
 /** Preset size token or any arbitrary Tailwind width class, e.g. `"w-80"`, `"w-[50vw]"` */
 export type ModalSize = ModalSizeToken | (string & {});
-export type ModalVariant = "default" | "translucent";
 export interface ModalTheme {
     overlay: string;
     container: string;
-    containerVariants: Record<ModalVariant, string>;
     header: string;
     headerContent: string;
     title: string;
@@ -17,7 +15,6 @@ export interface ModalTheme {
 export interface ModalThemeOverrides {
     overlay?: string;
     container?: string;
-    containerVariants?: Partial<Record<ModalVariant, string>>;
     header?: string;
     headerContent?: string;
     title?: string;
@@ -43,13 +40,6 @@ 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;

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

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

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

@@ -5,7 +5,7 @@ export declare const ModalStack: {
     displayName: string;
 } & {
     Modal: {
-        ({ size, variant, showCloseButton, showBackButton, onClose, onBack, children, className, theme: themeOverrides, _stackOnClose, _isBackModal, }: ModalStackModalInternalProps): import("react/jsx-runtime").JSX.Element;
+        ({ size, showCloseButton, showBackButton, onClose, onBack, children, className, theme: themeOverrides, _stackOnClose, _isBackModal, }: ModalStackModalInternalProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
 };

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { ModalSize, ModalVariant, ModalThemeOverrides } from "../Modal/Modal.types";
+import { ModalSize, ModalThemeOverrides } from "../Modal/Modal.types";
 export interface ModalStackProps {
     isOpen: boolean;
     onClose: () => void;
@@ -12,7 +12,6 @@ export interface ModalStackModalProps {
     isOpen?: boolean;
     onClose?: () => void;
     size?: ModalSize;
-    variant?: ModalVariant;
     showCloseButton?: boolean;
     showBackButton?: boolean;
     onBack?: () => void;

package/dist/components/core/ModalStack/ModalStackModal.d.ts

@@ -6,6 +6,6 @@ export interface ModalStackModalInternalProps extends ModalStackModalProps {
     _isBackModal?: boolean;
 }
 export declare const ModalStackModal: {
-    ({ size, variant, showCloseButton, showBackButton, onClose, onBack, children, className, theme: themeOverrides, _stackOnClose, _isBackModal, }: ModalStackModalInternalProps): import("react/jsx-runtime").JSX.Element;
+    ({ size, showCloseButton, showBackButton, onClose, onBack, children, className, theme: themeOverrides, _stackOnClose, _isBackModal, }: ModalStackModalInternalProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/dist/components/core/ModalStack/ModalStackModal.js

@@ -7,8 +7,7 @@ import { ArrowLeftIcon } from '@heroicons/react/24/outline';
 import { modalStackTheme } from './ModalStack.theme.js';
 import { Button } from '../Button/Button.js';
 
-const ModalStackModal = ({ size = "md", variant = "default", showCloseButton = true, showBackButton = false, onClose, onBack, children, className, theme: themeOverrides, _stackOnClose, _isBackModal, }) => {
-    var _a;
+const ModalStackModal = ({ size = "md", showCloseButton = true, showBackButton = false, onClose, onBack, children, className, theme: themeOverrides, _stackOnClose, _isBackModal, }) => {
     const id = useId();
     const titleId = `${id}-title`;
     const subtitleId = `${id}-subtitle`;
@@ -25,10 +24,6 @@ const ModalStackModal = ({ size = "md", variant = "default", showCloseButton = t
     const theme = {
         ...modalTheme,
         ...(themeOverrides || {}),
-        containerVariants: {
-            ...modalTheme.containerVariants,
-            ...((themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.containerVariants) || {}),
-        },
     };
     const contextValue = {
         isOpen: true,
@@ -44,7 +39,7 @@ const ModalStackModal = ({ size = "md", variant = "default", showCloseButton = t
         titleId,
         subtitleId,
     };
-    return (jsx(ModalContext.Provider, { value: contextValue, children: jsxs("div", { className: cn(theme.container, (_a = theme.containerVariants) === null || _a === void 0 ? void 0 : _a[variant], modalSizeVariants[size], className), role: "dialog", "aria-modal": "true", "aria-labelledby": titleId, "aria-describedby": subtitleId, children: [showBackButton && (jsx("div", { className: cn(modalStackTheme.backButton), children: jsxs(Button, { onClick: backHandler, "aria-label": "Go back", variant: "link", size: "sm", children: [jsx(ArrowLeftIcon, { className: "size-4" }), "Back"] }) })), children] }) }));
+    return (jsx(ModalContext.Provider, { value: contextValue, children: jsxs("div", { className: cn(theme.container, modalSizeVariants[size], className), role: "dialog", "aria-modal": "true", "aria-labelledby": titleId, "aria-describedby": subtitleId, children: [showBackButton && (jsx("div", { className: cn(modalStackTheme.backButton), children: jsxs(Button, { onClick: backHandler, "aria-label": "Go back", variant: "link", size: "sm", children: [jsx(ArrowLeftIcon, { className: "size-4" }), "Back"] }) })), children] }) }));
 };
 ModalStackModal.displayName = "ModalStack.Modal";
 

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

@@ -1,8 +1,8 @@
 const pageHeadingTheme = {
     baseStyle: "flex flex-col pb-6 mb-6",
     headerStyle: "flex items-center gap-4",
-    titleStyle: "text-xl font-semibold tracking-tight text-[var(--color-text-primary)]",
-    subtitleStyle: "text-sm text-[var(--color-text-muted)] mt-1",
+    titleStyle: "text-xl font-bold  text-[var(--color-text-primary)]",
+    subtitleStyle: "text-sm text-[var(--color-text-secondary)] mt-1",
     actionsStyle: "sm:ml-auto flex items-center gap-2 shrink-0",
     iconStyle: "flex items-center justify-center shrink-0 text-[var(--color-text-muted)]",
     separatorStyle: "border-b border-[var(--color-border)] mt-4",

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

@@ -5,7 +5,7 @@ const popoverTheme = {
     // Base styles for the popover
     baseStyle: "z-50 outline-none",
     // Body styles
-    bodyStyle: "bg-[var(--color-surface-overlay)] border border-[var(--color-border)] rounded-[var(--popover-radius)] shadow-real-xl p-4 max-w-[min(24rem,calc(100vw-2rem))] dark:bg-[var(--color-surface-overlay)] ",
+    bodyStyle: "bg-[var(--color-surface-overlay)]/80 backdrop-blur-md border border-[var(--color-border)] rounded-[var(--popover-radius)] shadow-real-xl p-4 max-w-[min(24rem,calc(100vw-2rem))]",
 };
 
 export { popoverTheme };