@usefui/components 1.5.3 → 1.7.0

package/dist/index.d.mts

@@ -11,6 +11,7 @@ type TComponentSize = "small" | "medium" | "large";
 type TComponentSide = "top" | "right" | "bottom" | "left";
 type TComponentShape = "square" | "smooth" | "round";
 type TComponentVariant = "primary" | "secondary" | "tertiary" | "mono" | "border" | "ghost";
+type TComponentVariantExtended = "danger" | "warning" | "meta" | "success" | "hint";
 type TKeyBinding = "ctrlKey" | "metaKey" | "altKey" | "shiftKey";
 interface IComponentAPI {
     id: string;
@@ -23,6 +24,9 @@ interface IComponentStyling {
 interface IComponentSize {
     sizing?: TComponentSize;
 }
+interface IComponentShape {
+    shape?: TComponentShape;
+}
 interface IComponentVariant {
     variant?: TComponentVariant;
 }
@@ -35,10 +39,9 @@ interface IComponentSpacing {
     spacing?: TComponentSize;
 }
 
-interface IButtonProperties extends IComponentStyling, IComponentSize, React$1.ComponentPropsWithRef<"button"> {
+interface IButtonProperties extends IComponentStyling, IComponentShape, IComponentSize, React$1.ComponentPropsWithRef<"button"> {
     rawicon?: boolean;
-    variant?: TComponentVariant | "danger" | "warning";
-    shape?: TComponentShape;
+    variant?: TComponentVariant | TComponentVariantExtended | "link" | "accent";
     animation?: "reflective";
 }
 /**
@@ -152,10 +155,19 @@ declare enum AvataStatusEnum {
     Busy = "busy",
     Offline = "offline"
 }
-interface IAvatarProperties extends IComponentStyling, IComponentSize, React$1.HTMLAttributes<HTMLDivElement> {
+type AvatarStatusType = "online" | "away" | "busy" | "offline";
+interface IAvatarProperties extends IComponentStyling, IComponentSize, IComponentShape, React$1.HTMLAttributes<HTMLDivElement> {
+    src?: string;
+    alt?: string;
+    status?: AvatarStatusType;
+}
+interface IAvatarBadgeProperties extends React$1.HTMLAttributes<HTMLDivElement> {
     src?: string;
     alt?: string;
-    status?: "online" | "away" | "busy" | "offline";
+}
+interface IAvatarComposition {
+    Status: typeof AvatarStatus;
+    Badge: typeof AvatarBadge;
 }
 /**
  * Avatar are used to represents a user or an entity on an interface.
@@ -178,11 +190,53 @@ interface IAvatarProperties extends IComponentStyling, IComponentSize, React$1.H
 declare const Avatar: {
     (props: IAvatarProperties): React$1.JSX.Element;
     displayName: string;
+    Status: {
+        (props: {
+            status?: AvatarStatusType;
+        }): React$1.ReactElement;
+        displayName: string;
+    };
+    Badge: {
+        (props: IAvatarBadgeProperties): React$1.ReactElement;
+        displayName: string;
+    };
+};
+/**
+ * Avatar Statuses are used to represents a user activity status on an interface.
+ *
+ * **Best practices:**
+ *
+ * - Use the appropriate status to match the context and the importance of the information.
+ *
+ * @param {string} props.status - The status of the user represented by the avatar.
+ * @returns {ReactElement} The Avatar Status component.
+ */
+declare const AvatarStatus: {
+    (props: {
+        status?: AvatarStatusType;
+    }): React$1.ReactElement;
+    displayName: string;
+};
+/**
+ * Avatar Badges are used to represents an entity or an information related to the primary subject of the avatar.
+ *
+ * **Best practices:**
+ *
+ * - Use the appropriate imgage to display the context and the importance of the information.
+ * - Always provide an `alt` attribute for accessibility when using an image.
+ *
+ * @param {IAvatarBadgeProperties} props - The props for the Avatar Badge component.
+ * @param {string} props.src - The source URL of the image to be displayed in the avatar badge.
+ * @param {string} props.alt - The alternative text for the image in the avatar badge.
+ * @returns {ReactElement} The Avatar Badge component.
+ */
+declare const AvatarBadge: {
+    (props: IAvatarBadgeProperties): React$1.ReactElement;
+    displayName: string;
 };
 
-interface IBadgeProperties extends IComponentStyling, React$1.ComponentProps<"div"> {
-    variant?: "primary" | "secondary" | "border" | "error" | "warning" | "success" | "meta";
-    shape?: TComponentShape;
+interface IBadgeProperties extends IComponentStyling, IComponentShape, IComponentSize, React$1.ComponentProps<"div"> {
+    variant?: TComponentVariant | TComponentVariantExtended;
 }
 /**
  * Badges are used to convey data or states to the users.
@@ -195,6 +249,7 @@ interface IBadgeProperties extends IComponentStyling, React$1.ComponentProps<"di
  * @param {IBadgeProperties} props - The props for the Badge component.
  * @param {boolean} props.raw - Define whether the component is styled or not.
  * @param {TComponentShape} props.shape - The shape of the component. Defaults to `smooth`.
+ * @param {ComponentSizeEnum} props.sizing - The size of the component. Defaults to "small".
  * @param {string} props.variant - The style definition used by the component.
  * @param {ReactNode} props.children - The content to be rendered inside the Badge.
  * @returns {ReactElement} The Badge component.
@@ -266,8 +321,7 @@ interface CardComposition {
 }
 interface CardGridProps extends React$1.ComponentProps<"div">, IComponentSize {
 }
-interface CardProps extends React$1.ComponentProps<"div"> {
-    shape?: TComponentShape;
+interface CardProps extends IComponentShape, React$1.ComponentProps<"div"> {
 }
 declare const CardGrid: {
     (props: CardGridProps): React$1.JSX.Element;
@@ -302,7 +356,8 @@ interface ICheckboxComposition {
     Root: typeof CheckboxRoot;
     Indicator: typeof CheckboxIndicator;
 }
-interface ICheckboxProperties extends IComponentStyling, IComponentSize, IComponentVariant, React$1.ComponentProps<"input"> {
+interface ICheckboxProperties extends IComponentStyling, IComponentSize, React$1.ComponentProps<"input"> {
+    variant?: TComponentVariant | TComponentVariantExtended | "accent";
 }
 /**
  * Checkbox are used to select one or more options from a set.
@@ -636,8 +691,7 @@ declare enum MetaVariantEnum {
     Error = "error"
 }
 type TMetaVariant = "default" | "hint" | "emphasis" | "error";
-interface IField extends React$1.ComponentProps<"input">, IComponentSize, IComponentVariant, IComponentStyling {
-    shape?: TComponentShape;
+interface IField extends React$1.ComponentProps<"input">, IComponentSize, IComponentVariant, IComponentShape, IComponentStyling {
     hint?: string;
     error?: string;
 }
@@ -647,11 +701,47 @@ interface IFieldLabel extends React$1.ComponentProps<"label">, IComponentStyling
 interface IFieldMeta extends React$1.ComponentProps<"small">, IComponentStyling {
     variant?: TMetaVariant;
 }
+interface IFieldNumber extends Omit<IField, "type"> {
+}
+interface IFieldDate extends IComponentSize, IComponentVariant, IComponentShape, IComponentStyling {
+    value?: Date;
+    defaultValue?: Date;
+    onChange?: (date: Date) => void;
+    hint?: string;
+    error?: string;
+    locale?: string;
+    withTime?: boolean;
+    disabled?: boolean;
+    id?: string;
+}
+interface IFieldFile extends Omit<IField, "type" | "children"> {
+    trigger?: React$1.ReactNode;
+    onFileChange?: (files: FileList | null) => void;
+}
+type PrivacyType = "password" | "text";
+interface IFieldPassword extends IField {
+    defaultType?: PrivacyType;
+}
+interface IFieldTag extends IComponentSize, IComponentVariant, IComponentShape, IComponentStyling {
+    value?: string[];
+    defaultValue?: string[];
+    allowed?: string[];
+    onChange?: (tags: string[]) => void;
+    error?: string;
+    disabled?: boolean;
+    placeholder?: string;
+    id?: string;
+}
 interface IFieldComposition {
     Root: typeof FieldRoot;
     Wrapper: typeof FieldWrapper;
     Label: typeof FieldLabel;
     Meta: typeof FieldMeta;
+    Number: typeof FieldNumber;
+    Date: typeof FieldDate;
+    File: typeof FieldFile;
+    Password: typeof FieldPassword;
+    Tag: typeof FieldTag;
 }
 /**
  * Fields are input element that provides additional functionality such as error and hint messages.
@@ -689,6 +779,26 @@ declare const Field: {
         (props: IFieldMeta): React$1.JSX.Element;
         displayName: string;
     };
+    Number: {
+        (props: IFieldNumber): React$1.JSX.Element;
+        displayName: string;
+    };
+    Date: {
+        (props: IFieldDate): React$1.JSX.Element;
+        displayName: string;
+    };
+    File: {
+        (props: IFieldFile): React$1.JSX.Element;
+        displayName: string;
+    };
+    Password: {
+        (props: IFieldPassword): React$1.JSX.Element;
+        displayName: string;
+    };
+    Tag: {
+        (props: IFieldTag): React$1.JSX.Element;
+        displayName: string;
+    };
 };
 declare const FieldRoot: {
     ({ children }: IReactChildren): React$1.JSX.Element;
@@ -729,6 +839,207 @@ declare const FieldMeta: {
     (props: IFieldMeta): React$1.JSX.Element;
     displayName: string;
 };
+/**
+ * Field.Number is a numeric input field with increment/decrement controls.
+ *
+ * **Best practices:**
+ *
+ * - Provide clear and descriptive labels for all numeric inputs.
+ * - Use `min`, `max`, and `step` props to constrain valid values.
+ *
+ * @param {IFieldNumber} props - The props for the Field.Number component.
+ * @param {boolean} props.raw - Define whether the component is styled or not.
+ * @param {ComponentSizeEnum} props.sizing - The size of the component. Defaults to `medium`.
+ * @param {string} props.variant - The style definition used by the component.
+ * @param {TComponentShape} props.shape - The shape of the component. Defaults to `smooth`.
+ * @returns {ReactElement} The Field.Number component.
+ */
+declare const FieldNumber: {
+    (props: IFieldNumber): React$1.JSX.Element;
+    displayName: string;
+};
+/**
+ * Field.Date is a segmented date (and optionally time) input driven by `Intl.DateTimeFormat`.
+ *
+ * **Best practices:**
+ *
+ * - Pair with `Field.Label` so screen readers announce the field correctly.
+ * - Pass `locale` to match the user's regional date format.
+ * - Use `withTime` when you need both date and time selection.
+ *
+ * @param {IFieldDate} props
+ * @param {ComponentSizeEnum} props.sizing - The size of the component. Defaults to `medium`.
+ * @param {string} props.variant - The style definition used by the component.
+ * @param {TComponentShape} props.shape - The size of the component. Defaults to `smooth`.
+ * @param {Date} props.value - Controlled date value.
+ * @param {Date} props.defaultValue - Uncontrolled initial value.
+ * @param {(date: Date) => void} props.onChange - Called on every segment change.
+ * @param {string} props.locale - BCP 47 locale tag. Defaults to browser locale.
+ * @param {boolean} props.withTime - Show hour/minute segments. Defaults to false.
+ */
+declare const FieldDate: {
+    (props: IFieldDate): React$1.JSX.Element;
+    displayName: string;
+};
+/**
+ * Field.File is a file upload field composed of a read-only text input that
+ * displays the selected filename and a trigger button that opens the native
+ * file picker.
+ *
+ * **Best practices:**
+ *
+ * - Pair with `Field.Label` so screen readers announce the field correctly.
+ * - Use `accept` to constrain the file types shown in the picker.
+ * - Reflect allowed formats and size limits in a `Field.Meta` hint.
+ *
+ * @param {IFieldFile} props
+ * @param {ComponentSizeEnum} props.sizing - The size of the component. Defaults to `medium`.
+ * @param {string} props.variant - The style definition used by the component.
+ * @param {TComponentShape} props.shape - The size of the component. Defaults to `smooth`.
+ * @param {React.ReactNode} props.trigger - Content for the upload button.
+ * @param {(files: FileList | null) => void} props.onFileChange - Called with the selected `FileList` after the user picks files.
+ */
+declare const FieldFile: {
+    (props: IFieldFile): React$1.JSX.Element;
+    displayName: string;
+};
+/**
+ * Field.Password is a text input that toggles the visibility of its value
+ * between plain text and masked characters.
+ *
+ * **Best practices:**
+ *
+ * - Pair with `Field.Label` so screen readers announce the field correctly.
+ * - Avoid setting `autoComplete` to a value that would expose sensitive data.
+ * - Use `defaultType` to control the initial visibility state of the field.
+ *
+ * @param {IFieldPassword} props - The props for the Field.Password component.
+ * @param {boolean} props.raw - Define whether the component is styled or not.
+ * @param {ComponentSizeEnum} props.sizing - The size of the component. Defaults to `medium`.
+ * @param {string} props.variant - The style definition used by the component.
+ * @param {TComponentShape} props.shape - The shape of the component. Defaults to `smooth`.
+ * @param {string} props.error - The error message to display.
+ * @param {boolean} props.disabled - Whether the input is disabled.
+ * @param {PrivacyType} props.defaultType - The initial input type. Defaults to `password`.
+ * @returns {ReactElement} The Field.Password component.
+ */
+declare const FieldPassword: {
+    (props: IFieldPassword): React$1.JSX.Element;
+    displayName: string;
+};
+/**
+ * Field.Tag is a tag/chip input that lets users build a list of unique
+ * string tokens by typing and pressing Enter.
+ *
+ * **Best practices:**
+ *
+ * - Pair with `Field.Label` so screen readers announce the field correctly.
+ * - Provide a `placeholder` to hint at expected input.
+ * - Use `defaultValue` for uncontrolled usage or `value` + `onChange` for controlled.
+ * - Use `allowed` to restrict input to a predefined set of values.
+ *
+ * @param {IFieldTag} props
+ * @param {boolean} props.raw - Define whether the component is styled or not.
+ * @param {ComponentSizeEnum} props.sizing - The size of the component. Defaults to `medium`.
+ * @param {string} props.variant - The style definition used by the component.
+ * @param {TComponentShape} props.shape - The shape of the component. Defaults to `smooth`.
+ * @param {string[]} props.value - Controlled tag list.
+ * @param {string[]} props.defaultValue - Uncontrolled initial tag list.
+ * @param {string[]} props.allowed - Optional allowlist; when provided only matching values can be added.
+ * @param {(tags: string[]) => void} props.onChange - Called whenever the tag list changes.
+ * @param {string} props.error - The error message to display.
+ * @param {boolean} props.disabled - Whether the input is disabled.
+ * @param {string} props.placeholder - Placeholder shown when the input is empty.
+ */
+declare const FieldTag: {
+    (props: IFieldTag): React$1.JSX.Element;
+    displayName: string;
+};
+
+type MessageBubbleSide = "left" | "right";
+interface IMessageBubbleContext {
+    side: MessageBubbleSide;
+}
+interface IMessageBubbleProperties extends IComponentStyling, React$1.HTMLAttributes<HTMLDivElement> {
+    side: MessageBubbleSide;
+}
+interface IMessageBubbleContentProperties extends IComponentStyling, IComponentShape, IComponentSize, React$1.HTMLAttributes<HTMLDivElement> {
+    variant?: TComponentVariant | TComponentVariantExtended;
+    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;
@@ -737,7 +1048,7 @@ interface OTPFieldProps {
     length?: number;
     onComplete?: (value: string) => void;
 }
-interface OTPFieldSlotProps {
+interface OTPFieldSlotProps extends IComponentVariant, IComponentStyling, IComponentShape {
     index: number;
 }
 
@@ -759,7 +1070,7 @@ declare const OTPField: {
     displayName: string;
     Group: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLSpanElement> & React$1.RefAttributes<HTMLSpanElement>>;
     Slot: {
-        ({ index, ...props }: OTPFieldSlotProps & React$1.InputHTMLAttributes<HTMLInputElement>): React$1.JSX.Element | null;
+        ({ index, shape, raw, ...props }: OTPFieldSlotProps & React$1.InputHTMLAttributes<HTMLInputElement>): React$1.JSX.Element | null;
         displayName: string;
     };
 };
@@ -771,7 +1082,7 @@ declare const OTPField: {
  * @returns {ReactElement} The OTPField.Slot component.
  */
 declare const OTPFieldSlot: {
-    ({ index, ...props }: OTPFieldSlotProps & React$1.InputHTMLAttributes<HTMLInputElement>): React$1.JSX.Element | null;
+    ({ index, shape, raw, ...props }: OTPFieldSlotProps & React$1.InputHTMLAttributes<HTMLInputElement>): React$1.JSX.Element | null;
     displayName: string;
 };
 
@@ -942,31 +1253,6 @@ declare const Portal: {
     displayName: string;
 };
 
-type PrivacyType = "password" | "text";
-interface PrivacyFieldProps extends IField {
-    defaultType?: PrivacyType;
-    textIcon: React$1.ReactNode;
-    passwordIcon: React$1.ReactNode;
-}
-/**
- * PrivacyFields are used to hide sensitive values typed by users.
- *
- * @param {PrivacyFieldProps} props - The props for the PrivacyField component.
- * @param {boolean} props.raw - Define whether the component is styled or not.
- * @param {ComponentSizeEnum} props.sizing - The size of the component. Defaults to `medium`.
- * @param {string} props.variant - The style definition used by the component.
- * @param {string} props.error - The error message to display.
- * @param {string} props.hint - The hint message to display.
- * @param {string} props.defaultType - The type of the PrivacyField when rendered.
- * @param {ReactElement} props.textIcon - The Icon used to convey the text type information.
- * @param {ReactElement} props.passwordIcon - The Icon used to convey the password type information.
- * @returns {ReactElement} The PrivacyField component.
- */
-declare const PrivacyField: {
-    ({ defaultType, textIcon, passwordIcon, ...restProps }: PrivacyFieldProps): React$1.JSX.Element;
-    displayName: string;
-};
-
 type ResizableEditorProperties = {
     defaultWidth?: number;
     left: React$1.ReactNode;
@@ -1055,6 +1341,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;
 }
@@ -1063,19 +1378,21 @@ interface IScrollAreaProperties extends React$1.ComponentProps<any> {
  */
 declare const ScrollArea: ({ scrollbar, children, ...restProps }: IScrollAreaProperties) => React$1.JSX.Element;
 
+type SpinnerVariant = "circle" | "circle-filled";
 interface SpinnerProperties extends IComponentSize {
+    variant?: SpinnerVariant;
 }
 /**
- * Spinners are used to convoy a loading state information.
+ * Spinners are used to convey a loading state information.
  *
- * @param {TextareaProps} props - The props for the Spinner component.
- * @param {ComponentSizeEnum} props.sizing - The size of the component. Defaults to `medium`.
+ * @param {SpinnerProperties} props - The props for the Spinner component.
+ * @param {string} props.sizing - The size of the component. Defaults to `medium`.
+ * @param {SpinnerVariant} props.variant - The spinner animation variant. Defaults to `circle`.
  * @returns {ReactElement} The Spinner component.
  */
 declare const Spinner: (props: SpinnerProperties) => React$1.JSX.Element;
 
-interface SkeletonProperties extends IComponentSize, React$1.ComponentPropsWithRef<"span"> {
-    shape?: TComponentShape;
+interface SkeletonProperties extends IComponentSize, IComponentShape, React$1.ComponentPropsWithRef<"span"> {
 }
 /**
  * Skeletons are used to convoy a loading state information.
@@ -1094,8 +1411,10 @@ interface ISwitchComposition {
     Root: typeof SwitchRoot;
     Thumb: typeof SwitchThumb;
 }
-interface ISwitchProperties extends React$1.ComponentProps<"button">, IComponentSize, IComponentVariant, IComponentStyling {
+type SwitchVariants = "primary" | "accent";
+interface ISwitchProperties extends React$1.ComponentProps<"button">, IComponentSize, IComponentStyling {
     defaultChecked?: boolean;
+    variant?: SwitchVariants;
 }
 interface ISwitchThumbProperties extends React$1.ComponentProps<"span">, IComponentSize, IComponentStyling {
 }
@@ -1110,7 +1429,7 @@ interface ISwitchThumbProperties extends React$1.ComponentProps<"span">, ICompon
  * @param {ISwitchProperties} props - The props for the Switch component.
  * @param {boolean} props.raw - Whether the switch should be rendered without any styles.
  * @param {ComponentSizeEnum} props.sizing - The size of the switch.
- * @param {ComponentVariantEnum} props.variant - The variant of the switch.
+ * @param {SwitchVariants} props.variant - The variant of the switch.
  * @param {boolean} props.defaultChecked - The initial state of the switch.
  * @param {ReactNode} props.children - The content to be rendered inside the switch.
  * @returns {ReactElement} The Switch component.
@@ -1317,9 +1636,8 @@ type ScrollContainerProps = {
     $trackColor?: string;
     $thumbHoverColor?: string;
 };
-interface TextareaProps extends React$1.TextareaHTMLAttributes<HTMLTextAreaElement>, IComponentStyling, IComponentSize, IComponentVariant {
+interface TextareaProps extends React$1.TextareaHTMLAttributes<HTMLTextAreaElement>, IComponentStyling, IComponentSize, IComponentShape, IComponentVariant {
     resizable?: boolean;
-    shape?: "square" | "smooth";
 }
 /**
  * Textarea are used to allow users to write large chunks of text.
@@ -1498,6 +1816,244 @@ 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;
+};
+
+interface ISelectTriggerProperties extends IButtonProperties {
+    error?: boolean;
+    children?: React$1.ReactNode;
+}
+interface ISelectContentProperties extends IComponentStyling, React$1.ComponentPropsWithRef<"ul"> {
+    defaultOpen?: boolean;
+}
+interface ISelectItemProperties extends IComponentStyling, Omit<React$1.ComponentProps<"li">, "onClick"> {
+    value?: string;
+    disabled?: boolean;
+    onClick?: (event: React$1.MouseEvent<HTMLLIElement> | React$1.KeyboardEvent<HTMLLIElement>) => void;
+}
+declare const SelectRoot: {
+    ({ children }: {
+        children: React$1.ReactElement;
+    }): React$1.JSX.Element;
+    displayName: string;
+};
+/**
+ * Select is used to allow users to choose a single value from a list of options.
+ *
+ * **Best practices:**
+ *
+ * - Use a clear and descriptive label for the trigger that accurately conveys he purpose of the select.
+ * - Ensure that the select can be opened and closed using the keyboard.
+ * - Ensure that the select is dismissed when the user clicks outside of it or presses the Esc key.
+ * - Wrap this component with `Select.Root` to provide the necessary context.
+ *
+ * @param {React.ComponentProps<"div">} props - The props for the Select component.
+ * @param {ReactNode} props.children - The content to be rendered inside the select.
+ * @returns {ReactElement} The Select component.
+ */
+declare const Select: {
+    ({ children }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+    displayName: string;
+    Root: {
+        ({ children }: {
+            children: React$1.ReactElement;
+        }): React$1.JSX.Element;
+        displayName: string;
+    };
+    Trigger: {
+        (props: ISelectTriggerProperties): React$1.JSX.Element;
+        displayName: string;
+    };
+    Content: {
+        (props: ISelectContentProperties): React$1.JSX.Element | null;
+        displayName: string;
+    };
+    Item: {
+        (props: ISelectItemProperties): React$1.JSX.Element;
+        displayName: string;
+    };
+};
+/**
+ * Select.Trigger is used to control the expansion and collapse of the associated Select.Content component.
+ *
+ * **Best practices:**
+ *
+ * - Use a clear and descriptive label that accurately conveys the purpose of the select field.
+ * - Ensure that the trigger can be operated using only the keyboard.
+ * - Ensure that the focus is properly managed when the trigger is activated.
+ * - Use the `error` prop to indicate a validation error state.
+ *
+ * @param {ISelectTriggerProperties} props - The props for the Select.Trigger component.
+ * @param {ComponentVariantEnum} props.variant - The visual variant of the trigger. Defaults to "secondary".
+ * @param {ComponentShapeEnum} props.shape - The shape of the trigger. Defaults to "smooth".
+ * @param {ComponentSizeEnum} props.sizing - The size of the trigger. Defaults to "medium".
+ * @param {boolean} props.error - Whether the trigger should display an error state. Defaults to false.
+ * @param {boolean} props.disabled - Whether the trigger is disabled.
+ * @param {boolean} props.raw - Define whether the component is styled or not.
+ * @param {ReactNode} props.children - The content to be rendered inside the trigger.
+ * @returns {ReactElement} The Select.Trigger component.
+ */
+declare const SelectTrigger: {
+    (props: ISelectTriggerProperties): React$1.JSX.Element;
+    displayName: string;
+};
+/**
+ * Select.Content contains the list of options associated with the Select.Trigger component.
+ *
+ * **Best practices:**
+ *
+ * - Ensure that the content is hidden when the select is collapsed.
+ * - Ensure that the content is properly positioned relative to the trigger,
+ *   accounting for available viewport space.
+ * - Ensure that the content can be dismissed using the Esc key.
+ *
+ * @param {ISelectContentProperties} props - The props for the Select.Content component.
+ * @param {boolean} props.raw - Define whether the component is styled or not.
+ * @param {boolean} props.defaultOpen - The initial open state of the select. Defaults to false.
+ * @param {ReactNode} props.children - The list of Select.Item components to render.
+ * @returns {ReactElement} The Select.Content component.
+ */
+declare const SelectContent: {
+    (props: ISelectContentProperties): React$1.JSX.Element | null;
+    displayName: string;
+};
+/**
+ * Select.Item represents a single option within Select.Content.
+ *
+ * **Best practices:**
+ *
+ * - Use a clear and concise label that accurately describes the option.
+ * - Ensure that the item can be selected using only the keyboard (Space or Enter).
+ * - Use the `disabled` prop to prevent selection of unavailable options.
+ * - Provide a meaningful `value` prop that will be stored in the select state upon selection.
+ *
+ * @param {ISelectItemProperties} props - The props for the Select.Item component.
+ * @param {string} props.value - The value associated with this option, stored in the select state on selection.
+ * @param {boolean} props.disabled - Whether the item is disabled and cannot be selected. Defaults to false.
+ * @param {boolean} props.raw - Define whether the component is styled or not.
+ * @param {Function} props.onClick - Optional callback fired when the item is selected via click or keyboard.
+ * @param {ReactNode} props.children - The content to be rendered inside the item.
+ * @returns {ReactElement} The Select.Item component.
+ */
+declare const SelectItem: {
+    (props: ISelectItemProperties): React$1.JSX.Element;
+    displayName: string;
+};
+
 declare const useAccordion: () => IComponentAPI;
 
 declare const useCheckbox: () => IComponentAPI;
@@ -1524,4 +2080,12 @@ 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;
+
+declare const useSelect: () => IComponentAPI;
+
+export { Accordion, AccordionContent, AccordionRoot, AccordionTrigger, AvataStatusEnum, Avatar, AvatarStatus, type AvatarStatusType, 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, FieldDate, FieldFile, FieldLabel, FieldMeta, FieldNumber, FieldPassword, FieldRoot, FieldTag, FieldWrapper, type IAccordionComposition, type IAccordionContentProperties, type IAccordionProperties, type IAccordionTriggerProperties, type IAvatarBadgeProperties, type IAvatarComposition, 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 IFieldDate, type IFieldFile, type IFieldLabel, type IFieldMeta, type IFieldNumber, type IFieldTag, type IMessageBubbleContentProperties, type IMessageBubbleContext, type IMessageBubbleMetaProperties, type IMessageBubbleProperties, type IOTPFieldComposition, type IOverlayProperties, type IPageToolsProperties, type IPageWrapperProperties, type IPortalProperties, type IScrollAreaProperties, type ISelectContentProperties, type ISelectItemProperties, type ISelectTriggerProperties, 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, Resizable, ScrollArea, type ScrollContainerProps, Select, SelectContent, SelectItem, SelectRoot, SelectTrigger, 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, useSelect, useSheet, useSwitch, useTabs, useToolbar, useTree, useTreeNode };