@flikk/ui 1.0.0-beta.30 → 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.js

@@ -1,8 +1,7 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import React__default, { useState, useMemo, useCallback } from 'react';
-import { StarIcon } from '@heroicons/react/24/solid';
-import { StarIcon as StarIcon$1 } from '@heroicons/react/24/outline';
+import { Star } from '@phosphor-icons/react';
 import { cn } from '../../../utils/cn.js';
 import { ratingTheme } from './Rating.theme.js';
 
@@ -147,14 +146,14 @@ const Rating = React__default.memo(React__default.forwardRef(({ value: controlle
         // Determine which icon to render based on fill state
         const renderStarIcon = () => {
             if (fillState === "full") {
-                return iconFilled ? (jsx("span", { className: cn(starSizeClass, filledColorClass), "aria-hidden": "true", children: iconFilled })) : (jsx(StarIcon, { className: cn(starSizeClass, filledColorClass), "aria-hidden": "true" }));
+                return iconFilled ? (jsx("span", { className: cn(starSizeClass, filledColorClass), "aria-hidden": "true", children: iconFilled })) : (jsx(Star, { className: cn(starSizeClass, filledColorClass), "aria-hidden": "true" }));
             }
             if (fillState === "half") {
                 // Half star: clip a filled star to the left half, overlay on empty star
-                return (jsxs("span", { className: cn("relative inline-flex", starSizeClass), "aria-hidden": "true", children: [iconEmpty ? (jsx("span", { className: cn("absolute inset-0", emptyColorClass), children: iconEmpty })) : (jsx(StarIcon$1, { className: cn("absolute inset-0", starSizeClass, emptyColorClass) })), jsx("span", { className: "absolute inset-0 overflow-hidden", style: { width: "50%" }, children: iconFilled ? (jsx("span", { className: cn(filledColorClass), children: iconFilled })) : (jsx(StarIcon, { className: cn(starSizeClass, filledColorClass) })) })] }));
+                return (jsxs("span", { className: cn("relative inline-flex", starSizeClass), "aria-hidden": "true", children: [iconEmpty ? (jsx("span", { className: cn("absolute inset-0", emptyColorClass), children: iconEmpty })) : (jsx(Star, { className: cn("absolute inset-0", starSizeClass, emptyColorClass) })), jsx("span", { className: "absolute inset-0 overflow-hidden", style: { width: "50%" }, children: iconFilled ? (jsx("span", { className: cn(filledColorClass), children: iconFilled })) : (jsx(Star, { className: cn(starSizeClass, filledColorClass) })) })] }));
             }
             // Empty star
-            return iconEmpty ? (jsx("span", { className: cn(starSizeClass, emptyColorClass), "aria-hidden": "true", children: iconEmpty })) : (jsx(StarIcon$1, { className: cn(starSizeClass, emptyColorClass), "aria-hidden": "true" }));
+            return iconEmpty ? (jsx("span", { className: cn(starSizeClass, emptyColorClass), "aria-hidden": "true", children: iconEmpty })) : (jsx(Star, { className: cn(starSizeClass, emptyColorClass), "aria-hidden": "true" }));
         };
         if (!isInteractive) {
             // Read-only or disabled: render as a non-interactive span

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",
@@ -27,7 +27,7 @@ const ratingTheme = {
         danger: "text-[var(--color-danger)]",
     },
     // Empty star color
-    emptyColor: "text-[var(--color-neutral-300)]",
+    emptyColor: "text-[var(--color-mono-300)]",
     // State styles
     states: {
         disabled: "opacity-50 cursor-not-allowed pointer-events-none",

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 rounded-[var(--segmented-radius)] bg-neutral-100 dark:bg-neutral-900 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,19 +15,22 @@ 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 dark:bg-neutral-800",
+    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",
-    // Size variants using CSS variables
+    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,
+    // whose height tokens Segmented literally aliases, both stepped up at lg.
     sizes: {
-        sm: "text-sm px-[var(--segmented-px-sm)]",
-        md: "text-sm px-[var(--segmented-px-md)]",
-        lg: "text-sm px-[var(--segmented-px-lg)]",
+        sm: "text-[length:var(--segmented-text-size-sm)]/[var(--segmented-line-height-sm)] px-[var(--segmented-px-sm)]",
+        md: "text-[length:var(--segmented-text-size-md)]/[var(--segmented-line-height-md)] px-[var(--segmented-px-md)]",
+        lg: "text-[length:var(--segmented-text-size-lg)]/[var(--segmented-line-height-lg)] px-[var(--segmented-px-lg)]",
     },
     // Selected state
     selectedStyle: "text-[var(--color-text-primary)] z-10",

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/Sidebar.types.d.ts

@@ -133,11 +133,13 @@ export interface SidebarNavGroupProps extends React.HTMLAttributes<HTMLDivElemen
 }
 export interface SidebarToggleProps extends React.HTMLAttributes<HTMLButtonElement> {
     /**
-     * Custom icon for expanded state
+     * Icon shown while the sidebar is COLLAPSED — clicking it expands.
+     * Falls back to the default chevron.
      */
     expandIcon?: ReactNode;
     /**
-     * Custom icon for collapsed state
+     * Icon shown while the sidebar is EXPANDED — clicking it collapses.
+     * Falls back to the default chevron.
      */
     collapseIcon?: ReactNode;
 }

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

@@ -1,7 +1,7 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import React__default from 'react';
-import { XMarkIcon } from '@heroicons/react/24/outline';
+import { X } from '@phosphor-icons/react';
 import { cn } from '../../../utils/cn.js';
 import { useSidebarContext, useSidebarCollapsed } from './SidebarContext.js';
 import { SidebarToggle } from './SidebarToggle.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
@@ -22,7 +22,7 @@ const SidebarHeader = React__default.forwardRef(({ logo, showToggle = true, cust
         // fills the interior exactly. Left-pinned in both states (no
         // `justify-*` toggle) so nothing jumps mid-animation. Same value
         // for collapsed + expanded → no padding transition needed.
-        "px-3", className), ...props, children: [jsx("div", { className: "flex items-center min-w-0 flex-1", children: logo }), isMobile && isMobileOpen && (jsx(Button, { variant: "ghost", size: "sm", className: "size-7 p-0 text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)]", onClick: () => sidebarContext === null || sidebarContext === void 0 ? void 0 : sidebarContext.setMobileOpen(false), "aria-label": "Close navigation", children: jsx(XMarkIcon, { className: "size-4" }) })), !isMobile && showToggle && (customToggle || jsx(SidebarToggle, {}))] }));
+        "px-3", className), ...props, children: [jsx("div", { className: "flex items-center min-w-0 flex-1", children: logo }), isMobile && isMobileOpen && (jsx(Button, { variant: "ghost", size: "sm", className: "size-7 p-0 text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)]", onClick: () => sidebarContext === null || sidebarContext === void 0 ? void 0 : sidebarContext.setMobileOpen(false), "aria-label": "Close navigation", children: jsx(X, { className: "size-4" }) })), !isMobile && showToggle && (customToggle || jsx(SidebarToggle, {}))] }));
 });
 SidebarHeader.displayName = "SidebarHeader";
 

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

