@flikk/ui 1.0.0-beta.13 → 1.0.0-beta.15

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

@@ -1,53 +1,85 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import React__default, { useMemo } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import React__default, { useId, useState, useCallback, useMemo } from 'react';
 import { cn } from '../../../utils/cn.js';
 import { navItemTheme } from './NavItem.theme.js';
-import { useSidebarContext } from '../Sidebar/SidebarContext.js';
+import { useSidebarContext, useAccordionNavContext } from '../Sidebar/SidebarContext.js';
 import { Tooltip } from '../Tooltip/Tooltip.js';
 import '../Tooltip/Tooltip.animations.js';
 import { Badge } from '../Badge/Badge.js';
 import { ChevronDownIcon } from '@heroicons/react/20/solid';
+import { AnimatePresence, motion } from 'motion/react';
 
 const NavItem = React__default.forwardRef(({ children, startContent: propStartContent, endContent: propEndContent, icon, // Legacy
 badge, // Legacy
-description, shortcut, href, onClick, active = false, disabled = false, isDisabled: propIsDisabled, isDanger = false, hasSubmenu = false, expanded = false, onToggleExpanded, level = 0, showTooltipWhenCollapsed = true, className, theme: customTheme = {}, ...props }, ref) => {
+notification, description, shortcut, href, onClick, active = false, disabled = false, isDisabled: propIsDisabled, isDanger = false, hasSubmenu: propHasSubmenu = false, expanded: controlledExpanded, onToggleExpanded, items, defaultExpanded = false, level = 0, showTooltipWhenCollapsed = true, className, theme: customTheme = {}, ...props }, ref) => {
     var _a, _b;
     const sidebarContext = useSidebarContext();
+    const accordionNav = useAccordionNavContext();
+    const stableId = useId();
     const collapsed = (sidebarContext === null || sidebarContext === void 0 ? void 0 : sidebarContext.collapsed) || false;
     const isInSidebar = !!sidebarContext;
+    const isMobile = (sidebarContext === null || sidebarContext === void 0 ? void 0 : sidebarContext.isMobile) || false;
+    // Self-managed submenu state
+    const [internalExpanded, setInternalExpanded] = useState(defaultExpanded);
+    // Determine if this item has a submenu
+    const hasSubmenu = propHasSubmenu || (items && items.length > 0);
+    // Determine expanded state: controlled vs accordion vs internal
+    const isAccordionManaged = !!accordionNav;
+    const isControlled = controlledExpanded !== undefined;
+    let isExpanded;
+    if (isControlled) {
+        isExpanded = controlledExpanded;
+    }
+    else if (isAccordionManaged && hasSubmenu) {
+        isExpanded = accordionNav.openId === stableId;
+    }
+    else {
+        isExpanded = internalExpanded;
+    }
+    const handleToggleExpanded = useCallback(() => {
+        if (isControlled) {
+            onToggleExpanded === null || onToggleExpanded === void 0 ? void 0 : onToggleExpanded();
+        }
+        else if (isAccordionManaged) {
+            if (isExpanded) {
+                accordionNav.unregister(stableId);
+            }
+            else {
+                accordionNav.register(stableId);
+            }
+        }
+        else {
+            setInternalExpanded(prev => !prev);
+        }
+    }, [isControlled, isAccordionManaged, isExpanded, onToggleExpanded, accordionNav, stableId]);
     // Map legacy props
     const startContent = propStartContent || icon;
     const actualIsDisabled = propIsDisabled || disabled;
-    // Construct end content
+    // Build end content
     let endContent = propEndContent;
     if (!endContent && badge) {
-        endContent = (jsx(Badge, { color: "neutral", variant: "ghost", size: "sm", children: badge }));
-    }
-    if (!endContent && hasSubmenu) {
-        endContent = (jsx(ChevronDownIcon, { className: cn("size-4 transition-transform duration-300", expanded && "rotate-180") }));
+        endContent = (jsx(Badge, { color: "neutral", variant: "soft", size: "sm", children: badge }));
     }
+    // Notification element
+    const notificationElement = useMemo(() => {
+        if (notification === undefined || notification === false)
+            return null;
+        if (notification === true) {
+            return (jsx("span", { className: cn(navItemTheme.notificationDot, customTheme.notificationDot) }));
+        }
+        if (typeof notification === "number" && notification > 0) {
+            return (jsx("span", { className: cn(navItemTheme.notificationBadge, customTheme.notificationBadge), children: notification > 99 ? "99+" : notification }));
+        }
+        return null;
+    }, [notification, customTheme.notificationDot, customTheme.notificationBadge]);
     const theme = useMemo(() => ({
         ...navItemTheme,
         ...customTheme,
-        states: {
-            ...navItemTheme.states,
-            ...customTheme.states,
-        },
-        iconStates: {
-            ...navItemTheme.iconStates,
-            ...customTheme.iconStates,
-        },
-        levels: {
-            ...navItemTheme.levels,
-            ...customTheme.levels,
-        },
-        collapsed: {
-            ...navItemTheme.collapsed,
-            ...customTheme.collapsed,
-        },
-        danger: customTheme.danger ||
-            navItemTheme.danger ||
-            "text-[var(--color-danger)] hover:bg-[var(--color-danger-50)]",
+        states: { ...navItemTheme.states, ...customTheme.states },
+        iconStates: { ...navItemTheme.iconStates, ...customTheme.iconStates },
+        levels: { ...navItemTheme.levels, ...customTheme.levels },
+        collapsed: { ...navItemTheme.collapsed, ...customTheme.collapsed },
+        danger: customTheme.danger || navItemTheme.danger || "text-[var(--color-danger)] hover:bg-[var(--color-danger-50)]",
     }), [customTheme]);
     // Handle click events
     const handleClick = (e) => {
@@ -55,19 +87,27 @@ description, shortcut, href, onClick, active = false, disabled = false, isDisabl
             e.preventDefault();
             return;
         }
-        if (hasSubmenu && onToggleExpanded) {
+        if (hasSubmenu) {
             e.preventDefault();
-            onToggleExpanded();
+            handleToggleExpanded();
             return;
         }
         if (onClick) {
             e.preventDefault();
             onClick();
+            // Close mobile sidebar after clicking a nav item
+            if (isMobile && sidebarContext) {
+                sidebarContext.setMobileOpen(false);
+            }
             return;
         }
-        // If href is provided, let the default navigation happen
+        // Close mobile sidebar after navigation
+        if (href && isMobile && sidebarContext) {
+            sidebarContext.setMobileOpen(false);
+        }
     };
     const isActive = active;
+    const isCollapsedView = isInSidebar && collapsed && !isMobile;
     // Get state classes
     const getStateClasses = () => {
         if (actualIsDisabled)
@@ -78,8 +118,10 @@ description, shortcut, href, onClick, active = false, disabled = false, isDisabl
     };
     // Danger overrides
     const dangerClasses = isDanger ? theme.danger : "";
+    // Active indicator
+    const activeIndicatorClasses = isActive && level === 0 ? theme.activeIndicator : "";
     // Build container classes
-    const containerClasses = cn(theme.baseStyle, getStateClasses(), theme.levels[level], isInSidebar && collapsed && ((_a = theme.collapsed) === null || _a === void 0 ? void 0 : _a.container), dangerClasses, className);
+    const containerClasses = cn(theme.baseStyle, getStateClasses(), theme.levels[level], isCollapsedView && ((_a = theme.collapsed) === null || _a === void 0 ? void 0 : _a.container), dangerClasses, activeIndicatorClasses, className);
     // Get icon state classes
     const getIconStateClasses = () => {
         var _a, _b, _c;
@@ -90,35 +132,41 @@ description, shortcut, href, onClick, active = false, disabled = false, isDisabl
         return (_c = theme.iconStates) === null || _c === void 0 ? void 0 : _c.default;
     };
     // Build icon classes
-    const iconClasses = cn(isInSidebar && collapsed ? (_b = theme.collapsed) === null || _b === void 0 ? void 0 : _b.icon : theme.icon, getIconStateClasses());
+    const iconClasses = cn(isCollapsedView ? (_b = theme.collapsed) === null || _b === void 0 ? void 0 : _b.icon : theme.icon, getIconStateClasses());
     const textClasses = cn(theme.text);
+    // Chevron for submenu
+    const chevron = hasSubmenu && !isCollapsedView ? (jsx(ChevronDownIcon, { className: cn("size-4 transition-transform duration-200 text-[var(--color-text-muted)]", isExpanded && "rotate-180") })) : null;
     // Content component
-    const content = (jsxs("div", { ref: ref, className: containerClasses, role: href ? "link" : "button", tabIndex: actualIsDisabled ? -1 : 0, "aria-disabled": actualIsDisabled, "aria-expanded": hasSubmenu ? expanded : undefined, "data-active": isActive, "data-disabled": actualIsDisabled, "data-level": level, onClick: handleClick, onKeyDown: (e) => {
+    const content = (jsxs("div", { ref: ref, className: containerClasses, role: href ? "link" : "button", tabIndex: actualIsDisabled ? -1 : 0, "aria-disabled": actualIsDisabled, "aria-expanded": hasSubmenu ? isExpanded : undefined, "data-active": isActive, "data-disabled": actualIsDisabled, "data-level": level, onClick: handleClick, onKeyDown: (e) => {
             if (e.key === "Enter" || e.key === " ") {
                 e.preventDefault();
                 handleClick(e);
             }
-        }, ...props, children: [startContent && (jsx("div", { className: cn("flex items-center justify-center flex-shrink-0"
-                // Icon size is handled by icon classes
-                ), children: React__default.isValidElement(startContent)
-                    ? React__default.cloneElement(startContent, {
-                        className: cn(iconClasses, startContent.props.className),
-                    })
-                    : startContent })), (!isInSidebar || !collapsed) && (jsxs("div", { className: "flex-1 min-w-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 }))] })), endContent && (!isInSidebar || !collapsed) && (jsx("div", { className: "flex items-center justify-center flex-shrink-0", children: endContent })), isInSidebar && collapsed && (jsx("span", { className: "sr-only", children: children }))] }));
+        }, ...props, children: [startContent && (jsxs("div", { className: "flex items-center justify-center flex-shrink-0 relative", children: [React__default.isValidElement(startContent)
+                        ? React__default.cloneElement(startContent, {
+                            className: cn(iconClasses, startContent.props.className),
+                        })
+                        : startContent, isCollapsedView && notificationElement && (jsx("span", { className: "absolute -top-1 -right-1", children: notificationElement }))] })), !isCollapsedView && (jsxs("div", { className: "flex-1 min-w-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 }))] })), !isCollapsedView && (jsxs("div", { className: "flex items-center gap-1.5 flex-shrink-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" },
+                collapsed: { opacity: 0, height: 0 },
+            }, transition: { duration: 0.2, ease: "easeInOut" }, className: "overflow-hidden", children: items.map((item, idx) => (jsx(NavItem, { level: Math.min((level + 1), 2), startContent: item.startContent, active: item.active, isDisabled: item.isDisabled, badge: item.badge, notification: item.notification, href: item.href, onClick: item.onClick, children: item.children }, idx))) })) })) : null;
     // Wrap with link if href is provided
-    if (href && !actualIsDisabled) {
-        const LinkContent = (jsx("a", { href: href, className: "block group", children: content }));
-        // Show tooltip in collapsed sidebar mode
-        if (isInSidebar && collapsed && showTooltipWhenCollapsed) {
-            return (jsx(Tooltip, { content: children, placement: "right", children: LinkContent }));
+    const renderWrapped = (node) => {
+        if (href && !actualIsDisabled) {
+            return (jsx("a", { href: href, className: "block group", children: node }));
         }
-        return LinkContent;
-    }
+        return node;
+    };
     // Show tooltip in collapsed sidebar mode
-    if (isInSidebar && collapsed && showTooltipWhenCollapsed) {
-        return (jsx(Tooltip, { content: children, placement: "right", children: content }));
-    }
-    return content;
+    const renderWithTooltip = (node) => {
+        if (isCollapsedView && showTooltipWhenCollapsed) {
+            return (jsx(Tooltip, { content: children, placement: "right", children: node }));
+        }
+        return node;
+    };
+    return (jsxs(Fragment, { children: [renderWithTooltip(renderWrapped(content)), submenu] }));
 });
 NavItem.displayName = "NavItem";
 

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

@@ -1,12 +1,12 @@
 const navItemTheme = {
-    baseStyle: "relative flex items-center gap-2 px-2 py-1.5 text-base font-medium cursor-pointer select-none transition-all duration-300 w-full rounded-[var(--nav-item-radius)] outline-none group",
+    baseStyle: "relative flex items-center gap-2 px-2 py-1.5 text-base font-medium cursor-pointer select-none transition-all duration-150 w-full rounded-[var(--nav-item-radius)] outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] group",
     icon: "size-4 text-[var(--color-text-secondary)]",
     text: "flex-1 min-w-0 truncate",
     states: {
-        default: "text-[var(--color-text-primary)] hover:bg-neutral-100",
+        default: "text-[var(--color-text-primary)] hover:bg-[var(--color-background-secondary)]",
         active: "bg-[var(--color-primary)]/10 text-[var(--color-primary)] font-semibold",
         disabled: "opacity-60 cursor-not-allowed pointer-events-none text-[var(--color-text-placeholder)]",
-        hover: "hover:bg-neutral-100",
+        hover: "hover:bg-[var(--color-background-secondary)]",
     },
     iconStates: {
         default: "text-[var(--color-text-secondary)] group-hover:text-[var(--color-text-primary)]",
@@ -22,6 +22,9 @@ const navItemTheme = {
         container: "!gap-0 justify-center p-2 aspect-square",
         icon: "size-5",
     },
+    activeIndicator: "before:absolute before:left-0 before:top-1/2 before:-translate-y-1/2 before:h-5 before:w-[3px] before:rounded-full before:bg-[var(--color-primary)]",
+    notificationDot: "size-2 rounded-full bg-[var(--color-danger)]",
+    notificationBadge: "min-w-[18px] h-[18px] px-1 text-[10px] font-semibold rounded-full bg-[var(--color-danger)] text-[var(--color-danger-contrast)] flex items-center justify-center leading-none",
 };
 
 export { navItemTheme };

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

@@ -1,4 +1,22 @@
 import { ReactNode } from "react";
+export interface NavItemSubmenuItem {
+    /** Label text */
+    children: ReactNode;
+    /** Link href */
+    href?: string;
+    /** Click handler */
+    onClick?: () => void;
+    /** Whether this sub-item is active */
+    active?: boolean;
+    /** Whether this sub-item is disabled */
+    isDisabled?: boolean;
+    /** Badge text/number on the sub-item */
+    badge?: string | number;
+    /** Notification count/dot on the sub-item */
+    notification?: number | boolean;
+    /** Start content (icon) for the sub-item */
+    startContent?: ReactNode;
+}
 export interface NavItemProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * Content of the navigation item
@@ -30,6 +48,10 @@ export interface NavItemProps extends React.HTMLAttributes<HTMLDivElement> {
      * @deprecated Use endContent instead
      */
     badge?: string | number;
+    /**
+     * Notification indicator. Pass a number for a count badge, or true for a dot.
+     */
+    notification?: number | boolean;
     /**
      * Link href (for navigation)
      */
@@ -58,19 +80,31 @@ export interface NavItemProps extends React.HTMLAttributes<HTMLDivElement> {
      */
     isDanger?: boolean;
     /**
-     * Whether the item has a submenu
+     * Whether the item has a submenu (manual mode).
+     * If `items` is provided, this is set automatically.
      * @default false
      */
     hasSubmenu?: boolean;
     /**
-     * Whether the submenu is expanded (for multi-level navigation)
+     * Whether the submenu is expanded (controlled mode for manual submenus).
      * @default false
      */
     expanded?: boolean;
     /**
-     * Callback when submenu is toggled
+     * Callback when submenu is toggled (manual mode)
      */
     onToggleExpanded?: () => void;
+    /**
+     * Self-contained submenu items. When provided, NavItem manages its own
+     * expand/collapse state internally. Children items automatically get
+     * level={parentLevel + 1}.
+     */
+    items?: NavItemSubmenuItem[];
+    /**
+     * Whether the self-contained submenu is expanded by default
+     * @default false
+     */
+    defaultExpanded?: boolean;
     /**
      * Nesting level for indentation (0, 1, 2)
      * @default 0
@@ -111,6 +145,10 @@ export interface NavItemTheme {
         container: string;
         icon: string;
     };
+    activeIndicator?: string;
+    notificationDot?: string;
+    notificationBadge?: string;
+    danger?: string;
 }
 export interface NavItemThemeOverrides {
     baseStyle?: string;
@@ -137,32 +175,8 @@ export interface NavItemThemeOverrides {
         container: string;
         icon: string;
     }>;
-    danger?: string;
-}
-export interface NavItemTheme {
-    baseStyle: string;
-    icon: string;
-    text: string;
-    states: {
-        default: string;
-        active: string;
-        disabled: string;
-        hover: string;
-    };
-    iconStates?: {
-        default?: string;
-        active?: string;
-        disabled?: string;
-        hover?: string;
-    };
-    levels: {
-        0: string;
-        1: string;
-        2: string;
-    };
-    collapsed: {
-        container: string;
-        icon: string;
-    };
+    activeIndicator?: string;
+    notificationDot?: string;
+    notificationBadge?: string;
     danger?: string;
 }

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

@@ -1,2 +1,2 @@
 export { NavItem } from './NavItem';
-export type { NavItemProps, NavItemTheme, NavItemThemeOverrides } from './NavItem.types';
+export type { NavItemProps, NavItemSubmenuItem, NavItemTheme, NavItemThemeOverrides } from './NavItem.types';

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

@@ -15,7 +15,7 @@ const paginationTheme = {
         // Base state - dark
         "dark:bg-[var(--color-neutral-800)] dark:text-[var(--color-neutral-400)] dark:border-transparent " +
         // Hover state - light
-        "hover:text-[var(--color-text-primary)] hover:bg-neutral-50 hover:border-[var(--color-border)] " +
+        "hover:text-[var(--color-text-primary)] hover:bg-[var(--color-background-secondary)] hover:border-[var(--color-border)] " +
         // Hover state - dark
         "dark:hover:bg-[var(--color-neutral-700)] dark:hover:text-[var(--color-neutral-200)] dark:hover:border-[var(--color-neutral-600)] " +
         // Active state - light

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

@@ -28,7 +28,7 @@ const pillTheme = {
      */
     sizes: {
         sm: "text-sm px-2 py-0.5 gap-0.5",
-        md: "text-base px-2.5 py-1 gap-1",
+        md: "text-base px-2 py-0.5 gap-1",
         lg: "text-base px-3 py-1 gap-1.5",
     },
     /**

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

@@ -1,6 +1,6 @@
 import React from "react";
 import { PopoverRootProps as PopoverProps } from "./Popover.types";
 export declare const Popover: (({ children, className, isOpen: controlledIsOpen, defaultIsOpen, onOpenChange, placement, offset, triggerType, closeOnClickOutside, closeOnEsc, preventClose, hasBackdrop, theme: themeOverrides, darkMode, ...props }: PopoverProps) => import("react/jsx-runtime").JSX.Element) & {
-    Trigger: React.ForwardRefExoticComponent<Omit<import("./Popover.types").PopoverTriggerProps, "ref"> & React.RefAttributes<any>>;
+    Trigger: React.ForwardRefExoticComponent<Omit<import("./Popover.types").PopoverTriggerProps, "ref"> & React.RefAttributes<HTMLElement>>;
     Body: React.ForwardRefExoticComponent<import("./Popover.types").PopoverBodyProps & React.RefAttributes<HTMLDivElement>>;
 };

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

@@ -58,7 +58,7 @@ const PopoverBody = React__default.forwardRef(({ children, className, animation
     const { position, cssVariables, contentRef: portalContentRef, } = useSelectPortal({
         triggerRef,
         isOpen: isOpen || false,
-        placement: placement,
+        placement,
         offset: offset || 8,
         autoWidth: true,
         onClose: () => {
@@ -132,7 +132,7 @@ const PopoverBody = React__default.forwardRef(({ children, className, animation
         return (jsx(Overlay, { ref: handleRef, isOpen: isOpen, onClose: () => {
                 if (!preventClose)
                     onOpenChange(false);
-            }, closeOnOverlayClick: closeOnClickOutside && !preventClose, closeOnEsc: closeOnEsc && !preventClose, enableScrollLock: false, enableFocusTrap: false, position: "none", role: "dialog", ariaModal: true, contentClassName: contentClasses, contentStyle: contentPositionStyle, animations: animation && !shouldReduceMotion
+            }, closeOnOverlayClick: closeOnClickOutside && !preventClose, closeOnEsc: closeOnEsc && !preventClose, enableScrollLock: false, enableFocusTrap: true, position: "none", role: "dialog", ariaModal: true, contentClassName: contentClasses, contentStyle: contentPositionStyle, animations: animation && !shouldReduceMotion
                 ? {
                     overlay: overlayBackdropAnimations,
                     content: overlayContentAnimations,

package/dist/components/core/Popover/PopoverTrigger.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
 import { PopoverTriggerProps } from "./Popover.types";
-export declare const PopoverTrigger: React.ForwardRefExoticComponent<Omit<PopoverTriggerProps, "ref"> & React.RefAttributes<any>>;
+export declare const PopoverTrigger: React.ForwardRefExoticComponent<Omit<PopoverTriggerProps, "ref"> & React.RefAttributes<HTMLElement>>;

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

@@ -5,6 +5,7 @@ import { usePopoverContext } from './PopoverContext.js';
 const PopoverTrigger = React__default.forwardRef(({ children, className, ...props }, ref) => {
     var _a;
     const context = usePopoverContext();
+    const childElement = children;
     // Create trigger events based on triggerType
     const getTriggerEvents = () => {
         if (context.triggerType === "click") {
@@ -14,7 +15,7 @@ const PopoverTrigger = React__default.forwardRef(({ children, className, ...prop
                     e.preventDefault();
                     context.onOpenChange(!context.isOpen);
                     // Call the original onClick if it exists
-                    (_b = (_a = children.props) === null || _a === void 0 ? void 0 : _a.onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+                    (_b = (_a = childElement.props) === null || _a === void 0 ? void 0 : _a.onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
                 },
             };
         }
@@ -24,7 +25,7 @@ const PopoverTrigger = React__default.forwardRef(({ children, className, ...prop
                     var _a, _b;
                     context.onOpenChange(true);
                     // Call the original onMouseEnter if it exists
-                    (_b = (_a = children.props) === null || _a === void 0 ? void 0 : _a.onMouseEnter) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+                    (_b = (_a = childElement.props) === null || _a === void 0 ? void 0 : _a.onMouseEnter) === null || _b === void 0 ? void 0 : _b.call(_a, e);
                 },
                 onMouseLeave: (e) => {
                     var _a, _b;
@@ -32,43 +33,42 @@ const PopoverTrigger = React__default.forwardRef(({ children, className, ...prop
                         context.onOpenChange(false);
                     }
                     // Call the original onMouseLeave if it exists
-                    (_b = (_a = children.props) === null || _a === void 0 ? void 0 : _a.onMouseLeave) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+                    (_b = (_a = childElement.props) === null || _a === void 0 ? void 0 : _a.onMouseLeave) === null || _b === void 0 ? void 0 : _b.call(_a, e);
                 },
             };
         }
         return {};
     };
     // Merge refs for the trigger element
-    function setRef(node) {
+    function mergeRefs(node) {
         context.triggerRef.current = node;
         if (ref) {
             if (typeof ref === "function")
                 ref(node);
-            else if (typeof ref === "object")
+            else if (typeof ref === "object" && ref)
                 ref.current = node;
         }
-        const childRef = children.ref;
+        const childRef = childElement.ref;
         if (childRef) {
             if (typeof childRef === "function")
                 childRef(node);
-            else if (typeof childRef === "object")
+            else if (typeof childRef === "object" && childRef)
                 childRef.current = node;
         }
     }
     const triggerEvents = getTriggerEvents();
-    const childElement = children;
     return React__default.cloneElement(childElement, {
-        ref: setRef,
+        ref: mergeRefs,
         "aria-expanded": context.isOpen,
         "aria-haspopup": true,
         "aria-controls": context.contentId,
-        className: cn((_a = childElement.props) === null || _a === void 0 ? void 0 : _a.className, className, "popover-trigger"),
+        className: cn("popover-trigger", (_a = childElement.props) === null || _a === void 0 ? void 0 : _a.className, className),
         "data-state": context.isOpen ? "open" : "closed",
         "data-trigger-type": context.triggerType,
         ...triggerEvents,
         ...props,
     });
 });
-PopoverTrigger.displayName = "PopoverTrigger";
+PopoverTrigger.displayName = "Popover.Trigger";
 
 export { PopoverTrigger };

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

@@ -6,23 +6,24 @@ import { ProgressProps } from "./Progress.types";
  * Features:
  * - Determinate mode: Shows specific progress value (0-100)
  * - Indeterminate mode: Animated loading state when value is undefined
- * - Multiple sizes and semantic colors
+ * - Multiple sizes with default primary color
+ * - className controls the fill bar color (the primary styling target)
+ * - wrapperClassName controls the outer container
  * - Flexible label positioning (right, top, bottom, inside)
  * - Respects reduced motion preferences
- * - Full className override support
  *
  * @example
- * // Determinate progress
- * <Progress value={60} color="primary" />
+ * // Default (primary color)
+ * <Progress value={60} />
+ *
+ * // Custom fill color via className
+ * <Progress value={70} className="bg-[var(--color-success)]" />
  *
  * // With label
  * <Progress value={75} showLabel labelPosition="right" />
  *
  * // Indeterminate (loading)
- * <Progress color="primary" />
- *
- * // Custom label format
- * <Progress value={50} showLabel formatLabel={(pct) => `${pct}% complete`} />
+ * <Progress />
  */
 declare const Progress: React.ForwardRefExoticComponent<ProgressProps & React.RefAttributes<HTMLDivElement>>;
 export { Progress };

package/dist/components/core/Progress/Progress.js

@@ -16,25 +16,26 @@ const PROGRESS_SPRING_TRANSITION = {
  * Features:
  * - Determinate mode: Shows specific progress value (0-100)
  * - Indeterminate mode: Animated loading state when value is undefined
- * - Multiple sizes and semantic colors
+ * - Multiple sizes with default primary color
+ * - className controls the fill bar color (the primary styling target)
+ * - wrapperClassName controls the outer container
  * - Flexible label positioning (right, top, bottom, inside)
  * - Respects reduced motion preferences
- * - Full className override support
  *
  * @example
- * // Determinate progress
- * <Progress value={60} color="primary" />
+ * // Default (primary color)
+ * <Progress value={60} />
+ *
+ * // Custom fill color via className
+ * <Progress value={70} className="bg-[var(--color-success)]" />
  *
  * // With label
  * <Progress value={75} showLabel labelPosition="right" />
  *
  * // Indeterminate (loading)
- * <Progress color="primary" />
- *
- * // Custom label format
- * <Progress value={50} showLabel formatLabel={(pct) => `${pct}% complete`} />
+ * <Progress />
  */
-const Progress = React__default.forwardRef(({ value, size = "md", color = "primary", showLabel = false, labelPosition = "right", formatLabel, animated = true, trackClassName, fillClassName, className, theme: customTheme, ...props }, ref) => {
+const Progress = React__default.forwardRef(({ value, size = "md", showLabel = false, labelPosition = "right", formatLabel, animated = true, wrapperClassName, className, theme: customTheme, ...props }, ref) => {
     const shouldReduceMotion = useReducedMotion();
     // Merge custom theme with default theme
     const theme = useMemo(() => {
@@ -44,7 +45,6 @@ const Progress = React__default.forwardRef(({ value, size = "md", color = "prima
             ...progressTheme,
             ...customTheme,
             sizes: { ...progressTheme.sizes, ...customTheme.sizes },
-            colors: { ...progressTheme.colors, ...customTheme.colors },
         };
     }, [customTheme]);
     // Calculate percentage (clamped to 0-100)
@@ -71,7 +71,7 @@ const Progress = React__default.forwardRef(({ value, size = "md", color = "prima
             case "top":
                 return "flex flex-col gap-1.5";
             case "bottom":
-                return "flex flex-col-reverse gap-1.5";
+                return "flex flex-col gap-1.5";
             case "right":
                 return "flex items-center gap-3";
             case "inside":
@@ -95,14 +95,14 @@ const Progress = React__default.forwardRef(({ value, size = "md", color = "prima
                 : ""), children: label }));
     };
     // Track element with optional fill
-    const renderTrack = () => (jsxs("div", { className: cn(theme.trackStyle, theme.sizes[size], "relative", trackClassName), children: [isIndeterminate ? (
+    const renderTrack = () => (jsxs("div", { className: cn(theme.trackStyle, theme.sizes[size], "relative", wrapperClassName), children: [isIndeterminate ? (
             // Indeterminate animation
-            jsx("div", { className: cn(theme.fillStyle, theme.colors[color], "w-1/3", theme.indeterminateStyle, fillClassName) })) : shouldAnimate ? (
+            jsx("div", { className: cn(theme.fillStyle, "absolute", theme.indeterminateStyle, className) })) : shouldAnimate ? (
             // Animated determinate progress with spring animation
-            jsx(motion.div, { className: cn(theme.fillStyle, theme.colors[color], fillClassName), initial: { width: 0 }, animate: { width: `${percentage}%` }, transition: PROGRESS_SPRING_TRANSITION })) : (
+            jsx(motion.div, { className: cn(theme.fillStyle, className), initial: { width: 0 }, animate: { width: `${percentage}%` }, transition: PROGRESS_SPRING_TRANSITION })) : (
             // Static determinate progress
-            jsx("div", { className: cn(theme.fillStyle, theme.colors[color], fillClassName), style: { width: `${percentage}%` } })), showLabel && labelPosition === "inside" && size === "lg" && !isIndeterminate && (jsx("span", { className: theme.insideLabelStyle, children: label }))] }));
-    return (jsxs("div", { ref: ref, className: cn(theme.containerStyle, containerLayoutClass, className), role: "progressbar", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": isIndeterminate ? undefined : percentage, "aria-label": isIndeterminate ? "Loading" : `${percentage}% complete`, ...props, children: [labelPosition === "top" && renderLabel(), labelPosition === "right" ? (jsxs(Fragment, { children: [jsx("div", { className: "flex-1", children: renderTrack() }), renderLabel()] })) : (renderTrack()), labelPosition === "bottom" && renderLabel()] }));
+            jsx("div", { className: cn(theme.fillStyle, className), style: { width: `${percentage}%` } })), showLabel && labelPosition === "inside" && size === "lg" && !isIndeterminate && (jsx("span", { className: theme.insideLabelStyle, children: label }))] }));
+    return (jsxs("div", { ref: ref, className: cn(theme.containerStyle, containerLayoutClass), role: "progressbar", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": isIndeterminate ? undefined : percentage, "aria-label": isIndeterminate ? "Loading" : `${percentage}% complete`, ...props, children: [labelPosition === "top" && renderLabel(), labelPosition === "right" ? (jsxs(Fragment, { children: [jsx("div", { className: "flex-1", children: renderTrack() }), renderLabel()] })) : (renderTrack()), labelPosition === "bottom" && renderLabel()] }));
 });
 Progress.displayName = "Progress";