@usefui/components 1.5.3 → 1.6.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @usefui/components
 
+## 1.6.0
+
+### Minor Changes
+
+- Update dependencies, migrate to React 19, add new components (shimmer,tree,message bubble)
+
 ## 1.5.3
 
 ### Patch Changes

package/dist/index.d.mts

@@ -730,6 +730,90 @@ declare const FieldMeta: {
     displayName: string;
 };
 
+type MessageBubbleSide = "left" | "right";
+interface IMessageBubbleContext {
+    side: MessageBubbleSide;
+}
+interface IMessageBubbleProperties extends IComponentStyling, React$1.HTMLAttributes<HTMLDivElement> {
+    side: MessageBubbleSide;
+}
+interface IMessageBubbleContentProperties extends IComponentStyling, React$1.HTMLAttributes<HTMLDivElement> {
+    children: string;
+}
+interface IMessageBubbleMetaProperties extends IComponentStyling, React$1.HTMLAttributes<HTMLDivElement> {
+    createdAt: Date;
+}
+declare const MessageBubbleRoot: {
+    ({ children }: IReactChildren): React$1.JSX.Element;
+    displayName: string;
+};
+/**
+ * MessageBubble is used to display a chat message with an optional side and raw layout.
+ *
+ * **Best practices:**
+ *
+ * - Always wrap MessageBubble inside a MessageBubble.Root to provide the necessary context.
+ * - Use `side` to visually distinguish between sent and received messages.
+ * - Pair with MessageBubble.Content and MessageBubble.Meta for a complete message layout.
+ *
+ * @param {IMessageBubbleProperties} props - The props for the MessageBubble component.
+ * @param {"left" | "right"} props.side - The side the bubble is aligned to. Propagated to all child compounds via context.
+ * @param {boolean} props.raw - When true, removes default styling for custom layouts.
+ * @param {ReactNode} props.children - The content to be rendered inside the bubble.
+ * @returns {ReactElement} The MessageBubble component.
+ */
+declare const MessageBubble: {
+    (props: IMessageBubbleProperties): React$1.JSX.Element;
+    displayName: string;
+    Root: {
+        ({ children }: IReactChildren): React$1.JSX.Element;
+        displayName: string;
+    };
+    Content: {
+        (props: IMessageBubbleContentProperties): React$1.JSX.Element;
+        displayName: string;
+    };
+    Meta: {
+        (props: IMessageBubbleMetaProperties): React$1.JSX.Element;
+        displayName: string;
+    };
+};
+/**
+ * MessageBubble.Content is used to display the text or rich content of the message.
+ *
+ * **Best practices:**
+ *
+ * - Place MessageBubble.Content inside a MessageBubble to inherit the correct side context.
+ * - Avoid nesting interactive elements inside the content that may conflict with bubble focus management.
+ *
+ * @param {IMessageBubbleContentProperties} props - The props for the MessageBubble.Content component.
+ * @param {boolean} props.raw - When true, removes default styling for custom layouts.
+ * @param {ReactNode} props.children - The message text or rich content to render.
+ * @returns {ReactElement} The MessageBubble.Content component.
+ */
+declare const MessageBubbleContent: {
+    (props: IMessageBubbleContentProperties): React$1.JSX.Element;
+    displayName: string;
+};
+/**
+ * MessageBubble.Meta is used to display metadata associated with the message, such as its timestamp.
+ *
+ * **Best practices:**
+ *
+ * - Always provide a valid `createdAt` date for accurate timestamp display.
+ * - Place MessageBubble.Meta after MessageBubble.Content for a natural reading flow.
+ * - The side is automatically inherited from context — do not pass it manually.
+ *
+ * @param {IMessageBubbleMetaProperties} props - The props for the MessageBubble.Meta component.
+ * @param {Date} props.createdAt - The date the message was created. Formatted as medium date and short time.
+ * @param {boolean} props.raw - When true, removes default styling for custom layouts.
+ * @returns {ReactElement} The MessageBubble.Meta component.
+ */
+declare const MessageBubbleMeta: {
+    (props: IMessageBubbleMetaProperties): React$1.JSX.Element;
+    displayName: string;
+};
+
 interface OTPFieldProps {
     name?: string;
     id?: string;
@@ -1055,6 +1139,35 @@ declare const SheetTrigger: {
     displayName: string;
 };
 
+interface ITextShimmerProperties extends IComponentStyling, React$1.HTMLAttributes<HTMLSpanElement> {
+    duration?: number;
+    spread?: number;
+    shimmerColor?: string;
+    baseColor?: string;
+}
+/**
+ * Shimmer applies an animated shimmer gradient effect to inline text content.
+ *
+ * **Best practices:**
+ *
+ * - Use to indicate loading states for text content.
+ * - Prefer CSS custom properties for `shimmerColor` and `baseColor` to stay consistent with your design tokens.
+ * - Avoid using on large blocks of text; favour short labels or headings.
+ *
+ * @param {ITextShimmerProperties} props - The props for the Shimmer component.
+ * @param {ReactNode} props.children - The text content to apply the shimmer effect to.
+ * @param {boolean} props.raw - Whether the component is unstyled.
+ * @param {number} props.duration - Animation cycle duration in seconds. Defaults to 2.
+ * @param {number} props.spread - Gradient spread width as a percentage. Defaults to 200.
+ * @param {string} props.shimmerColor - Highlight color of the shimmer. Defaults to `--font-color-alpha-60`.
+ * @param {string} props.baseColor - Base text gradient color. Defaults to `--font-color-alpha-30`.
+ * @returns {ReactElement} The Shimmer component.
+ */
+declare const Shimmer: {
+    (props: ITextShimmerProperties): React$1.JSX.Element;
+    displayName: string;
+};
+
 interface IScrollAreaProperties extends React$1.ComponentProps<any> {
     scrollbar?: boolean;
 }
@@ -1498,6 +1611,123 @@ declare const Tooltip: {
     displayName: string;
 };
 
+interface ITreeComposition {
+    Root: typeof TreeRoot;
+    Node: typeof TreeNode;
+    Trigger: typeof TreeTrigger;
+    Content: typeof TreeContent;
+}
+interface ITreeProperties extends IComponentSpacing, React$1.ComponentProps<"ul"> {
+}
+interface ITreeRootProperties extends IReactChildren {
+    defaultExpandedIds?: string[];
+    onSelectionChange?: (ids: string[]) => void;
+}
+interface ITreeNodeProperties extends IComponentSpacing, React$1.ComponentProps<"li"> {
+    nodeId: string;
+    level?: number;
+    isLast?: boolean;
+}
+interface ITreeTriggerProperties extends Omit<IButtonProperties, "value"> {
+    nodeId: string;
+}
+interface ITreeContentProperties extends IComponentSpacing, React$1.ComponentProps<"ul"> {
+    nodeId: string;
+    defaultOpen?: boolean;
+}
+/**
+ * Tree is used to display a hierarchical list of items.
+ *
+ * **Best practices:**
+ *
+ * - Use a clear and descriptive label for each tree node.
+ * - Ensure that the tree can be operated using only the keyboard.
+ * - Ensure that the focus is properly managed when nodes are expanded/collapsed.
+ *
+ * @param {ITreeProperties} props - The props for the Tree component.
+ * @param {ReactNode} props.children - The content to be rendered inside the tree.
+ * @returns {ReactElement} The Tree component.
+ */
+declare const Tree: {
+    (props: ITreeProperties): React$1.JSX.Element;
+    displayName: string;
+    Root: {
+        ({ children, defaultExpandedIds, onSelectionChange, }: ITreeRootProperties): React$1.JSX.Element;
+        displayName: string;
+    };
+    Node: {
+        (props: ITreeNodeProperties): React$1.JSX.Element;
+        displayName: string;
+    };
+    Trigger: {
+        (props: ITreeTriggerProperties): React$1.JSX.Element;
+        displayName: string;
+    };
+    Content: {
+        (props: ITreeContentProperties): React$1.JSX.Element;
+        displayName: string;
+    };
+};
+declare const TreeRoot: {
+    ({ children, defaultExpandedIds, onSelectionChange, }: ITreeRootProperties): React$1.JSX.Element;
+    displayName: string;
+};
+/**
+ * Tree.Node is used to wrap each node of the tree.
+ *
+ * **Best practices:**
+ *
+ * - Provide a unique nodeId for each node.
+ * - Use the level prop to indicate the depth of the node in the hierarchy.
+ *
+ * @param {ITreeNodeProperties} props - The props for the Tree.Node component.
+ * @param {string} props.nodeId - The unique identifier for the node.
+ * @param {number} props.level - The depth level of the node. Defaults to 0.
+ * @param {boolean} props.isLast - Whether the node is the last in its siblings. Defaults to false.
+ * @param {ReactNode} props.children - The content to be rendered inside the node.
+ * @returns {ReactElement} The Tree.Node component.
+ */
+declare const TreeNode: {
+    (props: ITreeNodeProperties): React$1.JSX.Element;
+    displayName: string;
+};
+/**
+ * Tree.Trigger is used to trigger the expansion and collapse of the associated Tree.Content component.
+ *
+ * **Best practices:**
+ *
+ * - Use a clear and descriptive label for the trigger.
+ * - Ensure that the trigger can be operated using only the keyboard.
+ * - Ensure that the focus is properly managed when the trigger is activated.
+ *
+ * @param {ITreeTriggerProperties} props - The props for the Tree.Trigger component.
+ * @param {string} props.nodeId - The value used to bind the Tree.Trigger and Tree.Content components.
+ * @param {ReactNode} props.children - The content to be rendered inside the trigger.
+ * @returns {ReactElement} The Tree.Trigger component.
+ */
+declare const TreeTrigger: {
+    (props: ITreeTriggerProperties): React$1.JSX.Element;
+    displayName: string;
+};
+/**
+ * Tree.Content is used to contain the children of the associated Tree.Trigger component.
+ *
+ * **Best practices:**
+ *
+ * - Ensure that the content is hidden when the associated node is collapsed.
+ * - Ensure that the content is properly focused when the associated node is expanded.
+ *
+ * @param {ITreeContentProperties} props - The props for the Tree.Content component.
+ * @param {string} props.nodeId - The value used to bind the Tree.Content and Tree.Trigger components.
+ * @param {boolean} props.defaultOpen - The initial open state of the content. Defaults to false.
+ * @param {ReactNode} props.children - The content to be rendered inside the node content.
+ * @returns {ReactElement} The Tree.Content component.
+ */
+declare const TreeContent: {
+    (props: ITreeContentProperties): React$1.JSX.Element;
+    displayName: string;
+};
+
 declare const useAccordion: () => IComponentAPI;
 
 declare const useCheckbox: () => IComponentAPI;
@@ -1524,4 +1754,10 @@ declare const useTabs: () => IComponentAPI;
 
 declare const useToolbar: () => IComponentAPI;
 
-export { Accordion, AccordionContent, AccordionRoot, AccordionTrigger, AvataStatusEnum, Avatar, Badge, Breadcrumb, type BreadcrumbComposition, BreadcrumbItem, BreadcrumbSeparator, Button, Card, CardBody, type CardComposition, CardGrid, CardMeta, Checkbox, CheckboxIndicator, CheckboxRoot, Collapsible, CollapsibleContent, CollapsibleRoot, CollapsibleTrigger, CopyButton, Dialog, DialogControl, DialogMenu, DialogOverlay, DialogRoot, DialogTrigger, Divider, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuRoot, DropdownMenuTrigger, Field, FieldLabel, FieldMeta, FieldRoot, FieldWrapper, type IAccordionComposition, type IAccordionContentProperties, type IAccordionProperties, type IAccordionTriggerProperties, type IAvatarProperties, type IButtonProperties, type ICheckboxComposition, type ICheckboxProperties, type ICollapsibleComposition, type ICollapsibleProperties, type IDialogItemProperties, type IDropdownComposition, type IDropdownContentProperties, type IDropdownItemProperties, type IField, type IFieldComposition, type IFieldLabel, type IFieldMeta, type IOTPFieldComposition, type IOverlayProperties, type IPageToolsProperties, type IPageWrapperProperties, type IPortalProperties, type IScrollAreaProperties, type ISheetComposition, type ISheetProperties, type ISwitchComposition, type ISwitchProperties, type ISwitchThumbProperties, type ITabsComposition, type ITabsProperties, type IToggleProperties, type IToolbarBodyProperties, type IToolbarComposition, type IToolbarItemProperties, type IToolbarSectionProperties, MetaVariantEnum, OTPField, OTPFieldSlot, Overlay, Page, PageContent, PageMenu, PageNavigation, PagePanel, PageTools, PageWrapper, Portal, PrivacyField, Resizable, ScrollArea, type ScrollContainerProps, Sheet, SheetRoot, SheetTrigger, Skeleton, type SkeletonProperties, Spinner, Switch, SwitchRoot, SwitchThumb, type TMetaVariant, Table, TableBody, TableCell, TableFooter, TableHead, TableHeadCell, TableRow, Tabs, TabsContent, TabsRoot, TabsTrigger, Textarea, type TextareaProps, Toggle, Toolbar, ToolbarItem, ToolbarRoot, ToolbarSection, ToolbarTrigger, Tooltip, useAccordion, useCheckbox, useCollapsible, useDialog, useDropdownMenu, useField, useSheet, useSwitch, useTabs, useToolbar };
+declare const useMessageBubble: () => IComponentAPI;
+
+declare const useTree: () => IComponentAPI;
+
+declare const useTreeNode: () => IComponentAPI;
+
+export { Accordion, AccordionContent, AccordionRoot, AccordionTrigger, AvataStatusEnum, Avatar, Badge, Breadcrumb, type BreadcrumbComposition, BreadcrumbItem, BreadcrumbSeparator, Button, Card, CardBody, type CardComposition, CardGrid, CardMeta, Checkbox, CheckboxIndicator, CheckboxRoot, Collapsible, CollapsibleContent, CollapsibleRoot, CollapsibleTrigger, CopyButton, Dialog, DialogControl, DialogMenu, DialogOverlay, DialogRoot, DialogTrigger, Divider, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuRoot, DropdownMenuTrigger, Field, FieldLabel, FieldMeta, FieldRoot, FieldWrapper, type IAccordionComposition, type IAccordionContentProperties, type IAccordionProperties, type IAccordionTriggerProperties, type IAvatarProperties, type IBadgeProperties, type IButtonProperties, type ICheckboxComposition, type ICheckboxProperties, type ICollapsibleComposition, type ICollapsibleProperties, type IDialogItemProperties, type IDropdownComposition, type IDropdownContentProperties, type IDropdownItemProperties, type IField, type IFieldComposition, type IFieldLabel, type IFieldMeta, type IMessageBubbleContentProperties, type IMessageBubbleContext, type IMessageBubbleMetaProperties, type IMessageBubbleProperties, type IOTPFieldComposition, type IOverlayProperties, type IPageToolsProperties, type IPageWrapperProperties, type IPortalProperties, type IScrollAreaProperties, type ISheetComposition, type ISheetProperties, type ISwitchComposition, type ISwitchProperties, type ISwitchThumbProperties, type ITabsComposition, type ITabsProperties, type ITextShimmerProperties, type IToggleProperties, type IToolbarBodyProperties, type IToolbarComposition, type IToolbarItemProperties, type IToolbarSectionProperties, type ITreeComposition, type ITreeContentProperties, type ITreeNodeProperties, type ITreeProperties, type ITreeRootProperties, type ITreeTriggerProperties, MessageBubble, MessageBubbleContent, MessageBubbleMeta, MessageBubbleRoot, type MessageBubbleSide, MetaVariantEnum, OTPField, OTPFieldSlot, Overlay, Page, PageContent, PageMenu, PageNavigation, PagePanel, PageTools, PageWrapper, Portal, PrivacyField, Resizable, ScrollArea, type ScrollContainerProps, Sheet, SheetRoot, SheetTrigger, Shimmer, Skeleton, type SkeletonProperties, Spinner, Switch, SwitchRoot, SwitchThumb, type TMetaVariant, Table, TableBody, TableCell, TableFooter, TableHead, TableHeadCell, TableRow, Tabs, TabsContent, TabsRoot, TabsTrigger, Textarea, type TextareaProps, Toggle, Toolbar, ToolbarItem, ToolbarRoot, ToolbarSection, ToolbarTrigger, Tooltip, Tree, TreeContent, TreeNode, TreeRoot, TreeTrigger, useAccordion, useCheckbox, useCollapsible, useDialog, useDropdownMenu, useField, useMessageBubble, useSheet, useSwitch, useTabs, useToolbar, useTree, useTreeNode };

package/dist/index.d.ts

@@ -730,6 +730,90 @@ declare const FieldMeta: {
     displayName: string;
 };
 
+type MessageBubbleSide = "left" | "right";
+interface IMessageBubbleContext {
+    side: MessageBubbleSide;
+}
+interface IMessageBubbleProperties extends IComponentStyling, React$1.HTMLAttributes<HTMLDivElement> {
+    side: MessageBubbleSide;
+}
+interface IMessageBubbleContentProperties extends IComponentStyling, React$1.HTMLAttributes<HTMLDivElement> {
+    children: string;
+}
+interface IMessageBubbleMetaProperties extends IComponentStyling, React$1.HTMLAttributes<HTMLDivElement> {
+    createdAt: Date;
+}
+declare const MessageBubbleRoot: {
+    ({ children }: IReactChildren): React$1.JSX.Element;
+    displayName: string;
+};
+/**
+ * MessageBubble is used to display a chat message with an optional side and raw layout.
+ *
+ * **Best practices:**
+ *
+ * - Always wrap MessageBubble inside a MessageBubble.Root to provide the necessary context.
+ * - Use `side` to visually distinguish between sent and received messages.
+ * - Pair with MessageBubble.Content and MessageBubble.Meta for a complete message layout.
+ *
+ * @param {IMessageBubbleProperties} props - The props for the MessageBubble component.
+ * @param {"left" | "right"} props.side - The side the bubble is aligned to. Propagated to all child compounds via context.
+ * @param {boolean} props.raw - When true, removes default styling for custom layouts.
+ * @param {ReactNode} props.children - The content to be rendered inside the bubble.
+ * @returns {ReactElement} The MessageBubble component.
+ */
+declare const MessageBubble: {
+    (props: IMessageBubbleProperties): React$1.JSX.Element;
+    displayName: string;
+    Root: {
+        ({ children }: IReactChildren): React$1.JSX.Element;
+        displayName: string;
+    };
+    Content: {
+        (props: IMessageBubbleContentProperties): React$1.JSX.Element;
+        displayName: string;
+    };
+    Meta: {
+        (props: IMessageBubbleMetaProperties): React$1.JSX.Element;
+        displayName: string;
+    };
+};
+/**
+ * MessageBubble.Content is used to display the text or rich content of the message.
+ *
+ * **Best practices:**
+ *
+ * - Place MessageBubble.Content inside a MessageBubble to inherit the correct side context.
+ * - Avoid nesting interactive elements inside the content that may conflict with bubble focus management.
+ *
+ * @param {IMessageBubbleContentProperties} props - The props for the MessageBubble.Content component.
+ * @param {boolean} props.raw - When true, removes default styling for custom layouts.
+ * @param {ReactNode} props.children - The message text or rich content to render.
+ * @returns {ReactElement} The MessageBubble.Content component.
+ */
+declare const MessageBubbleContent: {
+    (props: IMessageBubbleContentProperties): React$1.JSX.Element;
+    displayName: string;
+};
+/**
+ * MessageBubble.Meta is used to display metadata associated with the message, such as its timestamp.
+ *
+ * **Best practices:**
+ *
+ * - Always provide a valid `createdAt` date for accurate timestamp display.
+ * - Place MessageBubble.Meta after MessageBubble.Content for a natural reading flow.
+ * - The side is automatically inherited from context — do not pass it manually.
+ *
+ * @param {IMessageBubbleMetaProperties} props - The props for the MessageBubble.Meta component.
+ * @param {Date} props.createdAt - The date the message was created. Formatted as medium date and short time.
+ * @param {boolean} props.raw - When true, removes default styling for custom layouts.
+ * @returns {ReactElement} The MessageBubble.Meta component.
+ */
+declare const MessageBubbleMeta: {
+    (props: IMessageBubbleMetaProperties): React$1.JSX.Element;
+    displayName: string;
+};
+
 interface OTPFieldProps {
     name?: string;
     id?: string;
@@ -1055,6 +1139,35 @@ declare const SheetTrigger: {
     displayName: string;
 };
 
+interface ITextShimmerProperties extends IComponentStyling, React$1.HTMLAttributes<HTMLSpanElement> {
+    duration?: number;
+    spread?: number;
+    shimmerColor?: string;
+    baseColor?: string;
+}
+/**
+ * Shimmer applies an animated shimmer gradient effect to inline text content.
+ *
+ * **Best practices:**
+ *
+ * - Use to indicate loading states for text content.
+ * - Prefer CSS custom properties for `shimmerColor` and `baseColor` to stay consistent with your design tokens.
+ * - Avoid using on large blocks of text; favour short labels or headings.
+ *
+ * @param {ITextShimmerProperties} props - The props for the Shimmer component.
+ * @param {ReactNode} props.children - The text content to apply the shimmer effect to.
+ * @param {boolean} props.raw - Whether the component is unstyled.
+ * @param {number} props.duration - Animation cycle duration in seconds. Defaults to 2.
+ * @param {number} props.spread - Gradient spread width as a percentage. Defaults to 200.
+ * @param {string} props.shimmerColor - Highlight color of the shimmer. Defaults to `--font-color-alpha-60`.
+ * @param {string} props.baseColor - Base text gradient color. Defaults to `--font-color-alpha-30`.
+ * @returns {ReactElement} The Shimmer component.
+ */
+declare const Shimmer: {
+    (props: ITextShimmerProperties): React$1.JSX.Element;
+    displayName: string;
+};
+
 interface IScrollAreaProperties extends React$1.ComponentProps<any> {
     scrollbar?: boolean;
 }
@@ -1498,6 +1611,123 @@ declare const Tooltip: {
     displayName: string;
 };
 
+interface ITreeComposition {
+    Root: typeof TreeRoot;
+    Node: typeof TreeNode;
+    Trigger: typeof TreeTrigger;
+    Content: typeof TreeContent;
+}
+interface ITreeProperties extends IComponentSpacing, React$1.ComponentProps<"ul"> {
+}
+interface ITreeRootProperties extends IReactChildren {
+    defaultExpandedIds?: string[];
+    onSelectionChange?: (ids: string[]) => void;
+}
+interface ITreeNodeProperties extends IComponentSpacing, React$1.ComponentProps<"li"> {
+    nodeId: string;
+    level?: number;
+    isLast?: boolean;
+}
+interface ITreeTriggerProperties extends Omit<IButtonProperties, "value"> {
+    nodeId: string;
+}
+interface ITreeContentProperties extends IComponentSpacing, React$1.ComponentProps<"ul"> {
+    nodeId: string;
+    defaultOpen?: boolean;
+}
+/**
+ * Tree is used to display a hierarchical list of items.
+ *
+ * **Best practices:**
+ *
+ * - Use a clear and descriptive label for each tree node.
+ * - Ensure that the tree can be operated using only the keyboard.
+ * - Ensure that the focus is properly managed when nodes are expanded/collapsed.
+ *
+ * @param {ITreeProperties} props - The props for the Tree component.
+ * @param {ReactNode} props.children - The content to be rendered inside the tree.
+ * @returns {ReactElement} The Tree component.
+ */
+declare const Tree: {
+    (props: ITreeProperties): React$1.JSX.Element;
+    displayName: string;
+    Root: {
+        ({ children, defaultExpandedIds, onSelectionChange, }: ITreeRootProperties): React$1.JSX.Element;
+        displayName: string;
+    };
+    Node: {
+        (props: ITreeNodeProperties): React$1.JSX.Element;
+        displayName: string;
+    };
+    Trigger: {
+        (props: ITreeTriggerProperties): React$1.JSX.Element;
+        displayName: string;
+    };
+    Content: {
+        (props: ITreeContentProperties): React$1.JSX.Element;
+        displayName: string;
+    };
+};
+declare const TreeRoot: {
+    ({ children, defaultExpandedIds, onSelectionChange, }: ITreeRootProperties): React$1.JSX.Element;
+    displayName: string;
+};
+/**
+ * Tree.Node is used to wrap each node of the tree.
+ *
+ * **Best practices:**
+ *
+ * - Provide a unique nodeId for each node.
+ * - Use the level prop to indicate the depth of the node in the hierarchy.
+ *
+ * @param {ITreeNodeProperties} props - The props for the Tree.Node component.
+ * @param {string} props.nodeId - The unique identifier for the node.
+ * @param {number} props.level - The depth level of the node. Defaults to 0.
+ * @param {boolean} props.isLast - Whether the node is the last in its siblings. Defaults to false.
+ * @param {ReactNode} props.children - The content to be rendered inside the node.
+ * @returns {ReactElement} The Tree.Node component.
+ */
+declare const TreeNode: {
+    (props: ITreeNodeProperties): React$1.JSX.Element;
+    displayName: string;
+};
+/**
+ * Tree.Trigger is used to trigger the expansion and collapse of the associated Tree.Content component.
+ *
+ * **Best practices:**
+ *
+ * - Use a clear and descriptive label for the trigger.
+ * - Ensure that the trigger can be operated using only the keyboard.
+ * - Ensure that the focus is properly managed when the trigger is activated.
+ *
+ * @param {ITreeTriggerProperties} props - The props for the Tree.Trigger component.
+ * @param {string} props.nodeId - The value used to bind the Tree.Trigger and Tree.Content components.
+ * @param {ReactNode} props.children - The content to be rendered inside the trigger.
+ * @returns {ReactElement} The Tree.Trigger component.
+ */
+declare const TreeTrigger: {
+    (props: ITreeTriggerProperties): React$1.JSX.Element;
+    displayName: string;
+};
+/**
+ * Tree.Content is used to contain the children of the associated Tree.Trigger component.
+ *
+ * **Best practices:**
+ *
+ * - Ensure that the content is hidden when the associated node is collapsed.
+ * - Ensure that the content is properly focused when the associated node is expanded.
+ *
+ * @param {ITreeContentProperties} props - The props for the Tree.Content component.
+ * @param {string} props.nodeId - The value used to bind the Tree.Content and Tree.Trigger components.
+ * @param {boolean} props.defaultOpen - The initial open state of the content. Defaults to false.
+ * @param {ReactNode} props.children - The content to be rendered inside the node content.
+ * @returns {ReactElement} The Tree.Content component.
+ */
+declare const TreeContent: {
+    (props: ITreeContentProperties): React$1.JSX.Element;
+    displayName: string;
+};
+
 declare const useAccordion: () => IComponentAPI;
 
 declare const useCheckbox: () => IComponentAPI;
@@ -1524,4 +1754,10 @@ declare const useTabs: () => IComponentAPI;
 
 declare const useToolbar: () => IComponentAPI;
 
-export { Accordion, AccordionContent, AccordionRoot, AccordionTrigger, AvataStatusEnum, Avatar, Badge, Breadcrumb, type BreadcrumbComposition, BreadcrumbItem, BreadcrumbSeparator, Button, Card, CardBody, type CardComposition, CardGrid, CardMeta, Checkbox, CheckboxIndicator, CheckboxRoot, Collapsible, CollapsibleContent, CollapsibleRoot, CollapsibleTrigger, CopyButton, Dialog, DialogControl, DialogMenu, DialogOverlay, DialogRoot, DialogTrigger, Divider, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuRoot, DropdownMenuTrigger, Field, FieldLabel, FieldMeta, FieldRoot, FieldWrapper, type IAccordionComposition, type IAccordionContentProperties, type IAccordionProperties, type IAccordionTriggerProperties, type IAvatarProperties, type IButtonProperties, type ICheckboxComposition, type ICheckboxProperties, type ICollapsibleComposition, type ICollapsibleProperties, type IDialogItemProperties, type IDropdownComposition, type IDropdownContentProperties, type IDropdownItemProperties, type IField, type IFieldComposition, type IFieldLabel, type IFieldMeta, type IOTPFieldComposition, type IOverlayProperties, type IPageToolsProperties, type IPageWrapperProperties, type IPortalProperties, type IScrollAreaProperties, type ISheetComposition, type ISheetProperties, type ISwitchComposition, type ISwitchProperties, type ISwitchThumbProperties, type ITabsComposition, type ITabsProperties, type IToggleProperties, type IToolbarBodyProperties, type IToolbarComposition, type IToolbarItemProperties, type IToolbarSectionProperties, MetaVariantEnum, OTPField, OTPFieldSlot, Overlay, Page, PageContent, PageMenu, PageNavigation, PagePanel, PageTools, PageWrapper, Portal, PrivacyField, Resizable, ScrollArea, type ScrollContainerProps, Sheet, SheetRoot, SheetTrigger, Skeleton, type SkeletonProperties, Spinner, Switch, SwitchRoot, SwitchThumb, type TMetaVariant, Table, TableBody, TableCell, TableFooter, TableHead, TableHeadCell, TableRow, Tabs, TabsContent, TabsRoot, TabsTrigger, Textarea, type TextareaProps, Toggle, Toolbar, ToolbarItem, ToolbarRoot, ToolbarSection, ToolbarTrigger, Tooltip, useAccordion, useCheckbox, useCollapsible, useDialog, useDropdownMenu, useField, useSheet, useSwitch, useTabs, useToolbar };
+declare const useMessageBubble: () => IComponentAPI;
+
+declare const useTree: () => IComponentAPI;
+
+declare const useTreeNode: () => IComponentAPI;
+
+export { Accordion, AccordionContent, AccordionRoot, AccordionTrigger, AvataStatusEnum, Avatar, Badge, Breadcrumb, type BreadcrumbComposition, BreadcrumbItem, BreadcrumbSeparator, Button, Card, CardBody, type CardComposition, CardGrid, CardMeta, Checkbox, CheckboxIndicator, CheckboxRoot, Collapsible, CollapsibleContent, CollapsibleRoot, CollapsibleTrigger, CopyButton, Dialog, DialogControl, DialogMenu, DialogOverlay, DialogRoot, DialogTrigger, Divider, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuRoot, DropdownMenuTrigger, Field, FieldLabel, FieldMeta, FieldRoot, FieldWrapper, type IAccordionComposition, type IAccordionContentProperties, type IAccordionProperties, type IAccordionTriggerProperties, type IAvatarProperties, type IBadgeProperties, type IButtonProperties, type ICheckboxComposition, type ICheckboxProperties, type ICollapsibleComposition, type ICollapsibleProperties, type IDialogItemProperties, type IDropdownComposition, type IDropdownContentProperties, type IDropdownItemProperties, type IField, type IFieldComposition, type IFieldLabel, type IFieldMeta, type IMessageBubbleContentProperties, type IMessageBubbleContext, type IMessageBubbleMetaProperties, type IMessageBubbleProperties, type IOTPFieldComposition, type IOverlayProperties, type IPageToolsProperties, type IPageWrapperProperties, type IPortalProperties, type IScrollAreaProperties, type ISheetComposition, type ISheetProperties, type ISwitchComposition, type ISwitchProperties, type ISwitchThumbProperties, type ITabsComposition, type ITabsProperties, type ITextShimmerProperties, type IToggleProperties, type IToolbarBodyProperties, type IToolbarComposition, type IToolbarItemProperties, type IToolbarSectionProperties, type ITreeComposition, type ITreeContentProperties, type ITreeNodeProperties, type ITreeProperties, type ITreeRootProperties, type ITreeTriggerProperties, MessageBubble, MessageBubbleContent, MessageBubbleMeta, MessageBubbleRoot, type MessageBubbleSide, MetaVariantEnum, OTPField, OTPFieldSlot, Overlay, Page, PageContent, PageMenu, PageNavigation, PagePanel, PageTools, PageWrapper, Portal, PrivacyField, Resizable, ScrollArea, type ScrollContainerProps, Sheet, SheetRoot, SheetTrigger, Shimmer, Skeleton, type SkeletonProperties, Spinner, Switch, SwitchRoot, SwitchThumb, type TMetaVariant, Table, TableBody, TableCell, TableFooter, TableHead, TableHeadCell, TableRow, Tabs, TabsContent, TabsRoot, TabsTrigger, Textarea, type TextareaProps, Toggle, Toolbar, ToolbarItem, ToolbarRoot, ToolbarSection, ToolbarTrigger, Tooltip, Tree, TreeContent, TreeNode, TreeRoot, TreeTrigger, useAccordion, useCheckbox, useCollapsible, useDialog, useDropdownMenu, useField, useMessageBubble, useSheet, useSwitch, useTabs, useToolbar, useTree, useTreeNode };