@socprime/react-ui 0.0.12 → 0.0.13

package/index.d.ts

@@ -1,6 +1,6 @@
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import * as React$1 from 'react';
-import React__default, { ComponentProps, FC } from 'react';
+import React__default, { ComponentProps, ReactNode, FC } from 'react';
 import { LucideIcon, LucideProps } from 'lucide-react';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
@@ -409,7 +409,7 @@ interface MultiSelectOption {
 interface MultiSelectProps {
     loading?: boolean;
     options: MultiSelectOption[];
-    value: string[];
+    value?: string[];
     placeholder?: string;
     className?: string;
     disabled?: boolean;
@@ -427,6 +427,39 @@ interface MultiSelectProps {
 }
 declare function MultiSelect({ loading, options, value, placeholder, className, disabled, maxDisplay, maxSelection, searchable, size, dropdownClassName, align, variant, badgeClassNames, id, name, onChange, }: MultiSelectProps): React$1.JSX.Element;
 
+interface BaseMultiSelectOptionState {
+    selected: boolean;
+    disabled: boolean;
+    toggle: () => void;
+}
+interface BaseMultiSelectValueHelpers {
+    remove: (value: string) => void;
+    clear: () => void;
+}
+interface BaseMultiSelectProps<T> {
+    options: T[];
+    value?: string[];
+    onChange: (value: string[]) => void;
+    getOptionValue: (option: T) => string;
+    isOptionDisabled?: (option: T) => boolean;
+    renderOption?: (option: T, state: BaseMultiSelectOptionState) => ReactNode;
+    renderValue?: (selectedOptions: T[], helpers: BaseMultiSelectValueHelpers) => ReactNode;
+    renderEmpty?: () => ReactNode;
+    placeholder?: ReactNode;
+    loading?: boolean;
+    disabled?: boolean;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    className?: string;
+    dropdownClassName?: string;
+    align?: 'start' | 'center' | 'end';
+    sideOffset?: number;
+    size?: 'sm' | 'default';
+    id?: string;
+    name?: string;
+}
+declare function BaseMultiSelect<T>({ options, value, onChange, getOptionValue, isOptionDisabled, renderOption, renderValue, renderEmpty, placeholder, loading, disabled, open, onOpenChange, className, dropdownClassName, align, sideOffset, size, id, name, }: BaseMultiSelectProps<T>): React$1.JSX.Element;
+
 interface PageHeaderProps {
     loading?: boolean;
     title?: string;
@@ -735,4 +768,4 @@ declare function TreeRow({ className, children, ...props }: ComponentProps<'div'
 type TreeGuideProps = ComponentProps<typeof TreeGuide>;
 type TreeRowProps = ComponentProps<typeof TreeRow>;
 
-export { Accordion, type AccordionChevronVariant, AccordionContent, type AccordionContentProps, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionSection, type AccordionSectionProps, AccordionTrigger, type AccordionTriggerProps, AnimatedDots, type AnimatedDotsProps, Aside, AsideHorizontal, type AsideHorizontalProps, type AsideProps, type AsideTab, Badge, type BadgeProps, Button, type ButtonProps, Checkbox, type CheckboxProps, ConditionalContent, type ConditionalContentProps, ConfirmDeleteDialog, type ConfirmDeleteDialogProps, ConfirmDeleteDialog as ConfirmDialog, DefaultDialog, type DefaultDialogProps, DeleteButtonConfirm, type DeleteButtonConfirmProps, Dialog, DialogClose, type DialogCloseProps, DialogContent, type DialogContentProps, DialogDescription, type DialogDescriptionProps, DialogFooter, type DialogFooterProps, DialogHeader, type DialogHeaderProps, DialogOverlay, type DialogOverlayProps, DialogPortal, type DialogPortalProps, type DialogProps, DialogTitle, type DialogTitleProps, DialogTrigger, type DialogTriggerProps, DropdownMenu, DropdownMenuCheckboxItem, type DropdownMenuCheckboxItemProps, DropdownMenuContent, type DropdownMenuContentProps, DropdownMenuGroup, type DropdownMenuGroupProps, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuLabel, type DropdownMenuLabelProps, DropdownMenuPortal, type DropdownMenuPortalProps, type DropdownMenuProps, DropdownMenuRadioGroup, type DropdownMenuRadioGroupProps, DropdownMenuRadioItem, type DropdownMenuRadioItemProps, DropdownMenuSeparator, type DropdownMenuSeparatorProps, DropdownMenuShortcut, type DropdownMenuShortcutProps, DropdownMenuSub, DropdownMenuSubContent, type DropdownMenuSubContentProps, type DropdownMenuSubProps, DropdownMenuSubTrigger, type DropdownMenuSubTriggerProps, DropdownMenuTrigger, type DropdownMenuTriggerProps, DropdownsCheckbox, type DropdownsCheckboxOption, type DropdownsCheckboxProps, DropdownsSelect, type DropdownsSelectOption, type DropdownsSelectProps, EmptyState, type EmptyStateProps, Field, FieldContent, type FieldContentProps, FieldDescription, type FieldDescriptionProps, FieldError, type FieldErrorProps, FieldGroup, type FieldGroupProps, FieldLabel, type FieldLabelProps, FieldLegend, type FieldLegendProps, type FieldProps, FieldSeparator, type FieldSeparatorProps, FieldSet, type FieldSetProps, FieldTitle, type FieldTitleProps, FolderTreeExpandTrigger, type FolderTreeExpandTriggerProps, GroupHeaderRow, type GroupHeaderRowProps, HelperText, type HelperTextProps, Input, InputNumber, type InputNumberProps, InputPassword, type InputPasswordProps, type InputProps, Label, LabelInfo, type LabelInfoProps, type LabelProps, MobileNav, type MobileNavItem, type MobileNavProps, MultiSelect, type MultiSelectOption, type MultiSelectProps, PageHeader, type PageHeaderProps, Pagination, PaginationContent, type PaginationContentProps, PaginationEllipsis, type PaginationEllipsisProps, PaginationItem, type PaginationItemProps, PaginationLink, type PaginationLinkProps, PaginationNext, type PaginationNextProps, PaginationPrevious, type PaginationPreviousProps, type PaginationProps, PaginationWrap, type PaginationWrapProps, Progress, type ProgressProps, RadioGroup, RadioGroupItem, type RadioGroupItemProps, type RadioGroupProps, ScrollArea, type ScrollAreaOrientation, type ScrollAreaProps, ScrollBar, SearchInput, SearchInputFields, type SearchInputFieldsProps, type SearchInputProps, Select, SelectContent, type SelectContentProps, SelectDefault, type SelectDefaultProps, SelectGroup, type SelectGroupProps, SelectItem, type SelectItemProps, SelectLabel, type SelectLabelProps, type SelectProps, SelectScrollDownButton, type SelectScrollDownButtonProps, SelectScrollUpButton, type SelectScrollUpButtonProps, SelectSeparator, type SelectSeparatorProps, SelectTrigger, type SelectTriggerProps, SelectValue, type SelectValueProps, Separator, type SeparatorProps, ServerGroupedTableBody, type ServerGroupedTableBodyProps, Skeleton, type SkeletonProps, SkeletonTable, type SkeletonTableProps, Slider, type SliderProps, SortableHeader, type SortableHeaderProps, Spinner, SpinnerCircle, type SpinnerCircleProps, SpinnerCustom, type SpinnerProps, SpinnerSquare, type SpinnerSquareProps, type SuggestionOption, Suggestions, type SuggestionsProps, Switch, type SwitchProps, type TabItem, Table, TableBody, type TableBodyProps, TableCaption, type TableCaptionProps, TableCell, type TableCellProps, TableFooter, type TableFooterProps, TableHead, type TableHeadProps, TableHeader, type TableHeaderProps, type TableProps, TableRow, type TableRowProps, TableWrap, type TableWrapProps, Tabs, type TabsProps, TextTruncate, type TextTruncateProps, Textarea, type TextareaProps, ThemeToggle, type ThemeToggleProps, Toaster, Tooltip, TooltipContent, type TooltipContentProps, TooltipParent, type TooltipParentProps, type TooltipProps, TooltipProvider, type TooltipProviderProps, TooltipTrigger, type TooltipTriggerProps, TreeGuide, type TreeGuideProps, TreeRow, type TreeRowProps, badgeVariants, buttonVariants };
+export { Accordion, type AccordionChevronVariant, AccordionContent, type AccordionContentProps, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionSection, type AccordionSectionProps, AccordionTrigger, type AccordionTriggerProps, AnimatedDots, type AnimatedDotsProps, Aside, AsideHorizontal, type AsideHorizontalProps, type AsideProps, type AsideTab, Badge, type BadgeProps, BaseMultiSelect, type BaseMultiSelectOptionState, type BaseMultiSelectProps, type BaseMultiSelectValueHelpers, Button, type ButtonProps, Checkbox, type CheckboxProps, ConditionalContent, type ConditionalContentProps, ConfirmDeleteDialog, type ConfirmDeleteDialogProps, ConfirmDeleteDialog as ConfirmDialog, DefaultDialog, type DefaultDialogProps, DeleteButtonConfirm, type DeleteButtonConfirmProps, Dialog, DialogClose, type DialogCloseProps, DialogContent, type DialogContentProps, DialogDescription, type DialogDescriptionProps, DialogFooter, type DialogFooterProps, DialogHeader, type DialogHeaderProps, DialogOverlay, type DialogOverlayProps, DialogPortal, type DialogPortalProps, type DialogProps, DialogTitle, type DialogTitleProps, DialogTrigger, type DialogTriggerProps, DropdownMenu, DropdownMenuCheckboxItem, type DropdownMenuCheckboxItemProps, DropdownMenuContent, type DropdownMenuContentProps, DropdownMenuGroup, type DropdownMenuGroupProps, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuLabel, type DropdownMenuLabelProps, DropdownMenuPortal, type DropdownMenuPortalProps, type DropdownMenuProps, DropdownMenuRadioGroup, type DropdownMenuRadioGroupProps, DropdownMenuRadioItem, type DropdownMenuRadioItemProps, DropdownMenuSeparator, type DropdownMenuSeparatorProps, DropdownMenuShortcut, type DropdownMenuShortcutProps, DropdownMenuSub, DropdownMenuSubContent, type DropdownMenuSubContentProps, type DropdownMenuSubProps, DropdownMenuSubTrigger, type DropdownMenuSubTriggerProps, DropdownMenuTrigger, type DropdownMenuTriggerProps, DropdownsCheckbox, type DropdownsCheckboxOption, type DropdownsCheckboxProps, DropdownsSelect, type DropdownsSelectOption, type DropdownsSelectProps, EmptyState, type EmptyStateProps, Field, FieldContent, type FieldContentProps, FieldDescription, type FieldDescriptionProps, FieldError, type FieldErrorProps, FieldGroup, type FieldGroupProps, FieldLabel, type FieldLabelProps, FieldLegend, type FieldLegendProps, type FieldProps, FieldSeparator, type FieldSeparatorProps, FieldSet, type FieldSetProps, FieldTitle, type FieldTitleProps, FolderTreeExpandTrigger, type FolderTreeExpandTriggerProps, GroupHeaderRow, type GroupHeaderRowProps, HelperText, type HelperTextProps, Input, InputNumber, type InputNumberProps, InputPassword, type InputPasswordProps, type InputProps, Label, LabelInfo, type LabelInfoProps, type LabelProps, MobileNav, type MobileNavItem, type MobileNavProps, MultiSelect, type MultiSelectOption, type MultiSelectProps, PageHeader, type PageHeaderProps, Pagination, PaginationContent, type PaginationContentProps, PaginationEllipsis, type PaginationEllipsisProps, PaginationItem, type PaginationItemProps, PaginationLink, type PaginationLinkProps, PaginationNext, type PaginationNextProps, PaginationPrevious, type PaginationPreviousProps, type PaginationProps, PaginationWrap, type PaginationWrapProps, Progress, type ProgressProps, RadioGroup, RadioGroupItem, type RadioGroupItemProps, type RadioGroupProps, ScrollArea, type ScrollAreaOrientation, type ScrollAreaProps, ScrollBar, SearchInput, SearchInputFields, type SearchInputFieldsProps, type SearchInputProps, Select, SelectContent, type SelectContentProps, SelectDefault, type SelectDefaultProps, SelectGroup, type SelectGroupProps, SelectItem, type SelectItemProps, SelectLabel, type SelectLabelProps, type SelectProps, SelectScrollDownButton, type SelectScrollDownButtonProps, SelectScrollUpButton, type SelectScrollUpButtonProps, SelectSeparator, type SelectSeparatorProps, SelectTrigger, type SelectTriggerProps, SelectValue, type SelectValueProps, Separator, type SeparatorProps, ServerGroupedTableBody, type ServerGroupedTableBodyProps, Skeleton, type SkeletonProps, SkeletonTable, type SkeletonTableProps, Slider, type SliderProps, SortableHeader, type SortableHeaderProps, Spinner, SpinnerCircle, type SpinnerCircleProps, SpinnerCustom, type SpinnerProps, SpinnerSquare, type SpinnerSquareProps, type SuggestionOption, Suggestions, type SuggestionsProps, Switch, type SwitchProps, type TabItem, Table, TableBody, type TableBodyProps, TableCaption, type TableCaptionProps, TableCell, type TableCellProps, TableFooter, type TableFooterProps, TableHead, type TableHeadProps, TableHeader, type TableHeaderProps, type TableProps, TableRow, type TableRowProps, TableWrap, type TableWrapProps, Tabs, type TabsProps, TextTruncate, type TextTruncateProps, Textarea, type TextareaProps, ThemeToggle, type ThemeToggleProps, Toaster, Tooltip, TooltipContent, type TooltipContentProps, TooltipParent, type TooltipParentProps, type TooltipProps, TooltipProvider, type TooltipProviderProps, TooltipTrigger, type TooltipTriggerProps, TreeGuide, type TreeGuideProps, TreeRow, type TreeRowProps, badgeVariants, buttonVariants };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@socprime/react-ui",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "description": "SOC Prime React UI component library and Storybook design system.",
   "license": "MIT",
   "engines": {

package/ui/MultiSelect/BaseMultiSelect.js

@@ -0,0 +1,147 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDownIcon, Loader2 } from "lucide-react";
+import { useState } from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { Checkbox } from "../Checkbox/Checkbox.js";
+import { ScrollArea } from "../ScrollArea/ScrollArea.js";
+import { cn } from "../../lib/cn.js";
+function BaseMultiSelect({
+  options,
+  value = [],
+  onChange,
+  getOptionValue,
+  isOptionDisabled,
+  renderOption,
+  renderValue,
+  renderEmpty,
+  placeholder = "Select...",
+  loading = false,
+  disabled = false,
+  open,
+  onOpenChange,
+  className,
+  dropdownClassName,
+  align = "start",
+  sideOffset = 4,
+  size = "default",
+  id,
+  name
+}) {
+  const [internalOpen, setInternalOpen] = useState(false);
+  const isOpen = open ?? internalOpen;
+  const handleOpenChange = (nextOpen) => {
+    setInternalOpen(nextOpen);
+    onOpenChange?.(nextOpen);
+  };
+  const toggle = (optionValue) => {
+    onChange(
+      value.includes(optionValue) ? value.filter((v) => v !== optionValue) : [...value, optionValue]
+    );
+  };
+  const helpers = {
+    remove: (optionValue) => onChange(value.filter((v) => v !== optionValue)),
+    clear: () => onChange([])
+  };
+  const selectedOptions = options.filter((option) => value.includes(getOptionValue(option)));
+  const renderOptionItem = (option) => {
+    const optionValue = getOptionValue(option);
+    const selected = value.includes(optionValue);
+    const optionDisabled = isOptionDisabled?.(option) ?? false;
+    const state = {
+      selected,
+      disabled: optionDisabled,
+      toggle: () => {
+        if (!optionDisabled) toggle(optionValue);
+      }
+    };
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "option",
+        "aria-selected": selected,
+        "aria-disabled": optionDisabled,
+        tabIndex: optionDisabled ? -1 : 0,
+        onClick: state.toggle,
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            state.toggle();
+          }
+        },
+        className: cn(
+          "flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-xs transition-colors outline-none",
+          "hover:bg-hover focus-visible:bg-hover focus-visible:text-default",
+          selected && "bg-hover",
+          optionDisabled && "cursor-not-allowed opacity-50"
+        ),
+        children: renderOption ? renderOption(option, state) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            Checkbox,
+            {
+              checked: selected,
+              disabled: optionDisabled,
+              tabIndex: -1,
+              className: "pointer-events-none"
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "flex-1", children: optionValue })
+        ] })
+      },
+      optionValue
+    );
+  };
+  return /* @__PURE__ */ jsxs(PopoverPrimitive.Root, { open: isOpen, onOpenChange: handleOpenChange, children: [
+    /* @__PURE__ */ jsx(PopoverPrimitive.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        id,
+        name,
+        disabled,
+        "data-size": size,
+        "data-state": isOpen ? "open" : "closed",
+        className: cn(
+          'border-border bg-secondary data-[placeholder]:text-gray-chateau [&_svg:not([class*="text-"])]:text-gray-chateau flex min-h-9 w-full items-center justify-between gap-2 rounded-md border px-3 py-1 text-xs font-normal transition-[color,box-shadow] outline-none',
+          "data-[size=sm]:min-h-8 data-[size=sm]:px-2",
+          "focus-visible:border-success focus-visible:ring-success/40 focus-visible:ring-[2px]",
+          "data-[state=open]:border-success data-[state=open]:ring-success/40 data-[state=open]:ring-[2px]",
+          "disabled:cursor-not-allowed disabled:opacity-50",
+          "[&_svg]:pointer-events-none [&_svg]:shrink-0",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "flex flex-1 flex-wrap items-center gap-1", children: selectedOptions.length === 0 ? /* @__PURE__ */ jsx("span", { className: "text-gray-chateau", children: placeholder }) : renderValue ? renderValue(selectedOptions, helpers) : /* @__PURE__ */ jsx("span", { children: selectedOptions.map(getOptionValue).join(", ") }) }),
+          loading ? /* @__PURE__ */ jsx(Loader2, { className: "text-gray-chateau size-4 animate-spin" }) : /* @__PURE__ */ jsx(ChevronDownIcon, { className: "ml-2 size-4 shrink-0 opacity-50" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+      PopoverPrimitive.Content,
+      {
+        align,
+        sideOffset,
+        className: cn(
+          "bg-secondary border-border text-foreground z-50 w-[var(--radix-popover-trigger-width)] rounded-md border shadow-md outline-none",
+          "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",
+          dropdownClassName
+        ),
+        children: /* @__PURE__ */ jsx(ScrollArea, { children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            role: "listbox",
+            "aria-multiselectable": "true",
+            className: "flex max-h-64 flex-col gap-2 p-3",
+            children: options.length === 0 ? renderEmpty?.() ?? /* @__PURE__ */ jsx("div", { className: "text-gray-chateau py-6 text-center text-xs", children: "Nothing found" }) : options.map(renderOptionItem)
+          }
+        ) })
+      }
+    ) })
+  ] });
+}
+export {
+  BaseMultiSelect
+};

