flikkui 0.1.0-beta.11 → 0.1.0-beta.12

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

@@ -1,27 +1,62 @@
 var tableTheme = {
     // Base styles for the table
-    baseStyle: "w-full border-collapse bg-white text-sm",
+    // Light: white background | Dark: neutral-900 background
+    baseStyle: "w-full border-collapse text-sm " +
+        "bg-white dark:bg-[var(--color-neutral-900)]",
     // Variant styles
+    // Each variant gets dark mode border colors and alternate row colors
     variants: {
-        default: "border-[var(--color-border)] [&_td]:px-3 [&_td]:py-2.5 [&_th]:px-3 [&_th]:py-2.5",
-        striped: "border-[var(--color-border)] [&>tbody>tr:nth-child(odd)]:bg-[var(--color-neutral-50)] [&_td]:px-3 [&_td]:py-2.5 [&_th]:px-3 [&_th]:py-2.5",
-        bordered: "border border-[var(--color-border)] [&_td]:border [&_th]:border [&_td]:border-[var(--color-border)] [&_th]:border-[var(--color-border)] [&_td]:px-3 [&_td]:py-2.5 [&_th]:px-3 [&_th]:py-2.5",
-        compact: "border-[var(--color-border)] [&_td]:px-3 [&_td]:py-1 [&_th]:px-3 [&_th]:py-1",
+        default: "border-[var(--color-border)] dark:border-[var(--color-neutral-700)] " +
+            "[&_td]:px-3 [&_td]:py-2.5 [&_th]:px-3 [&_th]:py-2.5",
+        striped: "border-[var(--color-border)] dark:border-[var(--color-neutral-700)] " +
+            "[&>tbody>tr:nth-child(odd)]:bg-[var(--color-neutral-50)] dark:[&>tbody>tr:nth-child(odd)]:bg-[var(--color-neutral-800)] " +
+            "[&_td]:px-3 [&_td]:py-2.5 [&_th]:px-3 [&_th]:py-2.5",
+        bordered: "border border-[var(--color-border)] dark:border-[var(--color-neutral-700)] " +
+            "[&_td]:border [&_th]:border " +
+            "[&_td]:border-[var(--color-border)] [&_th]:border-[var(--color-border)] " +
+            "dark:[&_td]:border-[var(--color-neutral-700)] dark:[&_th]:border-[var(--color-neutral-700)] " +
+            "[&_td]:px-3 [&_td]:py-2.5 [&_th]:px-3 [&_th]:py-2.5",
+        compact: "border-[var(--color-border)] dark:border-[var(--color-neutral-700)] " +
+            "[&_td]:px-3 [&_td]:py-1 [&_th]:px-3 [&_th]:py-1",
     },
     // Header styles
-    headerStyle: "text-left font-medium text-[var(--color-text-primary)] sticky top-0 border-b border-[var(--color-border)]",
+    // Light: primary text, light border | Dark: neutral-200 text, neutral-700 border
+    headerStyle: "text-left font-medium sticky top-0 border-b " +
+        "text-[var(--color-text-primary)] border-[var(--color-border)] " +
+        "dark:text-[var(--color-neutral-200)] dark:border-[var(--color-neutral-700)]",
     // Cell styles
-    cellStyle: "text-[var(--color-text-primary)] border-t border-[var(--color-border)]",
+    // Light: primary text, light border | Dark: neutral-300 text, neutral-700 border
+    cellStyle: "border-t " +
+        "text-[var(--color-text-primary)] border-[var(--color-border)] " +
+        "dark:text-[var(--color-neutral-300)] dark:border-[var(--color-neutral-700)]",
     // Row styles
-    rowStyle: "hover:bg-[var(--color-neutral-50)]  transition-all duration-300 relative",
-    selectedRowStyle: "bg-[var(--color-primary-50)]/50 shadow-[inset_3px_0_0_0_theme(colors.primary.base),0_20px_15px_-5px_theme(colors.primary.base/0.02),0_10px_10px_-5px_theme(colors.primary.base/0.02)] hover:bg-[var(--color-primary-50)]",
+    // Light: neutral-50 hover | Dark: neutral-800 hover
+    rowStyle: "transition-all duration-300 relative " +
+        "hover:bg-[var(--color-neutral-50)] dark:hover:bg-[var(--color-neutral-800)]",
+    // Selected row styles
+    // Light: primary-50 background | Dark: primary-900/50 background with adjusted shadow
+    selectedRowStyle: "shadow-[inset_3px_0_0_0_var(--color-primary)] " +
+        "bg-[var(--color-primary-50)]/50 hover:bg-[var(--color-primary-50)] " +
+        "dark:bg-[var(--color-primary-900)]/30 dark:hover:bg-[var(--color-primary-900)]/50",
     hoverRowStyle: "cursor-pointer",
     // Frozen column styles
-    frozenColumnStyle: "sticky left-0 z-10 bg-white/80 backdrop-blur-sm shadow-l-xl outline outline-1 outline-[var(--color-neutral-200)]",
-    lastFrozenColumnStyle: "sticky right-0 z-10 bg-white/80 backdrop-blur-sm shadow-r-xl outline outline-1 outline-[var(--color-neutral-200)]",
-    frozenHeaderStyle: "sticky top-0 z-20 shadow-lg shadow-[var(--color-neutral-200)]/50",
-    // Utility controls
-    columnManagerButton: "inline-flex items-center gap-2 rounded-md bg-white px-3 py-2 text-sm font-medium text-[var(--color-text-primary)] hover:bg-[var(--color-neutral-50)] focus:outline-none focus:ring-2 focus:ring-[var(--color-primary-500)] focus:ring-offset-2 border border-[var(--color-neutral-300)]",
+    // Light: white/80 with light outline | Dark: neutral-900/80 with dark outline
+    frozenColumnStyle: "sticky left-0 z-10 backdrop-blur-sm shadow-l-xl outline outline-1 " +
+        "bg-white/80 outline-[var(--color-neutral-200)] " +
+        "dark:bg-[var(--color-neutral-900)]/80 dark:outline-[var(--color-neutral-700)]",
+    lastFrozenColumnStyle: "sticky right-0 z-10 backdrop-blur-sm shadow-r-xl outline outline-1 " +
+        "bg-white/80 outline-[var(--color-neutral-200)] " +
+        "dark:bg-[var(--color-neutral-900)]/80 dark:outline-[var(--color-neutral-700)]",
+    frozenHeaderStyle: "sticky top-0 z-20 " +
+        "shadow-lg shadow-[var(--color-neutral-200)]/50 " +
+        "dark:shadow-[var(--color-neutral-900)]/50",
+    // Utility controls - Column manager button
+    // Light: white bg with light border | Dark: neutral-800 bg with neutral-600 border
+    columnManagerButton: "inline-flex items-center gap-2 rounded-md px-3 py-2 text-sm font-medium " +
+        "focus:outline-none focus:ring-2 focus:ring-[var(--color-primary-500)] focus:ring-offset-2 " +
+        "dark:focus:ring-offset-[var(--color-neutral-900)] " +
+        "bg-white border border-[var(--color-neutral-300)] text-[var(--color-text-primary)] hover:bg-[var(--color-neutral-50)] " +
+        "dark:bg-[var(--color-neutral-800)] dark:border-[var(--color-neutral-600)] dark:text-[var(--color-neutral-200)] dark:hover:bg-[var(--color-neutral-700)]",
     columnManagerContainer: "mb-4 flex justify-end",
 };
 