@@ -1,7 +1,7 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import React__default from 'react';
-import { Bars3Icon } from '@heroicons/react/24/outline';
+import { List } from '@phosphor-icons/react';
 import { cn } from '../../../utils/cn.js';
 import { useSidebarContext } from './SidebarContext.js';
 import { Button } from '../Button/Button.js';
@@ -23,7 +23,7 @@ const SidebarMobileTrigger = React__default.forwardRef(({ icon, className, onCli
         onClick === null || onClick === void 0 ? void 0 : onClick(e);
     };
     const { onAnimationStart, onAnimationEnd, onDrag, onDragStart, onDragEnd, color: _color, ...buttonProps } = props;
-    return (jsx(Button, { ref: ref, variant: "soft", size: "sm", className: cn("size-9 p-0", className), onClick: handleClick, "aria-label": "Open navigation menu", ...buttonProps, children: icon || jsx(Bars3Icon, { className: "size-5" }) }));
+    return (jsx(Button, { ref: ref, variant: "soft", size: "sm", className: cn("size-9 p-0", className), onClick: handleClick, "aria-label": "Open navigation menu", ...buttonProps, children: icon || jsx(List, { className: "size-5" }) }));
 });
 SidebarMobileTrigger.displayName = "SidebarMobileTrigger";
 

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

@@ -2,7 +2,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React__default, { useState, useRef, useEffect } from 'react';
 import { motion, AnimatePresence } from 'motion/react';
