@mlw-packages/react-components 1.3.6 → 1.3.10

package/dist/index.css

@@ -489,6 +489,9 @@ body {
 .z-50 {
   z-index: 50;
 }
+.z-\[9999\] {
+  z-index: 9999;
+}
 .col-span-1 {
   grid-column: span 1 / span 1;
 }
@@ -498,6 +501,9 @@ body {
 .col-span-3 {
   grid-column: span 3 / span 3;
 }
+.m-0 {
+  margin: 0px;
+}
 .-mx-1 {
   margin-left: -0.25rem;
   margin-right: -0.25rem;
@@ -723,9 +729,6 @@ body {
 .h-\[120px\] {
   height: 120px;
 }
-.h-\[16px\] {
-  height: 16px;
-}
 .h-\[1px\] {
   height: 1px;
 }
@@ -1015,6 +1018,14 @@ body {
 .animate-pulse {
   animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 }
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+.animate-spin {
+  animation: spin 1s linear infinite;
+}
 .cursor-default {
   cursor: default;
 }
@@ -1292,6 +1303,9 @@ body {
 .border-l {
   border-left-width: 1px;
 }
+.border-l-8 {
+  border-left-width: 8px;
+}
 .border-r {
   border-right-width: 1px;
 }
@@ -1659,6 +1673,10 @@ body {
 .tracking-widest {
   letter-spacing: 0.1em;
 }
+.text-blue-600 {
+  --tw-text-opacity: 1;
+  color: rgb(37 99 235 / var(--tw-text-opacity, 1));
+}
 .text-card-foreground {
   color: hsl(var(--card-foreground));
 }
@@ -1686,6 +1704,14 @@ body {
   --tw-text-opacity: 1;
   color: rgb(55 65 81 / var(--tw-text-opacity, 1));
 }
+.text-gray-900 {
+  --tw-text-opacity: 1;
+  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
+}
+.text-green-600 {
+  --tw-text-opacity: 1;
+  color: rgb(22 163 74 / var(--tw-text-opacity, 1));
+}
 .text-muted-foreground {
   color: hsl(var(--muted-foreground));
 }
@@ -1710,6 +1736,10 @@ body {
   --tw-text-opacity: 1;
   color: rgb(239 68 68 / var(--tw-text-opacity, 1));
 }
+.text-red-600 {
+  --tw-text-opacity: 1;
+  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
+}
 .text-secondary-foreground {
   color: hsl(var(--secondary-foreground));
 }
@@ -1729,6 +1759,10 @@ body {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity, 1));
 }
+.text-yellow-600 {
+  --tw-text-opacity: 1;
+  color: rgb(202 138 4 / var(--tw-text-opacity, 1));
+}
 .text-zinc-100 {
   --tw-text-opacity: 1;
   color: rgb(244 244 245 / var(--tw-text-opacity, 1));
@@ -2278,6 +2312,11 @@ body {
   --tw-scale-y: 1.05;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+.hover\:scale-110:hover {
+  --tw-scale-x: 1.1;
+  --tw-scale-y: 1.1;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .hover\:scale-125:hover {
   --tw-scale-x: 1.25;
   --tw-scale-y: 1.25;
@@ -2297,9 +2336,15 @@ body {
 .hover\:bg-muted\/50:hover {
   background-color: hsl(var(--muted) / 0.5);
 }
+.hover\:bg-muted\/80:hover {
+  background-color: hsl(var(--muted) / 0.8);
+}
 .hover\:bg-primary:hover {
   background-color: hsl(var(--primary));
 }
+.hover\:bg-primary\/80:hover {
+  background-color: hsl(var(--primary) / 0.8);
+}
 .hover\:bg-slate-900:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
@@ -2315,6 +2360,10 @@ body {
 .hover\:text-accent-foreground:hover {
   color: hsl(var(--accent-foreground));
 }
+.hover\:text-red-500:hover {
+  --tw-text-opacity: 1;
+  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
+}
 .hover\:text-slate-50:hover {
   --tw-text-opacity: 1;
   color: rgb(248 250 252 / var(--tw-text-opacity, 1));
@@ -2462,35 +2511,9 @@ body {
 .group\/menu-item:hover .group-hover\/menu-item\:opacity-100 {
   opacity: 1;
 }
-.group.toaster .group-\[\.toaster\]\:border-border {
-  border-color: hsl(var(--border));
-}
-.group.toast .group-\[\.toast\]\:bg-muted {
-  background-color: hsl(var(--muted));
-}
-.group.toast .group-\[\.toast\]\:bg-primary {
-  background-color: hsl(var(--primary));
-}
-.group.toaster .group-\[\.toaster\]\:bg-background {
-  background-color: hsl(var(--background));
-}
 .group.toast .group-\[\.toast\]\:text-muted-foreground {
   color: hsl(var(--muted-foreground));
 }
-.group.toast .group-\[\.toast\]\:text-primary-foreground {
-  color: hsl(var(--primary-foreground));
-}
-.group.toaster .group-\[\.toaster\]\:text-foreground {
-  color: hsl(var(--foreground));
-}
-.group.toaster .group-\[\.toaster\]\:shadow-lg {
-  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
-  box-shadow:
-    var(--tw-ring-offset-shadow, 0 0 #0000),
-    var(--tw-ring-shadow, 0 0 #0000),
-    var(--tw-shadow);
-}
 .peer:focus ~ .peer-focus\:shadow-lg {
   --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
@@ -2632,6 +2655,22 @@ body {
 .data-\[active\=true\]\:border-ring[data-active=true] {
   border-color: hsl(var(--ring));
 }
+.data-\[type\=error\]\:border-l-red-500[data-type=error] {
+  --tw-border-opacity: 1;
+  border-left-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
+}
+.data-\[type\=info\]\:border-l-blue-500[data-type=info] {
+  --tw-border-opacity: 1;
+  border-left-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
+}
+.data-\[type\=success\]\:border-l-green-500[data-type=success] {
+  --tw-border-opacity: 1;
+  border-left-color: rgb(34 197 94 / var(--tw-border-opacity, 1));
+}
+.data-\[type\=warning\]\:border-l-yellow-500[data-type=warning] {
+  --tw-border-opacity: 1;
+  border-left-color: rgb(234 179 8 / var(--tw-border-opacity, 1));
+}
 .data-\[selected\=true\]\:bg-primary[data-selected=true] {
   background-color: hsl(var(--primary));
 }
@@ -2654,6 +2693,22 @@ body {
 .data-\[state\=unchecked\]\:bg-input[data-state=unchecked] {
   background-color: hsl(var(--input));
 }
+.data-\[type\=error\]\:bg-red-50[data-type=error] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
+}
+.data-\[type\=info\]\:bg-blue-50[data-type=info] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
+}
+.data-\[type\=success\]\:bg-green-50[data-type=success] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(240 253 244 / var(--tw-bg-opacity, 1));
+}
+.data-\[type\=warning\]\:bg-yellow-50[data-type=warning] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 252 232 / var(--tw-bg-opacity, 1));
+}
 .data-\[active\=true\]\:font-medium[data-active=true] {
   font-weight: 500;
 }
@@ -2917,6 +2972,10 @@ body {
   --tw-bg-opacity: 1;
   background-color: hsl(231 15% 19% / var(--tw-bg-opacity, 1));
 }
+.dark\:bg-gray-900:is(.dark *) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
+}
 .dark\:bg-input\/30:is(.dark *) {
   background-color: hsl(var(--input) / 0.3);
 }
@@ -2947,14 +3006,30 @@ body {
   --tw-text-opacity: 1;
   color: rgb(0 0 0 / var(--tw-text-opacity, 1));
 }
+.dark\:text-blue-400:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(96 165 250 / var(--tw-text-opacity, 1));
+}
+.dark\:text-gray-100:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(243 244 246 / var(--tw-text-opacity, 1));
+}
 .dark\:text-gray-300:is(.dark *) {
   --tw-text-opacity: 1;
   color: rgb(209 213 219 / var(--tw-text-opacity, 1));
 }
+.dark\:text-green-400:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(74 222 128 / var(--tw-text-opacity, 1));
+}
 .dark\:text-neutral-300:is(.dark *) {
   --tw-text-opacity: 1;
   color: rgb(212 212 212 / var(--tw-text-opacity, 1));
 }
+.dark\:text-red-400:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(248 113 113 / var(--tw-text-opacity, 1));
+}
 .dark\:text-slate-400:is(.dark *) {
   --tw-text-opacity: 1;
   color: rgb(148 163 184 / var(--tw-text-opacity, 1));
@@ -2971,6 +3046,14 @@ body {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity, 1));
 }
+.dark\:text-yellow-400:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(250 204 21 / var(--tw-text-opacity, 1));
+}
+.dark\:text-zinc-400:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(161 161 170 / var(--tw-text-opacity, 1));
+}
 .dark\:hover\:bg-slate-50:hover:is(.dark *) {
   --tw-bg-opacity: 1;
   background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
@@ -2987,6 +3070,9 @@ body {
   --tw-text-opacity: 1;
   color: rgb(15 23 42 / var(--tw-text-opacity, 1));
 }
+.group.toast .dark\:group-\[\.toast\]\:text-muted-foreground\/80:is(.dark *) {
+  color: hsl(var(--muted-foreground) / 0.8);
+}
 .dark\:aria-selected\:bg-primary[aria-selected=true]:is(.dark *) {
   background-color: hsl(var(--primary));
 }
@@ -3008,6 +3094,34 @@ body {
   --tw-text-opacity: 1;
   color: rgb(248 250 252 / var(--tw-text-opacity, 1));
 }
+.dark\:data-\[type\=error\]\:bg-red-900\/30[data-type=error]:is(.dark *) {
+  background-color: rgb(127 29 29 / 0.3);
+}
+.dark\:data-\[type\=info\]\:bg-blue-900\/30[data-type=info]:is(.dark *) {
+  background-color: rgb(30 58 138 / 0.3);
+}
+.dark\:data-\[type\=success\]\:bg-green-900\/30[data-type=success]:is(.dark *) {
+  background-color: rgb(20 83 45 / 0.3);
+}
+.dark\:data-\[type\=warning\]\:bg-yellow-900\/30[data-type=warning]:is(.dark *) {
+  background-color: rgb(113 63 18 / 0.3);
+}
+.dark\:data-\[type\=error\]\:text-red-400[data-type=error]:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(248 113 113 / var(--tw-text-opacity, 1));
+}
+.dark\:data-\[type\=info\]\:text-blue-400[data-type=info]:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(96 165 250 / var(--tw-text-opacity, 1));
+}
+.dark\:data-\[type\=success\]\:text-green-400[data-type=success]:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(74 222 128 / var(--tw-text-opacity, 1));
+}
+.dark\:data-\[type\=warning\]\:text-yellow-400[data-type=warning]:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(250 204 21 / var(--tw-text-opacity, 1));
+}
 @media (min-width: 640px) {
   .sm\:mt-0 {
     margin-top: 0px;

package/dist/index.d.mts

@@ -375,6 +375,13 @@ declare const SlideBase: React$1.ForwardRefExoticComponent<SliderBaseProps & Rea
 
 type ToasterProps = React.ComponentProps<typeof Toaster$1>;
 declare const Toaster: ({ ...props }: ToasterProps) => react_jsx_runtime.JSX.Element;
+declare const toast: {
+    success: (message: string) => string | number;
+    error: (message: string) => string | number;
+    warning: (message: string) => string | number;
+    info: (message: string) => string | number;
+    loading: (message: string) => string | number;
+};
 
 declare const SwitchBase: React$1.ForwardRefExoticComponent<Omit<SwitchPrimitives.SwitchProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
 
@@ -456,15 +463,17 @@ interface ComboboxProps<T extends string> {
     placeholder?: string;
     searchPlaceholder?: string;
     label?: string;
+    labelClassname?: string;
 }
-declare function Combobox<T extends string>({ items, selected, onChange, placeholder, searchPlaceholder, label, }: ComboboxProps<T>): react_jsx_runtime.JSX.Element;
+declare function Combobox<T extends string>({ items, selected, onChange, placeholder, searchPlaceholder, label, labelClassname }: ComboboxProps<T>): react_jsx_runtime.JSX.Element;
 
 interface MultiComboboxProps<T extends string> extends Omit<ComboboxProps<T>, "selected" | "onChange"> {
     label?: string;
     selected: T[];
     onChange: (value: T[]) => void;
+    labelClassname?: string;
 }
-declare function MultiCombobox<T extends string>({ items, selected, onChange, placeholder, searchPlaceholder, label, }: MultiComboboxProps<T>): react_jsx_runtime.JSX.Element;
+declare function MultiCombobox<T extends string>({ items, selected, onChange, placeholder, searchPlaceholder, label, labelClassname }: MultiComboboxProps<T>): react_jsx_runtime.JSX.Element;
 
 interface SelectItem$1<T extends string> {
     label: string;
@@ -542,4 +551,4 @@ declare const defaultStringConditions: AvailableFilterConditions[];
 
 declare function buildFilterSummary<T extends Record<string, unknown>>(filter: Filter<T>, availableFilters: AvailableFilter<T>[]): string | null;
 
-export { AlertDialogActionBase, AlertDialogBase, AlertDialogCancelBase, AlertDialogContentBase, AlertDialogDescriptionBase, AlertDialogFooterBase, AlertDialogHeaderBase, AlertDialogOverlayBase, AlertDialogPortalBase, AlertDialogTitleBase, AlertDialogTriggerBase, AvatarBase, AvatarFallbackBase, AvatarImageBase, ButtonBase, ButtonGroupBase, type ButtonProps, CalendarBase, type CalendarProps, CardBase, CardContentBase, CardDescriptionBase, CardFooterBase, CardHeaderBase, CardTitleBase, CheckboxBase, Combobox, type ComboboxProps, CommandBase, CommandDialogBase, CommandEmptyBase, CommandGroupBase, CommandInputBase, CommandItemBase, CommandListBase, CommandSeparatorBase, CommandShortcutBase, DateTimePicker, DialogBase, DialogCloseBase, DialogContentBase, DialogDescriptionBase, DialogFooterBase, DialogHeaderBase, DialogOverlayBase, DialogPortalBase, DialogTitleBase, DialogTriggerBase, DropDownMenuBase, DropDownMenuCheckboxItemBase, DropDownMenuContentBase, DropDownMenuGroupBase, DropDownMenuItemBase, DropDownMenuLabelBase, DropDownMenuPortalBase, DropDownMenuRadioGroupBase, DropDownMenuRadioItemBase, DropDownMenuSeparatorBase, DropDownMenuShortcutBase, DropDownMenuSubBase, DropDownMenuSubContentBase, DropDownMenuSubTriggerBase, DropDownMenuTriggerBase, FormBase, FormControlBase, FormDescriptionBase, FormFieldBase, FormItemBase, FormLabelBase, FormMessageBase, InputBase, type InputBaseProps, LabelBase, type LabelBaseProps, ModeToggleBase, MultiCombobox, PopoverAnchorBase, PopoverBase, PopoverContentBase, PopoverTriggerBase, ProgressBase, type ProgressBaseProps, ProgressCirclesBase, type ProgressCirclesBaseProps, ProgressPanelsBase, type ProgressPanelsBaseProps, ProgressSegmentsBase, type ProgressSegmentsBaseProps, ScrollAreaBase, ScrollBarBase, Select, SelectBase, SelectContentBase, SelectGroupBase, type SelectItem$1 as SelectItem, SelectItemBase, SelectLabelBase, SelectScrollDownButtonBase, SelectScrollUpButtonBase, SelectSeparatorBase, SelectTriggerBase, SelectValueBase, SeparatorBase, SheetBase, SheetCloseBase, SheetContentBase, SheetDescriptionBase, SheetFooterBase, SheetHeaderBase, SheetOverlayBase, SheetPortalBase, SheetTitleBase, SheetTriggerBase, SidebarBase, SidebarContentBase, SidebarFooterBase, SidebarGroupActionBase, SidebarGroupBase, SidebarGroupContentBase, SidebarGroupLabelBase, SidebarHeaderBase, SidebarInputBase, SidebarInsetBase, SidebarMenuActionBase, SidebarMenuBadgeBase, SidebarMenuBase, SidebarMenuButtonBase, SidebarMenuItemBase, SidebarMenuSkeletonBase, SidebarMenuSubBase, SidebarMenuSubButtonBase, SidebarMenuSubItemBase, SidebarProviderBase, SidebarRailBase, SidebarSeparatorBase, SidebarTriggerBase, SkeletonBase, SlideBase, type SliderBaseProps, SwitchBase, TableBase, TableBodyBase, TableCaptionBase, TableCellBase, TableFooterBase, TableHeadBase, TableHeaderBase, TableRowBase, TabsBase, TabsContentBase, TabsListBase, TabsTriggerBase, TextAreaBase, type Theme, ThemeProviderBase, TimePicker, TimePickerInput, type TimePickerInputProps, Toaster, TooltipBase, TooltipContentBase, TooltipProviderBase, TooltipTriggerBase, UseSideBarBase, applyfilter, buildFilterSummary, buttonVariantsBase, defaultStringConditions, useFormFieldBase, useIsMobile, useTheme };
+export { AlertDialogActionBase, AlertDialogBase, AlertDialogCancelBase, AlertDialogContentBase, AlertDialogDescriptionBase, AlertDialogFooterBase, AlertDialogHeaderBase, AlertDialogOverlayBase, AlertDialogPortalBase, AlertDialogTitleBase, AlertDialogTriggerBase, AvatarBase, AvatarFallbackBase, AvatarImageBase, ButtonBase, ButtonGroupBase, type ButtonProps, CalendarBase, type CalendarProps, CardBase, CardContentBase, CardDescriptionBase, CardFooterBase, CardHeaderBase, CardTitleBase, CheckboxBase, Combobox, type ComboboxProps, CommandBase, CommandDialogBase, CommandEmptyBase, CommandGroupBase, CommandInputBase, CommandItemBase, CommandListBase, CommandSeparatorBase, CommandShortcutBase, DateTimePicker, DialogBase, DialogCloseBase, DialogContentBase, DialogDescriptionBase, DialogFooterBase, DialogHeaderBase, DialogOverlayBase, DialogPortalBase, DialogTitleBase, DialogTriggerBase, DropDownMenuBase, DropDownMenuCheckboxItemBase, DropDownMenuContentBase, DropDownMenuGroupBase, DropDownMenuItemBase, DropDownMenuLabelBase, DropDownMenuPortalBase, DropDownMenuRadioGroupBase, DropDownMenuRadioItemBase, DropDownMenuSeparatorBase, DropDownMenuShortcutBase, DropDownMenuSubBase, DropDownMenuSubContentBase, DropDownMenuSubTriggerBase, DropDownMenuTriggerBase, FormBase, FormControlBase, FormDescriptionBase, FormFieldBase, FormItemBase, FormLabelBase, FormMessageBase, InputBase, type InputBaseProps, LabelBase, type LabelBaseProps, ModeToggleBase, MultiCombobox, PopoverAnchorBase, PopoverBase, PopoverContentBase, PopoverTriggerBase, ProgressBase, type ProgressBaseProps, ProgressCirclesBase, type ProgressCirclesBaseProps, ProgressPanelsBase, type ProgressPanelsBaseProps, ProgressSegmentsBase, type ProgressSegmentsBaseProps, ScrollAreaBase, ScrollBarBase, Select, SelectBase, SelectContentBase, SelectGroupBase, type SelectItem$1 as SelectItem, SelectItemBase, SelectLabelBase, SelectScrollDownButtonBase, SelectScrollUpButtonBase, SelectSeparatorBase, SelectTriggerBase, SelectValueBase, SeparatorBase, SheetBase, SheetCloseBase, SheetContentBase, SheetDescriptionBase, SheetFooterBase, SheetHeaderBase, SheetOverlayBase, SheetPortalBase, SheetTitleBase, SheetTriggerBase, SidebarBase, SidebarContentBase, SidebarFooterBase, SidebarGroupActionBase, SidebarGroupBase, SidebarGroupContentBase, SidebarGroupLabelBase, SidebarHeaderBase, SidebarInputBase, SidebarInsetBase, SidebarMenuActionBase, SidebarMenuBadgeBase, SidebarMenuBase, SidebarMenuButtonBase, SidebarMenuItemBase, SidebarMenuSkeletonBase, SidebarMenuSubBase, SidebarMenuSubButtonBase, SidebarMenuSubItemBase, SidebarProviderBase, SidebarRailBase, SidebarSeparatorBase, SidebarTriggerBase, SkeletonBase, SlideBase, type SliderBaseProps, SwitchBase, TableBase, TableBodyBase, TableCaptionBase, TableCellBase, TableFooterBase, TableHeadBase, TableHeaderBase, TableRowBase, TabsBase, TabsContentBase, TabsListBase, TabsTriggerBase, TextAreaBase, type Theme, ThemeProviderBase, TimePicker, TimePickerInput, type TimePickerInputProps, Toaster, TooltipBase, TooltipContentBase, TooltipProviderBase, TooltipTriggerBase, UseSideBarBase, applyfilter, buildFilterSummary, buttonVariantsBase, defaultStringConditions, toast, useFormFieldBase, useIsMobile, useTheme };

package/dist/index.d.ts

@@ -375,6 +375,13 @@ declare const SlideBase: React$1.ForwardRefExoticComponent<SliderBaseProps & Rea
 
 type ToasterProps = React.ComponentProps<typeof Toaster$1>;
 declare const Toaster: ({ ...props }: ToasterProps) => react_jsx_runtime.JSX.Element;
+declare const toast: {
+    success: (message: string) => string | number;
+    error: (message: string) => string | number;
+    warning: (message: string) => string | number;
+    info: (message: string) => string | number;
+    loading: (message: string) => string | number;
+};
 
 declare const SwitchBase: React$1.ForwardRefExoticComponent<Omit<SwitchPrimitives.SwitchProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
 
@@ -456,15 +463,17 @@ interface ComboboxProps<T extends string> {
     placeholder?: string;
     searchPlaceholder?: string;
     label?: string;
+    labelClassname?: string;
 }
-declare function Combobox<T extends string>({ items, selected, onChange, placeholder, searchPlaceholder, label, }: ComboboxProps<T>): react_jsx_runtime.JSX.Element;
+declare function Combobox<T extends string>({ items, selected, onChange, placeholder, searchPlaceholder, label, labelClassname }: ComboboxProps<T>): react_jsx_runtime.JSX.Element;
 
 interface MultiComboboxProps<T extends string> extends Omit<ComboboxProps<T>, "selected" | "onChange"> {
     label?: string;
     selected: T[];
     onChange: (value: T[]) => void;
+    labelClassname?: string;
 }
-declare function MultiCombobox<T extends string>({ items, selected, onChange, placeholder, searchPlaceholder, label, }: MultiComboboxProps<T>): react_jsx_runtime.JSX.Element;
+declare function MultiCombobox<T extends string>({ items, selected, onChange, placeholder, searchPlaceholder, label, labelClassname }: MultiComboboxProps<T>): react_jsx_runtime.JSX.Element;
 
 interface SelectItem$1<T extends string> {
     label: string;
@@ -542,4 +551,4 @@ declare const defaultStringConditions: AvailableFilterConditions[];
 
 declare function buildFilterSummary<T extends Record<string, unknown>>(filter: Filter<T>, availableFilters: AvailableFilter<T>[]): string | null;
 
-export { AlertDialogActionBase, AlertDialogBase, AlertDialogCancelBase, AlertDialogContentBase, AlertDialogDescriptionBase, AlertDialogFooterBase, AlertDialogHeaderBase, AlertDialogOverlayBase, AlertDialogPortalBase, AlertDialogTitleBase, AlertDialogTriggerBase, AvatarBase, AvatarFallbackBase, AvatarImageBase, ButtonBase, ButtonGroupBase, type ButtonProps, CalendarBase, type CalendarProps, CardBase, CardContentBase, CardDescriptionBase, CardFooterBase, CardHeaderBase, CardTitleBase, CheckboxBase, Combobox, type ComboboxProps, CommandBase, CommandDialogBase, CommandEmptyBase, CommandGroupBase, CommandInputBase, CommandItemBase, CommandListBase, CommandSeparatorBase, CommandShortcutBase, DateTimePicker, DialogBase, DialogCloseBase, DialogContentBase, DialogDescriptionBase, DialogFooterBase, DialogHeaderBase, DialogOverlayBase, DialogPortalBase, DialogTitleBase, DialogTriggerBase, DropDownMenuBase, DropDownMenuCheckboxItemBase, DropDownMenuContentBase, DropDownMenuGroupBase, DropDownMenuItemBase, DropDownMenuLabelBase, DropDownMenuPortalBase, DropDownMenuRadioGroupBase, DropDownMenuRadioItemBase, DropDownMenuSeparatorBase, DropDownMenuShortcutBase, DropDownMenuSubBase, DropDownMenuSubContentBase, DropDownMenuSubTriggerBase, DropDownMenuTriggerBase, FormBase, FormControlBase, FormDescriptionBase, FormFieldBase, FormItemBase, FormLabelBase, FormMessageBase, InputBase, type InputBaseProps, LabelBase, type LabelBaseProps, ModeToggleBase, MultiCombobox, PopoverAnchorBase, PopoverBase, PopoverContentBase, PopoverTriggerBase, ProgressBase, type ProgressBaseProps, ProgressCirclesBase, type ProgressCirclesBaseProps, ProgressPanelsBase, type ProgressPanelsBaseProps, ProgressSegmentsBase, type ProgressSegmentsBaseProps, ScrollAreaBase, ScrollBarBase, Select, SelectBase, SelectContentBase, SelectGroupBase, type SelectItem$1 as SelectItem, SelectItemBase, SelectLabelBase, SelectScrollDownButtonBase, SelectScrollUpButtonBase, SelectSeparatorBase, SelectTriggerBase, SelectValueBase, SeparatorBase, SheetBase, SheetCloseBase, SheetContentBase, SheetDescriptionBase, SheetFooterBase, SheetHeaderBase, SheetOverlayBase, SheetPortalBase, SheetTitleBase, SheetTriggerBase, SidebarBase, SidebarContentBase, SidebarFooterBase, SidebarGroupActionBase, SidebarGroupBase, SidebarGroupContentBase, SidebarGroupLabelBase, SidebarHeaderBase, SidebarInputBase, SidebarInsetBase, SidebarMenuActionBase, SidebarMenuBadgeBase, SidebarMenuBase, SidebarMenuButtonBase, SidebarMenuItemBase, SidebarMenuSkeletonBase, SidebarMenuSubBase, SidebarMenuSubButtonBase, SidebarMenuSubItemBase, SidebarProviderBase, SidebarRailBase, SidebarSeparatorBase, SidebarTriggerBase, SkeletonBase, SlideBase, type SliderBaseProps, SwitchBase, TableBase, TableBodyBase, TableCaptionBase, TableCellBase, TableFooterBase, TableHeadBase, TableHeaderBase, TableRowBase, TabsBase, TabsContentBase, TabsListBase, TabsTriggerBase, TextAreaBase, type Theme, ThemeProviderBase, TimePicker, TimePickerInput, type TimePickerInputProps, Toaster, TooltipBase, TooltipContentBase, TooltipProviderBase, TooltipTriggerBase, UseSideBarBase, applyfilter, buildFilterSummary, buttonVariantsBase, defaultStringConditions, useFormFieldBase, useIsMobile, useTheme };
+export { AlertDialogActionBase, AlertDialogBase, AlertDialogCancelBase, AlertDialogContentBase, AlertDialogDescriptionBase, AlertDialogFooterBase, AlertDialogHeaderBase, AlertDialogOverlayBase, AlertDialogPortalBase, AlertDialogTitleBase, AlertDialogTriggerBase, AvatarBase, AvatarFallbackBase, AvatarImageBase, ButtonBase, ButtonGroupBase, type ButtonProps, CalendarBase, type CalendarProps, CardBase, CardContentBase, CardDescriptionBase, CardFooterBase, CardHeaderBase, CardTitleBase, CheckboxBase, Combobox, type ComboboxProps, CommandBase, CommandDialogBase, CommandEmptyBase, CommandGroupBase, CommandInputBase, CommandItemBase, CommandListBase, CommandSeparatorBase, CommandShortcutBase, DateTimePicker, DialogBase, DialogCloseBase, DialogContentBase, DialogDescriptionBase, DialogFooterBase, DialogHeaderBase, DialogOverlayBase, DialogPortalBase, DialogTitleBase, DialogTriggerBase, DropDownMenuBase, DropDownMenuCheckboxItemBase, DropDownMenuContentBase, DropDownMenuGroupBase, DropDownMenuItemBase, DropDownMenuLabelBase, DropDownMenuPortalBase, DropDownMenuRadioGroupBase, DropDownMenuRadioItemBase, DropDownMenuSeparatorBase, DropDownMenuShortcutBase, DropDownMenuSubBase, DropDownMenuSubContentBase, DropDownMenuSubTriggerBase, DropDownMenuTriggerBase, FormBase, FormControlBase, FormDescriptionBase, FormFieldBase, FormItemBase, FormLabelBase, FormMessageBase, InputBase, type InputBaseProps, LabelBase, type LabelBaseProps, ModeToggleBase, MultiCombobox, PopoverAnchorBase, PopoverBase, PopoverContentBase, PopoverTriggerBase, ProgressBase, type ProgressBaseProps, ProgressCirclesBase, type ProgressCirclesBaseProps, ProgressPanelsBase, type ProgressPanelsBaseProps, ProgressSegmentsBase, type ProgressSegmentsBaseProps, ScrollAreaBase, ScrollBarBase, Select, SelectBase, SelectContentBase, SelectGroupBase, type SelectItem$1 as SelectItem, SelectItemBase, SelectLabelBase, SelectScrollDownButtonBase, SelectScrollUpButtonBase, SelectSeparatorBase, SelectTriggerBase, SelectValueBase, SeparatorBase, SheetBase, SheetCloseBase, SheetContentBase, SheetDescriptionBase, SheetFooterBase, SheetHeaderBase, SheetOverlayBase, SheetPortalBase, SheetTitleBase, SheetTriggerBase, SidebarBase, SidebarContentBase, SidebarFooterBase, SidebarGroupActionBase, SidebarGroupBase, SidebarGroupContentBase, SidebarGroupLabelBase, SidebarHeaderBase, SidebarInputBase, SidebarInsetBase, SidebarMenuActionBase, SidebarMenuBadgeBase, SidebarMenuBase, SidebarMenuButtonBase, SidebarMenuItemBase, SidebarMenuSkeletonBase, SidebarMenuSubBase, SidebarMenuSubButtonBase, SidebarMenuSubItemBase, SidebarProviderBase, SidebarRailBase, SidebarSeparatorBase, SidebarTriggerBase, SkeletonBase, SlideBase, type SliderBaseProps, SwitchBase, TableBase, TableBodyBase, TableCaptionBase, TableCellBase, TableFooterBase, TableHeadBase, TableHeaderBase, TableRowBase, TabsBase, TabsContentBase, TabsListBase, TabsTriggerBase, TextAreaBase, type Theme, ThemeProviderBase, TimePicker, TimePickerInput, type TimePickerInputProps, Toaster, TooltipBase, TooltipContentBase, TooltipProviderBase, TooltipTriggerBase, UseSideBarBase, applyfilter, buildFilterSummary, buttonVariantsBase, defaultStringConditions, toast, useFormFieldBase, useIsMobile, useTheme };

package/dist/index.js

@@ -186,6 +186,7 @@ __export(index_exports, {
   buildFilterSummary: () => buildFilterSummary,
   buttonVariantsBase: () => buttonVariantsBase,
   defaultStringConditions: () => defaultStringConditions,
+  toast: () => toast,
   useFormFieldBase: () => useFormFieldBase,
   useIsMobile: () => useIsMobile,
   useTheme: () => useTheme
@@ -264,7 +265,7 @@ var ButtonGroupBase = React.forwardRef(
         className: cn(
           "inline-flex",
           orientation === "vertical" ? "flex-col" : "flex-row",
-          "rounded-md overflow-hidden shadow-sm isolate",
+          "rounded-md overflow-hidden isolate",
           className
         ),
         ...props,
@@ -631,8 +632,7 @@ var InputBase = React6.forwardRef(
         {
           className: cn(
             "flex items-center rounded-md transition focus-within:ring-1 focus-within:ring-ring focus-within:border-ring bg-white dark:bg-[hsl(231,15%,19%)] overflow-hidden",
-            type !== "number" && type !== "file" && "border border-input",
-            (type === "file" || type === "number") && "border-none"
+            type !== "number" && type !== "file" && "border border-input"
           ),
           children: [
             leftIcon && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex items-center justify-center px-2", children: leftIcon }),
@@ -1047,6 +1047,7 @@ var import_phosphor_react6 = require("phosphor-react");
 var React10 = __toESM(require("react"));
 var DropdownMenuPrimitive = __toESM(require("@radix-ui/react-dropdown-menu"));
 var import_phosphor_react5 = require("phosphor-react");
+var import_framer_motion = require("framer-motion");
 var import_jsx_runtime11 = require("react/jsx-runtime");
 var DropDownMenuBase = DropdownMenuPrimitive.Root;
 var DropDownMenuTriggerBase = DropdownMenuPrimitive.Trigger;
@@ -1076,24 +1077,34 @@ var DropDownMenuSubContentBase = React10.forwardRef(({ className, ...props }, re
   {
     ref,
     className: cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      " min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       className
     ),
     ...props
   }
 ));
-DropDownMenuSubContentBase.displayName = DropdownMenuPrimitive.SubContent.displayName;
 var DropDownMenuContentBase = React10.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
   DropdownMenuPrimitive.Content,
   {
     sideOffset,
-    className: cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
-      className
-    ),
+    forceMount: true,
     ref,
+    className: cn("z-[9999] p-0", className),
     ...props,
-    children: props.children
+    children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_framer_motion.AnimatePresence, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      import_framer_motion.motion.div,
+      {
+        initial: { opacity: 0, scale: 0.95, y: 5 },
+        animate: { opacity: 1, scale: 1, y: 0 },
+        exit: { opacity: 0, scale: 0.95, y: 5 },
+        transition: { duration: 0.2, ease: "easeOut" },
+        className: cn(
+          "min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
+          className
+        ),
+        children: props.children
+      }
+    ) })
   }
 ) }));
 DropDownMenuContentBase.displayName = DropdownMenuPrimitive.Content.displayName;
@@ -1292,7 +1303,7 @@ var import_react5 = require("react");
 var React11 = __toESM(require("react"));
 var import_cmdk = require("cmdk");
 var import_phosphor_react7 = require("phosphor-react");
-var import_framer_motion = require("framer-motion");
+var import_framer_motion2 = require("framer-motion");
 var import_jsx_runtime14 = require("react/jsx-runtime");
 var CommandBase = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
   import_cmdk.Command,
@@ -1312,8 +1323,8 @@ var dialogVariants = {
   exit: { opacity: 0, scale: 0.95, y: -20 }
 };
 var CommandDialogBase = ({ children, open, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DialogBase, { open, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_framer_motion.AnimatePresence, { children: open && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DialogContentBase, { asChild: true, forceMount: true, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-    import_framer_motion.motion.div,
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DialogBase, { open, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_framer_motion2.AnimatePresence, { children: open && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DialogContentBase, { asChild: true, forceMount: true, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    import_framer_motion2.motion.div,
     {
       initial: "hidden",
       animate: "visible",
@@ -1418,20 +1429,30 @@ function ComboboxBase({
   errorMessage
 }) {
   const [open, setOpen] = (0, import_react4.useState)(false);
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "col-span-1 w-full ", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(PopoverBase, { open, onOpenChange: setOpen, modal: true, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(PopoverTriggerBase, { asChild: true, className: "flex w-full justify-between dark:bg-[hsl(231,15%,19%)]", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
-      ButtonBase,
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "col-span-1 w-full", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(PopoverBase, { open, onOpenChange: setOpen, modal: true, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      PopoverTriggerBase,
       {
-        variant: "outline",
-        role: "combobox",
-        "aria-expanded": open,
-        children: [
-          renderSelected,
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_phosphor_react8.CaretDown, { size: 16 }) }),
-          errorMessage && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-red-500", children: errorMessage })
-        ]
+        asChild: true,
+        className: "flex w-full justify-between dark:bg-[hsl(231,15%,19%)]",
+        children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+          ButtonBase,
+          {
+            variant: "outline",
+            role: "combobox",
+            "aria-expanded": open,
+            className: cn(
+              "flex-wrap items-start gap-2 justify-between h-full",
+              errorMessage && "border-red-500"
+            ),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "flex flex-wrap gap-2 flex-1", children: renderSelected }),
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_phosphor_react8.CaretDown, { size: 16, className: "mt-1" })
+            ]
+          }
+        )
       }
-    ) }),
+    ),
     /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(PopoverContentBase, { className: "max-h-[--radix-popover-content-available-height] w-[--radix-popover-trigger-width] p-0 border-none", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(CommandBase, { className: "dark:text-white", children: [
       /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         CommandInputBase,
@@ -1479,7 +1500,8 @@ function Combobox({
   onChange,
   placeholder,
   searchPlaceholder,
-  label
+  label,
+  labelClassname
 }) {
   const selectedItem = items.find((item) => item.value === selected);
   const renderSelected = (0, import_react5.useMemo)(
@@ -1497,7 +1519,7 @@ function Combobox({
     [selected, onChange]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex flex-col gap-1 w-full min-w-[150px]", children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(LabelBase_default, { children: label }),
+    label && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(LabelBase_default, { className: labelClassname, children: label }),
     /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
       ComboboxBase,
       {
@@ -1521,7 +1543,8 @@ function MultiCombobox({
   onChange,
   placeholder,
   searchPlaceholder,
-  label
+  label,
+  labelClassname
 }) {
   const selectedItems = items.filter((item) => selected.includes(item.value));
   const checkIsSelected = (0, import_react6.useCallback)(
@@ -1549,14 +1572,22 @@ function MultiCombobox({
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "truncate whitespace-break-spaces text-xs", children: item.label }),
           /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-            import_phosphor_react9.X,
+            "span",
             {
-              size: 14,
+              role: "button",
+              tabIndex: 0,
               onClick: (e) => {
                 e.stopPropagation();
                 handleSelection(item.value);
               },
-              className: "cursor-pointer"
+              onKeyDown: (e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  handleSelection(item.value);
+                }
+              },
+              className: "cursor-pointer p-0 m-0 text-xs flex items-center justify-center hover:text-red-500 hover:scale-110 transition-all",
+              children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_phosphor_react9.X, { size: 14 })
             }
           )
         ]
@@ -1566,7 +1597,7 @@ function MultiCombobox({
     return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "flex flex-wrap gap-2", children: items2 });
   }, [handleSelection, placeholder, selectedItems]);
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex flex-col gap-1 w-full min-w-[150px]", children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(LabelBase_default, { children: label }),
+    label && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(LabelBase_default, { className: labelClassname, children: label }),
     /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       ComboboxBase,
       {
@@ -1584,7 +1615,7 @@ function MultiCombobox({
 var React13 = __toESM(require("react"));
 var SelectPrimitive = __toESM(require("@radix-ui/react-select"));
 var import_phosphor_react10 = require("phosphor-react");
-var import_framer_motion2 = require("framer-motion");
+var import_framer_motion3 = require("framer-motion");
 var import_jsx_runtime19 = require("react/jsx-runtime");
 var SelectBase = SelectPrimitive.Root;
 var SelectGroupBase = SelectPrimitive.Group;
@@ -1601,7 +1632,7 @@ var SelectTriggerBase = React13.forwardRef(({ className, children, open, ...prop
     children: [
       children,
       /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-        import_framer_motion2.motion.span,
+        import_framer_motion3.motion.span,
         {
           animate: { rotate: open ? 180 : 0 },
           transition: { duration: 0.3 },
@@ -1639,7 +1670,7 @@ var SelectScrollDownButtonBase = React13.forwardRef(({ className, ...props }, re
   }
 ));
 SelectScrollDownButtonBase.displayName = SelectPrimitive.ScrollDownButton.displayName;
-var SelectContentBase = React13.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(SelectPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_framer_motion2.AnimatePresence, { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+var SelectContentBase = React13.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(SelectPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_framer_motion3.AnimatePresence, { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
   SelectPrimitive.Content,
   {
     ref,
@@ -1651,7 +1682,7 @@ var SelectContentBase = React13.forwardRef(({ className, children, position = "p
     ...props,
     asChild: true,
     children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-      import_framer_motion2.motion.div,
+      import_framer_motion3.motion.div,
       {
         initial: { opacity: 0, scale: 0.95 },
         animate: { opacity: 1, scale: 1 },
@@ -1889,7 +1920,7 @@ CardFooterBase.displayName = "CardFooter";
 var React16 = __toESM(require("react"));
 var CheckboxPrimitive = __toESM(require("@radix-ui/react-checkbox"));
 var import_phosphor_react12 = require("phosphor-react");
-var import_framer_motion3 = require("framer-motion");
+var import_framer_motion4 = require("framer-motion");
 var import_jsx_runtime24 = require("react/jsx-runtime");
 var CheckboxBase = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
   CheckboxPrimitive.Root,
@@ -1901,7 +1932,7 @@ var CheckboxBase = React16.forwardRef(({ className, ...props }, ref) => /* @__PU
     ),
     ...props,
     children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CheckboxPrimitive.Indicator, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-      import_framer_motion3.motion.div,
+      import_framer_motion4.motion.div,
       {
         initial: { scale: 0, opacity: 0, rotate: -90 },
         animate: { scale: 1, opacity: 1, rotate: 0 },
@@ -2162,7 +2193,7 @@ var ProgressCirclesBase = ({
 // src/components/ui/SeparatorBase.tsx
 var React19 = __toESM(require("react"));
 var SeparatorPrimitive = __toESM(require("@radix-ui/react-separator"));
-var import_framer_motion4 = require("framer-motion");
+var import_framer_motion5 = require("framer-motion");
 var import_jsx_runtime27 = require("react/jsx-runtime");
 var SeparatorBase = React19.forwardRef(
   ({ className, orientation = "horizontal", decorative = true, ...props }, ref) => {
@@ -2176,7 +2207,7 @@ var SeparatorBase = React19.forwardRef(
         asChild: true,
         ...props,
         children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-          import_framer_motion4.motion.div,
+          import_framer_motion5.motion.div,
           {
             className: cn(
               "shrink-0 bg-border",
@@ -2993,28 +3024,103 @@ var SlideBase = React23.forwardRef(
 SlideBase.displayName = "SlideBase";
 
 // src/components/ui/SonnerBase.tsx
-var import_next_themes = require("next-themes");
+var import_phosphor_react15 = require("phosphor-react");
 var import_sonner = require("sonner");
 var import_jsx_runtime33 = require("react/jsx-runtime");
+var iconBaseClass = "w-7 h-auto";
 var Toaster = ({ ...props }) => {
-  const { theme = "system" } = (0, import_next_themes.useTheme)();
   return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
     import_sonner.Toaster,
     {
-      theme,
       className: "toaster group",
+      position: "top-center",
       toastOptions: {
         classNames: {
-          toast: "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
-          description: "group-[.toast]:text-muted-foreground",
-          actionButton: "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
-          cancelButton: "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground"
+          toast: `
+            group toast
+            bg-white dark:bg-gray-900
+            text-gray-900 dark:text-gray-100
+            shadow-lg rounded-md
+            border-l-8
+            border-border
+            flex items-center gap-3
+            data-[type=success]:border-l-green-500 data-[type=success]:bg-green-50 dark:data-[type=success]:bg-green-900/30 dark:data-[type=success]:text-green-400
+            data-[type=error]:border-l-red-500 data-[type=error]:bg-red-50 dark:data-[type=error]:bg-red-900/30 dark:data-[type=error]:text-red-400
+            data-[type=warning]:border-l-yellow-500 data-[type=warning]:bg-yellow-50 dark:data-[type=warning]:bg-yellow-900/30 dark:data-[type=warning]:text-yellow-400
+            data-[type=info]:border-l-blue-500 data-[type=info]:bg-blue-50 dark:data-[type=info]:bg-blue-900/30 dark:data-[type=info]:text-blue-400
+          `,
+          description: `
+            text-sm
+            group-[.toast]:text-muted-foreground
+            dark:group-[.toast]:text-muted-foreground/80
+          `,
+          actionButton: `
+            ml-auto
+            rounded-md px-3 py-1 text-sm font-semibold
+            bg-primary text-primary-foreground
+            hover:bg-primary/80
+            transition-colors duration-200
+          `,
+          cancelButton: `
+            ml-2
+            rounded-md px-3 py-1 text-sm font-semibold
+            bg-muted text-muted-foreground
+            hover:bg-muted/80
+            transition-colors duration-200
+          `
         }
       },
       ...props
     }
   );
 };
+var toast = {
+  success: (message) => import_sonner.toast.success(message, {
+    icon: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+      import_phosphor_react15.CheckCircle,
+      {
+        className: `${iconBaseClass} text-green-600 dark:text-green-400`,
+        weight: "fill"
+      }
+    )
+  }),
+  error: (message) => import_sonner.toast.error(message, {
+    icon: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+      import_phosphor_react15.XCircle,
+      {
+        className: `${iconBaseClass} text-red-600 dark:text-red-400`,
+        weight: "fill"
+      }
+    )
+  }),
+  warning: (message) => import_sonner.toast.warning(message, {
+    icon: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+      import_phosphor_react15.Warning,
+      {
+        className: `${iconBaseClass} text-yellow-600 dark:text-yellow-400`,
+        weight: "fill"
+      }
+    )
+  }),
+  info: (message) => import_sonner.toast.info(message, {
+    icon: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+      import_phosphor_react15.Info,
+      {
+        className: `${iconBaseClass} text-blue-600 dark:text-blue-400`,
+        weight: "fill"
+      }
+    )
+  }),
+  loading: (message) => (0, import_sonner.toast)(message, {
+    icon: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+      import_phosphor_react15.Spinner,
+      {
+        className: `${iconBaseClass} animate-spin text-zinc-500 dark:text-zinc-400`,
+        weight: "fill"
+      }
+    )
+  })
+};
 
 // src/components/ui/SwitchBase.tsx
 var React24 = __toESM(require("react"));
@@ -3027,7 +3133,7 @@ var SwitchBase = React24.forwardRef(({ className, ...props }, ref) => {
       ...props,
       ref,
       className: cn(
-        "peer relative inline-flex h-[16px] w-12 cursor-pointer items-center rounded-full border-2 border-transparent shadow-md transition-colors duration-300 ease-in-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input data-[state=checked]:shadow-[0_0_15px_4px_var(--tw-shadow-color)] data-[state=checked]:shadow-primary/30",
+        "peer relative inline-flex  w-12 cursor-pointer items-center rounded-full border-2 border-transparent shadow-md transition-colors duration-300 ease-in-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input data-[state=checked]:shadow-[0_0_15px_4px_var(--tw-shadow-color)] data-[state=checked]:shadow-primary/30",
         className
       ),
       children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
@@ -3472,6 +3578,7 @@ function buildFilterSummary(filter, availableFilters) {
   buildFilterSummary,
   buttonVariantsBase,
   defaultStringConditions,
+  toast,
   useFormFieldBase,
   useIsMobile,
   useTheme

package/dist/index.mjs

@@ -72,7 +72,7 @@ var ButtonGroupBase = React.forwardRef(
         className: cn(
           "inline-flex",
           orientation === "vertical" ? "flex-col" : "flex-row",
-          "rounded-md overflow-hidden shadow-sm isolate",
+          "rounded-md overflow-hidden isolate",
           className
         ),
         ...props,
@@ -439,8 +439,7 @@ var InputBase = React6.forwardRef(
         {
           className: cn(
             "flex items-center rounded-md transition focus-within:ring-1 focus-within:ring-ring focus-within:border-ring bg-white dark:bg-[hsl(231,15%,19%)] overflow-hidden",
-            type !== "number" && type !== "file" && "border border-input",
-            (type === "file" || type === "number") && "border-none"
+            type !== "number" && type !== "file" && "border border-input"
           ),
           children: [
             leftIcon && /* @__PURE__ */ jsx7("div", { className: "flex items-center justify-center px-2", children: leftIcon }),
@@ -855,6 +854,7 @@ import { Check as Check2, Moon, Sun } from "phosphor-react";
 import * as React10 from "react";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import { Check, CaretRight as CaretRight2, Circle } from "phosphor-react";
+import { motion, AnimatePresence } from "framer-motion";
 import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
 var DropDownMenuBase = DropdownMenuPrimitive.Root;
 var DropDownMenuTriggerBase = DropdownMenuPrimitive.Trigger;
@@ -884,24 +884,34 @@ var DropDownMenuSubContentBase = React10.forwardRef(({ className, ...props }, re
   {
     ref,
     className: cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      " min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       className
     ),
     ...props
   }
 ));
-DropDownMenuSubContentBase.displayName = DropdownMenuPrimitive.SubContent.displayName;
 var DropDownMenuContentBase = React10.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx11(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx11(
   DropdownMenuPrimitive.Content,
   {
     sideOffset,
-    className: cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
-      className
-    ),
+    forceMount: true,
     ref,
+    className: cn("z-[9999] p-0", className),
     ...props,
-    children: props.children
+    children: /* @__PURE__ */ jsx11(AnimatePresence, { children: /* @__PURE__ */ jsx11(
+      motion.div,
+      {
+        initial: { opacity: 0, scale: 0.95, y: 5 },
+        animate: { opacity: 1, scale: 1, y: 0 },
+        exit: { opacity: 0, scale: 0.95, y: 5 },
+        transition: { duration: 0.2, ease: "easeOut" },
+        className: cn(
+          "min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
+          className
+        ),
+        children: props.children
+      }
+    ) })
   }
 ) }));
 DropDownMenuContentBase.displayName = DropdownMenuPrimitive.Content.displayName;
@@ -1100,7 +1110,7 @@ import { useCallback, useMemo } from "react";
 import * as React11 from "react";
 import { Command as CommandPrimitive } from "cmdk";
 import { MagnifyingGlass } from "phosphor-react";
-import { motion, AnimatePresence } from "framer-motion";
+import { motion as motion2, AnimatePresence as AnimatePresence2 } from "framer-motion";
 import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
 var CommandBase = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx14(
   CommandPrimitive,
@@ -1120,8 +1130,8 @@ var dialogVariants = {
   exit: { opacity: 0, scale: 0.95, y: -20 }
 };
 var CommandDialogBase = ({ children, open, ...props }) => {
-  return /* @__PURE__ */ jsx14(DialogBase, { open, ...props, children: /* @__PURE__ */ jsx14(AnimatePresence, { children: open && /* @__PURE__ */ jsx14(DialogContentBase, { asChild: true, forceMount: true, children: /* @__PURE__ */ jsx14(
-    motion.div,
+  return /* @__PURE__ */ jsx14(DialogBase, { open, ...props, children: /* @__PURE__ */ jsx14(AnimatePresence2, { children: open && /* @__PURE__ */ jsx14(DialogContentBase, { asChild: true, forceMount: true, children: /* @__PURE__ */ jsx14(
+    motion2.div,
     {
       initial: "hidden",
       animate: "visible",
@@ -1226,20 +1236,30 @@ function ComboboxBase({
   errorMessage
 }) {
   const [open, setOpen] = useState4(false);
-  return /* @__PURE__ */ jsx16("div", { className: "col-span-1 w-full ", children: /* @__PURE__ */ jsxs9(PopoverBase, { open, onOpenChange: setOpen, modal: true, children: [
-    /* @__PURE__ */ jsx16(PopoverTriggerBase, { asChild: true, className: "flex w-full justify-between dark:bg-[hsl(231,15%,19%)]", children: /* @__PURE__ */ jsxs9(
-      ButtonBase,
+  return /* @__PURE__ */ jsx16("div", { className: "col-span-1 w-full", children: /* @__PURE__ */ jsxs9(PopoverBase, { open, onOpenChange: setOpen, modal: true, children: [
+    /* @__PURE__ */ jsx16(
+      PopoverTriggerBase,
       {
-        variant: "outline",
-        role: "combobox",
-        "aria-expanded": open,
-        children: [
-          renderSelected,
-          /* @__PURE__ */ jsx16("span", { children: /* @__PURE__ */ jsx16(CaretDown, { size: 16 }) }),
-          errorMessage && /* @__PURE__ */ jsx16("span", { className: "text-red-500", children: errorMessage })
-        ]
+        asChild: true,
+        className: "flex w-full justify-between dark:bg-[hsl(231,15%,19%)]",
+        children: /* @__PURE__ */ jsxs9(
+          ButtonBase,
+          {
+            variant: "outline",
+            role: "combobox",
+            "aria-expanded": open,
+            className: cn(
+              "flex-wrap items-start gap-2 justify-between h-full",
+              errorMessage && "border-red-500"
+            ),
+            children: [
+              /* @__PURE__ */ jsx16("div", { className: "flex flex-wrap gap-2 flex-1", children: renderSelected }),
+              /* @__PURE__ */ jsx16(CaretDown, { size: 16, className: "mt-1" })
+            ]
+          }
+        )
       }
-    ) }),
+    ),
     /* @__PURE__ */ jsx16(PopoverContentBase, { className: "max-h-[--radix-popover-content-available-height] w-[--radix-popover-trigger-width] p-0 border-none", children: /* @__PURE__ */ jsxs9(CommandBase, { className: "dark:text-white", children: [
       /* @__PURE__ */ jsx16(
         CommandInputBase,
@@ -1287,7 +1307,8 @@ function Combobox({
   onChange,
   placeholder,
   searchPlaceholder,
-  label
+  label,
+  labelClassname
 }) {
   const selectedItem = items.find((item) => item.value === selected);
   const renderSelected = useMemo(
@@ -1305,7 +1326,7 @@ function Combobox({
     [selected, onChange]
   );
   return /* @__PURE__ */ jsxs10("div", { className: "flex flex-col gap-1 w-full min-w-[150px]", children: [
-    label && /* @__PURE__ */ jsx17(LabelBase_default, { children: label }),
+    label && /* @__PURE__ */ jsx17(LabelBase_default, { className: labelClassname, children: label }),
     /* @__PURE__ */ jsx17(
       ComboboxBase,
       {
@@ -1329,7 +1350,8 @@ function MultiCombobox({
   onChange,
   placeholder,
   searchPlaceholder,
-  label
+  label,
+  labelClassname
 }) {
   const selectedItems = items.filter((item) => selected.includes(item.value));
   const checkIsSelected = useCallback2(
@@ -1357,14 +1379,22 @@ function MultiCombobox({
         children: [
           /* @__PURE__ */ jsx18("span", { className: "truncate whitespace-break-spaces text-xs", children: item.label }),
           /* @__PURE__ */ jsx18(
-            X2,
+            "span",
             {
-              size: 14,
+              role: "button",
+              tabIndex: 0,
               onClick: (e) => {
                 e.stopPropagation();
                 handleSelection(item.value);
               },
-              className: "cursor-pointer"
+              onKeyDown: (e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  handleSelection(item.value);
+                }
+              },
+              className: "cursor-pointer p-0 m-0 text-xs flex items-center justify-center hover:text-red-500 hover:scale-110 transition-all",
+              children: /* @__PURE__ */ jsx18(X2, { size: 14 })
             }
           )
         ]
@@ -1374,7 +1404,7 @@ function MultiCombobox({
     return /* @__PURE__ */ jsx18("div", { className: "flex flex-wrap gap-2", children: items2 });
   }, [handleSelection, placeholder, selectedItems]);
   return /* @__PURE__ */ jsxs11("div", { className: "flex flex-col gap-1 w-full min-w-[150px]", children: [
-    label && /* @__PURE__ */ jsx18(LabelBase_default, { children: label }),
+    label && /* @__PURE__ */ jsx18(LabelBase_default, { className: labelClassname, children: label }),
     /* @__PURE__ */ jsx18(
       ComboboxBase,
       {
@@ -1392,7 +1422,7 @@ function MultiCombobox({
 import * as React13 from "react";
 import * as SelectPrimitive from "@radix-ui/react-select";
 import { Check as Check4, CaretDown as CaretDown2, CaretUp } from "phosphor-react";
-import { motion as motion2, AnimatePresence as AnimatePresence2 } from "framer-motion";
+import { motion as motion3, AnimatePresence as AnimatePresence3 } from "framer-motion";
 import { Fragment as Fragment3, jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
 var SelectBase = SelectPrimitive.Root;
 var SelectGroupBase = SelectPrimitive.Group;
@@ -1409,7 +1439,7 @@ var SelectTriggerBase = React13.forwardRef(({ className, children, open, ...prop
     children: [
       children,
       /* @__PURE__ */ jsx19(
-        motion2.span,
+        motion3.span,
         {
           animate: { rotate: open ? 180 : 0 },
           transition: { duration: 0.3 },
@@ -1447,7 +1477,7 @@ var SelectScrollDownButtonBase = React13.forwardRef(({ className, ...props }, re
   }
 ));
 SelectScrollDownButtonBase.displayName = SelectPrimitive.ScrollDownButton.displayName;
-var SelectContentBase = React13.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx19(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsx19(AnimatePresence2, { children: /* @__PURE__ */ jsx19(
+var SelectContentBase = React13.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx19(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsx19(AnimatePresence3, { children: /* @__PURE__ */ jsx19(
   SelectPrimitive.Content,
   {
     ref,
@@ -1459,7 +1489,7 @@ var SelectContentBase = React13.forwardRef(({ className, children, position = "p
     ...props,
     asChild: true,
     children: /* @__PURE__ */ jsx19(
-      motion2.div,
+      motion3.div,
       {
         initial: { opacity: 0, scale: 0.95 },
         animate: { opacity: 1, scale: 1 },
@@ -1697,7 +1727,7 @@ CardFooterBase.displayName = "CardFooter";
 import * as React16 from "react";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import { Check as Check5 } from "phosphor-react";
-import { motion as motion3 } from "framer-motion";
+import { motion as motion4 } from "framer-motion";
 import { jsx as jsx24 } from "react/jsx-runtime";
 var CheckboxBase = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx24(
   CheckboxPrimitive.Root,
@@ -1709,7 +1739,7 @@ var CheckboxBase = React16.forwardRef(({ className, ...props }, ref) => /* @__PU
     ),
     ...props,
     children: /* @__PURE__ */ jsx24(CheckboxPrimitive.Indicator, { asChild: true, children: /* @__PURE__ */ jsx24(
-      motion3.div,
+      motion4.div,
       {
         initial: { scale: 0, opacity: 0, rotate: -90 },
         animate: { scale: 1, opacity: 1, rotate: 0 },
@@ -1974,7 +2004,7 @@ var ProgressCirclesBase = ({
 // src/components/ui/SeparatorBase.tsx
 import * as React19 from "react";
 import * as SeparatorPrimitive from "@radix-ui/react-separator";
-import { motion as motion4 } from "framer-motion";
+import { motion as motion5 } from "framer-motion";
 import { jsx as jsx27 } from "react/jsx-runtime";
 var SeparatorBase = React19.forwardRef(
   ({ className, orientation = "horizontal", decorative = true, ...props }, ref) => {
@@ -1988,7 +2018,7 @@ var SeparatorBase = React19.forwardRef(
         asChild: true,
         ...props,
         children: /* @__PURE__ */ jsx27(
-          motion4.div,
+          motion5.div,
           {
             className: cn(
               "shrink-0 bg-border",
@@ -2805,28 +2835,103 @@ var SlideBase = React23.forwardRef(
 SlideBase.displayName = "SlideBase";
 
 // src/components/ui/SonnerBase.tsx
-import { useTheme as useTheme2 } from "next-themes";
-import { Toaster as Sonner } from "sonner";
+import { CheckCircle, XCircle, Info, Warning, Spinner } from "phosphor-react";
+import { Toaster as Sonner, toast as sonnertoast } from "sonner";
 import { jsx as jsx33 } from "react/jsx-runtime";
+var iconBaseClass = "w-7 h-auto";
 var Toaster = ({ ...props }) => {
-  const { theme = "system" } = useTheme2();
   return /* @__PURE__ */ jsx33(
     Sonner,
     {
-      theme,
       className: "toaster group",
+      position: "top-center",
       toastOptions: {
         classNames: {
-          toast: "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
-          description: "group-[.toast]:text-muted-foreground",
-          actionButton: "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
-          cancelButton: "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground"
+          toast: `
+            group toast
+            bg-white dark:bg-gray-900
+            text-gray-900 dark:text-gray-100
+            shadow-lg rounded-md
+            border-l-8
+            border-border
+            flex items-center gap-3
+            data-[type=success]:border-l-green-500 data-[type=success]:bg-green-50 dark:data-[type=success]:bg-green-900/30 dark:data-[type=success]:text-green-400
+            data-[type=error]:border-l-red-500 data-[type=error]:bg-red-50 dark:data-[type=error]:bg-red-900/30 dark:data-[type=error]:text-red-400
+            data-[type=warning]:border-l-yellow-500 data-[type=warning]:bg-yellow-50 dark:data-[type=warning]:bg-yellow-900/30 dark:data-[type=warning]:text-yellow-400
+            data-[type=info]:border-l-blue-500 data-[type=info]:bg-blue-50 dark:data-[type=info]:bg-blue-900/30 dark:data-[type=info]:text-blue-400
+          `,
+          description: `
+            text-sm
+            group-[.toast]:text-muted-foreground
+            dark:group-[.toast]:text-muted-foreground/80
+          `,
+          actionButton: `
+            ml-auto
+            rounded-md px-3 py-1 text-sm font-semibold
+            bg-primary text-primary-foreground
+            hover:bg-primary/80
+            transition-colors duration-200
+          `,
+          cancelButton: `
+            ml-2
+            rounded-md px-3 py-1 text-sm font-semibold
+            bg-muted text-muted-foreground
+            hover:bg-muted/80
+            transition-colors duration-200
+          `
         }
       },
       ...props
     }
   );
 };
+var toast = {
+  success: (message) => sonnertoast.success(message, {
+    icon: /* @__PURE__ */ jsx33(
+      CheckCircle,
+      {
+        className: `${iconBaseClass} text-green-600 dark:text-green-400`,
+        weight: "fill"
+      }
+    )
+  }),
+  error: (message) => sonnertoast.error(message, {
+    icon: /* @__PURE__ */ jsx33(
+      XCircle,
+      {
+        className: `${iconBaseClass} text-red-600 dark:text-red-400`,
+        weight: "fill"
+      }
+    )
+  }),
+  warning: (message) => sonnertoast.warning(message, {
+    icon: /* @__PURE__ */ jsx33(
+      Warning,
+      {
+        className: `${iconBaseClass} text-yellow-600 dark:text-yellow-400`,
+        weight: "fill"
+      }
+    )
+  }),
+  info: (message) => sonnertoast.info(message, {
+    icon: /* @__PURE__ */ jsx33(
+      Info,
+      {
+        className: `${iconBaseClass} text-blue-600 dark:text-blue-400`,
+        weight: "fill"
+      }
+    )
+  }),
+  loading: (message) => sonnertoast(message, {
+    icon: /* @__PURE__ */ jsx33(
+      Spinner,
+      {
+        className: `${iconBaseClass} animate-spin text-zinc-500 dark:text-zinc-400`,
+        weight: "fill"
+      }
+    )
+  })
+};
 
 // src/components/ui/SwitchBase.tsx
 import * as React24 from "react";
@@ -2839,7 +2944,7 @@ var SwitchBase = React24.forwardRef(({ className, ...props }, ref) => {
       ...props,
       ref,
       className: cn(
-        "peer relative inline-flex h-[16px] w-12 cursor-pointer items-center rounded-full border-2 border-transparent shadow-md transition-colors duration-300 ease-in-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input data-[state=checked]:shadow-[0_0_15px_4px_var(--tw-shadow-color)] data-[state=checked]:shadow-primary/30",
+        "peer relative inline-flex  w-12 cursor-pointer items-center rounded-full border-2 border-transparent shadow-md transition-colors duration-300 ease-in-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input data-[state=checked]:shadow-[0_0_15px_4px_var(--tw-shadow-color)] data-[state=checked]:shadow-primary/30",
         className
       ),
       children: /* @__PURE__ */ jsx34(
@@ -3283,6 +3388,7 @@ export {
   buildFilterSummary,
   buttonVariantsBase,
   defaultStringConditions,
+  toast,
   useFormFieldBase,
   useIsMobile,
   useTheme

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mlw-packages/react-components",
-  "version": "1.3.6",
+  "version": "1.3.10",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",