@ikatec/nebula-react 1.9.0-beta.5 → 1.9.0

package/dist/index.d.mts

@@ -248,7 +248,7 @@ declare const BannerAlert: ({ variant, type, title, description, onClose, childr
 interface BoxProps extends PropsWithChildren<HTMLAttributes<HTMLDivElement>> {
     border?: boolean;
     paddingSize?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
-    shadow?: 'sm' | 'md' | 'lg';
+    shadow?: 'sm' | 'md' | 'lg' | 'none';
     variant?: 'primary' | 'secondary';
 }
 declare const Box: ({ className, paddingSize, border, shadow, variant, children, ...rest }: BoxProps) => react_jsx_runtime.JSX.Element;
@@ -311,6 +311,11 @@ interface CropperMessages {
     dialogTitle: string;
     applyButtonLabel: string;
 }
+interface ComboboxMessages {
+    removeAll: string;
+    noItemsSelected: string;
+    selectAnOption: string;
+}
 /**
  * Type to store the messages.
  */
@@ -321,6 +326,7 @@ interface Messages {
     timePicker: TimePickerMessages;
     fileUpload: FileUploadMessages;
     cropper: CropperMessages;
+    combobox: ComboboxMessages;
 }
 
 declare enum NebulaLanguage {
@@ -615,6 +621,7 @@ interface InputDateTimePickerSingleProps extends Omit<InputTextProps, 'onChange'
     className?: string;
     disabledDates?: CalendarProps['disabled'];
     onClean?: VoidFunction;
+    popoverContainer?: HTMLElement | null;
 }
 declare const InputDateTimePickerSingle: ({ placeholder, className, value, onChange, numberOfMonths, onClean, disabledDates, ...rest }: InputDateTimePickerSingleProps) => react_jsx_runtime.JSX.Element;
 
@@ -1136,6 +1143,24 @@ type SidebarMenuItemProps = {
 };
 declare function SidebarMenuItem({ icon, action, label, active, disabled, counter, collapsible, defaultOpen, children, }: SidebarMenuItemProps): react_jsx_runtime.JSX.Element;
 
+type Option = {
+    value: string;
+    label: string;
+    color?: TagVariantsType;
+};
+interface ComboboxProps extends Omit<CreateStyledSelectProps, 'value' | 'onChange'> {
+    icon?: React__default.ReactNode;
+    placeholder?: string;
+    options: Option[];
+    value?: Option[];
+    onChange?: (value: Option[]) => void;
+    isClearable?: boolean;
+    showEmptyState?: boolean;
+    emptyStateText?: string;
+    emptyStateDescription?: string;
+}
+declare function Combobox({ value, onChange, showEmptyState, isClearable, emptyStateText, emptyStateDescription, ...props }: ComboboxProps): react_jsx_runtime.JSX.Element;
+
 /**
  * Context type to use the NebulaI18nProvider.
  */
@@ -1208,4 +1233,4 @@ declare function useKeyPress(key: string, callback: VoidFunction): void;
 
 declare const useIsMobile: (breakpoint?: number) => boolean;
 
-export { Accordion, AccordionContent, AccordionDescription, AccordionItem, type AccordionProps, AccordionTitle, AccordionTrigger, ActionBar, ActionBarButton, ActionBarClose, ActionBarContent, ActionBarDivider, ActionBarPortal, ActionBarTrigger, Alert, AlertButton, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, type AlertProps, AlertTitle, StyledAsync as Async, StyledAsyncCreatable as AsyncCreatable, Avatar, AvatarFallback, AvatarHoverAction, AvatarImage, AvatarSizeEnum, AvatarStick, AvatarVariantEnum, Badge, type BadgeProps, BannerAlert, type BannerAlertProps, BannerType, BannerVariant, Box, type BoxProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, type ButtonProps, Calendar, type CalendarProps, Caption, type CaptionProps, Checkbox, type CheckboxProps, StyledCreatable as Creatable, Cropper, CropperCropArea, CropperDescription, CropperImage, type CropperProps, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, type FileMetadata, FileUpload, type FileUploadActions, FileUploadError, type FileUploadOptions, type FileUploadProps, type FileUploadState, type FileWithPreview, Heading, type HeadingProps, InputDatePickerSingle, type InputDatePickerSingleProps, InputDateRangePicker, type InputDateRangePickerProps, InputDateTimePickerSingle, type InputDateTimePickerSingleProps, InputPhone, InputText, type InputTextProps, InputTime, type InputTimeProps, KanbanBoard, type KanbanBoardCard, type KanbanBoardColumn, type KanbanBoardProps, KanbanCard, type KanbanCardDropEvent, KanbanColumn, KanbanColumnDragHandle, type KanbanColumnDropEvent, KanbanColumnFooter, KanbanColumnHeader, KanbanColumnTitle, type KanbanOrderingMode, type KanbanRenderCardContext, type KanbanRenderColumnBodyContext, type KanbanRenderColumnContext, Label, Link, type LinkProps, NebulaI18nProvider, type NebulaI18nProviderProps, Pagination, type PaginationProps, Paragraph, type ParagraphProps, Popover, PopoverContent, type PopoverContentProps, PopoverTrigger, ProfileImage, type ProfileImageProps, RadioGroup, RadioGroupItem, StyledSelect as Select, type CreateStyledSelectProps as SelectProps, Separator, type SeparatorProps, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupLabel, SidebarHeader, SidebarMenuItem, type SidebarProps, SidebarSeparator, SidebarStateEnum, SidebarTitle, SidebarTrigger, Skeleton, type SkeletonProps, Slider, Space, SpaceDirectionEnum, type SpaceProps, SpaceSizeEnum, Stepper, StepperDescription, StepperIndicator, StepperItem, StepperSeparator, StepperTitle, StepperTrigger, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, type TagProps, TextArea, type TextAreaProps, TipCard, TipCardContent, TipCardFooter, TipCardHeader, TipCardItem, TipCardMedia, TipCardMediaType, TipCardProvider, Toaster, Toggle, ToggleGroup, ToggleGroupItem, ToggleGroupTypeEnum, ToggleSizeEnum, Tooltip, type TooltipProps, alertVariants, badgeSizeEnum, badgeVariantEnum, buttonSizeEnum, buttonVariantEnum, buttonVariantsConfig, dateIsAvailable, formatBytes, getNebulaLanguage, localeByi18nKey, messages, separatorVariants, setNebulaLanguage, tagVariantsEnum, tailwind, toast, toggleVariants, useClickOutside, useFileUpload, useIsMobile, useKeyPress, useNebulaI18n, useSidebar, useTipCard };
+export { Accordion, AccordionContent, AccordionDescription, AccordionItem, type AccordionProps, AccordionTitle, AccordionTrigger, ActionBar, ActionBarButton, ActionBarClose, ActionBarContent, ActionBarDivider, ActionBarPortal, ActionBarTrigger, Alert, AlertButton, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, type AlertProps, AlertTitle, StyledAsync as Async, StyledAsyncCreatable as AsyncCreatable, Avatar, AvatarFallback, AvatarHoverAction, AvatarImage, AvatarSizeEnum, AvatarStick, AvatarVariantEnum, Badge, type BadgeProps, BannerAlert, type BannerAlertProps, BannerType, BannerVariant, Box, type BoxProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, type ButtonProps, Calendar, type CalendarProps, Caption, type CaptionProps, Checkbox, type CheckboxProps, Combobox, type Option as ComboboxOption, type ComboboxProps, StyledCreatable as Creatable, Cropper, CropperCropArea, CropperDescription, CropperImage, type CropperProps, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, type FileMetadata, FileUpload, type FileUploadActions, FileUploadError, type FileUploadOptions, type FileUploadProps, type FileUploadState, type FileWithPreview, Heading, type HeadingProps, InputDatePickerSingle, type InputDatePickerSingleProps, InputDateRangePicker, type InputDateRangePickerProps, InputDateTimePickerSingle, type InputDateTimePickerSingleProps, InputPhone, InputText, type InputTextProps, InputTime, type InputTimeProps, KanbanBoard, type KanbanBoardCard, type KanbanBoardColumn, type KanbanBoardProps, KanbanCard, type KanbanCardDropEvent, KanbanColumn, KanbanColumnDragHandle, type KanbanColumnDropEvent, KanbanColumnFooter, KanbanColumnHeader, KanbanColumnTitle, type KanbanOrderingMode, type KanbanRenderCardContext, type KanbanRenderColumnBodyContext, type KanbanRenderColumnContext, Label, Link, type LinkProps, NebulaI18nProvider, type NebulaI18nProviderProps, Pagination, type PaginationProps, Paragraph, type ParagraphProps, Popover, PopoverContent, type PopoverContentProps, PopoverTrigger, ProfileImage, type ProfileImageProps, RadioGroup, RadioGroupItem, StyledSelect as Select, type CreateStyledSelectProps as SelectProps, Separator, type SeparatorProps, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupLabel, SidebarHeader, SidebarMenuItem, type SidebarProps, SidebarSeparator, SidebarStateEnum, SidebarTitle, SidebarTrigger, Skeleton, type SkeletonProps, Slider, Space, SpaceDirectionEnum, type SpaceProps, SpaceSizeEnum, Stepper, StepperDescription, StepperIndicator, StepperItem, StepperSeparator, StepperTitle, StepperTrigger, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, type TagProps, type TagVariantsType, TextArea, type TextAreaProps, TipCard, TipCardContent, TipCardFooter, TipCardHeader, TipCardItem, TipCardMedia, TipCardMediaType, TipCardProvider, Toaster, Toggle, ToggleGroup, ToggleGroupItem, ToggleGroupTypeEnum, ToggleSizeEnum, Tooltip, type TooltipProps, alertVariants, badgeSizeEnum, badgeVariantEnum, buttonSizeEnum, buttonVariantEnum, buttonVariantsConfig, dateIsAvailable, formatBytes, getNebulaLanguage, localeByi18nKey, messages, separatorVariants, setNebulaLanguage, tagVariantsEnum, tailwind, toast, toggleVariants, useClickOutside, useFileUpload, useIsMobile, useKeyPress, useNebulaI18n, useSidebar, useTipCard };

package/dist/index.d.ts

@@ -248,7 +248,7 @@ declare const BannerAlert: ({ variant, type, title, description, onClose, childr
 interface BoxProps extends PropsWithChildren<HTMLAttributes<HTMLDivElement>> {
     border?: boolean;
     paddingSize?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
-    shadow?: 'sm' | 'md' | 'lg';
+    shadow?: 'sm' | 'md' | 'lg' | 'none';
     variant?: 'primary' | 'secondary';
 }
 declare const Box: ({ className, paddingSize, border, shadow, variant, children, ...rest }: BoxProps) => react_jsx_runtime.JSX.Element;
@@ -311,6 +311,11 @@ interface CropperMessages {
     dialogTitle: string;
     applyButtonLabel: string;
 }
+interface ComboboxMessages {
+    removeAll: string;
+    noItemsSelected: string;
+    selectAnOption: string;
+}
 /**
  * Type to store the messages.
  */
@@ -321,6 +326,7 @@ interface Messages {
     timePicker: TimePickerMessages;
     fileUpload: FileUploadMessages;
     cropper: CropperMessages;
+    combobox: ComboboxMessages;
 }
 
 declare enum NebulaLanguage {
@@ -615,6 +621,7 @@ interface InputDateTimePickerSingleProps extends Omit<InputTextProps, 'onChange'
     className?: string;
     disabledDates?: CalendarProps['disabled'];
     onClean?: VoidFunction;
+    popoverContainer?: HTMLElement | null;
 }
 declare const InputDateTimePickerSingle: ({ placeholder, className, value, onChange, numberOfMonths, onClean, disabledDates, ...rest }: InputDateTimePickerSingleProps) => react_jsx_runtime.JSX.Element;
 
@@ -1136,6 +1143,24 @@ type SidebarMenuItemProps = {
 };
 declare function SidebarMenuItem({ icon, action, label, active, disabled, counter, collapsible, defaultOpen, children, }: SidebarMenuItemProps): react_jsx_runtime.JSX.Element;
 
+type Option = {
+    value: string;
+    label: string;
+    color?: TagVariantsType;
+};
+interface ComboboxProps extends Omit<CreateStyledSelectProps, 'value' | 'onChange'> {
+    icon?: React__default.ReactNode;
+    placeholder?: string;
+    options: Option[];
+    value?: Option[];
+    onChange?: (value: Option[]) => void;
+    isClearable?: boolean;
+    showEmptyState?: boolean;
+    emptyStateText?: string;
+    emptyStateDescription?: string;
+}
+declare function Combobox({ value, onChange, showEmptyState, isClearable, emptyStateText, emptyStateDescription, ...props }: ComboboxProps): react_jsx_runtime.JSX.Element;
+
 /**
  * Context type to use the NebulaI18nProvider.
  */
@@ -1208,4 +1233,4 @@ declare function useKeyPress(key: string, callback: VoidFunction): void;
 
 declare const useIsMobile: (breakpoint?: number) => boolean;
 
-export { Accordion, AccordionContent, AccordionDescription, AccordionItem, type AccordionProps, AccordionTitle, AccordionTrigger, ActionBar, ActionBarButton, ActionBarClose, ActionBarContent, ActionBarDivider, ActionBarPortal, ActionBarTrigger, Alert, AlertButton, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, type AlertProps, AlertTitle, StyledAsync as Async, StyledAsyncCreatable as AsyncCreatable, Avatar, AvatarFallback, AvatarHoverAction, AvatarImage, AvatarSizeEnum, AvatarStick, AvatarVariantEnum, Badge, type BadgeProps, BannerAlert, type BannerAlertProps, BannerType, BannerVariant, Box, type BoxProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, type ButtonProps, Calendar, type CalendarProps, Caption, type CaptionProps, Checkbox, type CheckboxProps, StyledCreatable as Creatable, Cropper, CropperCropArea, CropperDescription, CropperImage, type CropperProps, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, type FileMetadata, FileUpload, type FileUploadActions, FileUploadError, type FileUploadOptions, type FileUploadProps, type FileUploadState, type FileWithPreview, Heading, type HeadingProps, InputDatePickerSingle, type InputDatePickerSingleProps, InputDateRangePicker, type InputDateRangePickerProps, InputDateTimePickerSingle, type InputDateTimePickerSingleProps, InputPhone, InputText, type InputTextProps, InputTime, type InputTimeProps, KanbanBoard, type KanbanBoardCard, type KanbanBoardColumn, type KanbanBoardProps, KanbanCard, type KanbanCardDropEvent, KanbanColumn, KanbanColumnDragHandle, type KanbanColumnDropEvent, KanbanColumnFooter, KanbanColumnHeader, KanbanColumnTitle, type KanbanOrderingMode, type KanbanRenderCardContext, type KanbanRenderColumnBodyContext, type KanbanRenderColumnContext, Label, Link, type LinkProps, NebulaI18nProvider, type NebulaI18nProviderProps, Pagination, type PaginationProps, Paragraph, type ParagraphProps, Popover, PopoverContent, type PopoverContentProps, PopoverTrigger, ProfileImage, type ProfileImageProps, RadioGroup, RadioGroupItem, StyledSelect as Select, type CreateStyledSelectProps as SelectProps, Separator, type SeparatorProps, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupLabel, SidebarHeader, SidebarMenuItem, type SidebarProps, SidebarSeparator, SidebarStateEnum, SidebarTitle, SidebarTrigger, Skeleton, type SkeletonProps, Slider, Space, SpaceDirectionEnum, type SpaceProps, SpaceSizeEnum, Stepper, StepperDescription, StepperIndicator, StepperItem, StepperSeparator, StepperTitle, StepperTrigger, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, type TagProps, TextArea, type TextAreaProps, TipCard, TipCardContent, TipCardFooter, TipCardHeader, TipCardItem, TipCardMedia, TipCardMediaType, TipCardProvider, Toaster, Toggle, ToggleGroup, ToggleGroupItem, ToggleGroupTypeEnum, ToggleSizeEnum, Tooltip, type TooltipProps, alertVariants, badgeSizeEnum, badgeVariantEnum, buttonSizeEnum, buttonVariantEnum, buttonVariantsConfig, dateIsAvailable, formatBytes, getNebulaLanguage, localeByi18nKey, messages, separatorVariants, setNebulaLanguage, tagVariantsEnum, tailwind, toast, toggleVariants, useClickOutside, useFileUpload, useIsMobile, useKeyPress, useNebulaI18n, useSidebar, useTipCard };
+export { Accordion, AccordionContent, AccordionDescription, AccordionItem, type AccordionProps, AccordionTitle, AccordionTrigger, ActionBar, ActionBarButton, ActionBarClose, ActionBarContent, ActionBarDivider, ActionBarPortal, ActionBarTrigger, Alert, AlertButton, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, type AlertProps, AlertTitle, StyledAsync as Async, StyledAsyncCreatable as AsyncCreatable, Avatar, AvatarFallback, AvatarHoverAction, AvatarImage, AvatarSizeEnum, AvatarStick, AvatarVariantEnum, Badge, type BadgeProps, BannerAlert, type BannerAlertProps, BannerType, BannerVariant, Box, type BoxProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, type ButtonProps, Calendar, type CalendarProps, Caption, type CaptionProps, Checkbox, type CheckboxProps, Combobox, type Option as ComboboxOption, type ComboboxProps, StyledCreatable as Creatable, Cropper, CropperCropArea, CropperDescription, CropperImage, type CropperProps, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, type FileMetadata, FileUpload, type FileUploadActions, FileUploadError, type FileUploadOptions, type FileUploadProps, type FileUploadState, type FileWithPreview, Heading, type HeadingProps, InputDatePickerSingle, type InputDatePickerSingleProps, InputDateRangePicker, type InputDateRangePickerProps, InputDateTimePickerSingle, type InputDateTimePickerSingleProps, InputPhone, InputText, type InputTextProps, InputTime, type InputTimeProps, KanbanBoard, type KanbanBoardCard, type KanbanBoardColumn, type KanbanBoardProps, KanbanCard, type KanbanCardDropEvent, KanbanColumn, KanbanColumnDragHandle, type KanbanColumnDropEvent, KanbanColumnFooter, KanbanColumnHeader, KanbanColumnTitle, type KanbanOrderingMode, type KanbanRenderCardContext, type KanbanRenderColumnBodyContext, type KanbanRenderColumnContext, Label, Link, type LinkProps, NebulaI18nProvider, type NebulaI18nProviderProps, Pagination, type PaginationProps, Paragraph, type ParagraphProps, Popover, PopoverContent, type PopoverContentProps, PopoverTrigger, ProfileImage, type ProfileImageProps, RadioGroup, RadioGroupItem, StyledSelect as Select, type CreateStyledSelectProps as SelectProps, Separator, type SeparatorProps, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupLabel, SidebarHeader, SidebarMenuItem, type SidebarProps, SidebarSeparator, SidebarStateEnum, SidebarTitle, SidebarTrigger, Skeleton, type SkeletonProps, Slider, Space, SpaceDirectionEnum, type SpaceProps, SpaceSizeEnum, Stepper, StepperDescription, StepperIndicator, StepperItem, StepperSeparator, StepperTitle, StepperTrigger, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, type TagProps, type TagVariantsType, TextArea, type TextAreaProps, TipCard, TipCardContent, TipCardFooter, TipCardHeader, TipCardItem, TipCardMedia, TipCardMediaType, TipCardProvider, Toaster, Toggle, ToggleGroup, ToggleGroupItem, ToggleGroupTypeEnum, ToggleSizeEnum, Tooltip, type TooltipProps, alertVariants, badgeSizeEnum, badgeVariantEnum, buttonSizeEnum, buttonVariantEnum, buttonVariantsConfig, dateIsAvailable, formatBytes, getNebulaLanguage, localeByi18nKey, messages, separatorVariants, setNebulaLanguage, tagVariantsEnum, tailwind, toast, toggleVariants, useClickOutside, useFileUpload, useIsMobile, useKeyPress, useNebulaI18n, useSidebar, useTipCard };

package/dist/index.js

@@ -1073,7 +1073,8 @@ var Box = ({
         {
           "shadow-sm": shadow === "sm",
           "shadow-md": shadow === "md",
-          "shadow-lg": shadow === "lg"
+          "shadow-lg": shadow === "lg",
+          "shadow-none": shadow === "none"
         },
         className
       ),
@@ -1462,6 +1463,14 @@ var messages6 = {
 };
 var cropper_default = messages6;
 
+// src/i18n/messages/en/combobox.ts
+var messages7 = {
+  removeAll: "Remove all",
+  noItemsSelected: "No items selected",
+  selectAnOption: "Type to begin searching and select an option."
+};
+var combobox_default = messages7;
+
 // src/i18n/messages/en/index.ts
 var enMessages = {
   cropper: cropper_default,
@@ -1469,11 +1478,12 @@ var enMessages = {
   inputSelect: input_select_default,
   inputPhone: input_phone_default,
   timePicker: time_picker_default,
-  fileUpload: file_upload_default
+  fileUpload: file_upload_default,
+  combobox: combobox_default
 };
 
 // src/i18n/messages/es/pagination.ts
-var messages7 = {
+var messages8 = {
   totalResultsLabel(pagesSize, totalResults) {
     if (totalResults < pagesSize) {
       pagesSize = totalResults;
@@ -1484,16 +1494,16 @@ var messages7 = {
     return `P\xE1gina ${currentPage} de ${totalPages}`;
   }
 };
-var pagination_default2 = messages7;
+var pagination_default2 = messages8;
 
 // src/i18n/messages/es/input-select.ts
-var messages8 = {
+var messages9 = {
   noOptions: "No hay opciones disponibles"
 };
-var input_select_default2 = messages8;
+var input_select_default2 = messages9;
 
 // src/i18n/messages/es/input-phone.ts
-var messages9 = {
+var messages10 = {
   countries: {
     empty: "Seleccionar",
     AF: "Afganist\xE1n",
@@ -1743,26 +1753,34 @@ var messages9 = {
     ZW: "Zimbabue"
   }
 };
-var input_phone_default2 = messages9;
+var input_phone_default2 = messages10;
 
 // src/i18n/messages/es/time-picker.ts
-var messages10 = {
+var messages11 = {
   label: "Tiempo"
 };
-var time_picker_default2 = messages10;
+var time_picker_default2 = messages11;
 
 // src/i18n/messages/es/file-upload.ts
-var messages11 = {
+var messages12 = {
   deleteAll: "Remover todos"
 };
-var file_upload_default2 = messages11;
+var file_upload_default2 = messages12;
 
 // src/i18n/messages/es/cropper.ts
-var messages12 = {
+var messages13 = {
   applyButtonLabel: "Aplicar",
   dialogTitle: "Ajustar la imagen"
 };
-var cropper_default2 = messages12;
+var cropper_default2 = messages13;
+
+// src/i18n/messages/es/combobox.ts
+var messages14 = {
+  removeAll: "Eliminar todos",
+  noItemsSelected: "No hay elementos seleccionados",
+  selectAnOption: "Escriba para comenzar a buscar y seleccione una opci\xF3n."
+};
+var combobox_default2 = messages14;
 
 // src/i18n/messages/es/index.ts
 var esMessages = {
@@ -1771,11 +1789,12 @@ var esMessages = {
   inputSelect: input_select_default2,
   inputPhone: input_phone_default2,
   timePicker: time_picker_default2,
-  fileUpload: file_upload_default2
+  fileUpload: file_upload_default2,
+  combobox: combobox_default2
 };
 
 // src/i18n/messages/pt-br/pagination.ts
-var messages13 = {
+var messages15 = {
   totalResultsLabel(pagesSize, totalResults) {
     if (totalResults < pagesSize) {
       pagesSize = totalResults;
@@ -1786,16 +1805,16 @@ var messages13 = {
     return `P\xE1gina ${currentPage} de ${totalPages}`;
   }
 };
-var pagination_default3 = messages13;
+var pagination_default3 = messages15;
 
 // src/i18n/messages/pt-br/input-select.ts
-var messages14 = {
+var messages16 = {
   noOptions: "Nenhuma op\xE7\xE3o dispon\xEDvel"
 };
-var input_select_default3 = messages14;
+var input_select_default3 = messages16;
 
 // src/i18n/messages/pt-br/input-phone.ts
-var messages15 = {
+var messages17 = {
   countries: {
     empty: "Selecione",
     AF: "Afeganist\xE3o",
@@ -2045,26 +2064,34 @@ var messages15 = {
     ZW: "Zimb\xE1bue"
   }
 };
-var input_phone_default3 = messages15;
+var input_phone_default3 = messages17;
 
 // src/i18n/messages/pt-br/time-picker.ts
-var messages16 = {
+var messages18 = {
   label: "Hor\xE1rio"
 };
-var time_picker_default3 = messages16;
+var time_picker_default3 = messages18;
 
 // src/i18n/messages/pt-br/file-upload.ts
-var messages17 = {
+var messages19 = {
   deleteAll: "Remover todos"
 };
-var file_upload_default3 = messages17;
+var file_upload_default3 = messages19;
 
 // src/i18n/messages/pt-br/cropper.ts
-var messages18 = {
+var messages20 = {
   applyButtonLabel: "Aplicar",
   dialogTitle: "Ajustar imagem"
 };
-var cropper_default3 = messages18;
+var cropper_default3 = messages20;
+
+// src/i18n/messages/pt-br/combobox.ts
+var messages21 = {
+  removeAll: "Remover todos",
+  noItemsSelected: "Nenhum item selecionado",
+  selectAnOption: "Digite para come\xE7ar a buscar e selecione uma op\xE7\xE3o."
+};
+var combobox_default3 = messages21;
 
 // src/i18n/messages/pt-br/index.ts
 var ptBrMessages = {
@@ -2073,7 +2100,8 @@ var ptBrMessages = {
   inputPhone: input_phone_default3,
   timePicker: time_picker_default3,
   fileUpload: file_upload_default3,
-  cropper: cropper_default3
+  cropper: cropper_default3,
+  combobox: combobox_default3
 };
 
 // src/i18n/message-storage-handler.ts
@@ -2098,7 +2126,7 @@ var setNebulaLanguage = (language) => {
   }
   localStorage.setItem(getNebulaI18nStorageKey(), language);
 };
-var messages19 = /* @__PURE__ */ new Map([
+var messages22 = /* @__PURE__ */ new Map([
   [null, enMessages],
   [void 0, enMessages],
   ["en-US" /* EN_US */, enMessages],
@@ -2116,14 +2144,14 @@ var NebulaI18nProvider = ({
     () => customI18nStorageKey ?? localStorageKey,
     [customI18nStorageKey]
   );
-  const [messages20, setMessages] = React25.useState(
-    messages19.get(getNebulaLanguage()) ?? messages19.get("en-US" /* EN_US */)
+  const [messages23, setMessages] = React25.useState(
+    messages22.get(getNebulaLanguage()) ?? messages22.get("en-US" /* EN_US */)
   );
   const handleStorageChange = React25.useCallback(
     ({ detail }) => {
       if (detail.key === storageKey) {
         setMessages(
-          messages19.get(detail.value) ?? messages19.get("en-US" /* EN_US */)
+          messages22.get(detail.value) ?? messages22.get("en-US" /* EN_US */)
         );
       }
     },
@@ -2167,7 +2195,7 @@ var NebulaI18nProvider = ({
     NebulaI18nContext.Provider,
     {
       value: {
-        messages: messages20,
+        messages: messages23,
         locale: getNebulaLanguage()
       },
       children
@@ -5421,7 +5449,7 @@ var InputDateTimePickerSingle = ({
     formattedDateByLanguage ? new Date(formattedDateByLanguage) : void 0
   );
   const [popoverIsOpen, setPopoverIsOpen] = React25.useState(false);
-  const { locale, messages: messages20 } = useNebulaI18n();
+  const { locale, messages: messages23 } = useNebulaI18n();
   const [month, setMonth] = React25.useState(/* @__PURE__ */ new Date());
   const inputTimeRef = React25.useRef(null);
   const handleClearValue = () => {
@@ -5524,15 +5552,15 @@ var InputDateTimePickerSingle = ({
     replacement: { _: /\d/ }
   };
   const inputRef = mask.useMask(maskOptions);
-  const conteinerRef = React25.useRef(null);
+  const containerRef = React25.useRef(null);
   const calendarRef = React25.useRef(null);
-  useClickOutside([conteinerRef, calendarRef], () => {
+  useClickOutside([containerRef, calendarRef], () => {
     setPopoverIsOpen(false);
   });
   useKeyPress("Escape", () => {
     setPopoverIsOpen(false);
   });
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "nebula-ds w-full", ref: conteinerRef, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "nebula-ds w-full", ref: containerRef, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       InputText,
       {
@@ -5588,7 +5616,7 @@ var InputDateTimePickerSingle = ({
             disabled: disabledDates,
             footer: /* @__PURE__ */ jsxRuntime.jsxs(Space, { className: "nebula-ds items-center", children: [
               /* @__PURE__ */ jsxRuntime.jsxs(Label2, { children: [
-                messages20.timePicker.label,
+                messages23.timePicker.label,
                 ":"
               ] }),
               /* @__PURE__ */ jsxRuntime.jsx(
@@ -5617,8 +5645,8 @@ var CountrySelect = ({
   const handleSelect = (event) => {
     onChange(event.target.value);
   };
-  const { messages: messages20 } = useNebulaI18n();
-  const { countries } = messages20.inputPhone;
+  const { messages: messages23 } = useNebulaI18n();
+  const { countries } = messages23.inputPhone;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "nebula-ds rounded-s-[20px] relative inline-flex items-center self-stretch py-2 ps-4 pe-2 transition-[color,box-shadow] outline-none has-disabled:pointer-events-none has-disabled:opacity-50", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "nebula-ds inline-flex items-center gap-1", "aria-hidden": "true", children: [
       /* @__PURE__ */ jsxRuntime.jsx(FlagComponent, { country: value, countryName: value, "aria-hidden": "true" }),
@@ -5750,7 +5778,7 @@ var ClearIndicator = (props) => /* @__PURE__ */ jsxRuntime.jsx(
 );
 var MultiValueRemove = (props) => /* @__PURE__ */ jsxRuntime.jsx(Select.components.MultiValueRemove, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleX, { size: "16px" }) });
 var Option = (props) => {
-  const { isSelected, data, innerRef, innerProps } = props;
+  const { isSelected, isFocused, data, innerRef, innerProps } = props;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -5764,13 +5792,17 @@ var Option = (props) => {
           gap-2 
           cursor-pointer 
           text-sm 
-          hover:text-inputSelect-focus-text 
-          hover:bg-listItem-background-hover 
-          bg-listItem-background-default
-          text-inputSelect-default-text
+          text-listItem-primary-text-default
+          hover:bg-listItem-primary-background-hover
+          hover:text-listItem-primary-text-hover
+          outline-none
+          rounded-lg
           `,
         {
-          "text-inputSelect-focus-text font-semibold bg-listItem-background-hover": isSelected
+          "text-listItem-primary-text-selected font-semibold": isSelected
+        },
+        {
+          "bg-listItem-primary-background-hover text-listItem-primary-text-hover": isFocused
         }
       ),
       children: [
@@ -5801,17 +5833,35 @@ var multiValueLabelStyles = "";
 var indicatorsContainerStyles = "";
 var clearIndicatorStyles = "text-inputSelect-default-icon mr-2";
 var dropdownIndicatorStyles = "text-inputSelect-default-icon";
-var menuStyles = "mt-2 z-[1000] rounded-2xl border border-dropdownMenu-border  bg-dropdownMenu-background  shadow-dropdownMenu-shadow shadow-sm outline-none overflow-hidden";
+var menuStyles = `
+  mt-2
+  z-[1000]
+  rounded-2xl
+  border
+  border-dropdownMenu-border
+  bg-dropdownMenu-background
+  shadow-dropdownMenu-shadow
+  shadow-sm
+  outline-none
+  overflow-hidden
+  p-[6px]
+  flex 
+  flex-col 
+  gap-1
+`;
 var groupHeadingStyles = "ml-3 mt-2 mb-1 text-inputSelect-default-text text-sm";
 var noOptionsMessageStyles = "p-2 text-inputSelect-default-text";
 var createStyledSelect = (BaseSelect, displayName) => {
   const StyledSelect2 = ({
-    icon,
+    icon = null,
     disabled = false,
     isError = false,
     ...props
   }) => {
-    const { messages: messages20 } = useNebulaI18n();
+    const CloneIcon = icon && React25.cloneElement(icon, {
+      className: "size-4"
+    });
+    const { messages: messages23 } = useNebulaI18n();
     const customClassNames = React25.useMemo(() => {
       return {
         control: (props2) => controlStyles(props2, isError),
@@ -5843,13 +5893,13 @@ var createStyledSelect = (BaseSelect, displayName) => {
                 "text-inputSelect-default-icon": !isError,
                 "text-inputSelect-danger-icon": isError
               }),
-              children: icon
+              children: CloneIcon
             }
           ),
           children
         ] }) })
       }),
-      [icon, isError]
+      [icon, isError, CloneIcon]
     );
     return /* @__PURE__ */ jsxRuntime.jsx(
       BaseSelect,
@@ -5858,7 +5908,7 @@ var createStyledSelect = (BaseSelect, displayName) => {
         isDisabled: disabled,
         components: customComponents,
         classNames: customClassNames,
-        noOptionsMessage: () => /* @__PURE__ */ jsxRuntime.jsx("p", { children: messages20.inputSelect.noOptions }),
+        noOptionsMessage: () => /* @__PURE__ */ jsxRuntime.jsx("p", { children: messages23.inputSelect.noOptions }),
         ...props
       }
     );
@@ -7077,7 +7127,7 @@ var Pagination = ({
   onChangePage,
   ...props
 }) => {
-  const { messages: messages20 } = useNebulaI18n();
+  const { messages: messages23 } = useNebulaI18n();
   const totalPages = React25.useMemo(() => {
     return Math.ceil(total / (pageSize || 1));
   }, [total, pageSize]);
@@ -7110,13 +7160,13 @@ var Pagination = ({
   }, [totalPages, pageSize, total]);
   const totalResultsLabel = React25.useMemo(() => {
     if (page === totalPages) {
-      return messages20.pagination.totalResultsLabel(lastPageSize, total);
+      return messages23.pagination.totalResultsLabel(lastPageSize, total);
     }
-    return messages20.pagination.totalResultsLabel(pageSize, total);
-  }, [messages20.pagination, pageSize, total, page, totalPages, lastPageSize]);
+    return messages23.pagination.totalResultsLabel(pageSize, total);
+  }, [messages23.pagination, pageSize, total, page, totalPages, lastPageSize]);
   const currentPageLabel = React25.useMemo(
-    () => messages20.pagination.currentPageLabel(normalizedPage, totalPages),
-    [messages20.pagination, normalizedPage, totalPages]
+    () => messages23.pagination.currentPageLabel(normalizedPage, totalPages),
+    [messages23.pagination, normalizedPage, totalPages]
   );
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "nav",
@@ -8555,13 +8605,13 @@ function custom(message, options) {
     }
   );
 }
-async function promise(promise2, messages20, options) {
+async function promise(promise2, messages23, options) {
   const loadingToast = sonner.toast.custom(
     (t) => /* @__PURE__ */ jsxRuntime.jsx(
       ToastComponent,
       {
         type: "info",
-        message: messages20.loading,
+        message: messages23.loading,
         options,
         t
       }
@@ -8575,7 +8625,7 @@ async function promise(promise2, messages20, options) {
         ToastComponent,
         {
           type: "success",
-          message: messages20.success,
+          message: messages23.success,
           options,
           t
         }
@@ -8590,7 +8640,7 @@ async function promise(promise2, messages20, options) {
         ToastComponent,
         {
           type: "error",
-          message: messages20.error,
+          message: messages23.error,
           options,
           t
         }
@@ -9100,6 +9150,65 @@ function SidebarMenuItem({
     collapsible && open && !isRail && /* @__PURE__ */ jsxRuntime.jsx(SidebarLevelContext.Provider, { value: level + 1, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "nebula-ds mt-1 space-y-1", children }) })
   ] });
 }
+function Combobox({
+  value = [],
+  onChange,
+  showEmptyState = true,
+  isClearable = true,
+  emptyStateText,
+  emptyStateDescription,
+  ...props
+}) {
+  const { messages: messages23 } = useNebulaI18n();
+  const selectedValues = value || [];
+  const handleSelect = (val) => {
+    onChange?.(val);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(Space, { direction: "column", size: "md", className: "nebula-ds w-full", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      StyledSelect,
+      {
+        ...props,
+        onChange: (e) => handleSelect(e),
+        value: selectedValues,
+        isMulti: true,
+        controlShouldRenderValue: false,
+        hideSelectedOptions: false,
+        className: "nebula-ds w-full",
+        isClearable: false
+      }
+    ),
+    selectedValues.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "nebula-ds flex flex-wrap gap-2", children: [
+      selectedValues.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+        Tag,
+        {
+          color: item.color,
+          onDelete: () => {
+            const newValue = selectedValues.filter(
+              (i) => i.value !== item.value
+            );
+            onChange?.(newValue);
+          },
+          children: item.label
+        },
+        item.value
+      )),
+      isClearable && /* @__PURE__ */ jsxRuntime.jsx(Button, { onClick: () => onChange?.([]), size: "xs", variant: "ghost", children: /* @__PURE__ */ jsxRuntime.jsx(Paragraph, { children: messages23.combobox.removeAll }) })
+    ] }),
+    selectedValues.length <= 0 && showEmptyState && /* @__PURE__ */ jsxRuntime.jsx(
+      Box,
+      {
+        variant: "secondary",
+        shadow: "none",
+        className: "nebula-ds w-full flex justify-center items-center",
+        children: /* @__PURE__ */ jsxRuntime.jsxs(Space, { direction: "column", className: "nebula-ds justify-center items-center", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Heading, { level: "6", children: emptyStateText || messages23.combobox.noItemsSelected }),
+          /* @__PURE__ */ jsxRuntime.jsx(Paragraph, { size: "sm", children: emptyStateDescription || messages23.combobox.selectAnOption })
+        ] })
+      }
+    )
+  ] });
+}
 
 // src/tailwind.ts
 function content({ base = "./" } = {}) {
@@ -9162,6 +9271,7 @@ exports.Button = Button;
 exports.Calendar = Calendar;
 exports.Caption = Caption;
 exports.Checkbox = Checkbox;
+exports.Combobox = Combobox;
 exports.Creatable = StyledCreatable;
 exports.Cropper = Cropper2;
 exports.CropperCropArea = CropperCropArea2;
@@ -9293,7 +9403,7 @@ exports.dateIsAvailable = dateIsAvailable;
 exports.formatBytes = formatBytes;
 exports.getNebulaLanguage = getNebulaLanguage;
 exports.localeByi18nKey = localeByi18nKey;
-exports.messages = messages19;
+exports.messages = messages22;
 exports.separatorVariants = separatorVariants;
 exports.setNebulaLanguage = setNebulaLanguage;
 exports.tagVariantsEnum = tagVariantsEnum;

package/dist/index.mjs

@@ -3,7 +3,7 @@ import { Minus, Check, X, ChevronRight, Circle, CircleX, Eye, EyeOff, ClockIcon,
 import { extendTailwindMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React25 from 'react';
-import React25__default, { createContext, forwardRef, useMemo, useState, useEffect, memo, useContext, useCallback, useRef, useId } from 'react';
+import React25__default, { createContext, forwardRef, useMemo, useState, useEffect, memo, useContext, useCallback, useRef, useId, cloneElement } from 'react';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
@@ -1030,7 +1030,8 @@ var Box = ({
         {
           "shadow-sm": shadow === "sm",
           "shadow-md": shadow === "md",
-          "shadow-lg": shadow === "lg"
+          "shadow-lg": shadow === "lg",
+          "shadow-none": shadow === "none"
         },
         className
       ),
@@ -1419,6 +1420,14 @@ var messages6 = {
 };
 var cropper_default = messages6;
 
+// src/i18n/messages/en/combobox.ts
+var messages7 = {
+  removeAll: "Remove all",
+  noItemsSelected: "No items selected",
+  selectAnOption: "Type to begin searching and select an option."
+};
+var combobox_default = messages7;
+
 // src/i18n/messages/en/index.ts
 var enMessages = {
   cropper: cropper_default,
@@ -1426,11 +1435,12 @@ var enMessages = {
   inputSelect: input_select_default,
   inputPhone: input_phone_default,
   timePicker: time_picker_default,
-  fileUpload: file_upload_default
+  fileUpload: file_upload_default,
+  combobox: combobox_default
 };
 
 // src/i18n/messages/es/pagination.ts
-var messages7 = {
+var messages8 = {
   totalResultsLabel(pagesSize, totalResults) {
     if (totalResults < pagesSize) {
       pagesSize = totalResults;
@@ -1441,16 +1451,16 @@ var messages7 = {
     return `P\xE1gina ${currentPage} de ${totalPages}`;
   }
 };
-var pagination_default2 = messages7;
+var pagination_default2 = messages8;
 
 // src/i18n/messages/es/input-select.ts
-var messages8 = {
+var messages9 = {
   noOptions: "No hay opciones disponibles"
 };
-var input_select_default2 = messages8;
+var input_select_default2 = messages9;
 
 // src/i18n/messages/es/input-phone.ts
-var messages9 = {
+var messages10 = {
   countries: {
     empty: "Seleccionar",
     AF: "Afganist\xE1n",
@@ -1700,26 +1710,34 @@ var messages9 = {
     ZW: "Zimbabue"
   }
 };
-var input_phone_default2 = messages9;
+var input_phone_default2 = messages10;
 
 // src/i18n/messages/es/time-picker.ts
-var messages10 = {
+var messages11 = {
   label: "Tiempo"
 };
-var time_picker_default2 = messages10;
+var time_picker_default2 = messages11;
 
 // src/i18n/messages/es/file-upload.ts
-var messages11 = {
+var messages12 = {
   deleteAll: "Remover todos"
 };
-var file_upload_default2 = messages11;
+var file_upload_default2 = messages12;
 
 // src/i18n/messages/es/cropper.ts
-var messages12 = {
+var messages13 = {
   applyButtonLabel: "Aplicar",
   dialogTitle: "Ajustar la imagen"
 };
-var cropper_default2 = messages12;
+var cropper_default2 = messages13;
+
+// src/i18n/messages/es/combobox.ts
+var messages14 = {
+  removeAll: "Eliminar todos",
+  noItemsSelected: "No hay elementos seleccionados",
+  selectAnOption: "Escriba para comenzar a buscar y seleccione una opci\xF3n."
+};
+var combobox_default2 = messages14;
 
 // src/i18n/messages/es/index.ts
 var esMessages = {
@@ -1728,11 +1746,12 @@ var esMessages = {
   inputSelect: input_select_default2,
   inputPhone: input_phone_default2,
   timePicker: time_picker_default2,
-  fileUpload: file_upload_default2
+  fileUpload: file_upload_default2,
+  combobox: combobox_default2
 };
 
 // src/i18n/messages/pt-br/pagination.ts
-var messages13 = {
+var messages15 = {
   totalResultsLabel(pagesSize, totalResults) {
     if (totalResults < pagesSize) {
       pagesSize = totalResults;
@@ -1743,16 +1762,16 @@ var messages13 = {
     return `P\xE1gina ${currentPage} de ${totalPages}`;
   }
 };
-var pagination_default3 = messages13;
+var pagination_default3 = messages15;
 
 // src/i18n/messages/pt-br/input-select.ts
-var messages14 = {
+var messages16 = {
   noOptions: "Nenhuma op\xE7\xE3o dispon\xEDvel"
 };
-var input_select_default3 = messages14;
+var input_select_default3 = messages16;
 
 // src/i18n/messages/pt-br/input-phone.ts
-var messages15 = {
+var messages17 = {
   countries: {
     empty: "Selecione",
     AF: "Afeganist\xE3o",
@@ -2002,26 +2021,34 @@ var messages15 = {
     ZW: "Zimb\xE1bue"
   }
 };
-var input_phone_default3 = messages15;
+var input_phone_default3 = messages17;
 
 // src/i18n/messages/pt-br/time-picker.ts
-var messages16 = {
+var messages18 = {
   label: "Hor\xE1rio"
 };
-var time_picker_default3 = messages16;
+var time_picker_default3 = messages18;
 
 // src/i18n/messages/pt-br/file-upload.ts
-var messages17 = {
+var messages19 = {
   deleteAll: "Remover todos"
 };
-var file_upload_default3 = messages17;
+var file_upload_default3 = messages19;
 
 // src/i18n/messages/pt-br/cropper.ts
-var messages18 = {
+var messages20 = {
   applyButtonLabel: "Aplicar",
   dialogTitle: "Ajustar imagem"
 };
-var cropper_default3 = messages18;
+var cropper_default3 = messages20;
+
+// src/i18n/messages/pt-br/combobox.ts
+var messages21 = {
+  removeAll: "Remover todos",
+  noItemsSelected: "Nenhum item selecionado",
+  selectAnOption: "Digite para come\xE7ar a buscar e selecione uma op\xE7\xE3o."
+};
+var combobox_default3 = messages21;
 
 // src/i18n/messages/pt-br/index.ts
 var ptBrMessages = {
@@ -2030,7 +2057,8 @@ var ptBrMessages = {
   inputPhone: input_phone_default3,
   timePicker: time_picker_default3,
   fileUpload: file_upload_default3,
-  cropper: cropper_default3
+  cropper: cropper_default3,
+  combobox: combobox_default3
 };
 
 // src/i18n/message-storage-handler.ts
@@ -2055,7 +2083,7 @@ var setNebulaLanguage = (language) => {
   }
   localStorage.setItem(getNebulaI18nStorageKey(), language);
 };
-var messages19 = /* @__PURE__ */ new Map([
+var messages22 = /* @__PURE__ */ new Map([
   [null, enMessages],
   [void 0, enMessages],
   ["en-US" /* EN_US */, enMessages],
@@ -2073,14 +2101,14 @@ var NebulaI18nProvider = ({
     () => customI18nStorageKey ?? localStorageKey,
     [customI18nStorageKey]
   );
-  const [messages20, setMessages] = useState(
-    messages19.get(getNebulaLanguage()) ?? messages19.get("en-US" /* EN_US */)
+  const [messages23, setMessages] = useState(
+    messages22.get(getNebulaLanguage()) ?? messages22.get("en-US" /* EN_US */)
   );
   const handleStorageChange = useCallback(
     ({ detail }) => {
       if (detail.key === storageKey) {
         setMessages(
-          messages19.get(detail.value) ?? messages19.get("en-US" /* EN_US */)
+          messages22.get(detail.value) ?? messages22.get("en-US" /* EN_US */)
         );
       }
     },
@@ -2124,7 +2152,7 @@ var NebulaI18nProvider = ({
     NebulaI18nContext.Provider,
     {
       value: {
-        messages: messages20,
+        messages: messages23,
         locale: getNebulaLanguage()
       },
       children
@@ -5378,7 +5406,7 @@ var InputDateTimePickerSingle = ({
     formattedDateByLanguage ? new Date(formattedDateByLanguage) : void 0
   );
   const [popoverIsOpen, setPopoverIsOpen] = useState(false);
-  const { locale, messages: messages20 } = useNebulaI18n();
+  const { locale, messages: messages23 } = useNebulaI18n();
   const [month, setMonth] = useState(/* @__PURE__ */ new Date());
   const inputTimeRef = useRef(null);
   const handleClearValue = () => {
@@ -5481,15 +5509,15 @@ var InputDateTimePickerSingle = ({
     replacement: { _: /\d/ }
   };
   const inputRef = useMask(maskOptions);
-  const conteinerRef = useRef(null);
+  const containerRef = useRef(null);
   const calendarRef = useRef(null);
-  useClickOutside([conteinerRef, calendarRef], () => {
+  useClickOutside([containerRef, calendarRef], () => {
     setPopoverIsOpen(false);
   });
   useKeyPress("Escape", () => {
     setPopoverIsOpen(false);
   });
-  return /* @__PURE__ */ jsxs("div", { className: "nebula-ds w-full", ref: conteinerRef, children: [
+  return /* @__PURE__ */ jsxs("div", { className: "nebula-ds w-full", ref: containerRef, children: [
     /* @__PURE__ */ jsx(
       InputText,
       {
@@ -5545,7 +5573,7 @@ var InputDateTimePickerSingle = ({
             disabled: disabledDates,
             footer: /* @__PURE__ */ jsxs(Space, { className: "nebula-ds items-center", children: [
               /* @__PURE__ */ jsxs(Label2, { children: [
-                messages20.timePicker.label,
+                messages23.timePicker.label,
                 ":"
               ] }),
               /* @__PURE__ */ jsx(
@@ -5574,8 +5602,8 @@ var CountrySelect = ({
   const handleSelect = (event) => {
     onChange(event.target.value);
   };
-  const { messages: messages20 } = useNebulaI18n();
-  const { countries } = messages20.inputPhone;
+  const { messages: messages23 } = useNebulaI18n();
+  const { countries } = messages23.inputPhone;
   return /* @__PURE__ */ jsxs("div", { className: "nebula-ds rounded-s-[20px] relative inline-flex items-center self-stretch py-2 ps-4 pe-2 transition-[color,box-shadow] outline-none has-disabled:pointer-events-none has-disabled:opacity-50", children: [
     /* @__PURE__ */ jsxs("div", { className: "nebula-ds inline-flex items-center gap-1", "aria-hidden": "true", children: [
       /* @__PURE__ */ jsx(FlagComponent, { country: value, countryName: value, "aria-hidden": "true" }),
@@ -5707,7 +5735,7 @@ var ClearIndicator = (props) => /* @__PURE__ */ jsx(
 );
 var MultiValueRemove = (props) => /* @__PURE__ */ jsx(components.MultiValueRemove, { ...props, children: /* @__PURE__ */ jsx(CircleX, { size: "16px" }) });
 var Option = (props) => {
-  const { isSelected, data, innerRef, innerProps } = props;
+  const { isSelected, isFocused, data, innerRef, innerProps } = props;
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -5721,13 +5749,17 @@ var Option = (props) => {
           gap-2 
           cursor-pointer 
           text-sm 
-          hover:text-inputSelect-focus-text 
-          hover:bg-listItem-background-hover 
-          bg-listItem-background-default
-          text-inputSelect-default-text
+          text-listItem-primary-text-default
+          hover:bg-listItem-primary-background-hover
+          hover:text-listItem-primary-text-hover
+          outline-none
+          rounded-lg
           `,
         {
-          "text-inputSelect-focus-text font-semibold bg-listItem-background-hover": isSelected
+          "text-listItem-primary-text-selected font-semibold": isSelected
+        },
+        {
+          "bg-listItem-primary-background-hover text-listItem-primary-text-hover": isFocused
         }
       ),
       children: [
@@ -5758,17 +5790,35 @@ var multiValueLabelStyles = "";
 var indicatorsContainerStyles = "";
 var clearIndicatorStyles = "text-inputSelect-default-icon mr-2";
 var dropdownIndicatorStyles = "text-inputSelect-default-icon";
-var menuStyles = "mt-2 z-[1000] rounded-2xl border border-dropdownMenu-border  bg-dropdownMenu-background  shadow-dropdownMenu-shadow shadow-sm outline-none overflow-hidden";
+var menuStyles = `
+  mt-2
+  z-[1000]
+  rounded-2xl
+  border
+  border-dropdownMenu-border
+  bg-dropdownMenu-background
+  shadow-dropdownMenu-shadow
+  shadow-sm
+  outline-none
+  overflow-hidden
+  p-[6px]
+  flex 
+  flex-col 
+  gap-1
+`;
 var groupHeadingStyles = "ml-3 mt-2 mb-1 text-inputSelect-default-text text-sm";
 var noOptionsMessageStyles = "p-2 text-inputSelect-default-text";
 var createStyledSelect = (BaseSelect, displayName) => {
   const StyledSelect2 = ({
-    icon,
+    icon = null,
     disabled = false,
     isError = false,
     ...props
   }) => {
-    const { messages: messages20 } = useNebulaI18n();
+    const CloneIcon = icon && cloneElement(icon, {
+      className: "size-4"
+    });
+    const { messages: messages23 } = useNebulaI18n();
     const customClassNames = useMemo(() => {
       return {
         control: (props2) => controlStyles(props2, isError),
@@ -5800,13 +5850,13 @@ var createStyledSelect = (BaseSelect, displayName) => {
                 "text-inputSelect-default-icon": !isError,
                 "text-inputSelect-danger-icon": isError
               }),
-              children: icon
+              children: CloneIcon
             }
           ),
           children
         ] }) })
       }),
-      [icon, isError]
+      [icon, isError, CloneIcon]
     );
     return /* @__PURE__ */ jsx(
       BaseSelect,
@@ -5815,7 +5865,7 @@ var createStyledSelect = (BaseSelect, displayName) => {
         isDisabled: disabled,
         components: customComponents,
         classNames: customClassNames,
-        noOptionsMessage: () => /* @__PURE__ */ jsx("p", { children: messages20.inputSelect.noOptions }),
+        noOptionsMessage: () => /* @__PURE__ */ jsx("p", { children: messages23.inputSelect.noOptions }),
         ...props
       }
     );
@@ -7034,7 +7084,7 @@ var Pagination = ({
   onChangePage,
   ...props
 }) => {
-  const { messages: messages20 } = useNebulaI18n();
+  const { messages: messages23 } = useNebulaI18n();
   const totalPages = useMemo(() => {
     return Math.ceil(total / (pageSize || 1));
   }, [total, pageSize]);
@@ -7067,13 +7117,13 @@ var Pagination = ({
   }, [totalPages, pageSize, total]);
   const totalResultsLabel = useMemo(() => {
     if (page === totalPages) {
-      return messages20.pagination.totalResultsLabel(lastPageSize, total);
+      return messages23.pagination.totalResultsLabel(lastPageSize, total);
     }
-    return messages20.pagination.totalResultsLabel(pageSize, total);
-  }, [messages20.pagination, pageSize, total, page, totalPages, lastPageSize]);
+    return messages23.pagination.totalResultsLabel(pageSize, total);
+  }, [messages23.pagination, pageSize, total, page, totalPages, lastPageSize]);
   const currentPageLabel = useMemo(
-    () => messages20.pagination.currentPageLabel(normalizedPage, totalPages),
-    [messages20.pagination, normalizedPage, totalPages]
+    () => messages23.pagination.currentPageLabel(normalizedPage, totalPages),
+    [messages23.pagination, normalizedPage, totalPages]
   );
   return /* @__PURE__ */ jsxs(
     "nav",
@@ -8512,13 +8562,13 @@ function custom(message, options) {
     }
   );
 }
-async function promise(promise2, messages20, options) {
+async function promise(promise2, messages23, options) {
   const loadingToast = toast$1.custom(
     (t) => /* @__PURE__ */ jsx(
       ToastComponent,
       {
         type: "info",
-        message: messages20.loading,
+        message: messages23.loading,
         options,
         t
       }
@@ -8532,7 +8582,7 @@ async function promise(promise2, messages20, options) {
         ToastComponent,
         {
           type: "success",
-          message: messages20.success,
+          message: messages23.success,
           options,
           t
         }
@@ -8547,7 +8597,7 @@ async function promise(promise2, messages20, options) {
         ToastComponent,
         {
           type: "error",
-          message: messages20.error,
+          message: messages23.error,
           options,
           t
         }
@@ -9057,6 +9107,65 @@ function SidebarMenuItem({
     collapsible && open && !isRail && /* @__PURE__ */ jsx(SidebarLevelContext.Provider, { value: level + 1, children: /* @__PURE__ */ jsx("div", { className: "nebula-ds mt-1 space-y-1", children }) })
   ] });
 }
+function Combobox({
+  value = [],
+  onChange,
+  showEmptyState = true,
+  isClearable = true,
+  emptyStateText,
+  emptyStateDescription,
+  ...props
+}) {
+  const { messages: messages23 } = useNebulaI18n();
+  const selectedValues = value || [];
+  const handleSelect = (val) => {
+    onChange?.(val);
+  };
+  return /* @__PURE__ */ jsxs(Space, { direction: "column", size: "md", className: "nebula-ds w-full", children: [
+    /* @__PURE__ */ jsx(
+      StyledSelect,
+      {
+        ...props,
+        onChange: (e) => handleSelect(e),
+        value: selectedValues,
+        isMulti: true,
+        controlShouldRenderValue: false,
+        hideSelectedOptions: false,
+        className: "nebula-ds w-full",
+        isClearable: false
+      }
+    ),
+    selectedValues.length > 0 && /* @__PURE__ */ jsxs("div", { className: "nebula-ds flex flex-wrap gap-2", children: [
+      selectedValues.map((item) => /* @__PURE__ */ jsx(
+        Tag,
+        {
+          color: item.color,
+          onDelete: () => {
+            const newValue = selectedValues.filter(
+              (i) => i.value !== item.value
+            );
+            onChange?.(newValue);
+          },
+          children: item.label
+        },
+        item.value
+      )),
+      isClearable && /* @__PURE__ */ jsx(Button, { onClick: () => onChange?.([]), size: "xs", variant: "ghost", children: /* @__PURE__ */ jsx(Paragraph, { children: messages23.combobox.removeAll }) })
+    ] }),
+    selectedValues.length <= 0 && showEmptyState && /* @__PURE__ */ jsx(
+      Box,
+      {
+        variant: "secondary",
+        shadow: "none",
+        className: "nebula-ds w-full flex justify-center items-center",
+        children: /* @__PURE__ */ jsxs(Space, { direction: "column", className: "nebula-ds justify-center items-center", children: [
+          /* @__PURE__ */ jsx(Heading, { level: "6", children: emptyStateText || messages23.combobox.noItemsSelected }),
+          /* @__PURE__ */ jsx(Paragraph, { size: "sm", children: emptyStateDescription || messages23.combobox.selectAnOption })
+        ] })
+      }
+    )
+  ] });
+}
 
 // src/tailwind.ts
 function content({ base = "./" } = {}) {
@@ -9068,4 +9177,4 @@ var tailwind = {
   // plugin: () => require("tailwindcss")("node_modules/@nebulareact/dist/tailwind.config.js"),
 };
 
-export { Accordion, AccordionContent, AccordionDescription, AccordionItem, AccordionTitle, AccordionTrigger, ActionBar, ActionBarButton, ActionBarClose, ActionBarContent, ActionBarDivider, ActionBarPortal, ActionBarTrigger, Alert, AlertButton, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, AlertTitle, StyledAsync as Async, StyledAsyncCreatable as AsyncCreatable, Avatar, AvatarFallback, AvatarHoverAction, AvatarImage, AvatarSizeEnum, AvatarStick, AvatarVariantEnum, Badge, BannerAlert, BannerType, BannerVariant, Box, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Calendar, Caption, Checkbox, StyledCreatable as Creatable, Cropper2 as Cropper, CropperCropArea2 as CropperCropArea, CropperDescription2 as CropperDescription, CropperImage2 as CropperImage, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, FileUpload, FileUploadError, Heading, InputDatePickerSingle, InputDateRangePicker, InputDateTimePickerSingle, InputPhone, InputText, InputTime, KanbanBoard, KanbanCard, KanbanColumn, KanbanColumnDragHandle, KanbanColumnFooter, KanbanColumnHeader, KanbanColumnTitle, Label2 as Label, Link, NebulaI18nProvider, Pagination, Paragraph, Popover, PopoverContent, PopoverTrigger, ProfileImage, RadioGroup2 as RadioGroup, RadioGroupItem, StyledSelect as Select, Separator, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupLabel, SidebarHeader, SidebarMenuItem, SidebarSeparator, SidebarStateEnum, SidebarTitle, SidebarTrigger, Skeleton, Slider, Space, SpaceDirectionEnum, SpaceSizeEnum, Stepper, StepperDescription, StepperIndicator, StepperItem, StepperSeparator, StepperTitle, StepperTrigger, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, TextArea, TipCard, TipCardContent2 as TipCardContent, TipCardFooter, TipCardHeader, TipCardItem, TipCardMedia, TipCardMediaType, TipCardProvider, Toaster, Toggle, ToggleGroup, ToggleGroupItem, ToggleGroupTypeEnum, ToggleSizeEnum, Tooltip, alertVariants, badgeSizeEnum, badgeVariantEnum, buttonSizeEnum, buttonVariantEnum, buttonVariantsConfig, dateIsAvailable, formatBytes, getNebulaLanguage, localeByi18nKey, messages19 as messages, separatorVariants, setNebulaLanguage, tagVariantsEnum, tailwind, toast, toggleVariants, useClickOutside, useFileUpload, useIsMobile, useKeyPress, useNebulaI18n, useSidebar, useTipCard };
+export { Accordion, AccordionContent, AccordionDescription, AccordionItem, AccordionTitle, AccordionTrigger, ActionBar, ActionBarButton, ActionBarClose, ActionBarContent, ActionBarDivider, ActionBarPortal, ActionBarTrigger, Alert, AlertButton, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, AlertTitle, StyledAsync as Async, StyledAsyncCreatable as AsyncCreatable, Avatar, AvatarFallback, AvatarHoverAction, AvatarImage, AvatarSizeEnum, AvatarStick, AvatarVariantEnum, Badge, BannerAlert, BannerType, BannerVariant, Box, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Calendar, Caption, Checkbox, Combobox, StyledCreatable as Creatable, Cropper2 as Cropper, CropperCropArea2 as CropperCropArea, CropperDescription2 as CropperDescription, CropperImage2 as CropperImage, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, FileUpload, FileUploadError, Heading, InputDatePickerSingle, InputDateRangePicker, InputDateTimePickerSingle, InputPhone, InputText, InputTime, KanbanBoard, KanbanCard, KanbanColumn, KanbanColumnDragHandle, KanbanColumnFooter, KanbanColumnHeader, KanbanColumnTitle, Label2 as Label, Link, NebulaI18nProvider, Pagination, Paragraph, Popover, PopoverContent, PopoverTrigger, ProfileImage, RadioGroup2 as RadioGroup, RadioGroupItem, StyledSelect as Select, Separator, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupLabel, SidebarHeader, SidebarMenuItem, SidebarSeparator, SidebarStateEnum, SidebarTitle, SidebarTrigger, Skeleton, Slider, Space, SpaceDirectionEnum, SpaceSizeEnum, Stepper, StepperDescription, StepperIndicator, StepperItem, StepperSeparator, StepperTitle, StepperTrigger, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, TextArea, TipCard, TipCardContent2 as TipCardContent, TipCardFooter, TipCardHeader, TipCardItem, TipCardMedia, TipCardMediaType, TipCardProvider, Toaster, Toggle, ToggleGroup, ToggleGroupItem, ToggleGroupTypeEnum, ToggleSizeEnum, Tooltip, alertVariants, badgeSizeEnum, badgeVariantEnum, buttonSizeEnum, buttonVariantEnum, buttonVariantsConfig, dateIsAvailable, formatBytes, getNebulaLanguage, localeByi18nKey, messages22 as messages, separatorVariants, setNebulaLanguage, tagVariantsEnum, tailwind, toast, toggleVariants, useClickOutside, useFileUpload, useIsMobile, useKeyPress, useNebulaI18n, useSidebar, useTipCard };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ikatec/nebula-react",
-  "version": "1.9.0-beta.5",
+  "version": "1.9.0",
   "description": "React components for Nebula Design System",
   "publishConfig": {
     "access": "public"
@@ -19,7 +19,6 @@
     "build": "tsup src/index.tsx --format esm,cjs --dts",
     "dev": "tsup src/index.tsx --format esm,cjs --dts --watch",
     "lint": "eslint ./src --ext .ts,.tsx,.js,.jsx",
-    "lint:staged": "npx lint-staged",
     "lint:fix": "eslint ./src --ext .ts,.tsx,.js,.jsx --fix"
   },
   "keywords": [],