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

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

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { ReactNode } from "react";
 /**
  * Tag component props
  */
@@ -11,6 +11,23 @@ export interface TagProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "o
     removable?: boolean;
     /** Callback when the remove button is clicked */
     onRemove?: () => void;
+    /**
+     * Avatar configuration — renders a sized avatar to the left of the label.
+     * The component controls avatar sizing and styling internally.
+     * Takes precedence over startContent.
+     */
+    avatar?: {
+        src?: string;
+        alt: string;
+        fallback?: ReactNode;
+        initialsCount?: number;
+    };
+    /**
+     * Generic content to display at the start (before the label).
+     * Use for icons, emojis, or any custom ReactNode.
+     * Ignored when avatar is provided.
+     */
+    startContent?: ReactNode;
     /** Whether the tag is disabled */
     disabled?: boolean;
     /** Additional class name for the tag */
@@ -24,6 +41,10 @@ export interface TagTheme {
     baseStyle: string;
     /** Size-specific styles */
     sizes: Record<TagSize, string>;
+    /** Avatar sizes for each tag size */
+    avatarSizes: Record<TagSize, string>;
+    /** Start content sizes for each tag size */
+    startContentSizes: Record<TagSize, string>;
     /** Disabled state style */
     disabledStyle: string;
     /** Remove button style */
@@ -34,6 +55,8 @@ export interface TagTheme {
 export interface TagThemeOverrides {
     baseStyle?: string;
     sizes?: Partial<Record<TagSize, string>>;
+    avatarSizes?: Partial<Record<TagSize, string>>;
+    startContentSizes?: Partial<Record<TagSize, string>>;
     disabledStyle?: string;
     removeButtonStyle?: string;
     removeIconSizes?: Partial<Record<TagSize, string>>;

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

@@ -20,8 +20,8 @@ onDismiss, index = 0, isExpanded = false, totalToasts = 1, onMouseEnter, onMouse
         }
     }, [ref]);
     const shouldReduceMotion = useReducedMotion();
-    const { id, variant = 'default', state = 'default', title, description, icon, action, duration = 5000, dismissible = true, } = toast;
-    const isTextOnly = !description && !action;
+    const { id, variant = 'default', state = 'default', title, subtitle, icon, action, duration = 5000, dismissible = true, } = toast;
+    const isTextOnly = !subtitle && !action;
     const defaultIcon = state === 'loading'
         ? (jsx(motion.div, { animate: { rotate: 360 }, transition: { repeat: Infinity, duration: 1, ease: "linear" }, children: jsx(ArrowPathIcon, { className: "w-5 h-5" }) }))
         : jsx(InformationCircleIcon, { className: "w-5 h-5" });
@@ -41,7 +41,7 @@ onDismiss, index = 0, isExpanded = false, totalToasts = 1, onMouseEnter, onMouse
             const height = internalRef.current.offsetHeight;
             onHeightChange(id, height);
         }
-    }, [id, onHeightChange, title, description]);
+    }, [id, onHeightChange, title, subtitle]);
     const handleDismiss = () => {
         onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss(id);
     };