package/ui/MultiSelect/MultiSelect.js

@@ -37,9 +37,22 @@ function MultiSelect({
     () => options.filter((option) => value.includes(option.value)),
     [options, value]
   );
-  const displayedBadges = selectedOptions.slice(0, maxDisplay);
-  const remainingCount = selectedOptions.length - maxDisplay;
+  const orphanValues = useMemo(
+    () => value.filter((v) => !options.some((option) => option.value === v)),
+    [options, value]
+  );
+  const allSelected = useMemo(
+    () => [...selectedOptions, ...orphanValues.map((v) => ({ label: v, value: v }))],
+    [selectedOptions, orphanValues]
+  );
+  const displayedBadges = allSelected.slice(0, maxDisplay);
+  const remainingCount = allSelected.length - maxDisplay;
+  const hiddenLabels = allSelected.slice(maxDisplay).map((option) => option.label).join(", ");
   const isMaxReached = maxSelection !== void 0 && value.length >= maxSelection;
+  const handleOpenChange = (nextOpen) => {
+    setOpen(nextOpen);
+    if (!nextOpen) setSearchQuery("");
+  };
   const handleToggle = (optionValue) => {
     const isSelected = value.includes(optionValue);
     if (isSelected) {
@@ -53,7 +66,7 @@ function MultiSelect({
     onChange(value.filter((v) => v !== optionValue));
   };
   const renderSelectedBadges = () => {
-    if (selectedOptions.length === 0) {
+    if (allSelected.length === 0) {
       return /* @__PURE__ */ jsx("span", { className: "text-gray-chateau", children: placeholder });
     }
     return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -67,7 +80,7 @@ function MultiSelect({
         },
         option.value
       )),
-      remainingCount > 0 && /* @__PURE__ */ jsxs(Badge, { variant: "outline", children: [
+      remainingCount > 0 && /* @__PURE__ */ jsxs(Badge, { variant: "outline", title: hiddenLabels, children: [
         "+",
         remainingCount
       ] })
@@ -76,12 +89,26 @@ function MultiSelect({
   const renderOptionItem = (option) => {
     const isSelected = value.includes(option.value);
     const isDisabled = option.disabled || !isSelected && isMaxReached;
+    const handleSelect = () => {
+      if (!isDisabled) handleToggle(option.value);
+    };
     return /* @__PURE__ */ jsxs(
-      "label",
+      "div",
       {
+        role: "option",
+        "aria-selected": isSelected,
+        "aria-disabled": isDisabled,
+        tabIndex: isDisabled ? -1 : 0,
+        onClick: handleSelect,
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            handleSelect();
+          }
+        },
         className: cn(
-          "flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-xs transition-colors",
-          "hover:bg-hover focus:bg-hover focus:text-default",
+          "flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-xs transition-colors outline-none",
+          "hover:bg-hover focus-visible:bg-hover focus-visible:text-default",
           isSelected && "bg-hover",
           isDisabled && "cursor-not-allowed opacity-50"
         ),
@@ -90,8 +117,9 @@ function MultiSelect({
             Checkbox,
             {
               checked: isSelected,
-              onCheckedChange: () => handleToggle(option.value),
-              disabled: isDisabled
+              disabled: isDisabled,
+              tabIndex: -1,
+              className: "pointer-events-none"
             }
           ),
           /* @__PURE__ */ jsxs("span", { className: "flex flex-1 items-center gap-2", children: [
@@ -103,7 +131,7 @@ function MultiSelect({
       option.value
     );
   };
-  return /* @__PURE__ */ jsxs(PopoverPrimitive.Root, { open, onOpenChange: setOpen, children: [
+  return /* @__PURE__ */ jsxs(PopoverPrimitive.Root, { open, onOpenChange: handleOpenChange, children: [
     /* @__PURE__ */ jsx(PopoverPrimitive.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
       "button",
       {
@@ -115,6 +143,7 @@ function MultiSelect({
         "data-state": open ? "open" : "closed",
         className: cn(
           'border-border bg-secondary data-[placeholder]:text-gray-chateau [&_svg:not([class*="text-"])]:text-gray-chateau flex min-h-9 w-full items-center justify-between gap-2 rounded-md border px-3 py-1 text-xs font-normal transition-[color,box-shadow] outline-none',
+          "data-[size=sm]:min-h-8 data-[size=sm]:px-2",
           "focus-visible:border-success focus-visible:ring-success/40 focus-visible:ring-[2px]",
           "data-[state=open]:border-success data-[state=open]:ring-success/40 data-[state=open]:ring-[2px]",
           "disabled:cursor-not-allowed disabled:opacity-50",
@@ -133,7 +162,7 @@ function MultiSelect({
         align,
         sideOffset: 4,
         className: cn(
-          "bg-secondary border-border text-foreground z-50 rounded-md border shadow-md outline-none",
+          "bg-secondary border-border text-foreground z-50 w-[var(--radix-popover-trigger-width)] rounded-md border shadow-md outline-none",
           "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",
@@ -152,7 +181,31 @@ function MultiSelect({
               placeholder: "Search..."
             }
           ),
-          /* @__PURE__ */ jsx(ScrollArea, { children: /* @__PURE__ */ jsx("div", { className: "flex max-h-64 flex-col gap-2", children: filteredOptions.length === 0 ? /* @__PURE__ */ jsx("div", { className: "text-gray-chateau py-6 text-center text-xs", children: "Nothing found" }) : filteredOptions.map(renderOptionItem) }) })
+          value.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ jsxs("span", { className: "text-2xs text-gray-chateau", children: [
+              value.length,
+              " selected",
+              maxSelection !== void 0 && ` / ${maxSelection}`
+            ] }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => onChange([]),
+                className: "text-2xs text-gray-chateau hover:text-default cursor-pointer transition-colors",
+                children: "Clear all"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(ScrollArea, { children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              role: "listbox",
+              "aria-multiselectable": "true",
+              className: "flex max-h-64 flex-col gap-2",
+              children: filteredOptions.length === 0 ? /* @__PURE__ */ jsx("div", { className: "text-gray-chateau py-6 text-center text-xs", children: "Nothing found" }) : filteredOptions.map(renderOptionItem)
+            }
+          ) })
         ] })
       }
     ) })

package/ui/MultiSelect/index.js

@@ -1,4 +1,6 @@
 import { MultiSelect } from "./MultiSelect.js";
+import { BaseMultiSelect } from "./BaseMultiSelect.js";
 export {
+  BaseMultiSelect,
   MultiSelect
 };