periplo-ui 3.35.0 → 3.35.2

package/dist/components/Combobox/Combobox.js

@@ -135,9 +135,9 @@ const Combobox = (props) => {
           disabled,
           variant: "text",
           className: cn(
-            buttonVariants({ variant: "input" }),
+            buttonVariants({ variant: "input", size: "lg" }),
             "relative flex justify-between rounded-lg",
-            multiple && "renderLabel" in props && props.renderLabel ? "h-auto min-h-10" : "h-10",
+            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",

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

@@ -1 +1 @@
-{"version":3,"file":"Combobox.js","sources":["../../../src/components/Combobox/Combobox.tsx"],"sourcesContent":["import { CaretDown, Check, X } from '@phosphor-icons/react'\nimport { useEffect, useMemo, useRef, useState } from 'react'\n\nimport { cn } from '../../lib/utils'\nimport { Button, buttonVariants } from '../Button'\nimport { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '../Command'\nimport { PopoverContent, PopoverRoot, PopoverTrigger } from '../Popover'\nimport { TooltipContent, TooltipProvider, TooltipRoot, TooltipTrigger } from '../Tooltip'\n\nconst ComboboxOptionWithTooltip = ({ label }: { label: string }) => {\n  const textRef = useRef<HTMLSpanElement>(null)\n  const [isTruncated, setIsTruncated] = useState(false)\n\n  useEffect(() => {\n    const frame = requestAnimationFrame(() => {\n      if (textRef.current) {\n        setIsTruncated(textRef.current.scrollWidth > textRef.current.clientWidth)\n      }\n    })\n\n    return () => cancelAnimationFrame(frame)\n  }, [label])\n\n  return (\n    <TooltipProvider>\n      <TooltipRoot delayDuration={300}>\n        <TooltipTrigger asChild>\n          <span ref={textRef} className=\"block truncate\">\n            {label}\n          </span>\n        </TooltipTrigger>\n        {isTruncated && <TooltipContent>{label}</TooltipContent>}\n      </TooltipRoot>\n    </TooltipProvider>\n  )\n}\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}\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\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}\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\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 */\nexport const Combobox = <T extends object>(props: ComboboxProps<T>) => {\n  const {\n    id,\n    options,\n    getOptionValue,\n    getOptionLabel,\n    placeholder = 'Select...',\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    filterOptions,\n    multiple,\n    clearable = true,\n    onClear,\n    modal = false,\n    selectedMultiplePlaceholder = 'Selected',\n    multipleOptionsPlaceholder = 'Options',\n  } = props\n\n  const [open, setOpen] = useState(false)\n  const [searchTerm, setSearchTerm] = useState('')\n  const [isHovered, setIsHovered] = useState(false)\n\n  const closeOnSelect = props.closeOnSelect ?? !props.multiple\n\n  const filteredOptions = useMemo(() => {\n    if (!filterOptions) {\n      return options.filter((option) => getOptionLabel(option).toLowerCase().includes(searchTerm.toLowerCase()))\n    }\n\n    return searchTerm ? filterOptions(options, searchTerm) : options\n  }, [filterOptions, options, searchTerm, getOptionLabel])\n\n  const handleSelect = (currentValue: string) => {\n    if (multiple) {\n      const { value = [], onChange } = props\n      const isRemoving = value.includes(currentValue)\n\n      // If trying to remove the last item and clearable is false, don't allow it\n      if (isRemoving && !clearable && value.length === 1) {\n        return\n      }\n\n      const newValues = isRemoving ? value.filter((val) => val !== currentValue) : [...value, currentValue]\n      onChange(newValues)\n    } else {\n      const { value, onChange } = props\n      const newValue = clearable && currentValue === value ? '' : currentValue\n      onChange(newValue)\n    }\n\n    if (closeOnSelect) {\n      setOpen(false)\n    }\n  }\n\n  const handleRemove = (valueToRemove: string) => {\n    if (props.multiple) {\n      const { value = [], onChange } = props\n\n      // If trying to remove the last item and clearable is false, don't allow it\n      if (!clearable && value.length === 1) {\n        return\n      }\n\n      const newValues = value.filter((val) => val !== valueToRemove)\n      onChange(newValues)\n    }\n  }\n\n  const handleClear = (event: React.MouseEvent) => {\n    event.preventDefault()\n    event.stopPropagation()\n\n    if (multiple) {\n      const { onChange } = props\n\n      // Only clear if clearable is true\n      if (clearable) {\n        onChange([])\n      }\n    } else {\n      const { onChange } = props\n      onChange('')\n    }\n\n    if (typeof onClear === 'function') {\n      onClear()\n    }\n  }\n\n  const displayValue = useMemo(() => {\n    if (multiple) {\n      const { value = [], renderLabel } = props\n      if (value.length === 0) return placeholder\n\n      const selectedOptions = options.filter((option) => value.includes(getOptionValue(option)))\n\n      if (renderLabel) {\n        return renderLabel(selectedOptions, handleRemove)\n      }\n\n      return selectedOptions.map(getOptionLabel).join(', ')\n    }\n\n    const { value, renderLabel } = props\n    const selectedOption = options.find((option) => getOptionValue(option) === value)\n    if (renderLabel && selectedOption) {\n      return renderLabel(selectedOption)\n    }\n    return selectedOption ? getOptionLabel(selectedOption) : placeholder\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [props, getOptionLabel, getOptionValue, options, placeholder, multiple])\n\n  const hasValue = useMemo(() => {\n    if (multiple) {\n      return props.value && props.value.length > 0\n    }\n    return !!props.value\n  }, [props.value, multiple])\n\n  const showClearButton = onClear && hasValue && isHovered && clearable\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' }),\n              'relative flex justify-between rounded-lg',\n              multiple && 'renderLabel' in props && props.renderLabel ? 'h-auto min-h-10' : 'h-10',\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\">\n          <Command shouldFilter={false}>\n            <CommandInput\n              placeholder={searchPlaceholder}\n              disabled={loading}\n              value={searchTerm}\n              onValueChange={setSearchTerm}\n            />\n            <CommandList style={{ maxHeight }} className=\"overflow-auto\" onWheel={(event) => event.stopPropagation()}>\n              {loading ? (\n                <div className=\"text-muted-foreground flex items-center justify-center py-6 text-sm\">\n                  {loadingPlaceholder}\n                </div>\n              ) : (\n                <>\n                  {filteredOptions.length === 0 && <CommandEmpty>{emptyMessage}</CommandEmpty>}\n                  {multiple && props.value && props.value.length > 0 && (\n                    <CommandGroup heading={selectedMultiplePlaceholder}>\n                      {options\n                        .filter((option) => props.value?.includes(getOptionValue(option)))\n                        .map((option) => (\n                          <CommandItem\n                            key={getOptionValue(option)}\n                            value={getOptionValue(option)}\n                            onSelect={handleSelect}\n                          >\n                            <Check className=\"mr-2 h-4 w-4 opacity-100\" />\n                            <ComboboxOptionWithTooltip label={getOptionLabel(option)} />\n                          </CommandItem>\n                        ))}\n                    </CommandGroup>\n                  )}\n\n                  <CommandGroup heading={!multiple ? undefined : multipleOptionsPlaceholder}>\n                    {filteredOptions\n                      .filter((option) => !multiple || !props.value?.includes(getOptionValue(option)))\n                      .map((option) => {\n                        const optionValue = getOptionValue(option)\n                        const isSelected = multiple ? props.value?.includes(optionValue) : props.value === optionValue\n\n                        return (\n                          <CommandItem key={optionValue} value={optionValue} onSelect={handleSelect}>\n                            {renderOption ? (\n                              renderOption(option, isSelected ?? false)\n                            ) : (\n                              <>\n                                <Check className={`mr-2 h-4 w-4 ${isSelected ? 'opacity-100' : 'opacity-0'}`} />\n                                <ComboboxOptionWithTooltip label={getOptionLabel(option)} />\n                              </>\n                            )}\n                          </CommandItem>\n                        )\n                      })}\n                  </CommandGroup>\n                </>\n              )}\n            </CommandList>\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":["value","renderLabel"],"mappings":"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"}
+{"version":3,"file":"Combobox.js","sources":["../../../src/components/Combobox/Combobox.tsx"],"sourcesContent":["import { CaretDown, Check, X } from '@phosphor-icons/react'\nimport { useEffect, useMemo, useRef, useState } from 'react'\n\nimport { cn } from '../../lib/utils'\nimport { Button, buttonVariants } from '../Button'\nimport { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '../Command'\nimport { PopoverContent, PopoverRoot, PopoverTrigger } from '../Popover'\nimport { TooltipContent, TooltipProvider, TooltipRoot, TooltipTrigger } from '../Tooltip'\n\nconst ComboboxOptionWithTooltip = ({ label }: { label: string }) => {\n  const textRef = useRef<HTMLSpanElement>(null)\n  const [isTruncated, setIsTruncated] = useState(false)\n\n  useEffect(() => {\n    const frame = requestAnimationFrame(() => {\n      if (textRef.current) {\n        setIsTruncated(textRef.current.scrollWidth > textRef.current.clientWidth)\n      }\n    })\n\n    return () => cancelAnimationFrame(frame)\n  }, [label])\n\n  return (\n    <TooltipProvider>\n      <TooltipRoot delayDuration={300}>\n        <TooltipTrigger asChild>\n          <span ref={textRef} className=\"block truncate\">\n            {label}\n          </span>\n        </TooltipTrigger>\n        {isTruncated && <TooltipContent>{label}</TooltipContent>}\n      </TooltipRoot>\n    </TooltipProvider>\n  )\n}\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}\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\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}\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\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 */\nexport const Combobox = <T extends object>(props: ComboboxProps<T>) => {\n  const {\n    id,\n    options,\n    getOptionValue,\n    getOptionLabel,\n    placeholder = 'Select...',\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    filterOptions,\n    multiple,\n    clearable = true,\n    onClear,\n    modal = false,\n    selectedMultiplePlaceholder = 'Selected',\n    multipleOptionsPlaceholder = 'Options',\n  } = props\n\n  const [open, setOpen] = useState(false)\n  const [searchTerm, setSearchTerm] = useState('')\n  const [isHovered, setIsHovered] = useState(false)\n\n  const closeOnSelect = props.closeOnSelect ?? !props.multiple\n\n  const filteredOptions = useMemo(() => {\n    if (!filterOptions) {\n      return options.filter((option) => getOptionLabel(option).toLowerCase().includes(searchTerm.toLowerCase()))\n    }\n\n    return searchTerm ? filterOptions(options, searchTerm) : options\n  }, [filterOptions, options, searchTerm, getOptionLabel])\n\n  const handleSelect = (currentValue: string) => {\n    if (multiple) {\n      const { value = [], onChange } = props\n      const isRemoving = value.includes(currentValue)\n\n      // If trying to remove the last item and clearable is false, don't allow it\n      if (isRemoving && !clearable && value.length === 1) {\n        return\n      }\n\n      const newValues = isRemoving ? value.filter((val) => val !== currentValue) : [...value, currentValue]\n      onChange(newValues)\n    } else {\n      const { value, onChange } = props\n      const newValue = clearable && currentValue === value ? '' : currentValue\n      onChange(newValue)\n    }\n\n    if (closeOnSelect) {\n      setOpen(false)\n    }\n  }\n\n  const handleRemove = (valueToRemove: string) => {\n    if (props.multiple) {\n      const { value = [], onChange } = props\n\n      // If trying to remove the last item and clearable is false, don't allow it\n      if (!clearable && value.length === 1) {\n        return\n      }\n\n      const newValues = value.filter((val) => val !== valueToRemove)\n      onChange(newValues)\n    }\n  }\n\n  const handleClear = (event: React.MouseEvent) => {\n    event.preventDefault()\n    event.stopPropagation()\n\n    if (multiple) {\n      const { onChange } = props\n\n      // Only clear if clearable is true\n      if (clearable) {\n        onChange([])\n      }\n    } else {\n      const { onChange } = props\n      onChange('')\n    }\n\n    if (typeof onClear === 'function') {\n      onClear()\n    }\n  }\n\n  const displayValue = useMemo(() => {\n    if (multiple) {\n      const { value = [], renderLabel } = props\n      if (value.length === 0) return placeholder\n\n      const selectedOptions = options.filter((option) => value.includes(getOptionValue(option)))\n\n      if (renderLabel) {\n        return renderLabel(selectedOptions, handleRemove)\n      }\n\n      return selectedOptions.map(getOptionLabel).join(', ')\n    }\n\n    const { value, renderLabel } = props\n    const selectedOption = options.find((option) => getOptionValue(option) === value)\n    if (renderLabel && selectedOption) {\n      return renderLabel(selectedOption)\n    }\n    return selectedOption ? getOptionLabel(selectedOption) : placeholder\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [props, getOptionLabel, getOptionValue, options, placeholder, multiple])\n\n  const hasValue = useMemo(() => {\n    if (multiple) {\n      return props.value && props.value.length > 0\n    }\n    return !!props.value\n  }, [props.value, multiple])\n\n  const showClearButton = onClear && hasValue && isHovered && clearable\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\">\n          <Command shouldFilter={false}>\n            <CommandInput\n              placeholder={searchPlaceholder}\n              disabled={loading}\n              value={searchTerm}\n              onValueChange={setSearchTerm}\n            />\n            <CommandList style={{ maxHeight }} className=\"overflow-auto\" onWheel={(event) => event.stopPropagation()}>\n              {loading ? (\n                <div className=\"text-muted-foreground flex items-center justify-center py-6 text-sm\">\n                  {loadingPlaceholder}\n                </div>\n              ) : (\n                <>\n                  {filteredOptions.length === 0 && <CommandEmpty>{emptyMessage}</CommandEmpty>}\n                  {multiple && props.value && props.value.length > 0 && (\n                    <CommandGroup heading={selectedMultiplePlaceholder}>\n                      {options\n                        .filter((option) => props.value?.includes(getOptionValue(option)))\n                        .map((option) => (\n                          <CommandItem\n                            key={getOptionValue(option)}\n                            value={getOptionValue(option)}\n                            onSelect={handleSelect}\n                          >\n                            <Check className=\"mr-2 h-4 w-4 opacity-100\" />\n                            <ComboboxOptionWithTooltip label={getOptionLabel(option)} />\n                          </CommandItem>\n                        ))}\n                    </CommandGroup>\n                  )}\n\n                  <CommandGroup heading={!multiple ? undefined : multipleOptionsPlaceholder}>\n                    {filteredOptions\n                      .filter((option) => !multiple || !props.value?.includes(getOptionValue(option)))\n                      .map((option) => {\n                        const optionValue = getOptionValue(option)\n                        const isSelected = multiple ? props.value?.includes(optionValue) : props.value === optionValue\n\n                        return (\n                          <CommandItem key={optionValue} value={optionValue} onSelect={handleSelect}>\n                            {renderOption ? (\n                              renderOption(option, isSelected ?? false)\n                            ) : (\n                              <>\n                                <Check className={`mr-2 h-4 w-4 ${isSelected ? 'opacity-100' : 'opacity-0'}`} />\n                                <ComboboxOptionWithTooltip label={getOptionLabel(option)} />\n                              </>\n                            )}\n                          </CommandItem>\n                        )\n                      })}\n                  </CommandGroup>\n                </>\n              )}\n            </CommandList>\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":["value","renderLabel"],"mappings":"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"}

package/dist/components/Command/Command.d.ts

@@ -77,4 +77,4 @@ declare const CommandShortcut: {
     ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
-export { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut, CommandSeparator, };
+export { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, };

package/dist/components/Command/Command.js

@@ -18,7 +18,7 @@ Command.displayName = Command$1.displayName;
 const CommandDialog = ({ children, ...props }) => {
   return /* @__PURE__ */ jsx(Dialog, { ...props, children: /* @__PURE__ */ jsx(DialogContent, { className: "overflow-hidden p-0", children: /* @__PURE__ */ jsx(Command, { className: "[&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5", children }) }) });
 };
-const CommandInput = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs("div", { className: "flex items-center border-b px-3", children: [
+const CommandInput = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs("div", { className: "flex h-12 items-center border-b px-3", children: [
   /* @__PURE__ */ jsx(MagnifyingGlass, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }),
   /* @__PURE__ */ jsx(
     Command$1.Input,

package/dist/components/Command/Command.js.map

@@ -1 +1 @@
-{"version":3,"file":"Command.js","sources":["../../../src/components/Command/Command.tsx"],"sourcesContent":["'use client'\n\nimport { MagnifyingGlass } from '@phosphor-icons/react'\nimport { type DialogProps } from '@radix-ui/react-dialog'\nimport { Command as CommandPrimitive } from 'cmdk'\nimport * as React from 'react'\n\nimport { Dialog, DialogContent } from '../Dialog'\n\nimport { cn } from '@/lib/utils'\n\nconst Command = React.forwardRef<\n  React.ComponentRef<typeof CommandPrimitive>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive\n    ref={ref}\n    className={cn('text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md bg-white', className)}\n    {...props}\n  />\n))\nCommand.displayName = CommandPrimitive.displayName\n\nconst CommandDialog = ({ children, ...props }: DialogProps) => {\n  return (\n    <Dialog {...props}>\n      <DialogContent className=\"overflow-hidden p-0\">\n        <Command className=\"[&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5\">\n          {children}\n        </Command>\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nconst CommandInput = React.forwardRef<\n  React.ComponentRef<typeof CommandPrimitive.Input>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>\n>(({ className, children, ...props }, ref) => (\n  <div className=\"flex items-center border-b px-3\">\n    <MagnifyingGlass className=\"mr-2 h-4 w-4 shrink-0 opacity-50\" />\n    <CommandPrimitive.Input\n      ref={ref}\n      className={cn(\n        'placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none disabled:cursor-not-allowed disabled:opacity-50',\n        className,\n      )}\n      {...props}\n    />\n    {children && <div className=\"ml-2\">{children}</div>}\n  </div>\n))\n\nCommandInput.displayName = CommandPrimitive.Input.displayName\n\nconst CommandList = React.forwardRef<\n  React.ComponentRef<typeof CommandPrimitive.List>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.List\n    ref={ref}\n    className={cn('max-h-[300px] overflow-x-hidden overflow-y-auto', className)}\n    {...props}\n  />\n))\n\nCommandList.displayName = CommandPrimitive.List.displayName\n\nconst CommandEmpty = React.forwardRef<\n  React.ComponentRef<typeof CommandPrimitive.Empty>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>\n>((props, ref) => <CommandPrimitive.Empty ref={ref} className=\"py-6 text-center text-sm\" {...props} />)\n\nCommandEmpty.displayName = CommandPrimitive.Empty.displayName\n\nconst CommandGroup = React.forwardRef<\n  React.ComponentRef<typeof CommandPrimitive.Group>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Group\n    ref={ref}\n    className={cn(\n      '[&_[cmdk-group-heading]]:text-muted-foreground text-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium',\n      className,\n    )}\n    {...props}\n  />\n))\n\nCommandGroup.displayName = CommandPrimitive.Group.displayName\n\nconst CommandSeparator = React.forwardRef<\n  React.ComponentRef<typeof CommandPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Separator ref={ref} className={cn('bg-border -mx-1 h-px', className)} {...props} />\n))\nCommandSeparator.displayName = CommandPrimitive.Separator.displayName\n\nconst CommandItem = React.forwardRef<\n  React.ComponentRef<typeof CommandPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Item\n    ref={ref}\n    className={cn(\n      'data-[selected=true]:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[selected=true]:bg-neutral-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',\n      className,\n    )}\n    {...props}\n  />\n))\n\nCommandItem.displayName = CommandPrimitive.Item.displayName\n\nconst CommandShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {\n  return <span className={cn('text-muted-foreground ml-auto text-xs tracking-widest', className)} {...props} />\n}\nCommandShortcut.displayName = 'CommandShortcut'\n\nexport {\n  Command,\n  CommandDialog,\n  CommandInput,\n  CommandList,\n  CommandEmpty,\n  CommandGroup,\n  CommandItem,\n  CommandShortcut,\n  CommandSeparator,\n}\n"],"names":[],"mappings":";;;;;;;;AAWA;AAIE;AAAC;AAAA;AACC;AACkH;AAC9G;AACN;AAEF;AAEA;AACE;AASF;AAEA;AAKI;AAA8D;AAC9D;AAAkB;AAAjB;AACC;AACW;AACT;AACA;AACF;AACI;AAAA;AACN;AAC6C;AAIjD;AAEA;AAIE;AAAkB;AAAjB;AACC;AAC0E;AACtE;AACN;AAGF;AAEA;AAKA;AAEA;AAIE;AAAkB;AAAjB;AACC;AACW;AACT;AACA;AACF;AACI;AACN;AAGF;AAEA;AAMA;AAEA;AAIE;AAAkB;AAAjB;AACC;AACW;AACT;AACA;AACF;AACI;AACN;AAGF;AAEA;AACE;AACF;AACA;;"}
+{"version":3,"file":"Command.js","sources":["../../../src/components/Command/Command.tsx"],"sourcesContent":["'use client'\n\nimport { MagnifyingGlass } from '@phosphor-icons/react'\nimport { type DialogProps } from '@radix-ui/react-dialog'\nimport { Command as CommandPrimitive } from 'cmdk'\nimport * as React from 'react'\n\nimport { Dialog, DialogContent } from '../Dialog'\n\nimport { cn } from '@/lib/utils'\n\nconst Command = React.forwardRef<\n  React.ComponentRef<typeof CommandPrimitive>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive\n    ref={ref}\n    className={cn('text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md bg-white', className)}\n    {...props}\n  />\n))\nCommand.displayName = CommandPrimitive.displayName\n\nconst CommandDialog = ({ children, ...props }: DialogProps) => {\n  return (\n    <Dialog {...props}>\n      <DialogContent className=\"overflow-hidden p-0\">\n        <Command className=\"[&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5\">\n          {children}\n        </Command>\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nconst CommandInput = React.forwardRef<\n  React.ComponentRef<typeof CommandPrimitive.Input>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>\n>(({ className, children, ...props }, ref) => (\n  <div className=\"flex h-12 items-center border-b px-3\">\n    <MagnifyingGlass className=\"mr-2 h-4 w-4 shrink-0 opacity-50\" />\n    <CommandPrimitive.Input\n      ref={ref}\n      className={cn(\n        'placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none disabled:cursor-not-allowed disabled:opacity-50',\n        className,\n      )}\n      {...props}\n    />\n    {children && <div className=\"ml-2\">{children}</div>}\n  </div>\n))\n\nCommandInput.displayName = CommandPrimitive.Input.displayName\n\nconst CommandList = React.forwardRef<\n  React.ComponentRef<typeof CommandPrimitive.List>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.List\n    ref={ref}\n    className={cn('max-h-[300px] overflow-x-hidden overflow-y-auto', className)}\n    {...props}\n  />\n))\n\nCommandList.displayName = CommandPrimitive.List.displayName\n\nconst CommandEmpty = React.forwardRef<\n  React.ComponentRef<typeof CommandPrimitive.Empty>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>\n>((props, ref) => <CommandPrimitive.Empty ref={ref} className=\"py-6 text-center text-sm\" {...props} />)\n\nCommandEmpty.displayName = CommandPrimitive.Empty.displayName\n\nconst CommandGroup = React.forwardRef<\n  React.ComponentRef<typeof CommandPrimitive.Group>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Group\n    ref={ref}\n    className={cn(\n      '[&_[cmdk-group-heading]]:text-muted-foreground text-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium',\n      className,\n    )}\n    {...props}\n  />\n))\n\nCommandGroup.displayName = CommandPrimitive.Group.displayName\n\nconst CommandSeparator = React.forwardRef<\n  React.ComponentRef<typeof CommandPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Separator ref={ref} className={cn('bg-border -mx-1 h-px', className)} {...props} />\n))\nCommandSeparator.displayName = CommandPrimitive.Separator.displayName\n\nconst CommandItem = React.forwardRef<\n  React.ComponentRef<typeof CommandPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Item\n    ref={ref}\n    className={cn(\n      'data-[selected=true]:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[selected=true]:bg-neutral-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',\n      className,\n    )}\n    {...props}\n  />\n))\n\nCommandItem.displayName = CommandPrimitive.Item.displayName\n\nconst CommandShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {\n  return <span className={cn('text-muted-foreground ml-auto text-xs tracking-widest', className)} {...props} />\n}\nCommandShortcut.displayName = 'CommandShortcut'\n\nexport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n}\n"],"names":[],"mappings":";;;;;;;;AAWA;AAIE;AAAC;AAAA;AACC;AACkH;AAC9G;AACN;AAEF;AAEA;AACE;AASF;AAEA;AAKI;AAA8D;AAC9D;AAAkB;AAAjB;AACC;AACW;AACT;AACA;AACF;AACI;AAAA;AACN;AAC6C;AAIjD;AAEA;AAIE;AAAkB;AAAjB;AACC;AAC0E;AACtE;AACN;AAGF;AAEA;AAKA;AAEA;AAIE;AAAkB;AAAjB;AACC;AACW;AACT;AACA;AACF;AACI;AACN;AAGF;AAEA;AAMA;AAEA;AAIE;AAAkB;AAAjB;AACC;AACW;AACT;AACA;AACF;AACI;AACN;AAGF;AAEA;AACE;AACF;AACA;;"}

package/dist/components/DatePicker/DatePicker.js

@@ -225,7 +225,7 @@ function DatePicker({
         className: cn(
           "relative flex w-fit items-center justify-start text-left font-normal hover:transition-opacity",
           !hasValue && "text-muted-foreground",
-          buttonVariants({ variant: "input" }),
+          buttonVariants({ variant: "input", size: "lg" }),
           buttonClassName
         ),
         disabled: typeof rest.disabled === "boolean" ? rest.disabled : false,

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, X } from '@phosphor-icons/react'\nimport { format as formatFn, Locale } from 'date-fns'\nimport { de, enGB, enUS, es, fr, it, pt } from 'date-fns/locale'\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 {\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\ntype SupportedLocaleString = 'enUS' | 'es' | 'pt' | 'enGB' | 'de' | 'it' | 'fr'\n\nconst localeMap: Record<SupportedLocaleString, Locale> = {\n  enUS,\n  es,\n  pt,\n  enGB,\n  de,\n  it,\n  fr,\n}\n\nexport type DateRange = {\n  from?: Date\n  to?: Date\n}\n\nexport type IsoDateRange = {\n  from?: string\n  to?: string\n}\n\ntype 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\ntype 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} & 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  ...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 = React.useMemo(() => {\n    if (typeof localeProp === 'string') {\n      return localeMap[localeProp]\n    }\n    return localeProp\n  }, [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' }),\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 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":";;;;;;;;;;;;;AA0BA;AAAyD;AACvD;AACA;AACA;AACA;AACA;AACA;AAEF;AA6GA;AAA4F;AAChF;AAC2C;AACvC;AACA;AACP;AACP;AACA;AACgB;AACY;AACG;AACV;AACrB;AACA;AACQ;AAEV;AACE;AACA;AACA;AACA;AACA;AAEA;AACE;AACE;AAA2B;AAE7B;AAAO;AAGT;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;AACsB;AACnC;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, X } from '@phosphor-icons/react'\nimport { format as formatFn, Locale } from 'date-fns'\nimport { de, enGB, enUS, es, fr, it, pt } from 'date-fns/locale'\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 {\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\ntype SupportedLocaleString = 'enUS' | 'es' | 'pt' | 'enGB' | 'de' | 'it' | 'fr'\n\nconst localeMap: Record<SupportedLocaleString, Locale> = {\n  enUS,\n  es,\n  pt,\n  enGB,\n  de,\n  it,\n  fr,\n}\n\nexport type DateRange = {\n  from?: Date\n  to?: Date\n}\n\nexport type IsoDateRange = {\n  from?: string\n  to?: string\n}\n\ntype 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\ntype 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} & 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  ...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 = React.useMemo(() => {\n    if (typeof localeProp === 'string') {\n      return localeMap[localeProp]\n    }\n    return localeProp\n  }, [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 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":";;;;;;;;;;;;;AA0BA;AAAyD;AACvD;AACA;AACA;AACA;AACA;AACA;AAEF;AA6GA;AAA4F;AAChF;AAC2C;AACvC;AACA;AACP;AACP;AACA;AACgB;AACY;AACG;AACV;AACrB;AACA;AACQ;AAEV;AACE;AACA;AACA;AACA;AACA;AAEA;AACE;AACE;AAA2B;AAE7B;AAAO;AAGT;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;;"}

package/dist/components/InlineMultiSelect/InlineMultiSelect.js

@@ -2,7 +2,7 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { X, CaretUpDown, Check } from '@phosphor-icons/react';
 import * as React from 'react';
-import { Button } from '../Button/Button.js';
+import { Button, buttonVariants } from '../Button/Button.js';
 import { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem } from '../Command/Command.js';
 import { PopoverRoot, PopoverTrigger, PopoverContent } from '../Popover/Popover.js';
 import { cn } from '../../lib/utils.js';
@@ -77,6 +77,7 @@ const InlineMultiSelect = ({
         className: cn(
           "w-full justify-between bg-[#fff] pr-2 pl-2",
           fieldState?.invalid ? "border-error-400 focus-within:border-error-700" : "",
+          buttonVariants({ variant: "ghost", size: "lg" }),
           className
         ),
         children: [

package/dist/components/InlineMultiSelect/InlineMultiSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"InlineMultiSelect.js","sources":["../../../src/components/InlineMultiSelect/InlineMultiSelect.tsx"],"sourcesContent":["'use client'\n\nimport { CaretUpDown, Check, X } from '@phosphor-icons/react'\nimport * as React from 'react'\nimport { ControllerFieldState } from 'react-hook-form'\n\nimport { Button } from '../Button'\nimport { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '../Command'\nimport { PopoverRoot, PopoverContent, PopoverTrigger } from '../Popover'\n\nimport { cn } from '@/lib/utils'\n\n/** Represents a selectable option in the InlineMultiSelect */\ntype Option = { value: string; label: string }\n\n/** Props for the InlineMultiSelect component */\nexport type InlineMultiSelectProps = {\n  /** Array of options to display in the select */\n  options: Array<Option>\n  /** Currently selected values (controlled) */\n  value?: Array<string>\n  /** Callback fired when selection changes */\n  onChange?: (value: Array<string>) => void\n  /** Form field state from react-hook-form */\n  fieldState?: ControllerFieldState\n  /** Default selected values (uncontrolled) */\n  defaultValue?: Array<string>\n  /** Placeholder text when no items are selected */\n  placeholder?: string\n  /** Text to show when no options match the search */\n  notFoundText?: string\n  /** Placeholder for the search input */\n  commandInputPlaceholder?: string\n  /** Maximum number of items that can be selected */\n  max?: number\n  /** Additional CSS classes */\n  className?: string\n  /** Whether the component is in a loading state */\n  loading?: boolean\n  /** Message to show when in loading state */\n  loadingPlaceholder?: string\n  /** Whether the component is in a modal */\n  modal?: boolean\n  /** Whether to close the dropdown when an option is selected. Defaults to false for multi-select. */\n  closeOnSelect?: boolean\n}\n\n/**\n * InlineMultiSelect Component\n *\n * A controlled multi-select component that displays selected items inline with search functionality.\n * Supports keyboard navigation, maximum selection limit, and custom styling.\n */\nexport const InlineMultiSelect = ({\n  options,\n  value,\n  onChange,\n  defaultValue = [],\n  placeholder,\n  notFoundText,\n  commandInputPlaceholder,\n  max,\n  className,\n  fieldState,\n  loading = false,\n  modal = false,\n  loadingPlaceholder = 'Cargando...',\n  closeOnSelect = false,\n}: InlineMultiSelectProps) => {\n  const inputRef = React.useRef<HTMLInputElement>(null)\n  const containerRef = React.useRef<HTMLDivElement>(null)\n  const [open, setOpen] = React.useState(false)\n  const [inputValue, setInputValue] = React.useState('')\n\n  const isControlled = value !== undefined\n\n  const [internalSelected, setInternalSelected] = React.useState<Array<string>>(() => defaultValue)\n\n  const selectedValues = isControlled ? value! : internalSelected\n  const selected = React.useMemo(\n    () => options.filter((option) => selectedValues.includes(option.value)),\n    [options, selectedValues],\n  )\n\n  const [visibleItems, setVisibleItems] = React.useState<Array<Option>>([])\n  const [hiddenCount, setHiddenCount] = React.useState(0)\n\n  React.useEffect(() => {\n    const maxVisibleItems = 2\n    const visibleCount = Math.min(selected.length, maxVisibleItems)\n    setVisibleItems(selected.slice(0, visibleCount))\n    setHiddenCount(selected.length - visibleCount)\n  }, [selected])\n\n  const handleSelectionChange = (newSelected: Array<string>) => {\n    if (!isControlled) {\n      setInternalSelected(newSelected)\n    }\n    onChange?.(newSelected)\n  }\n\n  const removeItem = (itemToRemove?: Option) => {\n    const newValues = itemToRemove\n      ? selectedValues.filter((val) => val !== itemToRemove.value)\n      : selectedValues.slice(0, -1)\n    handleSelectionChange(newValues)\n  }\n\n  const handleUnselect = (item: Option, event: React.MouseEvent | React.KeyboardEvent) => {\n    event.stopPropagation()\n    event.preventDefault()\n    removeItem(item)\n  }\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    const input = inputRef.current\n    if (input) {\n      if ((event.key === 'Backspace' || event.key === 'Delete') && input.value === '') {\n        removeItem()\n      }\n      if (event.key === 'Escape') {\n        input.blur()\n      }\n    }\n  }\n\n  return (\n    <PopoverRoot open={open} onOpenChange={setOpen} modal={modal}>\n      <Command onKeyDown={handleKeyDown}>\n        <PopoverTrigger asChild>\n          <Button\n            variant=\"ghost\"\n            aria-expanded={open}\n            className={cn(\n              'w-full justify-between bg-[#fff] pr-2 pl-2',\n              fieldState?.invalid ? 'border-error-400 focus-within:border-error-700' : '',\n              className,\n            )}\n          >\n            <div ref={containerRef} className=\"flex flex-1 flex-wrap items-center gap-1 overflow-hidden pr-2\">\n              <div className=\"flex items-center whitespace-nowrap\">\n                {selected.length > 0 ? (\n                  <>\n                    {visibleItems.map((item) => (\n                      <div key={item.value} className=\"bg-muted flex items-center gap-1 rounded px-1 py-0.5\">\n                        <span className=\"text-sm\">{item.label}</span>\n                        <span\n                          role=\"button\"\n                          tabIndex={0}\n                          onClick={(event) => handleUnselect(item, event)}\n                          onKeyDown={(event) => {\n                            if (event.key === 'Enter' || event.key === ' ') {\n                              handleUnselect(item, event)\n                            }\n                          }}\n                          className=\"hover:bg-muted-foreground/20 flex h-4 w-4 items-center justify-center rounded-full\"\n                        >\n                          <X className=\"text-muted-foreground h-3 w-3\" />\n                        </span>\n                      </div>\n                    ))}\n                    {hiddenCount > 0 && <span className=\"text-muted-foreground text-sm\">+{hiddenCount}</span>}\n                  </>\n                ) : (\n                  <span className=\"text-muted-foreground\">{placeholder}</span>\n                )}\n              </div>\n            </div>\n            <CaretUpDown className=\"h-4 w-4 opacity-50\" />\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent className=\"px-0 py-0\">\n          <CommandInput\n            placeholder={commandInputPlaceholder ?? 'Search...'}\n            disabled={loading}\n            value={inputValue}\n            onValueChange={setInputValue}\n          />\n          <CommandList>\n            {loading ? (\n              <div className=\"text-muted-foreground flex items-center justify-center py-6 text-sm\">\n                {loadingPlaceholder}\n              </div>\n            ) : (\n              <>\n                <CommandEmpty>{notFoundText ?? 'Options not found'}</CommandEmpty>\n                {open && (\n                  <CommandGroup>\n                    {options.map((item) => {\n                      const isSelected = selectedValues.includes(item.value)\n                      return (\n                        <CommandItem\n                          key={item.value}\n                          onMouseDown={(event) => {\n                            event.preventDefault()\n                            event.stopPropagation()\n                          }}\n                          onSelect={() => {\n                            if (isSelected) {\n                              handleSelectionChange(selectedValues.filter((val) => val !== item.value))\n                            } else {\n                              if (max && selectedValues.length >= max) return\n                              handleSelectionChange([...selectedValues, item.value])\n                              setInputValue('')\n                            }\n\n                            if (closeOnSelect) {\n                              setOpen(false)\n                            }\n                          }}\n                        >\n                          <div className=\"flex items-center\">\n                            <div className=\"mr-2\">\n                              {isSelected ? <Check className=\"h-4 w-4\" /> : <div className=\"h-4 w-4\" />}\n                            </div>\n                            <div>{item.label}</div>\n                          </div>\n                        </CommandItem>\n                      )\n                    })}\n                  </CommandGroup>\n                )}\n              </>\n            )}\n          </CommandList>\n        </PopoverContent>\n      </Command>\n    </PopoverRoot>\n  )\n}\n"],"names":[],"mappings":";;;;;;;;;AAqDO;AAA2B;AAChC;AACA;AACA;AACgB;AAChB;AACA;AACA;AACA;AACA;AACA;AACU;AACF;AACa;AAEvB;AACE;AACA;AACA;AACA;AAEA;AAEA;AAEA;AACA;AAAuB;AACiD;AAC9C;AAG1B;AACA;AAEA;AACE;AACA;AACA;AACA;AAA6C;AAG/C;AACE;AACE;AAA+B;AAEjC;AAAsB;AAGxB;AACE;AAGA;AAA+B;AAGjC;AACE;AACA;AACA;AAAe;AAGjB;AACE;AACA;AACE;AACE;AAAW;AAEb;AACE;AAAW;AACb;AACF;AAGF;AAGM;AACE;AAAC;AAAA;AACS;AACO;AACJ;AACT;AACyE;AACzE;AACF;AAEA;AAIS;AAEG;AAAsC;AACtC;AAAC;AAAA;AACM;AACK;AACoC;AAE5C;AACE;AAA0B;AAC5B;AACF;AACU;AAEmC;AAAA;AAC/C;AAEH;AACmE;AAAA;AAAE;AAAY;AAM1F;AAC4C;AAAA;AAAA;AAEhD;AAEE;AAAA;AAAC;AAAA;AACyC;AAC9B;AACH;AACQ;AAAA;AACjB;AAQM;AAAmD;AAI7C;AACA;AACE;AAAC;AAAA;AAGG;AACA;AAAsB;AACxB;AAEE;AACE;AAAwE;AAExE;AACA;AACA;AAAgB;AAGlB;AACE;AAAa;AACf;AACF;AAGE;AAEA;AACiB;AACnB;AAAA;AAxBU;AAyBZ;AAGN;AAIR;AACF;AAIR;;"}
+{"version":3,"file":"InlineMultiSelect.js","sources":["../../../src/components/InlineMultiSelect/InlineMultiSelect.tsx"],"sourcesContent":["'use client'\n\nimport { CaretUpDown, Check, X } from '@phosphor-icons/react'\nimport * as React from 'react'\nimport { ControllerFieldState } from 'react-hook-form'\n\nimport { Button, buttonVariants } from '../Button'\nimport { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '../Command'\nimport { PopoverContent, PopoverRoot, PopoverTrigger } from '../Popover'\n\nimport { cn } from '@/lib/utils'\n\n/** Represents a selectable option in the InlineMultiSelect */\ntype Option = { value: string; label: string }\n\n/** Props for the InlineMultiSelect component */\nexport type InlineMultiSelectProps = {\n  /** Array of options to display in the select */\n  options: Array<Option>\n  /** Currently selected values (controlled) */\n  value?: Array<string>\n  /** Callback fired when selection changes */\n  onChange?: (value: Array<string>) => void\n  /** Form field state from react-hook-form */\n  fieldState?: ControllerFieldState\n  /** Default selected values (uncontrolled) */\n  defaultValue?: Array<string>\n  /** Placeholder text when no items are selected */\n  placeholder?: string\n  /** Text to show when no options match the search */\n  notFoundText?: string\n  /** Placeholder for the search input */\n  commandInputPlaceholder?: string\n  /** Maximum number of items that can be selected */\n  max?: number\n  /** Additional CSS classes */\n  className?: string\n  /** Whether the component is in a loading state */\n  loading?: boolean\n  /** Message to show when in loading state */\n  loadingPlaceholder?: string\n  /** Whether the component is in a modal */\n  modal?: boolean\n  /** Whether to close the dropdown when an option is selected. Defaults to false for multi-select. */\n  closeOnSelect?: boolean\n}\n\n/**\n * InlineMultiSelect Component\n *\n * A controlled multi-select component that displays selected items inline with search functionality.\n * Supports keyboard navigation, maximum selection limit, and custom styling.\n */\nexport const InlineMultiSelect = ({\n  options,\n  value,\n  onChange,\n  defaultValue = [],\n  placeholder,\n  notFoundText,\n  commandInputPlaceholder,\n  max,\n  className,\n  fieldState,\n  loading = false,\n  modal = false,\n  loadingPlaceholder = 'Cargando...',\n  closeOnSelect = false,\n}: InlineMultiSelectProps) => {\n  const inputRef = React.useRef<HTMLInputElement>(null)\n  const containerRef = React.useRef<HTMLDivElement>(null)\n  const [open, setOpen] = React.useState(false)\n  const [inputValue, setInputValue] = React.useState('')\n\n  const isControlled = value !== undefined\n\n  const [internalSelected, setInternalSelected] = React.useState<Array<string>>(() => defaultValue)\n\n  const selectedValues = isControlled ? value! : internalSelected\n  const selected = React.useMemo(\n    () => options.filter((option) => selectedValues.includes(option.value)),\n    [options, selectedValues],\n  )\n\n  const [visibleItems, setVisibleItems] = React.useState<Array<Option>>([])\n  const [hiddenCount, setHiddenCount] = React.useState(0)\n\n  React.useEffect(() => {\n    const maxVisibleItems = 2\n    const visibleCount = Math.min(selected.length, maxVisibleItems)\n    setVisibleItems(selected.slice(0, visibleCount))\n    setHiddenCount(selected.length - visibleCount)\n  }, [selected])\n\n  const handleSelectionChange = (newSelected: Array<string>) => {\n    if (!isControlled) {\n      setInternalSelected(newSelected)\n    }\n    onChange?.(newSelected)\n  }\n\n  const removeItem = (itemToRemove?: Option) => {\n    const newValues = itemToRemove\n      ? selectedValues.filter((val) => val !== itemToRemove.value)\n      : selectedValues.slice(0, -1)\n    handleSelectionChange(newValues)\n  }\n\n  const handleUnselect = (item: Option, event: React.MouseEvent | React.KeyboardEvent) => {\n    event.stopPropagation()\n    event.preventDefault()\n    removeItem(item)\n  }\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    const input = inputRef.current\n    if (input) {\n      if ((event.key === 'Backspace' || event.key === 'Delete') && input.value === '') {\n        removeItem()\n      }\n      if (event.key === 'Escape') {\n        input.blur()\n      }\n    }\n  }\n\n  return (\n    <PopoverRoot open={open} onOpenChange={setOpen} modal={modal}>\n      <Command onKeyDown={handleKeyDown}>\n        <PopoverTrigger asChild>\n          <Button\n            variant=\"ghost\"\n            aria-expanded={open}\n            className={cn(\n              'w-full justify-between bg-[#fff] pr-2 pl-2',\n              fieldState?.invalid ? 'border-error-400 focus-within:border-error-700' : '',\n              buttonVariants({ variant: 'ghost', size: 'lg' }),\n              className,\n            )}\n          >\n            <div ref={containerRef} className=\"flex flex-1 flex-wrap items-center gap-1 overflow-hidden pr-2\">\n              <div className=\"flex items-center whitespace-nowrap\">\n                {selected.length > 0 ? (\n                  <>\n                    {visibleItems.map((item) => (\n                      <div key={item.value} className=\"bg-muted flex items-center gap-1 rounded px-1 py-0.5\">\n                        <span className=\"text-sm\">{item.label}</span>\n                        <span\n                          role=\"button\"\n                          tabIndex={0}\n                          onClick={(event) => handleUnselect(item, event)}\n                          onKeyDown={(event) => {\n                            if (event.key === 'Enter' || event.key === ' ') {\n                              handleUnselect(item, event)\n                            }\n                          }}\n                          className=\"hover:bg-muted-foreground/20 flex h-4 w-4 items-center justify-center rounded-full\"\n                        >\n                          <X className=\"text-muted-foreground h-3 w-3\" />\n                        </span>\n                      </div>\n                    ))}\n                    {hiddenCount > 0 && <span className=\"text-muted-foreground text-sm\">+{hiddenCount}</span>}\n                  </>\n                ) : (\n                  <span className=\"text-muted-foreground\">{placeholder}</span>\n                )}\n              </div>\n            </div>\n            <CaretUpDown className=\"h-4 w-4 opacity-50\" />\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent className=\"px-0 py-0\">\n          <CommandInput\n            placeholder={commandInputPlaceholder ?? 'Search...'}\n            disabled={loading}\n            value={inputValue}\n            onValueChange={setInputValue}\n          />\n          <CommandList>\n            {loading ? (\n              <div className=\"text-muted-foreground flex items-center justify-center py-6 text-sm\">\n                {loadingPlaceholder}\n              </div>\n            ) : (\n              <>\n                <CommandEmpty>{notFoundText ?? 'Options not found'}</CommandEmpty>\n                {open && (\n                  <CommandGroup>\n                    {options.map((item) => {\n                      const isSelected = selectedValues.includes(item.value)\n                      return (\n                        <CommandItem\n                          key={item.value}\n                          onMouseDown={(event) => {\n                            event.preventDefault()\n                            event.stopPropagation()\n                          }}\n                          onSelect={() => {\n                            if (isSelected) {\n                              handleSelectionChange(selectedValues.filter((val) => val !== item.value))\n                            } else {\n                              if (max && selectedValues.length >= max) return\n                              handleSelectionChange([...selectedValues, item.value])\n                              setInputValue('')\n                            }\n\n                            if (closeOnSelect) {\n                              setOpen(false)\n                            }\n                          }}\n                        >\n                          <div className=\"flex items-center\">\n                            <div className=\"mr-2\">\n                              {isSelected ? <Check className=\"h-4 w-4\" /> : <div className=\"h-4 w-4\" />}\n                            </div>\n                            <div>{item.label}</div>\n                          </div>\n                        </CommandItem>\n                      )\n                    })}\n                  </CommandGroup>\n                )}\n              </>\n            )}\n          </CommandList>\n        </PopoverContent>\n      </Command>\n    </PopoverRoot>\n  )\n}\n"],"names":[],"mappings":";;;;;;;;;AAqDO;AAA2B;AAChC;AACA;AACA;AACgB;AAChB;AACA;AACA;AACA;AACA;AACA;AACU;AACF;AACa;AAEvB;AACE;AACA;AACA;AACA;AAEA;AAEA;AAEA;AACA;AAAuB;AACiD;AAC9C;AAG1B;AACA;AAEA;AACE;AACA;AACA;AACA;AAA6C;AAG/C;AACE;AACE;AAA+B;AAEjC;AAAsB;AAGxB;AACE;AAGA;AAA+B;AAGjC;AACE;AACA;AACA;AAAe;AAGjB;AACE;AACA;AACE;AACE;AAAW;AAEb;AACE;AAAW;AACb;AACF;AAGF;AAGM;AACE;AAAC;AAAA;AACS;AACO;AACJ;AACT;AACyE;AAC1B;AAC/C;AACF;AAEA;AAIS;AAEG;AAAsC;AACtC;AAAC;AAAA;AACM;AACK;AACoC;AAE5C;AACE;AAA0B;AAC5B;AACF;AACU;AAEmC;AAAA;AAC/C;AAEH;AACmE;AAAA;AAAE;AAAY;AAM1F;AAC4C;AAAA;AAAA;AAEhD;AAEE;AAAA;AAAC;AAAA;AACyC;AAC9B;AACH;AACQ;AAAA;AACjB;AAQM;AAAmD;AAI7C;AACA;AACE;AAAC;AAAA;AAGG;AACA;AAAsB;AACxB;AAEE;AACE;AAAwE;AAExE;AACA;AACA;AAAgB;AAGlB;AACE;AAAa;AACf;AACF;AAGE;AAEA;AACiB;AACnB;AAAA;AAxBU;AAyBZ;AAGN;AAIR;AACF;AAIR;;"}

package/dist/components/Input/Input.js

@@ -112,7 +112,7 @@ const Input = React.forwardRef(
       );
     };
     const renderClearIcon = () => {
-      if (disabled || hasStepControls || isHtmlTypePassword) return null;
+      if (disabled || hasStepControls || isHtmlTypePassword || !onClear) return null;
       return /* @__PURE__ */ jsx(
         "div",
         {
@@ -161,7 +161,7 @@ const Input = React.forwardRef(
           "div",
           {
             className: cn(
-              "flex h-10 items-center rounded-l-lg border-y border-l border-neutral-200 bg-neutral-50 pr-2 pl-4 text-neutral-300"
+              "flex h-12 items-center rounded-l-lg border-y border-l border-neutral-200 bg-neutral-50 pr-2 pl-4 text-neutral-300"
             ),
             children: groupText
           }
@@ -170,7 +170,7 @@ const Input = React.forwardRef(
           "div",
           {
             className: cn(
-              "relative flex h-10 w-full items-center rounded-lg border border-neutral-200 bg-white px-3 transition-colors focus-within:border-neutral-950",
+              "relative flex h-12 w-full items-center rounded-lg border border-neutral-200 bg-white px-3 transition-colors focus-within:border-neutral-950",
               groupText && "rounded-l-none",
               disabled && "bg-neutral-50",
               error && "border-error-400 focus-within:border-error-700",

package/dist/components/Input/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sources":["../../../src/components/Input/Input.tsx"],"sourcesContent":["import { Minus, Plus, X } from '@phosphor-icons/react'\nimport { Eye, EyeSlash, WarningCircle } from '@phosphor-icons/react/dist/ssr'\nimport * as React from 'react'\n\nimport { cn } from '@/lib/utils'\n\nexport type InputProps = {\n  htmlType?: 'text' | 'tel' | 'email' | 'number' | 'password' | 'url'\n  startContent?: React.ReactElement\n  endContent?: React.ReactElement\n  groupText?: string\n  disabled?: boolean\n  error?: boolean | string\n  stepControls?: boolean\n  inputClassName?: string\n  /** Callback function executed when the clear button is clicked. When provided, an X button will appear on hover to clear the input. */\n  onClear?: boolean | (() => void)\n} & React.InputHTMLAttributes<HTMLInputElement>\n\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(\n  (\n    {\n      className,\n      htmlType = 'text',\n      placeholder,\n      startContent,\n      endContent,\n      groupText,\n      disabled,\n      error,\n      stepControls,\n      value: controlledValue,\n      onChange: controlledOnChange,\n      inputClassName,\n      onClear = true,\n      ...props\n    },\n    ref,\n  ) => {\n    const isHtmlTypePassword = htmlType === 'password'\n    const isHtmlTypeNumber = htmlType === 'number'\n    const hasStepControls = stepControls && isHtmlTypeNumber\n\n    const [type, setType] = React.useState(htmlType)\n    const [internalValue, setInternalValue] = React.useState(controlledValue)\n    const [isHovered, setIsHovered] = React.useState(false)\n\n    React.useEffect(() => {\n      setInternalValue(controlledValue)\n    }, [controlledValue])\n\n    const toggleType = () => {\n      setType(type === 'password' ? 'text' : 'password')\n    }\n\n    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n      setInternalValue(event.target.value)\n      if (controlledOnChange) {\n        controlledOnChange(event)\n      }\n    }\n\n    const handleStepChange = (increment: number) => {\n      const currentValue = Number(internalValue ?? 0)\n      const newValue = currentValue + increment\n      if (newValue >= 0) {\n        const event = {\n          target: { value: newValue.toString() },\n        } as React.ChangeEvent<HTMLInputElement>\n        handleChange(event)\n      }\n    }\n\n    const handleClear = () => {\n      const event = {\n        target: { value: '' },\n      } as React.ChangeEvent<HTMLInputElement>\n      handleChange(event)\n\n      if (typeof onClear === 'function') {\n        onClear()\n      }\n    }\n\n    const renderPasswordEye = () => {\n      if (!isHtmlTypePassword) return null\n\n      return (\n        <button\n          type=\"button\"\n          className=\"flex aspect-square cursor-pointer items-center justify-center rounded-full p-2 transition-colors hover:bg-neutral-50\"\n          onClick={() => toggleType()}\n        >\n          {type === 'password' ? (\n            <EyeSlash size={20} data-testid=\"password-eye-closed\" />\n          ) : (\n            <Eye size={20} data-testid=\"password-eye-open\" />\n          )}\n        </button>\n      )\n    }\n\n    const renderErrorIcon = () => {\n      if (isHtmlTypePassword || !error || hasStepControls) return null\n      return (\n        <div>\n          <WarningCircle\n            data-testid=\"exclaim-icon\"\n            className={cn(\n              'text-error-500 transition-opacity duration-150',\n              showClearIcon ? 'opacity-0' : 'opacity-100',\n            )}\n            size={18}\n          />\n        </div>\n      )\n    }\n\n    const renderStepControlsIncrement = () => {\n      if (!hasStepControls) return null\n      return (\n        <button\n          type=\"button\"\n          disabled={disabled}\n          onClick={() => handleStepChange(1)}\n          className=\"p-2\"\n          aria-label=\"Increment\"\n        >\n          <Plus data-testid=\"increment-button\" />\n        </button>\n      )\n    }\n\n    const renderEndContent = () => {\n      if (isHtmlTypePassword || error || hasStepControls || !endContent) return null\n      return (\n        <div\n          className={cn(\n            'text-neutral-300 transition-opacity duration-150',\n            showClearIcon ? 'opacity-0' : 'opacity-100',\n          )}\n        >\n          {endContent}\n        </div>\n      )\n    }\n\n    const renderClearIcon = () => {\n      if (disabled || hasStepControls || isHtmlTypePassword) return null\n\n      return (\n        <div\n          className={cn(\n            'absolute right-3 z-10 flex h-full w-10 items-center justify-end rounded-r-lg',\n            !endContent && !error\n              ? 'bg-gradient-to-l from-white from-60% via-white/80 via-80% to-transparent transition-opacity duration-150'\n              : 'bg-transparent',\n            showClearIcon ? 'opacity-100' : 'opacity-0',\n          )}\n        >\n          <X\n            data-testid=\"clear-button\"\n            className={cn(\n              'h-4 w-4 shrink-0 cursor-pointer transition-opacity duration-150',\n              showClearIcon ? 'opacity-100 hover:opacity-70' : 'opacity-0',\n            )}\n            onClick={handleClear}\n          />\n        </div>\n      )\n    }\n\n    const renderStartContent = () => {\n      if (!startContent) return null\n      return <div className=\"text-neutral-300\">{startContent}</div>\n    }\n\n    const renderStepControlsDecrement = () => {\n      if (!hasStepControls) return null\n      return (\n        <button\n          type=\"button\"\n          disabled={disabled}\n          onClick={() => handleStepChange(-1)}\n          className=\"p-2\"\n          aria-label=\"Decrement\"\n        >\n          <Minus data-testid=\"decrement-button\" />\n        </button>\n      )\n    }\n\n    const hasValue = Boolean(internalValue && String(internalValue).trim() !== '')\n    const showClearIcon = onClear && hasValue && isHovered && !disabled && !isHtmlTypePassword && !hasStepControls\n\n    return (\n      <div className=\"flex w-full flex-col gap-1\">\n        <div className=\"flex w-full items-center\">\n          {groupText && (\n            <div\n              className={cn(\n                'flex h-10 items-center rounded-l-lg border-y border-l border-neutral-200 bg-neutral-50 pr-2 pl-4 text-neutral-300',\n              )}\n            >\n              {groupText}\n            </div>\n          )}\n          <div\n            className={cn(\n              'relative flex h-10 w-full items-center rounded-lg border border-neutral-200 bg-white px-3 transition-colors focus-within:border-neutral-950',\n              groupText && 'rounded-l-none',\n              disabled && 'bg-neutral-50',\n              error && 'border-error-400 focus-within:border-error-700',\n              className,\n            )}\n            onMouseEnter={() => setIsHovered(true)}\n            onMouseLeave={() => setIsHovered(false)}\n          >\n            {renderStartContent()}\n            {renderStepControlsDecrement()}\n            <input\n              type={type}\n              className={cn(\n                'w-full bg-transparent px-2 outline-0 transition-colors placeholder:text-neutral-300 disabled:cursor-not-allowed disabled:opacity-50',\n                hasStepControls && 'text-center',\n                inputClassName,\n              )}\n              ref={ref}\n              onChange={handleChange}\n              placeholder={placeholder}\n              disabled={disabled}\n              value={internalValue}\n              onKeyDown={(event) => {\n                if (isHtmlTypeNumber && (event.key === 'e' || event.key === 'E' || event.key === '-')) {\n                  event.preventDefault()\n                }\n              }}\n              {...props}\n            />\n            {renderPasswordEye()}\n            {renderClearIcon()}\n            {renderErrorIcon()}\n            {renderStepControlsIncrement()}\n            {renderEndContent()}\n          </div>\n        </div>\n        {typeof error === 'string' && <span className=\"text-error-500 text-sm\">{error}</span>}\n      </div>\n    )\n  },\n)\nInput.displayName = 'Input'\n\nexport { Input }\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Input.js","sources":["../../../src/components/Input/Input.tsx"],"sourcesContent":["import { Minus, Plus, X } from '@phosphor-icons/react'\nimport { Eye, EyeSlash, WarningCircle } from '@phosphor-icons/react/dist/ssr'\nimport * as React from 'react'\n\nimport { cn } from '@/lib/utils'\n\nexport type InputProps = {\n  htmlType?: 'text' | 'tel' | 'email' | 'number' | 'password' | 'url'\n  startContent?: React.ReactElement\n  endContent?: React.ReactElement\n  groupText?: string\n  disabled?: boolean\n  error?: boolean | string\n  stepControls?: boolean\n  inputClassName?: string\n  /** Callback function executed when the clear button is clicked. When provided, an X button will appear on hover to clear the input. */\n  onClear?: boolean | (() => void)\n} & React.InputHTMLAttributes<HTMLInputElement>\n\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(\n  (\n    {\n      className,\n      htmlType = 'text',\n      placeholder,\n      startContent,\n      endContent,\n      groupText,\n      disabled,\n      error,\n      stepControls,\n      value: controlledValue,\n      onChange: controlledOnChange,\n      inputClassName,\n      onClear = true,\n      ...props\n    },\n    ref,\n  ) => {\n    const isHtmlTypePassword = htmlType === 'password'\n    const isHtmlTypeNumber = htmlType === 'number'\n    const hasStepControls = stepControls && isHtmlTypeNumber\n\n    const [type, setType] = React.useState(htmlType)\n    const [internalValue, setInternalValue] = React.useState(controlledValue)\n    const [isHovered, setIsHovered] = React.useState(false)\n\n    React.useEffect(() => {\n      setInternalValue(controlledValue)\n    }, [controlledValue])\n\n    const toggleType = () => {\n      setType(type === 'password' ? 'text' : 'password')\n    }\n\n    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n      setInternalValue(event.target.value)\n      if (controlledOnChange) {\n        controlledOnChange(event)\n      }\n    }\n\n    const handleStepChange = (increment: number) => {\n      const currentValue = Number(internalValue ?? 0)\n      const newValue = currentValue + increment\n      if (newValue >= 0) {\n        const event = {\n          target: { value: newValue.toString() },\n        } as React.ChangeEvent<HTMLInputElement>\n        handleChange(event)\n      }\n    }\n\n    const handleClear = () => {\n      const event = {\n        target: { value: '' },\n      } as React.ChangeEvent<HTMLInputElement>\n      handleChange(event)\n\n      if (typeof onClear === 'function') {\n        onClear()\n      }\n    }\n\n    const renderPasswordEye = () => {\n      if (!isHtmlTypePassword) return null\n\n      return (\n        <button\n          type=\"button\"\n          className=\"flex aspect-square cursor-pointer items-center justify-center rounded-full p-2 transition-colors hover:bg-neutral-50\"\n          onClick={() => toggleType()}\n        >\n          {type === 'password' ? (\n            <EyeSlash size={20} data-testid=\"password-eye-closed\" />\n          ) : (\n            <Eye size={20} data-testid=\"password-eye-open\" />\n          )}\n        </button>\n      )\n    }\n\n    const renderErrorIcon = () => {\n      if (isHtmlTypePassword || !error || hasStepControls) return null\n      return (\n        <div>\n          <WarningCircle\n            data-testid=\"exclaim-icon\"\n            className={cn(\n              'text-error-500 transition-opacity duration-150',\n              showClearIcon ? 'opacity-0' : 'opacity-100',\n            )}\n            size={18}\n          />\n        </div>\n      )\n    }\n\n    const renderStepControlsIncrement = () => {\n      if (!hasStepControls) return null\n      return (\n        <button\n          type=\"button\"\n          disabled={disabled}\n          onClick={() => handleStepChange(1)}\n          className=\"p-2\"\n          aria-label=\"Increment\"\n        >\n          <Plus data-testid=\"increment-button\" />\n        </button>\n      )\n    }\n\n    const renderEndContent = () => {\n      if (isHtmlTypePassword || error || hasStepControls || !endContent) return null\n      return (\n        <div\n          className={cn(\n            'text-neutral-300 transition-opacity duration-150',\n            showClearIcon ? 'opacity-0' : 'opacity-100',\n          )}\n        >\n          {endContent}\n        </div>\n      )\n    }\n\n    const renderClearIcon = () => {\n      if (disabled || hasStepControls || isHtmlTypePassword || !onClear) return null\n\n      return (\n        <div\n          className={cn(\n            'absolute right-3 z-10 flex h-full w-10 items-center justify-end rounded-r-lg',\n            !endContent && !error\n              ? 'bg-gradient-to-l from-white from-60% via-white/80 via-80% to-transparent transition-opacity duration-150'\n              : 'bg-transparent',\n            showClearIcon ? 'opacity-100' : 'opacity-0',\n          )}\n        >\n          <X\n            data-testid=\"clear-button\"\n            className={cn(\n              'h-4 w-4 shrink-0 cursor-pointer transition-opacity duration-150',\n              showClearIcon ? 'opacity-100 hover:opacity-70' : 'opacity-0',\n            )}\n            onClick={handleClear}\n          />\n        </div>\n      )\n    }\n\n    const renderStartContent = () => {\n      if (!startContent) return null\n      return <div className=\"text-neutral-300\">{startContent}</div>\n    }\n\n    const renderStepControlsDecrement = () => {\n      if (!hasStepControls) return null\n      return (\n        <button\n          type=\"button\"\n          disabled={disabled}\n          onClick={() => handleStepChange(-1)}\n          className=\"p-2\"\n          aria-label=\"Decrement\"\n        >\n          <Minus data-testid=\"decrement-button\" />\n        </button>\n      )\n    }\n\n    const hasValue = Boolean(internalValue && String(internalValue).trim() !== '')\n    const showClearIcon = onClear && hasValue && isHovered && !disabled && !isHtmlTypePassword && !hasStepControls\n\n    return (\n      <div className=\"flex w-full flex-col gap-1\">\n        <div className=\"flex w-full items-center\">\n          {groupText && (\n            <div\n              className={cn(\n                'flex h-12 items-center rounded-l-lg border-y border-l border-neutral-200 bg-neutral-50 pr-2 pl-4 text-neutral-300',\n              )}\n            >\n              {groupText}\n            </div>\n          )}\n          <div\n            className={cn(\n              'relative flex h-12 w-full items-center rounded-lg border border-neutral-200 bg-white px-3 transition-colors focus-within:border-neutral-950',\n              groupText && 'rounded-l-none',\n              disabled && 'bg-neutral-50',\n              error && 'border-error-400 focus-within:border-error-700',\n              className,\n            )}\n            onMouseEnter={() => setIsHovered(true)}\n            onMouseLeave={() => setIsHovered(false)}\n          >\n            {renderStartContent()}\n            {renderStepControlsDecrement()}\n            <input\n              type={type}\n              className={cn(\n                'w-full bg-transparent px-2 outline-0 transition-colors placeholder:text-neutral-300 disabled:cursor-not-allowed disabled:opacity-50',\n                hasStepControls && 'text-center',\n                inputClassName,\n              )}\n              ref={ref}\n              onChange={handleChange}\n              placeholder={placeholder}\n              disabled={disabled}\n              value={internalValue}\n              onKeyDown={(event) => {\n                if (isHtmlTypeNumber && (event.key === 'e' || event.key === 'E' || event.key === '-')) {\n                  event.preventDefault()\n                }\n              }}\n              {...props}\n            />\n            {renderPasswordEye()}\n            {renderClearIcon()}\n            {renderErrorIcon()}\n            {renderStepControlsIncrement()}\n            {renderEndContent()}\n          </div>\n        </div>\n        {typeof error === 'string' && <span className=\"text-error-500 text-sm\">{error}</span>}\n      </div>\n    )\n  },\n)\nInput.displayName = 'Input'\n\nexport { Input }\n"],"names":[],"mappings":"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"}

package/dist/components/MultiSelect/MultiSelect.js

@@ -2,7 +2,7 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { CaretUpDown, Check } from '@phosphor-icons/react';
 import * as React from 'react';
-import { Button } from '../Button/Button.js';
+import { Button, buttonVariants } from '../Button/Button.js';
 import { Chip } from '../Chip/Chip.js';
 import { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem } from '../Command/Command.js';
 import { PopoverRoot, PopoverTrigger, PopoverContent } from '../Popover/Popover.js';
@@ -60,8 +60,9 @@ const MultiSelect = React.forwardRef(
           role: "combobox",
           "aria-expanded": open,
           className: cn(
-            className,
-            `w-full justify-between bg-white ${fieldState?.invalid ? "border-error-400 focus-within:border-error-700" : ""}`
+            `w-full justify-between bg-white ${fieldState?.invalid ? "border-error-400 focus-within:border-error-700" : ""}`,
+            buttonVariants({ variant: "ghost", size: "lg" }),
+            className
           ),
           children: [
             placeholder,

package/dist/components/MultiSelect/MultiSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSelect.js","sources":["../../../src/components/MultiSelect/MultiSelect.tsx"],"sourcesContent":["'use client'\n\nimport { CaretUpDown, Check } from '@phosphor-icons/react'\nimport * as React from 'react'\nimport { ControllerFieldState } from 'react-hook-form'\n\nimport { Button } from '../Button'\nimport { Chip } from '../Chip'\nimport { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '../Command'\nimport { PopoverContent, PopoverRoot, PopoverTrigger } from '../Popover'\n\nimport { cn } from '@/lib/utils'\n\n/**\n * Represents a selectable option in the MultiSelect component\n */\ntype Option = {\n  /** Unique identifier for the option */\n  value: string\n  /** Display text for the option */\n  label: string\n}\n\nexport type MultiSelectProps = {\n  /**\n   * Array of options to display in the select menu\n   */\n  options: Array<Option>\n\n  /**\n   * Props to be passed to the individual Chip components\n   */\n  chipProps?: React.ComponentProps<typeof Chip>\n\n  /**\n   * Callback fired when selected values change\n   * @param value Array of selected option values\n   */\n  onChange?: (value: Array<string>) => void\n\n  /**\n   * Form field state from react-hook-form\n   */\n  fieldState?: ControllerFieldState\n\n  /**\n   * Initially selected option values\n   */\n  defaultValue?: Array<string>\n\n  /**\n   * Text shown in the select button when no option is selected\n   * @default \"Select your options...\"\n   */\n  placeholder?: string\n\n  /**\n   * Text shown when no options match the search query\n   * @default \"Options not found\"\n   */\n  notFoundText?: string\n\n  /**\n   * Placeholder text for the search input\n   * @default \"Search...\"\n   */\n  commandInputPlaceholder?: string\n\n  /**\n   * Maximum number of items that can be selected\n   * Shows a counter chip when specified\n   */\n  max?: number\n\n  /**\n   * Additional class names for the select button component\n   */\n  className?: string\n\n  /**\n   * Unique identifier for the select button component\n   */\n  id?: string\n}\n\n/**\n * A multi-select component with search functionality and chip display for selected items.\n * Supports keyboard navigation, search filtering, and maximum selection limit.\n *\n * @example\n * // Basic usage\n * <MultiSelect\n *   options={[\n *     { value: '1', label: 'Option 1' },\n *     { value: '2', label: 'Option 2' }\n *   ]}\n *   onChange={(values) => console.log(values)}\n * />\n *\n * // With maximum selection limit\n * <MultiSelect\n *   options={options}\n *   max={3}\n *   placeholder=\"Select up to 3 options\"\n * />\n *\n * // With custom chip styling\n * <MultiSelect\n *   options={options}\n *   chipProps={{ variant: 'primary' }}\n * />\n */\nexport const MultiSelect = React.forwardRef<HTMLInputElement, MultiSelectProps>(\n  (\n    {\n      options,\n      onChange,\n      chipProps,\n      defaultValue,\n      placeholder = 'Select your options...',\n      notFoundText = 'Options not found',\n      fieldState,\n      commandInputPlaceholder = 'Search...',\n      max,\n      className,\n      id,\n    },\n    _ref,\n  ) => {\n    const inputRef = React.useRef<HTMLInputElement>(null)\n    const [open, setOpen] = React.useState(false)\n    const [selected, setSelected] = React.useState<MultiSelectProps['options']>(\n      options.filter((option) => defaultValue?.includes(option.value) ?? []),\n    )\n    const [inputValue, setInputValue] = React.useState('')\n\n    const handleUnselect = React.useCallback((item: Option) => {\n      setSelected((prev) => prev.filter((s) => s.value !== item.value))\n    }, [])\n\n    const handleKeyDown = React.useCallback((e: React.KeyboardEvent<HTMLDivElement>) => {\n      const input = inputRef.current\n      if (input) {\n        if (e.key === 'Delete' || e.key === 'Backspace') {\n          if (input.value === '') {\n            setSelected((prev) => {\n              const newSelected = [...prev]\n              newSelected.pop()\n              return newSelected\n            })\n          }\n        }\n\n        if (e.key === 'Escape') {\n          input.blur()\n        }\n      }\n    }, [])\n\n    React.useEffect(() => {\n      onChange?.(selected.map((item) => item.value))\n    }, [selected])\n\n    return (\n      <PopoverRoot open={open} onOpenChange={setOpen}>\n        <Command onKeyDown={handleKeyDown}>\n          <PopoverTrigger asChild>\n            <Button\n              id={id}\n              variant=\"ghost\"\n              role=\"combobox\"\n              aria-expanded={open}\n              className={cn(\n                className,\n                `w-full justify-between bg-white ${\n                  fieldState?.invalid ? 'border-error-400 focus-within:border-error-700' : ''\n                }`,\n              )}\n            >\n              {placeholder}\n              <CaretUpDown className=\"ml-2 h-4 w-4 shrink-0 opacity-50\" />\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"px-0 py-0\">\n            <CommandInput\n              placeholder={commandInputPlaceholder}\n              ref={inputRef}\n              value={inputValue}\n              onValueChange={setInputValue}\n            >\n              {max && (\n                <Chip\n                  variant={selected.length >= max ? 'primary' : 'default'}\n                  size=\"sm\"\n                  className=\"my-1 whitespace-nowrap\"\n                >\n                  {selected.length} / {max}\n                </Chip>\n              )}\n            </CommandInput>\n\n            <CommandList>\n              <CommandEmpty>{notFoundText}</CommandEmpty>\n              {open && options.length > 0 && (\n                <CommandGroup>\n                  {options.map((item) => (\n                    <CommandItem\n                      key={`item-${item.value}`}\n                      onMouseDown={(e) => {\n                        e.preventDefault()\n                        e.stopPropagation()\n                      }}\n                      onSelect={(value) => {\n                        const isSelected = selected.find((s) => s.label === value)\n                        if (isSelected) {\n                          handleUnselect(isSelected)\n                        } else if (!max || selected.length < max) {\n                          setInputValue('')\n                          setSelected((prev) => [...prev, item])\n                        }\n                      }}\n                      className=\"cursor-pointer\"\n                    >\n                      <div className=\"flex\">\n                        <div className=\"mr-2\">\n                          {selected.find((s) => s.value === item.value) ? (\n                            <Check className=\"h-4 w-4\" />\n                          ) : (\n                            <div className=\"h-4 w-4\" />\n                          )}\n                        </div>\n                        <div>{item.label}</div>\n                      </div>\n                    </CommandItem>\n                  ))}\n                </CommandGroup>\n              )}\n            </CommandList>\n          </PopoverContent>\n          {selected.length > 0 && (\n            <div className=\"flex flex-wrap gap-2 pt-2\">\n              {selected.map((item) => (\n                <Chip key={item.value} {...chipProps} className=\"gap-2 pr-1\" onRemove={() => handleUnselect(item)}>\n                  {item.label}\n                </Chip>\n              ))}\n            </div>\n          )}\n        </Command>\n      </PopoverRoot>\n    )\n  },\n)\n\nMultiSelect.displayName = 'MultiSelect'\n"],"names":[],"mappings":";;;;;;;;;;AAgHO;AAA0B;AAE7B;AACE;AACA;AACA;AACA;AACc;AACC;AACf;AAC0B;AAC1B;AACA;AACA;AAIF;AACA;AACA;AAAsC;AACiC;AAEvE;AAEA;AACE;AAAgE;AAGlE;AACE;AACA;AACE;AACE;AACE;AACE;AACA;AACA;AAAO;AACR;AACH;AAGF;AACE;AAAW;AACb;AACF;AAGF;AACE;AAA6C;AAG/C;AAGM;AACE;AAAC;AAAA;AACC;AACQ;AACH;AACU;AACJ;AACT;AAGA;AACF;AAEC;AAAA;AACyD;AAAA;AAAA;AAE9D;AAEE;AAAA;AAAC;AAAA;AACc;AACR;AACE;AACQ;AAGb;AAAC;AAAA;AAC+C;AACzC;AACK;AAET;AAAS;AAAO;AAAI;AAAA;AAAA;AACvB;AAAA;AAEJ;AAGE;AAA4B;AAItB;AAAC;AAAA;AAGG;AACA;AAAkB;AACpB;AAEE;AACA;AACE;AAAyB;AAEzB;AACA;AAAqC;AACvC;AACF;AACU;AAGR;AAMA;AACiB;AACnB;AAAA;AAzBuB;AA4B7B;AAEJ;AACF;AAQE;AAGN;AAGN;AAEA;;"}
+{"version":3,"file":"MultiSelect.js","sources":["../../../src/components/MultiSelect/MultiSelect.tsx"],"sourcesContent":["'use client'\n\nimport { CaretUpDown, Check } from '@phosphor-icons/react'\nimport * as React from 'react'\nimport { ControllerFieldState } from 'react-hook-form'\n\nimport { Button, buttonVariants } from '../Button'\nimport { Chip } from '../Chip'\nimport { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '../Command'\nimport { PopoverContent, PopoverRoot, PopoverTrigger } from '../Popover'\n\nimport { cn } from '@/lib/utils'\n\n/**\n * Represents a selectable option in the MultiSelect component\n */\ntype Option = {\n  /** Unique identifier for the option */\n  value: string\n  /** Display text for the option */\n  label: string\n}\n\nexport type MultiSelectProps = {\n  /**\n   * Array of options to display in the select menu\n   */\n  options: Array<Option>\n\n  /**\n   * Props to be passed to the individual Chip components\n   */\n  chipProps?: React.ComponentProps<typeof Chip>\n\n  /**\n   * Callback fired when selected values change\n   * @param value Array of selected option values\n   */\n  onChange?: (value: Array<string>) => void\n\n  /**\n   * Form field state from react-hook-form\n   */\n  fieldState?: ControllerFieldState\n\n  /**\n   * Initially selected option values\n   */\n  defaultValue?: Array<string>\n\n  /**\n   * Text shown in the select button when no option is selected\n   * @default \"Select your options...\"\n   */\n  placeholder?: string\n\n  /**\n   * Text shown when no options match the search query\n   * @default \"Options not found\"\n   */\n  notFoundText?: string\n\n  /**\n   * Placeholder text for the search input\n   * @default \"Search...\"\n   */\n  commandInputPlaceholder?: string\n\n  /**\n   * Maximum number of items that can be selected\n   * Shows a counter chip when specified\n   */\n  max?: number\n\n  /**\n   * Additional class names for the select button component\n   */\n  className?: string\n\n  /**\n   * Unique identifier for the select button component\n   */\n  id?: string\n}\n\n/**\n * A multi-select component with search functionality and chip display for selected items.\n * Supports keyboard navigation, search filtering, and maximum selection limit.\n *\n * @example\n * // Basic usage\n * <MultiSelect\n *   options={[\n *     { value: '1', label: 'Option 1' },\n *     { value: '2', label: 'Option 2' }\n *   ]}\n *   onChange={(values) => console.log(values)}\n * />\n *\n * // With maximum selection limit\n * <MultiSelect\n *   options={options}\n *   max={3}\n *   placeholder=\"Select up to 3 options\"\n * />\n *\n * // With custom chip styling\n * <MultiSelect\n *   options={options}\n *   chipProps={{ variant: 'primary' }}\n * />\n */\nexport const MultiSelect = React.forwardRef<HTMLInputElement, MultiSelectProps>(\n  (\n    {\n      options,\n      onChange,\n      chipProps,\n      defaultValue,\n      placeholder = 'Select your options...',\n      notFoundText = 'Options not found',\n      fieldState,\n      commandInputPlaceholder = 'Search...',\n      max,\n      className,\n      id,\n    },\n    _ref,\n  ) => {\n    const inputRef = React.useRef<HTMLInputElement>(null)\n    const [open, setOpen] = React.useState(false)\n    const [selected, setSelected] = React.useState<MultiSelectProps['options']>(\n      options.filter((option) => defaultValue?.includes(option.value) ?? []),\n    )\n    const [inputValue, setInputValue] = React.useState('')\n\n    const handleUnselect = React.useCallback((item: Option) => {\n      setSelected((prev) => prev.filter((s) => s.value !== item.value))\n    }, [])\n\n    const handleKeyDown = React.useCallback((e: React.KeyboardEvent<HTMLDivElement>) => {\n      const input = inputRef.current\n      if (input) {\n        if (e.key === 'Delete' || e.key === 'Backspace') {\n          if (input.value === '') {\n            setSelected((prev) => {\n              const newSelected = [...prev]\n              newSelected.pop()\n              return newSelected\n            })\n          }\n        }\n\n        if (e.key === 'Escape') {\n          input.blur()\n        }\n      }\n    }, [])\n\n    React.useEffect(() => {\n      onChange?.(selected.map((item) => item.value))\n    }, [selected])\n\n    return (\n      <PopoverRoot open={open} onOpenChange={setOpen}>\n        <Command onKeyDown={handleKeyDown}>\n          <PopoverTrigger asChild>\n            <Button\n              id={id}\n              variant=\"ghost\"\n              role=\"combobox\"\n              aria-expanded={open}\n              className={cn(\n                `w-full justify-between bg-white ${\n                  fieldState?.invalid ? 'border-error-400 focus-within:border-error-700' : ''\n                }`,\n                buttonVariants({ variant: 'ghost', size: 'lg' }),\n                className,\n              )}\n            >\n              {placeholder}\n              <CaretUpDown className=\"ml-2 h-4 w-4 shrink-0 opacity-50\" />\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"px-0 py-0\">\n            <CommandInput\n              placeholder={commandInputPlaceholder}\n              ref={inputRef}\n              value={inputValue}\n              onValueChange={setInputValue}\n            >\n              {max && (\n                <Chip\n                  variant={selected.length >= max ? 'primary' : 'default'}\n                  size=\"sm\"\n                  className=\"my-1 whitespace-nowrap\"\n                >\n                  {selected.length} / {max}\n                </Chip>\n              )}\n            </CommandInput>\n\n            <CommandList>\n              <CommandEmpty>{notFoundText}</CommandEmpty>\n              {open && options.length > 0 && (\n                <CommandGroup>\n                  {options.map((item) => (\n                    <CommandItem\n                      key={`item-${item.value}`}\n                      onMouseDown={(e) => {\n                        e.preventDefault()\n                        e.stopPropagation()\n                      }}\n                      onSelect={(value) => {\n                        const isSelected = selected.find((s) => s.label === value)\n                        if (isSelected) {\n                          handleUnselect(isSelected)\n                        } else if (!max || selected.length < max) {\n                          setInputValue('')\n                          setSelected((prev) => [...prev, item])\n                        }\n                      }}\n                      className=\"cursor-pointer\"\n                    >\n                      <div className=\"flex\">\n                        <div className=\"mr-2\">\n                          {selected.find((s) => s.value === item.value) ? (\n                            <Check className=\"h-4 w-4\" />\n                          ) : (\n                            <div className=\"h-4 w-4\" />\n                          )}\n                        </div>\n                        <div>{item.label}</div>\n                      </div>\n                    </CommandItem>\n                  ))}\n                </CommandGroup>\n              )}\n            </CommandList>\n          </PopoverContent>\n          {selected.length > 0 && (\n            <div className=\"flex flex-wrap gap-2 pt-2\">\n              {selected.map((item) => (\n                <Chip key={item.value} {...chipProps} className=\"gap-2 pr-1\" onRemove={() => handleUnselect(item)}>\n                  {item.label}\n                </Chip>\n              ))}\n            </div>\n          )}\n        </Command>\n      </PopoverRoot>\n    )\n  },\n)\n\nMultiSelect.displayName = 'MultiSelect'\n"],"names":[],"mappings":";;;;;;;;;;AAgHO;AAA0B;AAE7B;AACE;AACA;AACA;AACA;AACc;AACC;AACf;AAC0B;AAC1B;AACA;AACA;AAIF;AACA;AACA;AAAsC;AACiC;AAEvE;AAEA;AACE;AAAgE;AAGlE;AACE;AACA;AACE;AACE;AACE;AACE;AACA;AACA;AAAO;AACR;AACH;AAGF;AACE;AAAW;AACb;AACF;AAGF;AACE;AAA6C;AAG/C;AAGM;AACE;AAAC;AAAA;AACC;AACQ;AACH;AACU;AACJ;AAGT;AAC+C;AAC/C;AACF;AAEC;AAAA;AACyD;AAAA;AAAA;AAE9D;AAEE;AAAA;AAAC;AAAA;AACc;AACR;AACE;AACQ;AAGb;AAAC;AAAA;AAC+C;AACzC;AACK;AAET;AAAS;AAAO;AAAI;AAAA;AAAA;AACvB;AAAA;AAEJ;AAGE;AAA4B;AAItB;AAAC;AAAA;AAGG;AACA;AAAkB;AACpB;AAEE;AACA;AACE;AAAyB;AAEzB;AACA;AAAqC;AACvC;AACF;AACU;AAGR;AAMA;AACiB;AACnB;AAAA;AAzBuB;AA4B7B;AAEJ;AACF;AAQE;AAGN;AAGN;AAEA;;"}

package/dist/components/Select/Select.d.ts

@@ -10,7 +10,7 @@ declare const SelectContent: React.ForwardRefExoticComponent<Omit<SelectPrimitiv
 declare const SelectLabel: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const SelectItem: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const SelectSeparator: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export { SelectRoot, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator, SelectScrollUpButton, SelectScrollDownButton, };
+export { SelectContent, SelectGroup, SelectItem, SelectLabel, SelectRoot, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, };
 type Option = {
     value: string;
     label: React.ReactElement | string | number;

package/dist/components/Select/Select.js

@@ -111,7 +111,7 @@ function Select({
               onKeyDown,
               "aria-invalid": error ? "true" : "false",
               className: cn(
-                buttonVariants({ variant: "input" }),
+                buttonVariants({ variant: "input", size: "lg" }),
                 "flex justify-between",
                 error && "ring-error-400 focus-within:ring-error-700 border-none ring-1",
                 className

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>\n>(({ className, children, position = 'popper', ...props }, ref) => (\n  <SelectPrimitive.Portal>\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  SelectRoot,\n  SelectGroup,\n  SelectValue,\n  SelectTrigger,\n  SelectContent,\n  SelectLabel,\n  SelectItem,\n  SelectSeparator,\n  SelectScrollUpButton,\n  SelectScrollDownButton,\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}\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  ...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' }),\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>\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>(({ className, children, position = 'popper', ...props }, ref) => (\n  <SelectPrimitive.Portal>\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}\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  ...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>\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

@@ -242,12 +242,10 @@
     -webkit-appearance: none;
     margin: 0;
   }
+
   * {
     @apply border-border outline-ring/50;
   }
-  body {
-    @apply bg-background text-foreground;
-  }
 }
 
 @layer utilities {

package/package.json

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