package/dist/components/core/Table/components/DeclarativeComponents.js

@@ -1,7 +1,10 @@
 import React__default, { useContext } from 'react';
 import { TableContext } from '../Table.js';
 import { cn } from '../../../../utils/cn.js';
-import '../../../../node_modules/tslib/tslib.es6.js';
+import '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
+import '../../../../utils/streamingErrors.js';
+import '../../../../utils/optimisticErrors.js';
+import '../../../../utils/actionQueue.js';
 
 /**
  * Declarative Table Header component

package/dist/components/core/Table/components/TableActions/TableActions.d.ts

@@ -1,8 +1,8 @@
-import React from 'react';
-import { TableActionsProps } from './TableActions.types';
+import React from "react";
+import { TableActionsProps } from "./TableActions.types";
 /**
  * TableActions component with smart display logic
  * - ≤2 actions: Show as individual icon buttons
- * - ≥3 actions: Show all actions in overflow menu
+ * - ≥3 actions: Show all actions in overflow menu using Dropdown
  */
 export declare const TableActions: <T>({ actions, row, maxVisibleActions, className, }: TableActionsProps<T>) => React.JSX.Element;

package/dist/components/core/Table/components/TableActions/TableActions.js

@@ -1,16 +1,22 @@
-import { __spreadArray } from '../../../../../node_modules/tslib/tslib.es6.js';
+import { __spreadArray } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
 import React__default, { useMemo } from 'react';
+import { EllipsisVerticalIcon } from '@heroicons/react/24/outline';
 import { cn } from '../../../../../utils/cn.js';
-import { Popover } from '../../../Popover/Popover.js';
-import '../../../Popover/PopoverContext.js';
+import '../../../../../utils/streamingErrors.js';
+import '../../../../../utils/optimisticErrors.js';
+import '../../../../../utils/actionQueue.js';
+import { Dropdown } from '../../../Dropdown/Dropdown.js';
+import '../../../Dropdown/DropdownTrigger.js';
+import '../../../Dropdown/DropdownMenu.js';
+import '../../../Dropdown/DropdownItem.js';
+import '../../../Dropdown/DropdownSection.js';
+import '../../../Dropdown/DropdownSeparator.js';
 import { Button } from '../../../Button/Button.js';
