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

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

@@ -3,7 +3,7 @@
  */
 const segmentedTheme = {
     // Base styles for the segmented container
-    baseStyle: "relative flex w-fit rounded-[var(--segmented-radius)] bg-[var(--color-surface-sunken)] border border-[var(--color-border)] p-[var(--segmented-padding)] shadow-inner-real-md",
+    baseStyle: "relative flex w-fit gap-0.5 rounded-[var(--segmented-radius)] bg-[var(--color-surface-sunken)] border border-[var(--color-border)] p-[var(--segmented-padding)] shadow-inner-real-sm",
     // Size variants using CSS variables
     sizes: {
         sm: "min-h-[var(--segmented-min-h-sm)]",
@@ -15,14 +15,14 @@ const segmentedTheme = {
     // Disabled style
     disabledStyle: "opacity-50 cursor-not-allowed pointer-events-none",
     // Sliding background style with CSS variables
-    slidingBackgroundStyle: "absolute top-[0px] left-[0px] rounded-[var(--segmented-inner-radius)] transition-transform duration-200 ease-out pointer-events-none z-0 bg-[var(--color-surface)] shadow-real-md",
+    slidingBackgroundStyle: "absolute top-[0px] left-[0px] rounded-[var(--segmented-inner-radius)] transition-transform duration-[var(--motion-duration-base)] ease-out pointer-events-none z-0 bg-[var(--color-surface)] shadow-real-md",
 };
 /**
  * Default theme for the SegmentedItem component
  */
 const segmentedItemTheme = {
     // Base styles for the segmented item
-    baseStyle: "relative flex min-w-fit flex-1 items-center justify-center whitespace-nowrap transition-all duration-200 rounded-[var(--segmented-inner-radius)] font-medium cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary-500)] focus-visible:ring-offset-1",
+    baseStyle: "relative flex min-w-fit flex-1 items-center justify-center whitespace-nowrap transition-all duration-[var(--motion-duration-base)] rounded-[var(--segmented-inner-radius)] font-medium cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary-500)] focus-visible:ring-offset-1",
     // Size variants using CSS variables. Type reads --segmented-text-size-*
     // (which aliases the shared --form-text-size-* ramp) so lg steps up with its
     // box — it was pinned at text-sm across all three sizes while Button/Input,

package/dist/components/core/Segmented/SegmentedContext.js

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

package/dist/components/core/Sidebar/Sidebar.js

@@ -20,8 +20,11 @@ import { SidebarCard } from './SidebarCard.js';
 
 // Subtle spring on the sidebar's width animation. Stiffness/damping picked so
 // the effective duration sits in the same ~200ms window as the internal CSS
-// transitions on padding/gap (Tailwind `duration-200`), but with a soft
-// organic settle instead of a linear cubic-bezier. Damping ratio ≈ 0.9 — a
+// transitions on padding/gap (`--motion-duration-base`), but with a soft
+// organic settle instead of a linear cubic-bezier. NOTE: this spring is a JS
+// motion/react value and does NOT read that token — a theme retuning
+// --motion-duration-base will shift the CSS transitions but not this spring,
+// so the two would need adjusting together. Damping ratio ≈ 0.9 — a
 // hair under critical so there's a barely-perceptible easing-into-final
 // rather than an overshoot/bounce.
 const SIDEBAR_TRANSITION = {

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

@@ -1,9 +1,9 @@
 const sidebarTheme = {
-    baseStyle: 'group flex flex-col h-full bg-[var(--color-background)] overflow-visible transition-colors duration-200 relative',
+    baseStyle: 'group flex flex-col h-full bg-[var(--color-background)] overflow-visible transition-colors duration-[var(--motion-duration-base)] relative',
     variants: {
         sidebar: 'relative',
         floating: 'relative m-3 h-[calc(100%-1.5rem)] rounded-xl border border-[var(--color-border)] bg-[color-mix(in_oklab,var(--color-background)_85%,transparent)] backdrop-blur-md shadow-[0_8px_30px_rgba(0,0,0,0.03),inset_0_1px_0_rgba(255,255,255,0.05)]',
-        inset: 'relative m-3 h-[calc(100%-1.5rem)] rounded-xl bg-[var(--color-background-secondary)] border border-[var(--color-border)] shadow-sm',
+        inset: 'relative m-3 h-[calc(100%-1.5rem)] rounded-xl bg-[var(--color-surface)] border border-[var(--color-border)] shadow-sm',
     },
     sides: {
         left: 'border-r border-[var(--color-border)]',

package/dist/components/core/Sidebar/SidebarContent.js

@@ -9,7 +9,7 @@ import '../ScrollArea/smooth/SmoothScrollEngine.js';
 const SidebarContent = React__default.forwardRef(({ children, className, ...props }, ref) => {
     const { isCollapsedView } = useSidebarCollapsed();
     const density = useSidebarDensity();
-    return (jsx(ScrollArea, { ref: ref, type: "none", size: "thin", className: "flex-1 min-h-0", ...props, children: jsx("div", { className: cn("py-3 transition-[padding] duration-200 ease-[cubic-bezier(0.4,0,0.2,1)]", density === "compact" && "py-2", 
+    return (jsx(ScrollArea, { ref: ref, type: "none", size: "thin", className: "flex-1 min-h-0", ...props, children: jsx("div", { className: cn("py-3 transition-[padding] duration-[var(--motion-duration-base)] ease-[cubic-bezier(0.4,0,0.2,1)]", density === "compact" && "py-2", 
             // Collapsed px-3 (12) on a 60px rail leaves a 36px interior — every
             // child row (NavItem, Sidebar.Search) is exactly 36px wide, matching
             // the 36×36 hit-area target.

package/dist/components/core/Sidebar/SidebarHeader.js

@@ -14,7 +14,7 @@ const SidebarHeader = React__default.forwardRef(({ logo, showToggle = true, cust
     if (children) {
         return (jsx("div", { ref: ref, className: cn("flex-shrink-0 border-b border-[var(--color-border)]", className), ...props, children: children }));
     }
-    return (jsxs("div", { ref: ref, className: cn("flex items-center flex-shrink-0 h-14 border-b border-[var(--color-border)] overflow-visible relative transition-[padding,background-color,border-color] duration-200 ease-[cubic-bezier(0.4,0,0.2,1)]", 
+    return (jsxs("div", { ref: ref, className: cn("flex items-center flex-shrink-0 h-14 border-b border-[var(--color-border)] overflow-visible relative transition-[padding,background-color,border-color] duration-[var(--motion-duration-base)] ease-[cubic-bezier(0.4,0,0.2,1)]", 
         // Padding mirrors Sidebar.Content so the header logo sits on the
         // same horizontal track as the NavItem rows below it. px-3 (12px)
         // on the 60px collapsed rail leaves a 36px interior — a 32px logo

package/dist/components/core/Sidebar/SidebarSearch.js

@@ -106,7 +106,7 @@ const SidebarSearch = React__default.forwardRef(({ value: controlledValue, defau
         // width) and the input fading in/out via AnimatePresence. Adding
         // a justify-* toggle here would snap the icon by 4px on frame 0
         // of every transition.
-        "transition-[background-color,box-shadow] duration-200 ease-[cubic-bezier(0.4,0,0.2,1)]", "overflow-hidden", isCollapsedView ? shellCollapsed : shellExpanded, inputGroupClassName), children: [jsx("span", { className: cn("flex items-center justify-center flex-shrink-0 pl-2", "text-[var(--color-text-muted)] transition-colors duration-200"), "aria-hidden": !isCollapsedView || undefined, children: iconStart !== null && iconStart !== void 0 ? iconStart : jsx(MagnifyingGlass, { className: "size-5" }) }), jsx(AnimatePresence, { initial: false, children: !isCollapsedView && (jsx(motion.div, { initial: { opacity: 0, x: -4 }, animate: { opacity: 1, x: 0 }, exit: { opacity: 0, x: -4 }, transition: {
+        "transition-[background-color,box-shadow] duration-[var(--motion-duration-base)] ease-[cubic-bezier(0.4,0,0.2,1)]", "overflow-hidden", isCollapsedView ? shellCollapsed : shellExpanded, inputGroupClassName), children: [jsx("span", { className: cn("flex items-center justify-center flex-shrink-0 pl-2", "text-[var(--color-text-muted)] transition-colors duration-[var(--motion-duration-base)]"), "aria-hidden": !isCollapsedView || undefined, children: iconStart !== null && iconStart !== void 0 ? iconStart : jsx(MagnifyingGlass, { className: "size-5" }) }), jsx(AnimatePresence, { initial: false, children: !isCollapsedView && (jsx(motion.div, { initial: { opacity: 0, x: -4 }, animate: { opacity: 1, x: 0 }, exit: { opacity: 0, x: -4 }, transition: {
                         opacity: { duration: 0.15, ease: [0.4, 0, 0.2, 1] },
                         x: { duration: 0.2, ease: [0.4, 0, 0.2, 1] },
                     }, className: "flex-1 min-w-0 flex items-center overflow-hidden", children: jsx("input", { ref: setInputRef, type: "search", value: value, onChange: handleChange, placeholder: placeholder, "aria-label": collapsedLabel, className: cn(
@@ -123,7 +123,7 @@ const SidebarSearch = React__default.forwardRef(({ value: controlledValue, defau
     jsx("div", { className: cn(
         // py-1 keeps the search row in the same vertical rhythm as the
         // NavGroup's `space-y-1` between nav rows.
-        "py-1 transition-[padding] duration-200 ease-[cubic-bezier(0.4,0,0.2,1)]", isCollapsedView ? "px-3" : "px-2.5", className), ...props, children: isCollapsedView ? (
+        "py-1 transition-[padding] duration-[var(--motion-duration-base)] ease-[cubic-bezier(0.4,0,0.2,1)]", isCollapsedView ? "px-3" : "px-2.5", className), ...props, children: isCollapsedView ? (
         // `triggerClassName="block w-full"` makes the Tooltip's wrapping div
         // a full-width block instead of its default `inline-block` — without
         // this, the field collapses to icon-width and sits left-aligned,

package/dist/components/core/Sidebar/SidebarToggle.js

@@ -26,7 +26,7 @@ const SidebarToggle = React__default.forwardRef(({ expandIcon, collapseIcon, cla
     const positionClasses = side === "left"
         ? "absolute right-0 translate-x-1/2 top-4 z-50"
         : "absolute left-0 -translate-x-1/2 top-4 z-50";
-    return (jsx(Button, { ref: ref, iconOnly: true, variant: "ghost", className: cn("size-6 p-0 rounded-full border border-[var(--color-border)] bg-[var(--color-background)]/50 backdrop-blur-sm text-[var(--color-text-muted)] hover:text-[var(--color-text-secondary)] hover:shadow-md hover:bg-[var(--color-surface-hover)] opacity-100 transition-all duration-400", positionClasses, className), onClick: handleClick, "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar", title: collapsed ? "Expand sidebar" : "Collapse sidebar", ...buttonProps, children: (_b = (collapsed ? expandIcon : collapseIcon)) !== null && _b !== void 0 ? _b : (jsx(motion.div, { initial: false, animate: { rotate: collapsed ? 180 : 0 }, transition: { duration: 0.2, ease: [0.4, 0, 0.2, 1] }, className: "flex items-center justify-center", children: jsx(CaretLeft, { className: "size-3", weight: "bold" }) })) }));
+    return (jsx(Button, { ref: ref, iconOnly: true, variant: "ghost", className: cn("size-6 p-0 rounded-full border border-[var(--color-border)] bg-[var(--color-background)]/50 backdrop-blur-sm text-[var(--color-text-muted)] hover:text-[var(--color-text-secondary)] hover:shadow-md hover:bg-[var(--color-surface-hover)] opacity-100 transition-all duration-[var(--motion-duration-slower)]", positionClasses, className), onClick: handleClick, "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar", title: collapsed ? "Expand sidebar" : "Collapse sidebar", ...buttonProps, children: (_b = (collapsed ? expandIcon : collapseIcon)) !== null && _b !== void 0 ? _b : (jsx(motion.div, { initial: false, animate: { rotate: collapsed ? 180 : 0 }, transition: { duration: 0.2, ease: [0.4, 0, 0.2, 1] }, className: "flex items-center justify-center", children: jsx(CaretLeft, { className: "size-3", weight: "bold" }) })) }));
 });
 SidebarToggle.displayName = "SidebarToggle";
 

package/dist/components/core/Sidebar/SidebarUserProfile.js

@@ -21,7 +21,7 @@ const SidebarUserProfile = React__default.forwardRef(({ name, email, avatar, sta
     // Strip drag/animation DOM handlers that collide with motion's prop types
     const { onAnimationStart, onAnimationEnd, onDrag, onDragStart, onDragEnd, ...motionSafeProps } = props;
     const avatarElement = (jsx(Avatar, { src: avatar, name: name, status: status !== null && status !== void 0 ? status : "none", className: "size-9" }));
-    const content = (jsxs(motion.div, { ref: ref, className: cn("flex w-full items-center rounded-[var(--radius-base)] cursor-pointer border border-transparent transition-[padding,gap,background-color,border-color,color,box-shadow] duration-200 ease-[cubic-bezier(0.4,0,0.2,1)] ", isCollapsedView ? "justify-center gap-0 px-1" : "gap-2 ", className), role: "button", tabIndex: 0, onClick: onClick, onKeyDown: (e) => {
+    const content = (jsxs(motion.div, { ref: ref, className: cn("flex w-full items-center rounded-[var(--radius-base)] cursor-pointer border border-transparent transition-[padding,gap,background-color,border-color,color,box-shadow] duration-[var(--motion-duration-base)] ease-[cubic-bezier(0.4,0,0.2,1)] ", isCollapsedView ? "justify-center gap-0 px-1" : "gap-2 ", className), role: "button", tabIndex: 0, onClick: onClick, onKeyDown: (e) => {
             if ((e.key === "Enter" || e.key === " ") && onClick) {
                 e.preventDefault();
                 e.currentTarget.click();

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

@@ -1,5 +1,13 @@
 import React from "react";
 import { SlidingNumberProps } from "./SlidingNumber.types";
+/**
+ * Every rendered character — an animated digit or a static one (`-`, `.`, `,`) —
+ * occupies exactly this many `em`s. Exported so a host can reserve an exact width
+ * for a given character count WITHOUT measuring the DOM: `InputCounter` sizes its
+ * value slot from it, which is what keeps the box identical whether the animated
+ * number or the click-to-edit field is mounted. Changing it changes that geometry.
+ */
+export declare const SLIDING_NUMBER_CHAR_WIDTH_EM = 0.6;
 /**
  * SlidingNumber component with odometer-style digit animation
  *

package/dist/components/core/SlidingNumber/SlidingNumber.js

@@ -4,11 +4,20 @@ import React__default, { useMemo } from 'react';
 import { motion, useReducedMotion } from 'motion/react';
 import { cn } from '../../../utils/cn.js';
 
-const DIGIT_CONTAINER_STYLE = { height: "1em", width: "0.6em", lineHeight: "1em" };
+/**
+ * Every rendered character — an animated digit or a static one (`-`, `.`, `,`) —
+ * occupies exactly this many `em`s. Exported so a host can reserve an exact width
+ * for a given character count WITHOUT measuring the DOM: `InputCounter` sizes its
+ * value slot from it, which is what keeps the box identical whether the animated
+ * number or the click-to-edit field is mounted. Changing it changes that geometry.
+ */
+const SLIDING_NUMBER_CHAR_WIDTH_EM = 0.6;
+const CHAR_WIDTH = `${SLIDING_NUMBER_CHAR_WIDTH_EM}em`;
+const DIGIT_CONTAINER_STYLE = { height: "1em", width: CHAR_WIDTH, lineHeight: "1em" };
 const DIGIT_ITEM_STYLE = { height: "1em", lineHeight: "1em" };
 const DIGITS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
 const DEFAULT_TRANSITION = { type: "spring", stiffness: 300, damping: 30, bounce: 0 };
-const STATIC_CHAR_STYLE = { width: "0.6em" };
+const STATIC_CHAR_STYLE = { width: CHAR_WIDTH };
 const ROOT_STYLE = { lineHeight: "1" };
 /**
  * Individual digit component that handles the sliding animation
@@ -72,4 +81,4 @@ const SlidingNumber = React__default.forwardRef(({ value, decimalPlaces = 0, pad
 });
 SlidingNumber.displayName = "SlidingNumber";
 
-export { SlidingNumber };
+export { SLIDING_NUMBER_CHAR_WIDTH_EM, SlidingNumber };

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

@@ -1,7 +1,7 @@
 const sortableTheme = {
     containerStyle: "relative list-none",
     itemStyle: "relative cursor-move select-none relative focus-within:z-10 list-none",
-    dragHandleStyle: "cursor-grab active:cursor-grabbing p-1 text-[var(--color-text-muted)] hover:text-[var(--color-text-secondary)] flex items-center justify-center rounded transition-colors duration-200",
+    dragHandleStyle: "cursor-grab active:cursor-grabbing p-1 text-[var(--color-text-muted)] hover:text-[var(--color-text-secondary)] flex items-center justify-center rounded transition-colors duration-[var(--motion-duration-base)]",
 };
 
 export { sortableTheme };

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

@@ -25,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/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/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/data-display/GanttChart/GanttChart.theme.js

@@ -1,18 +1,18 @@
 const ganttChartTheme = {
     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",
+    toolbarStyle: "flex flex-wrap items-center justify-between gap-2 px-3 py-2 border-b border-[var(--color-border)] bg-[var(--color-surface)]/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",
-    tableHeaderStyle: "flex items-center h-[56px] border-b border-[var(--color-border)] bg-[var(--color-background-secondary)]/80",
+    tableHeaderStyle: "flex items-center h-[56px] border-b border-[var(--color-border)] bg-[var(--color-surface)]/80",
     tableHeaderCellStyle: "px-3 text-[11px] font-semibold uppercase tracking-wide text-[var(--color-text-muted)] truncate",
-    tableGroupRowStyle: "flex items-center cursor-pointer select-none border-b border-[var(--color-border)]/30 bg-[var(--color-background-secondary)]/35 hover:bg-[var(--color-background-secondary)] transition-colors",
-    tableTaskRowStyle: "flex items-center border-b border-[var(--color-border)]/20 hover:bg-[var(--color-background-secondary)]/70 transition-colors",
+    tableGroupRowStyle: "flex items-center cursor-pointer select-none border-b border-[var(--color-border)]/30 bg-[var(--color-surface)]/35 hover:bg-[var(--color-surface)] transition-colors",
+    tableTaskRowStyle: "flex items-center border-b border-[var(--color-border)]/20 hover:bg-[var(--color-surface)]/70 transition-colors",
     tableCellStyle: "px-3 truncate text-[var(--color-text-primary)]",
     timelineHeaderStyle: "bg-[var(--color-background)] border-b border-[var(--color-border)] shadow-[0_1px_0_var(--color-border)]",
-    timelineMonthStyle: "text-[11px] font-semibold uppercase tracking-wide text-[var(--color-text-secondary)] px-2 border-b border-[var(--color-border)] flex items-center bg-[var(--color-background-secondary)]/45",
+    timelineMonthStyle: "text-[11px] font-semibold uppercase tracking-wide text-[var(--color-text-secondary)] px-2 border-b border-[var(--color-border)] flex items-center bg-[var(--color-surface)]/45",
     timelineDayStyle: "text-[10px] text-[var(--color-text-muted)] flex items-center justify-center border-r border-[var(--color-border)]/20",
     gridLineStyle: "border-r border-[var(--color-border)]/20",
-    weekendStyle: "bg-[var(--color-background-secondary)]/35",
+    weekendStyle: "bg-[var(--color-surface)]/35",
     todayMarkerStyle: "bg-[var(--color-primary)] w-0.5",
     todayColumnStyle: "bg-[var(--color-primary)]/10",
     taskBarStyle: "absolute cursor-pointer flex items-center overflow-hidden shadow-sm ring-1 ring-black/10",

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

@@ -5,7 +5,7 @@ import { motion } from 'motion/react';
 import { cn } from '../../../utils/cn.js';
 import { useGanttContext, useGanttInteraction } from './GanttChartContext.js';
 import { getDayOffset, calculateExpectedProgress, formatDateShort, formatDuration } from './GanttChart.utils.js';
-import { ChartTooltip } from '../../charts/shared/ChartTooltip/ChartTooltip.js';
+import { ChartTooltip } from '../../core/shared/ChartTooltip/ChartTooltip.js';
 import { Avatar } from '../../core/Avatar/Avatar.js';
 import { GanttTaskContextMenu } from './GanttTaskContextMenu.js';
 import { taskBarVariants } from './GanttChart.animations.js';

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

@@ -61,7 +61,7 @@ const GanttTimelineHeader = ({ days, monthSpans, }) => {
     return (jsxs("div", { className: cn(theme.timelineHeaderStyle), style: { width: totalWidth }, children: [jsx("div", { className: "flex", style: { height: 28 }, children: headerSpans.map((span) => (jsx("div", { className: cn(theme.timelineMonthStyle), style: { width: span.span * dayWidth }, children: span.label }, `${span.label}-${span.startIndex}`))) }), jsx("div", { className: "flex", style: { height: 28 }, children: days.map((day, i) => {
                     const isToday = isSameDay(day, today);
                     const weekend = isWeekend(day);
-                    return (jsx("div", { className: cn(theme.timelineDayStyle, weekend && "bg-[var(--color-background-secondary)]/50", isToday && "font-semibold text-[var(--color-primary)]"), style: { width: dayWidth }, children: getDayLabel(day, zoom) }, i));
+                    return (jsx("div", { className: cn(theme.timelineDayStyle, weekend && "bg-[var(--color-surface)]/50", isToday && "font-semibold text-[var(--color-primary)]"), style: { width: dayWidth }, children: getDayLabel(day, zoom) }, i));
                 }) })] }));
 };
 

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

@@ -5,7 +5,6 @@ import { cn } from '../../../utils/cn.js';
 import { useGanttContext } from './GanttChartContext.js';
 import { Segmented } from '../../core/Segmented/Segmented.js';
 import { Button } from '../../core/Button/Button.js';
-import 'react';
 import { Checkbox } from '../../forms/Checkbox/Checkbox.js';
 
 const ZOOM_OPTIONS = [

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

@@ -1,9 +1,9 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React__default, { useMemo } from 'react';
-import { motion } from 'motion/react';
 import { ArrowUpRight, ArrowDownRight } from '@phosphor-icons/react';
 import { cn } from '../../../utils/cn.js';
+import { Progress } from '../../core/Progress/Progress.js';
 import { kpiTheme } from './KPI.theme.js';
 
 const KPI = React__default.forwardRef(({ value, label, trend, trendLabel, progress, barCount = 24, subtitle, icon, size = "md", color = "primary", className, theme: customTheme = {}, ...props }, ref) => {
@@ -32,28 +32,19 @@ const KPI = React__default.forwardRef(({ value, label, trend, trendLabel, progre
             : trend < 0
                 ? "down"
                 : "neutral";
-    // Calculate filled bar count from progress
-    const filledBars = useMemo(() => {
-        if (progress === undefined)
-            return 0;
-        return Math.round((Math.min(Math.max(progress, 0), 100) / 100) * barCount);
-    }, [progress, barCount]);
-    const barSize = kpiTheme.barSizes[size];
+    // KPI owns its own bar geometry; hand it to Progress as segment sizing.
+    // (`width` predates the flex-1 cells and is unused.)
+    const segmentSizes = useMemo(() => Object.fromEntries(Object.entries(kpiTheme.barSizes).map(([key, { height, gap }]) => [
+        key,
+        { height, gap },
+    ])), []);
     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(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
-                        ? 0.4 + (fadeDistance / 3) * 0.6
-                        : 1;
-                    return (jsx("div", { className: cn("relative rounded-sm flex-1", barSize.height, theme.barEmptyColor), children: isFilled && (jsx(motion.div, { className: cn("absolute inset-0 rounded-sm", theme.barFilledColors[color]), initial: { opacity: 0 }, animate: { opacity: fillOpacity }, transition: {
-                                duration: 0.25,
-                                ease: "easeOut",
-                                delay: i * 0.03,
-                            } })) }, i));
-                }) })), subtitle &&
+                        (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(Progress, { value: progress, segments: barCount, segmentFade: true, size: size, className: theme.barFilledColors[color], "aria-label": `Progress: ${progress}%`, theme: {
+                    segmentEmptyStyle: theme.barEmptyColor,
+                    segmentSizes,
+                } })), subtitle &&
                 (typeof subtitle === "string" ? (jsx("span", { className: cn(theme.subtitleStyle), children: subtitle })) : (subtitle))] }));
 });
 KPI.displayName = "KPI";

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-[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)]",
+        sm: "text-[length:var(--kpi-value-size-sm)]/[var(--kpi-value-line-height-sm)] font-bold text-[var(--color-text-primary)]",
+        md: "text-[length:var(--kpi-value-size-md)]/[var(--kpi-value-line-height-md)] font-bold text-[var(--color-text-primary)]",
+        lg: "text-[length:var(--kpi-value-size-lg)]/[var(--kpi-value-line-height-lg)] font-bold text-[var(--color-text-primary)]",
     },
     labelStyle: "text-[var(--color-text-primary)] font-medium",
     labelSizes: {
@@ -23,7 +23,11 @@ const kpiTheme = {
     },
     barFilledColors: {
         ...semanticBgColors,
-        mono: "bg-[var(--color-text-secondary)]",
+        // The gray role, not a text token (§8: never paint a fill with --color-text-*).
+        // These bars carry no text, so they take the role's own weight rather than a
+        // -contrast pairing; --color-mono is the mono token that flips per mode
+        // (900 light / 200 dark), which a fixed ramp rung would not.
+        mono: "bg-[var(--color-mono)]",
     },
     barEmptyColor: "bg-[var(--color-surface-sunken)]",
     barSizes: {