-import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';
+import { MagnifyingGlass } from '@phosphor-icons/react';
 import { cn } from '../../../utils/cn.js';
 import { Tooltip } from '../Tooltip/Tooltip.js';
 import '../Tooltip/Tooltip.animations.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(MagnifyingGlassIcon, { 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(
@@ -114,7 +114,7 @@ const SidebarSearch = React__default.forwardRef(({ value: controlledValue, defau
                         // Input pl-3 (12) → text starts at field-x = 28 + 12 = 40,
                         // giving a 12px icon→text gap (matches <Input iconStart>'s
                         // pl-3 + pl-10 = 12px convention).
-                        "w-full bg-transparent border-0 outline-none text-sm py-2 pl-3 pr-3", "text-[var(--color-text-primary)] placeholder:text-[var(--color-text-placeholder)]", "dark:placeholder:text-[var(--color-neutral-500)]") }) }, "search-input")) })] }));
+                        "w-full bg-transparent border-0 outline-none text-sm py-2 pl-3 pr-3", "text-[var(--color-text-primary)] placeholder:text-[var(--color-text-placeholder)]") }) }, "search-input")) })] }));
     return (
     // Outer horizontal padding mirrors Sidebar.Content (px-3 collapsed,
     // px-2.5 expanded) so the search row sits on the exact same horizontal
@@ -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

@@ -1,14 +1,14 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import React__default from 'react';
-import { ChevronLeftIcon } from '@heroicons/react/24/outline';
+import { CaretLeft } from '@phosphor-icons/react';
 import { motion } from 'motion/react';
 import { cn } from '../../../utils/cn.js';
 import { useSidebarContext } from './SidebarContext.js';
 import { Button } from '../Button/Button.js';
 
 const SidebarToggle = React__default.forwardRef(({ expandIcon, collapseIcon, className, onClick, ...props }, ref) => {
-    var _a;
+    var _a, _b;
     const sidebarContext = useSidebarContext();
     if (!sidebarContext) {
         if (process.env.NODE_ENV !== "production") {
@@ -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: 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(ChevronLeftIcon, { className: "size-3", strokeWidth: 2.5 }) }) }));
+    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

@@ -1,7 +1,7 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import React__default from 'react';
-import { ChevronUpDownIcon } from '@heroicons/react/20/solid';
+import { CaretUpDown } from '@phosphor-icons/react';
 import { cn } from '../../../utils/cn.js';
 import { motion, AnimatePresence } from 'motion/react';
 import { useSidebarCollapsed } from './SidebarContext.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();
@@ -37,7 +37,7 @@ const SidebarUserProfile = React__default.forwardRef(({ name, email, avatar, sta
                 className: "flex-shrink-0", children: avatarElement }), jsx(AnimatePresence, { initial: false, children: !isCollapsedView && (jsxs(motion.div, { className: "flex flex-row items-center gap-2 flex-1 min-w-0 overflow-hidden whitespace-nowrap", 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] }
-                    }, children: [children !== null && children !== void 0 ? children : (jsxs("div", { className: "flex-1 min-w-0", children: [jsx("div", { className: "text-sm font-medium text-[var(--color-text-primary)] truncate", children: name }), email && (jsx("div", { className: "text-xs text-[var(--color-text-secondary)]/80 truncate", children: email }))] })), dropdownContent && (jsx(ChevronUpDownIcon, { className: "size-4 flex-shrink-0  text-[var(--color-text-muted)]" }))] }, "profile-text")) })] }));
+                    }, children: [children !== null && children !== void 0 ? children : (jsxs("div", { className: "flex-1 min-w-0", children: [jsx("div", { className: "text-sm font-medium text-[var(--color-text-primary)] truncate", children: name }), email && (jsx("div", { className: "text-xs text-[var(--color-text-secondary)]/80 truncate", children: email }))] })), dropdownContent && (jsx(CaretUpDown, { className: "size-4 flex-shrink-0  text-[var(--color-text-muted)]" }))] }, "profile-text")) })] }));
     // When dropdownContent is provided, the profile acts as a menu trigger.
     if (dropdownContent) {
         return (jsxs(Dropdown, { placement: "right-end", offset: 8, children: [jsx(Dropdown.Trigger, { children: content }), jsx(Dropdown.Menu, { "aria-label": `${name} menu`, children: dropdownContent })] }));

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

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

package/dist/components/core/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 };