@flikk/ui 1.0.0-beta.11 → 1.0.0-beta.13

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

@@ -1,13 +1,13 @@
-import { HTMLAttributes, ReactNode } from 'react';
+import { HTMLAttributes, ReactNode } from "react";
 /**
  * Toast visual variant
  */
-export type ToastVariant = 'default' | 'glass';
+export type ToastVariant = "default" | "glass";
 /**
  * Toast state (e.g., loading indicator)
  */
-export type ToastState = 'default' | 'loading';
-export type ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+export type ToastState = "default" | "loading";
+export type ToastPosition = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
 export interface ToastAction {
     label: string;
     onClick: () => void;
@@ -42,15 +42,15 @@ export interface ToastData {
     id: string;
     variant?: ToastVariant;
     state?: ToastState;
-    title?: string;
-    subtitle?: string;
+    title?: ReactNode;
+    subtitle?: ReactNode;
     icon?: ReactNode;
     action?: ToastAction;
     duration?: number;
     dismissible?: boolean;
     onDismiss?: () => void;
 }
-export interface ToastProps extends HTMLAttributes<HTMLDivElement> {
+export interface ToastProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
     /** Toast data */
     toast: ToastData;
     /** Custom class name */
@@ -93,7 +93,7 @@ export interface ToastProviderProps {
 }
 export interface ToastContextValue {
     toasts: ToastData[];
-    addToast: (toast: Omit<ToastData, 'id'>) => string;
+    addToast: (toast: Omit<ToastData, "id">) => string;
     removeToast: (id: string) => void;
     removeAllToasts: () => void;
 }
@@ -121,7 +121,7 @@ export interface UseToastReturn {
     info: (title: string, options?: UseToastOptions & {
         subtitle?: string;
     }) => string;
-    loading: (title: string, options?: Omit<UseToastOptions, 'state'> & {
+    loading: (title: string, options?: Omit<UseToastOptions, "state"> & {
         subtitle?: string;
     }) => string;
     dismiss: (id: string) => void;

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

@@ -18,7 +18,6 @@ export * from "./Dropdown";
 export * from "./Kbd";
 export * from "./MenuItem";
 export * from "./Link";
-export * from "./Loader";
 export * from "./Modal";
 export * from "./ModalStack";
 export * from "./PageHeading";
@@ -48,3 +47,4 @@ export * from "./OfflineIndicator";
 export * from "./ContextMenu";
 export * from "./Pill";
 export * from "./SocialIcon";
+export * from "./FileTypeIcon";

package/dist/components/core/index.js

@@ -18,11 +18,13 @@ export { CalendarMini } from './Calendar/CalendarMini/CalendarMini.js';
 export { Card } from './Card/Card.js';
 export { CardStack } from './CardStack/CardStack.js';
 export { Carousel } from './Carousel/Carousel.js';
+export { CarouselBody } from './Carousel/CarouselBody.js';
 export { CommandPalette } from './CommandPalette/CommandPalette.js';
 export { commandPaletteTheme } from './CommandPalette/CommandPalette.theme.js';
 export { Separator } from './Separator/Separator.js';
 export { separatorTheme } from './Separator/Separator.theme.js';
 export { Drawer } from './Drawer/Drawer.js';
+export { DrawerBody } from './Drawer/DrawerBody.js';
 export { Dropdown } from './Dropdown/Dropdown.js';
 export { DropdownTrigger } from './Dropdown/DropdownTrigger.js';
 export { DropdownMenu } from './Dropdown/DropdownMenu.js';
@@ -34,13 +36,13 @@ export { Kbd } from './Kbd/Kbd.js';
 export { MenuItem } from './MenuItem/MenuItem.js';
 export { menuItemTheme } from './MenuItem/MenuItem.theme.js';
 export { Link } from './Link/Link.js';
-export { Loader } from './Loader/Loader.js';
 export { Modal } from './Modal/Modal.js';
 export { ModalStack } from './ModalStack/ModalStack.js';
 export { PageHeading } from './PageHeading/PageHeading.js';
 export { Pagination } from './Pagination/Pagination.js';
 export { Popover } from './Popover/Popover.js';
 export { PopoverContext, usePopoverContext } from './Popover/PopoverContext.js';
+export { PopoverBody } from './Popover/PopoverBody.js';
 export { Progress } from './Progress/Progress.js';
 export { Rating } from './Rating/Rating.js';
 export { ScrollArea } from './ScrollArea/ScrollArea.js';
@@ -52,7 +54,7 @@ export { SlidingNumber } from './SlidingNumber/SlidingNumber.js';
 export { Tabs } from './Tabs/Tabs.js';
 export { TabsList } from './Tabs/TabsList.js';
 export { TabsTrigger } from './Tabs/TabsTrigger.js';
-export { TabsContent } from './Tabs/TabsContent.js';
+export { TabsBody } from './Tabs/TabsBody.js';
 export { TabsContext, useTabsContext } from './Tabs/TabsContext.js';
 export { Tooltip } from './Tooltip/Tooltip.js';
 export { baseTooltipVariants, getTooltipVariants, tooltipSpringConfig } from './Tooltip/Tooltip.animations.js';
@@ -71,6 +73,7 @@ export { Message } from './Message/Message.js';
 export { messageTheme } from './Message/Message.theme.js';
 export { messageListTheme } from './Message/MessageList.theme.js';
 export { TypeWriter } from './Message/TypeWriter.js';
+export { MessageBody } from './Message/MessageBody.js';
 export { Empty } from './Empty/Empty.js';
 export { emptyTheme } from './Empty/Empty.theme.js';
 export { Masonry } from './Masonry/Masonry.js';
@@ -94,8 +97,9 @@ export { contextMenuTheme } from './ContextMenu/ContextMenu.theme.js';
 export { Pill } from './Pill/Pill.js';
 export { pillTheme } from './Pill/Pill.theme.js';
 export { SocialIcon } from './SocialIcon/SocialIcon.js';
+export { FileTypeIcon } from './FileTypeIcon/FileTypeIcon.js';
 export { AnimatePresence } from 'motion/react';
-export { CardContent } from './Card/CardContent.js';
+export { CardBody } from './Card/CardBody.js';
 export { CardFooter } from './Card/CardFooter.js';
 export { CardHeader } from './Card/CardHeader.js';
 export { CardSubtitle } from './Card/CardSubtitle.js';

package/dist/components/data-display/Feed/Feed.animations.d.ts

@@ -0,0 +1,40 @@
+export declare const EASE: readonly [0.04, 0.62, 0.23, 0.98];
+export declare const STAGGER_IN = 0.05;
+export declare const STAGGER_OUT = 0.04;
+export declare const STAGGER_BASE_DELAY = 0.15;
+export declare const collapseLayerExitTiming: {
+    height: {
+        duration: number;
+        delay: number;
+        ease: readonly [0.04, 0.62, 0.23, 0.98];
+    };
+    opacity: {
+        duration: number;
+        delay: number;
+    };
+};
+export declare const collapseLayerEnterTiming: {
+    height: {
+        duration: number;
+        delay: number;
+        ease: readonly [0.04, 0.62, 0.23, 0.98];
+    };
+    opacity: {
+        duration: number;
+        delay: number;
+    };
+};
+export declare const expandLayerEnterTiming: {
+    height: {
+        duration: number;
+        delay: number;
+        ease: readonly [0.04, 0.62, 0.23, 0.98];
+    };
+};
+export declare const expandLayerExitTiming: {
+    height: {
+        duration: number;
+        delay: number;
+        ease: readonly [0.04, 0.62, 0.23, 0.98];
+    };
+};

package/dist/components/data-display/Feed/Feed.animations.js

@@ -0,0 +1,26 @@
+// ---------------------------------------------------------------------------
+// Feed.Collapse — multi-stage animation timing
+// ---------------------------------------------------------------------------
+const EASE = [0.04, 0.62, 0.23, 0.98];
+// Stagger timing
+const STAGGER_IN = 0.05; // 50ms between each item entering
+const STAGGER_OUT = 0.04; // 40ms between each item exiting (slightly faster)
+const STAGGER_BASE_DELAY = 0.15; // items start shortly after height begins expanding
+// Collapsed layer (curve + label) — exit = collapsing away, enter = reappearing
+const collapseLayerExitTiming = {
+    height: { duration: 0.3, delay: 0, ease: EASE },
+    opacity: { duration: 0.2, delay: 0 },
+};
+const collapseLayerEnterTiming = {
+    height: { duration: 0.35, delay: 0.05, ease: EASE },
+    opacity: { duration: 0.25, delay: 0.15 },
+};
+// Expanded layer (children container) — enter = growing, exit = shrinking
+const expandLayerEnterTiming = {
+    height: { duration: 0.4, delay: 0, ease: EASE },
+};
+const expandLayerExitTiming = {
+    height: { duration: 0.35, delay: 0.05, ease: EASE },
+};
+
+export { EASE, STAGGER_BASE_DELAY, STAGGER_IN, STAGGER_OUT, collapseLayerEnterTiming, collapseLayerExitTiming, expandLayerEnterTiming, expandLayerExitTiming };

package/dist/components/data-display/Feed/Feed.d.ts

@@ -1,5 +1,9 @@
 import React from "react";
-import type { FeedProps, FeedItemProps } from "./Feed.types";
+import type { FeedProps, FeedItemProps, FeedCollapseProps, FeedTheme } from "./Feed.types";
+export declare const useFeedContext: () => {
+    theme: FeedTheme;
+};
 export declare const Feed: React.ForwardRefExoticComponent<FeedProps & React.RefAttributes<HTMLDivElement>> & {
     Item: React.ForwardRefExoticComponent<FeedItemProps & React.RefAttributes<HTMLLIElement>>;
+    Collapse: React.FC<FeedCollapseProps>;
 };

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

@@ -1,11 +1,10 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import React__default, { createContext, useMemo, useState, useContext } from 'react';
+import React__default, { createContext, useMemo, useState, useCallback, useContext } from 'react';
+import { useReducedMotion, motion } from 'motion/react';
+import { ChevronUpDownIcon } from '@heroicons/react/16/solid';
 import { cn } from '../../../utils/cn.js';
 import { feedTheme } from './Feed.theme.js';
-import { Avatar } from '../../core/Avatar/Avatar.js';
-import { Button } from '../../core/Button/Button.js';
-import { Textarea } from '../../forms/Textarea/Textarea.js';
-import '../../forms/Textarea/Textarea.theme.js';
+import { collapseLayerExitTiming, collapseLayerEnterTiming, EASE, expandLayerEnterTiming, expandLayerExitTiming, STAGGER_BASE_DELAY, STAGGER_IN, STAGGER_OUT } from './Feed.animations.js';
 
 // ---------------------------------------------------------------------------
 // Context
@@ -29,60 +28,96 @@ FeedRoot.displayName = "Feed";
 // ---------------------------------------------------------------------------
 // Feed.Item
 // ---------------------------------------------------------------------------
-const FeedItem = React__default.forwardRef(({ variant = "default", title, timestamp, icon, avatar, children, placeholder = "Add your comment...", submitLabel = "Comment", onSubmit, className, ...props }, ref) => {
+const FeedItemInner = ({ icon, indicatorClassName, timestamp, children }) => {
     const { theme } = useFeedContext();
-    // Always call useState (rules of hooks) — only used for comment-input
-    const [inputValue, setInputValue] = useState("");
-    // ------- Indicator rendering -------
-    const renderIndicator = () => {
-        var _a;
-        switch (variant) {
-            case "icon":
-                return jsx("div", { className: theme.iconIndicatorStyle, children: icon });
-            case "avatar":
-            case "comment-input":
-                return (jsx("div", { className: theme.avatarIndicatorStyle, children: jsx(Avatar, { src: avatar === null || avatar === void 0 ? void 0 : avatar.src, alt: (_a = avatar === null || avatar === void 0 ? void 0 : avatar.alt) !== null && _a !== void 0 ? _a : "", className: "size-10 ring-8 ring-[var(--color-background)]" }) }));
-            case "default":
-            default:
-                return (jsx("div", { className: theme.dotIndicatorStyle, children: jsx("span", { className: "size-1.5 rounded-full bg-[var(--color-text-muted)]" }) }));
-        }
-    };
-    // ------- Content rendering -------
-    const renderContent = () => {
-        switch (variant) {
-            case "default":
-            case "icon":
-                return (jsxs("div", { className: cn(theme.contentStyle, "py-1.5"), children: [jsxs("p", { className: theme.actionTextStyle, children: [title && jsxs("span", { className: theme.titleStyle, children: [title, " "] }), children] }), timestamp && jsx("p", { className: theme.timestampStyle, children: timestamp })] }));
-            case "avatar":
-                return (jsxs("div", { className: theme.contentStyle, children: [title && (jsx("p", { className: cn(theme.titleStyle, "text-base"), children: title })), jsx("p", { className: cn(theme.actionTextStyle, "mt-0.5"), children: children }), timestamp && jsx("p", { className: theme.timestampStyle, children: timestamp })] }));
-            case "comment-input": {
-                const handleSubmit = () => {
-                    const trimmed = inputValue.trim();
-                    if (trimmed && onSubmit) {
-                        onSubmit(trimmed);
-                        setInputValue("");
-                    }
-                };
-                const handleKeyDown = (e) => {
-                    if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
-                        e.preventDefault();
-                        handleSubmit();
-                    }
-                };
-                return (jsxs("div", { className: theme.commentInputWrapperStyle, children: [jsx(Textarea, { size: "sm", rows: 3, placeholder: placeholder, value: inputValue, onChange: (e) => setInputValue(e.target.value), onKeyDown: handleKeyDown }), jsx("div", { className: theme.commentInputFooterStyle, children: jsx(Button, { size: "sm", onClick: handleSubmit, children: submitLabel }) })] }));
-            }
-            default:
-                return null;
-        }
-    };
-    return (jsx("li", { ref: ref, className: className, ...props, children: jsxs("div", { className: theme.itemInnerStyle, children: [jsx("span", { "aria-hidden": "true", className: theme.connectorStyle }), jsxs("div", { className: theme.itemContentStyle, children: [renderIndicator(), renderContent()] })] }) }));
+    return (jsxs("div", { className: theme.itemInnerStyle, children: [jsx("span", { "aria-hidden": "true", className: theme.connectorStyle }), jsxs("div", { className: theme.itemContentStyle, children: [icon ? (jsx("div", { className: cn(theme.indicatorStyle, indicatorClassName), children: icon })) : (jsx("div", { className: cn(theme.dotIndicatorStyle, indicatorClassName), children: jsx("span", { className: "size-1.5 rounded-full bg-[var(--color-text-muted)]" }) })), jsxs("div", { className: theme.contentStyle, children: [children, timestamp && jsx("p", { className: theme.timestampStyle, children: timestamp })] })] })] }));
+};
+const FeedItem = React__default.forwardRef(({ icon, indicatorClassName, timestamp, children, className, _as = "li", ...props }, ref) => {
+    const inner = (jsx(FeedItemInner, { icon: icon, indicatorClassName: indicatorClassName, timestamp: timestamp, children: children }));
+    if (_as === "div") {
+        return (jsx("div", { className: className, ...props, children: inner }));
+    }
+    return (jsx("li", { ref: ref, className: className, ...props, children: inner }));
 });
 FeedItem.displayName = "Feed.Item";
 // ---------------------------------------------------------------------------
+// Feed.Collapse
+// ---------------------------------------------------------------------------
+/**
+ * SVG curved connector for the collapsed state.
+ * Draws a smooth parenthesis ) shape from (1,0) → (APEX,MID) → (1,H).
+ * Cubic beziers with vertical tangents at every junction so the curve
+ * connects seamlessly to the straight Feed connector above/below.
+ *
+ * Both CURVE_PATH and STRAIGHT_PATH use identical command structure
+ * (M, C, C) so framer-motion interpolates all numeric values smoothly.
+ */
+const COLLAPSED_HEIGHT = 72;
+const CURVE_APEX_X = 24;
+const STROKE_WIDTH = 2;
+const SVG_WIDTH = CURVE_APEX_X + STROKE_WIDTH;
+const MID_Y = COLLAPSED_HEIGHT / 2;
+const CURVE_PATH = `M 1 0 C 1 20, ${CURVE_APEX_X} 16, ${CURVE_APEX_X} ${MID_Y} C ${CURVE_APEX_X} 56, 1 52, 1 ${COLLAPSED_HEIGHT}`;
+const STRAIGHT_PATH = `M 1 0 C 1 12, 1 24, 1 ${MID_Y} C 1 48, 1 60, 1 ${COLLAPSED_HEIGHT}`;
+const FeedCollapse = ({ label = "Show {count} more", icon, defaultExpanded = false, expanded: controlledExpanded, onToggle, children, className, }) => {
+    const { theme } = useFeedContext();
+    const shouldReduceMotion = useReducedMotion();
+    const [internalExpanded, setInternalExpanded] = useState(defaultExpanded);
+    const isControlled = controlledExpanded !== undefined;
+    const expanded = isControlled ? controlledExpanded : internalExpanded;
+    const count = React__default.Children.count(children);
+    const resolvedLabel = label.replace("{count}", String(count));
+    const handleToggle = useCallback(() => {
+        const next = !expanded;
+        if (!isControlled)
+            setInternalExpanded(next);
+        onToggle === null || onToggle === void 0 ? void 0 : onToggle(next);
+    }, [expanded, isControlled, onToggle]);
+    // Clone children with _as="div" to avoid nested <li>
+    const clonedChildren = React__default.Children.map(children, (child) => {
+        if (React__default.isValidElement(child)) {
+            return React__default.cloneElement(child, {
+                _as: "div",
+            });
+        }
+        return child;
+    });
+    const collapseIcon = icon !== null && icon !== void 0 ? icon : (jsx(ChevronUpDownIcon, { className: "size-4 text-[var(--color-primary)]" }));
+    /* ---- Reduced motion: instant toggle, no staged animations ---- */
+    if (shouldReduceMotion) {
+        return (jsxs("li", { className: cn(theme.collapseStyle, className), children: [expanded && (jsx("span", { "aria-hidden": "true", className: "absolute left-5 -translate-x-1/2 top-0 h-full w-0.5 bg-[var(--color-border)]/60" })), !expanded ? (jsxs("div", { className: "relative", style: { height: COLLAPSED_HEIGHT }, children: [jsx("svg", { "aria-hidden": "true", className: theme.collapseSvgStyle, style: { left: "calc(1.25rem - 1px)" }, width: SVG_WIDTH, height: COLLAPSED_HEIGHT, fill: "none", children: jsx("path", { d: CURVE_PATH, stroke: "var(--color-border)", strokeOpacity: "0.6", strokeWidth: STROKE_WIDTH }) }), jsxs("button", { type: "button", className: "absolute top-1/2 -translate-y-1/2 flex items-center gap-2.5 cursor-pointer bg-transparent border-none p-0", style: {
+                                left: `calc(1.25rem - 1px + ${CURVE_APEX_X + 12}px)`,
+                            }, onClick: handleToggle, "aria-expanded": false, children: [jsx("div", { className: "flex size-5 shrink-0 items-center justify-center rounded-full bg-[var(--color-surface)] ", children: collapseIcon }), jsx("span", { className: theme.collapseButtonStyle, children: resolvedLabel })] })] })) : (jsxs("div", { children: [clonedChildren, jsx("div", { className: "relative pb-8", children: jsxs("div", { className: theme.itemContentStyle, children: [jsx("div", { className: "flex size-8 ml-1 shrink-0 items-center justify-center rounded-full bg-[var(--color-background-secondary)] ring-2 ring-[var(--color-background)]/50", children: collapseIcon }), jsx("div", { className: theme.contentStyle, children: jsx("button", { type: "button", className: theme.collapseButtonStyle, onClick: handleToggle, "aria-expanded": true, children: "Show less" }) })] }) })] }))] }));
+    }
+    /* ---- Full multi-stage animation ---- */
+    return (jsxs("li", { className: cn(theme.collapseStyle, className), children: [jsx(motion.span, { "aria-hidden": "true", className: "absolute left-5 -translate-x-1/2 top-0 h-full w-0.5 bg-[var(--color-border)]/60", animate: { opacity: expanded ? 1 : 0 }, transition: { duration: 0.2 } }), jsx(motion.div, { animate: {
+                    height: expanded ? 0 : COLLAPSED_HEIGHT,
+                    opacity: expanded ? 0 : 1,
+                }, transition: expanded ? collapseLayerExitTiming : collapseLayerEnterTiming, style: { overflow: "hidden", position: "relative" }, children: jsxs("div", { className: "relative", style: { height: COLLAPSED_HEIGHT }, children: [jsx("svg", { "aria-hidden": "true", className: theme.collapseSvgStyle, style: { left: "calc(1.25rem - 1px)" }, width: SVG_WIDTH, height: COLLAPSED_HEIGHT, fill: "none", children: jsx(motion.path, { animate: { d: expanded ? STRAIGHT_PATH : CURVE_PATH }, transition: { duration: 0.3, ease: EASE }, stroke: "var(--color-border)", strokeOpacity: "0.6", strokeWidth: STROKE_WIDTH }) }), jsxs(motion.button, { type: "button", className: "absolute top-1/2 -translate-y-1/2 flex items-center gap-2.5 cursor-pointer bg-transparent border-none p-0", style: {
+                                left: `calc(1.25rem - 1px + ${CURVE_APEX_X + 12}px)`,
+                            }, animate: { opacity: expanded ? 0 : 1 }, transition: { duration: 0.2, delay: expanded ? 0 : 0.2 }, onClick: handleToggle, "aria-expanded": false, children: [jsx("div", { className: "flex size-5 shrink-0 items-center justify-center rounded-full bg-[var(--color-surface)] border border-[var(--color-border)] shadow-sm", children: collapseIcon }), jsx("span", { className: theme.collapseButtonStyle, children: resolvedLabel })] })] }) }), jsxs(motion.div, { animate: { height: expanded ? "auto" : 0 }, transition: expanded ? expandLayerEnterTiming : expandLayerExitTiming, style: { overflow: "hidden" }, children: [React__default.Children.map(clonedChildren, (child, i) => (jsx(motion.div, { animate: {
+                            opacity: expanded ? 1 : 0,
+                            y: expanded ? 0 : 8,
+                        }, transition: {
+                            duration: 0.25,
+                            delay: expanded
+                                ? STAGGER_BASE_DELAY + i * STAGGER_IN
+                                : (count - i) * STAGGER_OUT,
+                        }, children: child }, i))), jsx(motion.div, { animate: {
+                            opacity: expanded ? 1 : 0,
+                            y: expanded ? 0 : 8,
+                        }, transition: {
+                            duration: 0.25,
+                            delay: expanded ? STAGGER_BASE_DELAY + count * STAGGER_IN : 0,
+                        }, children: jsx("div", { className: "relative pb-8", children: jsxs("div", { className: theme.itemContentStyle, children: [jsx("div", { className: "flex size-8 ml-1 shrink-0 items-center justify-center rounded-full bg-[var(--color-background-secondary)] ring-2 ring-[var(--color-background)]/50", children: collapseIcon }), jsx("div", { className: theme.contentStyle, children: jsx("button", { type: "button", className: theme.collapseButtonStyle, onClick: handleToggle, "aria-expanded": true, children: "Show less" }) })] }) }) })] })] }));
+};
+FeedCollapse.displayName = "Feed.Collapse";
+// ---------------------------------------------------------------------------
 // Compound export
 // ---------------------------------------------------------------------------
 const Feed = Object.assign(FeedRoot, {
     Item: FeedItem,
+    Collapse: FeedCollapse,
 });
 
-export { Feed };
+export { Feed, useFeedContext };

package/dist/components/data-display/Feed/Feed.theme.js

@@ -1,22 +1,20 @@
 const feedTheme = {
     // Structural
     baseStyle: "flow-root",
-    listStyle: "-mb-8 [&>li:last-child_.feed-connector]:hidden",
+    listStyle: "-mb-8 [&>li:last-child>div>.feed-connector]:hidden",
     itemInnerStyle: "relative pb-8",
-    itemContentStyle: "relative flex items-start space-x-3",
-    connectorStyle: "feed-connector absolute top-5 left-[18px] h-full w-0.5 bg-[var(--color-border)]",
+    itemContentStyle: "relative flex items-start space-x-4",
+    connectorStyle: "feed-connector absolute top-5 left-5 -translate-x-1/2 h-full w-0.5 bg-[var(--color-border)]",
     // Indicators
-    dotIndicatorStyle: "relative flex size-9 items-center justify-center",
-    iconIndicatorStyle: "flex size-9 items-center justify-center rounded-full bg-[var(--color-background-tertiary)] ring-8 ring-[var(--color-background)]",
-    avatarIndicatorStyle: "relative flex-shrink-0",
+    indicatorStyle: "relative flex size-8 ml-1 shrink-0 items-center justify-center bg-[var(--color-background-secondary)] rounded-full ring-2 ring-[var(--color-background)]/50",
+    dotIndicatorStyle: "relative flex size-10 items-center justify-center",
     // Content
-    contentStyle: "min-w-0 flex-1",
-    titleStyle: "font-medium text-[var(--color-text-primary)]",
-    actionTextStyle: "text-base text-[var(--color-text-secondary)]",
-    timestampStyle: "mt-1 text-sm text-[var(--color-text-muted)]/80 whitespace-nowrap font-medium",
-    // Comment input
-    commentInputWrapperStyle: "min-w-0 flex-1 space-y-2",
-    commentInputFooterStyle: "flex justify-end",
+    contentStyle: "min-w-0 flex-1 pt-1",
+    timestampStyle: "mt-1 text-xs text-[var(--color-text-muted)]/80 whitespace-nowrap",
+    // Collapse
+    collapseStyle: "relative",
+    collapseButtonStyle: "flex items-center gap-1.5 text-sm font-medium text-[var(--color-primary)] hover:text-[var(--color-primary-700)] transition-colors cursor-pointer bg-transparent border-none p-0",
+    collapseSvgStyle: "absolute top-0",
 };
 
 export { feedTheme };

package/dist/components/data-display/Feed/Feed.types.d.ts

@@ -1,24 +1,17 @@
 import { ReactNode } from "react";
-export type FeedItemVariant = "default" | "icon" | "avatar" | "comment-input";
-export interface FeedAvatarConfig {
-    src?: string;
-    alt: string;
-}
 export interface FeedTheme {
     baseStyle: string;
     listStyle: string;
     itemInnerStyle: string;
     itemContentStyle: string;
     connectorStyle: string;
+    indicatorStyle: string;
     dotIndicatorStyle: string;
-    iconIndicatorStyle: string;
-    avatarIndicatorStyle: string;
     contentStyle: string;
-    titleStyle: string;
-    actionTextStyle: string;
     timestampStyle: string;
-    commentInputWrapperStyle: string;
-    commentInputFooterStyle: string;
+    collapseStyle: string;
+    collapseButtonStyle: string;
+    collapseSvgStyle: string;
 }
 export interface FeedThemeOverrides {
     baseStyle?: string;
@@ -26,39 +19,47 @@ export interface FeedThemeOverrides {
     itemInnerStyle?: string;
     itemContentStyle?: string;
     connectorStyle?: string;
+    indicatorStyle?: string;
     dotIndicatorStyle?: string;
-    iconIndicatorStyle?: string;
-    avatarIndicatorStyle?: string;
     contentStyle?: string;
-    titleStyle?: string;
-    actionTextStyle?: string;
     timestampStyle?: string;
-    commentInputWrapperStyle?: string;
-    commentInputFooterStyle?: string;
+    collapseStyle?: string;
+    collapseButtonStyle?: string;
+    collapseSvgStyle?: string;
 }
 export interface FeedProps extends React.HTMLAttributes<HTMLDivElement> {
     children: ReactNode;
     theme?: FeedThemeOverrides;
     className?: string;
 }
-export interface FeedItemProps extends Omit<React.HTMLAttributes<HTMLLIElement>, "onSubmit"> {
-    /** Visual variant of the feed item */
-    variant?: FeedItemVariant;
-    /** Name/label of the entity that performed the action */
-    title?: string;
-    /** Timestamp label (e.g. "6d ago") */
-    timestamp?: string;
-    /** Icon element for the "icon" variant indicator */
+/** @internal Injected by Feed.Collapse via cloneElement */
+export interface FeedItemInternalProps {
+    _as?: "li" | "div";
+}
+export interface FeedItemProps extends React.HTMLAttributes<HTMLLIElement>, FeedItemInternalProps {
+    /** Icon or avatar element rendered as the indicator */
     icon?: ReactNode;
-    /** Avatar configuration for avatar/comment-input variants */
-    avatar?: FeedAvatarConfig;
-    /** Body content (action description, comment text, etc.) */
+    /** Custom className for the indicator wrapper (icon background circle) */
+    indicatorClassName?: string;
+    /** Timestamp label (e.g. "6d ago") */
+    timestamp?: ReactNode;
+    /** Body content */
     children?: ReactNode;
-    /** Placeholder text for the comment-input textarea */
-    placeholder?: string;
-    /** Label for the comment-input submit button */
-    submitLabel?: string;
-    /** Callback when the comment-input form is submitted */
-    onSubmit?: (text: string) => void;
+    className?: string;
+}
+export interface FeedCollapseProps {
+    /** Template string with `{count}` placeholder for the number of hidden items */
+    label?: string;
+    /** Icon rendered next to the label */
+    icon?: ReactNode;
+    /** Uncontrolled initial expanded state */
+    defaultExpanded?: boolean;
+    /** Controlled expanded state */
+    expanded?: boolean;
+    /** Callback fired when the toggle is clicked */
+    onToggle?: (expanded: boolean) => void;
+    /** Feed.Item children to hide/reveal */
+    children: ReactNode;
+    /** Override className on the wrapper <li> */
     className?: string;
 }

package/dist/components/data-display/Feed/index.d.ts

@@ -1,2 +1,2 @@
 export { Feed } from "./Feed";
-export type { FeedProps, FeedItemProps, FeedItemVariant, FeedAvatarConfig, FeedTheme, FeedThemeOverrides, } from "./Feed.types";
+export type { FeedProps, FeedItemProps, FeedCollapseProps, FeedItemInternalProps, FeedTheme, FeedThemeOverrides, } from "./Feed.types";

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

@@ -11,10 +11,10 @@ import { taskBarVariants } from './GanttChart.animations.js';
 import { useGanttDrag } from './hooks/useGanttDrag.js';
 import { getDaysBetween, addDays, toDate } from '../../../utils/dateUtils.js';
 
-const GanttTaskBar = React__default.memo(({ task, group, top, }) => {
+const GanttTaskBar = React__default.memo(({ task, group, top }) => {
     var _a;
     const { theme, dayWidth, rangeStart, rowHeight, readonly, readonlyDates, readonlyProgress, onTaskUpdate, onTaskClick, tasks, } = useGanttContext();
-    const { hoveredTaskId, setHoveredTaskId, focusedTaskId, setActiveDrag, } = useGanttInteraction();
+    const { hoveredTaskId, setHoveredTaskId, focusedTaskId, setActiveDrag } = useGanttInteraction();
     const [tooltipPos, setTooltipPos] = useState(null);
     const offset = getDayOffset(task.startDate, rangeStart);
     const span = getDaysBetween(task.startDate, task.endDate);
@@ -66,7 +66,9 @@ const GanttTaskBar = React__default.memo(({ task, group, top, }) => {
         disabled: !canDragDates,
         onDragEnd: handleResizeLeftEnd,
         onDragStateChange: useCallback((isDragging, deltaX) => {
-            setActiveDrag(isDragging ? { taskId: task.id, mode: "resize-left", deltaX } : null);
+            setActiveDrag(isDragging
+                ? { taskId: task.id, mode: "resize-left", deltaX }
+                : null);
         }, [setActiveDrag, task.id]),
     });
     // ----- Drag: Resize right -----
@@ -87,7 +89,9 @@ const GanttTaskBar = React__default.memo(({ task, group, top, }) => {
         disabled: !canDragDates,
         onDragEnd: handleResizeRightEnd,
         onDragStateChange: useCallback((isDragging, deltaX) => {
-            setActiveDrag(isDragging ? { taskId: task.id, mode: "resize-right", deltaX } : null);
+            setActiveDrag(isDragging
+                ? { taskId: task.id, mode: "resize-right", deltaX }
+                : null);
         }, [setActiveDrag, task.id]),
     });
     // ----- Drag: Progress -----
@@ -151,9 +155,7 @@ const GanttTaskBar = React__default.memo(({ task, group, top, }) => {
         const hoveredTask = tasks.find((t) => t.id === hoveredTaskId);
         return (_c = (_b = hoveredTask === null || hoveredTask === void 0 ? void 0 : hoveredTask.dependencies) === null || _b === void 0 ? void 0 : _b.includes(task.id)) !== null && _c !== void 0 ? _c : false;
     }, [hoveredTaskId, task.id, task.dependencies, tasks]);
-    const isFaded = hoveredTaskId !== null &&
-        hoveredTaskId !== task.id &&
-        !isHighlighted;
+    const isFaded = hoveredTaskId !== null && hoveredTaskId !== task.id && !isHighlighted;
     const isFocused = focusedTaskId === task.id;
     // ----- Click handler -----
     const handleClick = (e) => {
@@ -165,7 +167,7 @@ const GanttTaskBar = React__default.memo(({ task, group, top, }) => {
     const tooltipContent = (jsxs("div", { className: "text-sm space-y-2 min-w-[180px]", children: [jsx("div", { className: "font-semibold text-base", children: task.title }), jsxs("div", { className: "flex items-center gap-1.5 opacity-70", children: [jsx("span", { className: "inline-block size-2 rounded-full shrink-0", style: { backgroundColor: group.color } }), group.title] }), jsxs("div", { className: "space-y-0.5", children: [jsxs("div", { children: [formatDateShort(task.startDate), " \u2014 ", formatDateShort(task.endDate)] }), jsx("div", { className: "opacity-70", children: formatDuration(task.startDate, task.endDate) })] }), jsxs("div", { children: [jsxs("div", { className: "flex justify-between mb-1", children: [jsx("span", { children: "Progress" }), jsxs("span", { className: "font-medium", children: [task.progress, "%"] })] }), jsx("div", { className: "h-1.5 rounded-full bg-white/20 overflow-hidden", children: jsx("div", { className: "h-full rounded-full", style: {
                                 width: `${task.progress}%`,
                                 backgroundColor: barColor,
-                            } }) })] }), task.assignee && (jsxs("div", { className: "flex items-center gap-1.5 pt-0.5", children: [jsx(Avatar, { src: task.assignee.avatar, alt: task.assignee.name, size: "xs" }), jsx("span", { children: task.assignee.name })] })), isBehindSchedule && (jsxs("div", { className: "text-[var(--color-warning)] text-[10px]", children: ["Behind schedule (expected ", expectedProgress, "%)"] }))] }));
+                            } }) })] }), task.assignee && (jsxs("div", { className: "flex items-center gap-1.5 pt-0.5", children: [jsx(Avatar, { src: task.assignee.avatar, name: task.assignee.name, size: "xs" }), jsx("span", { children: task.assignee.name })] })), isBehindSchedule && (jsxs("div", { className: "text-[var(--color-warning)] text-[10px]", children: ["Behind schedule (expected ", expectedProgress, "%)"] }))] }));
     return (jsxs(Fragment, { children: [jsx(GanttTaskContextMenu, { task: task, children: jsxs("div", { className: "absolute", style: {
                         left: visualLeft,
                         top: top + (rowHeight - barHeight) / 2,
@@ -195,7 +197,7 @@ const GanttTaskBar = React__default.memo(({ task, group, top, }) => {
                                     } }), isBehindSchedule && (jsx("div", { className: "absolute top-0 bottom-0 w-px", style: {
                                         left: `${expectedProgress}%`,
                                         borderLeft: "2px dashed rgba(255,255,255,0.5)",
-                                    } })), task.completed && (jsx("div", { className: "absolute top-1/2 left-2 right-2 h-px bg-white/60", style: { transform: "translateY(-0.5px)" } })), canDragDates && (jsx("div", { className: "absolute left-0 top-0 bottom-0 w-2 cursor-ew-resize z-20 rounded-l-full opacity-0 group-hover:opacity-100 transition-opacity hover:bg-black/10", onPointerDown: resizeLeftDrag.handlePointerDown })), canDragDates && (jsx("div", { className: "absolute right-0 top-0 bottom-0 w-2 cursor-ew-resize z-20 rounded-r-full opacity-0 group-hover:opacity-100 transition-opacity hover:bg-black/10", onPointerDown: resizeRightDrag.handlePointerDown })), canDragProgress && !isNarrow && (jsx("div", { className: "absolute top-0 bottom-0 w-3 cursor-ew-resize z-20 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity", style: { left: `calc(${displayProgress}% - 6px)` }, onPointerDown: progressDrag.handlePointerDown, children: jsx("div", { className: "w-0.5 h-3 rounded-full bg-white/80 shadow" }) })), !isNarrow && (jsxs("div", { className: "relative flex items-center gap-1.5 px-1 z-10 min-w-0 pointer-events-none", children: [task.assignee && (jsx(Avatar, { src: task.assignee.avatar, alt: task.assignee.name, size: "xs" })), jsx("span", { className: "truncate text-sm text-[var(--color-text-inverse)] font-medium", children: task.title })] }))] }), isNarrow && (jsx("span", { className: "absolute text-sm font-medium whitespace-nowrap pointer-events-none", style: {
+                                    } })), task.completed && (jsx("div", { className: "absolute top-1/2 left-2 right-2 h-px bg-white/60", style: { transform: "translateY(-0.5px)" } })), canDragDates && (jsx("div", { className: "absolute left-0 top-0 bottom-0 w-2 cursor-ew-resize z-20 rounded-l-full opacity-0 group-hover:opacity-100 transition-opacity hover:bg-black/10", onPointerDown: resizeLeftDrag.handlePointerDown })), canDragDates && (jsx("div", { className: "absolute right-0 top-0 bottom-0 w-2 cursor-ew-resize z-20 rounded-r-full opacity-0 group-hover:opacity-100 transition-opacity hover:bg-black/10", onPointerDown: resizeRightDrag.handlePointerDown })), canDragProgress && !isNarrow && (jsx("div", { className: "absolute top-0 bottom-0 w-3 cursor-ew-resize z-20 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity", style: { left: `calc(${displayProgress}% - 6px)` }, onPointerDown: progressDrag.handlePointerDown, children: jsx("div", { className: "w-0.5 h-3 rounded-full bg-white/80 shadow" }) })), !isNarrow && (jsxs("div", { className: "relative flex items-center gap-1.5 px-1 z-10 min-w-0 pointer-events-none", children: [task.assignee && (jsx(Avatar, { src: task.assignee.avatar, name: task.assignee.name, size: "xs" })), jsx("span", { className: "truncate text-sm text-[var(--color-text-inverse)] font-medium", children: task.title })] }))] }), isNarrow && (jsx("span", { className: "absolute text-sm font-medium whitespace-nowrap pointer-events-none", style: {
                                 left: visualWidth + 6,
                                 top: barHeight / 2,
                                 transform: "translateY(-50%)",

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

@@ -11,7 +11,7 @@ const GanttTaskContextMenu = ({ task, children, }) => {
     if (readonly || (!onTaskUpdate && !onTaskDuplicate && !onTaskDelete)) {
         return jsx(Fragment, { children: children });
     }
-    return (jsxs(ContextMenu, { children: [jsx(ContextMenu.Trigger, { children: children }), jsxs(ContextMenu.Content, { children: [onTaskUpdate && (jsxs(ContextMenu.Item, { onSelect: () => onTaskUpdate(task.id, { completed: !task.completed, progress: task.completed ? 0 : 100 }), children: [jsx(CheckCircleIcon, { className: "size-4 mr-2" }), task.completed ? "Mark as incomplete" : "Mark as done"] })), onTaskUpdate && (jsxs(ContextMenu.Sub, { children: [jsx(ContextMenu.SubTrigger, { children: "Progress" }), jsx(ContextMenu.SubContent, { children: PROGRESS_STEPS.map((val) => (jsxs(ContextMenu.Item, { onSelect: () => onTaskUpdate(task.id, { progress: val, completed: val === 100 }), children: [val, "%"] }, val))) })] })), (onTaskDuplicate || onTaskDelete) && jsx(ContextMenu.Separator, {}), onTaskDuplicate && (jsxs(ContextMenu.Item, { onSelect: () => onTaskDuplicate(task.id), children: [jsx(DocumentDuplicateIcon, { className: "size-4 mr-2" }), "Duplicate"] })), onTaskDelete && (jsxs(ContextMenu.Item, { onSelect: () => onTaskDelete(task.id), className: "text-[var(--color-danger)]", children: [jsx(TrashIcon, { className: "size-4 mr-2" }), "Delete"] }))] })] }));
+    return (jsxs(ContextMenu, { children: [jsx(ContextMenu.Trigger, { children: children }), jsxs(ContextMenu.Body, { children: [onTaskUpdate && (jsxs(ContextMenu.Item, { onSelect: () => onTaskUpdate(task.id, { completed: !task.completed, progress: task.completed ? 0 : 100 }), children: [jsx(CheckCircleIcon, { className: "size-4 mr-2" }), task.completed ? "Mark as incomplete" : "Mark as done"] })), onTaskUpdate && (jsxs(ContextMenu.Sub, { children: [jsx(ContextMenu.SubTrigger, { children: "Progress" }), jsx(ContextMenu.SubBody, { children: PROGRESS_STEPS.map((val) => (jsxs(ContextMenu.Item, { onSelect: () => onTaskUpdate(task.id, { progress: val, completed: val === 100 }), children: [val, "%"] }, val))) })] })), (onTaskDuplicate || onTaskDelete) && jsx(ContextMenu.Separator, {}), onTaskDuplicate && (jsxs(ContextMenu.Item, { onSelect: () => onTaskDuplicate(task.id), children: [jsx(DocumentDuplicateIcon, { className: "size-4 mr-2" }), "Duplicate"] })), onTaskDelete && (jsxs(ContextMenu.Item, { onSelect: () => onTaskDelete(task.id), className: "text-[var(--color-danger)]", children: [jsx(TrashIcon, { className: "size-4 mr-2" }), "Delete"] }))] })] }));
 };
 
 export { GanttTaskContextMenu };

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

@@ -32,7 +32,7 @@ const KPI = React__default.forwardRef(({ value, label, trend, trendLabel, progre
         return Math.round((Math.min(Math.max(progress, 0), 100) / 100) * barCount);
     }, [progress, barCount]);
     const barSize = kpiTheme.barSizes[size];
-    return (jsxs("div", { ref: ref, className: cn(theme.baseStyle, className), ...props, children: [jsxs("div", { className: "flex items-start justify-between", children: [jsxs("div", { className: "flex items-baseline gap-2", children: [jsx("span", { className: cn(theme.valueSizes[size]), children: value }), label && (jsxs("span", { className: cn(theme.labelStyle, theme.labelSizes[size]), children: [icon && (jsx("span", { className: "inline-flex items-center mr-1", children: icon })), label] }))] }), formattedTrend && trendDirection && (jsxs("span", { className: cn("inline-flex items-center gap-0.5 font-medium", theme.trendSizes[size], trendDirection === "up" && theme.trendPositive, trendDirection === "down" && theme.trendNegative, trendDirection === "neutral" && theme.trendNeutral), children: [formattedTrend, trendDirection === "up" && jsx(ArrowUpRightIcon, { className: "size-4" }), trendDirection === "down" && jsx(ArrowDownRightIcon, { className: "size-4" })] }))] }), progress !== undefined && (jsx("div", { className: cn("flex items-end", barSize.gap), role: "img", "aria-label": `Progress: ${progress}%`, children: Array.from({ length: barCount }, (_, i) => {
+    return (jsxs("div", { ref: ref, className: cn(theme.baseStyle, className), ...props, children: [jsxs("div", { className: "flex items-start justify-between", children: [jsxs("div", { className: "flex items-baseline gap-2", children: [jsx("span", { className: cn(theme.valueSizes[size]), children: value }), label && (typeof label === 'string' ? (jsxs("span", { className: cn(theme.labelStyle, theme.labelSizes[size]), children: [icon && (jsx("span", { className: "inline-flex items-center mr-1", children: icon })), label] })) : label)] }), formattedTrend && trendDirection && (typeof formattedTrend === 'string' ? (jsxs("span", { className: cn("inline-flex items-center gap-0.5 font-medium", theme.trendSizes[size], trendDirection === "up" && theme.trendPositive, trendDirection === "down" && theme.trendNegative, trendDirection === "neutral" && theme.trendNeutral), children: [formattedTrend, trendDirection === "up" && jsx(ArrowUpRightIcon, { className: "size-4" }), trendDirection === "down" && jsx(ArrowDownRightIcon, { className: "size-4" })] })) : formattedTrend)] }), progress !== undefined && (jsx("div", { className: cn("flex items-end", barSize.gap), role: "img", "aria-label": `Progress: ${progress}%`, children: Array.from({ length: barCount }, (_, i) => {
                     const isFilled = i < filledBars;
                     const fadeDistance = filledBars - i;
                     const fillOpacity = isFilled && fadeDistance <= 3
@@ -43,7 +43,7 @@ const KPI = React__default.forwardRef(({ value, label, trend, trendLabel, progre
                                 ease: "easeOut",
                                 delay: i * 0.03,
                             } })) }, i));
-                }) })), subtitle && (jsx("span", { className: cn(theme.subtitleStyle, size === "sm" ? "text-sm" : "text-base"), children: subtitle }))] }));
+                }) })), subtitle && (typeof subtitle === 'string' ? (jsx("span", { className: cn(theme.subtitleStyle, size === "sm" ? "text-sm" : "text-base"), children: subtitle })) : subtitle)] }));
 });
 KPI.displayName = "KPI";