@mlw-packages/react-components 1.3.9 → 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;
 }
@@ -726,9 +729,6 @@ body {
 .h-\[120px\] {
   height: 120px;
 }
-.h-\[16px\] {
-  height: 16px;
-}
 .h-\[1px\] {
   height: 1px;
 }
@@ -1018,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;
 }
@@ -1295,6 +1303,9 @@ body {
 .border-l {
   border-left-width: 1px;
 }
+.border-l-8 {
+  border-left-width: 8px;
+}
 .border-r {
   border-right-width: 1px;
 }
@@ -1662,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));
 }
@@ -1689,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));
 }
@@ -1713,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));
 }
@@ -1732,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));
@@ -2305,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));
@@ -2474,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);
@@ -2644,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));
 }
@@ -2666,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;
 }
@@ -2681,14 +2724,6 @@ body {
 .data-\[state\=open\]\:text-muted-foreground[data-state=open] {
   color: hsl(var(--muted-foreground));
 }
-.data-\[type\=error\]\:text-red-500[data-type=error] {
-  --tw-text-opacity: 1;
-  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
-}
-.data-\[type\=success\]\:text-green-500[data-type=success] {
-  --tw-text-opacity: 1;
-  color: rgb(34 197 94 / var(--tw-text-opacity, 1));
-}
 .data-\[disabled\=true\]\:opacity-50[data-disabled=true] {
   opacity: 0.5;
 }
@@ -2937,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);
 }
@@ -2967,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));
@@ -2991,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));
@@ -3007,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));
 }
@@ -3028,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

@@ -18,7 +18,6 @@ import * as SelectPrimitive from '@radix-ui/react-select';
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import * as SliderPrimitive from '@radix-ui/react-slider';
-import * as sonner from 'sonner';
 import { Toaster as Toaster$1 } from 'sonner';
 import * as SwitchPrimitives from '@radix-ui/react-switch';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
