@mlw-packages/react-components 1.3.10 → 1.3.12

package/dist/index.css

@@ -549,9 +549,6 @@ body {
 .-mt-4 {
   margin-top: -1rem;
 }
-.mb-1 {
-  margin-bottom: 0.25rem;
-}
 .mb-2 {
   margin-bottom: 0.5rem;
 }
@@ -585,6 +582,9 @@ body {
 .mr-5 {
   margin-right: 1.25rem;
 }
+.mt-0\.5 {
+  margin-top: 0.125rem;
+}
 .mt-1 {
   margin-top: 0.25rem;
 }
@@ -804,6 +804,9 @@ body {
 .w-4 {
   width: 1rem;
 }
+.w-40 {
+  width: 10rem;
+}
 .w-44 {
   width: 11rem;
 }
@@ -885,10 +888,6 @@ body {
 .w-auto {
   width: auto;
 }
-.w-fit {
-  width: -moz-fit-content;
-  width: fit-content;
-}
 .w-full {
   width: 100%;
 }
@@ -908,9 +907,6 @@ body {
 .min-w-\[150px\] {
   min-width: 150px;
 }
-.min-w-\[200px\] {
-  min-width: 200px;
-}
 .min-w-\[8rem\] {
   min-width: 8rem;
 }
@@ -1061,9 +1057,6 @@ body {
 .flex-wrap {
   flex-wrap: wrap;
 }
-.place-items-end {
-  place-items: end;
-}
 .content-start {
   align-content: flex-start;
 }
@@ -1079,9 +1072,6 @@ body {
 .justify-start {
   justify-content: flex-start;
 }
-.justify-end {
-  justify-content: flex-end;
-}
 .justify-center {
   justify-content: center;
 }
@@ -1406,6 +1396,10 @@ body {
 .bg-primary\/20 {
   background-color: hsl(var(--primary) / 0.2);
 }
+.bg-red-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
+}
 .bg-secondary {
   background-color: hsl(var(--secondary));
 }

package/dist/index.d.mts

@@ -3,6 +3,7 @@ import * as React$1 from 'react';
 import React__default from 'react';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
+import * as class_variance_authority_dist_types from 'class-variance-authority/dist/types';
 import { VariantProps } from 'class-variance-authority';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
@@ -45,12 +46,10 @@ declare const AvatarBase: React$1.ForwardRefExoticComponent<Omit<AvatarPrimitive
 declare const AvatarImageBase: React$1.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarImageProps & React$1.RefAttributes<HTMLImageElement>, "ref"> & React$1.RefAttributes<HTMLImageElement>>;
 declare const AvatarFallbackBase: React$1.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarFallbackProps & React$1.RefAttributes<HTMLSpanElement>, "ref"> & React$1.RefAttributes<HTMLSpanElement>>;
 
-declare const buttonVariantsBase: (props?: (Partial<{
-    variant: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link";
-    size: "default" | "sm" | "lg" | "icon";
-}> & {
-    className?: string;
-}) | undefined) => string;
+declare const buttonVariantsBase: (props?: ({
+    variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | null | undefined;
+    size?: "default" | "sm" | "lg" | "icon" | null | undefined;
+} & class_variance_authority_dist_types.ClassProp) | undefined) => string;
 interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariantsBase> {
     asChild?: boolean;
 }
@@ -275,11 +274,9 @@ declare const SheetTriggerBase: React$1.ForwardRefExoticComponent<DialogPrimitiv
 declare const SheetCloseBase: React$1.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React$1.RefAttributes<HTMLButtonElement>>;
 declare const SheetPortalBase: React$1.FC<DialogPrimitive.DialogPortalProps>;
 declare const SheetOverlayBase: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
-declare const sheetVariants: (props?: (Partial<{
-    side: "bottom" | "left" | "right" | "top";
-}> & {
-    className?: string;
-}) | undefined) => string;
+declare const sheetVariants: (props?: ({
+    side?: "bottom" | "left" | "right" | "top" | null | undefined;
+} & class_variance_authority_dist_types.ClassProp) | undefined) => string;
 interface SheetContentProps extends React$1.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>, VariantProps<typeof sheetVariants> {
 }
 declare const SheetContentBase: React$1.ForwardRefExoticComponent<SheetContentProps & React$1.RefAttributes<HTMLDivElement>>;
@@ -342,12 +339,10 @@ declare const SidebarMenuButtonBase: React$1.ForwardRefExoticComponent<Omit<Reac
     asChild?: boolean;
     isActive?: boolean;
     tooltip?: string | React$1.ComponentProps<typeof TooltipContentBase>;
-} & Partial<{
-    variant: "default" | "outline";
-    size: "default" | "sm" | "lg";
-}> & {
-    className?: string;
-}, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+} & VariantProps<(props?: ({
+    variant?: "default" | "outline" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & class_variance_authority_dist_types.ClassProp) | undefined) => string>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
 declare const SidebarMenuActionBase: React$1.ForwardRefExoticComponent<Omit<React$1.ClassAttributes<HTMLButtonElement> & React$1.ButtonHTMLAttributes<HTMLButtonElement> & {
     asChild?: boolean;
     showOnHover?: boolean;
@@ -460,20 +455,21 @@ interface ComboboxProps<T extends string> {
     items: ComboboxItem<T>[];
     selected: ComboboxItem<T>["value"] | null;
     onChange: (value: ComboboxItem<T>["value"] | null) => void;
+    className?: string;
     placeholder?: string;
     searchPlaceholder?: string;
     label?: string;
     labelClassname?: string;
 }
-declare function Combobox<T extends string>({ items, selected, onChange, placeholder, searchPlaceholder, label, labelClassname }: ComboboxProps<T>): react_jsx_runtime.JSX.Element;
+declare function Combobox<T extends string>({ items, selected, onChange, className, 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;
+    label?: string;
     labelClassname?: string;
 }
-declare function MultiCombobox<T extends string>({ items, selected, onChange, placeholder, searchPlaceholder, label, labelClassname }: MultiComboboxProps<T>): react_jsx_runtime.JSX.Element;
+declare function MultiCombobox<T extends string>({ items, selected, onChange, className, placeholder, searchPlaceholder, label, labelClassname, }: MultiComboboxProps<T>): react_jsx_runtime.JSX.Element;
 
 interface SelectItem$1<T extends string> {
     label: string;

package/dist/index.d.ts

@@ -3,6 +3,7 @@ import * as React$1 from 'react';
 import React__default from 'react';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
+import * as class_variance_authority_dist_types from 'class-variance-authority/dist/types';
 import { VariantProps } from 'class-variance-authority';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
@@ -45,12 +46,10 @@ declare const AvatarBase: React$1.ForwardRefExoticComponent<Omit<AvatarPrimitive
 declare const AvatarImageBase: React$1.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarImageProps & React$1.RefAttributes<HTMLImageElement>, "ref"> & React$1.RefAttributes<HTMLImageElement>>;
 declare const AvatarFallbackBase: React$1.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarFallbackProps & React$1.RefAttributes<HTMLSpanElement>, "ref"> & React$1.RefAttributes<HTMLSpanElement>>;
 
-declare const buttonVariantsBase: (props?: (Partial<{
-    variant: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link";
-    size: "default" | "sm" | "lg" | "icon";
-}> & {
-    className?: string;
-}) | undefined) => string;
+declare const buttonVariantsBase: (props?: ({
+    variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | null | undefined;
+    size?: "default" | "sm" | "lg" | "icon" | null | undefined;
+} & class_variance_authority_dist_types.ClassProp) | undefined) => string;
 interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariantsBase> {
     asChild?: boolean;
 }
@@ -275,11 +274,9 @@ declare const SheetTriggerBase: React$1.ForwardRefExoticComponent<DialogPrimitiv
 declare const SheetCloseBase: React$1.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React$1.RefAttributes<HTMLButtonElement>>;
 declare const SheetPortalBase: React$1.FC<DialogPrimitive.DialogPortalProps>;
 declare const SheetOverlayBase: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
-declare const sheetVariants: (props?: (Partial<{
-    side: "bottom" | "left" | "right" | "top";
-}> & {
-    className?: string;
-}) | undefined) => string;
+declare const sheetVariants: (props?: ({
+    side?: "bottom" | "left" | "right" | "top" | null | undefined;
+} & class_variance_authority_dist_types.ClassProp) | undefined) => string;
 interface SheetContentProps extends React$1.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>, VariantProps<typeof sheetVariants> {
 }
 declare const SheetContentBase: React$1.ForwardRefExoticComponent<SheetContentProps & React$1.RefAttributes<HTMLDivElement>>;
@@ -342,12 +339,10 @@ declare const SidebarMenuButtonBase: React$1.ForwardRefExoticComponent<Omit<Reac
     asChild?: boolean;
     isActive?: boolean;
     tooltip?: string | React$1.ComponentProps<typeof TooltipContentBase>;
-} & Partial<{
-    variant: "default" | "outline";
-    size: "default" | "sm" | "lg";
-}> & {
-    className?: string;
-}, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+} & VariantProps<(props?: ({
+    variant?: "default" | "outline" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & class_variance_authority_dist_types.ClassProp) | undefined) => string>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
 declare const SidebarMenuActionBase: React$1.ForwardRefExoticComponent<Omit<React$1.ClassAttributes<HTMLButtonElement> & React$1.ButtonHTMLAttributes<HTMLButtonElement> & {
     asChild?: boolean;
     showOnHover?: boolean;
@@ -460,20 +455,21 @@ interface ComboboxProps<T extends string> {
     items: ComboboxItem<T>[];
     selected: ComboboxItem<T>["value"] | null;
     onChange: (value: ComboboxItem<T>["value"] | null) => void;
+    className?: string;
     placeholder?: string;
     searchPlaceholder?: string;
     label?: string;
     labelClassname?: string;
 }
-declare function Combobox<T extends string>({ items, selected, onChange, placeholder, searchPlaceholder, label, labelClassname }: ComboboxProps<T>): react_jsx_runtime.JSX.Element;
+declare function Combobox<T extends string>({ items, selected, onChange, className, 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;
+    label?: string;
     labelClassname?: string;
 }
-declare function MultiCombobox<T extends string>({ items, selected, onChange, placeholder, searchPlaceholder, label, labelClassname }: MultiComboboxProps<T>): react_jsx_runtime.JSX.Element;
+declare function MultiCombobox<T extends string>({ items, selected, onChange, className, placeholder, searchPlaceholder, label, labelClassname, }: MultiComboboxProps<T>): react_jsx_runtime.JSX.Element;
 
 interface SelectItem$1<T extends string> {
     label: string;

package/dist/index.js

@@ -217,7 +217,7 @@ var buttonVariantsBase = (0, import_class_variance_authority.cva)(
     focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2
     disabled:pointer-events-none disabled:opacity-50
     active:scale-[0.97]
-    [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0
+    [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border border-transparent
   `,
   {
     variants: {
@@ -230,9 +230,9 @@ var buttonVariantsBase = (0, import_class_variance_authority.cva)(
         link: "text-primary underline-offset-4 hover:underline"
       },
       size: {
-        default: "h-9 px-4 py-1.5",
-        sm: "h-8 rounded-md px-3 text-xs",
-        lg: "h-10 rounded-md px-8",
+        default: "px-4 py-1.5",
+        sm: "rounded-md px-3 text-xs",
+        lg: "rounded-md px-8",
         icon: "h-9 w-9"
       }
     },
@@ -632,7 +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" && "border"
           ),
           children: [
             leftIcon && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex items-center justify-center px-2", children: leftIcon }),
@@ -641,7 +641,7 @@ var InputBase = React6.forwardRef(
               {
                 type,
                 className: cn(
-                  "w-full flex-1 text-sm leading-tight py-2 px-3 focus:outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 bg-white dark:bg-[hsl(231,15%,19%)]",
+                  "w-full flex-1 text-sm py-1.5 px-3 focus:outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 bg-white dark:bg-[hsl(231,15%,19%)]",
                   className
                 ),
                 ref,
@@ -1442,12 +1442,12 @@ function ComboboxBase({
             role: "combobox",
             "aria-expanded": open,
             className: cn(
-              "flex-wrap items-start gap-2 justify-between h-full",
+              "flex 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" })
+              renderSelected,
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_phosphor_react8.CaretDown, { size: 16, className: "mt-0.5" })
             ]
           }
         )
@@ -1498,16 +1498,16 @@ function Combobox({
   items,
   selected,
   onChange,
+  className,
   placeholder,
   searchPlaceholder,
   label,
   labelClassname
 }) {
   const selectedItem = items.find((item) => item.value === selected);
-  const renderSelected = (0, import_react5.useMemo)(
-    () => selectedItem?.label ?? placeholder ?? "Selecione uma op\xE7\xE3o...",
-    [placeholder, selectedItem]
-  );
+  const renderSelected = (0, import_react5.useMemo)(() => {
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: cn("truncate", !selectedItem && "text-gray-500"), children: selectedItem?.label ?? placeholder ?? "Selecione uma op\xE7\xE3o..." });
+  }, [placeholder, selectedItem]);
   const checkIsSelected = (0, import_react5.useCallback)(
     (value) => selected == null ? false : selected == value,
     [selected]
@@ -1518,7 +1518,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: [
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: cn("flex flex-col gap-1 w-full min-w-[150px]", className), children: [
     label && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(LabelBase_default, { className: labelClassname, children: label }),
     /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
       ComboboxBase,
@@ -1541,6 +1541,7 @@ function MultiCombobox({
   items,
   selected,
   onChange,
+  className,
   placeholder,
   searchPlaceholder,
   label,
@@ -1563,8 +1564,9 @@ function MultiCombobox({
     [selected, onChange]
   );
   const renderSelected = (0, import_react6.useMemo)(() => {
-    if (selectedItems.length === 0)
-      return placeholder ?? "Selecione uma op\xE7\xE3o...";
+    if (selectedItems.length === 0) {
+      return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "text-gray-500", children: placeholder ?? "Selecione uma op\xE7\xE3o..." });
+    }
     const items2 = selectedItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
       "div",
       {
@@ -1596,7 +1598,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: [
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: cn("flex flex-col gap-1 w-full min-w-[150px]", className), children: [
     label && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(LabelBase_default, { className: labelClassname, children: label }),
     /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       ComboboxBase,
@@ -3027,7 +3029,7 @@ SlideBase.displayName = "SlideBase";
 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 iconBaseClass = "w-5 h-auto";
 var Toaster = ({ ...props }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
     import_sonner.Toaster,
@@ -3133,7 +3135,7 @@ var SwitchBase = React24.forwardRef(({ className, ...props }, ref) => {
       ...props,
       ref,
       className: cn(
-        "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",
+        "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

@@ -24,7 +24,7 @@ var buttonVariantsBase = cva(
     focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2
     disabled:pointer-events-none disabled:opacity-50
     active:scale-[0.97]
-    [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0
+    [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border border-transparent
   `,
   {
     variants: {
@@ -37,9 +37,9 @@ var buttonVariantsBase = cva(
         link: "text-primary underline-offset-4 hover:underline"
       },
       size: {
-        default: "h-9 px-4 py-1.5",
-        sm: "h-8 rounded-md px-3 text-xs",
-        lg: "h-10 rounded-md px-8",
+        default: "px-4 py-1.5",
+        sm: "rounded-md px-3 text-xs",
+        lg: "rounded-md px-8",
         icon: "h-9 w-9"
       }
     },
@@ -439,7 +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" && "border"
           ),
           children: [
             leftIcon && /* @__PURE__ */ jsx7("div", { className: "flex items-center justify-center px-2", children: leftIcon }),
@@ -448,7 +448,7 @@ var InputBase = React6.forwardRef(
               {
                 type,
                 className: cn(
-                  "w-full flex-1 text-sm leading-tight py-2 px-3 focus:outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 bg-white dark:bg-[hsl(231,15%,19%)]",
+                  "w-full flex-1 text-sm py-1.5 px-3 focus:outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 bg-white dark:bg-[hsl(231,15%,19%)]",
                   className
                 ),
                 ref,
@@ -1249,12 +1249,12 @@ function ComboboxBase({
             role: "combobox",
             "aria-expanded": open,
             className: cn(
-              "flex-wrap items-start gap-2 justify-between h-full",
+              "flex 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" })
+              renderSelected,
+              /* @__PURE__ */ jsx16(CaretDown, { size: 16, className: "mt-0.5" })
             ]
           }
         )
@@ -1305,16 +1305,16 @@ function Combobox({
   items,
   selected,
   onChange,
+  className,
   placeholder,
   searchPlaceholder,
   label,
   labelClassname
 }) {
   const selectedItem = items.find((item) => item.value === selected);
-  const renderSelected = useMemo(
-    () => selectedItem?.label ?? placeholder ?? "Selecione uma op\xE7\xE3o...",
-    [placeholder, selectedItem]
-  );
+  const renderSelected = useMemo(() => {
+    return /* @__PURE__ */ jsx17("span", { className: cn("truncate", !selectedItem && "text-gray-500"), children: selectedItem?.label ?? placeholder ?? "Selecione uma op\xE7\xE3o..." });
+  }, [placeholder, selectedItem]);
   const checkIsSelected = useCallback(
     (value) => selected == null ? false : selected == value,
     [selected]
@@ -1325,7 +1325,7 @@ function Combobox({
     },
     [selected, onChange]
   );
-  return /* @__PURE__ */ jsxs10("div", { className: "flex flex-col gap-1 w-full min-w-[150px]", children: [
+  return /* @__PURE__ */ jsxs10("div", { className: cn("flex flex-col gap-1 w-full min-w-[150px]", className), children: [
     label && /* @__PURE__ */ jsx17(LabelBase_default, { className: labelClassname, children: label }),
     /* @__PURE__ */ jsx17(
       ComboboxBase,
@@ -1348,6 +1348,7 @@ function MultiCombobox({
   items,
   selected,
   onChange,
+  className,
   placeholder,
   searchPlaceholder,
   label,
@@ -1370,8 +1371,9 @@ function MultiCombobox({
     [selected, onChange]
   );
   const renderSelected = useMemo2(() => {
-    if (selectedItems.length === 0)
-      return placeholder ?? "Selecione uma op\xE7\xE3o...";
+    if (selectedItems.length === 0) {
+      return /* @__PURE__ */ jsx18("span", { className: "text-gray-500", children: placeholder ?? "Selecione uma op\xE7\xE3o..." });
+    }
     const items2 = selectedItems.map((item) => /* @__PURE__ */ jsxs11(
       "div",
       {
@@ -1403,7 +1405,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: [
+  return /* @__PURE__ */ jsxs11("div", { className: cn("flex flex-col gap-1 w-full min-w-[150px]", className), children: [
     label && /* @__PURE__ */ jsx18(LabelBase_default, { className: labelClassname, children: label }),
     /* @__PURE__ */ jsx18(
       ComboboxBase,
@@ -2838,7 +2840,7 @@ SlideBase.displayName = "SlideBase";
 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 iconBaseClass = "w-5 h-auto";
 var Toaster = ({ ...props }) => {
   return /* @__PURE__ */ jsx33(
     Sonner,
@@ -2944,7 +2946,7 @@ var SwitchBase = React24.forwardRef(({ className, ...props }, ref) => {
       ...props,
       ref,
       className: cn(
-        "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",
+        "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.10",
+  "version": "1.3.12",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",