@usefui/components 1.6.0 → 1.7.0

package/dist/index.d.ts

@@ -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?: "online" | "away" | "busy" | "offline";
+    status?: AvatarStatusType;
+}
+interface IAvatarBadgeProperties extends React$1.HTMLAttributes<HTMLDivElement> {
+    src?: string;
+    alt?: string;
+}
+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,122 @@ 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 {
@@ -737,7 +963,8 @@ interface IMessageBubbleContext {
 interface IMessageBubbleProperties extends IComponentStyling, React$1.HTMLAttributes<HTMLDivElement> {
     side: MessageBubbleSide;
 }
-interface IMessageBubbleContentProperties extends IComponentStyling, React$1.HTMLAttributes<HTMLDivElement> {
+interface IMessageBubbleContentProperties extends IComponentStyling, IComponentShape, IComponentSize, React$1.HTMLAttributes<HTMLDivElement> {
+    variant?: TComponentVariant | TComponentVariantExtended;
     children: string;
 }
 interface IMessageBubbleMetaProperties extends IComponentStyling, React$1.HTMLAttributes<HTMLDivElement> {
@@ -821,7 +1048,7 @@ interface OTPFieldProps {
     length?: number;
     onComplete?: (value: string) => void;
 }
-interface OTPFieldSlotProps {
+interface OTPFieldSlotProps extends IComponentVariant, IComponentStyling, IComponentShape {
     index: number;
 }
 
@@ -843,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;
     };
 };
@@ -855,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;
 };
 
@@ -1026,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;
@@ -1176,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.
@@ -1207,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 {
 }
@@ -1223,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.
@@ -1430,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.
@@ -1728,6 +1933,127 @@ declare const TreeContent: {
     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;
@@ -1760,4 +2086,6 @@ 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 };
+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 };