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

package/dist/components/core/Sortable/Sortable.js

@@ -2,7 +2,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React__default, { createContext, useState, useRef, useId, useMemo, useCallback, useEffect, useContext } from 'react';
 import { Reorder, useDragControls, motion } from 'motion/react';
-import { LockClosedIcon, Bars3Icon } from '@heroicons/react/24/outline';
+import { Lock, List } from '@phosphor-icons/react';
 import { cn } from '../../../utils/cn.js';
 import { sortableTheme } from './Sortable.theme.js';
 import { sortableAnimations } from './Sortable.animations.js';
@@ -212,7 +212,7 @@ const SortableItem = React__default.forwardRef(({ id, children, className, theme
             }
         }, value: value || id, id: id, dragListener: !context.showDragHandle && !disabled, dragControls: context.showDragHandle ? dragControls : undefined, onDragStart: handleDragStart, onDragEnd: handleDragEnd, onPointerDown: handlePointerDown, tabIndex: disabled ? -1 : 0, onKeyDown: handleKeyDown, onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), className: cn(theme.itemStyle, context.showDragHandle && 'flex items-center gap-2', disabled && 'opacity-50 cursor-not-allowed', !disabled && !context.showDragHandle && 'cursor-grab active:cursor-grabbing', isBeingDragged && 'shadow-lg z-50', isFocused && !disabled && 'ring-2 ring-blue-500 ring-offset-2', className), style: {
             position: 'relative',
-        }, variants: sortableAnimations.variants, animate: isBeingDragged ? 'dragging' : 'idle', transition: sortableAnimations.layout.layout, children: [context.showDragHandle && (jsx(motion.div, { onPointerDown: handleDragHandlePointerDown, className: cn(theme.dragHandleStyle, disabled && 'cursor-not-allowed opacity-60', !disabled && 'cursor-grab active:cursor-grabbing'), whileHover: !disabled ? sortableAnimations.dragHandle.hover : undefined, whileTap: !disabled ? sortableAnimations.dragHandle.tap : undefined, children: disabled ? (jsx(LockClosedIcon, { className: "w-4 h-4 text-gray-500" })) : (jsx(Bars3Icon, { className: "w-4 h-4" })) })), jsx("div", { className: "flex-1", children: children })] }));
+        }, variants: sortableAnimations.variants, animate: isBeingDragged ? 'dragging' : 'idle', transition: sortableAnimations.layout.layout, children: [context.showDragHandle && (jsx(motion.div, { onPointerDown: handleDragHandlePointerDown, className: cn(theme.dragHandleStyle, disabled && 'cursor-not-allowed opacity-60', !disabled && 'cursor-grab active:cursor-grabbing'), whileHover: !disabled ? sortableAnimations.dragHandle.hover : undefined, whileTap: !disabled ? sortableAnimations.dragHandle.tap : undefined, children: disabled ? (jsx(Lock, { className: "w-4 h-4 text-gray-500" })) : (jsx(List, { className: "w-4 h-4" })) })), jsx("div", { className: "flex-1", children: children })] }));
 });
 SortableItem.displayName = 'SortableItem';
 

package/dist/components/core/Tag/Tag.js

@@ -2,7 +2,7 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import React__default from 'react';
 import { motion } from 'motion/react';
-import { XMarkIcon } from '@heroicons/react/24/outline';
+import { X } from '@phosphor-icons/react';
 import { cn } from '../../../utils/cn.js';
 import { Avatar } from '../Avatar/Avatar.js';
 import { tagTheme } from './Tag.theme.js';
