@flikk/ui 1.0.0-beta.3 → 1.0.0-beta.31

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

@@ -1,34 +1,73 @@
 import React from "react";
 export type DescriptionListVariant = "horizontal" | "vertical";
+/**
+ * Edge padding behavior for list items (mirrors Table's `padding`).
+ * - `default`: items get horizontal side padding.
+ * - `flush`: items have zero side padding so labels/values align flush with the
+ *   container edges (e.g. inside a padded Card).
+ */
+export type DescriptionListPadding = "default" | "flush";
 export interface DescriptionListTheme {
     /** Base styles for the <dl> container */
     baseStyle: string;
     /** Styles for each item wrapper */
     itemStyle: string;
-    /** Styles for the term (<dt>) */
-    termStyle: string;
-    /** Styles for the detail (<dd>) */
-    detailStyle: string;
+    /** Edge-padding mode classes applied to each item */
+    paddingStyles: Record<DescriptionListPadding, string>;
+    /** Styles for the label (<dt>) */
+    labelStyle: string;
+    /** Styles for the value (<dd>) */
+    valueStyle: string;
 }
 export interface DescriptionListThemeOverrides {
     baseStyle?: string;
     itemStyle?: string;
-    termStyle?: string;
-    detailStyle?: string;
+    paddingStyles?: Partial<Record<DescriptionListPadding, string>>;
+    labelStyle?: string;
+    valueStyle?: string;
 }
 export interface DescriptionListContextValue {
     variant: DescriptionListVariant;
+    padding: DescriptionListPadding;
     theme: DescriptionListTheme;
 }
 export interface DescriptionListProps extends React.HTMLAttributes<HTMLDListElement> {
     /** Layout variant: "horizontal" (default) or "vertical" */
     variant?: DescriptionListVariant;
+    /**
+     * Edge padding behavior. `flush` (default) removes the item side padding so
+     * labels/values align flush with the container edges (e.g. inside a padded
+     * Card); `default` adds horizontal padding for standalone use.
+     */
+    padding?: DescriptionListPadding;
+    /**
+     * Data-driven items. When provided, the list renders from this array and any
+     * `children` are ignored (dev-warns). Omit it to use the compound API.
+     * Fully serializable — ideal for generative UI.
+     */
+    items?: DescriptionListItemData[];
     /** Custom theme overrides */
     theme?: DescriptionListThemeOverrides;
+    /** `DescriptionList.Item` children (compound API). Optional when `items` is used. */
+    children?: React.ReactNode;
+}
+/**
+ * A single key/value entry for the data-driven (`items`) API. Maps internally
+ * to `DescriptionList.Item`.
+ */
+export interface DescriptionListItemData {
+    /** The label (rendered as the <dt> term) */
+    label: React.ReactNode;
+    /** The value (rendered as the <dd> description) */
+    value: React.ReactNode;
+    /** Optional className forwarded to the item wrapper */
+    className?: string;
+    /** Stable React key (falls back to the array index) */
+    key?: string | number;
 }
 export interface DescriptionListItemProps extends React.HTMLAttributes<HTMLDivElement> {
-    /** The term / label */
-    term: React.ReactNode;
-    /** The detail / value */
-    detail: React.ReactNode;
+    /** The label (rendered as the <dt> term) */
+    label: React.ReactNode;
+    /** The value (rendered as the <dd> description) */
+    value: React.ReactNode;
 }

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

@@ -1,2 +1,2 @@
 export { DescriptionList } from "./DescriptionList";
-export type { DescriptionListVariant, DescriptionListProps, DescriptionListItemProps, DescriptionListThemeOverrides, } from "./DescriptionList.types";
+export type { DescriptionListVariant, DescriptionListPadding, DescriptionListProps, DescriptionListItemProps, DescriptionListItemData, DescriptionListThemeOverrides, } from "./DescriptionList.types";

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,11 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import React__default, { createContext, useMemo, useState, useContext } from 'react';
+"use client";
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import React__default, { createContext, useMemo, useState, useCallback, useContext } from 'react';
+import { useReducedMotion, motion } from 'motion/react';
+import { CaretUpDown } from '@phosphor-icons/react';
 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
