@flikk/ui 1.0.0-beta.23 → 1.0.0-beta.25

package/dist/components/core/DragDrop/DragDrop.js

@@ -1,4 +1,4 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import React__default, { createContext, useState, useRef, useCallback, useMemo, useEffect, useContext } from 'react';
 import { motion } from 'motion/react';
 export { AnimatePresence } from 'motion/react';
@@ -6,20 +6,48 @@ import { cn } from '../../../utils/cn.js';
 import { dragDropTheme } from './DragDrop.theme.js';
 
 const DragDropContext = createContext(null);
-const DragDropProvider = React__default.forwardRef(({ children }, ref) => {
+// ---------------------------------------------------------------------------
+// Provider
+// ---------------------------------------------------------------------------
+const DragDropProvider = React__default.forwardRef(({ children }, _ref) => {
+    // pointer drag state
     const [activeDrag, setActiveDrag] = useState(null);
     const pointerRef = useRef(null);
     const dropZones = useRef(new Map());
     const groupIdRef = useRef(`dd-${Math.random().toString(36).slice(2)}`);
+    // keyboard drag state
+    const [keyboardDragId, setKeyboardDragId] = useState(null);
+    const [keyboardDragLabel, setKeyboardDragLabel] = useState('');
+    const [announcement, setAnnouncement] = useState('');
+    // Stable ordered list of drop-zone IDs so Arrow-key cycling is deterministic
+    const dropZoneOrder = useRef([]);
     const registerDropZone = useCallback((id, element) => {
         dropZones.current.set(id, element);
+        if (!dropZoneOrder.current.includes(id)) {
+            dropZoneOrder.current.push(id);
+        }
     }, []);
     const unregisterDropZone = useCallback((id) => {
         dropZones.current.delete(id);
+        dropZoneOrder.current = dropZoneOrder.current.filter((zid) => zid !== id);
     }, []);
     const setPointer = useCallback((point) => {
         pointerRef.current = point;
     }, []);
+    const startKeyboardDrag = useCallback((id, label) => {
+        setKeyboardDragId(id);
+        setKeyboardDragLabel(label);
+    }, []);
+    const endKeyboardDrag = useCallback(() => {
+        setKeyboardDragId(null);
+        setKeyboardDragLabel('');
+    }, []);
+    const announce = useCallback((message) => {
+        // Briefly clear then set to guarantee re-announcement of the same string
+        setAnnouncement('');
+        // Use a microtask so the DOM sees the empty value first
+        setTimeout(() => setAnnouncement(message), 0);
+    }, []);
     const contextValue = useMemo(() => ({
         activeDrag,
         setActiveDrag,
@@ -29,8 +57,24 @@ const DragDropProvider = React__default.forwardRef(({ children }, ref) => {
         registerDropZone,
         unregisterDropZone,
         dropZones: dropZones.current,
-    }), [activeDrag, setActiveDrag, setPointer, registerDropZone, unregisterDropZone]);
-    return (jsx(DragDropContext.Provider, { value: contextValue, children: children }));
+        keyboardDragId,
+        keyboardDragLabel,
+        startKeyboardDrag,
+        endKeyboardDrag,
+        dropZoneOrder,
+        announce,
+    }), [
+        activeDrag,
+        setPointer,
+        registerDropZone,
+        unregisterDropZone,
+        keyboardDragId,
+        keyboardDragLabel,
+        startKeyboardDrag,
+        endKeyboardDrag,
+        announce,
+    ]);
+    return (jsxs(DragDropContext.Provider, { value: contextValue, children: [children, jsx("div", { className: "sr-only", "aria-live": "assertive", "aria-atomic": "true", "aria-relevant": "additions text", children: announcement })] }));
 });
 DragDropProvider.displayName = 'DragDropProvider';
 const useDragDropContext = () => {
@@ -40,7 +84,10 @@ const useDragDropContext = () => {
     }
     return context;
 };
-const Draggable = React__default.forwardRef(({ children, dragData, className, theme: customTheme = {}, onDragStart, onDrag, onDragEnd, disabled = false, }, ref) => {
+// ---------------------------------------------------------------------------
+// Draggable
+// ---------------------------------------------------------------------------
+const Draggable = React__default.forwardRef(({ children, dragData, dragLabel, className, theme: customTheme = {}, onDragStart, onDrag, onDragEnd, disabled = false, }, ref) => {
     var _a;
     const context = useDragDropContext();
     const dragRef = useRef(null);
@@ -48,6 +95,9 @@ const Draggable = React__default.forwardRef(({ children, dragData, className, th
         ...dragDropTheme,
         ...customTheme,
     };
+    // Resolve the human-readable label used in announcements
+    const resolvedLabel = dragLabel !== null && dragLabel !== void 0 ? dragLabel : dragData.id;
+    // ----- pointer drag handlers (unchanged) --------------------------------
     const handleDragStart = useCallback((_event, info) => {
         if (disabled)
             return;
@@ -73,7 +123,7 @@ const Draggable = React__default.forwardRef(({ children, dragData, className, th
                 point.y <= dropRect.bottom) {
                 const dropEvent = new CustomEvent('motion-drop', {
                     detail: dragData,
-                    bubbles: true
+                    bubbles: true,
                 });
                 dropZone.dispatchEvent(dropEvent);
             }
@@ -82,7 +132,58 @@ const Draggable = React__default.forwardRef(({ children, dragData, className, th
         context.setPointer(null);
         onDragEnd === null || onDragEnd === void 0 ? void 0 : onDragEnd(dragData, info);
     }, [dragData, onDragEnd, context]);
-    const isDragging = ((_a = context.activeDrag) === null || _a === void 0 ? void 0 : _a.id) === dragData.id;
+    // ----- keyboard drag handler (new) --------------------------------------
+    const handleKeyDown = useCallback((e) => {
+        var _a, _b, _c;
+        if (disabled)
+            return;
+        const isGrabbed = context.keyboardDragId === dragData.id;
+        if ((e.key === ' ' || e.key === 'Enter') && !isGrabbed) {
+            // Initiate keyboard drag
+            e.preventDefault();
+            context.startKeyboardDrag(dragData.id, resolvedLabel);
+            context.announce(`Grabbed ${resolvedLabel}. Use arrow keys to move between drop zones. Press Space or Enter to drop, or Escape to cancel.`);
+            return;
+        }
+        if (isGrabbed) {
+            if (e.key === 'Escape') {
+                // Cancel keyboard drag
+                e.preventDefault();
+                context.endKeyboardDrag();
+                context.announce(`Drop cancelled. ${resolvedLabel} returned to original position.`);
+                // Return focus to this draggable
+                (_a = dragRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                return;
+            }
+            if (e.key === 'ArrowDown' || e.key === 'ArrowRight') {
+                e.preventDefault();
+                const order = context.dropZoneOrder.current;
+                if (order.length === 0)
+                    return;
+                // Find the currently focused drop zone, advance to next
+                const focusedDropId = (_b = document.activeElement) === null || _b === void 0 ? void 0 : _b.getAttribute('data-dropzone-id');
+                const currentIdx = focusedDropId ? order.indexOf(focusedDropId) : -1;
+                const nextIdx = (currentIdx + 1) % order.length;
+                const nextEl = context.dropZones.get(order[nextIdx]);
+                nextEl === null || nextEl === void 0 ? void 0 : nextEl.focus();
+                return;
+            }
+            if (e.key === 'ArrowUp' || e.key === 'ArrowLeft') {
+                e.preventDefault();
+                const order = context.dropZoneOrder.current;
+                if (order.length === 0)
+                    return;
+                const focusedDropId = (_c = document.activeElement) === null || _c === void 0 ? void 0 : _c.getAttribute('data-dropzone-id');
+                const currentIdx = focusedDropId ? order.indexOf(focusedDropId) : 0;
+                const prevIdx = (currentIdx - 1 + order.length) % order.length;
+                const prevEl = context.dropZones.get(order[prevIdx]);
+                prevEl === null || prevEl === void 0 ? void 0 : prevEl.focus();
+                return;
+            }
+        }
+    }, [disabled, context, dragData.id, resolvedLabel]);
+    const isPointerDragging = ((_a = context.activeDrag) === null || _a === void 0 ? void 0 : _a.id) === dragData.id;
+    const isKeyboardGrabbed = context.keyboardDragId === dragData.id;
     return (jsx(motion.div, { ref: (node) => {
             dragRef.current = node;
             if (typeof ref === 'function') {
@@ -104,12 +205,21 @@ const Draggable = React__default.forwardRef(({ children, dragData, className, th
             x: { type: 'spring', stiffness: 1000, damping: 50 },
             y: { type: 'spring', stiffness: 1000, damping: 50 },
         }, style: {
-            position: isDragging ? 'relative' : 'relative',
-            zIndex: isDragging ? 99999 : 'auto',
-            isolation: isDragging ? 'isolate' : 'auto',
-        }, className: cn(theme.draggableStyle, disabled && 'opacity-50 cursor-not-allowed', !disabled && 'cursor-grab active:cursor-grabbing', isDragging && '[&]:!z-[99999]', className), onDragStart: handleDragStart, onDrag: handleDrag, onDragEnd: handleDragEnd, children: children }));
+            position: 'relative',
+            zIndex: isPointerDragging ? 99999 : 'auto',
+            isolation: isPointerDragging ? 'isolate' : 'auto',
+            outline: isKeyboardGrabbed ? '2px solid var(--color-primary)' : undefined,
+            outlineOffset: isKeyboardGrabbed ? '2px' : undefined,
+        }, className: cn(theme.draggableStyle, disabled && 'opacity-50 cursor-not-allowed', !disabled && 'cursor-grab active:cursor-grabbing', isPointerDragging && '[&]:!z-[99999]', className), 
+        // Pointer drag callbacks
+        onDragStart: handleDragStart, onDrag: handleDrag, onDragEnd: handleDragEnd, 
+        // Keyboard accessibility
+        role: "button", tabIndex: disabled ? -1 : 0, "aria-label": `Drag ${resolvedLabel}`, "aria-grabbed": isKeyboardGrabbed, onKeyDown: handleKeyDown, children: children }));
 });
 Draggable.displayName = 'Draggable';
+// ---------------------------------------------------------------------------
+// Droppable
+// ---------------------------------------------------------------------------
 const Droppable = React__default.forwardRef(({ children, acceptedTypes, className, theme: customTheme = {}, onDrop, onDragEnter, onDragLeave, id, }, ref) => {
     const context = useDragDropContext();
     const [isDragOver, setIsDragOver] = useState(false);
@@ -120,7 +230,9 @@ const Droppable = React__default.forwardRef(({ children, acceptedTypes, classNam
         ...dragDropTheme,
         ...customTheme,
     };
-    // Register drop zone
+    // Whether a keyboard drag is currently active (any item grabbed)
+    const isKeyboardDragActive = context.keyboardDragId !== null;
+    // ----- registration (unchanged) -----------------------------------------
     useEffect(() => {
         if (dropRef.current) {
             context.registerDropZone(stableId, dropRef.current);
@@ -129,7 +241,7 @@ const Droppable = React__default.forwardRef(({ children, acceptedTypes, classNam
             context.unregisterDropZone(stableId);
         };
     }, [stableId, context]);
-    // Compute drag-over state precisely based on pointer location using rAF
+    // ----- pointer drag-over detection (unchanged) --------------------------
     useEffect(() => {
         if (!context.activeDrag) {
             if (isDragOver) {
@@ -173,12 +285,11 @@ const Droppable = React__default.forwardRef(({ children, acceptedTypes, classNam
                 cancelAnimationFrame(rafIdRef.current);
         };
     }, [acceptedTypes, isDragOver, onDragEnter, onDragLeave, context.activeDrag]);
-    // Handle drop
+    // ----- pointer drop handler (unchanged) ---------------------------------
     useEffect(() => {
         const handleDrop = (event) => {
             const customEvent = event;
             const data = customEvent.detail;
-            // Check if type is accepted
             if (acceptedTypes && acceptedTypes.length > 0) {
                 if (!acceptedTypes.includes(data.type || '')) {
                     return;
@@ -197,6 +308,46 @@ const Droppable = React__default.forwardRef(({ children, acceptedTypes, classNam
             }
         };
     }, [acceptedTypes, onDrop]);
+    // ----- keyboard: announce when this zone receives focus -----------------
+    const handleFocus = useCallback(() => {
+        if (!isKeyboardDragActive)
+            return;
+        const order = context.dropZoneOrder.current;
+        const zoneIndex = order.indexOf(stableId);
+        const zoneNumber = zoneIndex === -1 ? '' : ` ${zoneIndex + 1}`;
+        context.announce(`Over drop zone${zoneNumber}.`);
+    }, [isKeyboardDragActive, context, stableId]);
+    // ----- keyboard: Space/Enter completes the drop -------------------------
+    const handleKeyDown = useCallback((e) => {
+        if (!isKeyboardDragActive)
+            return;
+        if (e.key !== ' ' && e.key !== 'Enter')
+            return;
+        e.preventDefault();
+        const grabbedId = context.keyboardDragId;
+        const grabbedLabel = context.keyboardDragLabel;
+        if (!grabbedId)
+            return;
+        // Check type acceptance
+        const draggedDragData = { id: grabbedId };
+        if (acceptedTypes && acceptedTypes.length > 0) ;
+        const order = context.dropZoneOrder.current;
+        const zoneIndex = order.indexOf(stableId);
+        const zoneNumber = zoneIndex === -1 ? '' : ` ${zoneIndex + 1}`;
+        // Fire the drop callback
+        onDrop === null || onDrop === void 0 ? void 0 : onDrop(draggedDragData);
+        // Also fire as a custom event so compound setups with `motion-drop`
+        // listeners on the DOM element are notified
+        if (dropRef.current) {
+            const dropEvent = new CustomEvent('motion-drop', {
+                detail: draggedDragData,
+                bubbles: true,
+            });
+            dropRef.current.dispatchEvent(dropEvent);
+        }
+        context.announce(`${grabbedLabel} dropped in position${zoneNumber}.`);
+        context.endKeyboardDrag();
+    }, [isKeyboardDragActive, context, stableId, acceptedTypes, onDrop]);
     return (jsx(motion.div, { ref: (node) => {
             dropRef.current = node;
             if (typeof ref === 'function') {
@@ -210,8 +361,10 @@ const Droppable = React__default.forwardRef(({ children, acceptedTypes, classNam
             zIndex: 0,
         }, className: cn(theme.droppableStyle, isDragOver && theme.dragOverStyle, className), animate: isDragOver ? 'dragOver' : 'idle', variants: {
             idle: { scale: 1 },
-            dragOver: { scale: 1.01 }
-        }, transition: { duration: 0.15 }, children: typeof children === 'function' ? children(isDragOver) : children }));
+            dragOver: { scale: 1.01 },
+        }, transition: { duration: 0.15 }, 
+        // Keyboard accessibility: become reachable only while a keyboard drag is active
+        tabIndex: isKeyboardDragActive ? 0 : undefined, role: isKeyboardDragActive ? 'button' : undefined, "aria-label": isKeyboardDragActive ? 'Drop here' : undefined, "data-dropzone-id": stableId, onFocus: handleFocus, onKeyDown: handleKeyDown, children: typeof children === 'function' ? children(isDragOver) : children }));
 });
 Droppable.displayName = 'Droppable';
 

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

@@ -34,6 +34,12 @@ export interface DraggableProps {
     onDragEnd?: (data: DragData, info: PanInfo) => void;
     /** Disable dragging */
     disabled?: boolean;
+    /**
+     * Accessible label used in keyboard-drag announcements.
+     * Defaults to the dragData.id when omitted.
+     * Example: "Task card – Fix login bug"
+     */
+    dragLabel?: string;
 }
 export interface DroppableProps {
     /** Content of the drop zone */

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

@@ -9,7 +9,7 @@ export declare const Drawer: {
         displayName: string;
     };
     Title: {
-        ({ children, className, ...props }: import("./Drawer.types").DrawerTitleProps): import("react/jsx-runtime").JSX.Element;
+        ({ children, className, as: Tag, ...props }: import("./Drawer.types").DrawerTitleProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     Subtitle: {

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

@@ -17,6 +17,8 @@ function useCloseOnBack(isOpen, onClose, enabled) {
     useEffect(() => {
         if (!enabled || !isOpen)
             return;
+        if (typeof window === "undefined")
+            return;
         closedByPopstate.current = false;
         history.pushState({ flikDrawer: true }, "");
         const handlePopstate = () => {

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

@@ -78,6 +78,8 @@ export interface DrawerHeaderProps extends React.HTMLAttributes<HTMLDivElement>
 export interface DrawerTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
     children: React.ReactNode;
     className?: string;
+    /** Heading level to render. Defaults to 'h2'. */
+    as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 }
 export interface DrawerSubtitleProps extends React.HTMLAttributes<HTMLParagraphElement> {
     children: React.ReactNode;

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

@@ -1,5 +1,5 @@
 import { DrawerTitleProps } from "./Drawer.types";
 export declare const DrawerTitle: {
-    ({ children, className, ...props }: DrawerTitleProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, className, as: Tag, ...props }: DrawerTitleProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

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

@@ -2,9 +2,9 @@ import { jsx } from 'react/jsx-runtime';
 import { cn } from '../../../utils/cn.js';
 import { useDrawerContext } from './Drawer.js';
 
-const DrawerTitle = ({ children, className, ...props }) => {
+const DrawerTitle = ({ children, className, as: Tag = 'h2', ...props }) => {
     const { theme, titleId } = useDrawerContext();
-    return (jsx("h2", { id: titleId, className: cn(theme.title, className), ...props, children: children }));
+    return (jsx(Tag, { id: titleId, className: cn(theme.title, className), ...props, children: children }));
 };
 DrawerTitle.displayName = "Drawer.Title";
 

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

@@ -7,36 +7,8 @@ import { useDropdownContext } from './DropdownContext.js';
 import { useClickOutside } from '../../../hooks/useClickOutside.js';
 import { useSelectPortal } from '../../../hooks/useSelectPortal.js';
 import { useIsClient } from '../../../hooks/useIsClient.js';
+import { useDarkMode } from '../../../hooks/useDarkMode.js';
 
-/**
- * Hook to detect dark mode state from document
- */
-const useDarkMode = () => {
-    const [isDark, setIsDark] = useState(false);
-    useEffect(() => {
-        if (typeof document === "undefined")
-            return;
-        const checkDarkMode = () => {
-            const hasDarkClass = document.documentElement.classList.contains("dark") ||
-                document.body.classList.contains("dark") ||
-                document.querySelector(".dark") !== null;
-            setIsDark(hasDarkClass);
-        };
-        checkDarkMode();
-        // Observe class changes on html and body
-        const observer = new MutationObserver(checkDarkMode);
-        observer.observe(document.documentElement, {
-            attributes: true,
-            attributeFilter: ["class"],
-        });
-        observer.observe(document.body, {
-            attributes: true,
-            attributeFilter: ["class"],
-        });
-        return () => observer.disconnect();
-    }, []);
-    return isDark;
-};
 /**
  * DropdownMenu component - renders the menu with keyboard navigation
  */
@@ -208,7 +180,7 @@ const DropdownMenu = React__default.forwardRef(({ children, className, animation
                 ...cssVariables,
                 top: `${position.top}px`,
                 left: `${position.left}px`,
-            }, id: menuId, role: "menu", "aria-label": ariaLabel || "Menu", "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
+            }, 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 }
                 : {
                     type: "spring",

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

@@ -5,7 +5,7 @@ const emptyTheme = {
     // Base container styles - customizable spacing, colors, and layout
     baseStyle: "flex flex-col items-center justify-center text-center w-full max-w-md mx-auto space-y-3 py-12 px-6 ",
     // Title text styles - customizable typography and colors
-    titleStyle: "text-base font-semibold text-[var(--color-text-primary)]",
+    titleStyle: "text-sm font-semibold text-[var(--color-text-primary)]",
     // Description text styles - customizable typography and colors
     subtitleStyle: "text-sm text-[var(--color-text-muted)]",
 };

package/dist/components/core/Link/Link.js

@@ -35,7 +35,7 @@ onAnimationStart: _onAnimationStart, onAnimationEnd: _onAnimationEnd, onDrag: _o
         }, [shouldReduceMotion]);
     return (jsx(motion.a, { ref: ref, href: disabled ? undefined : href, className: cn(buttonTheme.baseStyle, themeClasses.colorClasses, themeClasses.variantClasses, themeClasses.sizeClasses, themeClasses.stateClasses, 
         // Special case for link variant to have an underline
-        "underline underline-offset-4 rounded-none font-semibold", className), "data-color": color, "data-variant": resolvedVariant, "data-size": size, "aria-disabled": disabled || undefined, ...(disabled ? {} : animationProps), ...props, children: children }));
+        "underline underline-offset-4 rounded-none font-semibold text-sm", className), "data-color": color, "data-variant": resolvedVariant, "data-size": size, "aria-disabled": disabled || undefined, ...(disabled ? {} : animationProps), ...props, children: children }));
 });
 Link.displayName = "Link";
 

package/dist/components/core/Masonry/Masonry.js

@@ -13,6 +13,7 @@ const MASONRY_ITEM_TRANSITION_BASE = {
 };
 const Masonry = React__default.forwardRef(({ children, columns = 3, gap = 16, gapBreakpoints, className, style, minColumns = 1, maxColumns = 10, sequential = false, themeOverrides, loading = false, ...props }, ref) => {
     const containerRef = useRef(null);
+    const arrangeItemsRef = useRef(() => { });
     const [currentColumns, setCurrentColumns] = useState(typeof columns === 'number' ? columns : 3);
     const [currentGap, setCurrentGap] = useState(gap);
     const [containerWidth, setContainerWidth] = useState(0);
@@ -174,6 +175,10 @@ const Masonry = React__default.forwardRef(({ children, columns = 3, gap = 16, ga
         }, 0);
         return () => clearTimeout(timer);
     }, [calculateLayout, arrangeItems, children, containerWidth]);
+    // Keep ref in sync so the MutationObserver always calls the latest version
+    useEffect(() => {
+        arrangeItemsRef.current = arrangeItems;
+    }, [arrangeItems]);
     // Re-arrange when children change (with debouncing)
     useEffect(() => {
         let timeoutId;
@@ -181,7 +186,7 @@ const Masonry = React__default.forwardRef(({ children, columns = 3, gap = 16, ga
             // Debounce multiple rapid changes
             clearTimeout(timeoutId);
             timeoutId = setTimeout(() => {
-                arrangeItems();
+                arrangeItemsRef.current();
             }, 10);
         });
         if (containerRef.current) {
@@ -194,7 +199,7 @@ const Masonry = React__default.forwardRef(({ children, columns = 3, gap = 16, ga
             observer.disconnect();
             clearTimeout(timeoutId);
         };
-    }, [arrangeItems]);
+    }, []);
     // Generate container classes
     const containerClasses = cn(theme.container.base, loading && theme.container.loading, className);
     // Wrap each child in a positioning div with theme styles

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

@@ -11,7 +11,7 @@ export declare const Modal: {
         displayName: string;
     };
     Title: {
-        ({ children, className, ...props }: import("./Modal.types").ModalTitleProps): import("react/jsx-runtime").JSX.Element;
+        ({ children, className, as: Tag, ...props }: import("./Modal.types").ModalTitleProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     Subtitle: {

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

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import { createContext, useId, useState, useEffect, useContext } from 'react';
+import { createContext, useId, useState, useEffect, useMemo, useContext } from 'react';
 import { cn } from '../../../utils/cn.js';
 import { Overlay } from '../../effects/Overlay/Overlay.js';
 import { modalTheme, modalSizeVariants } from './Modal.theme.js';
@@ -45,7 +45,7 @@ const ModalRoot = ({ isOpen, onClose, size = "md", variant = "default", closeOnO
         },
     };
     // Context value
-    const contextValue = {
+    const contextValue = useMemo(() => ({
         isOpen,
         onClose,
         size,
@@ -58,7 +58,7 @@ const ModalRoot = ({ isOpen, onClose, size = "md", variant = "default", closeOnO
         setIsBodyScrollable,
         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: {
             overlay: modalOverlayAnimations,
             content: modalContentAnimations,

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

@@ -89,6 +89,8 @@ export interface ModalFooterProps extends React.HTMLAttributes<HTMLDivElement> {
 export interface ModalTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
     children: React.ReactNode;
     className?: string;
+    /** Heading level to render. Defaults to 'h2'. */
+    as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 }
 export interface ModalSubtitleProps extends React.HTMLAttributes<HTMLParagraphElement> {
     children: React.ReactNode;

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

@@ -1,5 +1,5 @@
 import { ModalTitleProps } from "./Modal.types";
 export declare const ModalTitle: {
-    ({ children, className, ...props }: ModalTitleProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, className, as: Tag, ...props }: ModalTitleProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

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

@@ -2,9 +2,9 @@ import { jsx } from 'react/jsx-runtime';
 import { cn } from '../../../utils/cn.js';
 import { useModalContext } from './Modal.js';
 
-const ModalTitle = ({ children, className, ...props }) => {
+const ModalTitle = ({ children, className, as: Tag = 'h2', ...props }) => {
     const { theme, titleId } = useModalContext();
-    return (jsx("div", { id: titleId, className: cn(theme.title, className), ...props, children: children }));
+    return (jsx(Tag, { id: titleId, className: cn(theme.title, className), ...props, children: children }));
 };
 ModalTitle.displayName = "Modal.Title";
 

package/dist/components/core/NavItem/NavItem.js

@@ -145,16 +145,21 @@ notification, description, shortcut, href, onClick, active = false, disabled = f
                         ? React__default.cloneElement(startContent, {
                             className: cn(iconClasses, startContent.props.className),
                         })
-                        : startContent, isCollapsedView && notificationElement && (jsx("span", { className: "absolute -top-1 -right-1", children: notificationElement }))] })), jsxs("div", { className: "min-w-0 overflow-hidden", "aria-hidden": isCollapsedView || undefined, style: {
-                    flex: "1 1 auto",
-                    maxWidth: isCollapsedView ? 0 : 9999,
+                        : startContent, isCollapsedView && notificationElement && (jsx("span", { className: "absolute -top-1 -right-1", children: notificationElement }))] })), jsx("div", { "aria-hidden": isCollapsedView || undefined, style: {
+                    display: 'grid',
+                    gridTemplateColumns: isCollapsedView ? '0fr' : '1fr',
+                    overflow: 'hidden',
+                    flex: '1 1 auto',
                     opacity: isCollapsedView ? 0 : 1,
-                    transition: "max-width 0.18s cubic-bezier(0.4,0,0.2,1), opacity 0.12s ease-out",
-                }, children: [jsxs("div", { className: "flex items-center justify-between gap-2", children: [jsx("span", { className: cn("truncate", textClasses), children: children }), shortcut && (jsx("kbd", { className: "hidden group-hover:inline-block text-sm text-[var(--color-text-muted)] font-sans border border-[var(--color-border)] rounded px-1.5 py-0.5", children: shortcut }))] }), description && (jsx("div", { className: "text-sm text-[var(--color-text-muted)] mt-0.5 truncate", children: description }))] }), jsxs("div", { className: "flex items-center gap-1.5 flex-shrink-0 overflow-hidden", style: {
-                    maxWidth: isCollapsedView ? 0 : 120,
+                    transition: 'grid-template-columns 0.18s cubic-bezier(0.4,0,0.2,1), opacity 0.12s ease-out',
+                }, children: jsxs("div", { style: { overflow: 'hidden', minWidth: 0 }, children: [jsxs("div", { className: "flex items-center justify-between gap-2", children: [jsx("span", { className: cn("truncate", textClasses), children: children }), shortcut && (jsx("kbd", { className: "hidden group-hover:inline-block text-sm text-[var(--color-text-muted)] font-sans border border-[var(--color-border)] rounded px-1.5 py-0.5", children: shortcut }))] }), description && (jsx("div", { className: "text-sm text-[var(--color-text-muted)] mt-0.5 truncate", children: description }))] }) }), jsx("div", { style: {
+                    display: 'grid',
+                    gridTemplateColumns: isCollapsedView ? '0fr' : '1fr',
+                    overflow: 'hidden',
+                    flexShrink: 0,
                     opacity: isCollapsedView ? 0 : 1,
-                    transition: "max-width 0.18s cubic-bezier(0.4,0,0.2,1), opacity 0.12s ease-out",
-                }, children: [notificationElement, endContent, chevron] }), isCollapsedView && (jsx("span", { className: "sr-only", children: children }))] }));
+                    transition: 'grid-template-columns 0.18s cubic-bezier(0.4,0,0.2,1), opacity 0.12s ease-out',
+                }, children: jsxs("div", { className: "flex items-center gap-1.5", style: { overflow: 'hidden', minWidth: 0 }, children: [notificationElement, endContent, chevron] }) }), isCollapsedView && (jsx("span", { className: "sr-only", children: children }))] }));
     // Self-contained submenu
     const submenu = hasSubmenu && items && items.length > 0 && !isCollapsedView ? (jsx(AnimatePresence, { initial: false, children: isExpanded && (jsx(motion.div, { initial: "collapsed", animate: "open", exit: "collapsed", variants: {
                 open: { opacity: 1, height: "auto" },

package/dist/components/core/Pagination/Pagination.js

@@ -79,7 +79,7 @@ const Pagination = React__default.forwardRef(({ currentPage, totalPages, onPageC
     const isLastPage = currentPage === totalPages;
     return (jsxs("nav", { ref: ref, role: "navigation", "aria-label": "Pagination Navigation", className: cn(theme.baseStyle, className), ...props, children: [showFirstLast && (jsxs(PaginationItem, { size: size, isDisabled: isFirstPage, onClick: () => handlePageChange(1), "aria-label": "Go to first page", children: [jsx(ChevronDoubleLeftIcon, { className: "w-4 h-4" }), jsx("span", { className: "sr-only", children: "First" })] })), showPrevNext && (jsxs(PaginationItem, { size: size, isDisabled: isFirstPage, onClick: () => handlePageChange(currentPage - 1), "aria-label": `Go to previous page (${currentPage - 1})`, children: [jsx(ChevronLeftIcon, { className: "w-4 h-4" }), jsx("span", { className: "sr-only", children: "Previous" })] })), paginationRange.map((pageNumber, index) => {
                 if (pageNumber === "...") {
-                    return (jsxs(PaginationItem, { size: size, variant: "ellipsis", isDisabled: true, "aria-label": "More pages", role: "separator", children: [jsx("span", { "aria-hidden": "true", children: "\u2026" }), jsx("span", { className: "sr-only", children: "More pages" })] }, `ellipsis-${index}`));
+                    return (jsx("span", { role: "separator", "aria-hidden": "true", children: "\u2026" }, `ellipsis-${index}`));
                 }
                 const page = pageNumber;
                 const isActive = page === currentPage;

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

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import React__default, { useRef, useEffect, useCallback, useState } from 'react';
+import React__default, { useRef, useEffect, useCallback } from 'react';
 import { useReducedMotion, AnimatePresence, motion } from 'motion/react';
 import { createPortal } from 'react-dom';
 import { cn } from '../../../utils/cn.js';
@@ -9,6 +9,7 @@ import { popoverTransitions, popoverContentVariants } from './Popover.animations
 import { useSelectPortal } from '../../../hooks/useSelectPortal.js';
 import { Overlay } from '../../effects/Overlay/Overlay.js';
 import { useIsClient } from '../../../hooks/useIsClient.js';
+import { useDarkMode } from '../../../hooks/useDarkMode.js';
 
 /** Overlay backdrop animations (fade in/out) */
 const overlayBackdropAnimations = {
@@ -22,31 +23,6 @@ const overlayContentAnimations = {
     animate: { opacity: 1, scale: 1, transition: { duration: 0.2 } },
     exit: { opacity: 0, scale: 0.95, transition: { duration: 0.15 } },
 };
-const useDarkMode = () => {
-    const [isDark, setIsDark] = useState(false);
-    useEffect(() => {
-        if (typeof document === "undefined")
-            return;
-        const checkDarkMode = () => {
-            const hasDarkClass = document.documentElement.classList.contains("dark") ||
-                document.body.classList.contains("dark") ||
-                document.querySelector(".dark") !== null;
-            setIsDark(hasDarkClass);
-        };
-        checkDarkMode();
-        const observer = new MutationObserver(checkDarkMode);
-        observer.observe(document.documentElement, {
-            attributes: true,
-            attributeFilter: ["class"],
-        });
-        observer.observe(document.body, {
-            attributes: true,
-            attributeFilter: ["class"],
-        });
-        return () => observer.disconnect();
-    }, []);
-    return isDark;
-};
 /**
  * PopoverBody component displays the body/content of the popover
  */
@@ -140,7 +116,7 @@ const PopoverBody = React__default.forwardRef(({ children, className, animation
                 : undefined, children: jsx("div", { id: contentId, "data-state": isOpen ? "open" : "closed", "data-placement": placement, "data-trigger": triggerType, ...domProps, children: children }) }));
     }
     // Without backdrop: manual portal + positioning + escape + click-outside
-    const popoverContent = (jsx(AnimatePresence, { children: isOpen && (jsx(motion.div, { ref: handleRef, id: contentId, className: cn("fixed z-50", contentClasses), style: contentPositionStyle, role: "dialog", "aria-modal": "true", variants: shouldReduceMotion || !animation ? {} : popoverContentVariants, initial: shouldReduceMotion || !animation ? undefined : "hidden", animate: shouldReduceMotion || !animation ? undefined : (isReady ? "visible" : "hidden"), exit: shouldReduceMotion || !animation ? undefined : "exit", transition: shouldReduceMotion || !animation
+    const popoverContent = (jsx(AnimatePresence, { children: isOpen && (jsx(motion.div, { ref: handleRef, id: contentId, className: cn("fixed z-50", contentClasses), style: contentPositionStyle, variants: shouldReduceMotion || !animation ? {} : popoverContentVariants, initial: shouldReduceMotion || !animation ? undefined : "hidden", animate: shouldReduceMotion || !animation ? undefined : (isReady ? "visible" : "hidden"), exit: shouldReduceMotion || !animation ? undefined : "exit", transition: shouldReduceMotion || !animation
                 ? { duration: 0 }
                 : popoverTransitions.content, "data-state": isOpen ? "open" : "closed", "data-placement": placement, "data-trigger": triggerType, onClick: (e) => e.stopPropagation(), ...domProps, children: children })) }));
     if (portal && isClient) {