-import { TableActionsMenu } from './TableActionsMenu.js';
-import ForwardRef from '../../../../../node_modules/@heroicons/react/24/outline/esm/EllipsisVerticalIcon.js';
 
 /**
  * TableActions component with smart display logic
  * - ≤2 actions: Show as individual icon buttons
- * - ≥3 actions: Show all actions in overflow menu
+ * - ≥3 actions: Show all actions in overflow menu using Dropdown
  */
 var TableActions = function (_a) {
     var actions = _a.actions, row = _a.row, _b = _a.maxVisibleActions, maxVisibleActions = _b === void 0 ? 2 : _b, className = _a.className;
@@ -18,39 +24,55 @@ var TableActions = function (_a) {
     var sortedActions = useMemo(function () {
         return __spreadArray([], actions, true).sort(function (a, b) {
             var priorityOrder = { high: 0, normal: 1 };
-            var aPriority = priorityOrder[a.priority || 'normal'];
-            var bPriority = priorityOrder[b.priority || 'normal'];
+            var aPriority = priorityOrder[a.priority || "normal"];
+            var bPriority = priorityOrder[b.priority || "normal"];
             return aPriority - bPriority;
         });
     }, [actions]);
     // Determine display strategy
     var shouldUseMenu = actions.length > maxVisibleActions;
+    // Get disabled keys for Dropdown
+    var disabledKeys = useMemo(function () {
+        return sortedActions
+            .filter(function (action) { var _a; return (_a = action.disabled) === null || _a === void 0 ? void 0 : _a.call(action, row); })
+            .map(function (action) { return action.id; });
+    }, [sortedActions, row]);
+    // Handle action click from Dropdown
+    var handleAction = function (key) {
+        var _a;
+        var action = sortedActions.find(function (a) { return a.id === key; });
+        if (action && !((_a = action.disabled) === null || _a === void 0 ? void 0 : _a.call(action, row))) {
+            action.onClick(row);
+        }
+    };
     // Render individual action buttons
     var renderInlineActions = function (actionsToRender) {
         return actionsToRender.map(function (action) {
             var _a;
             var isDisabled = (_a = action.disabled) === null || _a === void 0 ? void 0 : _a.call(action, row);
             var Icon = action.icon;
-            return (React__default.createElement(Button, { key: action.id, color: "primary", variant: "link", iconOnly: true, onClick: function () { return action.onClick(row); }, disabled: isDisabled, "aria-label": action.label, className: cn(action.variant === 'danger'
-                    ? "text-red-400 hover:text-red-600"
-                    : "text-neutral-400 hover:text-neutral-700") },
+            return (React__default.createElement(Button, { key: action.id, color: "primary", variant: "link", iconOnly: true, onClick: function () { return action.onClick(row); }, disabled: isDisabled, "aria-label": action.label, className: cn(action.variant === "danger"
+                    ? "text-red-400 hover:text-red-600 dark:text-red-400 dark:hover:text-red-300"
+                    : "text-neutral-400 hover:text-neutral-700 dark:text-neutral-500 dark:hover:text-neutral-300") },
                 React__default.createElement(Icon, { className: "size-4" })));
         });
     };
-    // Render overflow menu
+    // Render overflow menu using Dropdown
     var renderOverflowMenu = function () {
-        return (React__default.createElement(Popover, { placement: "bottom-end", offset: 4 },
-            React__default.createElement(Popover.Trigger, null,
+        return (React__default.createElement(Dropdown, { placement: "bottom-end", offset: 4, disabledKeys: disabledKeys, onAction: handleAction },
+            React__default.createElement(Dropdown.Trigger, null,
                 React__default.createElement(Button, { color: "neutral", variant: "filled", size: "sm", iconOnly: true, "aria-label": "More actions", className: "text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)]" },
-                    React__default.createElement(ForwardRef, { className: "size-4" }))),
-            React__default.createElement(Popover.Content, { className: "p-0" },
-                React__default.createElement(TableActionsMenu, { actions: sortedActions, row: row, onClose: function () { } }))));
+                    React__default.createElement(EllipsisVerticalIcon, { className: "size-4" }))),
+            React__default.createElement(Dropdown.Menu, { "aria-label": "Row actions" }, sortedActions.map(function (action) {
+                var Icon = action.icon;
+                return (React__default.createElement(Dropdown.Item, { key: action.id, itemKey: action.id, isDanger: action.variant === "danger", startContent: React__default.createElement(Icon, { className: "size-4" }) }, action.label));
+            }))));
     };
-    return (React__default.createElement("div", { className: cn("flex items-center justify-end", className) }, shouldUseMenu ? (
-    // All actions in overflow menu
-    renderOverflowMenu()) : (
-    // Show actions inline
-    renderInlineActions(sortedActions))));
+    return (React__default.createElement("div", { className: cn("flex items-center justify-end", className) }, shouldUseMenu
+        ? // All actions in overflow menu
+            renderOverflowMenu()
+        : // Show actions inline
+            renderInlineActions(sortedActions)));
 };
 
 export { TableActions };

package/dist/components/core/Table/components/TableActions/TableActionsMenu.js

@@ -1,6 +1,9 @@
 import React__default from 'react';
 import { cn } from '../../../../../utils/cn.js';
-import '../../../../../node_modules/tslib/tslib.es6.js';
+import '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
+import '../../../../../utils/streamingErrors.js';
+import '../../../../../utils/optimisticErrors.js';
+import '../../../../../utils/actionQueue.js';
 
 /**
  * TableActionsMenu component for displaying actions in an overflow menu

package/dist/components/core/Table/components/TablePagination/TablePagination.js

@@ -3,7 +3,10 @@ import { Pagination } from '../../../Pagination/Pagination.js';
 import { Select } from '../../../../forms/Select/Select.js';
 import '../../../../forms/Select/Select.theme.js';
 import { cn } from '../../../../../utils/cn.js';
-import '../../../../../node_modules/tslib/tslib.es6.js';
+import '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
+import '../../../../../utils/streamingErrors.js';
+import '../../../../../utils/optimisticErrors.js';
+import '../../../../../utils/actionQueue.js';
 
 /**
  * TablePagination provides a standardized pagination interface for tables

package/dist/components/core/Table/components/TableSelectionHeader/TableSelectionHeader.js

@@ -1,8 +1,11 @@
 import React__default from 'react';
+import { XMarkIcon } from '@heroicons/react/24/outline';
 import { Button } from '../../../Button/Button.js';
 import { cn } from '../../../../../utils/cn.js';
-import '../../../../../node_modules/tslib/tslib.es6.js';
-import ForwardRef from '../../../../../node_modules/@heroicons/react/24/outline/esm/XMarkIcon.js';
+import '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
+import '../../../../../utils/streamingErrors.js';
+import '../../../../../utils/optimisticErrors.js';
+import '../../../../../utils/actionQueue.js';
 
 /**
  * Selection header that appears when rows are selected
@@ -22,7 +25,7 @@ var TableSelectionHeader = function (_a) {
                 return (React__default.createElement(Button, { key: action.id, color: "neutral", variant: "filled", onClick: function () { return action.onClick(selectedRows); }, className: "text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)]", size: "sm" }, action.label));
             })))),
         React__default.createElement(Button, { color: "primary", variant: "link", onClick: onClearSelection, "aria-label": "Clear selection" },
-            React__default.createElement(ForwardRef, { className: "size-4" }),
+            React__default.createElement(XMarkIcon, { className: "size-4" }),
             "Clear")));
 };
 

package/dist/components/core/Table/components/core/TableBody.js

@@ -1,4 +1,4 @@
-import { __spreadArray } from '../../../../../node_modules/tslib/tslib.es6.js';
+import { __spreadArray } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
 import React__default from 'react';
 import { TableRow } from './TableRow.js';
 import { getRowId } from '../../Table.utils.js';

package/dist/components/core/Table/components/core/TableCell.js

@@ -1,6 +1,9 @@
 import React__default from 'react';
 import { cn } from '../../../../../utils/cn.js';
-import '../../../../../node_modules/tslib/tslib.es6.js';
+import '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
+import '../../../../../utils/streamingErrors.js';
+import '../../../../../utils/optimisticErrors.js';
+import '../../../../../utils/actionQueue.js';
 
 /**
  * Internal TableCell component used by the data-driven API

package/dist/components/core/Table/components/core/TableHeader.js

@@ -1,4 +1,4 @@
-import { __spreadArray } from '../../../../../node_modules/tslib/tslib.es6.js';
+import { __spreadArray } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
 import React__default from 'react';
 import { TableCell } from './TableCell.js';
 import { Checkbox } from '../../../../forms/Checkbox/Checkbox.js';

package/dist/components/core/Table/components/core/TableRow.js

@@ -3,8 +3,7 @@ import { TableCell } from './TableCell.js';
 import { Button } from '../../../Button/Button.js';
 import { Checkbox } from '../../../../forms/Checkbox/Checkbox.js';
 import { Radio } from '../../../../forms/Radio/Radio.js';
-import ForwardRef from '../../../../../node_modules/@heroicons/react/24/outline/esm/MinusIcon.js';
-import ForwardRef$1 from '../../../../../node_modules/@heroicons/react/24/outline/esm/PlusIcon.js';
+import { MinusIcon, PlusIcon } from '@heroicons/react/24/outline';
 
 function TableRowComponent(_a) {
     var row = _a.row, rowId = _a.rowId, columns = _a.columns, expandedRowRender = _a.expandedRowRender, _b = _a.isExpanded, isExpanded = _b === void 0 ? false : _b, onExpandChange = _a.onExpandChange, selectable = _a.selectable, selectionType = _a.selectionType, _c = _a.isSelected, isSelected = _c === void 0 ? false : _c, onSelectionChange = _a.onSelectionChange, freezeFirstColumn = _a.freezeFirstColumn, freezeLastColumn = _a.freezeLastColumn, theme = _a.theme;
@@ -33,7 +32,7 @@ function TableRowComponent(_a) {
                     width: '48px',
                     align: 'center'
                 }, row: row, rowId: rowId, theme: theme },
-                React__default.createElement(Button, { color: "primary", variant: "ghost", size: "sm", onClick: handleExpandClick, "aria-label": isExpanded ? "Collapse row" : "Expand row" }, isExpanded ? React__default.createElement(ForwardRef, { className: "w-4 h-4", strokeWidth: 2 }) : React__default.createElement(ForwardRef$1, { className: "w-4 h-4", strokeWidth: 2 })))),
+                React__default.createElement(Button, { color: "primary", variant: "ghost", size: "sm", onClick: handleExpandClick, "aria-label": isExpanded ? "Collapse row" : "Expand row" }, isExpanded ? React__default.createElement(MinusIcon, { className: "w-4 h-4", strokeWidth: 2 }) : React__default.createElement(PlusIcon, { className: "w-4 h-4", strokeWidth: 2 })))),
             columns.map(function (column, index) { return (React__default.createElement(TableCell, { key: column.id, column: column, row: row, rowId: rowId, isFrozen: freezeFirstColumn && index === 0, isLastFrozen: freezeLastColumn && index === columns.length - 1, theme: theme })); })),
         isExpanded && expandedRowRender && (React__default.createElement("tr", null,
             React__default.createElement("td", { colSpan: columns.length +

package/dist/components/core/Table/index.js

@@ -2,7 +2,12 @@ import { Table as Table$1 } from './Table.js';
 import { HeaderCell, Cell, Row, Body, Header } from './components/DeclarativeComponents.js';
 import { TableActions } from './components/TableActions/TableActions.js';
 import 'react';
-import '../../../node_modules/tslib/tslib.es6.js';
+import 'clsx';
+import 'tailwind-merge';
+import '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
+import '../../../utils/streamingErrors.js';
+import '../../../utils/optimisticErrors.js';
+import '../../../utils/actionQueue.js';
 import { TablePagination } from './components/TablePagination/TablePagination.js';
 
 // First import the Table component itself

package/dist/components/core/Tabs/Tabs.js

@@ -1,4 +1,4 @@
-import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { __rest, __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
 import React__default, { useState, useRef, useCallback, useMemo } from 'react';
 import { cn } from '../../../utils/cn.js';
 import { tabsTheme } from './Tabs.theme.js';

package/dist/components/core/Tabs/TabsContent.js

@@ -1,12 +1,10 @@
-import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { __rest, __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
 import React__default, { useMemo } from 'react';
+import { useReducedMotion, motion, AnimatePresence } from 'motion/react';
 import { cn } from '../../../utils/cn.js';
 import { tabsTheme } from './Tabs.theme.js';
 import { useTabsContext } from './TabsContext.js';
 import { getTabsContentVariants } from './Tabs.animations.js';
-import { useReducedMotion } from '../../../node_modules/framer-motion/dist/es/utils/reduced-motion/use-reduced-motion.js';
-import { motion } from '../../../node_modules/framer-motion/dist/es/render/components/motion/proxy.js';
-import { AnimatePresence } from '../../../node_modules/framer-motion/dist/es/components/AnimatePresence/index.js';
 
 /**
  * TabsContent component displays content panels for tabs with directional fade animations

package/dist/components/core/Tabs/TabsList.js

@@ -1,11 +1,10 @@
-import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { __rest, __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
 import React__default, { useState, useRef, useMemo, useEffect } from 'react';
+import { useReducedMotion, motion } from 'motion/react';
 import { cn } from '../../../utils/cn.js';
 import { tabsTheme } from './Tabs.theme.js';
 import { useTabsContext } from './TabsContext.js';
 import { getUnderlineTransition } from './Tabs.animations.js';
-import { useReducedMotion } from '../../../node_modules/framer-motion/dist/es/utils/reduced-motion/use-reduced-motion.js';
-import { motion } from '../../../node_modules/framer-motion/dist/es/render/components/motion/proxy.js';
 
 /**
  * TabsList component displays the tab headers container with sliding underline

package/dist/components/core/Tabs/TabsTrigger.js

@@ -1,11 +1,10 @@
-import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { __rest, __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
 import React__default, { useMemo, useCallback, useEffect } from 'react';
+import { useReducedMotion, motion } from 'motion/react';
 import { cn } from '../../../utils/cn.js';
 import { tabsTheme } from './Tabs.theme.js';
 import { useTabsContext } from './TabsContext.js';
 import { getTabsTriggerVariants } from './Tabs.animations.js';
-import { useReducedMotion } from '../../../node_modules/framer-motion/dist/es/utils/reduced-motion/use-reduced-motion.js';
-import { motion } from '../../../node_modules/framer-motion/dist/es/render/components/motion/proxy.js';
 
 /**
  * TabsTrigger component displays individual tab headers with optional animations

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

@@ -1,29 +1,24 @@
-import { __rest } from '../../../node_modules/tslib/tslib.es6.js';
+import { __rest } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
 import React__default, { useEffect } from 'react';
+import { motion } from 'motion/react';
 import { cn } from '../../../utils/cn.js';
 import { toastTheme } from './Toast.theme.js';
 import { toastAnimations, getToastStackingAnimation } from './Toast.animations.js';
-import ForwardRef from '../../../node_modules/@heroicons/react/24/solid/esm/ArrowPathIcon.js';
-import ForwardRef$1 from '../../../node_modules/@heroicons/react/24/solid/esm/XCircleIcon.js';
-import ForwardRef$2 from '../../../node_modules/@heroicons/react/24/solid/esm/ExclamationTriangleIcon.js';
-import ForwardRef$3 from '../../../node_modules/@heroicons/react/24/solid/esm/CheckCircleIcon.js';
-import ForwardRef$4 from '../../../node_modules/@heroicons/react/24/solid/esm/InformationCircleIcon.js';
-import ForwardRef$5 from '../../../node_modules/@heroicons/react/24/solid/esm/XMarkIcon.js';
-import { motion } from '../../../node_modules/framer-motion/dist/es/render/components/motion/proxy.js';
+import { ArrowPathIcon, XCircleIcon, ExclamationTriangleIcon, CheckCircleIcon, InformationCircleIcon, XMarkIcon } from '@heroicons/react/24/solid';
 
 var colorIcons = {
-    neutral: ForwardRef$4,
-    dark: ForwardRef$4,
-    primary: ForwardRef$4,
-    success: ForwardRef$3,
-    warning: ForwardRef$2,
-    danger: ForwardRef$1,
+    neutral: InformationCircleIcon,
+    dark: InformationCircleIcon,
+    primary: InformationCircleIcon,
+    success: CheckCircleIcon,
+    warning: ExclamationTriangleIcon,
+    danger: XCircleIcon,
 };
 var Toast = React__default.forwardRef(function (_a, ref) {
     var _b, _c, _d, _e, _f, _g;
     var toast = _a.toast, className = _a.className; _a.theme; var onDismiss = _a.onDismiss, _j = _a.index, index = _j === void 0 ? 0 : _j, _k = _a.isExpanded, isExpanded = _k === void 0 ? false : _k, _l = _a.totalToasts, totalToasts = _l === void 0 ? 1 : _l, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave; __rest(_a, ["toast", "className", "theme", "onDismiss", "index", "isExpanded", "totalToasts", "onMouseEnter", "onMouseLeave"]);
     var id = toast.id, _m = toast.color, color = _m === void 0 ? 'primary' : _m, _o = toast.state, state = _o === void 0 ? 'default' : _o, title = toast.title, description = toast.description, icon = toast.icon, action = toast.action, _p = toast.duration, duration = _p === void 0 ? 5000 : _p, _q = toast.dismissible, dismissible = _q === void 0 ? true : _q;
-    var IconComponent = state === 'loading' ? ForwardRef : colorIcons[color];
+    var IconComponent = state === 'loading' ? ArrowPathIcon : colorIcons[color];
     // Auto-dismiss after duration
     useEffect(function () {
         if (duration > 0 && dismissible) {
@@ -61,7 +56,7 @@ var Toast = React__default.forwardRef(function (_a, ref) {
             action && (React__default.createElement("div", { className: "mt-2" },
                 React__default.createElement("button", { type: "button", className: toastTheme.actionStyle, onClick: handleActionClick }, action.label)))),
         dismissible && (React__default.createElement("button", { type: "button", className: toastTheme.closeButtonStyle, onClick: handleDismiss, "aria-label": "Dismiss notification" },
-            React__default.createElement(ForwardRef$5, { className: "w-4 h-4" })))));
+            React__default.createElement(XMarkIcon, { className: "w-4 h-4" })))));
 });
 Toast.displayName = 'Toast';
 

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

@@ -1,10 +1,10 @@
-import { __assign, __spreadArray } from '../../../node_modules/tslib/tslib.es6.js';
+import { __assign, __spreadArray } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
 import React__default, { createContext, useState, useCallback, useContext } from 'react';
+import { AnimatePresence } from 'motion/react';
 import { createPortal } from 'react-dom';
 import { Toast } from './Toast.js';
 import { toastTheme } from './Toast.theme.js';
 import { cn } from '../../../utils/cn.js';
-import { AnimatePresence } from '../../../node_modules/framer-motion/dist/es/components/AnimatePresence/index.js';
 
 var ToastContext = createContext(undefined);
 var positionStyles = {

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

@@ -1,4 +1,4 @@
-import { __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
 
 // Define optimized spring configurations
 var springConfig = {
@@ -42,5 +42,21 @@ var getTooltipVariants = function (placement) {
             return baseTooltipVariants;
     }
 };
+/**
+ * Spring animation configuration options
+ */
+var tooltipSpringConfig = {
+    light: {
+        type: "spring",
+        stiffness: 200,
+        damping: 25
+    },
+    medium: springConfig,
+    bouncy: {
+        type: "spring",
+        stiffness: 400,
+        damping: 15
+    }
+};
 
-export { baseTooltipVariants, getTooltipVariants };
+export { baseTooltipVariants, getTooltipVariants, tooltipSpringConfig };

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

@@ -1,21 +1,53 @@
-import { __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
 import React__default, { useState, useRef, useCallback, useEffect } from 'react';
+import { useReducedMotion, AnimatePresence, motion } from 'motion/react';
 import { createPortal } from 'react-dom';
 import { cn } from '../../../utils/cn.js';
+import '../../../utils/streamingErrors.js';
+import '../../../utils/optimisticErrors.js';
+import '../../../utils/actionQueue.js';
 import { tooltipTheme } from './Tooltip.theme.js';
 import { getTooltipVariants } from './Tooltip.animations.js';
 import { useSelectPortal } from '../../../hooks/useSelectPortal.js';
-import { AnimatePresence } from '../../../node_modules/framer-motion/dist/es/components/AnimatePresence/index.js';
-import { useReducedMotion } from '../../../node_modules/framer-motion/dist/es/utils/reduced-motion/use-reduced-motion.js';
-import { motion } from '../../../node_modules/framer-motion/dist/es/render/components/motion/proxy.js';
 
+/**
+ * Hook to detect dark mode state from document
+ */
+var useDarkMode = function () {
+    var _a = useState(false), isDark = _a[0], setIsDark = _a[1];
+    useEffect(function () {
+        if (typeof document === "undefined")
+            return;
+        var checkDarkMode = function () {
+            var hasDarkClass = document.documentElement.classList.contains("dark") ||
+                document.body.classList.contains("dark") ||
+                document.querySelector(".dark") !== null;
+            setIsDark(hasDarkClass);
+        };
+        checkDarkMode();
+        // Observe class changes on html and body
+        var observer = new MutationObserver(checkDarkMode);
+        observer.observe(document.documentElement, {
+            attributes: true,
+            attributeFilter: ["class"],
+        });
+        observer.observe(document.body, {
+            attributes: true,
+            attributeFilter: ["class"],
+        });
+        return function () { return observer.disconnect(); };
+    }, []);
+    return isDark;
+};
 var Tooltip = function (_a) {
-    var content = _a.content, children = _a.children, _b = _a.placement, placement = _b === void 0 ? 'top' : _b, _c = _a.delay, delay = _c === void 0 ? 300 : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, className = _a.className, _e = _a.maxWidth, maxWidth = _e === void 0 ? "360px" : _e, _f = _a.minWidth, minWidth = _f === void 0 ? "fit-content" : _f, _g = _a.showOnFocus, showOnFocus = _g === void 0 ? true : _g, _h = _a.wrapText, wrapText = _h === void 0 ? false : _h, id = _a.id, themeOverrides = _a.theme, ariaLabel = _a["aria-label"], _j = _a.role, role = _j === void 0 ? 'tooltip' : _j;
+    var content = _a.content, children = _a.children, _b = _a.placement, placement = _b === void 0 ? "top" : _b, _c = _a.delay, delay = _c === void 0 ? 300 : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, className = _a.className, _e = _a.maxWidth, maxWidth = _e === void 0 ? "360px" : _e, _f = _a.minWidth, minWidth = _f === void 0 ? "fit-content" : _f, _g = _a.showOnFocus, showOnFocus = _g === void 0 ? true : _g, _h = _a.wrapText, wrapText = _h === void 0 ? false : _h, id = _a.id, themeOverrides = _a.theme, ariaLabel = _a["aria-label"], _j = _a.role, role = _j === void 0 ? "tooltip" : _j;
     var _k = useState(false), isVisible = _k[0], setIsVisible = _k[1];
     var tooltipRef = useRef(null);
     var triggerRef = useRef(null);
     var timerRef = useRef(null);
     var shouldReduceMotion = useReducedMotion();
+    // Detect dark mode for portal content
+    var isDarkMode = useDarkMode();
     // Merge global theme with component-specific overrides
     var theme = __assign(__assign({}, tooltipTheme), (themeOverrides || {}));
     // Use the same positioning hook as Popover/Select for consistent behavior
@@ -54,7 +86,7 @@ var Tooltip = function (_a) {
     }, []);
     // Keyboard handler
     var handleKeyDown = useCallback(function (e) {
-        if (e.key === 'Escape') {
+        if (e.key === "Escape") {
             handleHideTooltip();
         }
     }, [handleHideTooltip]);
@@ -66,17 +98,22 @@ var Tooltip = function (_a) {
     // Combine refs for portal positioning
     var handleRef = useCallback(function (el) {
         tooltipRef.current = el;
-        if (portalContentRef && typeof portalContentRef === 'object' && 'current' in portalContentRef) {
+        if (portalContentRef &&
+            typeof portalContentRef === "object" &&
+            "current" in portalContentRef) {
             portalContentRef.current = el;
         }
     }, [portalContentRef]);
     // Computed values
-    var textOverflowClass = wrapText ? '' : 'text-ellipsis overflow-hidden whitespace-nowrap';
-    var widthClasses = cn(minWidth === 'fit-content' ? 'w-fit' : 'min-w-fit', textOverflowClass);
-    var tooltipContent = (React__default.createElement(AnimatePresence, null, isVisible && (React__default.createElement(motion.div, { id: id, role: role, ref: handleRef, style: __assign(__assign({ maxWidth: maxWidth, minWidth: minWidth !== 'fit-content' ? minWidth : undefined, width: 'max-content' }, cssVariables), { top: "".concat(position.top, "px"), left: "".concat(position.left, "px") }), className: cn(theme.baseStyle, widthClasses, className), "aria-hidden": !isVisible, "aria-label": ariaLabel, "aria-live": role === 'tooltip' ? 'polite' : undefined, variants: shouldReduceMotion ? {} : getTooltipVariants(placement), initial: shouldReduceMotion ? undefined : "initial", animate: shouldReduceMotion ? undefined : "animate", exit: shouldReduceMotion ? undefined : "exit" }, content))));
+    var textOverflowClass = wrapText
+        ? ""
+        : "text-ellipsis overflow-hidden whitespace-nowrap";
+    var widthClasses = cn(minWidth === "fit-content" ? "w-fit" : "min-w-fit", textOverflowClass);
+    var tooltipContent = (React__default.createElement(AnimatePresence, null, isVisible && (React__default.createElement(motion.div, { id: id, role: role, ref: handleRef, style: __assign(__assign({ maxWidth: maxWidth, minWidth: minWidth !== "fit-content" ? minWidth : undefined, width: "max-content" }, cssVariables), { top: "".concat(position.top, "px"), left: "".concat(position.left, "px") }), className: cn(theme.baseStyle, widthClasses, className), "aria-hidden": !isVisible, "aria-label": ariaLabel, "aria-live": role === "tooltip" ? "polite" : undefined, variants: shouldReduceMotion ? {} : getTooltipVariants(placement), initial: shouldReduceMotion ? undefined : "initial", animate: shouldReduceMotion ? undefined : "animate", exit: shouldReduceMotion ? undefined : "exit" }, content))));
     return (React__default.createElement("div", __assign({ className: "relative inline-block", ref: triggerRef }, triggerHandlers, { tabIndex: showOnFocus ? 0 : undefined, "aria-describedby": isVisible && id ? id : undefined }),
         children,
-        typeof document !== 'undefined' && createPortal(tooltipContent, document.body)));
+        typeof document !== "undefined" &&
+            createPortal(React__default.createElement("div", { className: isDarkMode ? "dark" : undefined }, tooltipContent), document.body)));
 };
 // Set display name for dev tools and Storybook
 Tooltip.displayName = "Tooltip";

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

@@ -1,6 +1,7 @@
 var tooltipTheme = {
     // Base style for the tooltip - using fixed positioning for portal rendering
-    baseStyle: "fixed z-50 rounded-lg 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 glass-effect",
+    baseStyle: "fixed z-50 rounded-lg 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)]",
 };
 
 export { tooltipTheme };

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

@@ -1,4 +1,4 @@
-import { __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
 
 // Optimized spring configuration for smooth expand/collapse
 var SPRING_CONFIG = {