@mlw-packages/react-components 1.3.11 → 1.3.13

package/dist/index.css

@@ -582,6 +582,9 @@ body {
 .mr-5 {
   margin-right: 1.25rem;
 }
+.mt-0\.5 {
+  margin-top: 0.125rem;
+}
 .mt-1 {
   margin-top: 0.25rem;
 }
@@ -801,6 +804,9 @@ body {
 .w-4 {
   width: 1rem;
 }
+.w-40 {
+  width: 10rem;
+}
 .w-44 {
   width: 11rem;
 }

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

@@ -1446,8 +1446,8 @@ function ComboboxBase({
               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,6 +1498,7 @@ function Combobox({
   items,
   selected,
   onChange,
+  className,
   placeholder,
   searchPlaceholder,
   label,
@@ -1517,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,
@@ -1540,6 +1541,7 @@ function MultiCombobox({
   items,
   selected,
   onChange,
+  className,
   placeholder,
   searchPlaceholder,
   label,
@@ -1570,7 +1572,7 @@ function MultiCombobox({
       {
         className: "flex items-center gap-1 rounded-md border p-1",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "truncate whitespace-break-spaces text-xs", children: item.label }),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "whitespace-break-spaces text-xs", children: item.label }),
           /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
             "span",
             {
@@ -1580,12 +1582,6 @@ function MultiCombobox({
                 e.stopPropagation();
                 handleSelection(item.value);
               },
-              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 })
             }
@@ -1594,9 +1590,9 @@ function MultiCombobox({
       },
       item.value
     ));
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "flex flex-wrap gap-2", children: items2 });
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "flex w-full 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,
@@ -3133,7 +3129,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

@@ -1253,8 +1253,8 @@ function ComboboxBase({
               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,6 +1305,7 @@ function Combobox({
   items,
   selected,
   onChange,
+  className,
   placeholder,
   searchPlaceholder,
   label,
@@ -1324,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,
@@ -1347,6 +1348,7 @@ function MultiCombobox({
   items,
   selected,
   onChange,
+  className,
   placeholder,
   searchPlaceholder,
   label,
@@ -1377,7 +1379,7 @@ function MultiCombobox({
       {
         className: "flex items-center gap-1 rounded-md border p-1",
         children: [
-          /* @__PURE__ */ jsx18("span", { className: "truncate whitespace-break-spaces text-xs", children: item.label }),
+          /* @__PURE__ */ jsx18("span", { className: "whitespace-break-spaces text-xs", children: item.label }),
           /* @__PURE__ */ jsx18(
             "span",
             {
@@ -1387,12 +1389,6 @@ function MultiCombobox({
                 e.stopPropagation();
                 handleSelection(item.value);
               },
-              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 })
             }
@@ -1401,9 +1397,9 @@ function MultiCombobox({
       },
       item.value
     ));
-    return /* @__PURE__ */ jsx18("div", { className: "flex flex-wrap gap-2", children: items2 });
+    return /* @__PURE__ */ jsx18("div", { className: "flex w-full 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,
@@ -2944,7 +2940,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.11",
+  "version": "1.3.13",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",