@flikk/ui 1.0.0-beta.29 → 1.0.0-beta.30

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

@@ -1,4 +1,5 @@
 import { ReactNode } from "react";
+import type { SurfaceElevation } from "../../../theme/SurfaceContext";
 export type TooltipPlacement = "top" | "right" | "bottom" | "left";
 export interface TooltipThemeOverrides {
     /**
@@ -99,4 +100,11 @@ export interface TooltipProps {
      * @default false
      */
     darkMode?: boolean;
+    /**
+     * Pin the surface elevation rung (overrides the automatic relative lift).
+     * A rung number (1–8) or a semantic alias ("surface"/"raised"/"overlay"…).
+     */
+    elevation?: SurfaceElevation;
+    /** `false` opts out of the relative lift — paints at the tooltip's base rung. */
+    lift?: boolean;
 }

package/dist/components/core/Tree/Tree.animations.d.ts

@@ -1,6 +1,5 @@
-import { Variants, Transition } from 'motion/react';
+import { Variants } from 'motion/react';
 export declare const treeNodeVariants: Variants;
 export declare const expandIconVariants: Variants;
-export declare const childrenStagger: Transition;
 export declare const childNodeVariants: Variants;
 export declare const getReducedMotionVariants: (originalVariants: Variants) => Variants;

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

