@flikk/ui 1.0.0-beta.14 → 1.0.0-beta.15

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

@@ -16,25 +16,26 @@ const PROGRESS_SPRING_TRANSITION = {
  * Features:
  * - Determinate mode: Shows specific progress value (0-100)
  * - Indeterminate mode: Animated loading state when value is undefined
- * - Multiple sizes and semantic colors
+ * - Multiple sizes with default primary color
+ * - className controls the fill bar color (the primary styling target)
+ * - wrapperClassName controls the outer container
  * - Flexible label positioning (right, top, bottom, inside)
  * - Respects reduced motion preferences
- * - Full className override support
  *
  * @example
- * // Determinate progress
- * <Progress value={60} color="primary" />
+ * // Default (primary color)
+ * <Progress value={60} />
+ *
+ * // Custom fill color via className
+ * <Progress value={70} className="bg-[var(--color-success)]" />
  *
  * // With label
  * <Progress value={75} showLabel labelPosition="right" />
  *
  * // Indeterminate (loading)
- * <Progress color="primary" />
- *
- * // Custom label format
- * <Progress value={50} showLabel formatLabel={(pct) => `${pct}% complete`} />
+ * <Progress />
  */
-const Progress = React__default.forwardRef(({ value, size = "md", color = "primary", showLabel = false, labelPosition = "right", formatLabel, animated = true, trackClassName, fillClassName, className, theme: customTheme, ...props }, ref) => {
+const Progress = React__default.forwardRef(({ value, size = "md", showLabel = false, labelPosition = "right", formatLabel, animated = true, wrapperClassName, className, theme: customTheme, ...props }, ref) => {
     const shouldReduceMotion = useReducedMotion();
     // Merge custom theme with default theme
     const theme = useMemo(() => {
@@ -44,7 +45,6 @@ const Progress = React__default.forwardRef(({ value, size = "md", color = "prima
             ...progressTheme,
             ...customTheme,
             sizes: { ...progressTheme.sizes, ...customTheme.sizes },
-            colors: { ...progressTheme.colors, ...customTheme.colors },
         };
     }, [customTheme]);
     // Calculate percentage (clamped to 0-100)
@@ -71,7 +71,7 @@ const Progress = React__default.forwardRef(({ value, size = "md", color = "prima
             case "top":
                 return "flex flex-col gap-1.5";
             case "bottom":
-                return "flex flex-col-reverse gap-1.5";
+                return "flex flex-col gap-1.5";
             case "right":
                 return "flex items-center gap-3";
             case "inside":
@@ -95,14 +95,14 @@ const Progress = React__default.forwardRef(({ value, size = "md", color = "prima
                 : ""), children: label }));
     };
     // Track element with optional fill
-    const renderTrack = () => (jsxs("div", { className: cn(theme.trackStyle, theme.sizes[size], "relative", trackClassName), children: [isIndeterminate ? (
+    const renderTrack = () => (jsxs("div", { className: cn(theme.trackStyle, theme.sizes[size], "relative", wrapperClassName), children: [isIndeterminate ? (
             // Indeterminate animation
-            jsx("div", { className: cn(theme.fillStyle, theme.colors[color], "w-1/3", theme.indeterminateStyle, fillClassName) })) : shouldAnimate ? (
+            jsx("div", { className: cn(theme.fillStyle, "absolute", theme.indeterminateStyle, className) })) : shouldAnimate ? (
             // Animated determinate progress with spring animation
-            jsx(motion.div, { className: cn(theme.fillStyle, theme.colors[color], fillClassName), initial: { width: 0 }, animate: { width: `${percentage}%` }, transition: PROGRESS_SPRING_TRANSITION })) : (
+            jsx(motion.div, { className: cn(theme.fillStyle, className), initial: { width: 0 }, animate: { width: `${percentage}%` }, transition: PROGRESS_SPRING_TRANSITION })) : (
             // Static determinate progress
-            jsx("div", { className: cn(theme.fillStyle, theme.colors[color], fillClassName), 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, className), role: "progressbar", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": isIndeterminate ? undefined : percentage, "aria-label": 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: `${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": 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()] }));
 });
 Progress.displayName = "Progress";
 

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

@@ -1,5 +1,3 @@
-import { semanticBgColors } from '../../../utils/colorUtils.js';
-
 /**
  * Default theme configuration for Progress component
  */
@@ -8,10 +6,10 @@ const progressTheme = {
     containerStyle: "w-full",
     // Track (background) styles
     trackStyle: "relative w-full rounded-full bg-[var(--color-background-tertiary)] overflow-hidden",
-    // Fill (progress bar) styles
-    fillStyle: "h-full rounded-full",
+    // Fill (progress bar) styles — includes default primary color
+    fillStyle: "h-full rounded-full bg-[var(--color-primary)]",
     // Label text styles
-    labelStyle: "text-base font-medium text-[var(--color-text-secondary)] tabular-nums min-w-[2.5rem] text-right",
+    labelStyle: "text-base font-semibold text-[var(--color-text-secondary)] tabular-nums min-w-[2.5rem] text-right",
     // Inside label styles (when label is positioned inside the bar)
     insideLabelStyle: "absolute inset-0 flex items-center justify-center text-sm font-medium text-[var(--color-primary-contrast)] tabular-nums",
     // Size variants for track height
@@ -20,17 +18,8 @@ const progressTheme = {
         md: "h-2.5",
         lg: "h-4",
     },
-    // Color variants for the fill
-    colors: {
-        neutral: semanticBgColors.neutral + " dark:bg-[var(--color-neutral-500)]",
-        primary: semanticBgColors.primary + " dark:bg-[var(--color-primary-400)]",
-        secondary: semanticBgColors.secondary + " dark:bg-[var(--color-secondary-400)]",
-        success: semanticBgColors.success + " dark:bg-[var(--color-success-400)]",
-        warning: semanticBgColors.warning + " dark:bg-[var(--color-warning-400)]",
-        danger: semanticBgColors.danger + " dark:bg-[var(--color-danger-400)]",
-    },
-    // Indeterminate animation styles
-    indeterminateStyle: "animate-[progress-indeterminate_1.5s_ease-in-out_infinite]",
+    // Indeterminate animation styles (striped pattern by default)
+    indeterminateStyle: "animate-[progress-indeterminate_1.8s_linear_infinite] bg-[repeating-linear-gradient(45deg,var(--color-primary),var(--color-primary)_10px,var(--color-primary-700)_10px,var(--color-primary-700)_20px)]",
 };
 
 export { progressTheme };

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

@@ -1,7 +1,5 @@
 import React from "react";
-import { SemanticColor } from "../../../utils/colorUtils";
 export type ProgressSize = "sm" | "md" | "lg";
-export type ProgressColor = SemanticColor;
 export type ProgressLabelPosition = "right" | "top" | "bottom" | "inside";
 /**
  * Theme configuration for Progress component
@@ -19,8 +17,6 @@ export interface ProgressTheme {
     insideLabelStyle: string;
     /** Size variants for the track height */
     sizes: Record<ProgressSize, string>;
-    /** Color variants for the fill */
-    colors: Record<ProgressColor, string>;
     /** Indeterminate animation styles */
     indeterminateStyle: string;
 }
@@ -34,7 +30,6 @@ export interface ProgressThemeOverrides {
     labelStyle?: string;
     insideLabelStyle?: string;
     sizes?: Partial<Record<ProgressSize, string>>;
-    colors?: Partial<Record<ProgressColor, string>>;
     indeterminateStyle?: string;
 }
 export interface ProgressProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
@@ -48,11 +43,6 @@ export interface ProgressProps extends Omit<React.HTMLAttributes<HTMLDivElement>
      * @default 'md'
      */
     size?: ProgressSize;
-    /**
-     * The semantic color of the progress bar
-     * @default 'primary'
-     */
-    color?: ProgressColor;
     /**
      * Whether to show the percentage label
      * @default false
@@ -75,17 +65,9 @@ export interface ProgressProps extends Omit<React.HTMLAttributes<HTMLDivElement>
      */
     animated?: boolean;
     /**
-     * Additional class name for the track (background) element
-     */
-    trackClassName?: string;
-    /**
-     * Additional class name for the fill (progress) element
-     */
-    fillClassName?: string;
-    /**
-     * Additional class name for the container
+     * Additional class name for the outer container/track wrapper
      */
-    className?: string;
+    wrapperClassName?: string;
     /**
      * Component-level theme overrides
      */

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

@@ -1,2 +1,2 @@
 export { Progress } from "./Progress";
-export type { ProgressProps, ProgressSize, ProgressColor, ProgressLabelPosition, ProgressThemeOverrides, } from "./Progress.types";
+export type { ProgressProps, ProgressSize, ProgressLabelPosition, ProgressThemeOverrides, } from "./Progress.types";

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

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import React__default, { useRef, useMemo, useImperativeHandle } from 'react';
+import React__default, { useRef, useMemo, useImperativeHandle, useState, useEffect } from 'react';
 import { cn } from '../../../utils/cn.js';
 import { scrollAreaTheme } from './ScrollArea.theme.js';
 import { useSmoothScroll } from './smooth/useSmoothScroll.js';
@@ -25,7 +25,7 @@ import { useSmoothScroll } from './smooth/useSmoothScroll.js';
  * </ScrollArea>
  * ```
  */
-const ScrollArea = React__default.forwardRef(({ children, type = 'hover', orientation = 'vertical', snap, snapAlign = 'start', smooth = false, smoothConfig, onScrollProgress, onPerformanceUpdate, className, theme, ...props }, ref) => {
+const ScrollArea = React__default.forwardRef(({ children, type = 'hover', size = 'default', orientation = 'vertical', snap, snapAlign = 'start', smooth = false, smoothConfig, onScrollProgress, onPerformanceUpdate, className, theme, ...props }, ref) => {
     // Internal ref for the scrollable element
     const internalRef = useRef(null);
     // Determine scroll orientation for smooth scroll
@@ -65,6 +65,26 @@ const ScrollArea = React__default.forwardRef(({ children, type = 'hover', orient
         }
         return extendedRef;
     }, [smooth, smoothAPI]);
+    // Scroll-detection state for type='scroll' (overlay scrollbar)
+    const [isScrolling, setIsScrolling] = useState(false);
+    const scrollTimerRef = useRef(undefined);
+    useEffect(() => {
+        if (type !== 'scroll')
+            return;
+        const el = internalRef.current;
+        if (!el)
+            return;
+        const onScroll = () => {
+            setIsScrolling(true);
+            clearTimeout(scrollTimerRef.current);
+            scrollTimerRef.current = setTimeout(() => setIsScrolling(false), 1000);
+        };
+        el.addEventListener('scroll', onScroll, { passive: true });
+        return () => {
+            el.removeEventListener('scroll', onScroll);
+            clearTimeout(scrollTimerRef.current);
+        };
+    }, [type]);
     // Resolve theme with overrides
     const resolvedTheme = useMemo(() => {
         var _a, _b, _c;
@@ -75,7 +95,19 @@ const ScrollArea = React__default.forwardRef(({ children, type = 'hover', orient
         });
     }, [theme]);
     // Determine overflow classes based on orientation
+    // For type='scroll', use overflow:overlay so scrollbar overlays content
     const overflowClasses = useMemo(() => {
+        if (type === 'scroll') {
+            switch (orientation) {
+                case 'horizontal':
+                    return 'overflow-x-[overlay] overflow-y-hidden';
+                case 'both':
+                    return 'overflow-x-[overlay] overflow-y-[overlay]';
+                case 'vertical':
+                default:
+                    return 'overflow-y-[overlay] overflow-x-hidden';
+            }
+        }
         switch (orientation) {
             case 'horizontal':
                 return 'overflow-x-auto overflow-y-hidden';
@@ -85,7 +117,7 @@ const ScrollArea = React__default.forwardRef(({ children, type = 'hover', orient
             default:
                 return 'overflow-y-auto overflow-x-hidden';
         }
-    }, [orientation]);
+    }, [orientation, type]);
     // Scroll snap classes
     // When snap is enabled for horizontal/both, the viewport becomes a flex container
     // so that items are direct children of the scrollable element (required for snap-align).
@@ -107,9 +139,11 @@ const ScrollArea = React__default.forwardRef(({ children, type = 'hover', orient
         return `${axisClass} ${strictnessClass} ${alignClass} ${layoutClass}`;
     }, [snap, orientation, snapAlign]);
     // Base scrollbar styling classes (shared across all types)
+    const scrollbarDimension = size === 'thin'
+        ? '[&::-webkit-scrollbar]:w-1 [&::-webkit-scrollbar]:h-1'
+        : '[&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar]:h-2';
     const scrollbarBase = [
-        '[&::-webkit-scrollbar]:w-2',
-        '[&::-webkit-scrollbar]:h-2',
+        scrollbarDimension,
         '[&::-webkit-scrollbar-track]:bg-transparent',
         '[&::-webkit-scrollbar-thumb]:rounded-full',
         '[&::-webkit-scrollbar-corner]:bg-transparent',
@@ -124,13 +158,21 @@ const ScrollArea = React__default.forwardRef(({ children, type = 'hover', orient
                 ].join(' ');
             case 'scroll':
                 return [
-                    '[&::-webkit-scrollbar-thumb]:bg-[var(--color-border)]',
+                    '[&::-webkit-scrollbar-thumb]:bg-transparent',
+                    '[&[data-scrolling]::-webkit-scrollbar-thumb]:bg-black/30',
+                    '[&::-webkit-scrollbar-thumb]:transition-colors',
+                    '[&::-webkit-scrollbar-thumb]:duration-300',
                 ].join(' ');
             case 'hover':
                 return [
                     '[&::-webkit-scrollbar-thumb]:bg-transparent',
                     '[&:hover::-webkit-scrollbar-thumb]:bg-[var(--color-border)]',
                 ].join(' ');
+            case 'none':
+                return [
+                    '[&::-webkit-scrollbar]:!hidden',
+                    '[scrollbar-width:none]',
+                ].join(' ');
             case 'auto':
             default:
                 return [
@@ -138,7 +180,7 @@ const ScrollArea = React__default.forwardRef(({ children, type = 'hover', orient
                 ].join(' ');
         }
     }, [type]);
-    return (jsx("div", { ref: internalRef, className: cn(resolvedTheme.baseStyle, overflowClasses, snapClasses, scrollbarBase, scrollbarVisibility, className), "data-orientation": orientation, "data-type": type, "data-smooth": smooth, ...props, children: children }));
+    return (jsx("div", { ref: internalRef, className: cn(resolvedTheme.baseStyle, overflowClasses, snapClasses, scrollbarBase, scrollbarVisibility, className), "data-orientation": orientation, "data-type": type, "data-smooth": smooth, "data-scrolling": isScrolling || undefined, ...props, children: children }));
 });
 ScrollArea.displayName = 'ScrollArea';
 

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

@@ -4,10 +4,17 @@ import { SmoothScrollConfig, ScrollProgress, PerformanceMetrics } from './smooth
  * Scrollbar visibility behavior
  * - 'auto': Standard browser behavior (show when content overflows)
  * - 'always': Always show scrollbar
- * - 'scroll': Always show scrollbar track
+ * - 'scroll': Show scrollbar only while actively scrolling (overlay, no track)
  * - 'hover': Show scrollbar only on hover
+ * - 'none': Hide scrollbar completely while keeping scroll functionality
  */
-export type ScrollAreaType = 'auto' | 'always' | 'scroll' | 'hover';
+export type ScrollAreaType = 'auto' | 'always' | 'scroll' | 'hover' | 'none';
+/**
+ * Scrollbar size
+ * - 'default': 8px scrollbar (w-2/h-2)
+ * - 'thin': 4px scrollbar (w-1/h-1)
+ */
+export type ScrollAreaSize = 'default' | 'thin';
 /**
  * Theme structure for the ScrollArea component
  */
@@ -29,7 +36,7 @@ export interface ScrollAreaThemeOverrides {
  */
 export interface ScrollAreaRef extends HTMLDivElement {
     /** Programmatically scroll to position with smooth animation */
-    smoothScrollTo?: (position: number, options?: any) => void;
+    smoothScrollTo?: (position: number, options?: import("./smooth/SmoothScrollEngine.types").ScrollToOptions) => void;
     /** Get current scroll velocity */
     getScrollVelocity?: () => number;
     /** Pause smooth scrolling */
@@ -65,6 +72,8 @@ export interface ScrollAreaProps extends HTMLAttributes<HTMLDivElement> {
     children: ReactNode;
     /** Scrollbar visibility behavior @default 'hover' */
     type?: ScrollAreaType;
+    /** Scrollbar size @default 'default' */
+    size?: ScrollAreaSize;
     /** Scroll direction @default 'vertical' */
     orientation?: 'vertical' | 'horizontal' | 'both';
     /**

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

@@ -1,5 +1,5 @@
 export { ScrollArea } from './ScrollArea';
-export type { ScrollAreaProps, ScrollAreaRef, ScrollAreaTheme, ScrollAreaThemeOverrides, ScrollAreaType, } from './ScrollArea.types';
+export type { ScrollAreaProps, ScrollAreaRef, ScrollAreaTheme, ScrollAreaThemeOverrides, ScrollAreaType, ScrollAreaSize, } from './ScrollArea.types';
 export { scrollAreaTheme } from './ScrollArea.theme';
 export { useSmoothScroll } from './smooth/useSmoothScroll';
 export type { SmoothScrollAPI, SmoothScrollConfig, ScrollProgress, ScrollToOptions, SnapPoint, EasingFunction, PerformanceMetrics, } from './smooth';

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

@@ -24,6 +24,6 @@ const SegmentedItem = React__default.forwardRef(({ value, disabled = false, chil
         ), onClick: handleClick, "data-value": value, "data-selected": isSelected, "data-disabled": isDisabled, ...props, children: children }));
 });
 // Set display name for dev tools and Storybook
-SegmentedItem.displayName = "SegmentedItem";
+SegmentedItem.displayName = "Segmented.Item";
 
 export { SegmentedItem };

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

@@ -31,12 +31,13 @@ const SidebarDesktop = React__default.forwardRef(({ side = "left", variant = "si
         variants: { ...sidebarTheme.variants, ...customTheme.variants },
         sides: { ...sidebarTheme.sides, ...customTheme.sides },
     }), [customTheme]);
+    const { onAnimationStart, onAnimationEnd, onDrag, onDragStart, onDragEnd, ...motionSafeProps } = props;
     const sidebarClasses = cn(theme.baseStyle, theme.variants[variant], theme.sides[side], className);
     const animateValue = useMemo(() => ({
         width: collapsed ? collapsedWidth : expandedWidth,
         maxWidth: "100vw",
     }), [collapsed, collapsedWidth, expandedWidth]);
-    return (jsx(motion.div, { ref: ref, className: sidebarClasses, "data-side": side, "data-variant": variant, "data-collapsed": collapsed, initial: false, animate: animateValue, transition: SIDEBAR_TRANSITION, ...props, children: children }));
+    return (jsx(motion.div, { ref: ref, className: sidebarClasses, "data-side": side, "data-variant": variant, "data-collapsed": collapsed, initial: false, animate: animateValue, transition: SIDEBAR_TRANSITION, ...motionSafeProps, children: children }));
 });
 SidebarDesktop.displayName = "SidebarDesktop";
 const SidebarMobile = ({ children, className, theme: customTheme = {} }) => {

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

@@ -21,7 +21,8 @@ const SidebarMobileTrigger = React__default.forwardRef(({ icon, className, onCli
         setMobileOpen(true);
         onClick === null || onClick === void 0 ? void 0 : onClick(e);
     };
-    return (jsx(Button, { ref: ref, variant: "soft", size: "sm", className: cn("size-9 p-0", className), onClick: handleClick, "aria-label": "Open navigation menu", ...props, children: icon || jsx(Bars3Icon, { className: "size-5" }) }));
+    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" }) }));
 });
 SidebarMobileTrigger.displayName = "SidebarMobileTrigger";
 

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

@@ -19,7 +19,8 @@ const SidebarToggle = React__default.forwardRef(({ expandIcon, collapseIcon, cla
         toggleCollapsed();
         onClick === null || onClick === void 0 ? void 0 : onClick(e);
     };
-    return (jsx(Button, { ref: ref, variant: "soft", size: "sm", className: cn("size-8 p-0", className), onClick: handleClick, "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar", title: collapsed ? "Expand sidebar" : "Collapse sidebar", ...props, children: jsx(motion.div, { initial: false, animate: { rotate: collapsed ? 180 : 0 }, transition: { duration: 0.2 }, children: collapsed
+    const { onAnimationStart, onAnimationEnd, onDrag, onDragStart, onDragEnd, color: _color, ...buttonProps } = props;
+    return (jsx(Button, { ref: ref, variant: "soft", size: "sm", className: cn("size-8 p-0", 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 }, children: collapsed
                 ? expandIcon || jsx(ChevronRightIcon, { className: "size-4" })
                 : collapseIcon || jsx(ChevronLeftIcon, { className: "size-4" }) }) }));
 });

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

@@ -21,7 +21,7 @@ const SidebarUserProfile = React__default.forwardRef(({ name, email, avatar, sta
     const content = (jsxs("div", { ref: ref, className: cn("flex items-center gap-3 rounded-[var(--radius-base)] cursor-pointer transition-colors duration-150 hover:bg-[var(--color-background-secondary)]", isCollapsedView ? "justify-center p-2" : "px-3 py-2", className), role: "button", tabIndex: 0, onClick: onClick, onKeyDown: (e) => {
             if ((e.key === "Enter" || e.key === " ") && onClick) {
                 e.preventDefault();
-                onClick(e);
+                e.currentTarget.click();
             }
         }, ...props, children: [avatarElement, !isCollapsedView && (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-muted)] truncate", children: email }))] }))] }));
     // Tooltip when collapsed

package/dist/components/core/SocialIcon/SocialIcon.js

@@ -22,7 +22,7 @@ const SocialIcon = React__default.forwardRef(({ icon, size = 'md', colorMode = '
     const fill = colorMode === 'brand' ? platform.brandColor : 'currentColor';
     return (jsx("svg", { ref: ref, xmlns: "http://www.w3.org/2000/svg", viewBox: platform.viewBox, width: resolvedSize, height: resolvedSize, fill: fill, role: "img", "aria-label": `${platform.label} icon`, "data-icon": icon, "data-color-mode": colorMode, "data-size": size, className: cn(theme.baseStyle, className), ...props, children: platform.shapes.map((shape, i) => {
             var _a;
-            return (jsx("path", { d: shape.d, fill: (_a = shape.fill) !== null && _a !== void 0 ? _a : undefined }, i));
+            return (jsx("path", { d: shape.d, fill: colorMode === 'brand' ? ((_a = shape.fill) !== null && _a !== void 0 ? _a : undefined) : undefined }, i));
         }) }));
 });
 SocialIcon.displayName = 'SocialIcon';

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

@@ -154,7 +154,7 @@ const SortableItem = React__default.forwardRef(({ id, children, className, theme
         context.setDraggedItemContent(children);
         const items = Array.from(context.itemRefs.current.entries());
         const currentIndex = items.findIndex(([itemId]) => itemId === id);
-        (_a = context.onSortDragStart) === null || _a === void 0 ? void 0 : _a.call(context, { id, index: currentIndex, data: value }, {});
+        (_a = context.onSortDragStart) === null || _a === void 0 ? void 0 : _a.call(context, { id, index: currentIndex, data: value });
     }, [disabled, id, children, context, value]);
     const handleDragEnd = useCallback(() => {
         var _a;
@@ -164,7 +164,7 @@ const SortableItem = React__default.forwardRef(({ id, children, className, theme
         context.setDropPosition(null);
         const items = Array.from(context.itemRefs.current.entries());
         const currentIndex = items.findIndex(([itemId]) => itemId === id);
-        (_a = context.onSortDragEnd) === null || _a === void 0 ? void 0 : _a.call(context, { id, index: currentIndex, data: value }, {});
+        (_a = context.onSortDragEnd) === null || _a === void 0 ? void 0 : _a.call(context, { id, index: currentIndex, data: value });
     }, [id, context, value]);
     const handlePointerDown = useCallback((event) => {
         if (disabled) {

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-gray-400 hover:text-gray-600 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-200",
 };
 
 export { sortableTheme };

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

@@ -1,9 +1,11 @@
-import { HTMLAttributes, ReactNode, DragEvent } from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
 export interface SortableData {
     id: string;
     index: number;
     data?: string | number | Record<string, unknown>;
 }
+/** Event type for sort drag callbacks - may be a native event, React event, or absent (keyboard-initiated) */
+export type SortableEvent = React.KeyboardEvent<HTMLDivElement> | Event | undefined;
 export interface SortableTheme {
     containerStyle: string;
     itemStyle: string;
@@ -28,9 +30,9 @@ export interface SortableProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onD
     /** Show drag handles */
     showDragHandle?: boolean;
     /** Called when drag starts */
-    onSortDragStart?: (data: SortableData, event: DragEvent<HTMLDivElement>) => void;
+    onSortDragStart?: (data: SortableData, event?: SortableEvent) => void;
     /** Called when drag ends */
-    onSortDragEnd?: (data: SortableData, event: DragEvent<HTMLDivElement>) => void;
+    onSortDragEnd?: (data: SortableData, event?: SortableEvent) => void;
     /** Optional array of values for Reorder.Group - auto-extracted from children if not provided */
     values?: (string | number)[];
 }
@@ -53,8 +55,8 @@ export interface SortableContextValue {
     showDragHandle: boolean;
     theme: SortableTheme;
     onReorder: (fromIndex: number, toIndex: number) => void;
-    onSortDragStart?: (data: SortableData, event: DragEvent<HTMLDivElement>) => void;
-    onSortDragEnd?: (data: SortableData, event: DragEvent<HTMLDivElement>) => void;
+    onSortDragStart?: (data: SortableData, event?: SortableEvent) => void;
+    onSortDragEnd?: (data: SortableData, event?: SortableEvent) => void;
     draggedItem: string | null;
     setDraggedItem: (id: string | null) => void;
     dropPosition: {

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

@@ -14,7 +14,7 @@ const TabsBody = React__default.forwardRef(({ value, forceMount = false, childre
     const shouldReduceMotion = useReducedMotion();
     // Check if we're in Storybook and should disable animations
     const isInStorybook = typeof window !== 'undefined' && window.__STORYBOOK_DISABLE_ANIMATIONS__;
-    const shouldDisableAnimations = !!shouldReduceMotion || isInStorybook;
+    const shouldDisableAnimations = !!shouldReduceMotion || !!isInStorybook;
     const isSelected = value === selectedValue;
     const shouldRender = forceMount || isSelected;
     // Compute animation variants without a global cache (HMR-safe)

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

@@ -14,7 +14,7 @@ const TabsTrigger = React__default.forwardRef(({ value, disabled = false, childr
     const shouldReduceMotion = useReducedMotion();
     // Check if we're in Storybook and should disable animations
     const isInStorybook = typeof window !== 'undefined' && window.__STORYBOOK_DISABLE_ANIMATIONS__;
-    const shouldDisableAnimations = !!shouldReduceMotion || isInStorybook;
+    const shouldDisableAnimations = !!shouldReduceMotion || !!isInStorybook;
     // Memoize derived state flags for performance
     const derivedState = useMemo(() => ({
         isSelected: value === selectedValue,

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

@@ -47,10 +47,10 @@ const Tag = React__default.forwardRef(({ children, size = "md", removable = true
     // Avatar takes precedence over startContent
     const renderLeadingContent = () => {
         if (avatar) {
-            return (jsx(Avatar, { src: avatar.src, name: avatar.name, fallback: avatar.fallback, initialsCount: avatar.initialsCount, className: cn(theme.avatarSizes[size], "rounded-full border-0") }));
+            return (jsx("span", { className: cn("inline-flex items-center justify-center shrink-0 overflow-hidden rounded-full", theme.avatarSizes[size]), children: jsx(Avatar, { src: avatar.src, name: avatar.name, fallback: avatar.fallback, initialsCount: avatar.initialsCount, size: "xs", className: "!size-full border-0 rounded-full" }) }));
         }
         if (startContent) {
-            return (jsx("span", { className: cn("inline-flex items-center", theme.startContentSizes[size]), children: startContent }));
+            return (jsx("span", { className: cn("inline-flex items-center justify-center shrink-0", theme.startContentSizes[size]), children: startContent }));
         }
         return null;
     };

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

@@ -1,3 +1,3 @@
-import React from 'react';
-import { ToastProps } from './Toast.types';
+import React from "react";
+import { ToastProps } from "./Toast.types";
 export declare const Toast: React.ForwardRefExoticComponent<ToastProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -5,14 +5,18 @@ import { cn } from '../../../utils/cn.js';
 import { toastTheme } from './Toast.theme.js';
 import { toastAnimations, getToastStackingAnimation } from './Toast.animations.js';
 import { ArrowPathIcon, InformationCircleIcon, XMarkIcon } from '@heroicons/react/24/solid';
+import { Button } from '../Button/Button.js';
 
-const Toast = React__default.forwardRef(({ toast, className, theme: customTheme = {}, // Deprecated - kept for backward compatibility
-onDismiss, index = 0, isExpanded = false, totalToasts = 1, onMouseEnter, onMouseLeave, onHeightChange, expandedOffset, darkMode = false, ...props }, ref) => {
+const isToastAction = (action) => typeof action === "object" &&
+    action !== null &&
+    "label" in action &&
+    "onClick" in action;
+const Toast = React__default.forwardRef(({ toast, className, onDismiss, index = 0, isExpanded = false, totalToasts = 1, onMouseEnter, onMouseLeave, onHeightChange, expandedOffset, darkMode = false, ...props }, ref) => {
     var _a;
     const internalRef = useRef(null);
     const setRefs = useCallback((node) => {
         internalRef.current = node;
-        if (typeof ref === 'function') {
+        if (typeof ref === "function") {
             ref(node);
         }
         else if (ref) {
@@ -20,11 +24,9 @@ onDismiss, index = 0, isExpanded = false, totalToasts = 1, onMouseEnter, onMouse
         }
     }, [ref]);
     const shouldReduceMotion = useReducedMotion();
-    const { id, variant = 'default', state = 'default', title, subtitle, icon, action, duration = 5000, dismissible = true, } = toast;
-    const isTextOnly = !subtitle && !action;
-    const defaultIcon = state === 'loading'
-        ? (jsx(motion.div, { animate: { rotate: 360 }, transition: { repeat: Infinity, duration: 1, ease: "linear" }, children: jsx(ArrowPathIcon, { className: "w-5 h-5" }) }))
-        : jsx(InformationCircleIcon, { className: "w-5 h-5" });
+    const { id, variant = "default", state = "default", title, subtitle, icon, action, children, duration = 5000, dismissible = true, } = toast;
+    const isTextOnly = !subtitle && !action && !children;
+    const defaultIcon = state === "loading" ? (jsx(motion.div, { animate: { rotate: 360 }, transition: { repeat: Infinity, duration: 1, ease: "linear" }, children: jsx(ArrowPathIcon, { className: "w-5 h-5" }) })) : (jsx(InformationCircleIcon, { className: "w-5 h-5" }));
     const resolvedIcon = icon || defaultIcon;
     // Auto-dismiss after duration
     useEffect(() => {
@@ -46,9 +48,11 @@ onDismiss, index = 0, isExpanded = false, totalToasts = 1, onMouseEnter, onMouse
         onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss(id);
     };
     const handleActionClick = () => {
-        action === null || action === void 0 ? void 0 : action.onClick();
-        if (dismissible) {
-            handleDismiss();
+        if (isToastAction(action)) {
+            action.onClick();
+            if (dismissible) {
+                handleDismiss();
+            }
         }
     };
     const stackingStyle = getToastStackingAnimation(index, totalToasts, isExpanded, expandedOffset);
@@ -58,31 +62,36 @@ onDismiss, index = 0, isExpanded = false, totalToasts = 1, onMouseEnter, onMouse
             opacity: (_a = stackingStyle.opacity) !== null && _a !== void 0 ? _a : 1,
             y: (_b = stackingStyle.y) !== null && _b !== void 0 ? _b : 0,
             scale: (_c = stackingStyle.scale) !== null && _c !== void 0 ? _c : 1,
-            zIndex: (_d = stackingStyle.zIndex) !== null && _d !== void 0 ? _d : 1
+            zIndex: (_d = stackingStyle.zIndex) !== null && _d !== void 0 ? _d : 1,
         });
-    }, [stackingStyle.opacity, stackingStyle.y, stackingStyle.scale, stackingStyle.zIndex]);
+    }, [
+        stackingStyle.opacity,
+        stackingStyle.y,
+        stackingStyle.scale,
+        stackingStyle.zIndex,
+    ]);
     const styleValue = useMemo(() => {
         var _a;
         return ({
             zIndex: (_a = stackingStyle.zIndex) !== null && _a !== void 0 ? _a : 1,
-            position: (index > 0 ? 'absolute' : 'relative'),
+            position: (index > 0
+                ? "absolute"
+                : "relative"),
             top: index > 0 ? 0 : undefined,
             left: index > 0 ? 0 : undefined,
-            width: index > 0 ? '100%' : undefined,
+            width: index > 0 ? "100%" : undefined,
         });
     }, [stackingStyle.zIndex, index]);
     const toastNode = (jsxs(motion.div, { ref: setRefs, layout: true, initial: shouldReduceMotion ? false : toastAnimations.initial, animate: animateValue, exit: shouldReduceMotion
             ? { ...toastAnimations.exit, transition: { duration: 0 } }
-            : toastAnimations.exit, transition: shouldReduceMotion ? { duration: 0 } : toastAnimations.transition, className: cn(toastTheme.baseStyle, isTextOnly && 'items-center', ((_a = toastTheme.variants) === null || _a === void 0 ? void 0 : _a[variant]) || "", 'pointer-events-auto', index > 0 && !isExpanded && 'absolute top-0 left-0', className), style: styleValue, role: "alert", "aria-live": "polite", children: [jsx("div", { className: isTextOnly ? toastTheme.iconCenteredStyle : toastTheme.iconStyle, children: resolvedIcon }), jsxs("div", { className: "flex-1 min-w-0", children: [title && (typeof title === 'string'
-                        ? jsx("div", { className: isTextOnly ? toastTheme.textOnlyStyle : toastTheme.titleStyle, children: title })
-                        : title), subtitle && (typeof subtitle === 'string'
-                        ? jsx("div", { className: toastTheme.subtitleStyle, children: subtitle })
-                        : subtitle), action && (jsx("div", { className: "mt-2", children: jsx("button", { type: "button", className: toastTheme.actionStyle, onClick: handleActionClick, children: action.label }) }))] }), dismissible && (jsx("button", { type: "button", className: isTextOnly ? toastTheme.closeButtonCenteredStyle : toastTheme.closeButtonStyle, onClick: handleDismiss, "aria-label": "Dismiss notification", children: jsx(XMarkIcon, { className: "w-4 h-4" }) }))] }));
+            : toastAnimations.exit, transition: shouldReduceMotion ? { duration: 0 } : toastAnimations.transition, className: cn(toastTheme.baseStyle, isTextOnly && "items-center", ((_a = toastTheme.variants) === null || _a === void 0 ? void 0 : _a[variant]) || "", "pointer-events-auto", index > 0 && !isExpanded && "absolute top-0 left-0", className), style: styleValue, role: "alert", "aria-live": "polite", children: [jsx("div", { className: cn(toastTheme.iconStyle, !isTextOnly && "mt-0.5"), children: resolvedIcon }), jsxs("div", { className: "flex-1 min-w-0", children: [title &&
+                        (typeof title === "string" ? (jsx("div", { className: cn(toastTheme.titleStyle, !isTextOnly && "font-semibold"), children: title })) : (title)), subtitle &&
+                        (typeof subtitle === "string" ? (jsx("div", { className: toastTheme.subtitleStyle, children: subtitle })) : (subtitle)), action && (jsx("div", { className: "mt-4", children: isToastAction(action) ? (jsx(Button, { variant: "link", color: "primary", onClick: handleActionClick, children: action.label })) : (action) })), children] }), dismissible && (jsx("button", { type: "button", className: cn(toastTheme.closeButtonStyle, !isTextOnly && "mt-0.5"), onClick: handleDismiss, "aria-label": "Dismiss notification", children: jsx(XMarkIcon, { className: "size-5" }) }))] }));
     if (darkMode) {
         return jsx("div", { className: "dark", children: toastNode });
     }
     return toastNode;
 });
-Toast.displayName = 'Toast';
+Toast.displayName = "Toast";
 
 export { Toast };