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

package/dist/components/core/Message/MessageAvatar.js

@@ -6,11 +6,11 @@ import { useMessageContext } from './MessageContext.js';
 const MessageAvatar = React__default.forwardRef(({ src, name, fallback, className, ...props }, ref) => {
     const { variant } = useMessageContext();
     // Don't render avatar for system messages
-    if (variant === 'system') {
+    if (variant === "system") {
         return null;
     }
-    return (jsx("div", { ref: ref, className: className, ...props, children: jsx(Avatar, { src: src, alt: name, fallback: fallback, size: "xs" }) }));
+    return (jsx("div", { ref: ref, className: className, ...props, children: jsx(Avatar, { src: src, name: name, fallback: fallback, size: "xs" }) }));
 });
-MessageAvatar.displayName = 'Message.Avatar';
+MessageAvatar.displayName = "Message.Avatar";
 
 export { MessageAvatar };

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

@@ -55,14 +55,16 @@ const PopoverBody = React__default.forwardRef(({ children, className, animation
     const shouldReduceMotion = useReducedMotion();
     const localRef = useRef(null);
     // Use the same positioning hook as Select/Tooltip (now supports all 12 placements)
-    const { position, cssVariables, contentRef: portalContentRef } = useSelectPortal({
+    const { position, cssVariables, contentRef: portalContentRef, } = useSelectPortal({
         triggerRef,
         isOpen: isOpen || false,
         placement: placement,
         offset: offset || 8,
         autoWidth: true,
-        onClose: () => { if (!preventClose)
-            onOpenChange(false); },
+        onClose: () => {
+            if (!preventClose)
+                onOpenChange(false);
+        },
         stickyTracking: true,
     });
     // Click outside detection (active when no backdrop — with backdrop, Overlay handles it)
@@ -70,7 +72,8 @@ const PopoverBody = React__default.forwardRef(({ children, className, animation
         var _a;
         if (hasBackdrop)
             return; // Overlay handles click-outside via backdrop
-        if (e.target === triggerRef.current || ((_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
+        if (e.target === triggerRef.current ||
+            ((_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
             return;
         }
         if (closeOnClickOutside && !preventClose) {
@@ -103,8 +106,11 @@ const PopoverBody = React__default.forwardRef(({ children, className, animation
         if (contentRef) {
             contentRef.current = el;
         }
-        if (portalContentRef && typeof portalContentRef === 'object' && 'current' in portalContentRef) {
-            portalContentRef.current = el;
+        if (portalContentRef &&
+            typeof portalContentRef === "object" &&
+            "current" in portalContentRef) {
+            portalContentRef.current =
+                el;
         }
     }, [ref, contentRef, portalContentRef]);
     const isDarkMode = useDarkMode();
@@ -127,11 +133,16 @@ const PopoverBody = React__default.forwardRef(({ children, className, animation
                 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
-                ? { overlay: overlayBackdropAnimations, content: overlayContentAnimations }
+                ? {
+                    overlay: overlayBackdropAnimations,
+                    content: overlayContentAnimations,
+                }
                 : undefined, children: jsx("div", { id: contentId, "data-state": isOpen ? "open" : "closed", "data-placement": placement, "data-trigger": triggerType, ...domProps, children: children }) }));
     }
     // Without backdrop: manual portal + positioning + escape + click-outside
-    const popoverContent = (jsx(AnimatePresence, { children: isOpen && (jsx(motion.div, { ref: handleRef, id: contentId, className: cn("fixed z-50", contentClasses), style: contentPositionStyle, role: "dialog", "aria-modal": "true", variants: shouldReduceMotion || !animation ? {} : popoverContentVariants, initial: shouldReduceMotion || !animation ? undefined : "hidden", animate: shouldReduceMotion || !animation ? undefined : "visible", exit: shouldReduceMotion || !animation ? undefined : "exit", transition: shouldReduceMotion || !animation ? { duration: 0 } : popoverTransitions.content, "data-state": isOpen ? "open" : "closed", "data-placement": placement, "data-trigger": triggerType, onClick: (e) => e.stopPropagation(), ...domProps, children: children })) }));
+    const popoverContent = (jsx(AnimatePresence, { children: isOpen && (jsx(motion.div, { ref: handleRef, id: contentId, className: cn("fixed z-50", contentClasses), style: contentPositionStyle, role: "dialog", "aria-modal": "true", variants: shouldReduceMotion || !animation ? {} : popoverContentVariants, initial: shouldReduceMotion || !animation ? undefined : "hidden", animate: shouldReduceMotion || !animation ? undefined : "visible", exit: shouldReduceMotion || !animation ? undefined : "exit", transition: shouldReduceMotion || !animation
+                ? { duration: 0 }
+                : popoverTransitions.content, "data-state": isOpen ? "open" : "closed", "data-placement": placement, "data-trigger": triggerType, onClick: (e) => e.stopPropagation(), ...domProps, children: children })) }));
     if (portal && isClient) {
         return createPortal(jsx("div", { className: isDarkMode ? "dark" : undefined, children: popoverContent }), document.body);
     }

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

@@ -7,7 +7,7 @@ import { TagProps } from "./Tag.types";
  * @example
  * ```tsx
  * <Tag onRemove={() => handleRemove('tag1')}>JavaScript</Tag>
- * <Tag avatar={{ src: "/avatar.jpg", alt: "Alice" }} onRemove={() => {}}>Alice</Tag>
+ * <Tag avatar={{ src: "/avatar.jpg", name: "Alice" }} onRemove={() => {}}>Alice</Tag>
  * <Tag startContent={<CodeIcon className="size-4" />} onRemove={() => {}}>React</Tag>
  * ```
  */

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

@@ -14,7 +14,7 @@ import { tagVariants, tagLayoutTransition } from './Tag.animations.js';
  * @example
  * ```tsx
  * <Tag onRemove={() => handleRemove('tag1')}>JavaScript</Tag>
- * <Tag avatar={{ src: "/avatar.jpg", alt: "Alice" }} onRemove={() => {}}>Alice</Tag>
+ * <Tag avatar={{ src: "/avatar.jpg", name: "Alice" }} onRemove={() => {}}>Alice</Tag>
  * <Tag startContent={<CodeIcon className="size-4" />} onRemove={() => {}}>React</Tag>
  * ```
  */
@@ -47,7 +47,7 @@ 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, alt: avatar.alt, fallback: avatar.fallback, initialsCount: avatar.initialsCount, className: cn(theme.avatarSizes[size], "rounded-full border-0") }));
+            return (jsx(Avatar, { src: avatar.src, name: avatar.name, fallback: avatar.fallback, initialsCount: avatar.initialsCount, className: cn(theme.avatarSizes[size], "rounded-full border-0") }));
         }
         if (startContent) {
             return (jsx("span", { className: cn("inline-flex items-center", theme.startContentSizes[size]), children: startContent }));

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

@@ -18,7 +18,7 @@ export interface TagProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "o
      */
     avatar?: {
         src?: string;
-        alt: string;
+        name: string;
         fallback?: ReactNode;
         initialsCount?: number;
     };

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

@@ -36,7 +36,6 @@ 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';
@@ -98,6 +97,7 @@ 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 { CardBody } from './Card/CardBody.js';
 export { CardFooter } from './Card/CardFooter.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,68 +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 && (typeof title === 'string'
-                                    ? jsxs("span", { className: theme.titleStyle, children: [title, " "] })
-                                    : title), children] }), timestamp && (typeof timestamp === 'string'
-                            ? jsx("p", { className: theme.timestampStyle, children: timestamp })
-                            : timestamp)] }));
-            case "avatar":
-                return (jsxs("div", { className: theme.contentStyle, children: [title && (typeof title === 'string'
-                            ? jsx("p", { className: cn(theme.titleStyle, "text-base"), children: title })
-                            : title), jsx("p", { className: cn(theme.actionTextStyle, "mt-0.5"), children: children }), timestamp && (typeof timestamp === 'string'
-                            ? jsx("p", { className: theme.timestampStyle, children: timestamp })
-                            : 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 Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+export interface FeedProps extends React.HTMLAttributes<HTMLDivElement> {
     children: ReactNode;
     theme?: FeedThemeOverrides;
     className?: string;
 }
-export interface FeedItemProps extends Omit<React.HTMLAttributes<HTMLLIElement>, "onSubmit" | "title"> {
-    /** Visual variant of the feed item */
-    variant?: FeedItemVariant;
-    /** Name/label of the entity that performed the action */
-    title?: ReactNode;
+/** @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;
+    /** Custom className for the indicator wrapper (icon background circle) */
+    indicatorClassName?: string;
     /** Timestamp label (e.g. "6d ago") */
     timestamp?: ReactNode;
-    /** Icon element for the "icon" variant indicator */
-    icon?: ReactNode;
-    /** Avatar configuration for avatar/comment-input variants */
-    avatar?: FeedAvatarConfig;
-    /** Body content (action description, comment text, etc.) */
+    /** 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%)",