@@ -376,51 +375,12 @@ 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: ((message: React$1.ReactNode | (() => React.ReactNode), data?: sonner.ExternalToast) => string | number) & {
-    success: (message: (React$1.ReactNode | (() => React.ReactNode)) | React.ReactNode, data?: sonner.ExternalToast) => string | number;
-    info: (message: (React$1.ReactNode | (() => React.ReactNode)) | React.ReactNode, data?: sonner.ExternalToast) => string | number;
-    warning: (message: (React$1.ReactNode | (() => React.ReactNode)) | React.ReactNode, data?: sonner.ExternalToast) => string | number;
-    error: (message: (React$1.ReactNode | (() => React.ReactNode)) | React.ReactNode, data?: sonner.ExternalToast) => string | number;
-    custom: (jsx: (id: number | string) => React.ReactElement, data?: sonner.ExternalToast) => string | number;
-    message: (message: (React$1.ReactNode | (() => React.ReactNode)) | React.ReactNode, data?: sonner.ExternalToast) => string | number;
-    promise: <ToastData>(promise: Promise<ToastData> | (() => Promise<ToastData>), data?: {
-        icon?: React$1.ReactNode;
-        className?: string | undefined;
-        id?: number | string | undefined;
-        style?: React.CSSProperties | undefined;
-        onDismiss?: ((toast: sonner.ToastT) => void) | undefined;
-        position?: ("top-center" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "bottom-center") | undefined;
-        duration?: number | undefined;
-        cancel?: React$1.ReactNode | sonner.Action;
-        invert?: boolean | undefined;
-        richColors?: boolean | undefined;
-        closeButton?: boolean | undefined;
-        dismissible?: boolean | undefined;
-        action?: React$1.ReactNode | sonner.Action;
-        onAutoClose?: ((toast: sonner.ToastT) => void) | undefined;
-        cancelButtonStyle?: React.CSSProperties | undefined;
-        actionButtonStyle?: React.CSSProperties | undefined;
-        unstyled?: boolean | undefined;
-        classNames?: sonner.ToastClassnames | undefined;
-        descriptionClassName?: string | undefined;
-    } & {
-        loading?: string | React.ReactNode;
-        success?: React$1.ReactNode | ((data: ToastData) => React.ReactNode | string | Promise<React.ReactNode | string>);
-        error?: React$1.ReactNode | ((data: any) => React.ReactNode | string | Promise<React.ReactNode | string>);
-        description?: React$1.ReactNode | ((data: any) => React.ReactNode | string | Promise<React.ReactNode | string>);
-        finally?: () => void | Promise<void>;
-    }) => (string & {
-        unwrap: () => Promise<ToastData>;
-    }) | (number & {
-        unwrap: () => Promise<ToastData>;
-    }) | {
-        unwrap: () => Promise<ToastData>;
-    };
-    dismiss: (id?: number | string) => string | number;
-    loading: (message: (React$1.ReactNode | (() => React.ReactNode)) | React.ReactNode, data?: sonner.ExternalToast) => string | number;
-} & {
-    getHistory: () => (sonner.ToastT | sonner.ToastToDismiss)[];
-    getToasts: () => (sonner.ToastT | sonner.ToastToDismiss)[];
+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>>;
@@ -503,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;

package/dist/index.d.ts

@@ -18,7 +18,6 @@ import * as SelectPrimitive from '@radix-ui/react-select';
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import * as SliderPrimitive from '@radix-ui/react-slider';
-import * as sonner from 'sonner';
 import { Toaster as Toaster$1 } from 'sonner';
 import * as SwitchPrimitives from '@radix-ui/react-switch';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
@@ -376,51 +375,12 @@ 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: ((message: React$1.ReactNode | (() => React.ReactNode), data?: sonner.ExternalToast) => string | number) & {
-    success: (message: (React$1.ReactNode | (() => React.ReactNode)) | React.ReactNode, data?: sonner.ExternalToast) => string | number;
-    info: (message: (React$1.ReactNode | (() => React.ReactNode)) | React.ReactNode, data?: sonner.ExternalToast) => string | number;
-    warning: (message: (React$1.ReactNode | (() => React.ReactNode)) | React.ReactNode, data?: sonner.ExternalToast) => string | number;
-    error: (message: (React$1.ReactNode | (() => React.ReactNode)) | React.ReactNode, data?: sonner.ExternalToast) => string | number;
-    custom: (jsx: (id: number | string) => React.ReactElement, data?: sonner.ExternalToast) => string | number;
-    message: (message: (React$1.ReactNode | (() => React.ReactNode)) | React.ReactNode, data?: sonner.ExternalToast) => string | number;
-    promise: <ToastData>(promise: Promise<ToastData> | (() => Promise<ToastData>), data?: {
-        icon?: React$1.ReactNode;
-        className?: string | undefined;
-        id?: number | string | undefined;
-        style?: React.CSSProperties | undefined;
-        onDismiss?: ((toast: sonner.ToastT) => void) | undefined;
-        position?: ("top-center" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "bottom-center") | undefined;
-        duration?: number | undefined;
-        cancel?: React$1.ReactNode | sonner.Action;
-        invert?: boolean | undefined;
-        richColors?: boolean | undefined;
-        closeButton?: boolean | undefined;
-        dismissible?: boolean | undefined;
-        action?: React$1.ReactNode | sonner.Action;
-        onAutoClose?: ((toast: sonner.ToastT) => void) | undefined;
-        cancelButtonStyle?: React.CSSProperties | undefined;
-        actionButtonStyle?: React.CSSProperties | undefined;
-        unstyled?: boolean | undefined;
-        classNames?: sonner.ToastClassnames | undefined;
-        descriptionClassName?: string | undefined;
-    } & {
-        loading?: string | React.ReactNode;
-        success?: React$1.ReactNode | ((data: ToastData) => React.ReactNode | string | Promise<React.ReactNode | string>);
-        error?: React$1.ReactNode | ((data: any) => React.ReactNode | string | Promise<React.ReactNode | string>);
-        description?: React$1.ReactNode | ((data: any) => React.ReactNode | string | Promise<React.ReactNode | string>);
-        finally?: () => void | Promise<void>;
-    }) => (string & {
-        unwrap: () => Promise<ToastData>;
-    }) | (number & {
-        unwrap: () => Promise<ToastData>;
-    }) | {
-        unwrap: () => Promise<ToastData>;
-    };
-    dismiss: (id?: number | string) => string | number;
-    loading: (message: (React$1.ReactNode | (() => React.ReactNode)) | React.ReactNode, data?: sonner.ExternalToast) => string | number;
-} & {
-    getHistory: () => (sonner.ToastT | sonner.ToastToDismiss)[];
-    getToasts: () => (sonner.ToastT | sonner.ToastToDismiss)[];
+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>>;
@@ -503,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;

package/dist/index.js

@@ -265,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,
@@ -632,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 }),
@@ -1078,7 +1077,7 @@ 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
@@ -1090,8 +1089,8 @@ var DropDownMenuContentBase = React10.forwardRef(({ className, sideOffset = 4, .
     sideOffset,
     forceMount: true,
     ref,
+    className: cn("z-[9999] p-0", className),
     ...props,
-    className: cn("p-0", className),
     children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_framer_motion.AnimatePresence, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       import_framer_motion.motion.div,
       {
@@ -1100,7 +1099,7 @@ var DropDownMenuContentBase = React10.forwardRef(({ className, sideOffset = 4, .
         exit: { opacity: 0, scale: 0.95, y: 5 },
         transition: { duration: 0.2, ease: "easeOut" },
         className: cn(
-          "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
+          "min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
           className
         ),
         children: props.children
@@ -1430,7 +1429,7 @@ 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: [
+  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,
       {
@@ -1501,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)(
@@ -1519,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,
       {
@@ -1543,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)(
@@ -1596,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,
       {
@@ -3023,8 +3024,10 @@ var SlideBase = React23.forwardRef(
 SlideBase.displayName = "SlideBase";
 
 // src/components/ui/SonnerBase.tsx
+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 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
     import_sonner.Toaster,
@@ -3033,19 +3036,91 @@ var Toaster = ({ ...props }) => {
       position: "top-center",
       toastOptions: {
         classNames: {
-          toast: `group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg
-            data-[type=success]:text-green-500 
-            data-[type=error]:text-red-500`,
-          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 = import_sonner.toast;
+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"));
@@ -3058,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)(

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 }),
@@ -885,7 +884,7 @@ 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
@@ -897,8 +896,8 @@ var DropDownMenuContentBase = React10.forwardRef(({ className, sideOffset = 4, .
     sideOffset,
     forceMount: true,
     ref,
+    className: cn("z-[9999] p-0", className),
     ...props,
-    className: cn("p-0", className),
     children: /* @__PURE__ */ jsx11(AnimatePresence, { children: /* @__PURE__ */ jsx11(
       motion.div,
       {
@@ -907,7 +906,7 @@ var DropDownMenuContentBase = React10.forwardRef(({ className, sideOffset = 4, .
         exit: { opacity: 0, scale: 0.95, y: 5 },
         transition: { duration: 0.2, ease: "easeOut" },
         className: cn(
-          "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
+          "min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
           className
         ),
         children: props.children
@@ -1237,7 +1236,7 @@ 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: [
+  return /* @__PURE__ */ jsx16("div", { className: "col-span-1 w-full", children: /* @__PURE__ */ jsxs9(PopoverBase, { open, onOpenChange: setOpen, modal: true, children: [
     /* @__PURE__ */ jsx16(
       PopoverTriggerBase,
       {
@@ -1308,7 +1307,8 @@ function Combobox({
   onChange,
   placeholder,
   searchPlaceholder,
-  label
+  label,
+  labelClassname
 }) {
   const selectedItem = items.find((item) => item.value === selected);
   const renderSelected = useMemo(
@@ -1326,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,
       {
@@ -1350,7 +1350,8 @@ function MultiCombobox({
   onChange,
   placeholder,
   searchPlaceholder,
-  label
+  label,
+  labelClassname
 }) {
   const selectedItems = items.filter((item) => selected.includes(item.value));
   const checkIsSelected = useCallback2(
@@ -1403,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,
       {
@@ -2834,8 +2835,10 @@ var SlideBase = React23.forwardRef(
 SlideBase.displayName = "SlideBase";
 
 // src/components/ui/SonnerBase.tsx
+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 }) => {
   return /* @__PURE__ */ jsx33(
     Sonner,
@@ -2844,19 +2847,91 @@ var Toaster = ({ ...props }) => {
       position: "top-center",
       toastOptions: {
         classNames: {
-          toast: `group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg
-            data-[type=success]:text-green-500 
-            data-[type=error]:text-red-500`,
-          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 = sonnertoast;
+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";
@@ -2869,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(

package/package.json

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