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

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

@@ -1,5 +1,5 @@
 export { Message } from './Message';
-export type { MessageProps, MessageRole, MessageVariant, MessageAvatarProps, MessageTheme, MessageThemeOverrides, MessageVariantTheme, } from './Message.types';
+export type { MessageProps, MessageRole, MessageVariant, MessageAvatarProps, MessageTheme, MessageThemeOverrides, MessageVariantTheme, MessageStatus, MessageAttachmentType, MessageAttachment, MessageReaction, MessageReplyTo, MessageSenderInfo, } from './Message.types';
 export { messageTheme } from './Message.theme';
 export { messageListTheme } from './MessageList.theme';
 export type { MessageListProps, MessageListTheme, MessageListThemeOverrides, } from './MessageList.types';
@@ -7,3 +7,21 @@ export { TypeWriter } from './TypeWriter';
 export type { TypeWriterProps } from './TypeWriter';
 export { MessageBody } from './MessageBody';
 export type { MessageBodyProps } from './MessageBody';
+export { MessageStatusIndicator } from './MessageStatusIndicator';
+export type { MessageStatusIndicatorProps } from './MessageStatusIndicator';
+export { MessageSenderName } from './MessageSenderName';
+export type { MessageSenderNameProps } from './MessageSenderName';
+export { MessageFile } from './MessageFile';
+export type { MessageFileProps } from './MessageFile';
+export { MessageImage } from './MessageImage';
+export type { MessageImageProps } from './MessageImage';
+export { MessageAudio } from './MessageAudio';
+export type { MessageAudioProps } from './MessageAudio';
+export { MessageLink } from './MessageLink';
+export type { MessageLinkProps } from './MessageLink';
+export { MessageReply } from './MessageReply';
+export type { MessageReplyProps } from './MessageReply';
+export { MessageReactions } from './MessageReactions';
+export type { MessageReactionsProps } from './MessageReactions';
+export { MessageDateDivider } from './MessageDateDivider';
+export type { MessageDateDividerProps } from './MessageDateDivider';

package/dist/components/core/Modal/Modal.animations.d.ts

@@ -5,5 +5,6 @@ import { Variants } from 'motion/react';
 export declare const modalOverlayAnimations: Variants;
 /**
  * Modal content animation variants
+ * Scale + slight slide (Vercel/Notion style)
  */
 export declare const modalContentAnimations: Variants;

package/dist/components/core/Modal/Modal.animations.js

@@ -22,30 +22,33 @@ const modalOverlayAnimations = {
 };
 /**
  * Modal content animation variants
+ * Scale + slight slide (Vercel/Notion style)
  */
 const modalContentAnimations = {
     initial: {
         opacity: 0,
-        y: 20
+        scale: 0.98,
+        y: 8,
     },
     animate: {
         opacity: 1,
+        scale: 1,
         y: 0,
         transition: {
-            type: 'spring',
-            damping: 25,
-            stiffness: 300,
-            delay: 0.05
-        }
+            duration: 0.2,
+            ease: [0.4, 0, 0.2, 1],
+            delay: 0.05,
+        },
     },
     exit: {
         opacity: 0,
-        y: 20,
+        scale: 0.98,
+        y: 4,
         transition: {
-            duration: 0.2,
-            ease: 'easeIn'
-        }
-    }
+            duration: 0.15,
+            ease: [0.4, 0, 1, 1],
+        },
+    },
 };
 
 export { modalContentAnimations, modalOverlayAnimations };

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

