@flikk/ui 1.0.0-beta.1

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

@@ -0,0 +1,96 @@
+// 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,
+            },
+        },
+    },
+};
+// Icon rotation animation for expand/collapse indication
+const expandIconVariants = {
+    expanded: {
+        rotate: 90,
+        transition: SPRING_CONFIG,
+    },
+    collapsed: {
+        rotate: 0,
+        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 { childNodeVariants, childrenStagger, expandIconVariants, getReducedMotionVariants, treeNodeVariants };

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

@@ -0,0 +1,2 @@
+import { TreeComponent } from './Tree.types';
+export declare const Tree: TreeComponent;

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

@@ -0,0 +1,203 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default, { useCallback, useState, useMemo } from 'react';
+import { motion, AnimatePresence, useReducedMotion } from 'motion/react';
+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';
+
+// Simplified selection utilities (merged from Tree.utils.ts)
+const getDescendantIds = (node) => {
+    const descendants = [];
+    const traverse = (currentNode) => {
+        if (currentNode.children) {
+            currentNode.children.forEach(child => {
+                descendants.push(child.id);
+                traverse(child);
+            });
+        }
+    };
+    traverse(node);
+    return descendants;
+};
+const calculateSelection = (nodeId, selectedKeys, data) => {
+    // Find the node in the tree
+    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;
+    };
+    const node = findNode(data, nodeId);
+    if (!node)
+        return { selectedKeys, indeterminateKeys: [] };
+    const isCurrentlySelected = selectedKeys.includes(nodeId);
+    let newSelectedKeys = [...selectedKeys];
+    if (isCurrentlySelected) {
+        // Deselecting: remove this node and all its descendants
+        const descendantIds = getDescendantIds(node);
+        newSelectedKeys = newSelectedKeys.filter(id => id !== nodeId && !descendantIds.includes(id));
+    }
+    else {
+        // Selecting: add this node and all its descendants
+        const descendantIds = getDescendantIds(node);
+        newSelectedKeys.push(nodeId, ...descendantIds);
+        newSelectedKeys = Array.from(new Set(newSelectedKeys));
+    }
+    // Calculate indeterminate states (simplified)
+    const indeterminateKeys = [];
+    const calculateIndeterminate = (nodes) => {
+        nodes.forEach(node => {
+            if (node.children && node.children.length > 0) {
+                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);
+                }
+                calculateIndeterminate(node.children);
+            }
+        });
+    };
+    calculateIndeterminate(data);
+    return {
+        selectedKeys: newSelectedKeys,
+        indeterminateKeys
+    };
+};
+const InternalTreeNode = React__default.memo(({ node, level, expanded, selected, isIndeterminate, selectable, checkable, hierarchicalSelection, expandable, expandedKeysSet, selectedKeysSet, indeterminateKeysSet, 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 = useCallback((e) => {
+        e.stopPropagation();
+        if (node.disabled)
+            return;
+        if (selectable) {
+            onNodeClick(node);
+        }
+    }, [node, selectable, onNodeClick]);
+    const handleExpandClick = useCallback((e) => {
+        e.stopPropagation();
+        if (isExpandable && !node.disabled) {
+            onToggleExpand(node);
+        }
+    }, [isExpandable, node, onToggleExpand]);
+    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);
+    const labelStyle = cn(theme.labelStyle, {
+        'text-[var(--color-text-muted)]': node.disabled,
+    });
+    return (jsxs("div", { children: [jsxs("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, children: [isExpandable ? (jsx(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, 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, 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;
+    // Auto-enable hierarchical selection when checkboxes are used, unless explicitly overridden
+    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
+    const [expandedKeys, setExpandedKeys] = useState(defaultExpandedKeys);
+    const [selectedKeys, setSelectedKeys] = useState(defaultSelectedKeys);
+    const [indeterminateKeys, setIndeterminateKeys] = useState([]);
+    const expandedKeysSet = useMemo(() => new Set(expandedKeys), [expandedKeys]);
+    const selectedKeysSet = useMemo(() => new Set(selectedKeys), [selectedKeys]);
+    const indeterminateKeysSet = useMemo(() => new Set(indeterminateKeys), [indeterminateKeys]);
+    // Handle node selection
+    const handleNodeSelect = useCallback((node) => {
+        if (!selectable || node.disabled)
+            return;
+        if (enableHierarchicalSelection && checkable) {
+            // Hierarchical selection mode
+            const result = calculateSelection(node.id, selectedKeys, data);
+            setSelectedKeys(result.selectedKeys);
+            setIndeterminateKeys(result.indeterminateKeys);
+            // Call callback with simplified signature
+            onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(result.selectedKeys, node, result.indeterminateKeys);
+        }
+        else {
+            // Simple selection mode
+            let newSelectedKeys;
+            if (checkable) {
+                // Multi-selection mode
+                if (selectedKeys.includes(node.id)) {
+                    newSelectedKeys = selectedKeys.filter(key => key !== node.id);
+                }
+                else {
+                    newSelectedKeys = [...selectedKeys, node.id];
+                }
+            }
+            else {
+                // Single selection mode
+                newSelectedKeys = selectedKeys.includes(node.id) ? [] : [node.id];
+            }
+            setSelectedKeys(newSelectedKeys);
+            onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(newSelectedKeys, node);
+        }
+    }, [selectedKeys, data, selectable, checkable, enableHierarchicalSelection, onSelectionChange]);
+    // Handle node expand/collapse
+    const handleNodeToggleExpand = useCallback((node) => {
+        if (!expandable || node.disabled)
+            return;
+        const isExpanded = expandedKeys.includes(node.id);
+        let newExpandedKeys;
+        if (isExpanded) {
+            newExpandedKeys = expandedKeys.filter(key => key !== node.id);
+        }
+        else {
+            newExpandedKeys = [...expandedKeys, node.id];
+        }
+        setExpandedKeys(newExpandedKeys);
+        onExpand === null || onExpand === void 0 ? void 0 : onExpand(newExpandedKeys, node, !isExpanded);
+    }, [expandedKeys, expandable, onExpand]);
+    return (jsx("div", { ref: ref, className: cn(theme.baseStyle, 'tree-container', className), role: "tree", "aria-multiselectable": checkable, ...htmlProps, children: data.map((node) => (jsx(InternalTreeNode, { node: node, level: 0, expanded: expandedKeysSet.has(node.id), selected: selectedKeysSet.has(node.id), isIndeterminate: indeterminateKeysSet.has(node.id), selectable: selectable, checkable: checkable, hierarchicalSelection: enableHierarchicalSelection, expandable: expandable, expandedKeysSet: expandedKeysSet, selectedKeysSet: selectedKeysSet, indeterminateKeysSet: indeterminateKeysSet, onNodeClick: handleNodeSelect, onToggleExpand: handleNodeToggleExpand, theme: theme, shouldReduceMotion: shouldReduceMotion }, node.id))) }));
+});
+TreeRoot.displayName = 'Tree';
+// Simplified compound component
+const Tree = TreeRoot;
+
+export { Tree };

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

@@ -0,0 +1,2 @@
+import { TreeTheme } from './Tree.types';
+export declare const treeTheme: TreeTheme;

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

@@ -0,0 +1,10 @@
+const treeTheme = {
+    baseStyle: 'flex flex-col w-full',
+    nodeStyle: 'flex items-center py-1 pr-1 rounded-[calc(var(--radius-base)*0.75)] hover:bg-[var(--color-background-secondary)] cursor-pointer transition-colors select-none gap-2',
+    labelStyle: 'flex-1 text-base text-[var(--color-text-primary)] truncate',
+    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

@@ -0,0 +1,62 @@
+import { HTMLAttributes, ReactNode, ForwardRefExoticComponent, RefAttributes } from 'react';
+export interface TreeNode {
+    /** Unique identifier for the node */
+    id: string;
+    /** Display label for the node */
+    label: string;
+    /** Child nodes */
+    children?: TreeNode[];
+    /** Whether the node is expanded (only for nodes with children) */
+    expanded?: boolean;
+    /** Whether the node is selected */
+    selected?: boolean;
+    /** Whether the node is disabled */
+    disabled?: boolean;
+    /** Custom icon for the node */
+    icon?: ReactNode;
+    /** Additional data attached to the node */
+    data?: Record<string, unknown>;
+}
+export interface TreeTheme {
+    baseStyle: string;
+    nodeStyle: string;
+    labelStyle: string;
+    iconStyle: string;
+    expandIconStyle: string;
+    indentSize: string;
+}
+export interface TreeThemeOverrides {
+    baseStyle?: string;
+    nodeStyle?: string;
+    labelStyle?: string;
+    iconStyle?: string;
+    expandIconStyle?: string;
+    indentSize?: string;
+}
+export interface TreeProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onSelect'> {
+    /** Tree data structure */
+    data: TreeNode[];
+    /** Whether nodes can be selected */
+    selectable?: boolean;
+    /** Whether to show checkboxes for multi-selection */
+    checkable?: boolean;
+    /** Whether nodes can be expanded/collapsed */
+    expandable?: boolean;
+    /** Keys of nodes that are expanded by default */
+    defaultExpandedKeys?: string[];
+    /** Keys of nodes that are selected by default */
+    defaultSelectedKeys?: string[];
+    /** Enable hierarchical selection behavior
+     * @default automatically enabled when checkable=true, false otherwise */
+    hierarchicalSelection?: boolean;
+    /** Callback when selection changes */
+    onSelectionChange?: (selectedKeys: string[], node: TreeNode, indeterminateKeys?: string[]) => void;
+    /** Callback when a node is expanded/collapsed */
+    onExpand?: (expandedKeys: string[], node: TreeNode, expanded: boolean) => void;
+    /** Custom class name */
+    className?: string;
+    /** Theme overrides */
+    theme?: TreeThemeOverrides;
+}
+export interface TreeComponent extends ForwardRefExoticComponent<TreeProps & RefAttributes<HTMLDivElement>> {
+}

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

@@ -0,0 +1,3 @@
+export { Tree } from './Tree';
+export type { TreeProps, TreeNode as TreeNodeType, TreeTheme, TreeThemeOverrides, TreeComponent, } from './Tree.types';
+export { treeTheme } from './Tree.theme';

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

@@ -0,0 +1,55 @@
+export * from "./Accordion";
+export * from "./AlertDialog";
+export * from "./AspectRatio";
+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 "./Separator";
+export * from "./Drawer";
+export * from "./Dropdown";
+export * from "./Kbd";
+export * from "./KPI";
+export * from "./MenuItem";
+export * from "./Link";
+export * from "./Loader";
+export * from "./Metric";
+export * from "./Modal";
+export * from "./ModalStack";
+export * from "./Pagination";
+export * from "./Popover";
+export * from "./Progress";
+export * from "./ProgressiveBlur";
+export * from "./Rating";
+export * from "./ScrollArea";
+export * from "./Segmented";
+export * from "./Skeleton";
+export * from "./SlidingNumber";
+export * from "./Tabs";
+export * from "./Timeline";
+export * from "./Tooltip";
+export * from "./Tree";
+export * from "./Tag";
+export * from "./Alert";
+export * from "./Toast";
+export * from "./Spinner";
+export * from "./Message";
+export * from "./Empty";
+export * from "./Feed";
+export * from "./Masonry";
+export * from "./Table";
+export * from "./DragDrop";
+export * from "./Sortable";
+export * from "./NavItem";
+export * from "./Sidebar";
+export * from "./OfflineIndicator";
+export * from "./ContextMenu";
+export * from "./DescriptionList";
+export * from "./Pill";

package/dist/components/core/index.js

@@ -0,0 +1,116 @@
+export { Accordion } from './Accordion/Accordion.js';
+export { AlertDialog } from './AlertDialog/AlertDialog.js';
+export { AspectRatio } from './AspectRatio/AspectRatio.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 { Separator } from './Separator/Separator.js';
+export { separatorTheme } from './Separator/Separator.theme.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 { KPI } from './KPI/KPI.js';
+export { MenuItem } from './MenuItem/MenuItem.js';
+export { menuItemTheme } from './MenuItem/MenuItem.theme.js';
+export { Link } from './Link/Link.js';
+export { Loader } from './Loader/Loader.js';
+export { Metric } from './Metric/Metric.js';
+export { metricTheme } from './Metric/Metric.theme.js';
+export { Modal } from './Modal/Modal.js';
+export { ModalStack } from './ModalStack/ModalStack.js';
+export { Pagination } from './Pagination/Pagination.js';
+export { Popover } from './Popover/Popover.js';
+export { PopoverContext, usePopoverContext } from './Popover/PopoverContext.js';
+export { Progress } from './Progress/Progress.js';
+export { ProgressiveBlur } from './ProgressiveBlur/ProgressiveBlur.js';
+export { Rating } from './Rating/Rating.js';
+export { ScrollArea } from './ScrollArea/ScrollArea.js';
+export { scrollAreaTheme } from './ScrollArea/ScrollArea.theme.js';
+export { useSmoothScroll } from './ScrollArea/smooth/useSmoothScroll.js';
+export { Segmented } from './Segmented/Segmented.js';
+export { Skeleton } from './Skeleton/Skeleton.js';
+export { SlidingNumber } from './SlidingNumber/SlidingNumber.js';
+export { Tabs } from './Tabs/Tabs.js';
+export { TabsList } from './Tabs/TabsList.js';
+export { TabsTrigger } from './Tabs/TabsTrigger.js';
+export { TabsContent } from './Tabs/TabsContent.js';
+export { TabsContext, useTabsContext } from './Tabs/TabsContext.js';
+export { Timeline } from './Timeline/Timeline.js';
+export { Tooltip } from './Tooltip/Tooltip.js';
+export { baseTooltipVariants, getTooltipVariants, tooltipSpringConfig } from './Tooltip/Tooltip.animations.js';
+export { Tree } from './Tree/Tree.js';
+export { treeTheme } from './Tree/Tree.theme.js';
+export { Tag } from './Tag/Tag.js';
+export { tagTheme } from './Tag/Tag.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 { 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 { Feed } from './Feed/Feed.js';
+export { Masonry } from './Masonry/Masonry.js';
+export { getMasonryTheme, masonryTheme } from './Masonry/Masonry.theme.js';
+export { Table } from './Table/index.js';
+export { DragDropProvider, Draggable, Droppable } from './DragDrop/DragDrop.js';
+export { Sortable, SortableItem } from './Sortable/Sortable.js';
+export { NavItem } from './NavItem/NavItem.js';
+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 { OfflineIndicator } from './OfflineIndicator/OfflineIndicator.js';
+export { offlineIndicatorTheme } from './OfflineIndicator/OfflineIndicator.theme.js';
+export { ContextMenu } from './ContextMenu/ContextMenu.js';
+export { contextMenuTheme } from './ContextMenu/ContextMenu.theme.js';
+export { DescriptionList } from './DescriptionList/DescriptionList.js';
+export { Pill } from './Pill/Pill.js';
+export { pillTheme } from './Pill/Pill.theme.js';
+export { AnimatePresence } from 'motion/react';
+export { CardContent } from './Card/CardContent.js';
+export { CardDescription } from './Card/CardDescription.js';
+export { CardFooter } from './Card/CardFooter.js';
+export { CardHeader } from './Card/CardHeader.js';
+export { CardTitle } from './Card/CardTitle.js';
+export { TableActions } from './Table/TableActions.js';
+export { TableActionsMenu } from './Table/TableActionsMenu.js';
+export { TableFilter } from './Table/TableFilter.js';
+export { TablePagination } from './Table/TablePagination.js';
+export { filterData, getDefaultOperator, getOperatorsForFilterType, inferFilterType, isBetweenOperator, isUnaryOperator, operatorLabels } from './Table/Table.filterUtils.js';
+export { useTableColumns } from './Table/hooks/useTableColumns.js';
+export { useTableExpansion } from './Table/hooks/useTableExpansion.js';
+export { useTableFilter } from './Table/hooks/useTableFilter.js';
+export { useTablePagination } from './Table/hooks/useTablePagination.js';
+export { useTableSelection } from './Table/hooks/useTableSelection.js';

package/dist/components/effects/AIOrb/AIOrb.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import type { AIOrbProps } from "./AIOrb.types";
+export declare const AIOrb: React.FC<AIOrbProps> & {
+    DotSphere: React.FC<import("./variants").DotSphereProps>;
+    Liquid: React.FC<import("./variants").LiquidProps>;
+};

package/dist/components/effects/AIOrb/AIOrb.js

@@ -0,0 +1,16 @@
+import { jsx } from 'react/jsx-runtime';
+import { cn } from '../../../utils/cn.js';
+import { DotSphere } from './variants/DotSphere/DotSphere.js';
+import { Liquid } from './variants/Liquid/Liquid.js';
+
+const AIOrbRoot = ({ size, backgroundColor = "#000", className, style, children, ...props }) => {
+    const containerStyle = {
+        background: backgroundColor,
+        ...(size ? { width: size, height: size } : {}),
+        ...style,
+    };
+    return (jsx("div", { className: cn("relative overflow-hidden", !size && "w-full h-full", className), style: containerStyle, ...props, children: children }));
+};
+const AIOrb = Object.assign(AIOrbRoot, { DotSphere, Liquid });
+
+export { AIOrb };

package/dist/components/effects/AIOrb/AIOrb.types.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+export interface AIOrbProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "color"> {
+    /**
+     * Fixed size in pixels. If omitted the orb fills its parent.
+     */
+    size?: number;
+    /**
+     * Background colour of the container.
+     * @default '#000'
+     */
+    backgroundColor?: string;
+}

package/dist/components/effects/AIOrb/index.d.ts

@@ -0,0 +1,3 @@
+export { AIOrb } from "./AIOrb";
+export type { AIOrbProps } from "./AIOrb.types";
+export type { DotSphereProps, LiquidProps } from "./variants";

package/dist/components/effects/AIOrb/variants/DotSphere/DotSphere.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import type { DotSphereProps } from "./DotSphere.types";
+export declare const DotSphere: React.FC<DotSphereProps>;