@@ -73,7 +73,7 @@ onDismiss, index = 0, isExpanded = false, totalToasts = 1, onMouseEnter, onMouse
     }, [stackingStyle.zIndex, index]);
     const toastNode = (jsxs(motion.div, { ref: setRefs, layout: true, initial: shouldReduceMotion ? false : toastAnimations.initial, animate: animateValue, exit: shouldReduceMotion
             ? { ...toastAnimations.exit, transition: { duration: 0 } }
-            : toastAnimations.exit, transition: shouldReduceMotion ? { duration: 0 } : toastAnimations.transition, className: cn(toastTheme.baseStyle, isTextOnly && 'items-center', ((_a = toastTheme.variants) === null || _a === void 0 ? void 0 : _a[variant]) || "", 'pointer-events-auto', index > 0 && !isExpanded && 'absolute top-0 left-0', className), style: styleValue, role: "alert", "aria-live": "polite", children: [jsx("div", { className: isTextOnly ? toastTheme.iconCenteredStyle : toastTheme.iconStyle, children: resolvedIcon }), jsxs("div", { className: "flex-1 min-w-0", children: [title && (jsx("div", { className: isTextOnly ? toastTheme.textOnlyStyle : toastTheme.titleStyle, children: title })), description && (jsx("div", { className: toastTheme.descriptionStyle, children: description })), action && (jsx("div", { className: "mt-2", children: jsx("button", { type: "button", className: toastTheme.actionStyle, onClick: handleActionClick, children: action.label }) }))] }), dismissible && (jsx("button", { type: "button", className: isTextOnly ? toastTheme.closeButtonCenteredStyle : toastTheme.closeButtonStyle, onClick: handleDismiss, "aria-label": "Dismiss notification", children: jsx(XMarkIcon, { className: "w-4 h-4" }) }))] }));
+            : toastAnimations.exit, transition: shouldReduceMotion ? { duration: 0 } : toastAnimations.transition, className: cn(toastTheme.baseStyle, isTextOnly && 'items-center', ((_a = toastTheme.variants) === null || _a === void 0 ? void 0 : _a[variant]) || "", 'pointer-events-auto', index > 0 && !isExpanded && 'absolute top-0 left-0', className), style: styleValue, role: "alert", "aria-live": "polite", children: [jsx("div", { className: isTextOnly ? toastTheme.iconCenteredStyle : toastTheme.iconStyle, children: resolvedIcon }), jsxs("div", { className: "flex-1 min-w-0", children: [title && (jsx("div", { className: isTextOnly ? toastTheme.textOnlyStyle : toastTheme.titleStyle, children: title })), subtitle && (jsx("div", { className: toastTheme.subtitleStyle, children: subtitle })), action && (jsx("div", { className: "mt-2", children: jsx("button", { type: "button", className: toastTheme.actionStyle, onClick: handleActionClick, children: action.label }) }))] }), dismissible && (jsx("button", { type: "button", className: isTextOnly ? toastTheme.closeButtonCenteredStyle : toastTheme.closeButtonStyle, onClick: handleDismiss, "aria-label": "Dismiss notification", children: jsx(XMarkIcon, { className: "w-4 h-4" }) }))] }));
     if (darkMode) {
         return jsx("div", { className: "dark", children: toastNode });
     }

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

@@ -8,10 +8,10 @@ const toastTheme = {
     },
     iconStyle: "flex-shrink-0 size-5 mt-0.5",
     iconCenteredStyle: "flex-shrink-0 size-5",
-    titleStyle: "font-semibold text-sm",
-    textOnlyStyle: "text-sm",
-    descriptionStyle: "text-sm mt-0.5 opacity-60",
-    actionStyle: "text-xs font-medium px-2 py-1 rounded border bg-white/80 hover:bg-white transition-colors cursor-pointer " +
+    titleStyle: "font-semibold text-base",
+    textOnlyStyle: "text-base",
+    subtitleStyle: "text-base mt-0.5 opacity-60",
+    actionStyle: "text-sm font-medium px-2 py-1 rounded border bg-white/80 hover:bg-white transition-colors cursor-pointer " +
         "dark:bg-white/10 dark:border-white/20 dark:hover:bg-white/20 dark:text-white",
     closeButtonStyle: "absolute top-2 right-2 flex-shrink-0 w-4 h-4 opacity-70 hover:opacity-100 transition-opacity cursor-pointer",
     closeButtonCenteredStyle: "flex-shrink-0 w-4 h-4 opacity-70 hover:opacity-100 transition-opacity cursor-pointer",

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

@@ -19,7 +19,7 @@ export interface ToastTheme {
     iconCenteredStyle: string;
     titleStyle: string;
     textOnlyStyle: string;
-    descriptionStyle: string;
+    subtitleStyle: string;
     actionStyle: string;
     closeButtonStyle: string;
     closeButtonCenteredStyle: string;
@@ -32,7 +32,7 @@ export interface ToastThemeOverrides {
     iconCenteredStyle?: string;
     titleStyle?: string;
     textOnlyStyle?: string;
-    descriptionStyle?: string;
+    subtitleStyle?: string;
     actionStyle?: string;
     closeButtonStyle?: string;
     closeButtonCenteredStyle?: string;
@@ -43,7 +43,7 @@ export interface ToastData {
     variant?: ToastVariant;
     state?: ToastState;
     title?: string;
-    description?: string;
+    subtitle?: string;
     icon?: ReactNode;
     action?: ToastAction;
     duration?: number;
@@ -107,22 +107,22 @@ export interface UseToastOptions {
 }
 export interface UseToastReturn {
     toast: (title: string, options?: UseToastOptions & {
-        description?: string;
+        subtitle?: string;
     }) => string;
     success: (title: string, options?: UseToastOptions & {
-        description?: string;
+        subtitle?: string;
     }) => string;
     error: (title: string, options?: UseToastOptions & {
-        description?: string;
+        subtitle?: string;
     }) => string;
     warning: (title: string, options?: UseToastOptions & {
-        description?: string;
+        subtitle?: string;
     }) => string;
     info: (title: string, options?: UseToastOptions & {
-        description?: string;
+        subtitle?: string;
     }) => string;
     loading: (title: string, options?: Omit<UseToastOptions, 'state'> & {
-        description?: string;
+        subtitle?: string;
     }) => string;
     dismiss: (id: string) => void;
     dismissAll: () => void;

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.theme.js

@@ -1,6 +1,6 @@
 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 " +
+    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/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)]",
 };
 

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,21 @@ 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 +39,12 @@ 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";

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';
@@ -30,20 +31,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 { 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';
@@ -56,7 +54,6 @@ export { TabsList } from './Tabs/TabsList.js';
 export { TabsTrigger } from './Tabs/TabsTrigger.js';
 export { TabsContent } from './Tabs/TabsContent.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 +69,12 @@ 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 { 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';
@@ -95,22 +91,17 @@ 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 { AnimatePresence } from 'motion/react';
 export { CardContent } from './Card/CardContent.js';
-export { CardDescription } from './Card/CardDescription.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/{core → data-display}/Feed/Feed.js

@@ -2,8 +2,8 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import React__default, { createContext, useMemo, useState, useContext } from 'react';
 import { cn } from '../../../utils/cn.js';
 import { feedTheme } from './Feed.theme.js';
-import { Avatar } from '../Avatar/Avatar.js';
-import { Button } from '../Button/Button.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';
 
@@ -54,7 +54,7 @@ const FeedItem = React__default.forwardRef(({ variant = "default", title, timest
             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 })] }));