@@ -15,7 +15,7 @@ const paginationTheme = {
         // Base state - dark
         "dark:bg-[var(--color-neutral-800)] dark:text-[var(--color-neutral-400)] dark:border-transparent " +
         // Hover state - light
-        "hover:text-[var(--color-text-primary)] hover:bg-neutral-50 hover:border-[var(--color-border)] " +
+        "hover:text-[var(--color-text-primary)] hover:bg-[var(--color-background-secondary)] hover:border-[var(--color-border)] " +
         // Hover state - dark
         "dark:hover:bg-[var(--color-neutral-700)] dark:hover:text-[var(--color-neutral-200)] dark:hover:border-[var(--color-neutral-600)] " +
         // Active state - light

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

@@ -1,6 +1,6 @@
 import React from "react";
 import { PopoverRootProps as PopoverProps } from "./Popover.types";
 export declare const Popover: (({ children, className, isOpen: controlledIsOpen, defaultIsOpen, onOpenChange, placement, offset, triggerType, closeOnClickOutside, closeOnEsc, preventClose, hasBackdrop, theme: themeOverrides, darkMode, ...props }: PopoverProps) => import("react/jsx-runtime").JSX.Element) & {
-    Trigger: React.ForwardRefExoticComponent<Omit<import("./Popover.types").PopoverTriggerProps, "ref"> & React.RefAttributes<any>>;
+    Trigger: React.ForwardRefExoticComponent<Omit<import("./Popover.types").PopoverTriggerProps, "ref"> & React.RefAttributes<HTMLElement>>;
     Body: React.ForwardRefExoticComponent<import("./Popover.types").PopoverBodyProps & React.RefAttributes<HTMLDivElement>>;
 };

package/dist/components/core/Popover/PopoverBody.js

@@ -58,7 +58,7 @@ const PopoverBody = React__default.forwardRef(({ children, className, animation
     const { position, cssVariables, contentRef: portalContentRef, } = useSelectPortal({
         triggerRef,
         isOpen: isOpen || false,
-        placement: placement,
+        placement,
         offset: offset || 8,
         autoWidth: true,
         onClose: () => {
@@ -132,7 +132,7 @@ const PopoverBody = React__default.forwardRef(({ children, className, animation
         return (jsx(Overlay, { ref: handleRef, isOpen: isOpen, onClose: () => {
                 if (!preventClose)
                     onOpenChange(false);
-            }, closeOnOverlayClick: closeOnClickOutside && !preventClose, closeOnEsc: closeOnEsc && !preventClose, enableScrollLock: false, enableFocusTrap: false, position: "none", role: "dialog", ariaModal: true, contentClassName: contentClasses, contentStyle: contentPositionStyle, animations: animation && !shouldReduceMotion
+            }, closeOnOverlayClick: closeOnClickOutside && !preventClose, closeOnEsc: closeOnEsc && !preventClose, enableScrollLock: false, enableFocusTrap: true, position: "none", role: "dialog", ariaModal: true, contentClassName: contentClasses, contentStyle: contentPositionStyle, animations: animation && !shouldReduceMotion
                 ? {
                     overlay: overlayBackdropAnimations,
                     content: overlayContentAnimations,

package/dist/components/core/Popover/PopoverTrigger.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
 import { PopoverTriggerProps } from "./Popover.types";
-export declare const PopoverTrigger: React.ForwardRefExoticComponent<Omit<PopoverTriggerProps, "ref"> & React.RefAttributes<any>>;
+export declare const PopoverTrigger: React.ForwardRefExoticComponent<Omit<PopoverTriggerProps, "ref"> & React.RefAttributes<HTMLElement>>;

package/dist/components/core/Popover/PopoverTrigger.js

@@ -5,6 +5,7 @@ import { usePopoverContext } from './PopoverContext.js';
 const PopoverTrigger = React__default.forwardRef(({ children, className, ...props }, ref) => {
     var _a;
     const context = usePopoverContext();
+    const childElement = children;
     // Create trigger events based on triggerType
     const getTriggerEvents = () => {
         if (context.triggerType === "click") {
@@ -14,7 +15,7 @@ const PopoverTrigger = React__default.forwardRef(({ children, className, ...prop
                     e.preventDefault();
                     context.onOpenChange(!context.isOpen);
                     // Call the original onClick if it exists
-                    (_b = (_a = children.props) === null || _a === void 0 ? void 0 : _a.onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+                    (_b = (_a = childElement.props) === null || _a === void 0 ? void 0 : _a.onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
                 },
             };
         }
@@ -24,7 +25,7 @@ const PopoverTrigger = React__default.forwardRef(({ children, className, ...prop
                     var _a, _b;
                     context.onOpenChange(true);
                     // Call the original onMouseEnter if it exists
-                    (_b = (_a = children.props) === null || _a === void 0 ? void 0 : _a.onMouseEnter) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+                    (_b = (_a = childElement.props) === null || _a === void 0 ? void 0 : _a.onMouseEnter) === null || _b === void 0 ? void 0 : _b.call(_a, e);
                 },
                 onMouseLeave: (e) => {
                     var _a, _b;
@@ -32,43 +33,42 @@ const PopoverTrigger = React__default.forwardRef(({ children, className, ...prop
                         context.onOpenChange(false);
                     }
                     // Call the original onMouseLeave if it exists
-                    (_b = (_a = children.props) === null || _a === void 0 ? void 0 : _a.onMouseLeave) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+                    (_b = (_a = childElement.props) === null || _a === void 0 ? void 0 : _a.onMouseLeave) === null || _b === void 0 ? void 0 : _b.call(_a, e);
                 },
             };
         }
         return {};
     };
     // Merge refs for the trigger element
-    function setRef(node) {
+    function mergeRefs(node) {
         context.triggerRef.current = node;
         if (ref) {
             if (typeof ref === "function")
                 ref(node);
-            else if (typeof ref === "object")
+            else if (typeof ref === "object" && ref)
                 ref.current = node;
         }
-        const childRef = children.ref;
+        const childRef = childElement.ref;
         if (childRef) {
             if (typeof childRef === "function")
                 childRef(node);
-            else if (typeof childRef === "object")
+            else if (typeof childRef === "object" && childRef)
                 childRef.current = node;
         }
     }
     const triggerEvents = getTriggerEvents();
-    const childElement = children;
     return React__default.cloneElement(childElement, {
-        ref: setRef,
+        ref: mergeRefs,
         "aria-expanded": context.isOpen,
         "aria-haspopup": true,
         "aria-controls": context.contentId,
-        className: cn((_a = childElement.props) === null || _a === void 0 ? void 0 : _a.className, className, "popover-trigger"),
+        className: cn("popover-trigger", (_a = childElement.props) === null || _a === void 0 ? void 0 : _a.className, className),
         "data-state": context.isOpen ? "open" : "closed",
         "data-trigger-type": context.triggerType,
         ...triggerEvents,
         ...props,
     });
 });
-PopoverTrigger.displayName = "PopoverTrigger";
+PopoverTrigger.displayName = "Popover.Trigger";
 
 export { PopoverTrigger };

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

@@ -6,23 +6,24 @@ import { ProgressProps } from "./Progress.types";
  * 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 />
  */
 declare const Progress: React.ForwardRefExoticComponent<ProgressProps & React.RefAttributes<HTMLDivElement>>;
 export { Progress };

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]",
+    indeterminateStyle: "animate-[progress-indeterminate_1.8s_linear_infinite]",
 };
 
 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" }) }) }));
 });