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

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

@@ -15,8 +15,9 @@ const PROGRESS_SPRING_TRANSITION = {
  * Progress component - Linear progress bar for tracking completion
  *
  * Features:
- * - Determinate mode: Shows specific progress value (0-100)
+ * - Determinate mode: Shows specific progress value (0 to max)
  * - Indeterminate mode: Animated loading state when value is undefined
+ * - Continuous bar, or a discrete LED-style meter via `segments`
  * - Multiple sizes with default primary color
  * - className controls the fill bar color (the primary styling target)
  * - wrapperClassName controls the outer container
@@ -33,10 +34,25 @@ const PROGRESS_SPRING_TRANSITION = {
  * // With label
  * <Progress value={75} showLabel labelPosition="right" />
  *
+ * // Segmented meter over an arbitrary range
+ * <Progress value={214} max={300} segments={24} />
+ *
  * // Indeterminate (loading)
  * <Progress />
  */
-const Progress = React__default.forwardRef(({ value, size = "md", showLabel = false, labelPosition = "right", formatLabel, animated = true, wrapperClassName, className, theme: customTheme, 'aria-label': consumerAriaLabel, ...props }, ref) => {
+/** Cells within this distance of the leading edge fade out when segmentFade is on */
+const SEGMENT_FADE_DISTANCE = 3;
+/** Opacity of the outermost faded cell */
+const SEGMENT_FADE_MIN_OPACITY = 0.4;
+/** Per-cell entrance stagger, seconds */
+const SEGMENT_STAGGER = 0.03;
+/** Per-cell offset of the indeterminate chase, seconds */
+const SEGMENT_CHASE_STAGGER = 0.06;
+const SEGMENT_ENTRANCE_TRANSITION = {
+    duration: 0.25,
+    ease: "easeOut",
+};
+const Progress = React__default.forwardRef(({ value, max = 100, segments, segmentFade = false, size = "md", showLabel = false, labelPosition = "right", formatLabel, animated = true, wrapperClassName, className, theme: customTheme, 'aria-label': consumerAriaLabel, ...props }, ref) => {
     const shouldReduceMotion = useReducedMotion();
     // Merge custom theme with default theme
     const theme = useMemo(() => {
@@ -46,16 +62,38 @@ const Progress = React__default.forwardRef(({ value, size = "md", showLabel = fa
             ...progressTheme,
             ...customTheme,
             sizes: { ...progressTheme.sizes, ...customTheme.sizes },
+            segmentSizes: { ...progressTheme.segmentSizes, ...customTheme.segmentSizes },
         };
     }, [customTheme]);
-    // Calculate percentage (clamped to 0-100)
-    const percentage = useMemo(() => {
-        if (value === undefined || value === null)
-            return 0;
-        return Math.min(Math.max(Math.round(value), 0), 100);
-    }, [value]);
+    // Dev-time warnings for common issues
+    if (process.env.NODE_ENV !== 'production') {
+        if (segments !== undefined && (!Number.isInteger(segments) || segments < 1)) {
+            // eslint-disable-next-line no-console
+            console.warn(`Progress: 'segments' must be a positive integer, received ${segments}. Falling back to the continuous bar.`);
+        }
+        if (max <= 0) {
+            // eslint-disable-next-line no-console
+            console.warn(`Progress: 'max' must be greater than 0, received ${max}.`);
+        }
+    }
+    // Segmented rendering is opted into by passing a usable cell count.
+    const segmentCount = segments !== undefined && Number.isInteger(segments) && segments >= 1
+        ? segments
+        : undefined;
+    const isSegmented = segmentCount !== undefined;
     // Determine if this is indeterminate mode
     const isIndeterminate = value === undefined || value === null;
+    // The value clamped into [0, max]. Rounded, matching the historical behaviour
+    // of the 0-100 form.
+    const clampedValue = useMemo(() => {
+        if (value === undefined || value === null)
+            return 0;
+        return Math.min(Math.max(Math.round(value), 0), Math.max(max, 0));
+    }, [value, max]);
+    // Position within the range, 0-1
+    const ratio = max > 0 ? clampedValue / max : 0;
+    // Calculate percentage (0-100) for labels and the continuous fill
+    const percentage = useMemo(() => Math.round(ratio * 100), [ratio]);
     // Format the label
     const label = useMemo(() => {
         if (formatLabel)
@@ -86,6 +124,10 @@ const Progress = React__default.forwardRef(({ value, size = "md", showLabel = fa
         if (!showLabel || isIndeterminate)
             return null;
         if (labelPosition === "inside") {
+            // No continuous track to sit inside, and a label straddling the cells
+            // would be unreadable
+            if (isSegmented)
+                return null;
             // Only show inside label for lg size (enough height)
             if (size !== "lg")
                 return null;
@@ -100,10 +142,36 @@ const Progress = React__default.forwardRef(({ value, size = "md", showLabel = fa
             // Indeterminate animation
             jsx("div", { className: cn(theme.fillStyle, "absolute", theme.indeterminateStyle, className) })) : shouldAnimate ? (
             // Animated determinate progress with spring animation (scaleX avoids layout recalculation)
-            jsx(motion.div, { className: cn(theme.fillStyle, className), style: { width: '100%', transformOrigin: 'left' }, initial: { scaleX: 0 }, animate: { scaleX: percentage / 100 }, transition: PROGRESS_SPRING_TRANSITION })) : (
+            jsx(motion.div, { className: cn(theme.fillStyle, className), style: { width: '100%', transformOrigin: 'left' }, initial: { scaleX: 0 }, animate: { scaleX: ratio }, transition: PROGRESS_SPRING_TRANSITION })) : (
             // Static determinate progress
-            jsx("div", { className: cn(theme.fillStyle, className), style: { width: `${percentage}%` } })), showLabel && labelPosition === "inside" && size === "lg" && !isIndeterminate && (jsx("span", { className: theme.insideLabelStyle, children: label }))] }));
-    return (jsxs("div", { ref: ref, className: cn(theme.containerStyle, containerLayoutClass), role: "progressbar", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": isIndeterminate ? undefined : percentage, "aria-label": consumerAriaLabel !== null && consumerAriaLabel !== void 0 ? consumerAriaLabel : (isIndeterminate ? "Loading" : `${percentage}% complete`), ...props, children: [labelPosition === "top" && renderLabel(), labelPosition === "right" ? (jsxs(Fragment, { children: [jsx("div", { className: "flex-1", children: renderTrack() }), renderLabel()] })) : (renderTrack()), labelPosition === "bottom" && renderLabel()] }));
+            jsx("div", { className: cn(theme.fillStyle, className), style: { width: `${ratio * 100}%` } })), showLabel && labelPosition === "inside" && size === "lg" && !isIndeterminate && (jsx("span", { className: theme.insideLabelStyle, children: label }))] }));
+    // Discrete cell row — the LED-style meter. Each cell paints the empty fill,
+    // and lit cells stack a coloured overlay on top so the base stays visible
+    // underneath while the overlay fades in.
+    const renderSegmentedTrack = () => {
+        const { height, gap } = theme.segmentSizes[size];
+        const litCount = Math.round(ratio * segmentCount);
+        return (jsx("div", { className: cn(theme.segmentTrackStyle, gap, wrapperClassName), children: Array.from({ length: segmentCount }, (_, i) => {
+                const isLit = !isIndeterminate && i < litCount;
+                // Cells nearest the leading edge dim toward it
+                const distanceFromEdge = litCount - i;
+                const fillOpacity = segmentFade && distanceFromEdge <= SEGMENT_FADE_DISTANCE
+                    ? SEGMENT_FADE_MIN_OPACITY +
+                        (distanceFromEdge / SEGMENT_FADE_DISTANCE) *
+                            (1 - SEGMENT_FADE_MIN_OPACITY)
+                    : 1;
+                // While indeterminate every cell carries the overlay so the chase
+                // reads in the fill colour rather than in the muted empty fill.
+                const isChasing = isIndeterminate && shouldAnimate;
+                const fillClassName = cn(theme.segmentFillStyle, className, isChasing && theme.segmentChaseStyle);
+                return (jsx("div", { "data-progress-segment": "", "data-state": isLit ? "filled" : "empty", className: cn(theme.segmentStyle, height, theme.segmentEmptyStyle), children: isChasing ? (jsx("div", { className: fillClassName, style: { animationDelay: `${i * SEGMENT_CHASE_STAGGER}s` } })) : isLit && shouldAnimate ? (jsx(motion.div, { className: fillClassName, initial: { opacity: 0 }, animate: { opacity: fillOpacity }, transition: {
+                            ...SEGMENT_ENTRANCE_TRANSITION,
+                            delay: i * SEGMENT_STAGGER,
+                        } })) : isLit ? (jsx("div", { className: fillClassName, style: { opacity: fillOpacity } })) : null }, i));
+            }) }));
+    };
+    const trackNode = isSegmented ? renderSegmentedTrack() : renderTrack();
+    return (jsxs("div", { ref: ref, className: cn(theme.containerStyle, containerLayoutClass), role: "progressbar", "aria-valuemin": 0, "aria-valuemax": max, "aria-valuenow": isIndeterminate ? undefined : clampedValue, "aria-label": consumerAriaLabel !== null && consumerAriaLabel !== void 0 ? consumerAriaLabel : (isIndeterminate ? "Loading" : `${percentage}% complete`), ...props, children: [labelPosition === "top" && renderLabel(), labelPosition === "right" ? (jsxs(Fragment, { children: [jsx("div", { className: "flex-1", children: trackNode }), renderLabel()] })) : (trackNode), labelPosition === "bottom" && renderLabel()] }));
 });
 Progress.displayName = "Progress";
 

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

@@ -20,6 +20,23 @@ const progressTheme = {
     },
     // Indeterminate animation styles
     indeterminateStyle: "animate-[progress-indeterminate_1.8s_linear_infinite]",
+    // Row holding the segment cells — no track fill, rounding or clipping here;
+    // each cell paints its own background.
+    segmentTrackStyle: "flex items-end w-full",
+    // A single segment cell. flex-1 so the row always fills its container
+    // regardless of how many cells were asked for.
+    segmentStyle: "relative rounded-sm flex-1",
+    // Lit overlay — `className` lands here, so it carries the fill colour.
+    segmentFillStyle: "absolute inset-0 rounded-sm bg-[var(--color-primary)]",
+    segmentEmptyStyle: "bg-[var(--color-surface-sunken)]",
+    // Deliberately NOT the continuous `sizes` ramp (h-1.5/h-2.5/h-4) — at that
+    // height a cell reads as noise rather than a lit segment.
+    segmentSizes: {
+        sm: { height: "h-4", gap: "gap-[2px]" },
+        md: { height: "h-6", gap: "gap-[3px]" },
+        lg: { height: "h-8", gap: "gap-1" },
+    },
+    segmentChaseStyle: "animate-[progress-segment-chase_1.2s_ease-in-out_infinite]",
 };
 
 export { progressTheme };

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

@@ -1,6 +1,18 @@
 import React from "react";
 export type ProgressSize = "sm" | "md" | "lg";
 export type ProgressLabelPosition = "right" | "top" | "bottom" | "inside";
+/**
+ * Per-size geometry for the segmented form.
+ *
+ * Two keys rather than a single class string because the two values land on
+ * different elements: `height` on each cell, `gap` on the row that holds them.
+ */
+export interface ProgressSegmentSize {
+    /** Height of a single segment cell */
+    height: string;
+    /** Gap between segment cells (applied to the row) */
+    gap: string;
+}
 /**
  * Theme configuration for Progress component
  */
@@ -19,6 +31,18 @@ export interface ProgressTheme {
     sizes: Record<ProgressSize, string>;
     /** Indeterminate animation styles */
     indeterminateStyle: string;
+    /** Row that holds the segment cells (segmented form only) */
+    segmentTrackStyle: string;
+    /** Base styles for a single segment cell */
+    segmentStyle: string;
+    /** The lit overlay painted inside a segment cell */
+    segmentFillStyle: string;
+    /** Fill for an unlit segment cell */
+    segmentEmptyStyle: string;
+    /** Per-size segment geometry */
+    segmentSizes: Record<ProgressSize, ProgressSegmentSize>;
+    /** Indeterminate chase animation applied to each segment cell */
+    segmentChaseStyle: string;
 }
 /**
  * Theme overrides for Progress component
@@ -31,13 +55,35 @@ export interface ProgressThemeOverrides {
     insideLabelStyle?: string;
     sizes?: Partial<Record<ProgressSize, string>>;
     indeterminateStyle?: string;
+    segmentTrackStyle?: string;
+    segmentStyle?: string;
+    segmentFillStyle?: string;
+    segmentEmptyStyle?: string;
+    segmentSizes?: Partial<Record<ProgressSize, ProgressSegmentSize>>;
+    segmentChaseStyle?: string;
 }
 export interface ProgressProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
     /**
-     * Progress value from 0 to 100.
+     * Progress value, from 0 to `max`.
      * If undefined, the progress bar will be in indeterminate mode.
      */
     value?: number;
+    /**
+     * Upper bound of the range `value` is measured against.
+     * @default 100
+     */
+    max?: number;
+    /**
+     * Number of cells to render the bar as an LED-style segmented meter.
+     *
+     * Omitted renders the continuous fill.
+     */
+    segments?: number;
+    /**
+     * Fade the meter out across its last few lit cells (segmented form only).
+     * @default false
+     */
+    segmentFade?: boolean;
     /**
      * The size of the progress bar
      * @default 'md'

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

@@ -6,7 +6,7 @@ const ratingTheme = {
     // Base container styles
     baseStyle: "inline-flex items-center",
     // Individual star button styles
-    starStyle: "relative inline-flex items-center justify-center shrink-0 transition-transform duration-150 cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-1 rounded-sm",
+    starStyle: "relative inline-flex items-center justify-center shrink-0 transition-transform duration-[var(--motion-duration-fast)] cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-1 rounded-sm",
     // Star icon sizes per rating size
     starSizes: {
         sm: "size-4",

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

@@ -97,11 +97,12 @@ export interface RatingProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
      */
     onChange?: (value: number) => void;
     /**
-     * Custom filled star icon (defaults to Heroicons StarIcon solid)
+     * Custom filled star icon. Defaults to Phosphor `Star` — the built-in filled
+     * and empty stars are the same glyph, distinguished by color, not by shape.
      */
     iconFilled?: ReactNode;
     /**
-     * Custom empty star icon (defaults to Heroicons StarIcon outline)
+     * Custom empty star icon. Defaults to Phosphor `Star` — see `iconFilled`.
      */
     iconEmpty?: ReactNode;
     /**

package/dist/components/core/ScrollArea/ScrollArea.js

@@ -393,7 +393,7 @@ const ScrollArea = React__default.forwardRef(({ children, type = 'hover', size =
                     '[&::-webkit-scrollbar-thumb]:bg-transparent',
                     '[&[data-scrolling]::-webkit-scrollbar-thumb]:bg-[var(--color-border)]',
                     '[&::-webkit-scrollbar-thumb]:transition-colors',
-                    '[&::-webkit-scrollbar-thumb]:duration-300',
+                    '[&::-webkit-scrollbar-thumb]:duration-[var(--motion-duration-slow)]',
                 ].join(' ');
             case 'hover':
                 return [

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

@@ -4,7 +4,7 @@
  */
 const scrollAreaTheme = {
     baseStyle: 'relative h-full w-full',
-    scrollbarStyle: 'flex touch-none select-none transition-colors duration-150',
+    scrollbarStyle: 'flex touch-none select-none transition-colors duration-[var(--motion-duration-fast)]',
     thumbStyle: 'relative flex-1 rounded-full bg-[var(--color-border)]/60',
 };
 

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/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>;