+                return (jsxs("div", { className: theme.contentStyle, children: [title && (jsx("p", { className: cn(theme.titleStyle, "text-base"), children: title })), jsx("p", { className: cn(theme.actionTextStyle, "mt-0.5"), children: children }), timestamp && jsx("p", { className: theme.timestampStyle, children: timestamp })] }));
             case "comment-input": {
                 const handleSubmit = () => {
                     const trimmed = inputValue.trim();

package/dist/components/{core → data-display}/Feed/Feed.theme.js

@@ -12,8 +12,8 @@ const feedTheme = {
     // 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",
+    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",

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 };

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

@@ -0,0 +1,170 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useContext, createContext, useState, useCallback, useMemo } from 'react';
+import { cn } from '../../../utils/cn.js';
+import { ganttChartTheme } from './GanttChart.theme.js';
+import { useGanttDates } from './hooks/useGanttDates.js';
+import { useGanttLayout } from './hooks/useGanttLayout.js';
+import { useGanttScrollSync } from './hooks/useGanttScrollSync.js';
+import { GanttToolbar } from './GanttToolbar.js';
+import { GanttTablePanel } from './GanttTablePanel.js';
+import { GanttChartPanel } from './GanttChartPanel.js';
+import { GanttSplitter } from './GanttSplitter.js';
+import { formatDuration } from './GanttChart.utils.js';
+import { GanttProgressCircle } from './GanttProgressCircle.js';
+
+// ---------------------------------------------------------------------------
+// Context
+// ---------------------------------------------------------------------------
+const GanttContext = createContext(undefined);
+const GanttInteractionContext = createContext(undefined);
+function useGanttContext() {
+    const ctx = useContext(GanttContext);
+    if (!ctx) {
+        throw new Error("useGanttContext must be used within <GanttChart>");
+    }
+    return ctx;
+}
+function useGanttInteraction() {
+    const ctx = useContext(GanttInteractionContext);
+    if (!ctx) {
+        throw new Error("useGanttInteraction must be used within <GanttChart>");
+    }
+    return ctx;
+}
+// ---------------------------------------------------------------------------
+// Default columns
+// ---------------------------------------------------------------------------
+const defaultColumns = [
+    {
+        id: "title",
+        header: "Task",
+        accessor: "title",
+        width: 200,
+    },
+    {
+        id: "duration",
+        header: "Duration",
+        accessor: (task) => formatDuration(task.startDate, task.endDate),
+        width: 70,
+        align: "center",
+    },
+    {
+        id: "progress",
+        header: "Status",
+        accessor: "progress",
+        cell: (task, group) => {
+            var _a;
+            return (jsx(GanttProgressCircle, { progress: task.progress, color: (_a = task.color) !== null && _a !== void 0 ? _a : group.color, size: 20 }));
+        },
+        width: 56,
+        align: "center",
+    },
+];
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+function GanttChartComponent({ data, groups, columns, startDate, endDate, todayMarker = true, scrollToToday = true, readonly: readonlyProp = false, readonlyDates: readonlyDatesProp = false, readonlyProgress: readonlyProgressProp = false, zoom: zoomProp, defaultZoom = "day", onZoomChange, collapsedGroups: collapsedProp, defaultCollapsedGroups = [], onCollapsedGroupsChange, hideCompleted: hideCompletedProp, defaultHideCompleted = false, onHideCompletedChange, tablePanelWidth: tablePanelWidthProp, defaultTablePanelWidth = 400, onTablePanelWidthChange, onTaskUpdate, onTaskDelete, onTaskDuplicate, onTaskAdd, onGroupAdd, onTaskClick, holidays: holidaysProp = [], gridLines = "both", className, theme: themeOverrides, rowHeight = 40, }) {
+    // ----- Controlled / uncontrolled state -----
+    const [uncontrolledZoom, setUncontrolledZoom] = useState(defaultZoom);
+    const isZoomControlled = zoomProp !== undefined;
+    const zoom = isZoomControlled ? zoomProp : uncontrolledZoom;
+    const [uncontrolledCollapsed, setUncontrolledCollapsed] = useState(defaultCollapsedGroups);
+    const isCollapsedControlled = collapsedProp !== undefined;
+    const collapsedGroups = isCollapsedControlled ? collapsedProp : uncontrolledCollapsed;
+    const [uncontrolledHide, setUncontrolledHide] = useState(defaultHideCompleted);
+    const isHideControlled = hideCompletedProp !== undefined;
+    const hideCompleted = isHideControlled ? hideCompletedProp : uncontrolledHide;
+    const [uncontrolledWidth, setUncontrolledWidth] = useState(defaultTablePanelWidth);
+    const isWidthControlled = tablePanelWidthProp !== undefined;
+    const tablePanelWidth = isWidthControlled ? tablePanelWidthProp : uncontrolledWidth;
+    // ----- Hover / focus / drag state -----
+    const [hoveredTaskId, setHoveredTaskId] = useState(null);
+    const [focusedTaskId, setFocusedTaskId] = useState(null);
+    const [activeDrag, setActiveDrag] = useState(null);
+    // ----- Handlers -----
+    const setZoom = useCallback((val) => {
+        if (!isZoomControlled)
+            setUncontrolledZoom(val);
+        onZoomChange === null || onZoomChange === void 0 ? void 0 : onZoomChange(val);
+    }, [isZoomControlled, onZoomChange]);
+    const toggleGroup = useCallback((groupId) => {
+        const next = collapsedGroups.includes(groupId)
+            ? collapsedGroups.filter((id) => id !== groupId)
+            : [...collapsedGroups, groupId];
+        if (!isCollapsedControlled)
+            setUncontrolledCollapsed(next);
+        onCollapsedGroupsChange === null || onCollapsedGroupsChange === void 0 ? void 0 : onCollapsedGroupsChange(next);
+    }, [collapsedGroups, isCollapsedControlled, onCollapsedGroupsChange]);
+    const setHideCompleted = useCallback((val) => {
+        if (!isHideControlled)
+            setUncontrolledHide(val);
+        onHideCompletedChange === null || onHideCompletedChange === void 0 ? void 0 : onHideCompletedChange(val);
+    }, [isHideControlled, onHideCompletedChange]);
+    const setTablePanelWidth = useCallback((val) => {
+        if (!isWidthControlled)
+            setUncontrolledWidth(val);
+        onTablePanelWidthChange === null || onTablePanelWidthChange === void 0 ? void 0 : onTablePanelWidthChange(val);
+    }, [isWidthControlled, onTablePanelWidthChange]);
+    // ----- Derived data -----
+    const resolvedColumns = columns !== null && columns !== void 0 ? columns : defaultColumns;
+    const dates = useGanttDates(data, zoom, startDate, endDate);
+    const rows = useGanttLayout(groups, data, collapsedGroups, hideCompleted);
+    const { tableRef, chartRef, handleTableScroll, handleChartScroll } = useGanttScrollSync();
+    const theme = useMemo(() => ({ ...ganttChartTheme, ...(themeOverrides || {}) }), [themeOverrides]);
+    // ----- Context -----
+    const contextValue = useMemo(() => ({
+        groups,
+        tasks: data,
+        columns: resolvedColumns,
+        rows,
+        rangeStart: dates.rangeStart,
+        rangeEnd: dates.rangeEnd,
+        totalDays: dates.totalDays,
+        dayWidth: dates.dayWidth,
+        zoom,
+        collapsedGroups,
+        hideCompleted,
+        tablePanelWidth,
+        readonly: readonlyProp,
+        readonlyDates: readonlyDatesProp,
+        readonlyProgress: readonlyProgressProp,
+        onTaskUpdate,
+        onTaskDelete,
+        onTaskDuplicate,
+        onTaskAdd,
+        onGroupAdd,
+        onTaskClick,
+        toggleGroup,
+        setZoom,
+        setHideCompleted,
+        setTablePanelWidth,
+        theme,
+        todayMarker,
+        todayOffset: dates.todayOffset,
+        scrollToToday,
+        holidays: holidaysProp,
+        gridLines,
+        rowHeight,
+    }), [
+        groups, data, resolvedColumns, rows, dates, zoom, collapsedGroups,
+        hideCompleted, tablePanelWidth, readonlyProp, readonlyDatesProp,
+        readonlyProgressProp, onTaskUpdate, onTaskDelete, onTaskDuplicate,
+        onTaskAdd, onGroupAdd, onTaskClick, toggleGroup, setZoom,
+        setHideCompleted, setTablePanelWidth,
+        theme, todayMarker, scrollToToday, holidaysProp, gridLines, rowHeight,
+    ]);
+    // Interaction state changes frequently (hover, focus, drag) — kept in a
+    // separate context so that stable consumers don't re-render.
+    const interactionValue = useMemo(() => ({
+        hoveredTaskId,
+        setHoveredTaskId,
+        focusedTaskId,
+        setFocusedTaskId,
+        activeDrag,
+        setActiveDrag,
+    }), [hoveredTaskId, focusedTaskId, activeDrag]);
+    return (jsx(GanttContext.Provider, { value: contextValue, children: jsx(GanttInteractionContext.Provider, { value: interactionValue, children: jsxs("div", { className: cn(theme.baseStyle, className), children: [jsx(GanttToolbar, {}), jsxs("div", { className: "flex flex-1 min-h-0 overflow-x-auto", children: [jsx(GanttTablePanel, { ref: tableRef, onScroll: handleTableScroll }), jsx(GanttSplitter, {}), jsx(GanttChartPanel, { ref: chartRef, onScroll: handleChartScroll, days: dates.days, monthSpans: dates.monthSpans })] })] }) }) }));
+}
+GanttChartComponent.displayName = "GanttChart";
+
+export { GanttChartComponent as GanttChart, useGanttContext, useGanttInteraction };

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

@@ -0,0 +1,2 @@
+import type { GanttChartThemeOverrides } from "./GanttChart.types";
+export declare const ganttChartTheme: GanttChartThemeOverrides;

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

@@ -0,0 +1,23 @@
+const ganttChartTheme = {
+    baseStyle: "flex flex-col w-full overflow-hidden text-base",
+    toolbarStyle: "flex flex-wrap items-center justify-between gap-3 px-3 py-2 border-b border-[var(--color-border)] bg-[var(--color-background-secondary)]",
+    tablePanelStyle: "hidden sm:flex flex-col shrink-0 overflow-hidden",
+    chartPanelStyle: "flex flex-col flex-1 min-w-0 overflow-hidden",
+    tableHeaderStyle: "flex items-center h-[56px] border-b border-[var(--color-border)] bg-[var(--color-background-secondary)]",
+    tableHeaderCellStyle: "px-3 font-medium text-[var(--color-text-secondary)] truncate",
+    tableGroupRowStyle: "flex items-center cursor-pointer select-none hover:bg-[var(--color-background-secondary)] transition-colors",
+    tableTaskRowStyle: "flex items-center hover:bg-[var(--color-background-secondary)] transition-colors",
+    tableCellStyle: "px-3 truncate text-[var(--color-text-primary)]",
+    timelineHeaderStyle: "bg-[var(--color-background)] border-b border-[var(--color-border)]",
+    timelineMonthStyle: "text-sm font-medium text-[var(--color-text-secondary)] px-2 border-b border-[var(--color-border)] flex items-center",
+    timelineDayStyle: "text-[10px] text-[var(--color-text-muted)] flex items-center justify-center",
+    gridLineStyle: "border-r border-[var(--color-border)]/30",
+    weekendStyle: "bg-[var(--color-background-secondary)]/50",
+    todayMarkerStyle: "bg-[var(--color-primary)] w-px",
+    todayColumnStyle: "bg-[var(--color-primary)]/5",
+    taskBarStyle: "absolute rounded-md cursor-pointer flex items-center",
+    groupBarStyle: "absolute rounded-md opacity-25",
+    splitterStyle: "hidden sm:block w-1 cursor-col-resize bg-[var(--color-border)] hover:bg-[var(--color-primary)] transition-colors shrink-0",
+};
+
+export { ganttChartTheme };