@flikk/ui 1.0.0-beta.3 → 1.0.0-beta.31

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

@@ -1,10 +1,13 @@
+"use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import React__default, { useState, useEffect, useCallback } from 'react';
 import { useReducedMotion, motion } from 'motion/react';
 import { pillTheme } from './Pill.theme.js';
-import { pillTapVariant } from './Pill.animations.js';
+import { createPressVariants } from '../shared/interaction.animations.js';
 import { cn } from '../../../utils/cn.js';
 
+// Shared press physics + subtle hover lift (module-level constant)
+const PILL_PRESS_VARIANTS = createPressVariants(0.97, 1.02);
 /**
  * Pill component - Simplified selectable chip for filters and tags
  *
@@ -40,9 +43,17 @@ import { cn } from '../../../utils/cn.js';
  * </Pill>
  * ```
  */
-const Pill = React__default.forwardRef(({ children, size = "md", iconStart, selected = false, onSelect, readOnly = false, className, theme = {}, onClick, ...props }, ref) => {
-    // ========== State Management ==========
+const Pill = React__default.forwardRef((props, ref) => {
     var _a, _b;
+    const { children, size = "md", iconStart, selected = false, onSelect, readOnly = false, className, theme = {}, onClick, ...restProps } = props;
+    // Detect whether the consumer *explicitly* passed `selected` (even
+    // `selected={undefined}` counts as not-passed) — checking the raw props
+    // object, BEFORE the `selected = false` default above is applied, so a
+    // plain `<Pill>` with no `selected` prop at all never trips the
+    // dev-warning below just because the destructured default made it look
+    // "set".
+    const hasExplicitSelected = "selected" in props && props.selected !== undefined;
+    // ========== State Management ==========
     const [isSelected, setIsSelected] = useState(selected);
     useEffect(() => {
         setIsSelected(selected);
@@ -55,12 +66,12 @@ const Pill = React__default.forwardRef(({ children, size = "md", iconStart, sele
     // ========== Development Warnings ==========
     useEffect(() => {
         if (process.env.NODE_ENV !== "production") {
-            if (selected !== undefined && !onSelect) {
+            if (hasExplicitSelected && !onSelect) {
                 // eslint-disable-next-line no-console
                 console.warn('[Pill] Component has "selected" prop but missing "onSelect" handler. The pill will not be interactive.');
             }
         }
-    }, [selected, onSelect]);
+    }, [hasExplicitSelected, onSelect]);
     // ========== Event Handlers ==========
     const handleClick = useCallback((e) => {
         if (readOnly) {
@@ -111,7 +122,7 @@ const Pill = React__default.forwardRef(({ children, size = "md", iconStart, sele
         // Accessibility
         role: isSelectable && !readOnly ? "button" : undefined, tabIndex: isInteractive ? 0 : undefined, "aria-pressed": isSelectable && !readOnly ? isSelected : undefined, "aria-readonly": readOnly || undefined, 
         // Animation
-        whileTap: isInteractive && !shouldReduceMotion ? pillTapVariant : undefined, ...props, children: [renderStartIcon(), children] }));
+        variants: PILL_PRESS_VARIANTS, animate: "rest", whileHover: isInteractive && !shouldReduceMotion ? "hover" : undefined, whileTap: isInteractive && !shouldReduceMotion ? "press" : undefined, ...restProps, children: [renderStartIcon(), children] }));
 });
 Pill.displayName = "Pill";
 

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

@@ -9,27 +9,29 @@ const pillTheme = {
      * Base pill style - structure and default colors (no hover)
      */
     baseStyle: "inline-flex items-center justify-center font-medium rounded-full select-none whitespace-nowrap " +
-        "ring-1 bg-white transition-all duration-300 " +
+        "ring-1 bg-[var(--color-surface)] transition-[color,background-color,box-shadow] duration-150 ease-out " +
         "text-[var(--color-text-primary)] ring-[var(--color-border)] " +
-        "focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] " +
-        "dark:bg-[var(--color-background-secondary)]",
+        "focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)]",
     /**
-     * Hover state - applied only when interactive and NOT selected
+     * Hover state - applied only when interactive and NOT selected.
+     * Uses the single shared interaction tint + interaction edge (both mode-aware,
+     * darken-in-light / lighten-in-dark) — no bespoke per-step neutral colors. See CLAUDE §3.
      */
-    hoverStyle: "hover:bg-[var(--color-neutral-100)] hover:ring-[var(--color-neutral-300)] " +
-        "dark:hover:bg-[var(--color-neutral-800)] dark:hover:ring-[var(--color-neutral-500)]",
+    hoverStyle: "hover:bg-[var(--color-surface-hover)] hover:ring-[var(--color-border-hover)]",
     /**
      * Selected state - applied when selected
      */
-    selectedStyle: "bg-[var(--color-primary)]/5 ring-[var(--color-primary)] text-[var(--color-primary)] " +
-        "dark:bg-[var(--color-primary)]/20 dark:text-[var(--color-primary-300)] ",
+    selectedStyle: "bg-[var(--color-primary)]/5 ring-[var(--color-primary)]/20 text-[var(--color-primary)] " +
+        "dark:bg-[var(--color-primary)]/10  ",
     /**
      * Size variants
      */
+    // Paddings tokenised (--pill-px-*/--pill-py-*) so a theme can grow the chip
+    // tier alongside its controls — defaults are px-2.5/px-3 + py-0.5/py-1.
     sizes: {
-        sm: "text-xs px-2 py-0.5 gap-0.5",
-        md: "text-sm px-2.5 py-1 gap-1",
-        lg: "text-sm px-3 py-1 gap-1.5",
+        sm: "text-xs px-[var(--pill-px-sm)] py-[var(--pill-py-sm)] gap-0.5",
+        md: "text-sm px-[var(--pill-px-md)] py-[var(--pill-py-md)] gap-1",
+        lg: "text-sm px-[var(--pill-px-lg)] py-[var(--pill-py-lg)] gap-1.5",
     },
     /**
      * Icon sizes for iconStart and CheckIcon

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>>;
-    Content: React.ForwardRefExoticComponent<import("./Popover.types").PopoverContentProps & React.RefAttributes<HTMLDivElement>>;
+    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/Popover.js

@@ -1,9 +1,10 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
-import { useId, useState, useRef, useCallback } from 'react';
+import { useId, useState, useRef, useCallback, useMemo } from 'react';
 import { cn } from '../../../utils/cn.js';
 import { PopoverContext } from './PopoverContext.js';
 import { PopoverTrigger } from './PopoverTrigger.js';
-import { PopoverContent } from './PopoverContent.js';
+import { PopoverBody } from './PopoverBody.js';
 import { popoverTheme } from './Popover.theme.js';
 
 /**
@@ -16,9 +17,9 @@ import { popoverTheme } from './Popover.theme.js';
  *   <Popover.Trigger>
  *     <Button>Open Popover</Button>
  *   </Popover.Trigger>
- *   <Popover.Content>
+ *   <Popover.Body>
  *     <div>Popover content</div>
- *   </Popover.Content>
+ *   </Popover.Body>
  * </Popover>
  * ```
  */
@@ -41,12 +42,12 @@ const PopoverRoot = ({ children, className, isOpen: controlledIsOpen, defaultIsO
         onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(value);
     }, [isControlled, onOpenChange]);
     // Merge theme with overrides
-    const theme = {
+    const theme = useMemo(() => ({
         ...popoverTheme,
         ...(themeOverrides || {}),
-    };
+    }), [themeOverrides]);
     // Context value
-    const contextValue = {
+    const contextValue = useMemo(() => ({
         isOpen,
         onOpenChange: handleOpenChange,
         triggerRef,
@@ -60,13 +61,13 @@ const PopoverRoot = ({ children, className, isOpen: controlledIsOpen, defaultIsO
         hasBackdrop,
         theme,
         contentId,
-    };
-    return (jsx(PopoverContext.Provider, { value: contextValue, children: jsx("div", { className: cn("popover", darkMode && "dark", className), "data-state": isOpen ? "open" : "closed", "data-backdrop": hasBackdrop ? "true" : "false", ...props, children: children }) }));
+    }), [isOpen, handleOpenChange, triggerRef, contentRef, placement, offset, triggerType, closeOnClickOutside, closeOnEsc, preventClose, hasBackdrop, theme, contentId]);
+    return (jsx(PopoverContext.Provider, { value: contextValue, children: jsx("div", { className: cn("popover contents", darkMode && "dark", className), "data-state": isOpen ? "open" : "closed", "data-backdrop": hasBackdrop ? "true" : "false", ...props, children: children }) }));
 };
 // Export as a unified component
 const Popover = Object.assign(PopoverRoot, {
     Trigger: PopoverTrigger,
-    Content: PopoverContent,
+    Body: PopoverBody,
 });
 
 export { Popover };

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

@@ -3,7 +3,7 @@
  */
 export interface PopoverTheme {
     baseStyle: string;
-    contentStyle: string;
+    bodyStyle: string;
 }
 /**
  * Default theme for the Popover component

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

@@ -4,8 +4,10 @@
 const popoverTheme = {
     // Base styles for the popover
     baseStyle: "z-50 outline-none",
-    // Content styles
-    contentStyle: "bg-[var(--color-surface)] 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-background-secondary)] ",
+    // Body styles. bg + shadow come from the relative-elevation engine
+    // (surfaceClasses) at runtime so a nested popover lifts above its host; keep
+    // the frosted blur + border + radius + padding here.
+    bodyStyle: "backdrop-blur-md border border-[var(--color-border)] rounded-[var(--popover-radius)] p-4 max-w-[min(24rem,calc(100vw-2rem))]",
 };
 
 export { popoverTheme };

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

@@ -1,5 +1,6 @@
 import React, { ReactNode } from "react";
 import { PopoverTheme } from "./Popover.theme";
+import type { SurfaceElevation } from "../../../theme/SurfaceContext";
 export type PopoverPlacement = "top" | "top-start" | "top-end" | "right" | "right-start" | "right-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end";
 export type PopoverTriggerType = "click" | "hover";
 export interface PopoverContextValue {
@@ -44,10 +45,27 @@ export interface PopoverTriggerProps {
     className?: string;
     [key: string]: unknown;
 }
-export interface PopoverContentProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface PopoverBodyProps extends React.HTMLAttributes<HTMLDivElement> {
     children: ReactNode;
     animation?: boolean;
     portal?: boolean;
+    /** Cap the body to the viewport-available height (space below/above the
+     *  trigger, computed by the positioning hook; falls back to 400px) and add
+     *  `overflow-y-auto`, so tall content scrolls inside the popover instead of
+     *  extending past the viewport unreachably. `max-height` + `auto` means short
+     *  popovers show no scrollbar. Set `false` to opt out (uncapped, may overflow).
+     *  @default true */
+    scrollable?: boolean;
+    /** Custom max-height when scrollable is true (e.g. "300px", "20rem").
+     *  Overrides the default viewport-aware height. */
+    maxHeight?: string;
+    /**
+     * Pin the surface elevation rung (overrides the automatic relative lift).
+     * A rung number (1–8) or a semantic alias ("surface"/"raised"/"overlay"…).
+     */
+    elevation?: SurfaceElevation;
+    /** `false` opts out of the relative lift — paints at the popover's base rung. */
+    lift?: boolean;
 }
 /**
  * Theme overrides for the Popover component
@@ -55,6 +73,6 @@ export interface PopoverContentProps extends React.HTMLAttributes<HTMLDivElement
 export interface PopoverThemeOverrides {
     /** Base style for the popover */
     baseStyle?: string;
-    /** Content style for the popover */
-    contentStyle?: string;
+    /** Body style for the popover */
+    bodyStyle?: string;
 }

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

@@ -0,0 +1,7 @@
+import React from "react";
+import { PopoverBodyProps } from "./Popover.types";
+/**
+ * PopoverBody component displays the body/content of the popover
+ */
+declare const PopoverBody: React.ForwardRefExoticComponent<PopoverBodyProps & React.RefAttributes<HTMLDivElement>>;
+export { PopoverBody };

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

@@ -0,0 +1,134 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+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';
+import { usePopoverContext } from './PopoverContext.js';
+import { useClickOutside } from '../../../hooks/useClickOutside.js';
+import '../../../theme/ThemeContext.js';
+import { useSurfaceElevation, surfaceClasses, SurfaceProvider } from '../../../theme/SurfaceContext.js';
+import { getOverlayMenuVariants, overlayBackdropAnimations } from '../../../theme/animations.js';
+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';
+
+/**
+ * PopoverBody component displays the body/content of the popover
+ */
+const PopoverBody = React__default.forwardRef(({ children, className, animation = true, portal = true, scrollable = true, maxHeight, elevation, lift, ...props }, ref) => {
+    // Relative elevation: lift above the host surface (overlay base = 5).
+    const surfaceLevel = useSurfaceElevation({ baseRung: 5, offset: 2, elevation, lift });
+    const { isOpen, onOpenChange, triggerRef, contentRef, placement, offset, triggerType, closeOnClickOutside, closeOnEsc, preventClose, hasBackdrop, theme, contentId, } = usePopoverContext();
+    const shouldReduceMotion = useReducedMotion();
+    const localRef = useRef(null);
+    // Use the same positioning hook as Select/Tooltip (now supports all 12 placements)
+    const { position, cssVariables, contentRef: portalContentRef, isReady, actualPlacement, } = useSelectPortal({
+        triggerRef,
+        isOpen: isOpen || false,
+        placement,
+        offset: offset || 8,
+        autoWidth: true,
+        onClose: () => {
+            if (!preventClose)
+                onOpenChange(false);
+        },
+        stickyTracking: true,
+    });
+    // Click outside detection (active when no backdrop — with backdrop, Overlay handles it)
+    useClickOutside(localRef, (e) => {
+        var _a, _b, _c;
+        if (hasBackdrop)
+            return; // Overlay handles click-outside via backdrop
+        if (e.target === triggerRef.current ||
+            ((_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
+            return;
+        }
+        // Ignore clicks that land inside any FlikkUI overlay portal (a nested
+        // Select/Tooltip/Dropdown/Popover renders to document.body, outside our
+        // content ref — without this it would count as an outside click and
+        // dismiss the popover). See the `data-flikkui-portal` convention.
+        if ((_c = (_b = e.target) === null || _b === void 0 ? void 0 : _b.closest) === null || _c === void 0 ? void 0 : _c.call(_b, "[data-flikkui-portal]")) {
+            return;
+        }
+        if (closeOnClickOutside && !preventClose) {
+            onOpenChange(false);
+        }
+    });
+    // Escape key handling (active when no backdrop — with backdrop, Overlay handles it)
+    useEffect(() => {
+        if (hasBackdrop)
+            return; // Overlay handles escape key
+        const handleKeyDown = (e) => {
+            if (closeOnEsc && e.key === "Escape" && !preventClose) {
+                onOpenChange(false);
+            }
+        };
+        document.addEventListener("keydown", handleKeyDown);
+        return () => {
+            document.removeEventListener("keydown", handleKeyDown);
+        };
+    }, [hasBackdrop, closeOnEsc, onOpenChange, preventClose]);
+    // Combine refs
+    const handleRef = useCallback((el) => {
+        localRef.current = el;
+        if (typeof ref === "function") {
+            ref(el);
+        }
+        else if (ref) {
+            ref.current = el;
+        }
+        if (contentRef) {
+            contentRef.current = el;
+        }
+        if (portalContentRef &&
+            typeof portalContentRef === "object" &&
+            "current" in portalContentRef) {
+            portalContentRef.current =
+                el;
+        }
+    }, [ref, contentRef, portalContentRef]);
+    const isDarkMode = useDarkMode();
+    const isClient = useIsClient();
+    // Extract DOM props to avoid type conflicts with Framer Motion
+    const { onDrag, onDragStart, onDragEnd, onAnimationStart, onAnimationEnd, ...domProps } = props;
+    const side = (actualPlacement || placement || "bottom").split("-")[0];
+    const transformOrigin = side === "top" ? "bottom" : side === "left" ? "right" : side === "right" ? "left" : "top";
+    const contentClasses = cn(surfaceClasses(surfaceLevel, { translucent: true }), theme.baseStyle, theme.bodyStyle, "popover-content", scrollable && "overflow-y-auto", className);
+    const contentPositionStyle = {
+        ...cssVariables,
+        position: "fixed",
+        top: `${position.top}px`,
+        left: `${position.left}px`,
+        transformOrigin,
+        ...(scrollable && {
+            maxHeight: maxHeight || "var(--select-content-available-height, 400px)",
+        }),
+    };
+    const popoverVariants = getOverlayMenuVariants(side, {
+        scale: 0.97,
+        shift: 6,
+    });
+    // When hasBackdrop is true, delegate backdrop + escape + click-outside to Overlay
+    if (hasBackdrop) {
+        return (jsx(Overlay, { ref: handleRef, isOpen: isOpen, onClose: () => {
+                if (!preventClose)
+                    onOpenChange(false);
+            }, closeOnOverlayClick: closeOnClickOutside && !preventClose, closeOnEsc: closeOnEsc && !preventClose, enableScrollLock: false, enableFocusTrap: true, position: "none", role: "dialog", ariaModal: true, contentClassName: contentClasses, contentStyle: contentPositionStyle, animations: animation && !shouldReduceMotion && isReady
+                ? {
+                    overlay: overlayBackdropAnimations,
+                    content: popoverVariants,
+                }
+                : undefined, children: jsx("div", { id: contentId, "data-state": isOpen ? "open" : "closed", "data-placement": placement, "data-trigger": triggerType, ...domProps, children: jsx(SurfaceProvider, { level: surfaceLevel, 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, variants: shouldReduceMotion || !animation ? {} : popoverVariants, initial: shouldReduceMotion || !animation ? undefined : "hidden", animate: shouldReduceMotion || !animation ? undefined : (isReady ? "visible" : "hidden"), exit: shouldReduceMotion || !animation ? undefined : "exit", transition: shouldReduceMotion || !animation ? { duration: 0 } : undefined, "data-state": isOpen ? "open" : "closed", "data-placement": placement, "data-trigger": triggerType, onClick: (e) => e.stopPropagation(), ...domProps, children: jsx(SurfaceProvider, { level: surfaceLevel, children: children }) })) }));
+    if (portal && isClient) {
+        return createPortal(jsx("div", { "data-flikkui-portal": "", className: isDarkMode ? "dark" : undefined, children: popoverContent }), document.body);
+    }
+    return popoverContent;
+});
+PopoverBody.displayName = "Popover.Body";
+
+export { PopoverBody };

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

@@ -1,3 +1,4 @@
+"use client";
 import { createContext, useContext } from 'react';
 
 // Create context

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

@@ -1,3 +1,4 @@
+"use client";
 import React__default from 'react';
 import { cn } from '../../../utils/cn.js';
 import { usePopoverContext } from './PopoverContext.js';
@@ -5,6 +6,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 +16,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 +26,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 +34,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,
+        ...(context.hasBackdrop ? { "aria-haspopup": "dialog" } : {}),
         "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/Popover/index.d.ts

@@ -1,5 +1,6 @@
 import { Popover } from './Popover';
 import { PopoverContext, usePopoverContext } from './PopoverContext';
-import { PopoverRootProps as PopoverProps, PopoverContentProps, PopoverTriggerProps, PopoverContextValue, PopoverPlacement, PopoverTriggerType, PopoverThemeOverrides } from './Popover.types';
-export { Popover, PopoverContext, usePopoverContext };
-export type { PopoverProps, PopoverContentProps, PopoverTriggerProps, PopoverContextValue, PopoverPlacement, PopoverTriggerType, PopoverThemeOverrides };
+import { PopoverRootProps as PopoverProps, PopoverBodyProps, PopoverTriggerProps, PopoverContextValue, PopoverPlacement, PopoverTriggerType, PopoverThemeOverrides } from './Popover.types';
+import { PopoverBody } from './PopoverBody';
+export { Popover, PopoverBody, PopoverContext, usePopoverContext };
+export type { PopoverProps, PopoverBodyProps, PopoverTriggerProps, PopoverContextValue, PopoverPlacement, PopoverTriggerType, PopoverThemeOverrides };

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

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import React__default, { useMemo } from 'react';
 import { useReducedMotion, motion } from 'motion/react';
@@ -16,25 +17,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, 'aria-label': consumerAriaLabel, ...props }, ref) => {
     const shouldReduceMotion = useReducedMotion();
     // Merge custom theme with default theme
     const theme = useMemo(() => {
@@ -44,7 +46,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 +72,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 +96,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 ? (
-            // 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("div", { className: cn(theme.fillStyle, "absolute", theme.indeterminateStyle, className) })) : shouldAnimate ? (
+            // Animated determinate progress with spring animation (scaleX avoids layout recalculation)
+            jsx(motion.div, { className: cn(theme.fillStyle, className), style: { width: '100%', transformOrigin: 'left' }, initial: { scaleX: 0 }, animate: { scaleX: percentage / 100 }, 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": consumerAriaLabel !== null && consumerAriaLabel !== void 0 ? consumerAriaLabel : (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";