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

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

@@ -7,7 +7,7 @@ const tabsTheme = {
     // TabsList styles with proper design tokens
     listStyle: "relative inline-flex items-center flex-row border-b border-[var(--color-border)] gap-6",
     // TabsTrigger base styles - no individual borders, underline will be handled separately
-    triggerStyle: "relative inline-flex items-center justify-center whitespace-nowrap font-semibold transition-all duration-300 cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] data-[state=active]:text-[var(--color-primary)]",
+    triggerStyle: "relative inline-flex items-center justify-center whitespace-nowrap font-semibold transition-all duration-[var(--motion-duration-slow)] cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] data-[state=active]:text-[var(--color-primary)]",
     // TabsTrigger size variants using CSS variables where applicable
     triggerSizes: {
         sm: "px-0 py-1.5 text-sm",

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-*`.
@@ -23,7 +25,7 @@ const tagTheme = {
     removeButtonStyle: "inline-flex items-center justify-center rounded-full p-0.5 -ml-1 " +
         "hover:bg-[var(--color-surface-hover)] " +
         "text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] " +
-        "transition-all duration-300 cursor-pointer focus:outline-none " +
+        "transition-all duration-[var(--motion-duration-slow)] cursor-pointer focus:outline-none " +
         "focus-visible:ring-2 focus-visible:ring-[var(--color-primary)]",
     removeIconSizes: {
         sm: "size-3",

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/ToastProvider.js

@@ -93,7 +93,7 @@ const ToastProvider = ({ children, position = 'top-right', maxToasts = 5, defaul
         removeAllToasts,
     }), [toasts, addToast, removeToast, removeAllToasts]);
     const portalTarget = isClient ? document.body : null;
-    return (jsxs(ToastContext.Provider, { value: contextValue, children: [children, portalTarget ? createPortal(jsx("div", { className: cn(toastTheme.containerStyle, positionStyles[position]), "aria-live": "polite", "aria-label": "Notifications", children: jsx("div", { className: "relative w-80", style: {
+    return (jsxs(ToastContext.Provider, { value: contextValue, children: [children, portalTarget ? createPortal(jsx("div", { "data-flikkui-portal": "", className: cn(toastTheme.containerStyle, positionStyles[position]), "aria-live": "polite", "aria-label": "Notifications", children: jsx("div", { className: "relative w-80", style: {
                         paddingBottom: !position.startsWith("bottom") && isHovered && toasts.length > 1 ? totalExpandedHeight : undefined,
                         paddingTop: position.startsWith("bottom") && isHovered && toasts.length > 1 ? totalExpandedHeight : undefined,
                     }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: jsx(AnimatePresence, { mode: "popLayout", children: toasts.map((toast, index) => (jsx(Toast, { toast: toast, onDismiss: removeToast, index: index, isExpanded: isHovered, totalToasts: toasts.length, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onHeightChange: handleToastHeight, expandedOffset: getExpandedOffset(index), darkMode: darkMode, position: position }, toast.id))) }) }) }), portalTarget) : null] }));

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/Tree/Tree.theme.js

@@ -1,6 +1,6 @@
 const treeTheme = {
     baseStyle: 'flex flex-col w-full',
-    nodeStyle: 'flex items-center py-1 pr-1 rounded-[calc(var(--radius-base)*0.75)] hover:bg-[var(--color-background-secondary)] cursor-pointer transition-colors select-none gap-2',
+    nodeStyle: 'flex items-center py-1 pr-1 rounded-[calc(var(--radius-base)*0.75)] hover:bg-[var(--color-surface)] cursor-pointer transition-colors select-none gap-2',
     labelStyle: 'flex-1 text-base text-[var(--color-text-primary)] truncate',
     iconStyle: 'flex-shrink-0 text-[var(--color-text-muted)]',
     expandIconStyle: 'flex-shrink-0 mr-1 text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] transition-colors cursor-pointer size-4 flex items-center justify-center',

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

@@ -9,9 +9,7 @@ export * from "./Button";
 export * from "./ButtonGroup";
 export * from "./Calendar";
 export * from "./Card";
-export * from "./CardStack";
 export * from "./HeroCard";
-export * from "./Carousel";
 export * from "./CommandPalette";
 export * from "./Separator";
 export * from "./Drawer";

package/dist/components/core/index.js

@@ -7,7 +7,6 @@ export { Badge } from './Badge/Badge.js';
 export { Breadcrumbs } from './Breadcrumbs/Breadcrumbs.js';
 export { breadcrumbsTheme, breadcrumbsVariants, defaultSeparator } from './Breadcrumbs/Breadcrumbs.theme.js';
 export { Button } from './Button/Button.js';
-export { getRippleAnimation, getRippleColorClass, useRipple } from './Button/Button.ripple.js';
 export { ButtonGroup } from './ButtonGroup/ButtonGroup.js';
 export { ButtonGroupSeparator } from './ButtonGroup/ButtonGroupSeparator.js';
 export { ButtonGroupText } from './ButtonGroup/ButtonGroupText.js';
@@ -16,11 +15,8 @@ export { calendarTheme } from './Calendar/Calendar.theme.js';
 export { calendarAnimations } from './Calendar/Calendar.animations.js';
 export { CalendarMini } from './Calendar/CalendarMini/CalendarMini.js';
 export { Card } from './Card/Card.js';
-export { CardStack } from './CardStack/CardStack.js';
 export { HERO_CARD_DEFAULT_IMAGE, HeroCard } from './HeroCard/HeroCard.js';
 export { heroCardTheme } from './HeroCard/HeroCard.theme.js';
-export { Carousel } from './Carousel/Carousel.js';
-export { CarouselBody } from './Carousel/CarouselBody.js';
 export { CommandPalette } from './CommandPalette/CommandPalette.js';
 export { commandPaletteTheme } from './CommandPalette/CommandPalette.theme.js';
 export { Separator } from './Separator/Separator.js';

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

@@ -0,0 +1,4 @@
+import type { Transition } from "motion/react";
+/** Tooltip pop-in: springy position/scale with a quick opacity/scale settle. */
+export declare const TOOLTIP_ENTER_TRANSITION: Transition;
+export declare const TOOLTIP_EXIT_TRANSITION: Transition;

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

@@ -0,0 +1,20 @@
+// Moved with ChartTooltip out of charts/utils/animation-utils.ts when the
+// component was lifted to core/shared (it is consumed by data-display too).
+// These transitions are ChartTooltip-only; chart-wide animation values stay
+// in charts/utils/animation-utils.ts per CLAUDE.md §19.
+/** Tooltip pop-in: springy position/scale with a quick opacity/scale settle. */
+const TOOLTIP_ENTER_TRANSITION = {
+    type: "spring",
+    stiffness: 400,
+    damping: 30,
+    opacity: { duration: 0.15 },
+    scale: { duration: 0.15 },
+};
+const TOOLTIP_EXIT_TRANSITION = {
+    type: "spring",
+    stiffness: 300,
+    damping: 25,
+    duration: 0.15,
+};
+
+export { TOOLTIP_ENTER_TRANSITION, TOOLTIP_EXIT_TRANSITION };

package/dist/components/{charts → core}/shared/ChartTooltip/ChartTooltip.js

@@ -5,7 +5,7 @@ import { AnimatePresence, motion } from 'motion/react';
 import { cn } from '../../../../utils/cn.js';
 import { chartTooltipTheme } from './ChartTooltip.theme.js';
 import { useIsClient } from '../../../../hooks/useIsClient.js';
-import { TOOLTIP_EXIT_TRANSITION, TOOLTIP_ENTER_TRANSITION } from '../../utils/animation-utils.js';
+import { TOOLTIP_EXIT_TRANSITION, TOOLTIP_ENTER_TRANSITION } from './ChartTooltip.animations.js';
 
 // Helper function to check if content is MultiSeriesData
 const isMultiSeriesData = (content) => {

package/dist/components/core/shared/Ripple.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+export interface RippleProps {
+    /**
+     * Suppress ripples without unmounting. Only needed for hosts that signal
+     * disabled via `aria-disabled` — a natively `disabled` element does not
+     * dispatch pointer events at all, so it needs nothing here.
+     */
+    disabled?: boolean;
+    /**
+     * Tint override for the ripple circles. Defaults to `bg-current`, which
+     * resolves to the host's own text colour and therefore adapts to every
+     * variant, surface, theme, and colour scheme without configuration.
+     */
+    className?: string;
+}
+export declare const Ripple: React.FC<RippleProps>;

package/dist/components/core/shared/Ripple.js

@@ -0,0 +1,141 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useRef, useState, useEffect, useCallback } from 'react';
+import { useReducedMotion, motion } from 'motion/react';
+import { cn } from '../../../utils/cn.js';
+
+/**
+ * Shared press ripple for interactive surfaces (Button, NavItem, MenuItem,
+ * Pill, SelectableCard). One source of truth so every pressable surface in the
+ * library ripples with the same character — the sibling of `createPressVariants`
+ * in `interaction.animations.ts`.
+ *
+ * Drop it in as the LAST child of a host that is `relative`:
+ *
+ * ```tsx
+ * <button className="relative">
+ *   Save
+ *   <Ripple />
+ * </button>
+ * ```
+ *
+ * It wires itself: the layer reads its own `parentElement` and listens there,
+ * so the host never threads a handler or a ref. Clipping lives on the layer
+ * (`overflow-hidden rounded-[inherit]`), so the host does not need
+ * `overflow-hidden` of its own.
+ */
+/** Interactive elements that earn a ripple. See `isInteractive` below. */
+const INTERACTIVE_SELECTOR = [
+    "button",
+    "a[href]",
+    '[role="button"]',
+    '[role="menuitem"]',
+    '[role="menuitemcheckbox"]',
+    '[role="menuitemradio"]',
+    '[role="option"]',
+    '[role="tab"]',
+    '[tabindex]:not([tabindex="-1"])',
+].join(", ");
+/**
+ * A ripple is a press affordance, so it must only appear on something a user
+ * can actually press — including by keyboard. A bare `<div onClick>` has no
+ * role and no tab stop, so advertising interactivity on it would be the exact
+ * pattern CLAUDE.md §8b describes when it explains why Badge's click path was
+ * removed. Gating on the DOM (rather than on the presence of a handler) keeps
+ * that guarantee self-correcting: a host becomes rippleable by becoming
+ * accessible, not by passing a prop.
+ */
+function isInteractive(element) {
+    return element.matches(INTERACTIVE_SELECTOR);
+}
+/** Duration scales with reach — a fixed value crosses a large surface far too fast. */
+const MIN_DURATION = 0.35;
+const MAX_DURATION = 0.7;
+const DURATION_DIVISOR = 500;
+function durationForRadius(radius) {
+    return Math.min(MAX_DURATION, Math.max(MIN_DURATION, radius / DURATION_DIVISOR));
+}
+const Ripple = ({ disabled = false, className }) => {
+    const layerRef = useRef(null);
+    const [ripples, setRipples] = useState([]);
+    const shouldReduceMotion = useReducedMotion();
+    // Monotonic ids. Date.now() collides when two presses land in the same
+    // millisecond, which produced duplicate React keys in the previous
+    // Button-only implementation.
+    const nextId = useRef(0);
+    // Read through refs inside the listener so the effect below subscribes once
+    // per host rather than re-subscribing whenever these flip.
+    const disabledRef = useRef(disabled);
+    disabledRef.current = disabled;
+    const reducedMotionRef = useRef(shouldReduceMotion);
+    reducedMotionRef.current = shouldReduceMotion;
+    // Dev warning fires at most once per host, not once per press.
+    const warnedRef = useRef(false);
+    useEffect(() => {
+        const layer = layerRef.current;
+        const host = layer === null || layer === void 0 ? void 0 : layer.parentElement;
+        if (!host)
+            return;
+        // NOTE: no runtime check that the host is positioned. jsdom does not
+        // process Tailwind, so `getComputedStyle(host).position` reads "static"
+        // for a `relative` host in every test — a warning there is pure noise for
+        // us and for consumers. The `relative` contract is documented above and
+        // enforced by review.
+        // `pointerdown` rather than `click` on purpose: it fires on press instead
+        // of release, and a keyboard Enter/Space never produces one — so ripples
+        // are pointer-only without any synthetic-click sniffing.
+        const handlePointerDown = (event) => {
+            if (disabledRef.current || reducedMotionRef.current)
+                return;
+            if (host.hasAttribute("disabled") || host.getAttribute("aria-disabled") === "true")
+                return;
+            // Checked per press, not once on mount: a host's interactivity is not
+            // static (SelectableCard drops to tabIndex={-1} while disabled), and a
+            // mount-time gate would leave the listener permanently detached for any
+            // host that starts non-interactive and later becomes pressable.
+            if (!isInteractive(host)) {
+                if (process.env.NODE_ENV !== "production" && !warnedRef.current) {
+                    warnedRef.current = true;
+                    // eslint-disable-next-line no-console
+                    console.warn("[Ripple]: host is not an interactive element (needs a button/link role or a tab stop) — no ripple will render.");
+                }
+                return;
+            }
+            const rect = host.getBoundingClientRect();
+            const x = event.clientX - rect.left;
+            const y = event.clientY - rect.top;
+            // Reach the farthest corner, so the ripple always covers the host.
+            const dx = Math.max(x, rect.width - x);
+            const dy = Math.max(y, rect.height - y);
+            const radius = Math.hypot(dx, dy);
+            if (radius === 0)
+                return;
+            setRipples((prev) => [...prev, { id: nextId.current++, x, y, radius }]);
+        };
+        host.addEventListener("pointerdown", handlePointerDown);
+        return () => host.removeEventListener("pointerdown", handlePointerDown);
+    }, []);
+    const removeRipple = useCallback((id) => {
+        setRipples((prev) => prev.filter((ripple) => ripple.id !== id));
+    }, []);
+    // The layer always mounts, even under reduced motion — the listener bails on
+    // `reducedMotionRef` instead. Returning null here would leave the effect
+    // above bound against a null ref, so a user turning reduced motion off
+    // mid-session would get no ripple until the host remounted.
+    return (jsx("span", { ref: layerRef, "aria-hidden": "true", "data-flikkui-ripple": "", className: "absolute inset-0 overflow-hidden rounded-[inherit] pointer-events-none", children: ripples.map((ripple) => (jsx(motion.span, { "data-flikkui-ripple-circle": "", initial: { scale: 0, opacity: 0.2 }, animate: { scale: 1, opacity: 0 }, transition: {
+                duration: durationForRadius(ripple.radius),
+                ease: "easeOut",
+            }, onAnimationComplete: () => removeRipple(ripple.id), 
+            // Geometry is per-press, so it goes through `style` — an
+            // interpolated class name would not exist in the shipped CSS
+            // (CLAUDE.md §3).
+            style: {
+                width: ripple.radius * 2,
+                height: ripple.radius * 2,
+                left: ripple.x - ripple.radius,
+                top: ripple.y - ripple.radius,
+            }, className: cn("absolute rounded-full bg-current", className) }, ripple.id))) }));
+};
+Ripple.displayName = "Ripple";
+
+export { Ripple };

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";
+    };
+};