@@ -64,7 +64,7 @@ const Tag = React__default.forwardRef(({ children, size = "md", removable = true
         }
         return null;
     };
-    const content = (jsxs(Fragment, { children: [renderLeadingContent(), children, showRemoveButton && (jsx("button", { type: "button", onClick: handleRemove, className: theme.removeButtonStyle, "aria-label": `Remove ${typeof children === "string" ? children : "tag"}`, children: jsx(XMarkIcon, { className: theme.removeIconSizes[size] }) }))] }));
+    const content = (jsxs(Fragment, { children: [renderLeadingContent(), children, showRemoveButton && (jsx("button", { type: "button", onClick: handleRemove, className: theme.removeButtonStyle, "aria-label": `Remove ${typeof children === "string" ? children : "tag"}`, children: jsx(X, { className: theme.removeIconSizes[size] }) }))] }));
     const sharedProps = {
         ref,
         className: cn(theme.baseStyle, theme.sizes[size], hasLeadingContent && "pl-1", showRemoveButton && "pr-0.5", disabled && theme.disabledStyle, className),

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

@@ -2,9 +2,11 @@ const tagTheme = {
     baseStyle: "inline-flex items-center gap-1.5 font-medium rounded-full " +
         "bg-[var(--color-surface-raised)] border border-[var(--color-border)] " +
         "text-[var(--color-text-primary)]",
+    // Paddings tokenised (--tag-px-*/--tag-py-*, + --tag-pl-md for md's larger
+    // left inset) so a theme can grow the chip tier — defaults px-2/px-2+pl-2.5.
     sizes: {
-        sm: "text-xs px-2 py-0.5",
-        md: "text-sm px-2 pl-2.5 py-0.5",
+        sm: "text-xs px-[var(--tag-px-sm)] py-[var(--tag-py-sm)]",
+        md: "text-sm px-[var(--tag-px-md)] pl-[var(--tag-pl-md)] py-[var(--tag-py-md)]",
     },
     // No left margin here: the avatar/icon's left inset is owned by the tag's
     // `pl-1` (applied when there's leading content), not by a per-size `ml-*`.

package/dist/components/core/Toast/Toast.js

@@ -6,7 +6,7 @@ import { cn } from '../../../utils/cn.js';
 import { useSurfaceElevation, SurfaceProvider, surfaceClasses } from '../../../theme/SurfaceContext.js';
 import { toastTheme } from './Toast.theme.js';
 import { getToastStackingAnimation, toastAnimations } from './Toast.animations.js';
-import { ArrowPathIcon, InformationCircleIcon, XMarkIcon } from '@heroicons/react/24/solid';
+import { ArrowsClockwise, Info, X } from '@phosphor-icons/react';
 import { Link } from '../Link/Link.js';
 
 const isToastAction = (action) => typeof action === "object" &&
@@ -40,7 +40,7 @@ const Toast = React__default.forwardRef(({ toast, className, onDismiss, index =
     // so assistive tech announces it exactly once, using this more specific
     // role/urgency rather than the container's generic "polite" default.
     const toastRole = color === "danger" || color === "warning" ? "alert" : "status";
-    const defaultIcon = state === "loading" ? (jsx(motion.div, { animate: { rotate: 360 }, transition: { repeat: Infinity, duration: 1, ease: "linear" }, children: jsx(ArrowPathIcon, { className: "w-5 h-5" }) })) : (jsx(InformationCircleIcon, { className: "w-5 h-5" }));
+    const defaultIcon = state === "loading" ? (jsx(motion.div, { animate: { rotate: 360 }, transition: { repeat: Infinity, duration: 1, ease: "linear" }, children: jsx(ArrowsClockwise, { className: "w-5 h-5" }) })) : (jsx(Info, { className: "w-5 h-5" }));
     const resolvedIcon = icon || defaultIcon;
     // Auto-dismiss after duration (pauses when hovered/expanded, then RESUMES the remaining
     // time rather than restarting the full countdown — otherwise intermittent hover keeps
@@ -108,7 +108,7 @@ const Toast = React__default.forwardRef(({ toast, className, onDismiss, index =
     }, [stackingStyle.zIndex, index, position]);
     const toastNode = (jsx(motion.div, { ref: setRefs, role: toastRole, layout: true, initial: shouldReduceMotion ? false : toastAnimations.initial, animate: animateValue, exit: shouldReduceMotion
             ? { ...toastAnimations.exit, transition: { duration: 0 } }
-            : toastAnimations.exit, transition: shouldReduceMotion ? { duration: 0 } : toastAnimations.transition, className: cn(surfaceClasses(surfaceLevel, { translucent: true, shadow: true }), toastTheme.baseStyle, isTextOnly && "items-center", "pointer-events-auto", index > 0 && !isExpanded && "absolute top-0 left-0", className), style: styleValue, children: jsxs(SurfaceProvider, { level: surfaceLevel, children: [jsx("div", { className: cn(toastTheme.iconStyle, !isTextOnly && "mt-0.5"), children: resolvedIcon }), jsxs("div", { className: "flex-1 min-w-0", children: [title && jsx("div", { className: toastTheme.titleStyle, children: title }), subtitle && (jsx("div", { className: toastTheme.subtitleStyle, children: subtitle })), action && (jsx("div", { className: "mt-4", children: isToastAction(action) ? (jsx(Link, { color: "primary", size: "sm", onClick: handleActionClick, children: action.label })) : (action) })), children] }), dismissible && (jsx("button", { type: "button", className: cn(toastTheme.closeButtonStyle, !isTextOnly && "mt-0.5"), onClick: handleDismiss, "aria-label": "Dismiss notification", children: jsx(XMarkIcon, { className: "size-5" }) }))] }) }));
+            : toastAnimations.exit, transition: shouldReduceMotion ? { duration: 0 } : toastAnimations.transition, className: cn(surfaceClasses(surfaceLevel, { translucent: true, shadow: true }), toastTheme.baseStyle, isTextOnly && "items-center", "pointer-events-auto", index > 0 && !isExpanded && "absolute top-0 left-0", className), style: styleValue, children: jsxs(SurfaceProvider, { level: surfaceLevel, children: [jsx("div", { className: cn(toastTheme.iconStyle, !isTextOnly && "mt-0.5"), children: resolvedIcon }), jsxs("div", { className: "flex-1 min-w-0", children: [title && jsx("div", { className: toastTheme.titleStyle, children: title }), subtitle && (jsx("div", { className: toastTheme.subtitleStyle, children: subtitle })), action && (jsx("div", { className: "mt-4", children: isToastAction(action) ? (jsx(Link, { color: "primary", size: "sm", onClick: handleActionClick, children: action.label })) : (action) })), children] }), dismissible && (jsx("button", { type: "button", className: cn(toastTheme.closeButtonStyle, !isTextOnly && "mt-0.5"), onClick: handleDismiss, "aria-label": "Dismiss notification", children: jsx(X, { className: "size-5" }) }))] }) }));
     if (darkMode) {
         return jsx("div", { className: "dark", children: toastNode });
     }

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

@@ -25,7 +25,7 @@ export interface ToastData {
      * Semantic severity of the toast. Drives the per-toast live-region role
      * (`danger`/`warning` -> `role="alert"`, everything else -> `role="status"`)
      * as well as `useToast()`'s convenience-method icon color.
-     * @default "neutral"
+     * @default "mono"
      */
     color?: SemanticColor;
     title?: ReactNode;

package/dist/components/core/Toast/useToast.js

@@ -1,6 +1,6 @@
 "use client";
 import React__default, { useCallback } from 'react';
-import { InformationCircleIcon, ExclamationTriangleIcon, XCircleIcon, CheckCircleIcon } from '@heroicons/react/24/solid';
+import { Info, Warning, XCircle, CheckCircle } from '@phosphor-icons/react';
 import { useToastContext } from './ToastProvider.js';
 
 const createSemanticIcon = (IconComponent, colorClass) => {
@@ -30,7 +30,7 @@ const useToast = () => {
             duration: options === null || options === void 0 ? void 0 : options.duration,
             dismissible: options === null || options === void 0 ? void 0 : options.dismissible,
             action: options === null || options === void 0 ? void 0 : options.action,
-            icon: (options === null || options === void 0 ? void 0 : options.icon) || createSemanticIcon(CheckCircleIcon, 'text-[var(--color-success)]'),
+            icon: (options === null || options === void 0 ? void 0 : options.icon) || createSemanticIcon(CheckCircle, 'text-[var(--color-success)]'),
         });
     }, [addToast]);
     const error = useCallback((title, options) => {
@@ -42,7 +42,7 @@ const useToast = () => {
             duration: options === null || options === void 0 ? void 0 : options.duration,
             dismissible: options === null || options === void 0 ? void 0 : options.dismissible,
             action: options === null || options === void 0 ? void 0 : options.action,
-            icon: (options === null || options === void 0 ? void 0 : options.icon) || createSemanticIcon(XCircleIcon, 'text-[var(--color-danger)]'),
+            icon: (options === null || options === void 0 ? void 0 : options.icon) || createSemanticIcon(XCircle, 'text-[var(--color-danger)]'),
         });
     }, [addToast]);
     const warning = useCallback((title, options) => {
@@ -54,7 +54,7 @@ const useToast = () => {
             duration: options === null || options === void 0 ? void 0 : options.duration,
             dismissible: options === null || options === void 0 ? void 0 : options.dismissible,
             action: options === null || options === void 0 ? void 0 : options.action,
-            icon: (options === null || options === void 0 ? void 0 : options.icon) || createSemanticIcon(ExclamationTriangleIcon, 'text-[var(--color-warning)]'),
+            icon: (options === null || options === void 0 ? void 0 : options.icon) || createSemanticIcon(Warning, 'text-[var(--color-warning)]'),
         });
     }, [addToast]);
     const info = useCallback((title, options) => {
@@ -66,7 +66,7 @@ const useToast = () => {
             duration: options === null || options === void 0 ? void 0 : options.duration,
             dismissible: options === null || options === void 0 ? void 0 : options.dismissible,
             action: options === null || options === void 0 ? void 0 : options.action,
-            icon: (options === null || options === void 0 ? void 0 : options.icon) || createSemanticIcon(InformationCircleIcon, 'text-[var(--color-primary)]'),
+            icon: (options === null || options === void 0 ? void 0 : options.icon) || createSemanticIcon(Info, 'text-[var(--color-primary)]'),
         });
     }, [addToast]);
     const loading = useCallback((title, options) => {

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

@@ -1,6 +1,6 @@
 import { TooltipProps } from "./Tooltip.types";
 declare const Tooltip: {
-    ({ content, children, placement, delay, disabled, className, triggerClassName, maxWidth, minWidth, showOnFocus, wrapText, id, theme: themeOverrides, "aria-label": ariaLabel, role, offset, darkMode, elevation, lift, }: TooltipProps): import("react/jsx-runtime").JSX.Element;
+    ({ content, children, placement, delay, disabled, className, triggerClassName, maxWidth, minWidth, showOnFocus, wrapText, id, theme: themeOverrides, "aria-label": ariaLabel, role, offset, darkMode, elevation, lift, isOpen, defaultIsOpen, onOpenChange, recalcTrigger, }: TooltipProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export { Tooltip };

package/dist/components/core/Tooltip/Tooltip.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
-import React__default, { useId, useState, useRef, useCallback, useEffect } from 'react';
+import React__default, { useId, useState, useCallback, useRef, useEffect } from 'react';
 import { useReducedMotion, AnimatePresence, motion } from 'motion/react';
 import { createPortal } from 'react-dom';
 import { cn } from '../../../utils/cn.js';
@@ -11,7 +11,7 @@ import { useIsClient } from '../../../hooks/useIsClient.js';
 import { useDarkMode } from '../../../hooks/useDarkMode.js';
 import { useSurfaceElevation, SurfaceProvider, surfaceClasses } from '../../../theme/SurfaceContext.js';
 
-const Tooltip = ({ content, children, placement = "top", delay = 300, disabled = false, className, triggerClassName, maxWidth = "360px", minWidth = "fit-content", showOnFocus = true, wrapText = false, id, theme: themeOverrides, "aria-label": ariaLabel, role = "tooltip", offset = 8, darkMode = false, elevation, lift, }) => {
+const Tooltip = ({ content, children, placement = "top", delay = 300, disabled = false, className, triggerClassName, maxWidth = "360px", minWidth = "fit-content", showOnFocus = true, wrapText = false, id, theme: themeOverrides, "aria-label": ariaLabel, role = "tooltip", offset = 8, darkMode = false, elevation, lift, isOpen, defaultIsOpen = false, onOpenChange, recalcTrigger, }) => {
     // Relative elevation: lift above the host surface (overlay base = 5).
     const surfaceLevel = useSurfaceElevation({ baseRung: 5, offset: 2, elevation, lift });
     // Stable id for the aria-describedby linkage — auto-generated via useId()
@@ -20,7 +20,14 @@ const Tooltip = ({ content, children, placement = "top", delay = 300, disabled =
     // when the consumer doesn't pass an explicit `id`.
     const generatedId = useId();
     const tooltipId = id || `tooltip-${generatedId}`;
-    const [isVisible, setIsVisible] = useState(false);
+    const isControlled = isOpen !== undefined;
+    const [internalVisible, setInternalVisible] = useState(defaultIsOpen);
+    const isVisible = isControlled ? isOpen : internalVisible;
+    const setVisible = useCallback((next) => {
+        if (!isControlled)
+            setInternalVisible(next);
+        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(next);
+    }, [isControlled, onOpenChange]);
     const tooltipRef = useRef(null);
     const triggerRef = useRef(null);
     const timerRef = useRef(null);
@@ -40,25 +47,42 @@ const Tooltip = ({ content, children, placement = "top", delay = 300, disabled =
         placement: placement,
         offset,
         autoWidth: true,
+        recalcTrigger,
     });
-    // Event handlers - simplified timer management
+    // Dev warning (§9): controlled + uncontrolled props together — controlled wins.
+    useEffect(() => {
+        if (process.env.NODE_ENV !== "production") {
+            if (isControlled && defaultIsOpen) {
+                console.warn("[Tooltip]: Both `isOpen` and `defaultIsOpen` provided. Tooltip is controlled — `defaultIsOpen` is ignored.");
+            }
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    // Event handlers - simplified timer management.
+    // In controlled mode visibility is driven ENTIRELY by `isOpen` (see
+    // Tooltip.types.ts) — hover/focus/Escape must not fight the consumer's
+    // state, so both handlers bail. (`isOpen` without `onOpenChange` is a
+    // first-class display-only pattern — e.g. Slider's drag bubble — so no
+    // missing-handler warning here, unlike form controls.)
     const handleShowTooltip = useCallback(() => {
-        if (disabled)
+        if (disabled || isControlled)
             return;
         if (timerRef.current) {
             clearTimeout(timerRef.current);
         }
         timerRef.current = setTimeout(() => {
-            setIsVisible(true);
+            setVisible(true);
         }, delay);
-    }, [disabled, delay]);
+    }, [disabled, isControlled, delay, setVisible]);
     const handleHideTooltip = useCallback(() => {
+        if (isControlled)
+            return;
         if (timerRef.current) {
             clearTimeout(timerRef.current);
         }
         // Immediate hide for better responsiveness
-        setIsVisible(false);
-    }, []);
+        setVisible(false);
+    }, [isControlled, setVisible]);
     // Clean up timeout on unmount
     useEffect(() => {
         return () => {
@@ -118,6 +142,14 @@ const Tooltip = ({ content, children, placement = "top", delay = 300, disabled =
     // valid element to clone (e.g. plain text) and there is no other place to
     // put the attribute.
     const isElementChild = React__default.isValidElement(children);
+    // Merge with any aria-describedby the child already carries (e.g. a form
+    // control describing itself via its own helper/error text) instead of
+    // clobbering it — ARIA allows a space-separated list of ids.
+    const existingDescribedBy = isElementChild
+        ? children.props["aria-describedby"]
+        : undefined;
+    const mergedDescribedBy = [existingDescribedBy, isVisible ? tooltipId : undefined].filter(Boolean).join(" ") ||
+        undefined;
     const childWithFocusHandlers = isElementChild
         ? React__default.cloneElement(children, {
             ...(childCanReceiveFocus && {
@@ -132,7 +164,7 @@ const Tooltip = ({ content, children, placement = "top", delay = 300, disabled =
                     (_b = (_a = children.props).onBlur) === null || _b === void 0 ? void 0 : _b.call(_a, e);
                 },
             }),
-            "aria-describedby": isVisible ? tooltipId : undefined,
+            "aria-describedby": mergedDescribedBy,
         })
         : children;
     return (jsxs("div", { className: cn("relative inline-block", triggerClassName), ref: triggerRef, ...triggerHandlers, "aria-describedby": !isElementChild && isVisible ? tooltipId : undefined, children: [childWithFocusHandlers, isClient &&

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

@@ -107,4 +107,29 @@ export interface TooltipProps {
     elevation?: SurfaceElevation;
     /** `false` opts out of the relative lift — paints at the tooltip's base rung. */
     lift?: boolean;
+    /**
+     * Controlled visibility — when provided, visibility is driven entirely by
+     * this prop instead of internal hover/focus state (delay is bypassed).
+     * Use for triggers whose "show tooltip" moment isn't a plain hover, e.g. a
+     * value bubble shown only while dragging a Slider thumb.
+     */
+    isOpen?: boolean;
+    /**
+     * Initial visibility for uncontrolled usage.
+     * @default false
+     */
+    defaultIsOpen?: boolean;
+    /**
+     * Called when internal hover/focus logic changes visibility (uncontrolled
+     * mode). In controlled mode visibility is owned by `isOpen` and the
+     * internal triggers are bypassed entirely, so this never fires — update
+     * your own state instead.
+     */
+    onOpenChange?: (isOpen: boolean) => void;
+    /**
+     * Opt-in escape hatch for triggers that move on their own (e.g. a dragged
+     * slider thumb) without a scroll/resize/content-resize event to key off
+     * of. Position recalculates whenever this value changes.
+     */
+    recalcTrigger?: unknown;
 }

package/dist/components/core/Tree/Tree.js

@@ -5,7 +5,7 @@ import { motion, AnimatePresence, useReducedMotion } from 'motion/react';
 import { cn } from '../../../utils/cn.js';
 import { treeTheme } from './Tree.theme.js';
 import { Checkbox } from '../../forms/Checkbox/Checkbox.js';
-import { ChevronRightIcon, DocumentIcon } from '@heroicons/react/24/outline';
+import { CaretRight, File } from '@phosphor-icons/react';
 import { getReducedMotionVariants, treeNodeVariants, expandIconVariants, childNodeVariants } from './Tree.animations.js';
 
 // Build a flat ordered list of visible (non-collapsed) node ids via depth-first traversal.
@@ -200,7 +200,7 @@ const InternalTreeNode = React__default.memo(({ node, level, expanded, selected,
     const labelStyle = cn(theme.labelStyle, {
         'text-[var(--color-text-muted)]': node.disabled,
     });
-    return (jsxs("div", { children: [jsxs("div", { ref: itemRef, className: nodeStyle, style: { paddingLeft: `calc(${level} * ${theme.indentSize} + 0.25rem)` }, onClick: handleNodeClick, onKeyDown: handleKeyDown, onFocus: handleFocus, tabIndex: tabIndexValue, role: "treeitem", "aria-expanded": isExpandable ? expanded : undefined, "aria-selected": selectable ? selected : undefined, "aria-disabled": node.disabled, children: [isExpandable ? (jsx(motion.span, { className: cn(theme.expandIconStyle), variants: iconVariants, initial: "collapsed", animate: expanded ? "expanded" : "collapsed", onClick: handleExpandClick, "aria-label": expanded ? 'Collapse' : 'Expand', "aria-hidden": "true", tabIndex: -1, children: jsx(ChevronRightIcon, { className: "size-4", strokeWidth: 2 }) })) : (jsx("span", { className: "w-4 mr-1" })), checkable && (jsx(Checkbox, { size: 'sm', id: `tree-checkbox-${node.id}`, name: `tree-checkbox-${node.id}`, value: node.id, checked: selected, indeterminate: hierarchicalSelection && isIndeterminate, onChange: () => onNodeClick(node), state: node.disabled ? "disabled" : "default", className: "flex-shrink-0", onClick: (e) => e.stopPropagation() })), (node.icon || !isExpandable) && (jsx("span", { className: cn(theme.iconStyle), children: node.icon || jsx(DocumentIcon, { className: "w-4 h-4" }) })), jsx("span", { className: labelStyle, title: node.label, children: node.label })] }), hasChildren && (jsx(AnimatePresence, { initial: false, children: expanded && (jsx(motion.div, { role: "group", variants: nodeVariants, initial: "collapsed", animate: "expanded", exit: "collapsed", style: { overflow: 'hidden' }, children: (_a = node.children) === null || _a === void 0 ? void 0 : _a.map((childNode) => (
+    return (jsxs("div", { children: [jsxs("div", { ref: itemRef, className: nodeStyle, style: { paddingLeft: `calc(${level} * ${theme.indentSize} + 0.25rem)` }, onClick: handleNodeClick, onKeyDown: handleKeyDown, onFocus: handleFocus, tabIndex: tabIndexValue, role: "treeitem", "aria-expanded": isExpandable ? expanded : undefined, "aria-selected": selectable ? selected : undefined, "aria-disabled": node.disabled, children: [isExpandable ? (jsx(motion.span, { className: cn(theme.expandIconStyle), variants: iconVariants, initial: "collapsed", animate: expanded ? "expanded" : "collapsed", onClick: handleExpandClick, "aria-label": expanded ? 'Collapse' : 'Expand', "aria-hidden": "true", tabIndex: -1, children: jsx(CaretRight, { className: "size-4", weight: "bold" }) })) : (jsx("span", { className: "w-4 mr-1" })), checkable && (jsx(Checkbox, { size: 'sm', id: `tree-checkbox-${node.id}`, name: `tree-checkbox-${node.id}`, value: node.id, checked: selected, indeterminate: hierarchicalSelection && isIndeterminate, onChange: () => onNodeClick(node), state: node.disabled ? "disabled" : "default", className: "flex-shrink-0", onClick: (e) => e.stopPropagation() })), (node.icon || !isExpandable) && (jsx("span", { className: cn(theme.iconStyle), children: node.icon || jsx(File, { className: "w-4 h-4" }) })), jsx("span", { className: labelStyle, title: node.label, children: node.label })] }), hasChildren && (jsx(AnimatePresence, { initial: false, children: expanded && (jsx(motion.div, { role: "group", variants: nodeVariants, initial: "collapsed", animate: "expanded", exit: "collapsed", style: { overflow: 'hidden' }, children: (_a = node.children) === null || _a === void 0 ? void 0 : _a.map((childNode) => (
                     // No initial/animate/exit here on purpose: the child inherits its
                     // animation state from the container above so staggerChildren can
                     // cascade them in/out one after another.

package/dist/components/core/shared/interaction.animations.d.ts

@@ -0,0 +1,51 @@
+import { Variants, Transition } from "motion/react";
+/**
+ * Shared press/hover interaction physics for clickable core components
+ * (Button, Pill, Badge dismiss). One source of truth so every pressable
+ * surface in the library reacts with the same speed and character.
+ *
+ * Press-down is a fast tween — feedback must land within ~1 frame of the
+ * pointer, so no spring ramp-up on the way in. Release is a stiff spring
+ * with a hint of overshoot for tactile character on the way out.
+ *
+ * NOTE: pair with CSS transitions that do NOT include `transform`
+ * (no `transition-all`) — motion drives transform directly every frame,
+ * and a CSS transition on transform re-interpolates those per-frame
+ * values and makes the press feel mushy.
+ */
+export declare const PRESS_TRANSITION: Transition;
+export declare const RELEASE_TRANSITION: Transition;
+export declare const HOVER_TRANSITION: Transition;
+/**
+ * Build press variants for a pressable component.
+ * Use with `animate="rest"` (so release uses RELEASE_TRANSITION) and
+ * `whileTap="press"`; pass `hoverScale` and `whileHover="hover"` for
+ * components that should also lift on hover.
+ */
+export declare const createPressVariants: (pressScale?: number, hoverScale?: number) => Variants;
+/**
+ * Selection ripple for choice controls (Checkbox, Radio): a soft primary
+ * pulse that expands out of the control when it becomes checked.
+ *
+ * Spread onto a `motion.div` rendered inside `<AnimatePresence initial={false}>`
+ * gated on the checked state — `initial={false}` is required so a control
+ * that MOUNTS already checked (controlled/defaultChecked) doesn't fire the
+ * burst; only user-visible state changes do.
+ */
+export declare const CHECK_RIPPLE_MOTION: {
+    readonly initial: {
+        readonly scale: 0.5;
+        readonly opacity: 0.8;
+    };
+    readonly animate: {
+        readonly scale: 2;
+        readonly opacity: 0;
+    };
+    readonly exit: {
+        readonly opacity: 0;
+    };
+    readonly transition: {
+        duration: number;
+        ease: "easeOut";
+    };
+};

package/dist/components/core/shared/interaction.animations.js

@@ -0,0 +1,59 @@
+"use client";
+/**
+ * Shared press/hover interaction physics for clickable core components
+ * (Button, Pill, Badge dismiss). One source of truth so every pressable
+ * surface in the library reacts with the same speed and character.
+ *
+ * Press-down is a fast tween — feedback must land within ~1 frame of the
+ * pointer, so no spring ramp-up on the way in. Release is a stiff spring
+ * with a hint of overshoot for tactile character on the way out.
+ *
+ * NOTE: pair with CSS transitions that do NOT include `transform`
+ * (no `transition-all`) — motion drives transform directly every frame,
+ * and a CSS transition on transform re-interpolates those per-frame
+ * values and makes the press feel mushy.
+ */
+const PRESS_TRANSITION = {
+    duration: 0.08,
+    ease: "easeOut",
+};
+const RELEASE_TRANSITION = {
+    type: "spring",
+    stiffness: 600,
+    damping: 25,
+    mass: 0.6,
+};
+const HOVER_TRANSITION = {
+    duration: 0.15,
+    ease: "easeOut",
+};
+/**
+ * Build press variants for a pressable component.
+ * Use with `animate="rest"` (so release uses RELEASE_TRANSITION) and
+ * `whileTap="press"`; pass `hoverScale` and `whileHover="hover"` for
+ * components that should also lift on hover.
+ */
+const createPressVariants = (pressScale = 0.97, hoverScale) => ({
+    rest: { scale: 1, transition: RELEASE_TRANSITION },
+    ...(hoverScale !== undefined
+        ? { hover: { scale: hoverScale, transition: HOVER_TRANSITION } }
+        : {}),
+    press: { scale: pressScale, transition: PRESS_TRANSITION },
+});
+/**
+ * Selection ripple for choice controls (Checkbox, Radio): a soft primary
+ * pulse that expands out of the control when it becomes checked.
+ *
+ * Spread onto a `motion.div` rendered inside `<AnimatePresence initial={false}>`
+ * gated on the checked state — `initial={false}` is required so a control
+ * that MOUNTS already checked (controlled/defaultChecked) doesn't fire the
+ * burst; only user-visible state changes do.
+ */
+const CHECK_RIPPLE_MOTION = {
+    initial: { scale: 0.5, opacity: 0.8 },
+    animate: { scale: 2.0, opacity: 0 },
+    exit: { opacity: 0 },
+    transition: { duration: 0.35, ease: "easeOut" },
+};
+
+export { CHECK_RIPPLE_MOTION, HOVER_TRANSITION, PRESS_TRANSITION, RELEASE_TRANSITION, createPressVariants };

package/dist/components/data-display/Feed/Feed.js

@@ -2,7 +2,7 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import React__default, { createContext, useMemo, useState, useCallback, useContext } from 'react';
 import { useReducedMotion, motion } from 'motion/react';
-import { ChevronUpDownIcon } from '@heroicons/react/16/solid';
+import { CaretUpDown } from '@phosphor-icons/react';
 import { cn } from '../../../utils/cn.js';
 import { feedTheme } from './Feed.theme.js';
 import { collapseLayerExitTiming, collapseLayerEnterTiming, EASE, expandLayerEnterTiming, expandLayerExitTiming, STAGGER_BASE_DELAY, STAGGER_IN, STAGGER_OUT } from './Feed.animations.js';
@@ -106,7 +106,7 @@ const FeedCollapse = ({ label = "Show {count} more", icon, defaultExpanded = fal
         }
         return child;
     });
-    const collapseIcon = icon !== null && icon !== void 0 ? icon : (jsx(ChevronUpDownIcon, { className: "size-4 text-[var(--color-primary)]" }));
+    const collapseIcon = icon !== null && icon !== void 0 ? icon : (jsx(CaretUpDown, { className: "size-4 text-[var(--color-primary)]" }));
     /* ---- Reduced motion: instant toggle, no staged animations ---- */
     if (shouldReduceMotion) {
         return (jsxs("li", { className: cn(theme.collapseStyle, className), children: [expanded && (jsx("span", { "aria-hidden": "true", className: "absolute left-5 -translate-x-1/2 top-0 h-full w-0.5 bg-[var(--color-border)]/60" })), !expanded ? (jsxs("div", { className: "relative", style: { height: COLLAPSED_HEIGHT }, children: [jsx("svg", { "aria-hidden": "true", className: theme.collapseSvgStyle, style: { left: "calc(1.25rem - 1px)" }, width: SVG_WIDTH, height: COLLAPSED_HEIGHT, fill: "none", children: jsx("path", { d: CURVE_PATH, stroke: "var(--color-border)", strokeOpacity: "0.6", strokeWidth: STROKE_WIDTH }) }), jsxs("button", { type: "button", className: "absolute top-1/2 -translate-y-1/2 flex items-center gap-2.5 cursor-pointer bg-transparent border-none p-0", style: {

package/dist/components/data-display/GanttChart/GanttChart.theme.js

@@ -1,5 +1,5 @@
 const ganttChartTheme = {
-    baseStyle: "flex flex-col w-full overflow-hidden rounded-lg border border-[var(--color-border)] bg-[var(--color-background)] text-sm shadow-sm",
+    baseStyle: "flex flex-col w-full overflow-hidden rounded-[var(--gantt-chart-radius)] border border-[var(--color-border)] bg-[var(--color-background)] text-sm shadow-sm",
     toolbarStyle: "flex flex-wrap items-center justify-between gap-2 px-3 py-2 border-b border-[var(--color-border)] bg-[var(--color-background-secondary)]/80",
     tablePanelStyle: "flex flex-col shrink-0 overflow-hidden border-r border-[var(--color-border)] bg-[var(--color-background)]",
     chartPanelStyle: "flex flex-col flex-1 min-w-0 overflow-hidden",

package/dist/components/data-display/GanttChart/GanttChartPanel.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { forwardRef, useEffect, useCallback } from 'react';
-import { CalendarDaysIcon } from '@heroicons/react/24/outline';
+import { CalendarDots } from '@phosphor-icons/react';
 import { cn } from '../../../utils/cn.js';
 import { useGanttContext, useGanttInteraction } from './GanttChartContext.js';
 import { GanttTimelineHeader } from './GanttTimelineHeader.js';
@@ -65,7 +65,7 @@ const GanttChartPanel = forwardRef(({ onScroll, days, monthSpans }, ref) => {
         }
     }, [rows, focusedTaskId, setFocusedTaskId, onTaskClick]);
     if (tasks.length === 0) {
-        return (jsx("div", { className: cn(theme.chartPanelStyle, "items-center justify-center"), children: emptyState !== null && emptyState !== void 0 ? emptyState : (jsxs("div", { className: cn(theme.emptyStateStyle), children: [jsx(CalendarDaysIcon, { className: "size-10 opacity-40" }), jsx("div", { className: "text-base font-medium text-[var(--color-text-secondary)]", children: "No tasks to display" }), jsx("div", { className: "text-sm opacity-70", children: "Add tasks to see them on the timeline" })] })) }));
+        return (jsx("div", { className: cn(theme.chartPanelStyle, "items-center justify-center"), children: emptyState !== null && emptyState !== void 0 ? emptyState : (jsxs("div", { className: cn(theme.emptyStateStyle), children: [jsx(CalendarDots, { className: "size-10 opacity-40" }), jsx("div", { className: "text-base font-medium text-[var(--color-text-secondary)]", children: "No tasks to display" }), jsx("div", { className: "text-sm opacity-70", children: "Add tasks to see them on the timeline" })] })) }));
     }
     return (jsx("div", { className: cn(theme.chartPanelStyle), children: jsx("div", { ref: ref, className: "overflow-auto flex-1 min-h-0 focus:outline-none", onScroll: onScroll, onKeyDown: handleKeyDown, tabIndex: 0, role: "grid", "aria-label": "Gantt chart timeline", "data-gantt-chart-scroll": true, children: jsxs("div", { style: { width: totalWidth }, children: [jsx("div", { className: "sticky top-0 z-10", children: jsx(GanttTimelineHeader, { days: days, monthSpans: monthSpans }) }), jsxs("div", { className: "relative", style: { height: bodyHeight }, children: [jsx(GanttTimelineGrid, { days: days, height: bodyHeight }), showDependencies && jsx(GanttDependencyArrows, {}), rows.map((row, i) => {
                                 const top = i * rowHeight;

package/dist/components/data-display/GanttChart/GanttTableGroupRow.js

@@ -2,7 +2,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React__default from 'react';
 import { motion } from 'motion/react';
-import { ChevronRightIcon, PlusIcon } from '@heroicons/react/24/outline';
+import { CaretRight, Plus } from '@phosphor-icons/react';
 import { cn } from '../../../utils/cn.js';
 import { useGanttContext } from './GanttChartContext.js';
 import { chevronVariants } from './GanttChart.animations.js';
@@ -15,10 +15,10 @@ const GanttTableGroupRow = React__default.memo(({ row, }) => {
                 e.preventDefault();
                 toggleGroup(row.group.id);
             }
-        }, role: "button", tabIndex: 0, "aria-expanded": !isCollapsed, "aria-label": `${row.group.title} — ${row.completedCount} of ${row.taskCount} completed`, children: [jsxs("div", { className: "flex items-center gap-2 px-3 flex-1 min-w-0", children: [jsx(motion.div, { variants: chevronVariants, animate: isCollapsed ? "collapsed" : "open", children: jsx(ChevronRightIcon, { className: "size-4 text-[var(--color-text-muted)]" }) }), jsx("div", { className: "size-2.5 rounded-full shrink-0", style: { backgroundColor: row.group.color } }), jsx("span", { className: "font-medium text-[var(--color-text-primary)] truncate", children: row.group.title }), jsxs("span", { className: "text-sm text-[var(--color-text-muted)] shrink-0", children: [row.completedCount, "/", row.taskCount] })] }), onTaskAdd && !readonly && (jsx("button", { className: "p-1 mr-2 rounded hover:bg-[var(--color-surface-hover)] text-[var(--color-text-muted)] opacity-0 group-hover:opacity-100 focus:opacity-100 transition-opacity", "aria-label": `Add task to ${row.group.title}`, onClick: (e) => {
+        }, role: "button", tabIndex: 0, "aria-expanded": !isCollapsed, "aria-label": `${row.group.title} — ${row.completedCount} of ${row.taskCount} completed`, children: [jsxs("div", { className: "flex items-center gap-2 px-3 flex-1 min-w-0", children: [jsx(motion.div, { variants: chevronVariants, animate: isCollapsed ? "collapsed" : "open", children: jsx(CaretRight, { className: "size-4 text-[var(--color-text-muted)]" }) }), jsx("div", { className: "size-2.5 rounded-full shrink-0", style: { backgroundColor: row.group.color } }), jsx("span", { className: "font-medium text-[var(--color-text-primary)] truncate", children: row.group.title }), jsxs("span", { className: "text-sm text-[var(--color-text-muted)] shrink-0", children: [row.completedCount, "/", row.taskCount] })] }), onTaskAdd && !readonly && (jsx("button", { className: "p-1 mr-2 rounded hover:bg-[var(--color-surface-hover)] text-[var(--color-text-muted)] opacity-0 group-hover:opacity-100 focus:opacity-100 transition-opacity", "aria-label": `Add task to ${row.group.title}`, onClick: (e) => {
                     e.stopPropagation();
                     onTaskAdd(row.group.id);
-                }, children: jsx(PlusIcon, { className: "size-4" }) }))] }));
+                }, children: jsx(Plus, { className: "size-4" }) }))] }));
 });
 
 export { GanttTableGroupRow };

package/dist/components/data-display/GanttChart/GanttTaskContextMenu.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import { CheckCircleIcon, DocumentDuplicateIcon, TrashIcon } from '@heroicons/react/24/outline';
+import { CheckCircle, Copy, Trash } from '@phosphor-icons/react';
 import { ContextMenu } from '../../core/ContextMenu/ContextMenu.js';
 import '../../core/ContextMenu/ContextMenu.theme.js';
 import { useGanttContext } from './GanttChartContext.js';
@@ -12,7 +12,7 @@ const GanttTaskContextMenu = ({ task, children, }) => {
     if (readonly || (!onTaskUpdate && !onTaskDuplicate && !onTaskDelete)) {
         return jsx(Fragment, { children: children });
     }
-    return (jsxs(ContextMenu, { children: [jsx(ContextMenu.Trigger, { children: children }), jsxs(ContextMenu.Body, { children: [onTaskUpdate && (jsxs(ContextMenu.Item, { onSelect: () => onTaskUpdate(task.id, { completed: !task.completed, progress: task.completed ? 0 : 100 }), children: [jsx(CheckCircleIcon, { className: "size-4 mr-2" }), task.completed ? "Mark as incomplete" : "Mark as done"] })), onTaskUpdate && (jsxs(ContextMenu.Sub, { children: [jsx(ContextMenu.SubTrigger, { children: "Progress" }), jsx(ContextMenu.SubBody, { children: PROGRESS_STEPS.map((val) => (jsxs(ContextMenu.Item, { onSelect: () => onTaskUpdate(task.id, { progress: val, completed: val === 100 }), children: [val, "%"] }, val))) })] })), (onTaskDuplicate || onTaskDelete) && jsx(ContextMenu.Separator, {}), onTaskDuplicate && (jsxs(ContextMenu.Item, { onSelect: () => onTaskDuplicate(task.id), children: [jsx(DocumentDuplicateIcon, { className: "size-4 mr-2" }), "Duplicate"] })), onTaskDelete && (jsxs(ContextMenu.Item, { onSelect: () => onTaskDelete(task.id), className: "text-[var(--color-danger)]", children: [jsx(TrashIcon, { className: "size-4 mr-2" }), "Delete"] }))] })] }));
+    return (jsxs(ContextMenu, { children: [jsx(ContextMenu.Trigger, { children: children }), jsxs(ContextMenu.Body, { children: [onTaskUpdate && (jsx(ContextMenu.Item, { onSelect: () => onTaskUpdate(task.id, { completed: !task.completed, progress: task.completed ? 0 : 100 }), startContent: jsx(CheckCircle, { className: "size-4" }), children: task.completed ? "Mark as incomplete" : "Mark as done" })), onTaskUpdate && (jsxs(ContextMenu.Sub, { children: [jsx(ContextMenu.SubTrigger, { children: "Progress" }), jsx(ContextMenu.SubBody, { children: PROGRESS_STEPS.map((val) => (jsxs(ContextMenu.Item, { onSelect: () => onTaskUpdate(task.id, { progress: val, completed: val === 100 }), children: [val, "%"] }, val))) })] })), (onTaskDuplicate || onTaskDelete) && jsx(ContextMenu.Separator, {}), onTaskDuplicate && (jsx(ContextMenu.Item, { onSelect: () => onTaskDuplicate(task.id), startContent: jsx(Copy, { className: "size-4" }), children: "Duplicate" })), onTaskDelete && (jsx(ContextMenu.Item, { onSelect: () => onTaskDelete(task.id), className: "text-[var(--color-danger)]", startContent: jsx(Trash, { className: "size-4" }), children: "Delete" }))] })] }));
 };
 
 export { GanttTaskContextMenu };

package/dist/components/data-display/GanttChart/GanttToolbar.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { CalendarIcon, PlusIcon } from '@heroicons/react/24/outline';
+import { Calendar, Plus } from '@phosphor-icons/react';
 import { cn } from '../../../utils/cn.js';
 import { useGanttContext } from './GanttChartContext.js';
 import { Segmented } from '../../core/Segmented/Segmented.js';
@@ -24,7 +24,7 @@ const GanttToolbar = () => {
         const targetScroll = todayOffset * dayWidth - container.clientWidth / 2;
         container.scrollTo({ left: targetScroll, behavior: "smooth" });
     };
-    return (jsxs("div", { className: cn(theme.toolbarStyle), children: [jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-2", children: [toolbar.today && todayOffset !== null && (jsxs(Button, { variant: "outline", color: "neutral", size: "sm", onClick: handleScrollToToday, children: [jsx(CalendarIcon, { className: "size-4" }), "Today"] })), toolbar.zoom && (jsx(Segmented, { value: zoom, onChange: (val) => setZoom(val), size: "sm", "aria-label": "Gantt zoom", className: "max-w-full overflow-x-auto", children: ZOOM_OPTIONS.map((opt) => (jsx(Segmented.Item, { value: opt.value, children: opt.label }, opt.value))) })), toolbar.hideCompleted && (jsx(Checkbox, { id: "gantt-hide-completed", name: "hideCompleted", value: "hideCompleted", checked: hideCompleted, onChange: (checked) => setHideCompleted(checked), label: "Hide completed", size: "sm" }))] }), jsx("div", { className: "flex items-center gap-2", children: toolbar.addGroup && onGroupAdd && !readonly && (jsxs(Button, { variant: "soft", size: "sm", onClick: onGroupAdd, children: [jsx(PlusIcon, { className: "size-3.5" }), "Add group"] })) })] }));
+    return (jsxs("div", { className: cn(theme.toolbarStyle), children: [jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-2", children: [toolbar.today && todayOffset !== null && (jsxs(Button, { variant: "outline", color: "mono", size: "sm", onClick: handleScrollToToday, children: [jsx(Calendar, { className: "size-4" }), "Today"] })), toolbar.zoom && (jsx(Segmented, { value: zoom, onChange: (val) => setZoom(val), size: "sm", "aria-label": "Gantt zoom", className: "max-w-full overflow-x-auto", children: ZOOM_OPTIONS.map((opt) => (jsx(Segmented.Item, { value: opt.value, children: opt.label }, opt.value))) })), toolbar.hideCompleted && (jsx(Checkbox, { id: "gantt-hide-completed", name: "hideCompleted", value: "hideCompleted", checked: hideCompleted, onChange: (checked) => setHideCompleted(checked), label: "Hide completed", size: "sm" }))] }), jsx("div", { className: "flex items-center gap-2", children: toolbar.addGroup && onGroupAdd && !readonly && (jsxs(Button, { variant: "soft", size: "sm", onClick: onGroupAdd, children: [jsx(Plus, { className: "size-3.5" }), "Add group"] })) })] }));
 };
 
 export { GanttToolbar };

package/dist/components/data-display/KPI/KPI.js

@@ -2,7 +2,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React__default, { useMemo } from 'react';
 import { motion } from 'motion/react';
-import { ArrowUpRightIcon, ArrowDownRightIcon } from '@heroicons/react/20/solid';
+import { ArrowUpRight, ArrowDownRight } from '@phosphor-icons/react';
 import { cn } from '../../../utils/cn.js';
 import { kpiTheme } from './KPI.theme.js';
 
@@ -42,7 +42,7 @@ const KPI = React__default.forwardRef(({ value, label, trend, trendLabel, progre
     return (jsxs("div", { ref: ref, className: cn(theme.baseStyle, className), ...props, children: [jsxs("div", { className: "flex items-start justify-between", children: [jsxs("div", { className: "flex items-baseline gap-2", children: [jsx("span", { className: cn(theme.valueSizes[size]), children: value }), label &&
                                 (typeof label === "string" ? (jsxs("span", { className: cn(theme.labelStyle, theme.labelSizes[size]), children: [icon && (jsx("span", { className: "inline-flex items-center mr-1", children: icon })), label] })) : (label))] }), formattedTrend &&
                         trendDirection &&
-                        (typeof formattedTrend === "string" ? (jsxs("span", { className: cn("inline-flex items-center gap-0.5 font-medium", theme.trendSizes[size], trendDirection === "up" && theme.trendPositive, trendDirection === "down" && theme.trendNegative, trendDirection === "neutral" && theme.trendNeutral), children: [formattedTrend, trendDirection === "up" && (jsx(ArrowUpRightIcon, { className: "size-4" })), trendDirection === "down" && (jsx(ArrowDownRightIcon, { className: "size-4" }))] })) : (formattedTrend))] }), progress !== undefined && (jsx("div", { className: cn("flex items-end", barSize.gap), role: "img", "aria-label": `Progress: ${progress}%`, children: Array.from({ length: barCount }, (_, i) => {
+                        (typeof formattedTrend === "string" ? (jsxs("span", { className: cn("inline-flex items-center gap-0.5 font-medium", theme.trendSizes[size], trendDirection === "up" && theme.trendPositive, trendDirection === "down" && theme.trendNegative, trendDirection === "neutral" && theme.trendNeutral), children: [formattedTrend, trendDirection === "up" && (jsx(ArrowUpRight, { className: "size-4" })), trendDirection === "down" && (jsx(ArrowDownRight, { className: "size-4" }))] })) : (formattedTrend))] }), progress !== undefined && (jsx("div", { className: cn("flex items-end", barSize.gap), role: "img", "aria-label": `Progress: ${progress}%`, children: Array.from({ length: barCount }, (_, i) => {
                     const isFilled = i < filledBars;
                     const fadeDistance = filledBars - i;
                     const fillOpacity = isFilled && fadeDistance <= 3

package/dist/components/data-display/KPI/KPI.theme.js

@@ -3,9 +3,9 @@ import { semanticBgColors } from '../../../utils/colorUtils.js';
 const kpiTheme = {
     baseStyle: "flex flex-col gap-3",
     valueSizes: {
-        sm: "text-xl font-bold text-[var(--color-text-primary)]",
-        md: "text-2xl font-bold text-[var(--color-text-primary)]",
-        lg: "text-3xl font-bold text-[var(--color-text-primary)]",
+        sm: "text-[length:var(--kpi-value-size-sm)] leading-[1.4] font-bold text-[var(--color-text-primary)]",
+        md: "text-[length:var(--kpi-value-size-md)] leading-[1.333] font-bold text-[var(--color-text-primary)]",
+        lg: "text-[length:var(--kpi-value-size-lg)] leading-[1.2] font-bold text-[var(--color-text-primary)]",
     },
     labelStyle: "text-[var(--color-text-primary)] font-medium",
     labelSizes: {
@@ -23,7 +23,7 @@ const kpiTheme = {
     },
     barFilledColors: {
         ...semanticBgColors,
-        neutral: "bg-[var(--color-text-secondary)]",
+        mono: "bg-[var(--color-text-secondary)]",
     },
     barEmptyColor: "bg-[var(--color-surface-sunken)]",
     barSizes: {

package/dist/components/data-display/Metric/Metric.js

@@ -4,10 +4,10 @@ import { cn } from '../../../utils/cn.js';
 import { metricTheme } from './Metric.theme.js';
 import { Badge } from '../../core/Badge/Badge.js';
 import { Card } from '../../core/Card/Card.js';
-import { ArrowTrendingUpIcon, ArrowTrendingDownIcon } from '@heroicons/react/24/outline';
+import { TrendUp, TrendDown } from '@phosphor-icons/react';
 
 const Metric = React__default.forwardRef(({ value, label, subtitle, trendValue, trendDirection = "up", trendChart, size = "md", variant = "filled", color = "primary", icon, className, ...props }, ref) => {
-    const trendIcon = trendDirection === "up" ? (jsx(ArrowTrendingUpIcon, { className: "size-3", strokeWidth: 2 })) : (jsx(ArrowTrendingDownIcon, { className: "size-3", strokeWidth: 2 }));
+    const trendIcon = trendDirection === "up" ? (jsx(TrendUp, { className: "size-3", weight: "bold" })) : (jsx(TrendDown, { className: "size-3", weight: "bold" }));
     const variantStyles = metricTheme.variants[variant];
     // Ghost has no surface, so it renders flush (no inset) to align with
     // surrounding content; filled keeps its size-based content padding.