@particle-academy/react-fancy 1.9.1 → 2.1.0

package/dist/index.d.cts

@@ -490,6 +490,23 @@ interface IconSet {
     }> | null;
 }
 
+/**
+ * Register individual icon components by their kebab-case name.
+ *
+ * ```tsx
+ * import { registerIcons } from "@particle-academy/react-fancy";
+ * import { Home, Settings, Mail } from "lucide-react";
+ *
+ * registerIcons({ Home, Settings, Mail });
+ * ```
+ *
+ * Icons are registered into the default "lucide" icon set and resolved
+ * by the `<Icon name="home" />` component using kebab-case names.
+ */
+declare function registerIcons(icons: Record<string, ComponentType<{
+    className?: string;
+    size?: number;
+}>>): void;
 declare function registerIconSet(name: string, set: IconSet): void;
 declare function configureIcons(options: {
     defaultSet?: string;
@@ -2076,6 +2093,13 @@ interface TreeNodeData {
     /** Whether the node is disabled */
     disabled?: boolean;
 }
+/** Where the dragged node will land relative to the drop target */
+type DropPosition = "before" | "after" | "inside";
+interface DragState {
+    draggedNodeId: string | null;
+    dropTargetId: string | null;
+    dropPosition: DropPosition | null;
+}
 interface TreeNavProps {
     /** Tree data */
     nodes: TreeNodeData[];
@@ -2085,6 +2109,10 @@ interface TreeNavProps {
     onSelect?: (id: string, node: TreeNodeData) => void;
     /** Callback when a node is right-clicked */
     onNodeContextMenu?: (e: React.MouseEvent, node: TreeNodeData) => void;
+    /** Enable drag-and-drop reordering (default: false) */
+    draggable?: boolean;
+    /** Callback when a node is moved via drag and drop */
+    onNodeMove?: (sourceId: string, targetId: string, position: DropPosition) => void;
     /** Controlled expanded node IDs */
     expandedIds?: string[];
     /** Default expanded node IDs (uncontrolled) */
@@ -2108,6 +2136,12 @@ interface TreeNavContextValue {
     toggle: (id: string) => void;
     indentSize: number;
     showIcons: boolean;
+    draggable: boolean;
+    dragState: DragState;
+    setDragState: (state: DragState) => void;
+    onNodeMove?: (sourceId: string, targetId: string, position: DropPosition) => void;
+    nodes: TreeNodeData[];
+    expandNode: (id: string) => void;
 }
 interface TreeNodeProps {
     node: TreeNodeData;
@@ -2120,7 +2154,7 @@ declare namespace TreeNode {
     var displayName: string;
 }
 
-declare function TreeNavRoot({ nodes, selectedId, onSelect, onNodeContextMenu, expandedIds: controlledExpanded, defaultExpandedIds, onExpandedChange, defaultExpandAll, indentSize, showIcons, className, }: TreeNavProps): react_jsx_runtime.JSX.Element;
+declare function TreeNavRoot({ nodes, selectedId, onSelect, onNodeContextMenu, draggable, onNodeMove, expandedIds: controlledExpanded, defaultExpandedIds, onExpandedChange, defaultExpandAll, indentSize, showIcons, className, }: TreeNavProps): react_jsx_runtime.JSX.Element;
 declare namespace TreeNavRoot {
     var displayName: string;
 }
@@ -2196,4 +2230,4 @@ declare function find(char: string): {
     category: string;
 } | undefined;
 
-export { Accordion, type AccordionContentProps, type AccordionContextValue, type AccordionItemProps, type AccordionProps, type AccordionTriggerProps, Action, type ActionColor, type ActionProps, type AffixPosition, Autocomplete, type AutocompleteOption, type AutocompleteProps, Avatar, type AvatarProps, Badge, type BadgeProps, Brand, type BrandProps, Breadcrumbs, type BreadcrumbsItemProps, type BreadcrumbsProps, Calendar, type CalendarMode, type CalendarProps, Callout, type CalloutProps, Canvas, type CanvasContextValue, type CanvasControlsProps, type CanvasEdgeProps, type CanvasMinimapProps, type CanvasNodeProps, type CanvasProps, Card, type CardBodyProps, type CardFooterProps, type CardHeaderProps, type CardProps, Carousel, type CarouselContextValue, type CarouselControlsProps, type CarouselPanelsProps, type CarouselProps, type CarouselSlideProps, type CarouselStepsProps, type CarouselVariant, Chart, type ChartAreaProps, type ChartBarData, type ChartBarProps, type ChartCommonProps, type ChartDonutData, type ChartDonutProps, type ChartHorizontalBarProps, type ChartLineProps, type ChartPieData, type ChartPieProps, type ChartSeries, type ChartSparklineProps, type ChartStackedBarProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, type Color, ColorPicker, type ColorPickerProps, Command, type CommandContextValue, type CommandEmptyProps, type CommandGroupProps, type CommandInputProps, type CommandItemProps, type CommandListProps, type CommandProps, Composer, type ComposerProps, ContentRenderer, type ContentRendererProps, ContextMenu, type ContextMenuContentProps, type ContextMenuContextValue, type ContextMenuItemProps, type ContextMenuProps, type ContextMenuSeparatorProps, type ContextMenuTriggerProps, DatePicker, type DatePickerProps, type DateRange, Diagram, type DiagramContextValue, type DiagramEntityData, type DiagramEntityProps, type DiagramFieldData, type DiagramFieldProps, type DiagramProps, type DiagramRelationData, type DiagramRelationProps, type DiagramSchema, type DiagramToolbarProps, type DiagramType, Dropdown, type DropdownContextValue, type DropdownItemProps, type DropdownItemsProps, type DropdownProps, type DropdownSeparatorProps, type DropdownTriggerProps, EMOJI_DATA, EMOJI_ENTRIES, type EdgeAnchor, Editor, type EditorAction, type EditorContentProps, type EditorContextValue, type EditorProps, type EditorToolbarProps, Emoji, type EmojiProps, EmojiSelect, type EmojiSelectProps, type ExportFormat, Field, type FieldProps, FileUpload, type FileUploadContextValue, type FileUploadDropzoneProps, type FileUploadListProps, type FileUploadProps, Heading, type HeadingProps, Icon, type IconProps, type IconSet, Input, type InputAffixProps, type InputBaseProps, type InputOption, type InputOptionGroup, type InputProps, Kanban, type KanbanCardProps, type KanbanColumnProps, type KanbanContextValue, type KanbanProps, Menu, type MenuContextValue, type MenuGroupProps, type MenuItemProps, type MenuOrientation, type MenuProps, type MenuSubmenuProps, MobileMenu, type MobileMenuBottomBarProps, type MobileMenuContextValue, type MobileMenuFlyoutProps, type MobileMenuItemProps, type MobileMenuSide, type MobileMenuVariant, Modal, type ModalBodyProps, type ModalContextValue, type ModalFooterProps, type ModalHeaderProps, type ModalProps, MultiSwitch, type MultiSwitchProps, Navbar, type NavbarBrandProps, type NavbarContextValue, type NavbarItemProps, type NavbarItemsProps, type NavbarProps, type NavbarToggleProps, type NodeRect, OtpInput, type OtpInputProps, Pagination, type PaginationProps, Pillbox, type PillboxProps, type Placement, Popover, type PopoverContentProps, type PopoverContextValue, type PopoverProps, type PopoverTriggerProps, Portal, type PortalProps, Profile, type ProfileProps, Progress, type ProgressProps, RadioGroup, type RadioGroupProps, type RelationType, type RenderExtension, type RenderExtensionProps, Select, type SelectProps, Separator, type SeparatorProps, Sidebar, type SidebarCollapseMode, type SidebarContextValue, type SidebarGroupProps, type SidebarItemProps, type SidebarProps, type SidebarSubmenuProps, type SidebarToggleProps, type Size, Skeleton, type SkeletonProps, Slider, type SliderProps, Switch, type SwitchProps, Table, type TableBodyProps, type TableCellProps, type TableColumnProps, type TableHeadProps, type TablePaginationProps, type TableProps, type TableRowProps, type TableRowTrayProps, type TableSearchProps, type TableTrayProps, Tabs, type TabsContextValue, type TabsListProps, type TabsPanelProps, type TabsPanelsProps, type TabsProps, type TabsTabProps, type TabsVariant, Text, type TextProps, Textarea, type TextareaProps, TimePicker, type TimePickerProps, Timeline, type TimelineBlockProps, type TimelineEvent, type TimelineItemProps, type TimelineOrientation, type TimelineProps, type TimelineVariant, Toast, type ToastContextValue, type ToastData, type ToastPosition, type ToastProviderProps, type ToastVariant, Tooltip, type TooltipProps, TreeNav, type TreeNavContextValue, type TreeNavProps, type TreeNodeData, type TreeNodeProps, type Variant, type ViewportState, cn, configureIcons, find, registerExtension, registerExtensions, registerIconSet, resolve, search, useAccordion, useAnimation, useCanvas, useCarousel, useCommand, useContextMenu, useControllableState, useDiagram, useDropdown, useEditor, useEscapeKey, useFileUpload, useFloatingPosition, useFocusTrap, useId, useKanban, useMenu, useMobileMenu, useModal, useNavbar, useNodeRegistry, useOutsideClick, usePanZoom, usePopover, useSidebar, useTabs, useToast, useTreeNav };
+export { Accordion, type AccordionContentProps, type AccordionContextValue, type AccordionItemProps, type AccordionProps, type AccordionTriggerProps, Action, type ActionColor, type ActionProps, type AffixPosition, Autocomplete, type AutocompleteOption, type AutocompleteProps, Avatar, type AvatarProps, Badge, type BadgeProps, Brand, type BrandProps, Breadcrumbs, type BreadcrumbsItemProps, type BreadcrumbsProps, Calendar, type CalendarMode, type CalendarProps, Callout, type CalloutProps, Canvas, type CanvasContextValue, type CanvasControlsProps, type CanvasEdgeProps, type CanvasMinimapProps, type CanvasNodeProps, type CanvasProps, Card, type CardBodyProps, type CardFooterProps, type CardHeaderProps, type CardProps, Carousel, type CarouselContextValue, type CarouselControlsProps, type CarouselPanelsProps, type CarouselProps, type CarouselSlideProps, type CarouselStepsProps, type CarouselVariant, Chart, type ChartAreaProps, type ChartBarData, type ChartBarProps, type ChartCommonProps, type ChartDonutData, type ChartDonutProps, type ChartHorizontalBarProps, type ChartLineProps, type ChartPieData, type ChartPieProps, type ChartSeries, type ChartSparklineProps, type ChartStackedBarProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, type Color, ColorPicker, type ColorPickerProps, Command, type CommandContextValue, type CommandEmptyProps, type CommandGroupProps, type CommandInputProps, type CommandItemProps, type CommandListProps, type CommandProps, Composer, type ComposerProps, ContentRenderer, type ContentRendererProps, ContextMenu, type ContextMenuContentProps, type ContextMenuContextValue, type ContextMenuItemProps, type ContextMenuProps, type ContextMenuSeparatorProps, type ContextMenuTriggerProps, DatePicker, type DatePickerProps, type DateRange, Diagram, type DiagramContextValue, type DiagramEntityData, type DiagramEntityProps, type DiagramFieldData, type DiagramFieldProps, type DiagramProps, type DiagramRelationData, type DiagramRelationProps, type DiagramSchema, type DiagramToolbarProps, type DiagramType, type DropPosition, Dropdown, type DropdownContextValue, type DropdownItemProps, type DropdownItemsProps, type DropdownProps, type DropdownSeparatorProps, type DropdownTriggerProps, EMOJI_DATA, EMOJI_ENTRIES, type EdgeAnchor, Editor, type EditorAction, type EditorContentProps, type EditorContextValue, type EditorProps, type EditorToolbarProps, Emoji, type EmojiProps, EmojiSelect, type EmojiSelectProps, type ExportFormat, Field, type FieldProps, FileUpload, type FileUploadContextValue, type FileUploadDropzoneProps, type FileUploadListProps, type FileUploadProps, Heading, type HeadingProps, Icon, type IconProps, type IconSet, Input, type InputAffixProps, type InputBaseProps, type InputOption, type InputOptionGroup, type InputProps, Kanban, type KanbanCardProps, type KanbanColumnProps, type KanbanContextValue, type KanbanProps, Menu, type MenuContextValue, type MenuGroupProps, type MenuItemProps, type MenuOrientation, type MenuProps, type MenuSubmenuProps, MobileMenu, type MobileMenuBottomBarProps, type MobileMenuContextValue, type MobileMenuFlyoutProps, type MobileMenuItemProps, type MobileMenuSide, type MobileMenuVariant, Modal, type ModalBodyProps, type ModalContextValue, type ModalFooterProps, type ModalHeaderProps, type ModalProps, MultiSwitch, type MultiSwitchProps, Navbar, type NavbarBrandProps, type NavbarContextValue, type NavbarItemProps, type NavbarItemsProps, type NavbarProps, type NavbarToggleProps, type NodeRect, OtpInput, type OtpInputProps, Pagination, type PaginationProps, Pillbox, type PillboxProps, type Placement, Popover, type PopoverContentProps, type PopoverContextValue, type PopoverProps, type PopoverTriggerProps, Portal, type PortalProps, Profile, type ProfileProps, Progress, type ProgressProps, RadioGroup, type RadioGroupProps, type RelationType, type RenderExtension, type RenderExtensionProps, Select, type SelectProps, Separator, type SeparatorProps, Sidebar, type SidebarCollapseMode, type SidebarContextValue, type SidebarGroupProps, type SidebarItemProps, type SidebarProps, type SidebarSubmenuProps, type SidebarToggleProps, type Size, Skeleton, type SkeletonProps, Slider, type SliderProps, Switch, type SwitchProps, Table, type TableBodyProps, type TableCellProps, type TableColumnProps, type TableHeadProps, type TablePaginationProps, type TableProps, type TableRowProps, type TableRowTrayProps, type TableSearchProps, type TableTrayProps, Tabs, type TabsContextValue, type TabsListProps, type TabsPanelProps, type TabsPanelsProps, type TabsProps, type TabsTabProps, type TabsVariant, Text, type TextProps, Textarea, type TextareaProps, TimePicker, type TimePickerProps, Timeline, type TimelineBlockProps, type TimelineEvent, type TimelineItemProps, type TimelineOrientation, type TimelineProps, type TimelineVariant, Toast, type ToastContextValue, type ToastData, type ToastPosition, type ToastProviderProps, type ToastVariant, Tooltip, type TooltipProps, TreeNav, type TreeNavContextValue, type TreeNavProps, type TreeNodeData, type TreeNodeProps, type Variant, type ViewportState, cn, configureIcons, find, registerExtension, registerExtensions, registerIconSet, registerIcons, resolve, search, useAccordion, useAnimation, useCanvas, useCarousel, useCommand, useContextMenu, useControllableState, useDiagram, useDropdown, useEditor, useEscapeKey, useFileUpload, useFloatingPosition, useFocusTrap, useId, useKanban, useMenu, useMobileMenu, useModal, useNavbar, useNodeRegistry, useOutsideClick, usePanZoom, usePopover, useSidebar, useTabs, useToast, useTreeNav };

package/dist/index.d.ts

@@ -490,6 +490,23 @@ interface IconSet {
     }> | null;
 }
 
+/**
+ * Register individual icon components by their kebab-case name.
+ *
+ * ```tsx
+ * import { registerIcons } from "@particle-academy/react-fancy";
+ * import { Home, Settings, Mail } from "lucide-react";
+ *
+ * registerIcons({ Home, Settings, Mail });
+ * ```
+ *
+ * Icons are registered into the default "lucide" icon set and resolved
+ * by the `<Icon name="home" />` component using kebab-case names.
+ */
+declare function registerIcons(icons: Record<string, ComponentType<{
+    className?: string;
+    size?: number;
+}>>): void;
 declare function registerIconSet(name: string, set: IconSet): void;
 declare function configureIcons(options: {
     defaultSet?: string;
@@ -2076,6 +2093,13 @@ interface TreeNodeData {
     /** Whether the node is disabled */
     disabled?: boolean;
 }
+/** Where the dragged node will land relative to the drop target */
+type DropPosition = "before" | "after" | "inside";
+interface DragState {
+    draggedNodeId: string | null;
+    dropTargetId: string | null;
+    dropPosition: DropPosition | null;
+}
 interface TreeNavProps {
     /** Tree data */
     nodes: TreeNodeData[];
@@ -2085,6 +2109,10 @@ interface TreeNavProps {
     onSelect?: (id: string, node: TreeNodeData) => void;
     /** Callback when a node is right-clicked */
     onNodeContextMenu?: (e: React.MouseEvent, node: TreeNodeData) => void;
+    /** Enable drag-and-drop reordering (default: false) */
+    draggable?: boolean;
+    /** Callback when a node is moved via drag and drop */
+    onNodeMove?: (sourceId: string, targetId: string, position: DropPosition) => void;
     /** Controlled expanded node IDs */
     expandedIds?: string[];
     /** Default expanded node IDs (uncontrolled) */
@@ -2108,6 +2136,12 @@ interface TreeNavContextValue {
     toggle: (id: string) => void;
     indentSize: number;
     showIcons: boolean;
+    draggable: boolean;
+    dragState: DragState;
+    setDragState: (state: DragState) => void;
+    onNodeMove?: (sourceId: string, targetId: string, position: DropPosition) => void;
+    nodes: TreeNodeData[];
+    expandNode: (id: string) => void;
 }
 interface TreeNodeProps {
     node: TreeNodeData;
@@ -2120,7 +2154,7 @@ declare namespace TreeNode {
     var displayName: string;
 }
 
-declare function TreeNavRoot({ nodes, selectedId, onSelect, onNodeContextMenu, expandedIds: controlledExpanded, defaultExpandedIds, onExpandedChange, defaultExpandAll, indentSize, showIcons, className, }: TreeNavProps): react_jsx_runtime.JSX.Element;
+declare function TreeNavRoot({ nodes, selectedId, onSelect, onNodeContextMenu, draggable, onNodeMove, expandedIds: controlledExpanded, defaultExpandedIds, onExpandedChange, defaultExpandAll, indentSize, showIcons, className, }: TreeNavProps): react_jsx_runtime.JSX.Element;
 declare namespace TreeNavRoot {
     var displayName: string;
 }
@@ -2196,4 +2230,4 @@ declare function find(char: string): {
     category: string;
 } | undefined;
 
-export { Accordion, type AccordionContentProps, type AccordionContextValue, type AccordionItemProps, type AccordionProps, type AccordionTriggerProps, Action, type ActionColor, type ActionProps, type AffixPosition, Autocomplete, type AutocompleteOption, type AutocompleteProps, Avatar, type AvatarProps, Badge, type BadgeProps, Brand, type BrandProps, Breadcrumbs, type BreadcrumbsItemProps, type BreadcrumbsProps, Calendar, type CalendarMode, type CalendarProps, Callout, type CalloutProps, Canvas, type CanvasContextValue, type CanvasControlsProps, type CanvasEdgeProps, type CanvasMinimapProps, type CanvasNodeProps, type CanvasProps, Card, type CardBodyProps, type CardFooterProps, type CardHeaderProps, type CardProps, Carousel, type CarouselContextValue, type CarouselControlsProps, type CarouselPanelsProps, type CarouselProps, type CarouselSlideProps, type CarouselStepsProps, type CarouselVariant, Chart, type ChartAreaProps, type ChartBarData, type ChartBarProps, type ChartCommonProps, type ChartDonutData, type ChartDonutProps, type ChartHorizontalBarProps, type ChartLineProps, type ChartPieData, type ChartPieProps, type ChartSeries, type ChartSparklineProps, type ChartStackedBarProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, type Color, ColorPicker, type ColorPickerProps, Command, type CommandContextValue, type CommandEmptyProps, type CommandGroupProps, type CommandInputProps, type CommandItemProps, type CommandListProps, type CommandProps, Composer, type ComposerProps, ContentRenderer, type ContentRendererProps, ContextMenu, type ContextMenuContentProps, type ContextMenuContextValue, type ContextMenuItemProps, type ContextMenuProps, type ContextMenuSeparatorProps, type ContextMenuTriggerProps, DatePicker, type DatePickerProps, type DateRange, Diagram, type DiagramContextValue, type DiagramEntityData, type DiagramEntityProps, type DiagramFieldData, type DiagramFieldProps, type DiagramProps, type DiagramRelationData, type DiagramRelationProps, type DiagramSchema, type DiagramToolbarProps, type DiagramType, Dropdown, type DropdownContextValue, type DropdownItemProps, type DropdownItemsProps, type DropdownProps, type DropdownSeparatorProps, type DropdownTriggerProps, EMOJI_DATA, EMOJI_ENTRIES, type EdgeAnchor, Editor, type EditorAction, type EditorContentProps, type EditorContextValue, type EditorProps, type EditorToolbarProps, Emoji, type EmojiProps, EmojiSelect, type EmojiSelectProps, type ExportFormat, Field, type FieldProps, FileUpload, type FileUploadContextValue, type FileUploadDropzoneProps, type FileUploadListProps, type FileUploadProps, Heading, type HeadingProps, Icon, type IconProps, type IconSet, Input, type InputAffixProps, type InputBaseProps, type InputOption, type InputOptionGroup, type InputProps, Kanban, type KanbanCardProps, type KanbanColumnProps, type KanbanContextValue, type KanbanProps, Menu, type MenuContextValue, type MenuGroupProps, type MenuItemProps, type MenuOrientation, type MenuProps, type MenuSubmenuProps, MobileMenu, type MobileMenuBottomBarProps, type MobileMenuContextValue, type MobileMenuFlyoutProps, type MobileMenuItemProps, type MobileMenuSide, type MobileMenuVariant, Modal, type ModalBodyProps, type ModalContextValue, type ModalFooterProps, type ModalHeaderProps, type ModalProps, MultiSwitch, type MultiSwitchProps, Navbar, type NavbarBrandProps, type NavbarContextValue, type NavbarItemProps, type NavbarItemsProps, type NavbarProps, type NavbarToggleProps, type NodeRect, OtpInput, type OtpInputProps, Pagination, type PaginationProps, Pillbox, type PillboxProps, type Placement, Popover, type PopoverContentProps, type PopoverContextValue, type PopoverProps, type PopoverTriggerProps, Portal, type PortalProps, Profile, type ProfileProps, Progress, type ProgressProps, RadioGroup, type RadioGroupProps, type RelationType, type RenderExtension, type RenderExtensionProps, Select, type SelectProps, Separator, type SeparatorProps, Sidebar, type SidebarCollapseMode, type SidebarContextValue, type SidebarGroupProps, type SidebarItemProps, type SidebarProps, type SidebarSubmenuProps, type SidebarToggleProps, type Size, Skeleton, type SkeletonProps, Slider, type SliderProps, Switch, type SwitchProps, Table, type TableBodyProps, type TableCellProps, type TableColumnProps, type TableHeadProps, type TablePaginationProps, type TableProps, type TableRowProps, type TableRowTrayProps, type TableSearchProps, type TableTrayProps, Tabs, type TabsContextValue, type TabsListProps, type TabsPanelProps, type TabsPanelsProps, type TabsProps, type TabsTabProps, type TabsVariant, Text, type TextProps, Textarea, type TextareaProps, TimePicker, type TimePickerProps, Timeline, type TimelineBlockProps, type TimelineEvent, type TimelineItemProps, type TimelineOrientation, type TimelineProps, type TimelineVariant, Toast, type ToastContextValue, type ToastData, type ToastPosition, type ToastProviderProps, type ToastVariant, Tooltip, type TooltipProps, TreeNav, type TreeNavContextValue, type TreeNavProps, type TreeNodeData, type TreeNodeProps, type Variant, type ViewportState, cn, configureIcons, find, registerExtension, registerExtensions, registerIconSet, resolve, search, useAccordion, useAnimation, useCanvas, useCarousel, useCommand, useContextMenu, useControllableState, useDiagram, useDropdown, useEditor, useEscapeKey, useFileUpload, useFloatingPosition, useFocusTrap, useId, useKanban, useMenu, useMobileMenu, useModal, useNavbar, useNodeRegistry, useOutsideClick, usePanZoom, usePopover, useSidebar, useTabs, useToast, useTreeNav };
+export { Accordion, type AccordionContentProps, type AccordionContextValue, type AccordionItemProps, type AccordionProps, type AccordionTriggerProps, Action, type ActionColor, type ActionProps, type AffixPosition, Autocomplete, type AutocompleteOption, type AutocompleteProps, Avatar, type AvatarProps, Badge, type BadgeProps, Brand, type BrandProps, Breadcrumbs, type BreadcrumbsItemProps, type BreadcrumbsProps, Calendar, type CalendarMode, type CalendarProps, Callout, type CalloutProps, Canvas, type CanvasContextValue, type CanvasControlsProps, type CanvasEdgeProps, type CanvasMinimapProps, type CanvasNodeProps, type CanvasProps, Card, type CardBodyProps, type CardFooterProps, type CardHeaderProps, type CardProps, Carousel, type CarouselContextValue, type CarouselControlsProps, type CarouselPanelsProps, type CarouselProps, type CarouselSlideProps, type CarouselStepsProps, type CarouselVariant, Chart, type ChartAreaProps, type ChartBarData, type ChartBarProps, type ChartCommonProps, type ChartDonutData, type ChartDonutProps, type ChartHorizontalBarProps, type ChartLineProps, type ChartPieData, type ChartPieProps, type ChartSeries, type ChartSparklineProps, type ChartStackedBarProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, type Color, ColorPicker, type ColorPickerProps, Command, type CommandContextValue, type CommandEmptyProps, type CommandGroupProps, type CommandInputProps, type CommandItemProps, type CommandListProps, type CommandProps, Composer, type ComposerProps, ContentRenderer, type ContentRendererProps, ContextMenu, type ContextMenuContentProps, type ContextMenuContextValue, type ContextMenuItemProps, type ContextMenuProps, type ContextMenuSeparatorProps, type ContextMenuTriggerProps, DatePicker, type DatePickerProps, type DateRange, Diagram, type DiagramContextValue, type DiagramEntityData, type DiagramEntityProps, type DiagramFieldData, type DiagramFieldProps, type DiagramProps, type DiagramRelationData, type DiagramRelationProps, type DiagramSchema, type DiagramToolbarProps, type DiagramType, type DropPosition, Dropdown, type DropdownContextValue, type DropdownItemProps, type DropdownItemsProps, type DropdownProps, type DropdownSeparatorProps, type DropdownTriggerProps, EMOJI_DATA, EMOJI_ENTRIES, type EdgeAnchor, Editor, type EditorAction, type EditorContentProps, type EditorContextValue, type EditorProps, type EditorToolbarProps, Emoji, type EmojiProps, EmojiSelect, type EmojiSelectProps, type ExportFormat, Field, type FieldProps, FileUpload, type FileUploadContextValue, type FileUploadDropzoneProps, type FileUploadListProps, type FileUploadProps, Heading, type HeadingProps, Icon, type IconProps, type IconSet, Input, type InputAffixProps, type InputBaseProps, type InputOption, type InputOptionGroup, type InputProps, Kanban, type KanbanCardProps, type KanbanColumnProps, type KanbanContextValue, type KanbanProps, Menu, type MenuContextValue, type MenuGroupProps, type MenuItemProps, type MenuOrientation, type MenuProps, type MenuSubmenuProps, MobileMenu, type MobileMenuBottomBarProps, type MobileMenuContextValue, type MobileMenuFlyoutProps, type MobileMenuItemProps, type MobileMenuSide, type MobileMenuVariant, Modal, type ModalBodyProps, type ModalContextValue, type ModalFooterProps, type ModalHeaderProps, type ModalProps, MultiSwitch, type MultiSwitchProps, Navbar, type NavbarBrandProps, type NavbarContextValue, type NavbarItemProps, type NavbarItemsProps, type NavbarProps, type NavbarToggleProps, type NodeRect, OtpInput, type OtpInputProps, Pagination, type PaginationProps, Pillbox, type PillboxProps, type Placement, Popover, type PopoverContentProps, type PopoverContextValue, type PopoverProps, type PopoverTriggerProps, Portal, type PortalProps, Profile, type ProfileProps, Progress, type ProgressProps, RadioGroup, type RadioGroupProps, type RelationType, type RenderExtension, type RenderExtensionProps, Select, type SelectProps, Separator, type SeparatorProps, Sidebar, type SidebarCollapseMode, type SidebarContextValue, type SidebarGroupProps, type SidebarItemProps, type SidebarProps, type SidebarSubmenuProps, type SidebarToggleProps, type Size, Skeleton, type SkeletonProps, Slider, type SliderProps, Switch, type SwitchProps, Table, type TableBodyProps, type TableCellProps, type TableColumnProps, type TableHeadProps, type TablePaginationProps, type TableProps, type TableRowProps, type TableRowTrayProps, type TableSearchProps, type TableTrayProps, Tabs, type TabsContextValue, type TabsListProps, type TabsPanelProps, type TabsPanelsProps, type TabsProps, type TabsTabProps, type TabsVariant, Text, type TextProps, Textarea, type TextareaProps, TimePicker, type TimePickerProps, Timeline, type TimelineBlockProps, type TimelineEvent, type TimelineItemProps, type TimelineOrientation, type TimelineProps, type TimelineVariant, Toast, type ToastContextValue, type ToastData, type ToastPosition, type ToastProviderProps, type ToastVariant, Tooltip, type TooltipProps, TreeNav, type TreeNavContextValue, type TreeNavProps, type TreeNodeData, type TreeNodeProps, type Variant, type ViewportState, cn, configureIcons, find, registerExtension, registerExtensions, registerIconSet, registerIcons, resolve, search, useAccordion, useAnimation, useCanvas, useCarousel, useCommand, useContextMenu, useControllableState, useDiagram, useDropdown, useEditor, useEscapeKey, useFileUpload, useFloatingPosition, useFocusTrap, useId, useKanban, useMenu, useMobileMenu, useModal, useNavbar, useNodeRegistry, useOutsideClick, usePanZoom, usePopover, useSidebar, useTabs, useToast, useTreeNav };

package/dist/index.js

@@ -1,10 +1,9 @@
 import { forwardRef, useId, useRef, useEffect, useState, useCallback, createContext, Children, isValidElement, useMemo, cloneElement, useLayoutEffect, useContext, Fragment as Fragment$1 } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
-import * as LucideIcons from 'lucide-react';
-import { X, ChevronUp, ChevronDown, ChevronLeft, ChevronRight, Search, Menu, File, Upload, PanelLeftOpen, PanelLeftClose, ZoomIn, ZoomOut, RotateCcw, Maximize, Check, XCircle, AlertTriangle, Info } from 'lucide-react';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
+import { X, ChevronUp, ChevronDown, ChevronLeft, ChevronRight, Search, Menu, File, Upload, PanelLeftOpen, PanelLeftClose, ZoomIn, ZoomOut, RotateCcw, Maximize, Check, XCircle, AlertTriangle, Info } from 'lucide-react';
 import { marked } from 'marked';
 
 // src/components/Action/Action.tsx
@@ -885,22 +884,31 @@ function search(query) {
 function find(char) {
   return EMOJI_ENTRIES.find((e) => e.char === char);
 }
+
+// src/components/Icon/icon-config.ts
 var registry = /* @__PURE__ */ new Map();
 var defaultSetName = "lucide";
 function kebabToPascal(str) {
   return str.split("-").map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join("");
 }
-var lucideSet = {
-  resolve: (name) => {
-    const pascal = kebabToPascal(name);
-    const icon = LucideIcons[pascal];
-    if (typeof icon === "function" || typeof icon === "object" && icon !== null) {
-      return icon;
-    }
-    return null;
+function registerIcons(icons) {
+  let set = registry.get("lucide");
+  if (!set) {
+    const map2 = /* @__PURE__ */ new Map();
+    set = {
+      resolve: (name) => {
+        const pascal = kebabToPascal(name);
+        return map2.get(pascal) ?? null;
+      },
+      _map: map2
+    };
+    registry.set("lucide", set);
   }
-};
-registry.set("lucide", lucideSet);
+  const map = set._map;
+  for (const [key, component] of Object.entries(icons)) {
+    map.set(key, component);
+  }
+}
 function registerIconSet(name, set) {
   registry.set(name, set);
 }
@@ -10254,12 +10262,67 @@ function ChevronIcon({ open }) {
     }
   );
 }
+function isDescendantOf(nodes, ancestorId, targetId) {
+  function findNode(haystack, id) {
+    for (const n of haystack) {
+      if (n.id === id) return n;
+      if (n.children) {
+        const found = findNode(n.children, id);
+        if (found) return found;
+      }
+    }
+    return void 0;
+  }
+  function hasDescendant(node, id) {
+    if (!node.children) return false;
+    for (const child of node.children) {
+      if (child.id === id) return true;
+      if (hasDescendant(child, id)) return true;
+    }
+    return false;
+  }
+  const ancestor = findNode(nodes, ancestorId);
+  return ancestor ? hasDescendant(ancestor, targetId) : false;
+}
+function computeDropPosition(e, isFolder) {
+  const rect = e.currentTarget.getBoundingClientRect();
+  const offsetY = e.clientY - rect.top;
+  const third = rect.height / 3;
+  if (offsetY < third) return "before";
+  if (offsetY > third * 2) return "after";
+  return isFolder ? "inside" : "after";
+}
 function TreeNode({ node, depth }) {
-  const { selectedId, onSelect, onNodeContextMenu, expandedIds, toggle, indentSize, showIcons } = useTreeNav();
+  const {
+    selectedId,
+    onSelect,
+    onNodeContextMenu,
+    expandedIds,
+    toggle,
+    indentSize,
+    showIcons,
+    draggable,
+    dragState,
+    setDragState,
+    onNodeMove,
+    nodes,
+    expandNode
+  } = useTreeNav();
   const isFolder = node.type === "folder" || node.children && node.children.length > 0;
   const isExpanded = expandedIds.includes(node.id);
   const isSelected = selectedId === node.id;
   const paddingLeft = depth * indentSize + 4;
+  const isDragging = dragState.draggedNodeId === node.id;
+  const isDropTarget = dragState.dropTargetId === node.id;
+  const dropPosition = isDropTarget ? dragState.dropPosition : null;
+  const autoExpandTimer = useRef(null);
+  const clearAutoExpand = useCallback(() => {
+    if (autoExpandTimer.current) {
+      clearTimeout(autoExpandTimer.current);
+      autoExpandTimer.current = null;
+    }
+  }, []);
+  useEffect(() => clearAutoExpand, [clearAutoExpand]);
   const handleClick = () => {
     if (node.disabled) return;
     if (isFolder) {
@@ -10273,30 +10336,116 @@ function TreeNode({ node, depth }) {
       onNodeContextMenu(e, node);
     }
   };
-  return /* @__PURE__ */ jsxs("div", { "data-react-fancy-tree-node": "", children: [
-    /* @__PURE__ */ jsxs(
-      "button",
-      {
-        type: "button",
-        onClick: handleClick,
-        onContextMenu: handleContextMenu,
-        disabled: node.disabled,
-        className: cn(
-          "flex w-full items-center gap-1 rounded-md py-0.5 text-left text-[13px] transition-colors",
-          isSelected ? "bg-blue-500/15 text-blue-600 dark:text-blue-400" : "text-zinc-700 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-800",
-          node.disabled && "pointer-events-none opacity-40"
-        ),
-        style: { paddingLeft },
-        children: [
-          isFolder && /* @__PURE__ */ jsx(ChevronIcon, { open: isExpanded }),
-          !isFolder && /* @__PURE__ */ jsx("span", { className: "w-3.5 shrink-0" }),
-          showIcons && (node.icon ?? (isFolder ? /* @__PURE__ */ jsx(FolderIcon, { open: isExpanded }) : /* @__PURE__ */ jsx(FileIcon, { ext: node.ext ?? node.label.split(".").pop() }))),
-          /* @__PURE__ */ jsx("span", { className: "truncate", children: node.label })
-        ]
+  const handleDragStart = useCallback((e) => {
+    e.dataTransfer.setData("text/plain", node.id);
+    e.dataTransfer.effectAllowed = "move";
+    requestAnimationFrame(() => {
+      setDragState({ draggedNodeId: node.id, dropTargetId: null, dropPosition: null });
+    });
+  }, [node.id, setDragState]);
+  const handleDragEnd = useCallback(() => {
+    clearAutoExpand();
+    setDragState({ draggedNodeId: null, dropTargetId: null, dropPosition: null });
+  }, [clearAutoExpand, setDragState]);
+  const handleDragOver = useCallback((e) => {
+    if (!dragState.draggedNodeId) return;
+    const sourceId = dragState.draggedNodeId;
+    if (sourceId === node.id) return;
+    if (isDescendantOf(nodes, sourceId, node.id)) return;
+    e.preventDefault();
+    e.stopPropagation();
+    e.dataTransfer.dropEffect = "move";
+    const position = computeDropPosition(e, !!isFolder);
+    if (isFolder && !isExpanded && position === "inside") {
+      if (!autoExpandTimer.current) {
+        autoExpandTimer.current = setTimeout(() => {
+          expandNode(node.id);
+          autoExpandTimer.current = null;
+        }, 500);
       }
-    ),
-    isFolder && isExpanded && node.children && /* @__PURE__ */ jsx("div", { "data-react-fancy-tree-node-children": "", children: node.children.map((child) => /* @__PURE__ */ jsx(TreeNode, { node: child, depth: depth + 1 }, child.id)) })
-  ] });
+    } else {
+      clearAutoExpand();
+    }
+    if (dragState.dropTargetId !== node.id || dragState.dropPosition !== position) {
+      setDragState({ draggedNodeId: sourceId, dropTargetId: node.id, dropPosition: position });
+    }
+  }, [dragState, node.id, isFolder, isExpanded, nodes, setDragState, expandNode, clearAutoExpand]);
+  const handleDragLeave = useCallback((e) => {
+    if (!e.currentTarget.contains(e.relatedTarget)) {
+      clearAutoExpand();
+      if (dragState.dropTargetId === node.id) {
+        setDragState({ ...dragState, dropTargetId: null, dropPosition: null });
+      }
+    }
+  }, [dragState, node.id, setDragState, clearAutoExpand]);
+  const handleDrop = useCallback((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    clearAutoExpand();
+    const sourceId = dragState.draggedNodeId;
+    const position = dragState.dropPosition;
+    if (!sourceId || !position) return;
+    if (sourceId === node.id) return;
+    if (isDescendantOf(nodes, sourceId, node.id)) return;
+    onNodeMove?.(sourceId, node.id, position);
+    setDragState({ draggedNodeId: null, dropTargetId: null, dropPosition: null });
+  }, [dragState, node.id, nodes, onNodeMove, setDragState, clearAutoExpand]);
+  const canDrag = draggable && !node.disabled;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-react-fancy-tree-node": "",
+      onDragOver: draggable ? handleDragOver : void 0,
+      onDragLeave: draggable ? handleDragLeave : void 0,
+      onDrop: draggable ? handleDrop : void 0,
+      children: [
+        isDropTarget && dropPosition === "before" && /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-react-fancy-tree-drop-indicator": "before",
+            className: "pointer-events-none h-0.5 rounded-full bg-blue-500",
+            style: { marginLeft: paddingLeft }
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            draggable: canDrag,
+            onDragStart: canDrag ? handleDragStart : void 0,
+            onDragEnd: canDrag ? handleDragEnd : void 0,
+            onClick: handleClick,
+            onContextMenu: handleContextMenu,
+            disabled: node.disabled,
+            className: cn(
+              "flex w-full items-center gap-1 rounded-md py-0.5 text-left text-[13px] transition-colors",
+              isSelected ? "bg-blue-500/15 text-blue-600 dark:text-blue-400" : "text-zinc-700 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-800",
+              node.disabled && "pointer-events-none opacity-40",
+              isDragging && "opacity-50",
+              canDrag && "cursor-grab active:cursor-grabbing",
+              isDropTarget && dropPosition === "inside" && "bg-blue-500/10 ring-1 ring-blue-500/30 ring-inset"
+            ),
+            style: { paddingLeft },
+            children: [
+              isFolder && /* @__PURE__ */ jsx(ChevronIcon, { open: isExpanded }),
+              !isFolder && /* @__PURE__ */ jsx("span", { className: "w-3.5 shrink-0" }),
+              showIcons && (node.icon ?? (isFolder ? /* @__PURE__ */ jsx(FolderIcon, { open: isExpanded }) : /* @__PURE__ */ jsx(FileIcon, { ext: node.ext ?? node.label.split(".").pop() }))),
+              /* @__PURE__ */ jsx("span", { className: "truncate", children: node.label })
+            ]
+          }
+        ),
+        isDropTarget && dropPosition === "after" && /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-react-fancy-tree-drop-indicator": "after",
+            className: "pointer-events-none h-0.5 rounded-full bg-blue-500",
+            style: { marginLeft: paddingLeft }
+          }
+        ),
+        isFolder && isExpanded && node.children && /* @__PURE__ */ jsx("div", { "data-react-fancy-tree-node-children": "", children: node.children.map((child) => /* @__PURE__ */ jsx(TreeNode, { node: child, depth: depth + 1 }, child.id)) })
+      ]
+    }
+  );
 }
 TreeNode.displayName = "TreeNode";
 function collectFolderIds(nodes) {
@@ -10309,11 +10458,18 @@ function collectFolderIds(nodes) {
   }
   return ids;
 }
+var EMPTY_DRAG_STATE = {
+  draggedNodeId: null,
+  dropTargetId: null,
+  dropPosition: null
+};
 function TreeNavRoot({
   nodes,
   selectedId,
   onSelect,
   onNodeContextMenu,
+  draggable = false,
+  onNodeMove,
   expandedIds: controlledExpanded,
   defaultExpandedIds,
   onExpandedChange,
@@ -10339,15 +10495,58 @@ function TreeNavRoot({
     },
     [expandedIds, isControlled, onExpandedChange]
   );
+  const expandNode = useCallback(
+    (id) => {
+      if (expandedIds.includes(id)) return;
+      const next = [...expandedIds, id];
+      if (!isControlled) {
+        setInternalExpanded(next);
+      }
+      onExpandedChange?.(next);
+    },
+    [expandedIds, isControlled, onExpandedChange]
+  );
+  const [dragState, setDragState] = useState(EMPTY_DRAG_STATE);
+  const handleDragEnd = useCallback(() => {
+    setDragState(EMPTY_DRAG_STATE);
+  }, []);
   const ctx = useMemo(
-    () => ({ selectedId, onSelect, onNodeContextMenu, expandedIds, toggle, indentSize, showIcons }),
-    [selectedId, onSelect, onNodeContextMenu, expandedIds, toggle, indentSize, showIcons]
+    () => ({
+      selectedId,
+      onSelect,
+      onNodeContextMenu,
+      expandedIds,
+      toggle,
+      indentSize,
+      showIcons,
+      draggable,
+      dragState,
+      setDragState,
+      onNodeMove,
+      nodes,
+      expandNode
+    }),
+    [
+      selectedId,
+      onSelect,
+      onNodeContextMenu,
+      expandedIds,
+      toggle,
+      indentSize,
+      showIcons,
+      draggable,
+      dragState,
+      onNodeMove,
+      nodes,
+      expandNode
+    ]
   );
   return /* @__PURE__ */ jsx(TreeNavContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(
     "nav",
     {
       "data-react-fancy-tree-nav": "",
       className: cn("flex flex-col gap-0.5 py-1 text-sm", className),
+      onDragEnd: draggable ? handleDragEnd : void 0,
       children: nodes.map((node) => /* @__PURE__ */ jsx(TreeNode, { node, depth: 0 }, node.id))
     }
   ) });
@@ -10357,6 +10556,6 @@ var TreeNav = Object.assign(TreeNavRoot, {
   Node: TreeNode
 });
 
-export { Accordion, Action, Autocomplete, Avatar, Badge, Brand, Breadcrumbs, Calendar, Callout, Canvas, Card, Carousel, Chart, Checkbox, CheckboxGroup, ColorPicker, Command, Composer, ContentRenderer, ContextMenu, DatePicker, Diagram, Dropdown, EMOJI_DATA, EMOJI_ENTRIES, Editor, Emoji, EmojiSelect, Field, FileUpload, Heading, Icon, Input, Kanban, Menu2 as Menu, MobileMenu, Modal, MultiSwitch, Navbar, OtpInput, Pagination, Pillbox, Popover, Portal, Profile, Progress, RadioGroup, Select, Separator, Sidebar, Skeleton, Slider, Switch, Table, Tabs, Text, Textarea, TimePicker, Timeline, Toast, Tooltip, TreeNav, cn, configureIcons, find, registerExtension, registerExtensions, registerIconSet, resolve, search, useAccordion, useAnimation, useCanvas, useCarousel, useCommand, useContextMenu, useControllableState, useDiagram, useDropdown, useEditor, useEscapeKey, useFileUpload, useFloatingPosition, useFocusTrap, useId11 as useId, useKanban, useMenu, useMobileMenu, useModal, useNavbar, useNodeRegistry, useOutsideClick, usePanZoom, usePopover, useSidebar, useTabs, useToast, useTreeNav };
+export { Accordion, Action, Autocomplete, Avatar, Badge, Brand, Breadcrumbs, Calendar, Callout, Canvas, Card, Carousel, Chart, Checkbox, CheckboxGroup, ColorPicker, Command, Composer, ContentRenderer, ContextMenu, DatePicker, Diagram, Dropdown, EMOJI_DATA, EMOJI_ENTRIES, Editor, Emoji, EmojiSelect, Field, FileUpload, Heading, Icon, Input, Kanban, Menu2 as Menu, MobileMenu, Modal, MultiSwitch, Navbar, OtpInput, Pagination, Pillbox, Popover, Portal, Profile, Progress, RadioGroup, Select, Separator, Sidebar, Skeleton, Slider, Switch, Table, Tabs, Text, Textarea, TimePicker, Timeline, Toast, Tooltip, TreeNav, cn, configureIcons, find, registerExtension, registerExtensions, registerIconSet, registerIcons, resolve, search, useAccordion, useAnimation, useCanvas, useCarousel, useCommand, useContextMenu, useControllableState, useDiagram, useDropdown, useEditor, useEscapeKey, useFileUpload, useFloatingPosition, useFocusTrap, useId11 as useId, useKanban, useMenu, useMobileMenu, useModal, useNavbar, useNodeRegistry, useOutsideClick, usePanZoom, usePopover, useSidebar, useTabs, useToast, useTreeNav };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map