flikkui 0.1.0-beta.8 → 0.2.0-beta.1

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

@@ -1,38 +1,96 @@
-// Animation variants for expand/collapse
-var treeNodeVariants = {
+// 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: {
-            duration: 0.2,
-            ease: 'easeOut',
+            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: {
-            duration: 0.15,
-            ease: 'easeIn',
+            height: {
+                ...SPRING_CONFIG,
+                duration: 0.25,
+            },
+            opacity: {
+                ...SPRING_CONFIG,
+                duration: 0.15,
+            },
+            scaleY: {
+                ...SPRING_CONFIG,
+                duration: 0.2,
+            },
         },
     },
 };
-// Animation variants for expand icon rotation
-var expandIconVariants = {
+// Icon rotation animation for expand/collapse indication
+const expandIconVariants = {
     expanded: {
         rotate: 90,
-        transition: {
-            duration: 0.2,
-            ease: 'easeOut',
-        },
+        transition: SPRING_CONFIG,
     },
     collapsed: {
         rotate: 0,
-        transition: {
-            duration: 0.15,
-            ease: 'easeIn',
-        },
+        transition: SPRING_CONFIG,
+    },
+};
+// Stagger animation for children nodes
+const childrenStagger = {
+    staggerChildren: 0.03,
+    delayChildren: 0.05,
+};
+// Individual child node entry animation
+const childNodeVariants = {
+    hidden: {
+        opacity: 0,
+        x: -10,
+        transition: SPRING_CONFIG,
     },
+    visible: {
+        opacity: 1,
+        x: 0,
+        transition: SPRING_CONFIG,
+    },
+};
+// Reduced motion variants for accessibility
+const getReducedMotionVariants = (originalVariants) => {
+    const reducedVariants = {};
+    Object.keys(originalVariants).forEach((key) => {
+        const variant = originalVariants[key];
+        if (typeof variant === 'object' && variant !== null) {
+            reducedVariants[key] = {
+                ...variant,
+                transition: {
+                    duration: 0.01, // Nearly instant for reduced motion
+                    ease: 'linear',
+                },
+            };
+        }
+    });
+    return reducedVariants;
 };
 
-export { expandIconVariants, treeNodeVariants };
+export { childNodeVariants, childrenStagger, expandIconVariants, getReducedMotionVariants, treeNodeVariants };

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

@@ -1,20 +1,17 @@
-import { __rest, __assign, __spreadArray } from '../../../node_modules/tslib/tslib.es6.js';
 import React__default, { useState, useCallback } from 'react';
+import { useReducedMotion, motion, AnimatePresence } from 'motion/react';
 import { cn } from '../../../utils/cn.js';
 import { treeTheme } from './Tree.theme.js';
 import { Checkbox } from '../../forms/Checkbox/Checkbox.js';
-import { expandIconVariants, treeNodeVariants } from './Tree.animations.js';
-import ForwardRef from '../../../node_modules/@heroicons/react/24/outline/esm/ChevronRightIcon.js';
-import ForwardRef$1 from '../../../node_modules/@heroicons/react/24/outline/esm/DocumentIcon.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';
+import { ChevronRightIcon, DocumentIcon } from '@heroicons/react/24/outline';
+import { getReducedMotionVariants, treeNodeVariants, expandIconVariants, childNodeVariants, childrenStagger } from './Tree.animations.js';
 
 // Simplified selection utilities (merged from Tree.utils.ts)
-var getDescendantIds = function (node) {
-    var descendants = [];
-    var traverse = function (currentNode) {
+const getDescendantIds = (node) => {
+    const descendants = [];
+    const traverse = (currentNode) => {
         if (currentNode.children) {
-            currentNode.children.forEach(function (child) {
+            currentNode.children.forEach(child => {
                 descendants.push(child.id);
                 traverse(child);
             });
@@ -23,46 +20,43 @@ var getDescendantIds = function (node) {
     traverse(node);
     return descendants;
 };
-var calculateSelection = function (nodeId, selectedKeys, data) {
+const calculateSelection = (nodeId, selectedKeys, data) => {
     // Find the node in the tree
-    var findNode = function (nodes, id) {
-        for (var _i = 0, nodes_1 = nodes; _i < nodes_1.length; _i++) {
-            var node_1 = nodes_1[_i];
-            if (node_1.id === id)
-                return node_1;
-            if (node_1.children) {
-                var found = findNode(node_1.children, id);
+    const findNode = (nodes, id) => {
+        for (const node of nodes) {
+            if (node.id === id)
+                return node;
+            if (node.children) {
+                const found = findNode(node.children, id);
                 if (found)
                     return found;
             }
         }
         return null;
     };
-    var node = findNode(data, nodeId);
+    const node = findNode(data, nodeId);
     if (!node)
-        return { selectedKeys: selectedKeys, indeterminateKeys: [] };
-    var isCurrentlySelected = selectedKeys.includes(nodeId);
-    var newSelectedKeys = __spreadArray([], selectedKeys, true);
+        return { selectedKeys, indeterminateKeys: [] };
+    const isCurrentlySelected = selectedKeys.includes(nodeId);
+    let newSelectedKeys = [...selectedKeys];
     if (isCurrentlySelected) {
         // Deselecting: remove this node and all its descendants
-        var descendantIds_1 = getDescendantIds(node);
-        newSelectedKeys = newSelectedKeys.filter(function (id) {
-            return id !== nodeId && !descendantIds_1.includes(id);
-        });
+        const descendantIds = getDescendantIds(node);
+        newSelectedKeys = newSelectedKeys.filter(id => id !== nodeId && !descendantIds.includes(id));
     }
     else {
         // Selecting: add this node and all its descendants
-        var descendantIds = getDescendantIds(node);
-        newSelectedKeys.push.apply(newSelectedKeys, __spreadArray([nodeId], descendantIds, false));
+        const descendantIds = getDescendantIds(node);
+        newSelectedKeys.push(nodeId, ...descendantIds);
         newSelectedKeys = Array.from(new Set(newSelectedKeys));
     }
     // Calculate indeterminate states (simplified)
-    var indeterminateKeys = [];
-    var calculateIndeterminate = function (nodes) {
-        nodes.forEach(function (node) {
+    const indeterminateKeys = [];
+    const calculateIndeterminate = (nodes) => {
+        nodes.forEach(node => {
             if (node.children && node.children.length > 0) {
-                var childrenIds = node.children.map(function (child) { return child.id; });
-                var selectedChildren = childrenIds.filter(function (id) { return newSelectedKeys.includes(id); });
+                const childrenIds = node.children.map(child => child.id);
+                const selectedChildren = childrenIds.filter(id => newSelectedKeys.includes(id));
                 // Node is indeterminate if some (but not all) children are selected
                 if (selectedChildren.length > 0 && selectedChildren.length < childrenIds.length && !newSelectedKeys.includes(node.id)) {
                     indeterminateKeys.push(node.id);
@@ -74,15 +68,18 @@ var calculateSelection = function (nodeId, selectedKeys, data) {
     calculateIndeterminate(data);
     return {
         selectedKeys: newSelectedKeys,
-        indeterminateKeys: indeterminateKeys
+        indeterminateKeys
     };
 };
-var InternalTreeNode = function (_a) {
-    var _b;
-    var node = _a.node, level = _a.level, expanded = _a.expanded, selected = _a.selected, isIndeterminate = _a.isIndeterminate, selectable = _a.selectable, checkable = _a.checkable, hierarchicalSelection = _a.hierarchicalSelection, expandable = _a.expandable, expandedKeys = _a.expandedKeys, selectedKeys = _a.selectedKeys, indeterminateKeys = _a.indeterminateKeys, onNodeClick = _a.onNodeClick, onToggleExpand = _a.onToggleExpand, theme = _a.theme, className = _a.className;
-    var hasChildren = node.children && node.children.length > 0;
-    var isExpandable = expandable && hasChildren;
-    var handleNodeClick = function (e) {
+const InternalTreeNode = ({ node, level, expanded, selected, isIndeterminate, selectable, checkable, hierarchicalSelection, expandable, expandedKeys, selectedKeys, indeterminateKeys, onNodeClick, onToggleExpand, theme, className, shouldReduceMotion, }) => {
+    var _a;
+    const hasChildren = node.children && node.children.length > 0;
+    const isExpandable = expandable && hasChildren;
+    // Get appropriate animation variants based on reduced motion preference
+    const nodeVariants = shouldReduceMotion ? getReducedMotionVariants(treeNodeVariants) : treeNodeVariants;
+    const iconVariants = shouldReduceMotion ? getReducedMotionVariants(expandIconVariants) : expandIconVariants;
+    const childVariants = shouldReduceMotion ? getReducedMotionVariants(childNodeVariants) : childNodeVariants;
+    const handleNodeClick = (e) => {
         e.stopPropagation();
         if (node.disabled)
             return;
@@ -90,44 +87,77 @@ var InternalTreeNode = function (_a) {
             onNodeClick(node);
         }
     };
-    var handleExpandClick = function (e) {
+    const handleExpandClick = (e) => {
         e.stopPropagation(); // Prevent bubbling to parent node click handler
         if (isExpandable && !node.disabled) {
             onToggleExpand(node);
         }
     };
-    var nodeStyle = cn(theme.nodeStyle, {
+    const handleKeyDown = (e) => {
+        if (node.disabled)
+            return;
+        switch (e.key) {
+            case 'Enter':
+            case ' ':
+                e.preventDefault();
+                if (selectable) {
+                    onNodeClick(node);
+                }
+                break;
+            case 'ArrowRight':
+                if (isExpandable && !expanded) {
+                    e.preventDefault();
+                    onToggleExpand(node);
+                }
+                break;
+            case 'ArrowLeft':
+                if (isExpandable && expanded) {
+                    e.preventDefault();
+                    onToggleExpand(node);
+                }
+                break;
+        }
+    };
+    const nodeStyle = cn(theme.nodeStyle, {
         'opacity-50 cursor-not-allowed': node.disabled,
         'cursor-pointer': (selectable || (hasChildren && expandable)) && !node.disabled,
     }, className);
-    var labelStyle = cn(theme.labelStyle, {
-        'text-text-muted': node.disabled,
+    const labelStyle = cn(theme.labelStyle, {
+        'text-[var(--color-text-muted)]': node.disabled,
     });
     return (React__default.createElement("div", null,
-        React__default.createElement(motion.div, { className: nodeStyle, style: { paddingLeft: "calc(".concat(level, " * ").concat(theme.indentSize, " + 0.25rem)") }, onClick: handleNodeClick },
-            isExpandable ? (React__default.createElement(motion.span, { className: cn(theme.expandIconStyle), variants: expandIconVariants, initial: "collapsed", animate: expanded ? "expanded" : "collapsed", onClick: handleExpandClick },
-                React__default.createElement(ForwardRef, { className: "size-4", strokeWidth: 2 }))) : (React__default.createElement("span", { className: "w-4 mr-1" })),
-            checkable && (React__default.createElement(Checkbox, { id: "tree-checkbox-".concat(node.id), name: "tree-checkbox-".concat(node.id), value: node.id, checked: selected, indeterminate: hierarchicalSelection && isIndeterminate, onChange: function () { return onNodeClick(node); }, state: node.disabled ? "disabled" : "default", className: cn(theme.checkboxStyle, "flex-shrink-0"), onClick: function (e) { return e.stopPropagation(); } })),
-            (node.icon || !isExpandable) && (React__default.createElement("span", { className: cn(theme.iconStyle) }, node.icon || React__default.createElement(ForwardRef$1, { className: "w-4 h-4" }))),
+        React__default.createElement("div", { className: nodeStyle, style: { paddingLeft: `calc(${level} * ${theme.indentSize} + 0.25rem)` }, onClick: handleNodeClick, onKeyDown: handleKeyDown, tabIndex: node.disabled ? -1 : 0, role: "treeitem", "aria-expanded": isExpandable ? expanded : false, "aria-selected": selectable ? selected : undefined, "aria-disabled": node.disabled },
+            isExpandable ? (React__default.createElement(motion.span, { className: cn(theme.expandIconStyle), variants: iconVariants, initial: "collapsed", animate: expanded ? "expanded" : "collapsed", onClick: handleExpandClick, role: "button", "aria-label": expanded ? 'Collapse' : 'Expand', tabIndex: -1 },
+                React__default.createElement(ChevronRightIcon, { className: "size-4", strokeWidth: 2 }))) : (React__default.createElement("span", { className: "w-4 mr-1" })),
+            checkable && (React__default.createElement(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: cn(theme.checkboxStyle, "flex-shrink-0"), onClick: (e) => e.stopPropagation() })),
+            (node.icon || !isExpandable) && (React__default.createElement("span", { className: cn(theme.iconStyle) }, node.icon || React__default.createElement(DocumentIcon, { className: "w-4 h-4" }))),
             React__default.createElement("span", { className: labelStyle, title: node.label }, node.label)),
-        hasChildren && (React__default.createElement(AnimatePresence, { initial: false }, expanded && (React__default.createElement(motion.div, { key: "".concat(node.id, "-children"), variants: treeNodeVariants, initial: "collapsed", animate: "expanded", exit: "collapsed", style: { overflow: 'hidden' } }, (_b = node.children) === null || _b === void 0 ? void 0 : _b.map(function (childNode) { return (React__default.createElement(InternalTreeNode, { key: childNode.id, node: childNode, level: level + 1, expanded: expandedKeys.includes(childNode.id), selected: selectedKeys.includes(childNode.id), isIndeterminate: indeterminateKeys.includes(childNode.id), selectable: selectable, checkable: checkable, hierarchicalSelection: hierarchicalSelection, expandable: expandable, expandedKeys: expandedKeys, selectedKeys: selectedKeys, indeterminateKeys: indeterminateKeys, onNodeClick: onNodeClick, onToggleExpand: onToggleExpand, theme: theme })); })))))));
+        hasChildren && (React__default.createElement(AnimatePresence, { initial: false }, expanded && (React__default.createElement(motion.div, { key: `${node.id}-children`, variants: nodeVariants, initial: "collapsed", animate: "expanded", exit: "collapsed", style: {
+                overflow: 'hidden',
+                transformOrigin: 'top'
+            }, transition: shouldReduceMotion ? { duration: 0.01 } : childrenStagger }, (_a = node.children) === null || _a === void 0 ? void 0 : _a.map((childNode, index) => (React__default.createElement(motion.div, { key: childNode.id, variants: childVariants, initial: "hidden", animate: "visible", exit: "hidden", custom: index },
+            React__default.createElement(InternalTreeNode, { node: childNode, level: level + 1, expanded: expandedKeys.includes(childNode.id), selected: selectedKeys.includes(childNode.id), isIndeterminate: indeterminateKeys.includes(childNode.id), selectable: selectable, checkable: checkable, hierarchicalSelection: hierarchicalSelection, expandable: expandable, expandedKeys: expandedKeys, selectedKeys: selectedKeys, indeterminateKeys: indeterminateKeys, onNodeClick: onNodeClick, onToggleExpand: onToggleExpand, theme: theme, shouldReduceMotion: shouldReduceMotion }))))))))));
 };
-var TreeRoot = React__default.forwardRef(function (_a, ref) {
-    var data = _a.data, _b = _a.selectable, selectable = _b === void 0 ? false : _b, _c = _a.checkable, checkable = _c === void 0 ? false : _c, hierarchicalSelection = _a.hierarchicalSelection, _d = _a.expandable, expandable = _d === void 0 ? true : _d, _e = _a.defaultExpandedKeys, defaultExpandedKeys = _e === void 0 ? [] : _e, _f = _a.defaultSelectedKeys, defaultSelectedKeys = _f === void 0 ? [] : _f, onSelectionChange = _a.onSelectionChange, onExpand = _a.onExpand, className = _a.className, _g = _a.theme, customTheme = _g === void 0 ? {} : _g, htmlProps = __rest(_a, ["data", "selectable", "checkable", "hierarchicalSelection", "expandable", "defaultExpandedKeys", "defaultSelectedKeys", "onSelectionChange", "onExpand", "className", "theme"]);
+const TreeRoot = React__default.forwardRef(({ data, selectable = false, checkable = false, hierarchicalSelection, expandable = true, defaultExpandedKeys = [], defaultSelectedKeys = [], onSelectionChange, onExpand, className, theme: customTheme = {}, ...htmlProps }, ref) => {
+    var _a;
     // Auto-enable hierarchical selection when checkboxes are used, unless explicitly overridden
-    var enableHierarchicalSelection = hierarchicalSelection !== null && hierarchicalSelection !== void 0 ? hierarchicalSelection : checkable;
-    var theme = __assign(__assign({}, treeTheme), customTheme);
+    const enableHierarchicalSelection = hierarchicalSelection !== null && hierarchicalSelection !== void 0 ? hierarchicalSelection : checkable;
+    const shouldReduceMotion = (_a = useReducedMotion()) !== null && _a !== void 0 ? _a : false;
+    const theme = {
+        ...treeTheme,
+        ...customTheme,
+    };
     // Simplified state management
-    var _h = useState(defaultExpandedKeys), expandedKeys = _h[0], setExpandedKeys = _h[1];
-    var _j = useState(defaultSelectedKeys), selectedKeys = _j[0], setSelectedKeys = _j[1];
-    var _k = useState([]), indeterminateKeys = _k[0], setIndeterminateKeys = _k[1];
+    const [expandedKeys, setExpandedKeys] = useState(defaultExpandedKeys);
+    const [selectedKeys, setSelectedKeys] = useState(defaultSelectedKeys);
+    const [indeterminateKeys, setIndeterminateKeys] = useState([]);
     // Handle node selection
-    var handleNodeSelect = useCallback(function (node) {
+    const handleNodeSelect = useCallback((node) => {
         if (!selectable || node.disabled)
             return;
         if (enableHierarchicalSelection && checkable) {
             // Hierarchical selection mode
-            var result = calculateSelection(node.id, selectedKeys, data);
+            const result = calculateSelection(node.id, selectedKeys, data);
             setSelectedKeys(result.selectedKeys);
             setIndeterminateKeys(result.indeterminateKeys);
             // Call callback with simplified signature
@@ -135,14 +165,14 @@ var TreeRoot = React__default.forwardRef(function (_a, ref) {
         }
         else {
             // Simple selection mode
-            var newSelectedKeys = void 0;
+            let newSelectedKeys;
             if (checkable) {
                 // Multi-selection mode
                 if (selectedKeys.includes(node.id)) {
-                    newSelectedKeys = selectedKeys.filter(function (key) { return key !== node.id; });
+                    newSelectedKeys = selectedKeys.filter(key => key !== node.id);
                 }
                 else {
-                    newSelectedKeys = __spreadArray(__spreadArray([], selectedKeys, true), [node.id], false);
+                    newSelectedKeys = [...selectedKeys, node.id];
                 }
             }
             else {
@@ -154,24 +184,24 @@ var TreeRoot = React__default.forwardRef(function (_a, ref) {
         }
     }, [selectedKeys, data, selectable, checkable, enableHierarchicalSelection, onSelectionChange]);
     // Handle node expand/collapse
-    var handleNodeToggleExpand = useCallback(function (node) {
+    const handleNodeToggleExpand = useCallback((node) => {
         if (!expandable || node.disabled)
             return;
-        var isExpanded = expandedKeys.includes(node.id);
-        var newExpandedKeys;
+        const isExpanded = expandedKeys.includes(node.id);
+        let newExpandedKeys;
         if (isExpanded) {
-            newExpandedKeys = expandedKeys.filter(function (key) { return key !== node.id; });
+            newExpandedKeys = expandedKeys.filter(key => key !== node.id);
         }
         else {
-            newExpandedKeys = __spreadArray(__spreadArray([], expandedKeys, true), [node.id], false);
+            newExpandedKeys = [...expandedKeys, node.id];
         }
         setExpandedKeys(newExpandedKeys);
         onExpand === null || onExpand === void 0 ? void 0 : onExpand(newExpandedKeys, node, !isExpanded);
     }, [expandedKeys, expandable, onExpand]);
-    return (React__default.createElement("div", __assign({ ref: ref, className: cn(theme.baseStyle, 'tree-container', className), role: "tree", "aria-multiselectable": checkable }, htmlProps), data.map(function (node) { return (React__default.createElement(InternalTreeNode, { key: node.id, node: node, level: 0, expanded: expandedKeys.includes(node.id), selected: selectedKeys.includes(node.id), isIndeterminate: indeterminateKeys.includes(node.id), selectable: selectable, checkable: checkable, hierarchicalSelection: enableHierarchicalSelection, expandable: expandable, expandedKeys: expandedKeys, selectedKeys: selectedKeys, indeterminateKeys: indeterminateKeys, onNodeClick: handleNodeSelect, onToggleExpand: handleNodeToggleExpand, theme: theme })); })));
+    return (React__default.createElement("div", { ref: ref, className: cn(theme.baseStyle, 'tree-container', className), role: "tree", "aria-multiselectable": checkable, ...htmlProps }, data.map((node) => (React__default.createElement(InternalTreeNode, { key: node.id, node: node, level: 0, expanded: expandedKeys.includes(node.id), selected: selectedKeys.includes(node.id), isIndeterminate: indeterminateKeys.includes(node.id), selectable: selectable, checkable: checkable, hierarchicalSelection: enableHierarchicalSelection, expandable: expandable, expandedKeys: expandedKeys, selectedKeys: selectedKeys, indeterminateKeys: indeterminateKeys, onNodeClick: handleNodeSelect, onToggleExpand: handleNodeToggleExpand, theme: theme, shouldReduceMotion: shouldReduceMotion })))));
 });
 TreeRoot.displayName = 'Tree';
 // Simplified compound component
-var Tree = TreeRoot;
+const Tree = TreeRoot;
 
 export { Tree };

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

@@ -1,11 +1,10 @@
-var treeTheme = {
-    baseStyle: 'tree-root',
-    nodeStyle: 'flex items-center py-1 pr-1 rounded-md hover:bg-gray-50 cursor-pointer transition-colors select-none gap-1',
-    labelStyle: 'flex-1 text-base text-gray-900 truncate',
-    iconStyle: 'flex-shrink-0 mr-2 text-gray-400',
-    expandIconStyle: 'flex-shrink-0 mr-1 text-text-muted hover:text-text-primary transition-colors cursor-pointer size-4 flex items-center justify-center',
-    checkboxStyle: 'mr-2 flex-shrink-0',
-    indentSize: '1.25rem',
+const treeTheme = {
+    baseStyle: 'flex flex-col w-full',
+    nodeStyle: 'flex items-center py-1 pr-1 rounded-md 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',
+    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',
 };
 
 export { treeTheme };

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

@@ -24,7 +24,6 @@ export interface TreeTheme {
     iconStyle: string;
     expandIconStyle: string;
     indentSize: string;
-    checkboxStyle: string;
 }
 export interface TreeThemeOverrides {
     baseStyle?: string;
@@ -33,7 +32,6 @@ export interface TreeThemeOverrides {
     iconStyle?: string;
     expandIconStyle?: string;
     indentSize?: string;
-    checkboxStyle?: string;
 }
 export interface TreeProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onSelect'> {
     /** Tree data structure */

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

@@ -0,0 +1,45 @@
+export * from "./Accordion";
+export * from "./AlertDialog";
+export * from "./Avatar";
+export * from "./AvatarGroup";
+export * from "./Badge";
+export * from "./Breadcrumbs";
+export * from "./Button";
+export * from "./ButtonGroup";
+export * from "./Calendar";
+export * from "./Card";
+export * from "./CardStack";
+export * from "./Carousel";
+export * from "./CommandPalette";
+export * from "./Divider";
+export * from "./Drawer";
+export * from "./Dropdown";
+export * from "./Kbd";
+export * from "./Link";
+export * from "./Loader";
+export * from "./Metric";
+export * from "./Modal";
+export * from "./Pagination";
+export * from "./Popover";
+export * from "./ProgressiveBlur";
+export * from "./Segmented";
+export * from "./Skeleton";
+export * from "./SlidingNumber";
+export * from "./Stepper";
+export * from "./Tabs";
+export * from "./Tooltip";
+export * from "./Tree";
+export * from "./Alert";
+export * from "./Toast";
+export * from "./Notification";
+export * from "./Spinner";
+export * from "./Message";
+export * from "./Empty";
+export * from "./Masonry";
+export * from "./Table";
+export * from "./DragDrop";
+export * from "./Sortable";
+export * from "./NavItem";
+export * from "./Sidebar";
+export * from "./RetryBoundary";
+export * from "./OfflineIndicator";

package/dist/components/core/index.js

@@ -0,0 +1,94 @@
+export { Accordion } from './Accordion/Accordion.js';
+export { AlertDialog } from './AlertDialog/AlertDialog.js';
+export { Avatar } from './Avatar/Avatar.js';
+export { AvatarGroup } from './AvatarGroup/AvatarGroup.js';
+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 { ButtonGroup } from './ButtonGroup/ButtonGroup.js';
+export { ButtonGroupSeparator } from './ButtonGroup/ButtonGroupSeparator.js';
+export { ButtonGroupText } from './ButtonGroup/ButtonGroupText.js';
+export { Calendar } from './Calendar/Calendar.js';
+export { calendarTheme } from './Calendar/Calendar.theme.js';
+export { calendarAnimations } from './Calendar/Calendar.animations.js';
+export { CalendarMini } from './Calendar/CalendarMini/CalendarMini.js';
+export { Card } from './Card/Card.js';
+export { CardStack } from './CardStack/CardStack.js';
+export { Carousel } from './Carousel/Carousel.js';
+export { CommandPalette } from './CommandPalette/CommandPalette.js';
+export { commandPaletteTheme } from './CommandPalette/CommandPalette.theme.js';
+export { Divider } from './Divider/Divider.js';
+export { Drawer } from './Drawer/Drawer.js';
+export { Dropdown } from './Dropdown/Dropdown.js';
+export { DropdownTrigger } from './Dropdown/DropdownTrigger.js';
+export { DropdownMenu } from './Dropdown/DropdownMenu.js';
+export { DropdownItem } from './Dropdown/DropdownItem.js';
+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 { Link } from './Link/Link.js';
+export { Loader } from './Loader/Loader.js';
+export { default as Metric } from './Metric/Metric.js';
+export { metricTheme } from './Metric/Metric.theme.js';
+export { Modal } from './Modal/Modal.js';
+export { Pagination } from './Pagination/Pagination.js';
+export { Popover } from './Popover/Popover.js';
+export { PopoverContext, usePopoverContext } from './Popover/PopoverContext.js';
+export { default as ProgressiveBlur } from './ProgressiveBlur/ProgressiveBlur.js';
+export { Segmented } from './Segmented/Segmented.js';
+export { Skeleton } from './Skeleton/Skeleton.js';
+export { SlidingNumber } from './SlidingNumber/SlidingNumber.js';
+export { Stepper } from './Stepper/Stepper.js';
+export { Tabs } from './Tabs/Tabs.js';
+export { TabsList } from './Tabs/TabsList.js';
+export { TabsTrigger } from './Tabs/TabsTrigger.js';
+export { TabsContent } from './Tabs/TabsContent.js';
+export { TabsContext, useTabsContext } from './Tabs/TabsContext.js';
+export { Tooltip } from './Tooltip/Tooltip.js';
+export { baseTooltipVariants, getTooltipVariants, tooltipSpringConfig } from './Tooltip/Tooltip.animations.js';
+export { Tree } from './Tree/Tree.js';
+export { treeTheme } from './Tree/Tree.theme.js';
+export { Alert } from './Alert/Alert.js';
+export { alertTheme } from './Alert/Alert.theme.js';
+export { Toast } from './Toast/Toast.js';
+export { ToastProvider, useToastContext } from './Toast/ToastProvider.js';
+export { useToast } from './Toast/useToast.js';
+export { toastTheme } from './Toast/Toast.theme.js';
+export { Notification } from './Notification/Notification.js';
+export { notificationTheme } from './Notification/Notification.theme.js';
+export { Spinner } from './Spinner/Spinner.js';
+export { Message } from './Message/Message.js';
+export { messageTheme } from './Message/Message.theme.js';
+export { TypeWriter } from './Message/TypeWriter.js';
+export { Empty } from './Empty/Empty.js';
+export { emptyTheme } from './Empty/Empty.theme.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';
+export { Sidebar } from './Sidebar/Sidebar.js';
+export { SidebarHeader } from './Sidebar/SidebarHeader.js';
+export { SidebarContent } from './Sidebar/SidebarContent.js';
+export { SidebarFooter } from './Sidebar/SidebarFooter.js';
+export { SidebarNav } from './Sidebar/SidebarNav.js';
+export { SidebarNavGroup } from './Sidebar/SidebarNavGroup.js';
+export { SidebarSubmenu } from './Sidebar/SidebarSubmenu.js';
+export { SidebarToggle } from './Sidebar/SidebarToggle.js';
+export { useSidebarContext } from './Sidebar/SidebarContext.js';
+export { RetryBoundary } from './RetryBoundary/RetryBoundary.js';
+export { retryBoundaryTheme } from './RetryBoundary/RetryBoundary.theme.js';
+export { OfflineIndicator } from './OfflineIndicator/OfflineIndicator.js';
+export { offlineIndicatorTheme } from './OfflineIndicator/OfflineIndicator.theme.js';
+export { CardHeader } from './Card/CardHeader.js';
+export { CardTitle } from './Card/CardTitle.js';
+export { CardDescription } from './Card/CardDescription.js';
+export { CardContent } from './Card/CardContent.js';
+export { CardFooter } from './Card/CardFooter.js';
+export { TableActions } from './Table/components/TableActions/TableActions.js';
+export { TableActionsMenu } from './Table/components/TableActions/TableActionsMenu.js';
+export { TablePagination } from './Table/components/TablePagination/TablePagination.js';
+export { AnimatePresence } from 'motion/react';

package/dist/components/effects/CustomCursor/CustomCursor.animations.d.ts

@@ -0,0 +1,16 @@
+import type { Variants, SpringOptions } from 'motion/react';
+/**
+ * Animation variants for CustomCursor component
+ * Handles enter/exit animations with scale and opacity
+ */
+export declare const customCursorVariants: Variants;
+/**
+ * Default spring configuration for smooth following behavior
+ * High stiffness for responsive movement, damping to reduce oscillation
+ */
+export declare const defaultSpringConfig: SpringOptions;
+/**
+ * Reduced motion spring configuration
+ * Nearly instant movement for users who prefer reduced motion
+ */
+export declare const reducedMotionSpringConfig: SpringOptions;

package/dist/components/effects/CustomCursor/CustomCursor.animations.js

@@ -0,0 +1,46 @@
+/**
+ * Animation variants for CustomCursor component
+ * Handles enter/exit animations with scale and opacity
+ */
+const customCursorVariants = {
+    initial: {
+        scale: 0,
+        opacity: 0,
+    },
+    animate: {
+        scale: 1,
+        opacity: 1,
+        transition: {
+            duration: 0.2,
+            ease: 'easeOut',
+        },
+    },
+    exit: {
+        scale: 0,
+        opacity: 0,
+        transition: {
+            duration: 0.15,
+            ease: 'easeIn',
+        },
+    },
+};
+/**
+ * Default spring configuration for smooth following behavior
+ * High stiffness for responsive movement, damping to reduce oscillation
+ */
+const defaultSpringConfig = {
+    stiffness: 500,
+    damping: 50,
+    bounce: 0,
+};
+/**
+ * Reduced motion spring configuration
+ * Nearly instant movement for users who prefer reduced motion
+ */
+const reducedMotionSpringConfig = {
+    stiffness: 1000,
+    damping: 100,
+    bounce: 0,
+};
+
+export { customCursorVariants, defaultSpringConfig, reducedMotionSpringConfig };