periplo-ui 3.49.0 → 3.51.0

package/dist/components/Combobox/Combobox.js

@@ -52,62 +52,81 @@ const Combobox = (props) => {
   } = useCombobox(props);
   return /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col gap-1", children: [
     /* @__PURE__ */ jsxs(PopoverRoot, { open, onOpenChange: setOpen, modal, children: [
-      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
-        Button,
+      /* @__PURE__ */ jsx(
+        PopoverTrigger,
         {
-          id,
-          type: "button",
-          disabled,
-          variant: "text",
-          className: cn(
-            buttonVariants({ variant: "input", size: "lg" }),
-            "relative flex justify-between rounded-lg",
-            multiple && "renderLabel" in props && props.renderLabel ? "h-auto min-h-12" : "h-12",
-            open && "border-neutral-950",
-            disabled && "cursor-not-allowed",
-            error && "border-error-400 focus-visible:border-error-700",
-            className
-          ),
-          "aria-expanded": open,
-          "aria-haspopup": "listbox",
-          onMouseEnter: () => setIsHovered(true),
-          onMouseLeave: () => setIsHovered(false),
-          children: [
-            /* @__PURE__ */ jsx(
-              "span",
-              {
-                className: cn(
-                  "block",
-                  !hasValue && "text-neutral-300",
-                  !(multiple && "renderLabel" in props && props.renderLabel) && "truncate"
+          asChild: true,
+          onPointerDown: (event) => {
+            event.stopPropagation();
+            if (open) {
+              setOpen(false);
+              event.preventDefault();
+            } else {
+              setOpen(true);
+            }
+          },
+          onClick: (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+          },
+          children: /* @__PURE__ */ jsxs(
+            Button,
+            {
+              id,
+              type: "button",
+              disabled,
+              variant: "text",
+              className: cn(
+                buttonVariants({ variant: "input", size: "lg" }),
+                "relative flex justify-between rounded-lg",
+                multiple && "renderLabel" in props && props.renderLabel ? "h-auto min-h-12" : "h-12",
+                open && "border-neutral-950",
+                disabled && "cursor-not-allowed",
+                error && "border-error-400 focus-visible:border-error-700",
+                className
+              ),
+              "aria-expanded": open,
+              "aria-haspopup": "listbox",
+              onMouseEnter: () => setIsHovered(true),
+              onMouseLeave: () => setIsHovered(false),
+              children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: cn(
+                      "block",
+                      !hasValue && "text-neutral-300",
+                      !(multiple && "renderLabel" in props && props.renderLabel) && "truncate"
+                    ),
+                    children: displayValue
+                  }
                 ),
-                children: displayValue
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              CaretDown,
-              {
-                className: cn(
-                  "h-4 w-4 shrink-0 opacity-50 transition-opacity duration-150",
-                  showClearButton ? "opacity-0" : "opacity-50"
-                )
-              }
-            ),
-            onClear && hasValue && /* @__PURE__ */ jsx(
-              X,
-              {
-                "data-testid": "clear-button",
-                className: cn(
-                  "absolute right-4 z-10 h-4 w-4 shrink-0 cursor-pointer transition-opacity duration-150",
-                  showClearButton ? "opacity-100 hover:opacity-70" : "opacity-0"
+                /* @__PURE__ */ jsx(
+                  CaretDown,
+                  {
+                    className: cn(
+                      "h-4 w-4 shrink-0 opacity-50 transition-opacity duration-150",
+                      showClearButton ? "opacity-0" : "opacity-50"
+                    )
+                  }
                 ),
-                onClick: handleClear
-              }
-            )
-          ]
+                onClear && hasValue && /* @__PURE__ */ jsx(
+                  X,
+                  {
+                    "data-testid": "clear-button",
+                    className: cn(
+                      "absolute right-4 z-10 h-4 w-4 shrink-0 cursor-pointer transition-opacity duration-150",
+                      showClearButton ? "opacity-100 hover:opacity-70" : "opacity-0"
+                    ),
+                    onClick: handleClear
+                  }
+                )
+              ]
+            }
+          )
         }
-      ) }),
-      /* @__PURE__ */ jsx(PopoverContent, { className: "p-0", container, children: /* @__PURE__ */ jsxs(Command, { shouldFilter: false, children: [
+      ),
+      /* @__PURE__ */ jsx(PopoverContent, { className: "p-0", container, side: "bottom", avoidCollisions: false, children: /* @__PURE__ */ jsxs(Command, { shouldFilter: false, children: [
         /* @__PURE__ */ jsx(
           CommandInput,
           {

package/dist/components/Combobox/Combobox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Combobox.js","sources":["../../../src/components/Combobox/Combobox.tsx"],"sourcesContent":["import { CaretDown } from '@phosphor-icons/react/dist/ssr/CaretDown'\nimport { X } from '@phosphor-icons/react/dist/ssr/X'\n\nimport { cn } from '../../lib/utils'\nimport { Button, buttonVariants } from '../Button'\nimport { Command, CommandInput } from '../Command'\nimport { PopoverContent, PopoverRoot, PopoverTrigger } from '../Popover'\n\nimport { StaticComboboxList } from './StaticComboboxList'\nimport { useCombobox } from './useCombobox'\nimport { VirtualizedComboboxList } from './VirtualizedComboboxList'\n\ntype ComboboxBaseProps<T> = {\n  /** Unique identifier for the combobox */\n  id?: string\n  /** Array of options to display in the combobox */\n  options: Array<T>\n  /** Function to get the unique identifier from an option. */\n  getOptionValue: (option: T) => string\n  /** Function to get the display text from an option. */\n  getOptionLabel: (option: T) => string\n  /** Custom render function for options. If not provided, defaults to showing a checkmark and label */\n  renderOption?: (option: T, isSelected: boolean) => React.ReactNode\n  /** Placeholder text shown when no option is selected */\n  placeholder?: string\n  /** Placeholder text for the search input field */\n  searchPlaceholder?: string\n  /** Message shown when no options match the search query */\n  emptyMessage?: string\n  /** Additional CSS classes to apply to the combobox trigger */\n  className?: string\n  /** Whether the combobox is disabled */\n  disabled?: boolean\n  /** Maximum height of the options list. Can be any valid CSS height value */\n  maxHeight?: string | number\n  /** Whether to close the dropdown when an option is selected. Defaults to `true` for single select and `false` for multi-select. */\n  closeOnSelect?: boolean\n  /** Whether the combobox is in a loading state */\n  loading?: boolean\n  /** Message to show when in loading state */\n  loadingPlaceholder?: string\n  /** Whether the combobox has an error */\n  error?: boolean | string\n  /** Custom function to filter options based on search term */\n  filterOptions?: (options: Array<T>, searchTerm: string) => Array<T>\n  /** Callback function executed when the clear button is clicked. When provided, an X button will appear on hover to clear the selection. */\n  onClear?: boolean | (() => void)\n  /** Whether the selection can be cleared */\n  clearable?: boolean\n  /** Whether the combobox is inside a modal */\n  modal?: boolean\n  /** Placeholder text for the selected multiple options */\n  selectedMultiplePlaceholder?: string\n  /** Placeholder text for the multiple options */\n  multipleOptionsPlaceholder?: string\n  /** Special options that appear at the top with their own title. When selected, the combobox switches to single-select mode. */\n  specialOptions?: Array<T>\n  /** Title for the special options group */\n  specialOptionsTitle?: string\n  /** Container element to position the combobox relative to. */\n  container?: HTMLElement\n}\n\nexport type ComboboxSingleProps<T> = ComboboxBaseProps<T> & {\n  multiple?: false\n  value?: string\n  onChange: (value: string) => void\n  /** Custom render function for the selected value display. */\n  renderLabel?: (selectedOption: T) => React.ReactNode\n  /**\n   * Async pagination function.\n   * Note: Multiple selection is not supported with virtualization.\n   */\n  fetchPage?: (params: {\n    page: number\n    search?: string\n  }) => Promise<{ items: Array<T>; hasNextPage: boolean; nextPage: number }>\n}\n\nexport type ComboboxMultipleProps<T> = ComboboxBaseProps<T> & {\n  multiple: true\n  value?: Array<string>\n  onChange: (value: Array<string>) => void\n  /** Custom render function for the selected value(s) display. */\n  renderLabel?: (selectedOptions: Array<T>, onRemove: (value: string) => void) => React.ReactNode\n  /** fetchPage is not allowed with multiple selection */\n  fetchPage?: never\n}\n\nexport type ComboboxProps<T> = ComboboxSingleProps<T> | ComboboxMultipleProps<T>\n\n/**\n * A searchable combobox component with support for custom rendering, keyboard navigation, and search filtering.\n *\n * @example Basic usage\n * ```tsx\n * interface User {\n *   id: string\n *   name: string\n *   email: string\n * }\n *\n * <Combobox<User>\n *   options={users}\n *   value={selectedUserId}\n *   onChange={setSelectedUserId}\n *   getOptionValue={(user) => user.id}\n *   getOptionLabel={(user) => user.name}\n * />\n * ```\n *\n * @example Custom filtering\n * ```tsx\n * <Combobox<User>\n *   options={users}\n *   value={selectedUserId}\n *   onChange={setSelectedUserId}\n *   getOptionValue={(user) => user.id}\n *   getOptionLabel={(user) => user.name}\n *   filterOptions={(options, searchTerm) =>\n *     options.filter(user =>\n *       user.name.toLowerCase().includes(searchTerm.toLowerCase()) ||\n *       user.email.toLowerCase().includes(searchTerm.toLowerCase())\n *     )\n *   }\n * />\n * ```\n *\n * @example Virtualized infinite scrolling with pagination\n * ```tsx\n * <Combobox<User>\n *   options={[]} // Initial options can be empty\n *   value={selectedUserId}\n *   onChange={setSelectedUserId}\n *   getOptionValue={(user) => user.id}\n *   getOptionLabel={(user) => user.name}\n *   fetchPage={async ({ page, search }) => {\n *     const response = await api.getUsers({ page, search })\n *     return {\n *       items: response.users,\n *       hasNextPage: response.page < response.totalPages,\n *       nextPage: page + 1\n *     }\n *   }}\n * />\n * ```\n */\nexport const Combobox = <T extends object>(props: ComboboxProps<T>) => {\n  const {\n    id,\n    options,\n    getOptionValue,\n    getOptionLabel,\n    searchPlaceholder = 'Search...',\n    emptyMessage = 'No results found.',\n    className = 'w-60',\n    disabled = false,\n    maxHeight = '300px',\n    renderOption,\n    loading = false,\n    loadingPlaceholder = 'Cargando...',\n    error = false,\n    multiple,\n    onClear,\n    modal = false,\n    selectedMultiplePlaceholder = 'Selected',\n    multipleOptionsPlaceholder = 'Options',\n    specialOptions,\n    specialOptionsTitle,\n    container,\n  } = props\n\n  const {\n    open,\n    setOpen,\n    searchTerm,\n    setSearchTerm,\n    setIsHovered,\n    hasNextPage,\n    loadingMore,\n    isVirtualized,\n    filteredOptions,\n    displayValue,\n    hasValue,\n    showClearButton,\n    handleSelect,\n    handleClear,\n    loadNextPage,\n  } = useCombobox(props)\n\n  return (\n    <div className=\"flex w-full flex-col gap-1\">\n      <PopoverRoot open={open} onOpenChange={setOpen} modal={modal}>\n        <PopoverTrigger asChild>\n          <Button\n            id={id}\n            type=\"button\"\n            disabled={disabled}\n            variant=\"text\"\n            className={cn(\n              buttonVariants({ variant: 'input', size: 'lg' }),\n              'relative flex justify-between rounded-lg',\n              multiple && 'renderLabel' in props && props.renderLabel ? 'h-auto min-h-12' : 'h-12',\n              open && 'border-neutral-950',\n              disabled && 'cursor-not-allowed',\n              error && 'border-error-400 focus-visible:border-error-700',\n              className,\n            )}\n            aria-expanded={open}\n            aria-haspopup=\"listbox\"\n            onMouseEnter={() => setIsHovered(true)}\n            onMouseLeave={() => setIsHovered(false)}\n          >\n            <span\n              className={cn(\n                'block',\n                !hasValue && 'text-neutral-300',\n                !(multiple && 'renderLabel' in props && props.renderLabel) && 'truncate',\n              )}\n            >\n              {displayValue}\n            </span>\n            <CaretDown\n              className={cn(\n                'h-4 w-4 shrink-0 opacity-50 transition-opacity duration-150',\n                showClearButton ? 'opacity-0' : 'opacity-50',\n              )}\n            />\n            {onClear && hasValue && (\n              <X\n                data-testid=\"clear-button\"\n                className={cn(\n                  'absolute right-4 z-10 h-4 w-4 shrink-0 cursor-pointer transition-opacity duration-150',\n                  showClearButton ? 'opacity-100 hover:opacity-70' : 'opacity-0',\n                )}\n                onClick={handleClear}\n              />\n            )}\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent className=\"p-0\" container={container}>\n          <Command shouldFilter={false}>\n            <CommandInput\n              placeholder={searchPlaceholder}\n              disabled={loading}\n              value={searchTerm}\n              onValueChange={setSearchTerm}\n            />\n            {isVirtualized ? (\n              <VirtualizedComboboxList\n                localOptions={filteredOptions}\n                loading={loading}\n                loadingPlaceholder={loadingPlaceholder}\n                emptyMessage={emptyMessage}\n                value={props.value as string}\n                getOptionValue={getOptionValue}\n                getOptionLabel={getOptionLabel}\n                handleSelect={handleSelect}\n                renderOption={renderOption}\n                maxHeight={maxHeight}\n                hasNextPage={hasNextPage}\n                loadingMore={loadingMore}\n                onLoadMore={loadNextPage}\n              />\n            ) : (\n              <StaticComboboxList\n                filteredOptions={filteredOptions}\n                loading={loading}\n                loadingPlaceholder={loadingPlaceholder}\n                emptyMessage={emptyMessage}\n                multiple={!!multiple}\n                value={props.value}\n                getOptionValue={getOptionValue}\n                getOptionLabel={getOptionLabel}\n                handleSelect={handleSelect}\n                renderOption={renderOption}\n                maxHeight={maxHeight}\n                selectedMultiplePlaceholder={selectedMultiplePlaceholder}\n                multipleOptionsPlaceholder={multipleOptionsPlaceholder}\n                options={options}\n                specialOptions={specialOptions}\n                specialOptionsTitle={specialOptionsTitle}\n              />\n            )}\n          </Command>\n        </PopoverContent>\n      </PopoverRoot>\n      {typeof error === 'string' && <span className=\"text-error-500 text-sm\">{error}</span>}\n    </div>\n  )\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Combobox.js","sources":["../../../src/components/Combobox/Combobox.tsx"],"sourcesContent":["import { CaretDown } from '@phosphor-icons/react/dist/ssr/CaretDown'\nimport { X } from '@phosphor-icons/react/dist/ssr/X'\n\nimport { cn } from '../../lib/utils'\nimport { Button, buttonVariants } from '../Button'\nimport { Command, CommandInput } from '../Command'\nimport { PopoverContent, PopoverRoot, PopoverTrigger } from '../Popover'\n\nimport { StaticComboboxList } from './StaticComboboxList'\nimport { useCombobox } from './useCombobox'\nimport { VirtualizedComboboxList } from './VirtualizedComboboxList'\n\ntype ComboboxBaseProps<T> = {\n  /** Unique identifier for the combobox */\n  id?: string\n  /** Array of options to display in the combobox */\n  options: Array<T>\n  /** Function to get the unique identifier from an option. */\n  getOptionValue: (option: T) => string\n  /** Function to get the display text from an option. */\n  getOptionLabel: (option: T) => string\n  /** Custom render function for options. If not provided, defaults to showing a checkmark and label */\n  renderOption?: (option: T, isSelected: boolean) => React.ReactNode\n  /** Placeholder text shown when no option is selected */\n  placeholder?: string\n  /** Placeholder text for the search input field */\n  searchPlaceholder?: string\n  /** Message shown when no options match the search query */\n  emptyMessage?: string\n  /** Additional CSS classes to apply to the combobox trigger */\n  className?: string\n  /** Whether the combobox is disabled */\n  disabled?: boolean\n  /** Maximum height of the options list. Can be any valid CSS height value */\n  maxHeight?: string | number\n  /** Whether to close the dropdown when an option is selected. Defaults to `true` for single select and `false` for multi-select. */\n  closeOnSelect?: boolean\n  /** Whether the combobox is in a loading state */\n  loading?: boolean\n  /** Message to show when in loading state */\n  loadingPlaceholder?: string\n  /** Whether the combobox has an error */\n  error?: boolean | string\n  /** Custom function to filter options based on search term */\n  filterOptions?: (options: Array<T>, searchTerm: string) => Array<T>\n  /** Callback function executed when the clear button is clicked. When provided, an X button will appear on hover to clear the selection. */\n  onClear?: boolean | (() => void)\n  /** Whether the selection can be cleared */\n  clearable?: boolean\n  /** Whether the combobox is inside a modal */\n  modal?: boolean\n  /** Placeholder text for the selected multiple options */\n  selectedMultiplePlaceholder?: string\n  /** Placeholder text for the multiple options */\n  multipleOptionsPlaceholder?: string\n  /** Special options that appear at the top with their own title. When selected, the combobox switches to single-select mode. */\n  specialOptions?: Array<T>\n  /** Title for the special options group */\n  specialOptionsTitle?: string\n  /** Container element to position the combobox relative to. */\n  container?: HTMLElement\n}\n\nexport type ComboboxSingleProps<T> = ComboboxBaseProps<T> & {\n  multiple?: false\n  value?: string\n  onChange: (value: string) => void\n  /** Custom render function for the selected value display. */\n  renderLabel?: (selectedOption: T) => React.ReactNode\n  /**\n   * Async pagination function.\n   * Note: Multiple selection is not supported with virtualization.\n   */\n  fetchPage?: (params: {\n    page: number\n    search?: string\n  }) => Promise<{ items: Array<T>; hasNextPage: boolean; nextPage: number }>\n}\n\nexport type ComboboxMultipleProps<T> = ComboboxBaseProps<T> & {\n  multiple: true\n  value?: Array<string>\n  onChange: (value: Array<string>) => void\n  /** Custom render function for the selected value(s) display. */\n  renderLabel?: (selectedOptions: Array<T>, onRemove: (value: string) => void) => React.ReactNode\n  /** fetchPage is not allowed with multiple selection */\n  fetchPage?: never\n}\n\nexport type ComboboxProps<T> = ComboboxSingleProps<T> | ComboboxMultipleProps<T>\n\n/**\n * A searchable combobox component with support for custom rendering, keyboard navigation, and search filtering.\n *\n * @example Basic usage\n * ```tsx\n * interface User {\n *   id: string\n *   name: string\n *   email: string\n * }\n *\n * <Combobox<User>\n *   options={users}\n *   value={selectedUserId}\n *   onChange={setSelectedUserId}\n *   getOptionValue={(user) => user.id}\n *   getOptionLabel={(user) => user.name}\n * />\n * ```\n *\n * @example Custom filtering\n * ```tsx\n * <Combobox<User>\n *   options={users}\n *   value={selectedUserId}\n *   onChange={setSelectedUserId}\n *   getOptionValue={(user) => user.id}\n *   getOptionLabel={(user) => user.name}\n *   filterOptions={(options, searchTerm) =>\n *     options.filter(user =>\n *       user.name.toLowerCase().includes(searchTerm.toLowerCase()) ||\n *       user.email.toLowerCase().includes(searchTerm.toLowerCase())\n *     )\n *   }\n * />\n * ```\n *\n * @example Virtualized infinite scrolling with pagination\n * ```tsx\n * <Combobox<User>\n *   options={[]} // Initial options can be empty\n *   value={selectedUserId}\n *   onChange={setSelectedUserId}\n *   getOptionValue={(user) => user.id}\n *   getOptionLabel={(user) => user.name}\n *   fetchPage={async ({ page, search }) => {\n *     const response = await api.getUsers({ page, search })\n *     return {\n *       items: response.users,\n *       hasNextPage: response.page < response.totalPages,\n *       nextPage: page + 1\n *     }\n *   }}\n * />\n * ```\n */\nexport const Combobox = <T extends object>(props: ComboboxProps<T>) => {\n  const {\n    id,\n    options,\n    getOptionValue,\n    getOptionLabel,\n    searchPlaceholder = 'Search...',\n    emptyMessage = 'No results found.',\n    className = 'w-60',\n    disabled = false,\n    maxHeight = '300px',\n    renderOption,\n    loading = false,\n    loadingPlaceholder = 'Cargando...',\n    error = false,\n    multiple,\n    onClear,\n    modal = false,\n    selectedMultiplePlaceholder = 'Selected',\n    multipleOptionsPlaceholder = 'Options',\n    specialOptions,\n    specialOptionsTitle,\n    container,\n  } = props\n\n  const {\n    open,\n    setOpen,\n    searchTerm,\n    setSearchTerm,\n    setIsHovered,\n    hasNextPage,\n    loadingMore,\n    isVirtualized,\n    filteredOptions,\n    displayValue,\n    hasValue,\n    showClearButton,\n    handleSelect,\n    handleClear,\n    loadNextPage,\n  } = useCombobox(props)\n\n  return (\n    <div className=\"flex w-full flex-col gap-1\">\n      <PopoverRoot open={open} onOpenChange={setOpen} modal={modal}>\n        <PopoverTrigger\n          asChild\n          onPointerDown={(event) => {\n            event.stopPropagation()\n            if (open) {\n              setOpen(false)\n              event.preventDefault()\n            } else {\n              setOpen(true)\n            }\n          }}\n          onClick={(event) => {\n            event.preventDefault()\n            event.stopPropagation()\n          }}\n        >\n          <Button\n            id={id}\n            type=\"button\"\n            disabled={disabled}\n            variant=\"text\"\n            className={cn(\n              buttonVariants({ variant: 'input', size: 'lg' }),\n              'relative flex justify-between rounded-lg',\n              multiple && 'renderLabel' in props && props.renderLabel ? 'h-auto min-h-12' : 'h-12',\n              open && 'border-neutral-950',\n              disabled && 'cursor-not-allowed',\n              error && 'border-error-400 focus-visible:border-error-700',\n              className,\n            )}\n            aria-expanded={open}\n            aria-haspopup=\"listbox\"\n            onMouseEnter={() => setIsHovered(true)}\n            onMouseLeave={() => setIsHovered(false)}\n          >\n            <span\n              className={cn(\n                'block',\n                !hasValue && 'text-neutral-300',\n                !(multiple && 'renderLabel' in props && props.renderLabel) && 'truncate',\n              )}\n            >\n              {displayValue}\n            </span>\n            <CaretDown\n              className={cn(\n                'h-4 w-4 shrink-0 opacity-50 transition-opacity duration-150',\n                showClearButton ? 'opacity-0' : 'opacity-50',\n              )}\n            />\n            {onClear && hasValue && (\n              <X\n                data-testid=\"clear-button\"\n                className={cn(\n                  'absolute right-4 z-10 h-4 w-4 shrink-0 cursor-pointer transition-opacity duration-150',\n                  showClearButton ? 'opacity-100 hover:opacity-70' : 'opacity-0',\n                )}\n                onClick={handleClear}\n              />\n            )}\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent className=\"p-0\" container={container} side=\"bottom\" avoidCollisions={false}>\n          <Command shouldFilter={false}>\n            <CommandInput\n              placeholder={searchPlaceholder}\n              disabled={loading}\n              value={searchTerm}\n              onValueChange={setSearchTerm}\n            />\n            {isVirtualized ? (\n              <VirtualizedComboboxList\n                localOptions={filteredOptions}\n                loading={loading}\n                loadingPlaceholder={loadingPlaceholder}\n                emptyMessage={emptyMessage}\n                value={props.value as string}\n                getOptionValue={getOptionValue}\n                getOptionLabel={getOptionLabel}\n                handleSelect={handleSelect}\n                renderOption={renderOption}\n                maxHeight={maxHeight}\n                hasNextPage={hasNextPage}\n                loadingMore={loadingMore}\n                onLoadMore={loadNextPage}\n              />\n            ) : (\n              <StaticComboboxList\n                filteredOptions={filteredOptions}\n                loading={loading}\n                loadingPlaceholder={loadingPlaceholder}\n                emptyMessage={emptyMessage}\n                multiple={!!multiple}\n                value={props.value}\n                getOptionValue={getOptionValue}\n                getOptionLabel={getOptionLabel}\n                handleSelect={handleSelect}\n                renderOption={renderOption}\n                maxHeight={maxHeight}\n                selectedMultiplePlaceholder={selectedMultiplePlaceholder}\n                multipleOptionsPlaceholder={multipleOptionsPlaceholder}\n                options={options}\n                specialOptions={specialOptions}\n                specialOptionsTitle={specialOptionsTitle}\n              />\n            )}\n          </Command>\n        </PopoverContent>\n      </PopoverRoot>\n      {typeof error === 'string' && <span className=\"text-error-500 text-sm\">{error}</span>}\n    </div>\n  )\n}\n"],"names":[],"mappings":"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"}

package/dist/components/DatePicker/DatePicker.js

@@ -205,28 +205,47 @@ function DatePicker({
   const hasValue = variant === "single" ? singleDate : dateRange;
   const showClearButton = onClear && hasValue && isHovered;
   return /* @__PURE__ */ jsxs(PopoverRoot, { open: isOpen, onOpenChange: setIsOpen, modal, children: [
-    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
-      Button,
+    /* @__PURE__ */ jsx(
+      PopoverTrigger,
       {
-        id: rest.id,
-        variant: "ghost",
-        className: cn(
-          "relative flex w-fit items-center justify-start text-left font-normal hover:transition-opacity",
-          !hasValue && "text-muted-foreground",
-          buttonVariants({ variant: "input", size: "lg" }),
-          buttonClassName
-        ),
-        disabled: typeof rest.disabled === "boolean" ? rest.disabled : false,
-        onMouseEnter: () => !isMobile && setIsHovered(true),
-        onMouseLeave: () => !isMobile && setIsHovered(false),
-        onMouseDown: () => !isMobile && setIsClicked(true),
-        children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-2", children: [
-          /* @__PURE__ */ jsx(CalendarBlank, { className: cn("h-4 w-4 shrink-0 transition-opacity duration-150") }),
-          /* @__PURE__ */ jsx("span", { className: "w-full text-center", children: formatForDisplay() }),
-          onClear && hasValue && renderClearIcon(showClearButton ?? false)
-        ] })
+        asChild: true,
+        onPointerDown: (event) => {
+          event.stopPropagation();
+          if (isOpen) {
+            setIsOpen(false);
+            event.preventDefault();
+          } else {
+            setIsOpen(true);
+          }
+        },
+        onClick: (event) => {
+          event.preventDefault();
+          event.stopPropagation();
+        },
+        children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            id: rest.id,
+            variant: "ghost",
+            className: cn(
+              "relative flex w-fit items-center justify-start text-left font-normal hover:transition-opacity",
+              !hasValue && "text-muted-foreground",
+              buttonVariants({ variant: "input", size: "lg" }),
+              buttonClassName
+            ),
+            disabled: typeof rest.disabled === "boolean" ? rest.disabled : false,
+            onMouseEnter: () => !isMobile && setIsHovered(true),
+            onMouseLeave: () => !isMobile && setIsHovered(false),
+            onMouseDown: () => !isMobile && setIsClicked(true),
+            children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-2", children: [
+              /* @__PURE__ */ jsx(CalendarBlank, { className: cn("h-4 w-4 shrink-0 transition-opacity duration-150") }),
+              /* @__PURE__ */ jsx("span", { className: "w-full text-center", children: formatForDisplay() }),
+              onClear && hasValue && renderClearIcon(showClearButton ?? false)
+            ] })
+          }
+        )
       }
-    ) }),
+    ),
     /* @__PURE__ */ jsx(PopoverContent, { container, className: "w-auto p-0", align: "center", ref: calendarRef, children: /* @__PURE__ */ jsx(
       Calendar,
       {

package/dist/components/DatePicker/DatePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.js","sources":["../../../src/components/DatePicker/DatePicker.tsx"],"sourcesContent":["'use client'\n\nimport { CalendarBlank } from '@phosphor-icons/react/dist/ssr/CalendarBlank'\nimport { X } from '@phosphor-icons/react/dist/ssr/X'\nimport { format as formatFn, Locale } from 'date-fns'\nimport * as React from 'react'\nimport { PropsBase, PropsRangeRequired, PropsSingleRequired } from 'react-day-picker'\n\nimport { Button, buttonVariants } from '../Button'\nimport { Calendar } from '../Calendar'\nimport { PopoverContent, PopoverRoot, PopoverTrigger } from '../Popover'\n\nimport { useLocale } from '@/components/DatePicker/hooks/useLocale'\nimport {\n  formatOutputDate,\n  formatOutputRange,\n  InputDate,\n  InputRange,\n  parseInputDate,\n  parseInputRange,\n  ValueFormat,\n} from '@/lib/dateUtils'\nimport { useIsMobile } from '@/lib/useMobile'\nimport { cn } from '@/lib/utils'\n\nexport type SupportedLocaleString = 'enUS' | 'es' | 'pt' | 'enGB' | 'de' | 'it'\n\nexport type IsoDateRange = {\n  from?: string\n  to?: string\n}\n\nexport type DateRange = {\n  from?: Date\n  to?: Date\n}\n\nexport type DatePickerOutput<Variant extends 'single' | 'range', Format extends ValueFormat> = Variant extends 'single'\n  ? Format extends 'date'\n    ? Date | null\n    : string | null\n  : Format extends 'date'\n    ? DateRange | null\n    : IsoDateRange | null\n\nexport type DatePickerInput<V extends 'single' | 'range'> = V extends 'single'\n  ? Date | string | null\n  : { from?: Date | string; to?: Date | string } | null\n\nexport type DatePickerProps<V extends 'single' | 'range' = 'single', F extends ValueFormat = 'iso'> = {\n  /**\n   * Placeholder text displayed when no date is selected\n   * @default 'Pick a date' for single mode, 'Pick a date range' for range mode\n   */\n  readonly placeholder?: string\n\n  /**\n   * Format string to use when displaying the selected date in the button\n   * @default 'MMM d, yyyy'\n   */\n  readonly displayFormat?: string\n\n  /**\n   * ClassName for the button\n   */\n  readonly buttonClassName?: string\n\n  /**\n   * Whether to allow the user to show the year switcher menu\n   * @default true for single mode, false for range mode\n   */\n  readonly showYearSwitcher?: boolean\n\n  /**\n   * Initial value for the date picker\n   * Accepts both Date objects and ISO strings regardless of valueFormat setting\n   */\n  readonly initialValue?: DatePickerInput<V>\n\n  /**\n   * Current value for the date picker\n   * Accepts both Date objects and ISO strings regardless of valueFormat setting\n   */\n  readonly value?: DatePickerInput<V>\n\n  /**\n   * Determines if the picker should close after a selection\n   * @default true for single mode, false for range mode\n   */\n  readonly closeOnSelect?: boolean\n\n  /**\n   * Determines the format of the value provided to the onChange callback\n   * - 'iso' (default): onChange receives ISO string(s) ('yyyy-MM-dd') or empty string for cleared values\n   * - 'date': onChange receives JavaScript Date object(s) or null for cleared values\n   *\n   * Note: The component accepts both Date objects and ISO strings for value/initialValue\n   * regardless of this setting. Empty values are sent as null (date format) or '' (iso format)\n   * instead of undefined to work properly with React Hook Form.\n   * @default 'iso'\n   */\n  readonly valueFormat?: F\n\n  /**\n   * Callback when date or date range changes\n   */\n  readonly onChange?: (value: DatePickerOutput<V, F>) => void\n\n  /**\n   * DatePicker mode - single date or date range\n   * @default 'single'\n   */\n  readonly variant?: V\n\n  /**\n   * The locale to use for formatting dates and determining the start of the week.\n   * Can be a string identifier for supported locales ('enUS', 'es', 'pt', 'enGB', 'de', 'it', 'fr')\n   * or a Locale object from date-fns/locale for other languages.\n   * @default 'enUS'\n   */\n  readonly locale?: SupportedLocaleString | Locale\n\n  /**\n   * Callback function executed when the clear button is clicked.\n   * When provided, an X button will appear on hover to clear the selected date.\n   */\n  readonly onClear?: boolean | (() => void)\n\n  /**\n   * Weather the picker is inside a modal (needed for pointer events to work at mobile)\n   */\n  modal?: boolean\n\n  /**\n   * Container element to position the popover relative to.\n   * @default document.body\n   */\n  container?: HTMLElement\n} & Omit<PropsBase, 'mode' | 'selected' | 'onSelect' | 'locale'>\n\nfunction DatePicker<V extends 'single' | 'range' = 'single', F extends ValueFormat = 'iso'>({\n  variant = 'single' as V,\n  placeholder = variant === 'single' ? 'Pick a date' : 'Pick a date range',\n  valueFormat = 'iso' as F,\n  initialValue: initialValueProp,\n  value: valueProp,\n  onChange,\n  buttonClassName,\n  displayFormat = 'MMM d, yyyy',\n  closeOnSelect = variant === 'single',\n  showYearSwitcher = variant === 'single',\n  locale: localeProp = 'enUS',\n  defaultMonth,\n  onClear,\n  modal = false,\n  container,\n  ...rest\n}: DatePickerProps<V, F>) {\n  const [isOpen, setIsOpen] = React.useState(false)\n  const [isHovered, setIsHovered] = React.useState(false)\n  const [isClicked, setIsClicked] = React.useState(false)\n  const isMobile = useIsMobile()\n  const calendarRef = React.useRef<HTMLDivElement>(null)\n\n  const resolvedLocale = useLocale(localeProp)\n\n  const [internalSingleDate, setInternalSingleDate] = React.useState<Date | undefined>(() => {\n    if (variant === 'single') {\n      return parseInputDate(initialValueProp as InputDate)\n    }\n    return undefined\n  })\n\n  const [internalDateRange, setInternalDateRange] = React.useState<DateRange | undefined>(() => {\n    if (variant === 'range') {\n      return parseInputRange(initialValueProp as InputRange)\n    }\n    return undefined\n  })\n\n  React.useEffect(() => {\n    const handleWindowMouseUp = () => setIsClicked(false)\n    window.addEventListener('mouseup', handleWindowMouseUp)\n    return () => window.removeEventListener('mouseup', handleWindowMouseUp)\n  }, [])\n\n  React.useEffect(() => {\n    if (variant === 'single') {\n      const newDate = parseInputDate(valueProp as InputDate)\n      setInternalSingleDate(newDate)\n    } else {\n      const newRange = parseInputRange(valueProp as InputRange)\n      setInternalDateRange(newRange)\n    }\n  }, [valueProp, variant])\n\n  React.useEffect(() => {\n    if (isOpen && isMobile && calendarRef.current) {\n      const timeoutId = setTimeout(() => {\n        const calendarElement = calendarRef.current?.querySelector('[id=\"calendar\"]') as HTMLElement | null\n\n        calendarElement?.focus()\n      }, 100)\n\n      return () => clearTimeout(timeoutId)\n    }\n  }, [isOpen, isMobile])\n\n  const singleDate = internalSingleDate\n  const dateRange = internalDateRange\n\n  const getEmptyValue = React.useCallback((): DatePickerOutput<V, F> => {\n    if (variant === 'single') {\n      return (valueFormat === 'date' ? null : '') as DatePickerOutput<V, F>\n    } else {\n      return (valueFormat === 'date' ? null : { from: '', to: '' }) as DatePickerOutput<V, F>\n    }\n  }, [variant, valueFormat])\n\n  const handleSelect = React.useCallback(\n    (selectedDate: Date | DateRange | undefined) => {\n      if (variant === 'single') {\n        const date = selectedDate as Date | undefined\n\n        setInternalSingleDate(date)\n\n        if (onChange) {\n          if (date) {\n            const output = valueFormat === 'date' ? date : formatOutputDate(date, 'iso')\n            onChange(output as DatePickerOutput<V, F>)\n          } else {\n            onChange(getEmptyValue())\n          }\n        }\n\n        if (closeOnSelect) {\n          setIsOpen(false)\n        }\n      } else {\n        const range = selectedDate as DateRange | undefined\n        setInternalDateRange(range)\n        if (onChange) {\n          if (range) {\n            const output = valueFormat === 'date' ? range : formatOutputRange(range, 'iso')\n            onChange(output as DatePickerOutput<V, F>)\n          } else {\n            onChange(getEmptyValue())\n          }\n        }\n      }\n    },\n    [variant, valueFormat, onChange, closeOnSelect, getEmptyValue],\n  )\n\n  const handleClear = React.useCallback(\n    (event: React.MouseEvent) => {\n      if (isMobile) return\n\n      event.preventDefault()\n      event.stopPropagation()\n\n      if (variant === 'single') {\n        setInternalSingleDate(undefined)\n      } else {\n        setInternalDateRange(undefined)\n      }\n\n      if (onChange) {\n        onChange(getEmptyValue())\n      }\n\n      if (typeof onClear === 'function') {\n        onClear()\n      }\n    },\n    [variant, onChange, onClear, getEmptyValue, isMobile],\n  )\n\n  const formatForDisplay = () => {\n    const formatOptions = { locale: resolvedLocale }\n    if (variant === 'single') {\n      return singleDate ? formatFn(singleDate, displayFormat, formatOptions) : placeholder\n    }\n\n    if (!dateRange) return placeholder\n    const fromStr = dateRange.from ? formatFn(dateRange.from, displayFormat, formatOptions) : '...'\n    const toStr = dateRange.to ? formatFn(dateRange.to, displayFormat, formatOptions) : '...'\n    if (!dateRange.from && !dateRange.to) return placeholder\n    if (!dateRange.from) return `... - ${toStr}`\n    if (!dateRange.to) return `${fromStr} - ...`\n    return `${fromStr} - ${toStr}`\n  }\n\n  const renderClearIcon = (showClearIcon: boolean) => {\n    if (!showClearIcon) return null\n    const clearIconClassName =\n      'pointer-events-none absolute right-4 z-10 flex h-full w-10 items-center justify-end rounded-r-lg bg-gradient-to-l from-60%  via-80% to-transparent'\n\n    return (\n      <>\n        <div\n          className={cn(\n            clearIconClassName,\n            'from-neutral-50 via-neutral-50/80',\n            isHovered ? 'opacity-100' : 'opacity-0',\n          )}\n        />\n        <div\n          className={cn(\n            clearIconClassName,\n            'from-neutral-100 via-neutral-100/80',\n            isClicked ? 'opacity-100' : 'opacity-0',\n          )}\n        />\n        <div className=\"absolute right-4 z-20 flex h-full w-10 items-center justify-end\">\n          <X\n            data-testid=\"clear-button\"\n            className={cn(\n              'h-4 w-4 shrink-0 cursor-pointer opacity-100 transition-opacity duration-150 hover:opacity-70',\n            )}\n            onClick={handleClear}\n          />\n        </div>\n      </>\n    )\n  }\n\n  const calendarProps = React.useMemo(() => {\n    const baseProps = {\n      defaultMonth: (variant === 'single' ? singleDate : dateRange?.from) ?? defaultMonth,\n      locale: resolvedLocale,\n      initialFocus: true,\n      ...rest,\n    } as PropsBase\n\n    if (variant === 'single') {\n      return {\n        ...baseProps,\n        mode: 'single' as const,\n        selected: singleDate,\n        onSelect: (date: Date | undefined) => handleSelect(date),\n      } as PropsSingleRequired\n    }\n\n    return {\n      ...baseProps,\n      mode: 'range' as const,\n      selected: dateRange,\n      onSelect: (range: DateRange | undefined) => handleSelect(range),\n      numberOfMonths: rest.numberOfMonths ?? 2,\n    } as PropsRangeRequired\n  }, [variant, rest, singleDate, dateRange, handleSelect, resolvedLocale, defaultMonth])\n\n  const hasValue = variant === 'single' ? singleDate : dateRange\n  const showClearButton = onClear && hasValue && isHovered\n\n  return (\n    <PopoverRoot open={isOpen} onOpenChange={setIsOpen} modal={modal}>\n      <PopoverTrigger asChild>\n        <Button\n          id={rest.id}\n          variant=\"ghost\"\n          className={cn(\n            'relative flex w-fit items-center justify-start text-left font-normal hover:transition-opacity',\n            !hasValue && 'text-muted-foreground',\n            buttonVariants({ variant: 'input', size: 'lg' }),\n            buttonClassName,\n          )}\n          disabled={typeof rest.disabled === 'boolean' ? rest.disabled : false}\n          onMouseEnter={() => !isMobile && setIsHovered(true)}\n          onMouseLeave={() => !isMobile && setIsHovered(false)}\n          onMouseDown={() => !isMobile && setIsClicked(true)}\n        >\n          <div className=\"flex items-center justify-center gap-2\">\n            <CalendarBlank className={cn('h-4 w-4 shrink-0 transition-opacity duration-150')} />\n            <span className=\"w-full text-center\">{formatForDisplay()}</span>\n            {onClear && hasValue && renderClearIcon(showClearButton ?? false)}\n          </div>\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent container={container} className=\"w-auto p-0\" align=\"center\" ref={calendarRef}>\n        <Calendar\n          {...calendarProps}\n          className=\"border-0\"\n          showYearSwitcher={variant === 'single' ? showYearSwitcher : false}\n        />\n      </PopoverContent>\n    </PopoverRoot>\n  )\n}\n\nDatePicker.displayName = 'DatePicker'\n\nexport { DatePicker }\n"],"names":[],"mappings":";;;;;;;;;;;;;;AA4IA;AAA4F;AAChF;AAC2C;AACvC;AACA;AACP;AACP;AACA;AACgB;AACY;AACG;AACV;AACrB;AACA;AACQ;AACR;AAEF;AACE;AACA;AACA;AACA;AACA;AAEA;AAEA;AACE;AACE;AAAmD;AAErD;AAAO;AAGT;AACE;AACE;AAAqD;AAEvD;AAAO;AAGT;AACE;AACA;AACA;AAAsE;AAGxE;AACE;AACE;AACA;AAA6B;AAE7B;AACA;AAA6B;AAC/B;AAGF;AACE;AACE;AACE;AAEA;AAAuB;AAGzB;AAAmC;AACrC;AAGF;AACA;AAEA;AACE;AACE;AAAwC;AAExC;AAA2D;AAC7D;AAGF;AAA2B;AAEvB;AACE;AAEA;AAEA;AACE;AACE;AACA;AAAyC;AAEzC;AAAwB;AAC1B;AAGF;AACE;AAAe;AACjB;AAEA;AACA;AACA;AACE;AACE;AACA;AAAyC;AAEzC;AAAwB;AAC1B;AACF;AACF;AACF;AAC6D;AAG/D;AAA0B;AAEtB;AAEA;AACA;AAEA;AACE;AAA+B;AAE/B;AAA8B;AAGhC;AACE;AAAwB;AAG1B;AACE;AAAQ;AACV;AACF;AACoD;AAGtD;AACE;AACA;AACE;AAAyE;AAG3E;AACA;AACA;AACA;AACA;AACA;AACA;AAA4B;AAG9B;AACE;AACA;AAGA;AAEI;AAAA;AAAC;AAAA;AACY;AACT;AACA;AAC4B;AAC9B;AAAA;AACF;AACA;AAAC;AAAA;AACY;AACT;AACA;AAC4B;AAC9B;AAAA;AACF;AAEE;AAAC;AAAA;AACa;AACD;AACT;AACF;AACS;AAAA;AAEb;AACF;AAIJ;AACE;AAAkB;AACuD;AAC/D;AACM;AACX;AAGL;AACE;AAAO;AACF;AACG;AACI;AAC6C;AACzD;AAGF;AAAO;AACF;AACG;AACI;AACoD;AACvB;AACzC;AAGF;AACA;AAEA;AAEI;AACE;AAAC;AAAA;AACU;AACD;AACG;AACT;AACa;AACkC;AAC/C;AACF;AAC+D;AACb;AACC;AACF;AAG/C;AAAkF;AACzB;AACO;AAClE;AAAA;AAEJ;AAEE;AAAC;AAAA;AACK;AACM;AACkD;AAAA;AAEhE;AAGN;AAEA;;"}
+{"version":3,"file":"DatePicker.js","sources":["../../../src/components/DatePicker/DatePicker.tsx"],"sourcesContent":["'use client'\n\nimport { CalendarBlank } from '@phosphor-icons/react/dist/ssr/CalendarBlank'\nimport { X } from '@phosphor-icons/react/dist/ssr/X'\nimport { format as formatFn, Locale } from 'date-fns'\nimport * as React from 'react'\nimport { PropsBase, PropsRangeRequired, PropsSingleRequired } from 'react-day-picker'\n\nimport { Button, buttonVariants } from '../Button'\nimport { Calendar } from '../Calendar'\nimport { PopoverContent, PopoverRoot, PopoverTrigger } from '../Popover'\n\nimport { useLocale } from '@/components/DatePicker/hooks/useLocale'\nimport {\n  formatOutputDate,\n  formatOutputRange,\n  InputDate,\n  InputRange,\n  parseInputDate,\n  parseInputRange,\n  ValueFormat,\n} from '@/lib/dateUtils'\nimport { useIsMobile } from '@/lib/useMobile'\nimport { cn } from '@/lib/utils'\n\nexport type SupportedLocaleString = 'enUS' | 'es' | 'pt' | 'enGB' | 'de' | 'it'\n\nexport type IsoDateRange = {\n  from?: string\n  to?: string\n}\n\nexport type DateRange = {\n  from?: Date\n  to?: Date\n}\n\nexport type DatePickerOutput<Variant extends 'single' | 'range', Format extends ValueFormat> = Variant extends 'single'\n  ? Format extends 'date'\n    ? Date | null\n    : string | null\n  : Format extends 'date'\n    ? DateRange | null\n    : IsoDateRange | null\n\nexport type DatePickerInput<V extends 'single' | 'range'> = V extends 'single'\n  ? Date | string | null\n  : { from?: Date | string; to?: Date | string } | null\n\nexport type DatePickerProps<V extends 'single' | 'range' = 'single', F extends ValueFormat = 'iso'> = {\n  /**\n   * Placeholder text displayed when no date is selected\n   * @default 'Pick a date' for single mode, 'Pick a date range' for range mode\n   */\n  readonly placeholder?: string\n\n  /**\n   * Format string to use when displaying the selected date in the button\n   * @default 'MMM d, yyyy'\n   */\n  readonly displayFormat?: string\n\n  /**\n   * ClassName for the button\n   */\n  readonly buttonClassName?: string\n\n  /**\n   * Whether to allow the user to show the year switcher menu\n   * @default true for single mode, false for range mode\n   */\n  readonly showYearSwitcher?: boolean\n\n  /**\n   * Initial value for the date picker\n   * Accepts both Date objects and ISO strings regardless of valueFormat setting\n   */\n  readonly initialValue?: DatePickerInput<V>\n\n  /**\n   * Current value for the date picker\n   * Accepts both Date objects and ISO strings regardless of valueFormat setting\n   */\n  readonly value?: DatePickerInput<V>\n\n  /**\n   * Determines if the picker should close after a selection\n   * @default true for single mode, false for range mode\n   */\n  readonly closeOnSelect?: boolean\n\n  /**\n   * Determines the format of the value provided to the onChange callback\n   * - 'iso' (default): onChange receives ISO string(s) ('yyyy-MM-dd') or empty string for cleared values\n   * - 'date': onChange receives JavaScript Date object(s) or null for cleared values\n   *\n   * Note: The component accepts both Date objects and ISO strings for value/initialValue\n   * regardless of this setting. Empty values are sent as null (date format) or '' (iso format)\n   * instead of undefined to work properly with React Hook Form.\n   * @default 'iso'\n   */\n  readonly valueFormat?: F\n\n  /**\n   * Callback when date or date range changes\n   */\n  readonly onChange?: (value: DatePickerOutput<V, F>) => void\n\n  /**\n   * DatePicker mode - single date or date range\n   * @default 'single'\n   */\n  readonly variant?: V\n\n  /**\n   * The locale to use for formatting dates and determining the start of the week.\n   * Can be a string identifier for supported locales ('enUS', 'es', 'pt', 'enGB', 'de', 'it', 'fr')\n   * or a Locale object from date-fns/locale for other languages.\n   * @default 'enUS'\n   */\n  readonly locale?: SupportedLocaleString | Locale\n\n  /**\n   * Callback function executed when the clear button is clicked.\n   * When provided, an X button will appear on hover to clear the selected date.\n   */\n  readonly onClear?: boolean | (() => void)\n\n  /**\n   * Weather the picker is inside a modal (needed for pointer events to work at mobile)\n   */\n  modal?: boolean\n\n  /**\n   * Container element to position the popover relative to.\n   * @default document.body\n   */\n  container?: HTMLElement\n} & Omit<PropsBase, 'mode' | 'selected' | 'onSelect' | 'locale'>\n\nfunction DatePicker<V extends 'single' | 'range' = 'single', F extends ValueFormat = 'iso'>({\n  variant = 'single' as V,\n  placeholder = variant === 'single' ? 'Pick a date' : 'Pick a date range',\n  valueFormat = 'iso' as F,\n  initialValue: initialValueProp,\n  value: valueProp,\n  onChange,\n  buttonClassName,\n  displayFormat = 'MMM d, yyyy',\n  closeOnSelect = variant === 'single',\n  showYearSwitcher = variant === 'single',\n  locale: localeProp = 'enUS',\n  defaultMonth,\n  onClear,\n  modal = false,\n  container,\n  ...rest\n}: DatePickerProps<V, F>) {\n  const [isOpen, setIsOpen] = React.useState(false)\n  const [isHovered, setIsHovered] = React.useState(false)\n  const [isClicked, setIsClicked] = React.useState(false)\n  const isMobile = useIsMobile()\n  const calendarRef = React.useRef<HTMLDivElement>(null)\n\n  const resolvedLocale = useLocale(localeProp)\n\n  const [internalSingleDate, setInternalSingleDate] = React.useState<Date | undefined>(() => {\n    if (variant === 'single') {\n      return parseInputDate(initialValueProp as InputDate)\n    }\n    return undefined\n  })\n\n  const [internalDateRange, setInternalDateRange] = React.useState<DateRange | undefined>(() => {\n    if (variant === 'range') {\n      return parseInputRange(initialValueProp as InputRange)\n    }\n    return undefined\n  })\n\n  React.useEffect(() => {\n    const handleWindowMouseUp = () => setIsClicked(false)\n    window.addEventListener('mouseup', handleWindowMouseUp)\n    return () => window.removeEventListener('mouseup', handleWindowMouseUp)\n  }, [])\n\n  React.useEffect(() => {\n    if (variant === 'single') {\n      const newDate = parseInputDate(valueProp as InputDate)\n      setInternalSingleDate(newDate)\n    } else {\n      const newRange = parseInputRange(valueProp as InputRange)\n      setInternalDateRange(newRange)\n    }\n  }, [valueProp, variant])\n\n  React.useEffect(() => {\n    if (isOpen && isMobile && calendarRef.current) {\n      const timeoutId = setTimeout(() => {\n        const calendarElement = calendarRef.current?.querySelector('[id=\"calendar\"]') as HTMLElement | null\n\n        calendarElement?.focus()\n      }, 100)\n\n      return () => clearTimeout(timeoutId)\n    }\n  }, [isOpen, isMobile])\n\n  const singleDate = internalSingleDate\n  const dateRange = internalDateRange\n\n  const getEmptyValue = React.useCallback((): DatePickerOutput<V, F> => {\n    if (variant === 'single') {\n      return (valueFormat === 'date' ? null : '') as DatePickerOutput<V, F>\n    } else {\n      return (valueFormat === 'date' ? null : { from: '', to: '' }) as DatePickerOutput<V, F>\n    }\n  }, [variant, valueFormat])\n\n  const handleSelect = React.useCallback(\n    (selectedDate: Date | DateRange | undefined) => {\n      if (variant === 'single') {\n        const date = selectedDate as Date | undefined\n\n        setInternalSingleDate(date)\n\n        if (onChange) {\n          if (date) {\n            const output = valueFormat === 'date' ? date : formatOutputDate(date, 'iso')\n            onChange(output as DatePickerOutput<V, F>)\n          } else {\n            onChange(getEmptyValue())\n          }\n        }\n\n        if (closeOnSelect) {\n          setIsOpen(false)\n        }\n      } else {\n        const range = selectedDate as DateRange | undefined\n        setInternalDateRange(range)\n        if (onChange) {\n          if (range) {\n            const output = valueFormat === 'date' ? range : formatOutputRange(range, 'iso')\n            onChange(output as DatePickerOutput<V, F>)\n          } else {\n            onChange(getEmptyValue())\n          }\n        }\n      }\n    },\n    [variant, valueFormat, onChange, closeOnSelect, getEmptyValue],\n  )\n\n  const handleClear = React.useCallback(\n    (event: React.MouseEvent) => {\n      if (isMobile) return\n\n      event.preventDefault()\n      event.stopPropagation()\n\n      if (variant === 'single') {\n        setInternalSingleDate(undefined)\n      } else {\n        setInternalDateRange(undefined)\n      }\n\n      if (onChange) {\n        onChange(getEmptyValue())\n      }\n\n      if (typeof onClear === 'function') {\n        onClear()\n      }\n    },\n    [variant, onChange, onClear, getEmptyValue, isMobile],\n  )\n\n  const formatForDisplay = () => {\n    const formatOptions = { locale: resolvedLocale }\n    if (variant === 'single') {\n      return singleDate ? formatFn(singleDate, displayFormat, formatOptions) : placeholder\n    }\n\n    if (!dateRange) return placeholder\n    const fromStr = dateRange.from ? formatFn(dateRange.from, displayFormat, formatOptions) : '...'\n    const toStr = dateRange.to ? formatFn(dateRange.to, displayFormat, formatOptions) : '...'\n    if (!dateRange.from && !dateRange.to) return placeholder\n    if (!dateRange.from) return `... - ${toStr}`\n    if (!dateRange.to) return `${fromStr} - ...`\n    return `${fromStr} - ${toStr}`\n  }\n\n  const renderClearIcon = (showClearIcon: boolean) => {\n    if (!showClearIcon) return null\n    const clearIconClassName =\n      'pointer-events-none absolute right-4 z-10 flex h-full w-10 items-center justify-end rounded-r-lg bg-gradient-to-l from-60%  via-80% to-transparent'\n\n    return (\n      <>\n        <div\n          className={cn(\n            clearIconClassName,\n            'from-neutral-50 via-neutral-50/80',\n            isHovered ? 'opacity-100' : 'opacity-0',\n          )}\n        />\n        <div\n          className={cn(\n            clearIconClassName,\n            'from-neutral-100 via-neutral-100/80',\n            isClicked ? 'opacity-100' : 'opacity-0',\n          )}\n        />\n        <div className=\"absolute right-4 z-20 flex h-full w-10 items-center justify-end\">\n          <X\n            data-testid=\"clear-button\"\n            className={cn(\n              'h-4 w-4 shrink-0 cursor-pointer opacity-100 transition-opacity duration-150 hover:opacity-70',\n            )}\n            onClick={handleClear}\n          />\n        </div>\n      </>\n    )\n  }\n\n  const calendarProps = React.useMemo(() => {\n    const baseProps = {\n      defaultMonth: (variant === 'single' ? singleDate : dateRange?.from) ?? defaultMonth,\n      locale: resolvedLocale,\n      initialFocus: true,\n      ...rest,\n    } as PropsBase\n\n    if (variant === 'single') {\n      return {\n        ...baseProps,\n        mode: 'single' as const,\n        selected: singleDate,\n        onSelect: (date: Date | undefined) => handleSelect(date),\n      } as PropsSingleRequired\n    }\n\n    return {\n      ...baseProps,\n      mode: 'range' as const,\n      selected: dateRange,\n      onSelect: (range: DateRange | undefined) => handleSelect(range),\n      numberOfMonths: rest.numberOfMonths ?? 2,\n    } as PropsRangeRequired\n  }, [variant, rest, singleDate, dateRange, handleSelect, resolvedLocale, defaultMonth])\n\n  const hasValue = variant === 'single' ? singleDate : dateRange\n  const showClearButton = onClear && hasValue && isHovered\n\n  return (\n    <PopoverRoot open={isOpen} onOpenChange={setIsOpen} modal={modal}>\n      <PopoverTrigger\n        asChild\n        onPointerDown={(event) => {\n          event.stopPropagation()\n          if (isOpen) {\n            setIsOpen(false)\n            event.preventDefault()\n          } else {\n            setIsOpen(true)\n          }\n        }}\n        onClick={(event) => {\n          event.preventDefault()\n          event.stopPropagation()\n        }}\n      >\n        <Button\n          id={rest.id}\n          variant=\"ghost\"\n          className={cn(\n            'relative flex w-fit items-center justify-start text-left font-normal hover:transition-opacity',\n            !hasValue && 'text-muted-foreground',\n            buttonVariants({ variant: 'input', size: 'lg' }),\n            buttonClassName,\n          )}\n          disabled={typeof rest.disabled === 'boolean' ? rest.disabled : false}\n          onMouseEnter={() => !isMobile && setIsHovered(true)}\n          onMouseLeave={() => !isMobile && setIsHovered(false)}\n          onMouseDown={() => !isMobile && setIsClicked(true)}\n        >\n          <div className=\"flex items-center justify-center gap-2\">\n            <CalendarBlank className={cn('h-4 w-4 shrink-0 transition-opacity duration-150')} />\n            <span className=\"w-full text-center\">{formatForDisplay()}</span>\n            {onClear && hasValue && renderClearIcon(showClearButton ?? false)}\n          </div>\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent container={container} className=\"w-auto p-0\" align=\"center\" ref={calendarRef}>\n        <Calendar\n          {...calendarProps}\n          className=\"border-0\"\n          showYearSwitcher={variant === 'single' ? showYearSwitcher : false}\n        />\n      </PopoverContent>\n    </PopoverRoot>\n  )\n}\n\nDatePicker.displayName = 'DatePicker'\n\nexport { DatePicker }\n"],"names":[],"mappings":";;;;;;;;;;;;;;AA4IA;AAA4F;AAChF;AAC2C;AACvC;AACA;AACP;AACP;AACA;AACgB;AACY;AACG;AACV;AACrB;AACA;AACQ;AACR;AAEF;AACE;AACA;AACA;AACA;AACA;AAEA;AAEA;AACE;AACE;AAAmD;AAErD;AAAO;AAGT;AACE;AACE;AAAqD;AAEvD;AAAO;AAGT;AACE;AACA;AACA;AAAsE;AAGxE;AACE;AACE;AACA;AAA6B;AAE7B;AACA;AAA6B;AAC/B;AAGF;AACE;AACE;AACE;AAEA;AAAuB;AAGzB;AAAmC;AACrC;AAGF;AACA;AAEA;AACE;AACE;AAAwC;AAExC;AAA2D;AAC7D;AAGF;AAA2B;AAEvB;AACE;AAEA;AAEA;AACE;AACE;AACA;AAAyC;AAEzC;AAAwB;AAC1B;AAGF;AACE;AAAe;AACjB;AAEA;AACA;AACA;AACE;AACE;AACA;AAAyC;AAEzC;AAAwB;AAC1B;AACF;AACF;AACF;AAC6D;AAG/D;AAA0B;AAEtB;AAEA;AACA;AAEA;AACE;AAA+B;AAE/B;AAA8B;AAGhC;AACE;AAAwB;AAG1B;AACE;AAAQ;AACV;AACF;AACoD;AAGtD;AACE;AACA;AACE;AAAyE;AAG3E;AACA;AACA;AACA;AACA;AACA;AACA;AAA4B;AAG9B;AACE;AACA;AAGA;AAEI;AAAA;AAAC;AAAA;AACY;AACT;AACA;AAC4B;AAC9B;AAAA;AACF;AACA;AAAC;AAAA;AACY;AACT;AACA;AAC4B;AAC9B;AAAA;AACF;AAEE;AAAC;AAAA;AACa;AACD;AACT;AACF;AACS;AAAA;AAEb;AACF;AAIJ;AACE;AAAkB;AACuD;AAC/D;AACM;AACX;AAGL;AACE;AAAO;AACF;AACG;AACI;AAC6C;AACzD;AAGF;AAAO;AACF;AACG;AACI;AACoD;AACvB;AACzC;AAGF;AACA;AAEA;AAEI;AAAA;AAAC;AAAA;AACQ;AAEL;AACA;AACE;AACA;AAAqB;AAErB;AAAc;AAChB;AACF;AAEE;AACA;AAAsB;AACxB;AAEA;AAAC;AAAA;AACU;AACD;AACG;AACT;AACa;AACkC;AAC/C;AACF;AAC+D;AACb;AACC;AACF;AAG/C;AAAkF;AACzB;AACO;AAClE;AAAA;AACF;AAAA;AACF;AAEE;AAAC;AAAA;AACK;AACM;AACkD;AAAA;AAEhE;AAGN;AAEA;;"}

package/dist/components/Select/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["import { CaretDown, CaretUp, Check } from '@phosphor-icons/react/dist/ssr'\nimport * as SelectPrimitive from '@radix-ui/react-select'\nimport * as React from 'react'\n\nimport { buttonVariants } from '../Button'\n\nimport { cn } from '@/lib/utils'\n\nconst SelectRoot = SelectPrimitive.Root\n\nconst SelectGroup = SelectPrimitive.Group\n\nconst SelectValue = SelectPrimitive.Value\n\nconst SelectTrigger = React.forwardRef<\n  React.ComponentRef<typeof SelectPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>\n>(({ className, children, ...props }, ref) => (\n  <SelectPrimitive.Trigger ref={ref} className={className} {...props}>\n    {children}\n    <SelectPrimitive.Icon asChild>\n      <CaretDown className=\"h-4 w-4 opacity-50\" />\n    </SelectPrimitive.Icon>\n  </SelectPrimitive.Trigger>\n))\nSelectTrigger.displayName = SelectPrimitive.Trigger.displayName\n\nconst SelectScrollUpButton = React.forwardRef<\n  React.ComponentRef<typeof SelectPrimitive.ScrollUpButton>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.ScrollUpButton\n    ref={ref}\n    className={cn('flex cursor-default items-center justify-center py-1', className)}\n    {...props}\n  >\n    <CaretUp className=\"h-4 w-4\" />\n  </SelectPrimitive.ScrollUpButton>\n))\nSelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName\n\nconst SelectScrollDownButton = React.forwardRef<\n  React.ComponentRef<typeof SelectPrimitive.ScrollDownButton>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.ScrollDownButton\n    ref={ref}\n    className={cn('flex cursor-default items-center justify-center py-1', className)}\n    {...props}\n  >\n    <CaretDown className=\"h-4 w-4\" />\n  </SelectPrimitive.ScrollDownButton>\n))\nSelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName\n\nconst SelectContent = React.forwardRef<\n  React.ComponentRef<typeof SelectPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content> & { container?: HTMLElement }\n>(({ className, children, position = 'popper', container, ...props }, ref) => (\n  <SelectPrimitive.Portal container={container}>\n    <SelectPrimitive.Content\n      ref={ref}\n      className={cn(\n        'text-popover-foreground 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 relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-[#fff] shadow-md',\n        position === 'popper' &&\n          'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',\n        className,\n      )}\n      position={position}\n      {...props}\n    >\n      <SelectScrollUpButton />\n      <SelectPrimitive.Viewport\n        className={cn(\n          'p-1',\n          position === 'popper' &&\n            'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]',\n        )}\n      >\n        {children}\n      </SelectPrimitive.Viewport>\n      <SelectScrollDownButton />\n    </SelectPrimitive.Content>\n  </SelectPrimitive.Portal>\n))\nSelectContent.displayName = SelectPrimitive.Content.displayName\n\nconst SelectLabel = React.forwardRef<\n  React.ComponentRef<typeof SelectPrimitive.Label>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.Label ref={ref} className={cn('py-1.5 pr-2 pl-8 text-sm font-semibold', className)} {...props} />\n))\nSelectLabel.displayName = SelectPrimitive.Label.displayName\n\nconst SelectItem = React.forwardRef<\n  React.ComponentRef<typeof SelectPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>\n>(({ className, children, ...props }, ref) => (\n  <SelectPrimitive.Item\n    ref={ref}\n    className={cn(\n      'focus:text-accent-foreground relative flex w-full cursor-default items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none select-none focus:bg-neutral-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n      className,\n    )}\n    {...props}\n  >\n    <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <SelectPrimitive.ItemIndicator>\n        <Check className=\"h-4 w-4\" />\n      </SelectPrimitive.ItemIndicator>\n    </span>\n\n    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n  </SelectPrimitive.Item>\n))\nSelectItem.displayName = SelectPrimitive.Item.displayName\n\nconst SelectSeparator = React.forwardRef<\n  React.ComponentRef<typeof SelectPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.Separator ref={ref} className={cn('bg-muted -mx-1 my-1 h-px', className)} {...props} />\n))\nSelectSeparator.displayName = SelectPrimitive.Separator.displayName\n\nexport {\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectRoot,\n  SelectScrollDownButton,\n  SelectScrollUpButton,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n}\ntype Option = {\n  value: string\n  label: React.ReactElement | string | number\n}\ntype Props = {\n  onValueChange?: (value: string) => void\n  defaultValue?: string\n  value?: string\n  placeholder?: string\n  options: Array<Option>\n  className?: string\n  disabled?: boolean\n  error?: boolean | string\n  id?: string\n  onKeyDown?: (event: React.KeyboardEvent<HTMLButtonElement>) => void\n  container?: HTMLElement\n}\n\nexport function Select({\n  onValueChange,\n  defaultValue,\n  value,\n  options,\n  placeholder,\n  className,\n  disabled = false,\n  error,\n  id,\n  onKeyDown,\n  container,\n  ...props\n}: Readonly<Props>) {\n  return (\n    <div className=\"flex w-full flex-col gap-1\">\n      <SelectRoot\n        {...props}\n        onValueChange={onValueChange}\n        value={value}\n        defaultValue={defaultValue}\n        disabled={disabled}\n      >\n        <SelectTrigger\n          id={id}\n          onKeyDown={onKeyDown}\n          aria-invalid={error ? 'true' : 'false'}\n          className={cn(\n            buttonVariants({ variant: 'input', size: 'lg' }),\n            'flex justify-between',\n            error && 'ring-error-400 focus-within:ring-error-700 border-none ring-1',\n            className,\n          )}\n        >\n          <SelectValue placeholder={placeholder} />\n        </SelectTrigger>\n        <SelectContent container={container}>\n          {options.map((option) => (\n            <SelectItem key={option.value} value={option.value} data-testid={option.value}>\n              {option.label}\n            </SelectItem>\n          ))}\n        </SelectContent>\n      </SelectRoot>\n      {typeof error === 'string' && <span className=\"text-error-500 text-sm\">{error}</span>}\n    </div>\n  )\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Select.js","sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["import { CaretDown, CaretUp, Check } from '@phosphor-icons/react/dist/ssr'\nimport * as SelectPrimitive from '@radix-ui/react-select'\nimport * as React from 'react'\n\nimport { buttonVariants } from '../Button'\n\nimport { cn } from '@/lib/utils'\n\nconst SelectRoot = SelectPrimitive.Root\n\nconst SelectGroup = SelectPrimitive.Group\n\nconst SelectValue = SelectPrimitive.Value\n\nconst SelectTrigger = React.forwardRef<\n  React.ComponentRef<typeof SelectPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>\n>(({ className, children, ...props }, ref) => (\n  <SelectPrimitive.Trigger ref={ref} className={className} {...props}>\n    {children}\n    <SelectPrimitive.Icon asChild>\n      <CaretDown className=\"h-4 w-4 opacity-50\" />\n    </SelectPrimitive.Icon>\n  </SelectPrimitive.Trigger>\n))\nSelectTrigger.displayName = SelectPrimitive.Trigger.displayName\n\nconst SelectScrollUpButton = React.forwardRef<\n  React.ComponentRef<typeof SelectPrimitive.ScrollUpButton>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.ScrollUpButton\n    ref={ref}\n    className={cn('flex cursor-default items-center justify-center py-1', className)}\n    {...props}\n  >\n    <CaretUp className=\"h-4 w-4\" />\n  </SelectPrimitive.ScrollUpButton>\n))\nSelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName\n\nconst SelectScrollDownButton = React.forwardRef<\n  React.ComponentRef<typeof SelectPrimitive.ScrollDownButton>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.ScrollDownButton\n    ref={ref}\n    className={cn('flex cursor-default items-center justify-center py-1', className)}\n    {...props}\n  >\n    <CaretDown className=\"h-4 w-4\" />\n  </SelectPrimitive.ScrollDownButton>\n))\nSelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName\n\nconst SelectContent = React.forwardRef<\n  React.ComponentRef<typeof SelectPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content> & {\n    container?: HTMLElement\n  }\n>(({ className, children, position = 'popper', container, ...props }, ref) => (\n  <SelectPrimitive.Portal container={container}>\n    <SelectPrimitive.Content\n      ref={ref}\n      className={cn(\n        'text-popover-foreground 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 relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-[#fff] shadow-md',\n        position === 'popper' &&\n          'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',\n        className,\n      )}\n      position={position}\n      {...props}\n    >\n      <SelectScrollUpButton />\n      <SelectPrimitive.Viewport\n        className={cn(\n          'p-1',\n          position === 'popper' &&\n            'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]',\n        )}\n      >\n        {children}\n      </SelectPrimitive.Viewport>\n      <SelectScrollDownButton />\n    </SelectPrimitive.Content>\n  </SelectPrimitive.Portal>\n))\nSelectContent.displayName = SelectPrimitive.Content.displayName\n\nconst SelectLabel = React.forwardRef<\n  React.ComponentRef<typeof SelectPrimitive.Label>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.Label ref={ref} className={cn('py-1.5 pr-2 pl-8 text-sm font-semibold', className)} {...props} />\n))\nSelectLabel.displayName = SelectPrimitive.Label.displayName\n\nconst SelectItem = React.forwardRef<\n  React.ComponentRef<typeof SelectPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>\n>(({ className, children, ...props }, ref) => (\n  <SelectPrimitive.Item\n    ref={ref}\n    className={cn(\n      'focus:text-accent-foreground relative flex w-full cursor-default items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none select-none focus:bg-neutral-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n      className,\n    )}\n    {...props}\n  >\n    <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <SelectPrimitive.ItemIndicator>\n        <Check className=\"h-4 w-4\" />\n      </SelectPrimitive.ItemIndicator>\n    </span>\n\n    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n  </SelectPrimitive.Item>\n))\nSelectItem.displayName = SelectPrimitive.Item.displayName\n\nconst SelectSeparator = React.forwardRef<\n  React.ComponentRef<typeof SelectPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.Separator ref={ref} className={cn('bg-muted -mx-1 my-1 h-px', className)} {...props} />\n))\nSelectSeparator.displayName = SelectPrimitive.Separator.displayName\n\nexport {\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectRoot,\n  SelectScrollDownButton,\n  SelectScrollUpButton,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n}\ntype Option = {\n  value: string\n  label: React.ReactElement | string | number\n}\ntype Props = {\n  onValueChange?: (value: string) => void\n  defaultValue?: string\n  value?: string\n  placeholder?: string\n  options: Array<Option>\n  className?: string\n  disabled?: boolean\n  error?: boolean | string\n  id?: string\n  onKeyDown?: (event: React.KeyboardEvent<HTMLButtonElement>) => void\n  container?: HTMLElement\n}\n\nexport function Select({\n  onValueChange,\n  defaultValue,\n  value,\n  options,\n  placeholder,\n  className,\n  disabled = false,\n  error,\n  id,\n  onKeyDown,\n  container,\n  ...props\n}: Readonly<Props>) {\n  return (\n    <div className=\"flex w-full flex-col gap-1\">\n      <SelectRoot\n        {...props}\n        onValueChange={onValueChange}\n        value={value}\n        defaultValue={defaultValue}\n        disabled={disabled}\n      >\n        <SelectTrigger\n          id={id}\n          onKeyDown={onKeyDown}\n          aria-invalid={error ? 'true' : 'false'}\n          className={cn(\n            buttonVariants({ variant: 'input', size: 'lg' }),\n            'flex justify-between',\n            error && 'ring-error-400 focus-within:ring-error-700 border-none ring-1',\n            className,\n          )}\n        >\n          <SelectValue placeholder={placeholder} />\n        </SelectTrigger>\n        <SelectContent container={container}>\n          {options.map((option) => (\n            <SelectItem key={option.value} value={option.value} data-testid={option.value}>\n              {option.label}\n            </SelectItem>\n          ))}\n        </SelectContent>\n      </SelectRoot>\n      {typeof error === 'string' && <span className=\"text-error-500 text-sm\">{error}</span>}\n    </div>\n  )\n}\n"],"names":[],"mappings":"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"}

package/dist/theme.css

@@ -234,6 +234,7 @@
 @font-face {
   font-family: 'Onest';
   src: url('./fonts/Onest.woff2');
+  font-display: swap;
 }
 
 @layer base {

package/package.json

@@ -2,7 +2,7 @@
   "name": "periplo-ui",
   "description": "IATI UI library",
   "private": false,
-  "version": "3.49.0",
+  "version": "3.51.0",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",