@flikk/ui 1.0.0-beta.2 → 1.0.0-beta.21

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

@@ -1,5 +1,5 @@
 export { Toast } from './Toast';
 export { ToastProvider, useToastContext } from './ToastProvider';
 export { useToast } from './useToast';
-export type { ToastProps, ToastData, ToastProviderProps, ToastTheme, ToastThemeOverrides, ToastVariant, UseToastReturn, UseToastOptions, } from './Toast.types';
+export type { ToastProps, ToastData, ToastProviderProps, ToastTheme, ToastVariant, UseToastReturn, UseToastOptions, } from './Toast.types';
 export { toastTheme } from './Toast.theme';

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

@@ -14,7 +14,7 @@ const useToast = () => {
             title,
             variant: options === null || options === void 0 ? void 0 : options.variant,
             state: (options === null || options === void 0 ? void 0 : options.state) || 'default',
-            description: options === null || options === void 0 ? void 0 : options.description,
+            subtitle: options === null || options === void 0 ? void 0 : options.subtitle,
             duration: options === null || options === void 0 ? void 0 : options.duration,
             dismissible: options === null || options === void 0 ? void 0 : options.dismissible,
             action: options === null || options === void 0 ? void 0 : options.action,
@@ -26,7 +26,7 @@ const useToast = () => {
             title,
             variant: options === null || options === void 0 ? void 0 : options.variant,
             state: (options === null || options === void 0 ? void 0 : options.state) || 'default',
-            description: options === null || options === void 0 ? void 0 : options.description,
+            subtitle: options === null || options === void 0 ? void 0 : options.subtitle,
             duration: options === null || options === void 0 ? void 0 : options.duration,
             dismissible: options === null || options === void 0 ? void 0 : options.dismissible,
             action: options === null || options === void 0 ? void 0 : options.action,
@@ -38,7 +38,7 @@ const useToast = () => {
             title,
             variant: options === null || options === void 0 ? void 0 : options.variant,
             state: (options === null || options === void 0 ? void 0 : options.state) || 'default',
-            description: options === null || options === void 0 ? void 0 : options.description,
+            subtitle: options === null || options === void 0 ? void 0 : options.subtitle,
             duration: options === null || options === void 0 ? void 0 : options.duration,
             dismissible: options === null || options === void 0 ? void 0 : options.dismissible,
             action: options === null || options === void 0 ? void 0 : options.action,
@@ -50,7 +50,7 @@ const useToast = () => {
             title,
             variant: options === null || options === void 0 ? void 0 : options.variant,
             state: (options === null || options === void 0 ? void 0 : options.state) || 'default',
-            description: options === null || options === void 0 ? void 0 : options.description,
+            subtitle: options === null || options === void 0 ? void 0 : options.subtitle,
             duration: options === null || options === void 0 ? void 0 : options.duration,
             dismissible: options === null || options === void 0 ? void 0 : options.dismissible,
             action: options === null || options === void 0 ? void 0 : options.action,
@@ -62,7 +62,7 @@ const useToast = () => {
             title,
             variant: options === null || options === void 0 ? void 0 : options.variant,
             state: (options === null || options === void 0 ? void 0 : options.state) || 'default',
-            description: options === null || options === void 0 ? void 0 : options.description,
+            subtitle: options === null || options === void 0 ? void 0 : options.subtitle,
             duration: options === null || options === void 0 ? void 0 : options.duration,
             dismissible: options === null || options === void 0 ? void 0 : options.dismissible,
             action: options === null || options === void 0 ? void 0 : options.action,
@@ -75,7 +75,7 @@ const useToast = () => {
             title,
             variant: options === null || options === void 0 ? void 0 : options.variant,
             state: 'loading',
-            description: options === null || options === void 0 ? void 0 : options.description,
+            subtitle: options === null || options === void 0 ? void 0 : options.subtitle,
             duration: (_a = options === null || options === void 0 ? void 0 : options.duration) !== null && _a !== void 0 ? _a : 0, // Loading toasts don't auto-dismiss by default
             dismissible: (_b = options === null || options === void 0 ? void 0 : options.dismissible) !== null && _b !== void 0 ? _b : false, // Loading toasts are not dismissible by default
             action: options === null || options === void 0 ? void 0 : options.action,

package/dist/components/core/Tooltip/Tooltip.js

@@ -55,7 +55,7 @@ const Tooltip = ({ content, children, placement = "top", delay = 300, disabled =
     const { position, cssVariables, contentRef: portalContentRef} = useSelectPortal({
         triggerRef,
         isOpen: isVisible,
-        placement: placement, // TooltipPlacement matches SelectPlacement subset
+        placement: placement,
         offset,
         autoWidth: true,
     });

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

@@ -1,7 +1,7 @@
 const tooltipTheme = {
     // Base style for the tooltip - using fixed positioning for portal rendering
-    baseStyle: "fixed z-[99] rounded-[var(--tooltip-radius)] py-1 px-2 text-xs text-[var(--color-text-primary)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2 pointer-events-none bg-white/60 backdrop-blur-md outline outline-[var(--color-border)] shadow-lg border-t-[1px] border-white " +
-        "dark:bg-neutral-800/80 dark:outline-[var(--color-border)]/80 dark:border-[var(--color-border)]",
+    baseStyle: "fixed z-[99] rounded-[var(--tooltip-radius)] py-1 px-2 text-sm text-[var(--color-text-primary)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2 pointer-events-none bg-white/90 backdrop-blur-md outline outline-[var(--color-border)] shadow-lg " +
+        "dark:bg-[var(--color-neutral-800)]/90 dark:outline-[var(--color-border)]/80 dark:border-[var(--color-border)]",
 };
 
 export { tooltipTheme };

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

@@ -1,7 +1,7 @@
 const treeTheme = {
     baseStyle: 'flex flex-col w-full',
     nodeStyle: 'flex items-center py-1 pr-1 rounded-[calc(var(--radius-base)*0.75)] hover:bg-[var(--color-background-secondary)] cursor-pointer transition-colors select-none gap-2',
-    labelStyle: 'flex-1 text-base text-[var(--color-text-primary)] truncate',
+    labelStyle: 'flex-1 text-lg text-[var(--color-text-primary)] truncate',
     iconStyle: 'flex-shrink-0 text-[var(--color-text-muted)]',
     expandIconStyle: 'flex-shrink-0 mr-1 text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] transition-colors cursor-pointer size-4 flex items-center justify-center',
     indentSize: '1rem',

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

@@ -16,24 +16,20 @@ export * from "./Separator";
 export * from "./Drawer";
 export * from "./Dropdown";
 export * from "./Kbd";
-export * from "./KPI";
 export * from "./MenuItem";
 export * from "./Link";
-export * from "./Loader";
-export * from "./Metric";
 export * from "./Modal";
 export * from "./ModalStack";
+export * from "./PageHeading";
 export * from "./Pagination";
 export * from "./Popover";
 export * from "./Progress";
-export * from "./ProgressiveBlur";
 export * from "./Rating";
 export * from "./ScrollArea";
 export * from "./Segmented";
 export * from "./Skeleton";
 export * from "./SlidingNumber";
 export * from "./Tabs";
-export * from "./Timeline";
 export * from "./Tooltip";
 export * from "./Tree";
 export * from "./Tag";
@@ -42,14 +38,13 @@ export * from "./Toast";
 export * from "./Spinner";
 export * from "./Message";
 export * from "./Empty";
-export * from "./Feed";
 export * from "./Masonry";
-export * from "./Table";
 export * from "./DragDrop";
 export * from "./Sortable";
 export * from "./NavItem";
 export * from "./Sidebar";
 export * from "./OfflineIndicator";
 export * from "./ContextMenu";
-export * from "./DescriptionList";
 export * from "./Pill";
+export * from "./SocialIcon";
+export * from "./FileTypeIcon";

package/dist/components/core/index.js

@@ -7,6 +7,7 @@ export { Badge } from './Badge/Badge.js';
 export { Breadcrumbs } from './Breadcrumbs/Breadcrumbs.js';
 export { breadcrumbsTheme, breadcrumbsVariants, defaultSeparator } from './Breadcrumbs/Breadcrumbs.theme.js';
 export { Button } from './Button/Button.js';
+export { getRippleAnimation, getRippleColorClass, useRipple } from './Button/Button.ripple.js';
 export { ButtonGroup } from './ButtonGroup/ButtonGroup.js';
 export { ButtonGroupSeparator } from './ButtonGroup/ButtonGroupSeparator.js';
 export { ButtonGroupText } from './ButtonGroup/ButtonGroupText.js';
@@ -17,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';
@@ -30,20 +33,17 @@ export { DropdownSection } from './Dropdown/DropdownSection.js';
 export { DropdownSeparator } from './Dropdown/DropdownSeparator.js';
 export { dropdownTheme } from './Dropdown/Dropdown.theme.js';
 export { Kbd } from './Kbd/Kbd.js';
-export { KPI } from './KPI/KPI.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 { Metric } from './Metric/Metric.js';
-export { metricTheme } from './Metric/Metric.theme.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 { ProgressiveBlur } from './ProgressiveBlur/ProgressiveBlur.js';
 export { Rating } from './Rating/Rating.js';
 export { ScrollArea } from './ScrollArea/ScrollArea.js';
 export { scrollAreaTheme } from './ScrollArea/ScrollArea.theme.js';
@@ -54,9 +54,8 @@ 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 { Timeline } from './Timeline/Timeline.js';
 export { Tooltip } from './Tooltip/Tooltip.js';
 export { baseTooltipVariants, getTooltipVariants, tooltipSpringConfig } from './Tooltip/Tooltip.animations.js';
 export { Tree } from './Tree/Tree.js';
@@ -72,13 +71,22 @@ export { toastTheme } from './Toast/Toast.theme.js';
 export { Spinner } from './Spinner/Spinner.js';
 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 { MessageStatusIndicator } from './Message/MessageStatusIndicator.js';
+export { MessageSenderName } from './Message/MessageSenderName.js';
+export { MessageFile } from './Message/MessageFile.js';
+export { MessageImage } from './Message/MessageImage.js';
+export { MessageAudio } from './Message/MessageAudio.js';
+export { MessageLink } from './Message/MessageLink.js';
+export { MessageReply } from './Message/MessageReply.js';
+export { MessageReactions } from './Message/MessageReactions.js';
+export { MessageDateDivider } from './Message/MessageDateDivider.js';
 export { Empty } from './Empty/Empty.js';
 export { emptyTheme } from './Empty/Empty.theme.js';
-export { Feed } from './Feed/Feed.js';
 export { Masonry } from './Masonry/Masonry.js';
 export { getMasonryTheme, masonryTheme } from './Masonry/Masonry.theme.js';
-export { Table } from './Table/index.js';
 export { DragDropProvider, Draggable, Droppable } from './DragDrop/DragDrop.js';
 export { Sortable, SortableItem } from './Sortable/Sortable.js';
 export { NavItem } from './NavItem/NavItem.js';
@@ -90,27 +98,25 @@ export { SidebarNav } from './Sidebar/SidebarNav.js';
 export { SidebarNavGroup } from './Sidebar/SidebarNavGroup.js';
 export { SidebarSubmenu } from './Sidebar/SidebarSubmenu.js';
 export { SidebarToggle } from './Sidebar/SidebarToggle.js';
+export { SidebarMobileTrigger } from './Sidebar/SidebarMobileTrigger.js';
+export { SidebarUserProfile } from './Sidebar/SidebarUserProfile.js';
 export { useSidebarContext } from './Sidebar/SidebarContext.js';
 export { OfflineIndicator } from './OfflineIndicator/OfflineIndicator.js';
 export { offlineIndicatorTheme } from './OfflineIndicator/OfflineIndicator.theme.js';
 export { ContextMenu } from './ContextMenu/ContextMenu.js';
 export { contextMenuTheme } from './ContextMenu/ContextMenu.theme.js';
-export { DescriptionList } from './DescriptionList/DescriptionList.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 { CardDescription } from './Card/CardDescription.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';
 export { CardTitle } from './Card/CardTitle.js';
-export { TableActions } from './Table/TableActions.js';
-export { TableActionsMenu } from './Table/TableActionsMenu.js';
-export { TableFilter } from './Table/TableFilter.js';
-export { TablePagination } from './Table/TablePagination.js';
-export { filterData, getDefaultOperator, getOperatorsForFilterType, inferFilterType, isBetweenOperator, isUnaryOperator, operatorLabels } from './Table/Table.filterUtils.js';
-export { useTableColumns } from './Table/hooks/useTableColumns.js';
-export { useTableExpansion } from './Table/hooks/useTableExpansion.js';
-export { useTableFilter } from './Table/hooks/useTableFilter.js';
-export { useTablePagination } from './Table/hooks/useTablePagination.js';
-export { useTableSelection } from './Table/hooks/useTableSelection.js';
+export { PageHeadingActions } from './PageHeading/PageHeadingActions.js';
+export { PageHeadingBackButton } from './PageHeading/PageHeadingBackButton.js';
+export { PageHeadingIcon } from './PageHeading/PageHeadingIcon.js';
+export { PageHeadingSubtitle } from './PageHeading/PageHeadingSubtitle.js';
+export { PageHeadingTitle } from './PageHeading/PageHeadingTitle.js';

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

@@ -0,0 +1,8 @@
+const descriptionListTheme = {
+    baseStyle: "divide-y divide-[var(--color-border)] min-w-0",
+    itemStyle: "px-4 py-3",
+    termStyle: "text-base/6 font-medium text-[var(--color-text-primary)]",
+    detailStyle: "mt-1 text-base/6 text-[var(--color-text-secondary)]",
+};
+
+export { descriptionListTheme };

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/{core → 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

@@ -0,0 +1,123 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+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 { collapseLayerExitTiming, collapseLayerEnterTiming, EASE, expandLayerEnterTiming, expandLayerExitTiming, STAGGER_BASE_DELAY, STAGGER_IN, STAGGER_OUT } from './Feed.animations.js';
+
+// ---------------------------------------------------------------------------
+// Context
+// ---------------------------------------------------------------------------
+const FeedContext = createContext(undefined);
+const useFeedContext = () => {
+    const ctx = useContext(FeedContext);
+    if (!ctx)
+        return { theme: feedTheme };
+    return ctx;
+};
+// ---------------------------------------------------------------------------
+// Feed (root)
+// ---------------------------------------------------------------------------
+const FeedRoot = React__default.forwardRef(({ children, 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 }) }) }));
+});
+FeedRoot.displayName = "Feed";
+// ---------------------------------------------------------------------------
+// Feed.Item
+// ---------------------------------------------------------------------------
+const FeedItemInner = ({ icon, indicatorClassName, timestamp, children }) => {
+    const { theme } = useFeedContext();
+    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, useFeedContext };

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

@@ -0,0 +1,20 @@
+const feedTheme = {
+    // Structural
+    baseStyle: "flow-root",
+    listStyle: "-mb-8 [&>li:last-child>div>.feed-connector]:hidden",
+    itemInnerStyle: "relative pb-8",
+    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
+    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 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

@@ -0,0 +1,65 @@
+import { ReactNode } from "react";
+export interface FeedTheme {
+    baseStyle: string;
+    listStyle: string;
+    itemInnerStyle: string;
+    itemContentStyle: string;
+    connectorStyle: string;
+    indicatorStyle: string;
+    dotIndicatorStyle: string;
+    contentStyle: string;
+    timestampStyle: string;
+    collapseStyle: string;
+    collapseButtonStyle: string;
+    collapseSvgStyle: string;
+}
+export interface FeedThemeOverrides {
+    baseStyle?: string;
+    listStyle?: string;
+    itemInnerStyle?: string;
+    itemContentStyle?: string;
+    connectorStyle?: string;
+    indicatorStyle?: string;
+    dotIndicatorStyle?: string;
+    contentStyle?: string;
+    timestampStyle?: string;
+    collapseStyle?: string;
+    collapseButtonStyle?: string;
+    collapseSvgStyle?: string;
+}
+export interface FeedProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    theme?: FeedThemeOverrides;
+    className?: string;
+}
+/** @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;
+    /** Body content */
+    children?: ReactNode;
+    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

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

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

@@ -0,0 +1,4 @@
+import type { Variants } from "motion/react";
+export declare const collapseVariants: Variants;
+export declare const chevronVariants: Variants;
+export declare const taskBarVariants: Variants;

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

@@ -0,0 +1,21 @@
+const chevronVariants = {
+    open: { rotate: 90, transition: { duration: 0.15 } },
+    collapsed: { rotate: 0, transition: { duration: 0.15 } },
+};
+const taskBarVariants = {
+    hidden: {
+        scaleX: 0,
+        opacity: 0,
+        transition: { duration: 0 },
+    },
+    visible: {
+        scaleX: 1,
+        opacity: 1,
+        transition: {
+            duration: 0.4,
+            ease: [0.4, 0, 0.2, 1],
+        },
+    },
+};
+
+export { chevronVariants, taskBarVariants };

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

@@ -0,0 +1,8 @@
+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;
+declare namespace GanttChartComponent {
+    var displayName: string;
+}
+export { GanttChartComponent as GanttChart };