@@ -1,51 +1,15 @@
-// Optimized spring configuration for smooth expand/collapse
-const SPRING_CONFIG = {
-    type: 'spring',
-    stiffness: 400,
-    damping: 30,
-    mass: 0.8,
-};
-// Core expand/collapse animation for tree nodes
-const treeNodeVariants = {
-    expanded: {
-        opacity: 1,
-        scaleY: 1,
-        height: 'auto',
-        transition: {
-            height: {
-                ...SPRING_CONFIG,
-                duration: 0.3,
-            },
-            opacity: {
-                ...SPRING_CONFIG,
-                duration: 0.2,
-            },
-            scaleY: {
-                ...SPRING_CONFIG,
-                duration: 0.25,
-            },
-        },
-    },
-    collapsed: {
-        opacity: 0,
-        scaleY: 0.8,
-        height: 0,
-        transition: {
-            height: {
-                ...SPRING_CONFIG,
-                duration: 0.25,
-            },
-            opacity: {
-                ...SPRING_CONFIG,
-                duration: 0.15,
-            },
-            scaleY: {
-                ...SPRING_CONFIG,
-                duration: 0.2,
-            },
-        },
-    },
-};
+"use client";
+import '../../../theme/ThemeContext.js';
+import '../../../theme/SurfaceContext.js';
+import { getExpandCollapseVariants, springs } from '../../../theme/animations.js';
+
+// Use centralized smooth spring preset
+const SPRING_CONFIG = springs.smooth;
+// Core expand/collapse animation for the children container.
+const treeNodeVariants = getExpandCollapseVariants({
+    staggerChildren: 0.03,
+    delayChildren: 0.03,
+});
 // Icon rotation animation for expand/collapse indication
 const expandIconVariants = {
     expanded: {
@@ -57,21 +21,19 @@ const expandIconVariants = {
         transition: SPRING_CONFIG,
     },
 };
-// Stagger animation for children nodes
-const childrenStagger = {
-    staggerChildren: 0.03,
-    delayChildren: 0.05,
-};
-// Individual child node entry animation
+// Individual child node entry animation.
+// Fades in and slides diagonally (down and right) for an organic vertical flow.
 const childNodeVariants = {
-    hidden: {
+    collapsed: {
         opacity: 0,
-        x: -10,
+        x: -4,
+        y: -4,
         transition: SPRING_CONFIG,
     },
-    visible: {
+    expanded: {
         opacity: 1,
         x: 0,
+        y: 0,
         transition: SPRING_CONFIG,
     },
 };
@@ -93,4 +55,4 @@ const getReducedMotionVariants = (originalVariants) => {
     return reducedVariants;
 };
 
-export { childNodeVariants, childrenStagger, expandIconVariants, getReducedMotionVariants, treeNodeVariants };
+export { childNodeVariants, expandIconVariants, getReducedMotionVariants, treeNodeVariants };

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

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React__default, { useCallback, useState, useRef, useMemo } from 'react';
 import { motion, AnimatePresence, useReducedMotion } from 'motion/react';
@@ -5,7 +6,7 @@ import { cn } from '../../../utils/cn.js';
 import { treeTheme } from './Tree.theme.js';
 import { Checkbox } from '../../forms/Checkbox/Checkbox.js';
 import { ChevronRightIcon, DocumentIcon } from '@heroicons/react/24/outline';
-import { getReducedMotionVariants, treeNodeVariants, expandIconVariants, childNodeVariants, childrenStagger } from './Tree.animations.js';
+import { getReducedMotionVariants, treeNodeVariants, expandIconVariants, childNodeVariants } from './Tree.animations.js';
 
 // Build a flat ordered list of visible (non-collapsed) node ids via depth-first traversal.
 // Disabled nodes are included in the list so that ArrowDown/Up skip over them in the
@@ -199,10 +200,11 @@ const InternalTreeNode = React__default.memo(({ node, level, expanded, selected,
     const labelStyle = cn(theme.labelStyle, {
         'text-[var(--color-text-muted)]': node.disabled,
     });
-    return (jsxs("div", { children: [jsxs("div", { ref: itemRef, className: nodeStyle, style: { paddingLeft: `calc(${level} * ${theme.indentSize} + 0.25rem)` }, onClick: handleNodeClick, onKeyDown: handleKeyDown, onFocus: handleFocus, tabIndex: tabIndexValue, role: "treeitem", "aria-expanded": isExpandable ? expanded : undefined, "aria-selected": selectable ? selected : undefined, "aria-disabled": node.disabled, children: [isExpandable ? (jsx(motion.span, { className: cn(theme.expandIconStyle), variants: iconVariants, initial: "collapsed", animate: expanded ? "expanded" : "collapsed", onClick: handleExpandClick, "aria-label": expanded ? 'Collapse' : 'Expand', tabIndex: -1, children: jsx(ChevronRightIcon, { className: "size-4", strokeWidth: 2 }) })) : (jsx("span", { className: "w-4 mr-1" })), checkable && (jsx(Checkbox, { size: 'sm', id: `tree-checkbox-${node.id}`, name: `tree-checkbox-${node.id}`, value: node.id, checked: selected, indeterminate: hierarchicalSelection && isIndeterminate, onChange: () => onNodeClick(node), state: node.disabled ? "disabled" : "default", className: "flex-shrink-0", onClick: (e) => e.stopPropagation() })), (node.icon || !isExpandable) && (jsx("span", { className: cn(theme.iconStyle), children: node.icon || jsx(DocumentIcon, { className: "w-4 h-4" }) })), jsx("span", { className: labelStyle, title: node.label, children: node.label })] }), hasChildren && (jsx(AnimatePresence, { initial: false, children: expanded && (jsx(motion.div, { variants: nodeVariants, initial: "collapsed", animate: "expanded", exit: "collapsed", style: {
-                        overflow: 'hidden',
-                        transformOrigin: 'top'
-                    }, transition: shouldReduceMotion ? { duration: 0.01 } : childrenStagger, children: (_a = node.children) === null || _a === void 0 ? void 0 : _a.map((childNode, index) => (jsx(motion.div, { variants: childVariants, initial: "hidden", animate: "visible", exit: "hidden", custom: index, children: jsx(InternalTreeNode, { node: childNode, level: level + 1, expanded: expandedKeysSet.has(childNode.id), selected: selectedKeysSet.has(childNode.id), isIndeterminate: indeterminateKeysSet.has(childNode.id), selectable: selectable, checkable: checkable, hierarchicalSelection: hierarchicalSelection, expandable: expandable, expandedKeysSet: expandedKeysSet, selectedKeysSet: selectedKeysSet, indeterminateKeysSet: indeterminateKeysSet, onNodeClick: onNodeClick, onToggleExpand: onToggleExpand, onKeyboardNavigate: onKeyboardNavigate, nodeRefs: nodeRefs, focusedNodeId: focusedNodeId, onFocusNode: onFocusNode, theme: theme, shouldReduceMotion: shouldReduceMotion }) }, childNode.id))) }, `${node.id}-children`)) }))] }));
+    return (jsxs("div", { children: [jsxs("div", { ref: itemRef, className: nodeStyle, style: { paddingLeft: `calc(${level} * ${theme.indentSize} + 0.25rem)` }, onClick: handleNodeClick, onKeyDown: handleKeyDown, onFocus: handleFocus, tabIndex: tabIndexValue, role: "treeitem", "aria-expanded": isExpandable ? expanded : undefined, "aria-selected": selectable ? selected : undefined, "aria-disabled": node.disabled, children: [isExpandable ? (jsx(motion.span, { className: cn(theme.expandIconStyle), variants: iconVariants, initial: "collapsed", animate: expanded ? "expanded" : "collapsed", onClick: handleExpandClick, "aria-label": expanded ? 'Collapse' : 'Expand', "aria-hidden": "true", tabIndex: -1, children: jsx(ChevronRightIcon, { className: "size-4", strokeWidth: 2 }) })) : (jsx("span", { className: "w-4 mr-1" })), checkable && (jsx(Checkbox, { size: 'sm', id: `tree-checkbox-${node.id}`, name: `tree-checkbox-${node.id}`, value: node.id, checked: selected, indeterminate: hierarchicalSelection && isIndeterminate, onChange: () => onNodeClick(node), state: node.disabled ? "disabled" : "default", className: "flex-shrink-0", onClick: (e) => e.stopPropagation() })), (node.icon || !isExpandable) && (jsx("span", { className: cn(theme.iconStyle), children: node.icon || jsx(DocumentIcon, { className: "w-4 h-4" }) })), jsx("span", { className: labelStyle, title: node.label, children: node.label })] }), hasChildren && (jsx(AnimatePresence, { initial: false, children: expanded && (jsx(motion.div, { role: "group", variants: nodeVariants, initial: "collapsed", animate: "expanded", exit: "collapsed", style: { overflow: 'hidden' }, children: (_a = node.children) === null || _a === void 0 ? void 0 : _a.map((childNode) => (
+                    // No initial/animate/exit here on purpose: the child inherits its
+                    // animation state from the container above so staggerChildren can
+                    // cascade them in/out one after another.
+                    jsx(motion.div, { variants: childVariants, children: jsx(InternalTreeNode, { node: childNode, level: level + 1, expanded: expandedKeysSet.has(childNode.id), selected: selectedKeysSet.has(childNode.id), isIndeterminate: indeterminateKeysSet.has(childNode.id), selectable: selectable, checkable: checkable, hierarchicalSelection: hierarchicalSelection, expandable: expandable, expandedKeysSet: expandedKeysSet, selectedKeysSet: selectedKeysSet, indeterminateKeysSet: indeterminateKeysSet, onNodeClick: onNodeClick, onToggleExpand: onToggleExpand, onKeyboardNavigate: onKeyboardNavigate, nodeRefs: nodeRefs, focusedNodeId: focusedNodeId, onFocusNode: onFocusNode, theme: theme, shouldReduceMotion: shouldReduceMotion }) }, childNode.id))) }, `${node.id}-children`)) }))] }));
 });
 const TreeRoot = React__default.forwardRef(({ data, selectable = false, checkable = false, hierarchicalSelection, expandable = true, defaultExpandedKeys = [], defaultSelectedKeys = [], onSelectionChange, onExpand, className, theme: customTheme = {}, ...htmlProps }, ref) => {
     var _a;

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

@@ -1,3 +1,4 @@
+"use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import React__default, { createContext, useMemo, useContext } from 'react';
 import { cn } from '../../../utils/cn.js';

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

@@ -1,3 +1,4 @@
+"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';

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

@@ -1,6 +1,5 @@
-import type { GanttChartProps, GanttContextValue, GanttInteractionValue } from "./GanttChart.types";
-export declare function useGanttContext(): GanttContextValue;
-export declare function useGanttInteraction(): GanttInteractionValue;
+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;

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

@@ -1,5 +1,6 @@
+"use client";
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useContext, createContext, useState, useCallback, useMemo } from 'react';
+import { useState, useCallback, useMemo } from 'react';
 import { cn } from '../../../utils/cn.js';
 import { ganttChartTheme } from './GanttChart.theme.js';
 import { useGanttDates } from './hooks/useGanttDates.js';
@@ -11,26 +12,9 @@ import { GanttChartPanel } from './GanttChartPanel.js';
 import { GanttSplitter } from './GanttSplitter.js';
 import { formatDuration } from './GanttChart.utils.js';
 import { GanttProgressCircle } from './GanttProgressCircle.js';
+import { GanttContext, GanttInteractionContext } from './GanttChartContext.js';
+export { useGanttContext, useGanttInteraction } from './GanttChartContext.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
 // ---------------------------------------------------------------------------
@@ -194,4 +178,4 @@ function GanttChartComponent({ data, groups, columns, startDate, endDate, todayM
 }
 GanttChartComponent.displayName = "GanttChart";
 
-export { GanttChartComponent as GanttChart, useGanttContext, useGanttInteraction };
+export { GanttChartComponent as GanttChart };

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

@@ -0,0 +1,5 @@
+import type { GanttContextValue, GanttInteractionValue } from "./GanttChart.types";
+export declare const GanttContext: import("react").Context<GanttContextValue | undefined>;
+export declare const GanttInteractionContext: import("react").Context<GanttInteractionValue | undefined>;
+export declare function useGanttContext(): GanttContextValue;
+export declare function useGanttInteraction(): GanttInteractionValue;

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

@@ -0,0 +1,26 @@
+"use client";
+import { createContext, useContext } from 'react';
+
+// Lives in its own module (not GanttChart.tsx) so sub-components
+// (GanttChartPanel, GanttTablePanel, GanttToolbar, GanttTaskBar, ...) can
+// consume the contexts without importing GanttChart.tsx, which imports the
+// sub-components back (circular dep). GanttChart.tsx re-exports the hooks,
+// so `from "./GanttChart"` keeps working.
+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;
+}
+
+export { GanttContext, GanttInteractionContext, useGanttContext, useGanttInteraction };

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

@@ -1,8 +1,9 @@
+"use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { forwardRef, useEffect, useCallback } from 'react';
 import { CalendarDaysIcon } from '@heroicons/react/24/outline';
 import { cn } from '../../../utils/cn.js';
-import { useGanttContext, useGanttInteraction } from './GanttChart.js';
+import { useGanttContext, useGanttInteraction } from './GanttChartContext.js';
 import { GanttTimelineHeader } from './GanttTimelineHeader.js';
 import { GanttTimelineGrid } from './GanttTimelineGrid.js';
 import { GanttDependencyArrows } from './GanttDependencyArrows.js';

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

@@ -1,6 +1,7 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useId, useMemo } from 'react';
-import { useGanttContext, useGanttInteraction } from './GanttChart.js';
+import { useGanttContext, useGanttInteraction } from './GanttChartContext.js';
 import { buildDependencyArrows } from './GanttChart.utils.js';
 
 const GanttDependencyArrows = () => {

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

@@ -1,7 +1,8 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import React__default from 'react';
 import { cn } from '../../../utils/cn.js';
-import { useGanttContext } from './GanttChart.js';
+import { useGanttContext } from './GanttChartContext.js';
 import { getDayOffset } from './GanttChart.utils.js';
 import { getDaysBetween } from '../../../utils/dateUtils.js';
 

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

@@ -1,7 +1,8 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React__default from 'react';
 import { getDayOffset, formatDateShort } from './GanttChart.utils.js';
-import { useGanttContext } from './GanttChart.js';
+import { useGanttContext } from './GanttChartContext.js';
 import { Tooltip } from '../../core/Tooltip/Tooltip.js';
 import '../../core/Tooltip/Tooltip.animations.js';
 import { GanttTaskContextMenu } from './GanttTaskContextMenu.js';

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

@@ -1,7 +1,8 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { useRef, useEffect, useCallback } from 'react';
 import { cn } from '../../../utils/cn.js';
-import { useGanttContext } from './GanttChart.js';
+import { useGanttContext } from './GanttChartContext.js';
 
 const STEP = 20;
 const MIN_WIDTH = 200;

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

@@ -1,9 +1,10 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React__default from 'react';
 import { motion } from 'motion/react';
 import { ChevronRightIcon, PlusIcon } from '@heroicons/react/24/outline';
 import { cn } from '../../../utils/cn.js';
-import { useGanttContext } from './GanttChart.js';
+import { useGanttContext } from './GanttChartContext.js';
 import { chevronVariants } from './GanttChart.animations.js';
 
 const GanttTableGroupRow = React__default.memo(({ row, }) => {

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

@@ -1,6 +1,7 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { cn } from '../../../utils/cn.js';
-import { useGanttContext } from './GanttChart.js';
+import { useGanttContext } from './GanttChartContext.js';
 
 const GanttTableHeader = () => {
     const { theme, columns } = useGanttContext();

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

@@ -1,7 +1,8 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { cn } from '../../../utils/cn.js';
-import { useGanttContext } from './GanttChart.js';
+import { useGanttContext } from './GanttChartContext.js';
 import { GanttTableHeader } from './GanttTableHeader.js';
 import { GanttTableGroupRow } from './GanttTableGroupRow.js';
 import { GanttTableTaskRow } from './GanttTableTaskRow.js';

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

@@ -1,7 +1,8 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import React__default from 'react';
 import { cn } from '../../../utils/cn.js';
-import { useGanttContext, useGanttInteraction } from './GanttChart.js';
+import { useGanttContext, useGanttInteraction } from './GanttChartContext.js';
 import { GanttTaskContextMenu } from './GanttTaskContextMenu.js';
 
 function getCellValue(task, group, column) {

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

@@ -1,8 +1,9 @@
+"use client";
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import React__default, { useState, useCallback, useMemo } from 'react';
 import { motion } from 'motion/react';
 import { cn } from '../../../utils/cn.js';
-import { useGanttContext, useGanttInteraction } from './GanttChart.js';
+import { useGanttContext, useGanttInteraction } from './GanttChartContext.js';
 import { getDayOffset, calculateExpectedProgress, formatDateShort, formatDuration } from './GanttChart.utils.js';
 import { ChartTooltip } from '../../charts/shared/ChartTooltip/ChartTooltip.js';
 import { Avatar } from '../../core/Avatar/Avatar.js';

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

@@ -1,8 +1,9 @@
+"use client";
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { CheckCircleIcon, DocumentDuplicateIcon, TrashIcon } from '@heroicons/react/24/outline';
 import { ContextMenu } from '../../core/ContextMenu/ContextMenu.js';
 import '../../core/ContextMenu/ContextMenu.theme.js';
-import { useGanttContext } from './GanttChart.js';
+import { useGanttContext } from './GanttChartContext.js';
 
 const PROGRESS_STEPS = [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100];
 const GanttTaskContextMenu = ({ task, children, }) => {

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

@@ -1,7 +1,8 @@
+"use client";
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useMemo } from 'react';
 import { cn } from '../../../utils/cn.js';
-import { useGanttContext } from './GanttChart.js';
+import { useGanttContext } from './GanttChartContext.js';
 import { toDate, isWeekend } from '../../../utils/dateUtils.js';
 
 const GanttTimelineGrid = ({ days, height, }) => {

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

@@ -1,6 +1,7 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { cn } from '../../../utils/cn.js';
-import { useGanttContext } from './GanttChart.js';
+import { useGanttContext } from './GanttChartContext.js';
 import { formatDayLabel } from './GanttChart.utils.js';
 import { isSameDay, isWeekend, getWeekNumber } from '../../../utils/dateUtils.js';
 

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

@@ -1,7 +1,8 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { CalendarIcon, PlusIcon } from '@heroicons/react/24/outline';
 import { cn } from '../../../utils/cn.js';
-import { useGanttContext } from './GanttChart.js';
+import { useGanttContext } from './GanttChartContext.js';
 import { Segmented } from '../../core/Segmented/Segmented.js';
 import { Button } from '../../core/Button/Button.js';
 import 'react';

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

@@ -1,3 +1,4 @@
+"use client";
 import { useMemo } from 'react';
 import { DAY_WIDTHS } from '../GanttChart.types.js';
 import { autoDateRange, generateDayColumns, generateMonthSpans, getDayOffset } from '../GanttChart.utils.js';

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

@@ -1,3 +1,4 @@
+"use client";
 import { useState, useRef, useEffect, useCallback } from 'react';
 
 // ---------------------------------------------------------------------------

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

@@ -1,3 +1,4 @@
+"use client";
 import { useMemo } from 'react';
 import { computeGroupSummary } from '../GanttChart.utils.js';
 

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

@@ -1,3 +1,4 @@
+"use client";
 import { useRef, useCallback } from 'react';
 
 function useGanttScrollSync() {

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

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React__default, { useMemo } from 'react';
 import { motion } from 'motion/react';

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

@@ -10,9 +10,9 @@ const Metric = React__default.forwardRef(({ value, label, subtitle, trendValue,
     const trendIcon = trendDirection === "up" ? (jsx(ArrowTrendingUpIcon, { className: "size-3", strokeWidth: 2 })) : (jsx(ArrowTrendingDownIcon, { className: "size-3", strokeWidth: 2 }));
     const variantStyles = metricTheme.variants[variant];
     // Ghost has no surface, so it renders flush (no inset) to align with
-    // surrounding content; filled/glass keep their size-based content padding.
+    // surrounding content; filled keeps its size-based content padding.
     const contentPadding = variant === "ghost" ? "p-0" : metricTheme.contentPaddingSizes[size];
-    const iconStyles = cn(metricTheme.iconColors[color], variant === "glass" && metricTheme.iconGlassShadows[color]);
+    const iconStyles = metricTheme.iconColors[color];
     return (jsx(Card, { ref: ref, className: cn(metricTheme.baseStyle, variantStyles, className), "data-size": size, ...props, children: jsxs("div", { className: "flex flex-col gap-3 ", children: [jsxs("div", { className: cn("flex items-start gap-3", contentPadding), children: [icon && (jsx("div", { className: cn(metricTheme.iconContainerStyle, metricTheme.iconContainerVariants[variant], iconStyles, metricTheme.iconContainerSizes[size]), children: icon })), jsxs("div", { className: "flex flex-col flex-1", children: [typeof label === 'string' ? (jsx("div", { className: cn(metricTheme.labelStyle, metricTheme.labelSizes[size], icon && cn("mb-0 flex items-center", metricTheme.labelIconAlignSizes[size])), children: label })) : label, jsxs("div", { className: "flex items-center gap-2", children: [jsx("div", { className: cn(metricTheme.valueStyle, metricTheme.valueSizes[size]), children: value }), trendValue && (typeof trendValue === 'string' ? (jsx(Badge, { color: trendDirection === "up" ? "success" : "danger", variant: "soft", size: size === "lg" ? "md" : "sm", iconStart: trendIcon, pill: true, children: trendValue })) : trendValue)] }), subtitle && (typeof subtitle === 'string' ? (jsx("div", { className: cn(metricTheme.subtitleStyle, metricTheme.subtitleSizes[size]), children: subtitle })) : subtitle)] })] }), trendChart && (jsx("div", { className: "w-full h-12 flex-shrink-0 -mt-4", children: trendChart }))] }) }));
 });
 Metric.displayName = "Metric";

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

@@ -9,37 +9,25 @@ const metricTheme = {
     baseStyle: "transition-colors duration-200",
     // Visual style variants — container surface + structure.
     // `filled` adds nothing: it inherits the Card shell's --color-surface-raised.
-    // `ghost`/`glass` clear that fill (`!` beats Card's bg utility regardless of
-    // source order) so they sit transparent / let the glass gradient read.
+    // `ghost` clears that fill (`!` beats Card's bg utility regardless of
+    // source order) so it sits transparent.
     variants: {
         filled: "",
         ghost: "!bg-transparent overflow-visible",
-        glass: "glass-effect !bg-transparent",
     },
     // Icon chip base per variant — classes shared across all colors of that variant
     iconContainerVariants: {
         filled: "border border-[var(--color-border)]",
         ghost: "border border-[var(--color-border)] bg-[var(--color-surface-raised)]/50 shadow-real-lg",
-        glass: "glass-effect-2 !ring-0",
     },
     // Icon tint per semantic color — shared by every variant (the one thing color drives)
     iconColors: {
         neutral: "text-[var(--color-text-primary)]",
         primary: "text-[var(--color-primary)] dark:text-[var(--color-primary-400)]",
-        secondary: "text-[var(--color-secondary)] dark:text-[var(--color-secondary-400)]",
         success: "text-[var(--color-success)] dark:text-[var(--color-success-400)]",
         warning: "text-[var(--color-warning)] dark:text-[var(--color-warning-400)]",
         danger: "text-[var(--color-danger)] dark:text-[var(--color-danger-400)]",
     },
-    // Glass-only colored glow per semantic color (neutral stays shadowless)
-    iconGlassShadows: {
-        neutral: "",
-        primary: "shadow-lg shadow-blue-500/10",
-        secondary: "shadow-lg shadow-gray-500/10",
-        success: "shadow-lg shadow-green-500/10",
-        warning: "shadow-lg shadow-yellow-500/10",
-        danger: "shadow-lg shadow-rose-500/10",
-    },
     // Size variants — one Record<Size, string> per sub-element
     contentPaddingSizes: { sm: "p-3", md: "p-4", lg: "p-5" },
     iconContainerSizes: { sm: "size-8", md: "size-10", lg: "size-12" },

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { SemanticColor } from '../../../utils/colorUtils';
 export type MetricSize = 'sm' | 'md' | 'lg';
 export type MetricColor = SemanticColor;
-export type MetricVariant = 'filled' | 'ghost' | 'glass';
+export type MetricVariant = 'filled' | 'ghost';
 export type TrendDirection = 'up' | 'down';
 export interface MetricProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
@@ -60,7 +60,6 @@ export interface MetricTheme {
     variants: Record<MetricVariant, string>;
     iconContainerVariants: Record<MetricVariant, string>;
     iconColors: Record<MetricColor, string>;
-    iconGlassShadows: Record<MetricColor, string>;
     contentPaddingSizes: Record<MetricSize, string>;
     iconContainerSizes: Record<MetricSize, string>;
     labelSizes: Record<MetricSize, string>;
@@ -77,7 +76,6 @@ export interface MetricThemeOverrides {
     variants?: Partial<Record<MetricVariant, string>>;
     iconContainerVariants?: Partial<Record<MetricVariant, string>>;
     iconColors?: Partial<Record<MetricColor, string>>;
-    iconGlassShadows?: Partial<Record<MetricColor, string>>;
     contentPaddingSizes?: Partial<Record<MetricSize, string>>;
     iconContainerSizes?: Partial<Record<MetricSize, string>>;
     labelSizes?: Partial<Record<MetricSize, string>>;

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

@@ -1,3 +1,4 @@
+"use client";
 const EASE = [0.04, 0.62, 0.23, 0.98];
 // Expand is slightly slower than collapse — feels more intentional
 const EXPAND_DURATION = 0.32;

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

@@ -1,10 +1,5 @@
 import React from "react";
-import { TableProps, TableContextType } from "./Table.types";
-/**
- * Context for sharing table state across all table components
- * Provides theme, configuration, and callback functions to child components
- */
-declare const TableContext: React.Context<TableContextType>;
+import { TableProps } from "./Table.types";
 /**
  * Enhanced Table component with dual API support (declarative and data-driven)
  *
@@ -24,4 +19,4 @@ declare namespace TableComponent {
 }
 declare const Table: typeof TableComponent;
 export { Table };
-export { TableContext };
+export { TableContext } from "./TableContext";

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

@@ -1,6 +1,8 @@
+"use client";
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { createContext, useState, useRef, useEffect, useMemo } from 'react';
+import { useState, useRef, useEffect, useMemo } from 'react';
 import { tableTheme } from './Table.theme.js';
+import { TableContext } from './TableContext.js';
 import { cn } from '../../../utils/cn.js';
 import { TableHeader } from './TableHeader.js';
 import { TableBody } from './TableBody.js';
@@ -12,17 +14,6 @@ import { useTableSelection } from './hooks/useTableSelection.js';
 import { useTablePagination } from './hooks/useTablePagination.js';
 import { useTableFilter } from './hooks/useTableFilter.js';
 
-/**
- * Context for sharing table state across all table components
- * Provides theme, configuration, and callback functions to child components
- */
-const TableContext = createContext({
-    theme: tableTheme,
-    variant: "default",
-    freezeHeader: false,
-    freezeFirstColumn: false,
-    freezeLastColumn: false,
-});
 /**
  * Enhanced Table component with dual API support (declarative and data-driven)
  *
@@ -76,8 +67,17 @@ function TableComponent(props) {
         selectedRows,
         onSelectionChange,
     });
-    // Determine which API is being used (declarative vs data-driven)
-    const isDeclarativeAPI = !!children;
+    // Determine which API is being used (declarative vs data-driven).
+    // Per docs/COMPONENT_API_PATTERNS.md, the data-driven `data`/`columns` API
+    // wins over `children` when both are provided (mirroring Timeline/
+    // DescriptionList/Feed/Accordion), with a dev-only warning.
+    const hasDataDrivenProps = !!(data && columns);
+    const isDeclarativeAPI = !!children && !hasDataDrivenProps;
+    if (process.env.NODE_ENV !== "production" &&
+        children &&
+        hasDataDrivenProps) {
+        console.warn("[Table]: Both `data`/`columns` and `children` were provided. `data`/`columns` will be used and `children` will be ignored.");
+    }
     // Detect horizontal overflow to conditionally apply frozen column backdrop styles
     const scrollContainerRef = useRef(null);
     const [isOverflowing, setIsOverflowing] = useState(false);

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

@@ -309,6 +309,8 @@ export interface InternalTableCellProps<T> {
     isFrozen?: boolean;
     isLastFrozen?: boolean;
     isSelected?: boolean;
+    /** Current sort direction for this header cell (data-driven API); sets aria-sort. */
+    sortDirection?: 'asc' | 'desc';
     theme?: TableThemeOverrides;
     children?: ReactNode;
 }