@@ -20,69 +20,128 @@ const useFeedContext = () => {
 // ---------------------------------------------------------------------------
 // Feed (root)
 // ---------------------------------------------------------------------------
-const FeedRoot = React__default.forwardRef(({ children, className, theme: themeOverrides, ...props }, ref) => {
+/** Render one data-driven item to the compound `Feed.Item` primitive. */
+const renderItemData = (item, index) => {
+    var _a;
+    return (jsx(FeedItem, { icon: item.icon, timestamp: item.timestamp, indicatorClassName: item.indicatorClassName, className: item.className, children: item.content }, (_a = item.key) !== null && _a !== void 0 ? _a : index));
+};
+const FeedRoot = React__default.forwardRef(({ children, items, collapseAfter, className, theme: themeOverrides, ...props }, ref) => {
     const theme = useMemo(() => ({ ...feedTheme, ...themeOverrides }), [themeOverrides]);
     const contextValue = useMemo(() => ({ theme }), [theme]);
-    return (jsx(FeedContext.Provider, { value: contextValue, children: jsx("div", { ref: ref, className: cn(theme.baseStyle, className), ...props, children: jsx("ul", { role: "list", className: theme.listStyle, children: children }) }) }));
+    if (process.env.NODE_ENV !== "production" &&
+        items &&
+        React__default.Children.count(children) > 0) {
+        console.warn("[Feed]: both `items` and children were provided — `items` takes precedence and children are ignored.");
+    }
+    // Data-driven path maps to the same compound primitives as composition.
+    // With `collapseAfter`, overflow items are tucked into a Feed.Collapse.
+    let content = children;
+    if (items) {
+        if (collapseAfter != null && items.length > collapseAfter) {
+            const visible = items.slice(0, collapseAfter);
+            const hidden = items.slice(collapseAfter);
+            content = (jsxs(Fragment, { children: [visible.map(renderItemData), jsx(FeedCollapse, { children: hidden.map(renderItemData) })] }));
+        }
+        else {
+            content = items.map(renderItemData);
+        }
+    }
+    return (jsx(FeedContext.Provider, { value: contextValue, children: jsx("div", { ref: ref, className: cn(theme.baseStyle, className), ...props, children: jsx("ul", { role: "list", className: theme.listStyle, children: content }) }) }));
 });
 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-sm"), 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(CaretUpDown, { 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-surface)] 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-surface)] 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-surface)] 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-sm text-[var(--color-text-secondary)]",
-    timestampStyle: "mt-1 text-xs 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-xs 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,78 @@ 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;
+    /** `Feed.Item` / `Feed.Collapse` children (compound API). Optional when `items` is used. */
+    children?: ReactNode;
+    /**
+     * Data-driven items. When provided, the feed renders from this array and any
+     * `children` are ignored (dev-warns). Omit it to use the compound API.
+     * Fully serializable (resolve icon NAMES upstream) — ideal for generative UI.
+     */
+    items?: FeedItemData[];
+    /**
+     * When set with `items`, items beyond this count are wrapped in a
+     * `Feed.Collapse` (shown behind a "Show N more" toggle). Ignored for the
+     * compound API.
+     */
+    collapseAfter?: number;
     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;
+/**
+ * A single feed entry for the data-driven (`items`) API. Maps internally to
+ * `Feed.Item`.
+ */
+export interface FeedItemData {
+    /** Icon or avatar element rendered as the indicator */
+    icon?: ReactNode;
     /** Timestamp label (e.g. "6d ago") */
-    timestamp?: string;
-    /** Icon element for the "icon" variant indicator */
+    timestamp?: ReactNode;
+    /** Body content (maps to the Feed.Item children) */
+    content?: ReactNode;
+    /** Custom className for the indicator wrapper (icon background circle) */
+    indicatorClassName?: string;
+    /** Optional className forwarded to the item wrapper */
+    className?: string;
+    /** Stable React key (falls back to the array index) */
+    key?: string | number;
+}
+/** @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, FeedItemData, FeedCollapseProps, FeedItemInternalProps, FeedTheme, FeedThemeOverrides, } from "./Feed.types";

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

@@ -1,7 +1,6 @@
-import type { GanttChartProps, GanttContextValue, GanttInteractionValue } from "./GanttChart.types";
-export declare function useGanttContext(): GanttContextValue;
-export declare function useGanttInteraction(): GanttInteractionValue;
-declare function GanttChartComponent({ data, groups, columns, startDate, endDate, todayMarker, scrollToToday, readonly: readonlyProp, readonlyDates: readonlyDatesProp, readonlyProgress: readonlyProgressProp, zoom: zoomProp, defaultZoom, onZoomChange, collapsedGroups: collapsedProp, defaultCollapsedGroups, onCollapsedGroupsChange, hideCompleted: hideCompletedProp, defaultHideCompleted, onHideCompletedChange, tablePanelWidth: tablePanelWidthProp, defaultTablePanelWidth, onTablePanelWidthChange, onTaskUpdate, onTaskDelete, onTaskDuplicate, onTaskAdd, onGroupAdd, onTaskClick, holidays: holidaysProp, gridLines, className, theme: themeOverrides, rowHeight, }: GanttChartProps): import("react/jsx-runtime").JSX.Element;
+import type { GanttChartProps } from "./GanttChart.types";
+export { useGanttContext, useGanttInteraction } from "./GanttChartContext";
+declare function GanttChartComponent({ data, groups, columns, startDate, endDate, todayMarker, scrollToToday, toolbar, showTable, showDependencies, showTaskLabels, emptyState, readonly: readonlyProp, readonlyDates: readonlyDatesProp, readonlyProgress: readonlyProgressProp, zoom: zoomProp, defaultZoom, onZoomChange, collapsedGroups: collapsedProp, defaultCollapsedGroups, onCollapsedGroupsChange, hideCompleted: hideCompletedProp, defaultHideCompleted, onHideCompletedChange, tablePanelWidth: tablePanelWidthProp, defaultTablePanelWidth, onTablePanelWidthChange, onTaskUpdate, onTaskDelete, onTaskDuplicate, onTaskAdd, onGroupAdd, onTaskClick, holidays: holidaysProp, gridLines, className, theme: themeOverrides, rowHeight, }: GanttChartProps): import("react/jsx-runtime").JSX.Element;
 declare namespace GanttChartComponent {
     var displayName: string;
 }