@fuf-stack/uniform 1.22.8 → 1.22.10

package/dist/Select/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["components","useUniformField","useFormContext","createOptionValueConverter","isValueEmpty","ReactSelect"],"sources":["../../src/Select/Select.tsx","../../src/Select/index.ts"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ReactNode } from 'react';\nimport type { MultiValue, Props, SingleValue } from 'react-select';\n\nimport { useState } from 'react';\nimport ReactSelect, { components } from 'react-select';\n\nimport { useSelect } from '@heroui/select';\n\nimport { cn, slugify, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { createOptionValueConverter, isValueEmpty } from '../helpers';\nimport { useFormContext } from '../hooks/useFormContext';\nimport { useUniformField } from '../hooks/useUniformField';\n\nexport const selectVariants = tv({\n  slots: {\n    base: 'group leading-normal',\n    clearIndicator:\n      'rounded-md p-1 text-foreground-500 hover:cursor-pointer hover:bg-default-200 hover:text-foreground-800',\n    control:\n      'duration-150! rounded-lg border-2 border-default-200 bg-content1 transition-background hover:border-default-400 group-data-[invalid=true]:border-danger group-data-[invalid=true]:hover:border-danger motion-reduce:transition-none',\n    control_focused: 'border-focus',\n    crossIcon: '',\n    downChevron: '',\n    dropdownIndicator:\n      'rounded-md p-1 text-foreground-500 hover:cursor-pointer hover:bg-default-200 hover:text-black',\n    group: '',\n    groupHeading: 'mb-1 ml-3 mt-2 text-sm text-foreground-500',\n    indicatorsContainer: 'gap-1 p-1',\n    indicatorSeparator: 'bg-default-300',\n    input: 'py-0.5 pl-1',\n    // see HeroUI styles for group-data condition,\n    // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/core/theme/src/components/select.ts\n    label:\n      'pointer-events-auto relative bottom-1.5 ml-1 text-foreground subpixel-antialiased text-small group-data-[invalid=true]:!text-danger',\n    loadingIndicator: '',\n    loadingMessage: 'rounded-sm p-2 text-foreground-500',\n    menu: 'mt-2 rounded-xl border border-default-200 bg-content1 p-1 shadow-lg',\n    menuList: '',\n    // ensure menu has same z-index as modal so it is visible when rendered in modal\n    // see: https://github.com/heroui-inc/heroui/blob/main/packages/core/theme/src/components/modal.ts (see z-50)\n    menuPortal: 'z-50!',\n    multiValue: 'items-center gap-1.5 rounded bg-default-100 py-0.5 pl-2 pr-1',\n    multiValueContainer: '',\n    multiValueLabel: 'py-0.5 leading-6',\n    multiValueRemove:\n      'rounded text-default-500 hover:cursor-pointer hover:border-default-300 hover:text-default-800',\n    noOptionsMessage: 'rounded-sm p-2 text-foreground-500',\n    option: 'rounded px-3 py-2 hover:cursor-pointer',\n    option_disabled:\n      'cursor-not-allowed! hover:cursor-not-allowed! opacity-disabled',\n    option_focused: 'bg-default-100 active:bg-default-200',\n    option_selected: 'bg-default-300',\n    placeholder: 'ml-1 py-0.5 pl-1 text-sm text-foreground-500',\n    selectContainer: '',\n    singleValue: 'ml-1! leading-7!',\n    valueContainer: 'gap-1 p-1',\n  },\n});\n\nexport interface SelectOption {\n  /** set option to disabled state */\n  disabled?: boolean;\n  /**\n   * True when option was auto-generated because the value wasn't found in options.\n   * Use in renderOptionLabel to render a component that fetches the real label.\n   */\n  isFallback?: boolean;\n  /** option label */\n  label?: ReactNode;\n  /** option value */\n  value: string | number;\n}\n\ntype VariantProps = TVProps<typeof selectVariants>;\ntype ClassName = TVClassName<typeof selectVariants>;\n\nexport interface SelectProps extends VariantProps {\n  /** Custom aria-label for accessibility. If not provided, falls back to field name when no visible label exists */\n  ariaLabel?: string;\n  /** CSS class name */\n  className?: ClassName; // string;\n  /** Determine if the  */\n  clearable?: boolean;\n  /** Set the select to disabled state. */\n  disabled?: boolean;\n  /** Force menu open for debugging or visual testing. */\n  debugMenuOpen?: boolean;\n  /** Filter Select Options */\n  filterOption?:\n    | undefined\n    | ((option?: SelectOption, inputValue?: string) => boolean);\n  /** The value of the search input */\n  inputValue?: string;\n  /** Label that should be associated with the select. */\n  label?: ReactNode;\n  /** Set the select to a loading state. */\n  loading?: boolean;\n  /** switch between single and multi select mode. */\n  multiSelect?: boolean;\n  /** The name for the Select component, used by react-hook-form */\n  name: string;\n  /** Placeholder that is displayed when nothing is selected */\n  placeholder?: string;\n  /** Handle change events on the input */\n  onInputChange?: Props['onInputChange'];\n  /** The options for the Select component */\n  options: SelectOption[];\n  /** Render custom content when no options match the current search input. */\n  renderEmptyOptions?: Props['noOptionsMessage'];\n  /** Format the label of the option */\n  renderOptionLabel?: undefined | Props['formatOptionLabel'];\n  /**\n   * Fallback option(s) for async selects when value isn't in current options.\n   * Use when the selected value may not be in the options list (e.g., after\n   * search results change). Used only if value not found in options.\n   * For single select: pass the option object or undefined\n   * For multi-select: pass an array of option objects\n   */\n  selectedOptionFallback?: SelectOption | SelectOption[];\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n}\n\nconst InputComponent: typeof components.Input = (props) => {\n  // @ts-expect-error data-testid is not a default prop\n  // eslint-disable-next-line react/destructuring-assignment\n  const testId = `${props.selectProps['data-testid']}`;\n  return <components.Input data-testid={testId} {...props} />;\n};\n\nconst ControlComponent: typeof components.Control = (props) => {\n  // @ts-expect-error data-testid is not a default prop\n  // eslint-disable-next-line react/destructuring-assignment\n  const testId = `${props.selectProps['data-testid']}_select`;\n  return (\n    <div data-testid={testId}>\n      <components.Control {...props} />\n    </div>\n  );\n};\n\nconst OptionComponent: typeof components.Option = (props) => {\n  const { isDisabled } = props;\n  // @ts-expect-error data-testid is not a default prop\n  // eslint-disable-next-line react/destructuring-assignment\n  const testId = `${props.selectProps['data-testid']}_select_option_${slugify(String(props?.data?.testId ?? props?.data?.value), { replaceDots: true })}`;\n  return (\n    <div aria-disabled={isDisabled ? true : undefined} data-testid={testId}>\n      <components.Option {...props} />\n    </div>\n  );\n};\n\nconst DropdownIndicatorComponent: typeof components.DropdownIndicator = (\n  props,\n) => {\n  // @ts-expect-error data-testid is not a default prop\n  const testId = props?.selectProps['data-testid'] as string;\n  return (\n    <div data-testid={`${testId}_select_dropdown`}>\n      <components.DropdownIndicator {...props} />\n    </div>\n  );\n};\n\n/** Select component based on [HeroUI Select](https://www.heroui.com//docs/components/select) and [React-Select](https://react-select.com/home) */\nconst Select = ({\n  className = undefined,\n  clearable = true,\n  debugMenuOpen = false,\n  filterOption = undefined,\n  inputValue = undefined,\n  loading = false,\n  multiSelect = false,\n  name,\n  onInputChange = undefined,\n  options,\n  placeholder = undefined,\n  renderEmptyOptions = undefined,\n  renderOptionLabel = undefined,\n  selectedOptionFallback = undefined,\n  ...uniformFieldProps\n}: SelectProps) => {\n  const {\n    ariaLabel,\n    disabled,\n    errorMessage,\n    field: { onBlur, onChange, ref, value },\n    getErrorMessageProps,\n    getHelperWrapperProps,\n    getLabelProps,\n    invalid,\n    label,\n    required,\n    testId,\n  } = useUniformField({\n    name,\n    ...uniformFieldProps,\n  });\n\n  // Get getFieldState to check isTouched in onChange callback\n  const { getFieldState } = useFormContext();\n\n  // Track if the select is focused\n  const [isFocused, setIsFocused] = useState(false);\n\n  // Create converter to preserve number types for option values\n  const { convertToOriginalType } = createOptionValueConverter(options);\n\n  // classNames from slots\n  const variants = selectVariants();\n  const classNames = variantsToClassNames(variants, className, 'base');\n\n  // React-select classNames configuration\n  const reactSelectClassNames = {\n    clearIndicator: () => {\n      return classNames.clearIndicator;\n    },\n    control: () => {\n      return cn(classNames.control, {\n        [classNames.control_focused]: isFocused && !invalid,\n      });\n    },\n    dropdownIndicator: () => {\n      return classNames.dropdownIndicator;\n    },\n    groupHeading: () => {\n      return classNames.groupHeading;\n    },\n    indicatorSeparator: () => {\n      return classNames.indicatorSeparator;\n    },\n    indicatorsContainer: () => {\n      return classNames.indicatorsContainer;\n    },\n    input: () => {\n      return classNames.input;\n    },\n    loadingIndicator: () => {\n      return classNames.loadingIndicator;\n    },\n    loadingMessage: () => {\n      return classNames.loadingMessage;\n    },\n    menu: () => {\n      return classNames.menu;\n    },\n    menuList: () => {\n      return classNames.menuList;\n    },\n    menuPortal: () => {\n      return classNames.menuPortal;\n    },\n    multiValue: () => {\n      return classNames.multiValue;\n    },\n    multiValueLabel: () => {\n      return cn(classNames.multiValueLabel, `${getValueProps().className}`);\n    },\n    multiValueRemove: () => {\n      return classNames.multiValueRemove;\n    },\n    noOptionsMessage: () => {\n      return classNames.noOptionsMessage;\n    },\n    option: ({\n      isDisabled: optionIsDisabled,\n      isFocused: optionIsFocused,\n      isSelected: optionIsSelected,\n    }: {\n      isDisabled: boolean;\n      isFocused: boolean;\n      isSelected: boolean;\n    }) => {\n      return cn(classNames.option, {\n        [classNames.option_disabled]: optionIsDisabled,\n        [classNames.option_focused]: optionIsFocused,\n        [classNames.option_selected]: optionIsSelected,\n      });\n    },\n    placeholder: () => {\n      return classNames.placeholder;\n    },\n    singleValue: () => {\n      return cn(classNames.singleValue, `${getValueProps().className}`);\n    },\n    valueContainer: () => {\n      return classNames.valueContainer;\n    },\n  };\n\n  const { getBaseProps, getTriggerProps, getValueProps } = useSelect({\n    children: [],\n    classNames,\n    errorMessage,\n    isDisabled: disabled,\n    isInvalid: invalid,\n    isLoading: loading,\n    isRequired: required,\n    label,\n    labelPlacement: 'outside',\n  });\n\n  // react-select expects `isDisabled`, while our option contract uses `disabled`.\n  const reactSelectOptions = options.map((option) => {\n    return {\n      ...option,\n      isDisabled: option.disabled,\n    };\n  });\n\n  // Compute selected option(s) for react-select\n  //\n  // Priority for finding options:\n  // 1. Look in current options list\n  // 2. Use selectedOptionFallback prop (for async selects with pre-fetched data)\n  // 3. Create fallback with value as label\n  //\n  // Handles edge cases:\n  // - Compares as strings to support both string and number values\n  // - Returns null for empty single-select (required by react-select to clear)\n  // - Creates fallback options when value exists but isn't in options list\n  //   (common with async selects where options change after selection)\n  const reactSelectValue = (() => {\n    // Helper to find option by value\n    const findOption = (v: string | number): SelectOption => {\n      // First, look in options list\n      const inOptions = options.find((option) => {\n        return String(option.value) === String(v);\n      });\n      if (inOptions) {\n        return inOptions;\n      }\n\n      // Second, look in selectedOptionFallback prop (for async selects)\n      if (selectedOptionFallback) {\n        if (Array.isArray(selectedOptionFallback)) {\n          const inSelected = selectedOptionFallback.find((option) => {\n            return String(option.value) === String(v);\n          });\n          if (inSelected) {\n            return inSelected;\n          }\n        } else if (String(selectedOptionFallback.value) === String(v)) {\n          return selectedOptionFallback;\n        }\n      }\n\n      // Fallback: create option with value as label, marked as fallback\n      return { isFallback: true, label: String(v), value: v };\n    };\n\n    if (multiSelect) {\n      if (!Array.isArray(value) || isValueEmpty(value)) {\n        return [];\n      }\n      return value.map((v) => {\n        return findOption(v);\n      });\n    }\n\n    // Single select - use isValueEmpty to handle marker strings (__NULL__, etc.)\n    if (isValueEmpty(value)) {\n      return null;\n    }\n    return findOption(value);\n  })();\n\n  // Handle selection change\n  const handleChange = (\n    option: MultiValue<SelectOption> | SingleValue<SelectOption>,\n  ) => {\n    if (multiSelect) {\n      onChange(\n        (option as SelectOption[])?.map((_option) => {\n          return convertToOriginalType(_option.value);\n        }),\n      );\n    } else {\n      const newValue = (option as SelectOption)?.value;\n      // Pass null explicitly when clearing (not undefined)\n      onChange(newValue != null ? convertToOriginalType(newValue) : null);\n    }\n\n    // Mark field as touched immediately when a selection is made if not already touched\n    // This ensures validation errors show right away (isTouched becomes true)\n    // For Select components, selecting an option is a complete user action\n    // (unlike text inputs where typing is ongoing), so we mark as touched immediately\n    const { isTouched: currentIsTouched } = getFieldState(name, testId);\n    if (!currentIsTouched) {\n      // Defer blur/touched notification until after the onChange value commit.\n      // This prevents \"one render cycle behind\" validation states where blur\n      // validation runs against the previous value.\n      queueMicrotask(() => {\n        onBlur();\n      });\n    }\n  };\n\n  // Handle blur event\n  const handleBlur = () => {\n    setIsFocused(false);\n    onBlur();\n  };\n\n  // Handle focus event\n  const handleFocus = () => {\n    setIsFocused(true);\n  };\n\n  return (\n    <div\n      {...getBaseProps()}\n      className={cn(classNames.base)}\n      // see HeroUI styles for group-data condition (data-invalid),\n      // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/components/select/src/use-select.ts\n      data-required={required}\n      data-testid={`${testId}_wrapper`}\n    >\n      {label ? (\n        <label\n          className={classNames.label}\n          data-slot=\"label\"\n          htmlFor={`react-select-${name}-input`}\n          id={getLabelProps().id}\n        >\n          {label}\n          {required ? (\n            <span aria-hidden className=\"ml-0.5 text-danger\">\n              *\n            </span>\n          ) : null}\n        </label>\n      ) : null}\n      <ReactSelect\n        ref={ref}\n        aria-errormessage=\"\"\n        aria-invalid={invalid}\n        aria-label={ariaLabel}\n        // set aria-labelledby to the label id so that the select is accessible\n        aria-labelledby={\n          label\n            ? getTriggerProps()['aria-labelledby']?.split(' ')[1]\n            : undefined\n        }\n        classNames={reactSelectClassNames}\n        components={{\n          Control: ControlComponent,\n          DropdownIndicator: DropdownIndicatorComponent,\n          Input: InputComponent,\n          Option: OptionComponent,\n        }}\n        // Does not affect the testId of the select, but is needed to pass it to sub-components\n        data-testid={testId}\n        filterOption={filterOption}\n        formatOptionLabel={renderOptionLabel}\n        inputValue={inputValue}\n        instanceId={name}\n        isClearable={clearable}\n        isDisabled={disabled}\n        isLoading={loading}\n        isMulti={multiSelect}\n        menuIsOpen={debugMenuOpen ? true : undefined}\n        // set menuPosition to fixed so that menu can be rendered\n        // inside Card / Modal components, menuShouldBlockScroll\n        // prevents container scroll when menu is open\n        menuPosition=\"fixed\"\n        menuShouldBlockScroll\n        name={name}\n        noOptionsMessage={renderEmptyOptions}\n        onBlur={handleBlur}\n        onChange={handleChange}\n        onFocus={handleFocus}\n        onInputChange={onInputChange}\n        options={reactSelectOptions}\n        placeholder={placeholder}\n        unstyled\n        value={reactSelectValue}\n      />\n      {invalid ? (\n        <div {...getHelperWrapperProps()}>\n          <div {...getErrorMessageProps()}>{errorMessage}</div>\n        </div>\n      ) : null}\n    </div>\n  );\n};\n\nexport default Select;\n","import Select from './Select';\n\nexport type { SelectProps, SelectOption } from './Select';\n\nexport { selectVariants } from './Select';\n\nexport default Select;\n"],"mappings":"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"}
+{"version":3,"file":"index.cjs","names":["components","useUniformField","useFormContext","createOptionValueConverter","isValueEmpty","ReactSelect"],"sources":["../../src/Select/SelectComponents.tsx","../../src/Select/Select.tsx","../../src/Select/index.ts"],"sourcesContent":["import { components } from 'react-select';\n\nimport { slugify } from '@fuf-stack/pixel-utils';\n\n/** Mirrors the select test id onto the underlying react-select input element. */\nexport const InputComponent: typeof components.Input = (props) => {\n  // @ts-expect-error data-testid is not a default prop\n  // eslint-disable-next-line react/destructuring-assignment\n  const testId = `${props.selectProps['data-testid']}`;\n  return <components.Input data-testid={testId} {...props} />;\n};\n\n/** Wraps the control root to expose a stable `*_select` test id hook. */\nexport const ControlComponent: typeof components.Control = (props) => {\n  // @ts-expect-error data-testid is not a default prop\n  // eslint-disable-next-line react/destructuring-assignment\n  const testId = `${props.selectProps['data-testid']}_select`;\n  return (\n    <div data-testid={testId}>\n      <components.Control {...props} />\n    </div>\n  );\n};\n\n/** Adds deterministic option test ids and forwards disabled state semantics. */\nexport const OptionComponent: typeof components.Option = (props) => {\n  const { isDisabled } = props;\n  // @ts-expect-error data-testid is not a default prop\n  // eslint-disable-next-line react/destructuring-assignment\n  const testId = `${props.selectProps['data-testid']}_select_option_${slugify(String(props?.data?.testId ?? props?.data?.value), { replaceDots: true })}`;\n  return (\n    <div aria-disabled={isDisabled ? true : undefined} data-testid={testId}>\n      <components.Option {...props} />\n    </div>\n  );\n};\n\n/** Wraps the dropdown indicator with a predictable test id for automation. */\nexport const DropdownIndicatorComponent: typeof components.DropdownIndicator = (\n  props,\n) => {\n  // @ts-expect-error data-testid is not a default prop\n  const testId = props?.selectProps['data-testid'] as string;\n  return (\n    <div data-testid={`${testId}_select_dropdown`}>\n      <components.DropdownIndicator {...props} />\n    </div>\n  );\n};\n","import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ReactNode } from 'react';\nimport type { MultiValue, Props, SingleValue } from 'react-select';\n\nimport { useState } from 'react';\nimport ReactSelect from 'react-select';\n\nimport { useSelect } from '@heroui/select';\n\nimport { cn, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { createOptionValueConverter, isValueEmpty } from '../helpers';\nimport { useFormContext } from '../hooks/useFormContext';\nimport { useUniformField } from '../hooks/useUniformField';\nimport {\n  ControlComponent,\n  DropdownIndicatorComponent,\n  InputComponent,\n  OptionComponent,\n} from './SelectComponents';\n\nexport const selectVariants = tv({\n  slots: {\n    base: [\n      // Enables group-data selectors used by child slots.\n      'group',\n      // Make field wrappers align with other form controls.\n      'flex w-full flex-col',\n      // Keep label/control vertical rhythm consistent.\n      'gap-y-1.5',\n      // Preserve existing text flow for select content.\n      'leading-normal',\n    ],\n    clearIndicator:\n      'rounded-md p-1 text-foreground-500 hover:cursor-pointer hover:bg-default-200 hover:text-foreground-800',\n    control:\n      'duration-150! rounded-lg border-2 border-default-200 bg-content1 transition-background hover:border-default-400 group-data-[invalid=true]:border-danger group-data-[invalid=true]:hover:border-danger motion-reduce:transition-none',\n    control_focused: 'border-focus',\n    crossIcon: '',\n    downChevron: '',\n    dropdownIndicator:\n      'rounded-md p-1 text-foreground-500 hover:cursor-pointer hover:bg-default-200 hover:text-black',\n    group: '',\n    groupHeading: 'mb-1 ml-3 mt-2 text-sm text-foreground-500',\n    indicatorsContainer: 'gap-1 p-1',\n    indicatorSeparator: 'bg-default-300',\n    input: 'py-0.5 pl-1',\n    // see HeroUI styles for group-data condition,\n    // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/core/theme/src/components/select.ts\n    label:\n      'pointer-events-auto inline-flex cursor-default text-sm text-foreground subpixel-antialiased group-data-[invalid=true]:!text-danger',\n    loadingIndicator: '',\n    loadingMessage: 'rounded-sm p-2 text-foreground-500',\n    menu: 'mt-2 rounded-xl border border-default-200 bg-content1 p-1 shadow-lg',\n    menuList: '',\n    // ensure menu has same z-index as modal so it is visible when rendered in modal\n    // see: https://github.com/heroui-inc/heroui/blob/main/packages/core/theme/src/components/modal.ts (see z-50)\n    menuPortal: 'z-50!',\n    multiValue: 'items-center gap-1.5 rounded bg-default-100 py-0.5 pl-2 pr-1',\n    multiValueContainer: '',\n    multiValueLabel: 'py-0.5 leading-6',\n    multiValueRemove:\n      'rounded text-default-500 hover:cursor-pointer hover:border-default-300 hover:text-default-800',\n    noOptionsMessage: 'rounded-sm p-2 text-foreground-500',\n    option: 'rounded px-3 py-2 hover:cursor-pointer',\n    option_disabled:\n      'cursor-not-allowed! hover:cursor-not-allowed! opacity-disabled',\n    option_focused: 'bg-default-100 active:bg-default-200',\n    option_selected: 'bg-default-300',\n    placeholder: 'ml-1 py-0.5 pl-1 text-sm text-foreground-500',\n    selectContainer: '',\n    singleValue: 'ml-1! leading-7!',\n    valueContainer: 'gap-1 p-1',\n  },\n});\n\nexport interface SelectOption {\n  /** set option to disabled state */\n  disabled?: boolean;\n  /**\n   * True when option was auto-generated because the value wasn't found in options.\n   * Use in renderOptionLabel to render a component that fetches the real label.\n   */\n  isFallback?: boolean;\n  /** option label */\n  label?: ReactNode;\n  /** option value */\n  value: string | number;\n}\n\ntype VariantProps = TVProps<typeof selectVariants>;\ntype ClassName = TVClassName<typeof selectVariants>;\n\nexport interface SelectProps extends VariantProps {\n  /** Custom aria-label for accessibility. If not provided, falls back to field name when no visible label exists */\n  ariaLabel?: string;\n  /** CSS class name */\n  className?: ClassName; // string;\n  /** Determine if the  */\n  clearable?: boolean;\n  /** Set the select to disabled state. */\n  disabled?: boolean;\n  /** Force menu open for debugging or visual testing. */\n  debugMenuOpen?: boolean;\n  /** Filter Select Options */\n  filterOption?:\n    | undefined\n    | ((option?: SelectOption, inputValue?: string) => boolean);\n  /** The value of the search input */\n  inputValue?: string;\n  /** Label that should be associated with the select. */\n  label?: ReactNode;\n  /** Set the select to a loading state. */\n  loading?: boolean;\n  /** switch between single and multi select mode. */\n  multiSelect?: boolean;\n  /** The name for the Select component, used by react-hook-form */\n  name: string;\n  /** Placeholder that is displayed when nothing is selected */\n  placeholder?: string;\n  /** Handle change events on the input */\n  onInputChange?: Props['onInputChange'];\n  /** The options for the Select component */\n  options: SelectOption[];\n  /** Render custom content when no options match the current search input. */\n  renderEmptyOptions?: Props['noOptionsMessage'];\n  /** Format the label of the option */\n  renderOptionLabel?: undefined | Props['formatOptionLabel'];\n  /**\n   * Fallback option(s) for async selects when value isn't in current options.\n   * Use when the selected value may not be in the options list (e.g., after\n   * search results change). Used only if value not found in options.\n   * For single select: pass the option object or undefined\n   * For multi-select: pass an array of option objects\n   */\n  selectedOptionFallback?: SelectOption | SelectOption[];\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n}\n\n/** Select component based on [HeroUI Select](https://www.heroui.com//docs/components/select) and [React-Select](https://react-select.com/home) */\nconst Select = ({\n  className = undefined,\n  clearable = true,\n  debugMenuOpen = false,\n  filterOption = undefined,\n  inputValue = undefined,\n  loading = false,\n  multiSelect = false,\n  name,\n  onInputChange = undefined,\n  options,\n  placeholder = undefined,\n  renderEmptyOptions = undefined,\n  renderOptionLabel = undefined,\n  selectedOptionFallback = undefined,\n  ...uniformFieldProps\n}: SelectProps) => {\n  const {\n    ariaLabel,\n    disabled,\n    errorMessage,\n    field: { onBlur, onChange, ref, value },\n    getErrorMessageProps,\n    getHelperWrapperProps,\n    getLabelProps,\n    invalid,\n    label,\n    required,\n    testId,\n  } = useUniformField({\n    // Multi-select values are arrays and can produce nested RHF error shapes.\n    isArrayValue: multiSelect,\n    name,\n    ...uniformFieldProps,\n  });\n\n  // Get getFieldState to check isTouched in onChange callback\n  const { getFieldState } = useFormContext();\n\n  // Track if the select is focused\n  const [isFocused, setIsFocused] = useState(false);\n\n  // Create converter to preserve number types for option values\n  const { convertToOriginalType } = createOptionValueConverter(options);\n\n  // classNames from slots\n  const variants = selectVariants();\n  const classNames = variantsToClassNames(variants, className, 'base');\n\n  // React-select classNames configuration\n  const reactSelectClassNames = {\n    clearIndicator: () => {\n      return classNames.clearIndicator;\n    },\n    control: () => {\n      return cn(classNames.control, {\n        [classNames.control_focused]: isFocused && !invalid,\n      });\n    },\n    dropdownIndicator: () => {\n      return classNames.dropdownIndicator;\n    },\n    groupHeading: () => {\n      return classNames.groupHeading;\n    },\n    indicatorSeparator: () => {\n      return classNames.indicatorSeparator;\n    },\n    indicatorsContainer: () => {\n      return classNames.indicatorsContainer;\n    },\n    input: () => {\n      return classNames.input;\n    },\n    loadingIndicator: () => {\n      return classNames.loadingIndicator;\n    },\n    loadingMessage: () => {\n      return classNames.loadingMessage;\n    },\n    menu: () => {\n      return classNames.menu;\n    },\n    menuList: () => {\n      return classNames.menuList;\n    },\n    menuPortal: () => {\n      return classNames.menuPortal;\n    },\n    multiValue: () => {\n      return classNames.multiValue;\n    },\n    multiValueLabel: () => {\n      return cn(classNames.multiValueLabel, `${getValueProps().className}`);\n    },\n    multiValueRemove: () => {\n      return classNames.multiValueRemove;\n    },\n    noOptionsMessage: () => {\n      return classNames.noOptionsMessage;\n    },\n    option: ({\n      isDisabled: optionIsDisabled,\n      isFocused: optionIsFocused,\n      isSelected: optionIsSelected,\n    }: {\n      isDisabled: boolean;\n      isFocused: boolean;\n      isSelected: boolean;\n    }) => {\n      return cn(classNames.option, {\n        [classNames.option_disabled]: optionIsDisabled,\n        [classNames.option_focused]: optionIsFocused,\n        [classNames.option_selected]: optionIsSelected,\n      });\n    },\n    placeholder: () => {\n      return classNames.placeholder;\n    },\n    singleValue: () => {\n      return cn(classNames.singleValue, `${getValueProps().className}`);\n    },\n    valueContainer: () => {\n      return classNames.valueContainer;\n    },\n  };\n\n  const { getBaseProps, getTriggerProps, getValueProps } = useSelect({\n    children: [],\n    classNames,\n    errorMessage,\n    isDisabled: disabled,\n    isInvalid: invalid,\n    isLoading: loading,\n    isRequired: required,\n    label,\n    labelPlacement: 'outside',\n  });\n\n  // react-select expects `isDisabled`, while our option contract uses `disabled`.\n  const reactSelectOptions = options.map((option) => {\n    return {\n      ...option,\n      isDisabled: option.disabled,\n    };\n  });\n\n  // Compute selected option(s) for react-select\n  //\n  // Priority for finding options:\n  // 1. Look in current options list\n  // 2. Use selectedOptionFallback prop (for async selects with pre-fetched data)\n  // 3. Create fallback with value as label\n  //\n  // Handles edge cases:\n  // - Compares as strings to support both string and number values\n  // - Returns null for empty single-select (required by react-select to clear)\n  // - Creates fallback options when value exists but isn't in options list\n  //   (common with async selects where options change after selection)\n  const reactSelectValue = (() => {\n    // Helper to find option by value\n    const findOption = (v: string | number): SelectOption => {\n      // First, look in options list\n      const inOptions = options.find((option) => {\n        return String(option.value) === String(v);\n      });\n      if (inOptions) {\n        return inOptions;\n      }\n\n      // Second, look in selectedOptionFallback prop (for async selects)\n      if (selectedOptionFallback) {\n        if (Array.isArray(selectedOptionFallback)) {\n          const inSelected = selectedOptionFallback.find((option) => {\n            return String(option.value) === String(v);\n          });\n          if (inSelected) {\n            return inSelected;\n          }\n        } else if (String(selectedOptionFallback.value) === String(v)) {\n          return selectedOptionFallback;\n        }\n      }\n\n      // Fallback: create option with value as label, marked as fallback\n      return { isFallback: true, label: String(v), value: v };\n    };\n\n    if (multiSelect) {\n      if (!Array.isArray(value) || isValueEmpty(value)) {\n        return [];\n      }\n      return value.map((v) => {\n        return findOption(v);\n      });\n    }\n\n    // Single select - use isValueEmpty to handle marker strings (__NULL__, etc.)\n    if (isValueEmpty(value)) {\n      return null;\n    }\n    return findOption(value);\n  })();\n\n  // Handle selection change\n  const handleChange = (\n    option: MultiValue<SelectOption> | SingleValue<SelectOption>,\n  ) => {\n    if (multiSelect) {\n      onChange(\n        (option as SelectOption[])?.map((_option) => {\n          return convertToOriginalType(_option.value);\n        }),\n      );\n    } else {\n      const newValue = (option as SelectOption)?.value;\n      // Pass null explicitly when clearing (not undefined)\n      onChange(newValue != null ? convertToOriginalType(newValue) : null);\n    }\n\n    // Mark field as touched immediately when a selection is made if not already touched\n    // This ensures validation errors show right away (isTouched becomes true)\n    // For Select components, selecting an option is a complete user action\n    // (unlike text inputs where typing is ongoing), so we mark as touched immediately\n    const { isTouched: currentIsTouched } = getFieldState(name, testId);\n    if (!currentIsTouched) {\n      // Defer blur/touched notification until after the onChange value commit.\n      // This prevents \"one render cycle behind\" validation states where blur\n      // validation runs against the previous value.\n      queueMicrotask(() => {\n        onBlur();\n      });\n    }\n  };\n\n  // Handle blur event\n  const handleBlur = () => {\n    setIsFocused(false);\n    onBlur();\n  };\n\n  // Handle focus event\n  const handleFocus = () => {\n    setIsFocused(true);\n  };\n\n  return (\n    <div\n      {...getBaseProps()}\n      className={cn(classNames.base)}\n      // see HeroUI styles for group-data condition (data-invalid),\n      // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/components/select/src/use-select.ts\n      data-required={required}\n      data-testid={`${testId}_wrapper`}\n    >\n      {label ? (\n        <label\n          className={classNames.label}\n          data-slot=\"label\"\n          htmlFor={`react-select-${name}-input`}\n          id={getLabelProps().id}\n        >\n          {label}\n          {required ? (\n            <span aria-hidden className=\"ml-0.5 text-danger\">\n              *\n            </span>\n          ) : null}\n        </label>\n      ) : null}\n      <ReactSelect\n        ref={ref}\n        aria-errormessage=\"\"\n        aria-invalid={invalid}\n        aria-label={ariaLabel}\n        // set aria-labelledby to the label id so that the select is accessible\n        aria-labelledby={\n          label\n            ? getTriggerProps()['aria-labelledby']?.split(' ')[1]\n            : undefined\n        }\n        classNames={reactSelectClassNames}\n        components={{\n          Control: ControlComponent,\n          DropdownIndicator: DropdownIndicatorComponent,\n          Input: InputComponent,\n          Option: OptionComponent,\n        }}\n        // Does not affect the testId of the select, but is needed to pass it to sub-components\n        data-testid={testId}\n        filterOption={filterOption}\n        formatOptionLabel={renderOptionLabel}\n        inputValue={inputValue}\n        instanceId={name}\n        isClearable={clearable}\n        isDisabled={disabled}\n        isLoading={loading}\n        isMulti={multiSelect}\n        menuIsOpen={debugMenuOpen ? true : undefined}\n        // set menuPosition to fixed so that menu can be rendered\n        // inside Card / Modal components, menuShouldBlockScroll\n        // prevents container scroll when menu is open\n        menuPosition=\"fixed\"\n        menuShouldBlockScroll\n        name={name}\n        noOptionsMessage={renderEmptyOptions}\n        onBlur={handleBlur}\n        onChange={handleChange}\n        onFocus={handleFocus}\n        onInputChange={onInputChange}\n        options={reactSelectOptions}\n        placeholder={placeholder}\n        unstyled\n        value={reactSelectValue}\n      />\n      {invalid ? (\n        <div {...getHelperWrapperProps()}>\n          <div {...getErrorMessageProps()}>{errorMessage}</div>\n        </div>\n      ) : null}\n    </div>\n  );\n};\n\nexport default Select;\n","import Select from './Select';\n\nexport type { SelectProps, SelectOption } from './Select';\n\nexport { selectVariants } from './Select';\n\nexport default Select;\n"],"mappings":"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"}

package/dist/Select/index.d.cts

@@ -3509,7 +3509,7 @@ declare const selectVariants: ((props?: ({
     extend: undefined;
     base: undefined;
     slots: {
-      base: string;
+      base: string[];
       clearIndicator: string;
       control: string;
       control_focused: string;
@@ -3627,7 +3627,7 @@ declare const selectVariants: ((props?: ({
   };
   base: undefined;
   slots: {
-    base: string;
+    base: string[];
     clearIndicator: string;
     control: string;
     control_focused: string;

package/dist/Select/index.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.cts","names":[],"sources":["../../src/Select/Select.tsx"],"mappings":";;;;;cAea,cAAA,IAAc,KAAA;EAAA;;;gbA4CzB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gbA5CyB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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"}
+{"version":3,"file":"index.d.cts","names":[],"sources":["../../src/Select/Select.tsx"],"mappings":";;;;;cAqBa,cAAA,IAAc,KAAA;EAAA;;;gbAqDzB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gbArDyB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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"}

package/dist/Select/index.d.ts

@@ -3509,7 +3509,7 @@ declare const selectVariants: ((props?: ({
     extend: undefined;
     base: undefined;
     slots: {
-      base: string;
+      base: string[];
       clearIndicator: string;
       control: string;
       control_focused: string;
@@ -3627,7 +3627,7 @@ declare const selectVariants: ((props?: ({
   };
   base: undefined;
   slots: {
-    base: string;
+    base: string[];
     clearIndicator: string;
     control: string;
     control_focused: string;

package/dist/Select/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","names":[],"sources":["../../src/Select/Select.tsx"],"mappings":";;;;;cAea,cAAA,IAAc,KAAA;EAAA;;;gbA4CzB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gbA5CyB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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"}
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../src/Select/Select.tsx"],"mappings":";;;;;cAqBa,cAAA,IAAc,KAAA;EAAA;;;gbAqDzB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gbArDyB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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"}

package/dist/Select/index.js

@@ -6,9 +6,49 @@ import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import ReactSelect, { components } from "react-select";
 import { useSelect } from "@heroui/select";
+//#region src/Select/SelectComponents.tsx
+/** Mirrors the select test id onto the underlying react-select input element. */
+const InputComponent = (props) => {
+	const testId = `${props.selectProps["data-testid"]}`;
+	return /* @__PURE__ */ jsx(components.Input, {
+		"data-testid": testId,
+		...props
+	});
+};
+/** Wraps the control root to expose a stable `*_select` test id hook. */
+const ControlComponent = (props) => {
+	return /* @__PURE__ */ jsx("div", {
+		"data-testid": `${props.selectProps["data-testid"]}_select`,
+		children: /* @__PURE__ */ jsx(components.Control, { ...props })
+	});
+};
+/** Adds deterministic option test ids and forwards disabled state semantics. */
+const OptionComponent = (props) => {
+	const { isDisabled } = props;
+	const testId = `${props.selectProps["data-testid"]}_select_option_${slugify(String(props?.data?.testId ?? props?.data?.value), { replaceDots: true })}`;
+	return /* @__PURE__ */ jsx("div", {
+		"aria-disabled": isDisabled ? true : void 0,
+		"data-testid": testId,
+		children: /* @__PURE__ */ jsx(components.Option, { ...props })
+	});
+};
+/** Wraps the dropdown indicator with a predictable test id for automation. */
+const DropdownIndicatorComponent = (props) => {
+	const testId = props?.selectProps["data-testid"];
+	return /* @__PURE__ */ jsx("div", {
+		"data-testid": `${testId}_select_dropdown`,
+		children: /* @__PURE__ */ jsx(components.DropdownIndicator, { ...props })
+	});
+};
+//#endregion
 //#region src/Select/Select.tsx
 const selectVariants = tv({ slots: {
-	base: "group leading-normal",
+	base: [
+		"group",
+		"flex w-full flex-col",
+		"gap-y-1.5",
+		"leading-normal"
+	],
 	clearIndicator: "rounded-md p-1 text-foreground-500 hover:cursor-pointer hover:bg-default-200 hover:text-foreground-800",
 	control: "duration-150! rounded-lg border-2 border-default-200 bg-content1 transition-background hover:border-default-400 group-data-[invalid=true]:border-danger group-data-[invalid=true]:hover:border-danger motion-reduce:transition-none",
 	control_focused: "border-focus",
@@ -20,7 +60,7 @@ const selectVariants = tv({ slots: {
 	indicatorsContainer: "gap-1 p-1",
 	indicatorSeparator: "bg-default-300",
 	input: "py-0.5 pl-1",
-	label: "pointer-events-auto relative bottom-1.5 ml-1 text-foreground subpixel-antialiased text-small group-data-[invalid=true]:!text-danger",
+	label: "pointer-events-auto inline-flex cursor-default text-sm text-foreground subpixel-antialiased group-data-[invalid=true]:!text-danger",
 	loadingIndicator: "",
 	loadingMessage: "rounded-sm p-2 text-foreground-500",
 	menu: "mt-2 rounded-xl border border-default-200 bg-content1 p-1 shadow-lg",
@@ -40,38 +80,10 @@ const selectVariants = tv({ slots: {
 	singleValue: "ml-1! leading-7!",
 	valueContainer: "gap-1 p-1"
 } });
-const InputComponent = (props) => {
-	const testId = `${props.selectProps["data-testid"]}`;
-	return /* @__PURE__ */ jsx(components.Input, {
-		"data-testid": testId,
-		...props
-	});
-};
-const ControlComponent = (props) => {
-	return /* @__PURE__ */ jsx("div", {
-		"data-testid": `${props.selectProps["data-testid"]}_select`,
-		children: /* @__PURE__ */ jsx(components.Control, { ...props })
-	});
-};
-const OptionComponent = (props) => {
-	const { isDisabled } = props;
-	const testId = `${props.selectProps["data-testid"]}_select_option_${slugify(String(props?.data?.testId ?? props?.data?.value), { replaceDots: true })}`;
-	return /* @__PURE__ */ jsx("div", {
-		"aria-disabled": isDisabled ? true : void 0,
-		"data-testid": testId,
-		children: /* @__PURE__ */ jsx(components.Option, { ...props })
-	});
-};
-const DropdownIndicatorComponent = (props) => {
-	const testId = props?.selectProps["data-testid"];
-	return /* @__PURE__ */ jsx("div", {
-		"data-testid": `${testId}_select_dropdown`,
-		children: /* @__PURE__ */ jsx(components.DropdownIndicator, { ...props })
-	});
-};
 /** Select component based on [HeroUI Select](https://www.heroui.com//docs/components/select) and [React-Select](https://react-select.com/home) */
 const Select = ({ className = void 0, clearable = true, debugMenuOpen = false, filterOption = void 0, inputValue = void 0, loading = false, multiSelect = false, name, onInputChange = void 0, options, placeholder = void 0, renderEmptyOptions = void 0, renderOptionLabel = void 0, selectedOptionFallback = void 0, ...uniformFieldProps }) => {
 	const { ariaLabel, disabled, errorMessage, field: { onBlur, onChange, ref, value }, getErrorMessageProps, getHelperWrapperProps, getLabelProps, invalid, label, required, testId } = useUniformField({
+		isArrayValue: multiSelect,
 		name,
 		...uniformFieldProps
 	});

package/dist/Select/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/Select/Select.tsx","../../src/Select/index.ts"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ReactNode } from 'react';\nimport type { MultiValue, Props, SingleValue } from 'react-select';\n\nimport { useState } from 'react';\nimport ReactSelect, { components } from 'react-select';\n\nimport { useSelect } from '@heroui/select';\n\nimport { cn, slugify, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { createOptionValueConverter, isValueEmpty } from '../helpers';\nimport { useFormContext } from '../hooks/useFormContext';\nimport { useUniformField } from '../hooks/useUniformField';\n\nexport const selectVariants = tv({\n  slots: {\n    base: 'group leading-normal',\n    clearIndicator:\n      'rounded-md p-1 text-foreground-500 hover:cursor-pointer hover:bg-default-200 hover:text-foreground-800',\n    control:\n      'duration-150! rounded-lg border-2 border-default-200 bg-content1 transition-background hover:border-default-400 group-data-[invalid=true]:border-danger group-data-[invalid=true]:hover:border-danger motion-reduce:transition-none',\n    control_focused: 'border-focus',\n    crossIcon: '',\n    downChevron: '',\n    dropdownIndicator:\n      'rounded-md p-1 text-foreground-500 hover:cursor-pointer hover:bg-default-200 hover:text-black',\n    group: '',\n    groupHeading: 'mb-1 ml-3 mt-2 text-sm text-foreground-500',\n    indicatorsContainer: 'gap-1 p-1',\n    indicatorSeparator: 'bg-default-300',\n    input: 'py-0.5 pl-1',\n    // see HeroUI styles for group-data condition,\n    // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/core/theme/src/components/select.ts\n    label:\n      'pointer-events-auto relative bottom-1.5 ml-1 text-foreground subpixel-antialiased text-small group-data-[invalid=true]:!text-danger',\n    loadingIndicator: '',\n    loadingMessage: 'rounded-sm p-2 text-foreground-500',\n    menu: 'mt-2 rounded-xl border border-default-200 bg-content1 p-1 shadow-lg',\n    menuList: '',\n    // ensure menu has same z-index as modal so it is visible when rendered in modal\n    // see: https://github.com/heroui-inc/heroui/blob/main/packages/core/theme/src/components/modal.ts (see z-50)\n    menuPortal: 'z-50!',\n    multiValue: 'items-center gap-1.5 rounded bg-default-100 py-0.5 pl-2 pr-1',\n    multiValueContainer: '',\n    multiValueLabel: 'py-0.5 leading-6',\n    multiValueRemove:\n      'rounded text-default-500 hover:cursor-pointer hover:border-default-300 hover:text-default-800',\n    noOptionsMessage: 'rounded-sm p-2 text-foreground-500',\n    option: 'rounded px-3 py-2 hover:cursor-pointer',\n    option_disabled:\n      'cursor-not-allowed! hover:cursor-not-allowed! opacity-disabled',\n    option_focused: 'bg-default-100 active:bg-default-200',\n    option_selected: 'bg-default-300',\n    placeholder: 'ml-1 py-0.5 pl-1 text-sm text-foreground-500',\n    selectContainer: '',\n    singleValue: 'ml-1! leading-7!',\n    valueContainer: 'gap-1 p-1',\n  },\n});\n\nexport interface SelectOption {\n  /** set option to disabled state */\n  disabled?: boolean;\n  /**\n   * True when option was auto-generated because the value wasn't found in options.\n   * Use in renderOptionLabel to render a component that fetches the real label.\n   */\n  isFallback?: boolean;\n  /** option label */\n  label?: ReactNode;\n  /** option value */\n  value: string | number;\n}\n\ntype VariantProps = TVProps<typeof selectVariants>;\ntype ClassName = TVClassName<typeof selectVariants>;\n\nexport interface SelectProps extends VariantProps {\n  /** Custom aria-label for accessibility. If not provided, falls back to field name when no visible label exists */\n  ariaLabel?: string;\n  /** CSS class name */\n  className?: ClassName; // string;\n  /** Determine if the  */\n  clearable?: boolean;\n  /** Set the select to disabled state. */\n  disabled?: boolean;\n  /** Force menu open for debugging or visual testing. */\n  debugMenuOpen?: boolean;\n  /** Filter Select Options */\n  filterOption?:\n    | undefined\n    | ((option?: SelectOption, inputValue?: string) => boolean);\n  /** The value of the search input */\n  inputValue?: string;\n  /** Label that should be associated with the select. */\n  label?: ReactNode;\n  /** Set the select to a loading state. */\n  loading?: boolean;\n  /** switch between single and multi select mode. */\n  multiSelect?: boolean;\n  /** The name for the Select component, used by react-hook-form */\n  name: string;\n  /** Placeholder that is displayed when nothing is selected */\n  placeholder?: string;\n  /** Handle change events on the input */\n  onInputChange?: Props['onInputChange'];\n  /** The options for the Select component */\n  options: SelectOption[];\n  /** Render custom content when no options match the current search input. */\n  renderEmptyOptions?: Props['noOptionsMessage'];\n  /** Format the label of the option */\n  renderOptionLabel?: undefined | Props['formatOptionLabel'];\n  /**\n   * Fallback option(s) for async selects when value isn't in current options.\n   * Use when the selected value may not be in the options list (e.g., after\n   * search results change). Used only if value not found in options.\n   * For single select: pass the option object or undefined\n   * For multi-select: pass an array of option objects\n   */\n  selectedOptionFallback?: SelectOption | SelectOption[];\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n}\n\nconst InputComponent: typeof components.Input = (props) => {\n  // @ts-expect-error data-testid is not a default prop\n  // eslint-disable-next-line react/destructuring-assignment\n  const testId = `${props.selectProps['data-testid']}`;\n  return <components.Input data-testid={testId} {...props} />;\n};\n\nconst ControlComponent: typeof components.Control = (props) => {\n  // @ts-expect-error data-testid is not a default prop\n  // eslint-disable-next-line react/destructuring-assignment\n  const testId = `${props.selectProps['data-testid']}_select`;\n  return (\n    <div data-testid={testId}>\n      <components.Control {...props} />\n    </div>\n  );\n};\n\nconst OptionComponent: typeof components.Option = (props) => {\n  const { isDisabled } = props;\n  // @ts-expect-error data-testid is not a default prop\n  // eslint-disable-next-line react/destructuring-assignment\n  const testId = `${props.selectProps['data-testid']}_select_option_${slugify(String(props?.data?.testId ?? props?.data?.value), { replaceDots: true })}`;\n  return (\n    <div aria-disabled={isDisabled ? true : undefined} data-testid={testId}>\n      <components.Option {...props} />\n    </div>\n  );\n};\n\nconst DropdownIndicatorComponent: typeof components.DropdownIndicator = (\n  props,\n) => {\n  // @ts-expect-error data-testid is not a default prop\n  const testId = props?.selectProps['data-testid'] as string;\n  return (\n    <div data-testid={`${testId}_select_dropdown`}>\n      <components.DropdownIndicator {...props} />\n    </div>\n  );\n};\n\n/** Select component based on [HeroUI Select](https://www.heroui.com//docs/components/select) and [React-Select](https://react-select.com/home) */\nconst Select = ({\n  className = undefined,\n  clearable = true,\n  debugMenuOpen = false,\n  filterOption = undefined,\n  inputValue = undefined,\n  loading = false,\n  multiSelect = false,\n  name,\n  onInputChange = undefined,\n  options,\n  placeholder = undefined,\n  renderEmptyOptions = undefined,\n  renderOptionLabel = undefined,\n  selectedOptionFallback = undefined,\n  ...uniformFieldProps\n}: SelectProps) => {\n  const {\n    ariaLabel,\n    disabled,\n    errorMessage,\n    field: { onBlur, onChange, ref, value },\n    getErrorMessageProps,\n    getHelperWrapperProps,\n    getLabelProps,\n    invalid,\n    label,\n    required,\n    testId,\n  } = useUniformField({\n    name,\n    ...uniformFieldProps,\n  });\n\n  // Get getFieldState to check isTouched in onChange callback\n  const { getFieldState } = useFormContext();\n\n  // Track if the select is focused\n  const [isFocused, setIsFocused] = useState(false);\n\n  // Create converter to preserve number types for option values\n  const { convertToOriginalType } = createOptionValueConverter(options);\n\n  // classNames from slots\n  const variants = selectVariants();\n  const classNames = variantsToClassNames(variants, className, 'base');\n\n  // React-select classNames configuration\n  const reactSelectClassNames = {\n    clearIndicator: () => {\n      return classNames.clearIndicator;\n    },\n    control: () => {\n      return cn(classNames.control, {\n        [classNames.control_focused]: isFocused && !invalid,\n      });\n    },\n    dropdownIndicator: () => {\n      return classNames.dropdownIndicator;\n    },\n    groupHeading: () => {\n      return classNames.groupHeading;\n    },\n    indicatorSeparator: () => {\n      return classNames.indicatorSeparator;\n    },\n    indicatorsContainer: () => {\n      return classNames.indicatorsContainer;\n    },\n    input: () => {\n      return classNames.input;\n    },\n    loadingIndicator: () => {\n      return classNames.loadingIndicator;\n    },\n    loadingMessage: () => {\n      return classNames.loadingMessage;\n    },\n    menu: () => {\n      return classNames.menu;\n    },\n    menuList: () => {\n      return classNames.menuList;\n    },\n    menuPortal: () => {\n      return classNames.menuPortal;\n    },\n    multiValue: () => {\n      return classNames.multiValue;\n    },\n    multiValueLabel: () => {\n      return cn(classNames.multiValueLabel, `${getValueProps().className}`);\n    },\n    multiValueRemove: () => {\n      return classNames.multiValueRemove;\n    },\n    noOptionsMessage: () => {\n      return classNames.noOptionsMessage;\n    },\n    option: ({\n      isDisabled: optionIsDisabled,\n      isFocused: optionIsFocused,\n      isSelected: optionIsSelected,\n    }: {\n      isDisabled: boolean;\n      isFocused: boolean;\n      isSelected: boolean;\n    }) => {\n      return cn(classNames.option, {\n        [classNames.option_disabled]: optionIsDisabled,\n        [classNames.option_focused]: optionIsFocused,\n        [classNames.option_selected]: optionIsSelected,\n      });\n    },\n    placeholder: () => {\n      return classNames.placeholder;\n    },\n    singleValue: () => {\n      return cn(classNames.singleValue, `${getValueProps().className}`);\n    },\n    valueContainer: () => {\n      return classNames.valueContainer;\n    },\n  };\n\n  const { getBaseProps, getTriggerProps, getValueProps } = useSelect({\n    children: [],\n    classNames,\n    errorMessage,\n    isDisabled: disabled,\n    isInvalid: invalid,\n    isLoading: loading,\n    isRequired: required,\n    label,\n    labelPlacement: 'outside',\n  });\n\n  // react-select expects `isDisabled`, while our option contract uses `disabled`.\n  const reactSelectOptions = options.map((option) => {\n    return {\n      ...option,\n      isDisabled: option.disabled,\n    };\n  });\n\n  // Compute selected option(s) for react-select\n  //\n  // Priority for finding options:\n  // 1. Look in current options list\n  // 2. Use selectedOptionFallback prop (for async selects with pre-fetched data)\n  // 3. Create fallback with value as label\n  //\n  // Handles edge cases:\n  // - Compares as strings to support both string and number values\n  // - Returns null for empty single-select (required by react-select to clear)\n  // - Creates fallback options when value exists but isn't in options list\n  //   (common with async selects where options change after selection)\n  const reactSelectValue = (() => {\n    // Helper to find option by value\n    const findOption = (v: string | number): SelectOption => {\n      // First, look in options list\n      const inOptions = options.find((option) => {\n        return String(option.value) === String(v);\n      });\n      if (inOptions) {\n        return inOptions;\n      }\n\n      // Second, look in selectedOptionFallback prop (for async selects)\n      if (selectedOptionFallback) {\n        if (Array.isArray(selectedOptionFallback)) {\n          const inSelected = selectedOptionFallback.find((option) => {\n            return String(option.value) === String(v);\n          });\n          if (inSelected) {\n            return inSelected;\n          }\n        } else if (String(selectedOptionFallback.value) === String(v)) {\n          return selectedOptionFallback;\n        }\n      }\n\n      // Fallback: create option with value as label, marked as fallback\n      return { isFallback: true, label: String(v), value: v };\n    };\n\n    if (multiSelect) {\n      if (!Array.isArray(value) || isValueEmpty(value)) {\n        return [];\n      }\n      return value.map((v) => {\n        return findOption(v);\n      });\n    }\n\n    // Single select - use isValueEmpty to handle marker strings (__NULL__, etc.)\n    if (isValueEmpty(value)) {\n      return null;\n    }\n    return findOption(value);\n  })();\n\n  // Handle selection change\n  const handleChange = (\n    option: MultiValue<SelectOption> | SingleValue<SelectOption>,\n  ) => {\n    if (multiSelect) {\n      onChange(\n        (option as SelectOption[])?.map((_option) => {\n          return convertToOriginalType(_option.value);\n        }),\n      );\n    } else {\n      const newValue = (option as SelectOption)?.value;\n      // Pass null explicitly when clearing (not undefined)\n      onChange(newValue != null ? convertToOriginalType(newValue) : null);\n    }\n\n    // Mark field as touched immediately when a selection is made if not already touched\n    // This ensures validation errors show right away (isTouched becomes true)\n    // For Select components, selecting an option is a complete user action\n    // (unlike text inputs where typing is ongoing), so we mark as touched immediately\n    const { isTouched: currentIsTouched } = getFieldState(name, testId);\n    if (!currentIsTouched) {\n      // Defer blur/touched notification until after the onChange value commit.\n      // This prevents \"one render cycle behind\" validation states where blur\n      // validation runs against the previous value.\n      queueMicrotask(() => {\n        onBlur();\n      });\n    }\n  };\n\n  // Handle blur event\n  const handleBlur = () => {\n    setIsFocused(false);\n    onBlur();\n  };\n\n  // Handle focus event\n  const handleFocus = () => {\n    setIsFocused(true);\n  };\n\n  return (\n    <div\n      {...getBaseProps()}\n      className={cn(classNames.base)}\n      // see HeroUI styles for group-data condition (data-invalid),\n      // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/components/select/src/use-select.ts\n      data-required={required}\n      data-testid={`${testId}_wrapper`}\n    >\n      {label ? (\n        <label\n          className={classNames.label}\n          data-slot=\"label\"\n          htmlFor={`react-select-${name}-input`}\n          id={getLabelProps().id}\n        >\n          {label}\n          {required ? (\n            <span aria-hidden className=\"ml-0.5 text-danger\">\n              *\n            </span>\n          ) : null}\n        </label>\n      ) : null}\n      <ReactSelect\n        ref={ref}\n        aria-errormessage=\"\"\n        aria-invalid={invalid}\n        aria-label={ariaLabel}\n        // set aria-labelledby to the label id so that the select is accessible\n        aria-labelledby={\n          label\n            ? getTriggerProps()['aria-labelledby']?.split(' ')[1]\n            : undefined\n        }\n        classNames={reactSelectClassNames}\n        components={{\n          Control: ControlComponent,\n          DropdownIndicator: DropdownIndicatorComponent,\n          Input: InputComponent,\n          Option: OptionComponent,\n        }}\n        // Does not affect the testId of the select, but is needed to pass it to sub-components\n        data-testid={testId}\n        filterOption={filterOption}\n        formatOptionLabel={renderOptionLabel}\n        inputValue={inputValue}\n        instanceId={name}\n        isClearable={clearable}\n        isDisabled={disabled}\n        isLoading={loading}\n        isMulti={multiSelect}\n        menuIsOpen={debugMenuOpen ? true : undefined}\n        // set menuPosition to fixed so that menu can be rendered\n        // inside Card / Modal components, menuShouldBlockScroll\n        // prevents container scroll when menu is open\n        menuPosition=\"fixed\"\n        menuShouldBlockScroll\n        name={name}\n        noOptionsMessage={renderEmptyOptions}\n        onBlur={handleBlur}\n        onChange={handleChange}\n        onFocus={handleFocus}\n        onInputChange={onInputChange}\n        options={reactSelectOptions}\n        placeholder={placeholder}\n        unstyled\n        value={reactSelectValue}\n      />\n      {invalid ? (\n        <div {...getHelperWrapperProps()}>\n          <div {...getErrorMessageProps()}>{errorMessage}</div>\n        </div>\n      ) : null}\n    </div>\n  );\n};\n\nexport default Select;\n","import Select from './Select';\n\nexport type { SelectProps, SelectOption } from './Select';\n\nexport { selectVariants } from './Select';\n\nexport default Select;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/Select/SelectComponents.tsx","../../src/Select/Select.tsx","../../src/Select/index.ts"],"sourcesContent":["import { components } from 'react-select';\n\nimport { slugify } from '@fuf-stack/pixel-utils';\n\n/** Mirrors the select test id onto the underlying react-select input element. */\nexport const InputComponent: typeof components.Input = (props) => {\n  // @ts-expect-error data-testid is not a default prop\n  // eslint-disable-next-line react/destructuring-assignment\n  const testId = `${props.selectProps['data-testid']}`;\n  return <components.Input data-testid={testId} {...props} />;\n};\n\n/** Wraps the control root to expose a stable `*_select` test id hook. */\nexport const ControlComponent: typeof components.Control = (props) => {\n  // @ts-expect-error data-testid is not a default prop\n  // eslint-disable-next-line react/destructuring-assignment\n  const testId = `${props.selectProps['data-testid']}_select`;\n  return (\n    <div data-testid={testId}>\n      <components.Control {...props} />\n    </div>\n  );\n};\n\n/** Adds deterministic option test ids and forwards disabled state semantics. */\nexport const OptionComponent: typeof components.Option = (props) => {\n  const { isDisabled } = props;\n  // @ts-expect-error data-testid is not a default prop\n  // eslint-disable-next-line react/destructuring-assignment\n  const testId = `${props.selectProps['data-testid']}_select_option_${slugify(String(props?.data?.testId ?? props?.data?.value), { replaceDots: true })}`;\n  return (\n    <div aria-disabled={isDisabled ? true : undefined} data-testid={testId}>\n      <components.Option {...props} />\n    </div>\n  );\n};\n\n/** Wraps the dropdown indicator with a predictable test id for automation. */\nexport const DropdownIndicatorComponent: typeof components.DropdownIndicator = (\n  props,\n) => {\n  // @ts-expect-error data-testid is not a default prop\n  const testId = props?.selectProps['data-testid'] as string;\n  return (\n    <div data-testid={`${testId}_select_dropdown`}>\n      <components.DropdownIndicator {...props} />\n    </div>\n  );\n};\n","import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ReactNode } from 'react';\nimport type { MultiValue, Props, SingleValue } from 'react-select';\n\nimport { useState } from 'react';\nimport ReactSelect from 'react-select';\n\nimport { useSelect } from '@heroui/select';\n\nimport { cn, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { createOptionValueConverter, isValueEmpty } from '../helpers';\nimport { useFormContext } from '../hooks/useFormContext';\nimport { useUniformField } from '../hooks/useUniformField';\nimport {\n  ControlComponent,\n  DropdownIndicatorComponent,\n  InputComponent,\n  OptionComponent,\n} from './SelectComponents';\n\nexport const selectVariants = tv({\n  slots: {\n    base: [\n      // Enables group-data selectors used by child slots.\n      'group',\n      // Make field wrappers align with other form controls.\n      'flex w-full flex-col',\n      // Keep label/control vertical rhythm consistent.\n      'gap-y-1.5',\n      // Preserve existing text flow for select content.\n      'leading-normal',\n    ],\n    clearIndicator:\n      'rounded-md p-1 text-foreground-500 hover:cursor-pointer hover:bg-default-200 hover:text-foreground-800',\n    control:\n      'duration-150! rounded-lg border-2 border-default-200 bg-content1 transition-background hover:border-default-400 group-data-[invalid=true]:border-danger group-data-[invalid=true]:hover:border-danger motion-reduce:transition-none',\n    control_focused: 'border-focus',\n    crossIcon: '',\n    downChevron: '',\n    dropdownIndicator:\n      'rounded-md p-1 text-foreground-500 hover:cursor-pointer hover:bg-default-200 hover:text-black',\n    group: '',\n    groupHeading: 'mb-1 ml-3 mt-2 text-sm text-foreground-500',\n    indicatorsContainer: 'gap-1 p-1',\n    indicatorSeparator: 'bg-default-300',\n    input: 'py-0.5 pl-1',\n    // see HeroUI styles for group-data condition,\n    // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/core/theme/src/components/select.ts\n    label:\n      'pointer-events-auto inline-flex cursor-default text-sm text-foreground subpixel-antialiased group-data-[invalid=true]:!text-danger',\n    loadingIndicator: '',\n    loadingMessage: 'rounded-sm p-2 text-foreground-500',\n    menu: 'mt-2 rounded-xl border border-default-200 bg-content1 p-1 shadow-lg',\n    menuList: '',\n    // ensure menu has same z-index as modal so it is visible when rendered in modal\n    // see: https://github.com/heroui-inc/heroui/blob/main/packages/core/theme/src/components/modal.ts (see z-50)\n    menuPortal: 'z-50!',\n    multiValue: 'items-center gap-1.5 rounded bg-default-100 py-0.5 pl-2 pr-1',\n    multiValueContainer: '',\n    multiValueLabel: 'py-0.5 leading-6',\n    multiValueRemove:\n      'rounded text-default-500 hover:cursor-pointer hover:border-default-300 hover:text-default-800',\n    noOptionsMessage: 'rounded-sm p-2 text-foreground-500',\n    option: 'rounded px-3 py-2 hover:cursor-pointer',\n    option_disabled:\n      'cursor-not-allowed! hover:cursor-not-allowed! opacity-disabled',\n    option_focused: 'bg-default-100 active:bg-default-200',\n    option_selected: 'bg-default-300',\n    placeholder: 'ml-1 py-0.5 pl-1 text-sm text-foreground-500',\n    selectContainer: '',\n    singleValue: 'ml-1! leading-7!',\n    valueContainer: 'gap-1 p-1',\n  },\n});\n\nexport interface SelectOption {\n  /** set option to disabled state */\n  disabled?: boolean;\n  /**\n   * True when option was auto-generated because the value wasn't found in options.\n   * Use in renderOptionLabel to render a component that fetches the real label.\n   */\n  isFallback?: boolean;\n  /** option label */\n  label?: ReactNode;\n  /** option value */\n  value: string | number;\n}\n\ntype VariantProps = TVProps<typeof selectVariants>;\ntype ClassName = TVClassName<typeof selectVariants>;\n\nexport interface SelectProps extends VariantProps {\n  /** Custom aria-label for accessibility. If not provided, falls back to field name when no visible label exists */\n  ariaLabel?: string;\n  /** CSS class name */\n  className?: ClassName; // string;\n  /** Determine if the  */\n  clearable?: boolean;\n  /** Set the select to disabled state. */\n  disabled?: boolean;\n  /** Force menu open for debugging or visual testing. */\n  debugMenuOpen?: boolean;\n  /** Filter Select Options */\n  filterOption?:\n    | undefined\n    | ((option?: SelectOption, inputValue?: string) => boolean);\n  /** The value of the search input */\n  inputValue?: string;\n  /** Label that should be associated with the select. */\n  label?: ReactNode;\n  /** Set the select to a loading state. */\n  loading?: boolean;\n  /** switch between single and multi select mode. */\n  multiSelect?: boolean;\n  /** The name for the Select component, used by react-hook-form */\n  name: string;\n  /** Placeholder that is displayed when nothing is selected */\n  placeholder?: string;\n  /** Handle change events on the input */\n  onInputChange?: Props['onInputChange'];\n  /** The options for the Select component */\n  options: SelectOption[];\n  /** Render custom content when no options match the current search input. */\n  renderEmptyOptions?: Props['noOptionsMessage'];\n  /** Format the label of the option */\n  renderOptionLabel?: undefined | Props['formatOptionLabel'];\n  /**\n   * Fallback option(s) for async selects when value isn't in current options.\n   * Use when the selected value may not be in the options list (e.g., after\n   * search results change). Used only if value not found in options.\n   * For single select: pass the option object or undefined\n   * For multi-select: pass an array of option objects\n   */\n  selectedOptionFallback?: SelectOption | SelectOption[];\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n}\n\n/** Select component based on [HeroUI Select](https://www.heroui.com//docs/components/select) and [React-Select](https://react-select.com/home) */\nconst Select = ({\n  className = undefined,\n  clearable = true,\n  debugMenuOpen = false,\n  filterOption = undefined,\n  inputValue = undefined,\n  loading = false,\n  multiSelect = false,\n  name,\n  onInputChange = undefined,\n  options,\n  placeholder = undefined,\n  renderEmptyOptions = undefined,\n  renderOptionLabel = undefined,\n  selectedOptionFallback = undefined,\n  ...uniformFieldProps\n}: SelectProps) => {\n  const {\n    ariaLabel,\n    disabled,\n    errorMessage,\n    field: { onBlur, onChange, ref, value },\n    getErrorMessageProps,\n    getHelperWrapperProps,\n    getLabelProps,\n    invalid,\n    label,\n    required,\n    testId,\n  } = useUniformField({\n    // Multi-select values are arrays and can produce nested RHF error shapes.\n    isArrayValue: multiSelect,\n    name,\n    ...uniformFieldProps,\n  });\n\n  // Get getFieldState to check isTouched in onChange callback\n  const { getFieldState } = useFormContext();\n\n  // Track if the select is focused\n  const [isFocused, setIsFocused] = useState(false);\n\n  // Create converter to preserve number types for option values\n  const { convertToOriginalType } = createOptionValueConverter(options);\n\n  // classNames from slots\n  const variants = selectVariants();\n  const classNames = variantsToClassNames(variants, className, 'base');\n\n  // React-select classNames configuration\n  const reactSelectClassNames = {\n    clearIndicator: () => {\n      return classNames.clearIndicator;\n    },\n    control: () => {\n      return cn(classNames.control, {\n        [classNames.control_focused]: isFocused && !invalid,\n      });\n    },\n    dropdownIndicator: () => {\n      return classNames.dropdownIndicator;\n    },\n    groupHeading: () => {\n      return classNames.groupHeading;\n    },\n    indicatorSeparator: () => {\n      return classNames.indicatorSeparator;\n    },\n    indicatorsContainer: () => {\n      return classNames.indicatorsContainer;\n    },\n    input: () => {\n      return classNames.input;\n    },\n    loadingIndicator: () => {\n      return classNames.loadingIndicator;\n    },\n    loadingMessage: () => {\n      return classNames.loadingMessage;\n    },\n    menu: () => {\n      return classNames.menu;\n    },\n    menuList: () => {\n      return classNames.menuList;\n    },\n    menuPortal: () => {\n      return classNames.menuPortal;\n    },\n    multiValue: () => {\n      return classNames.multiValue;\n    },\n    multiValueLabel: () => {\n      return cn(classNames.multiValueLabel, `${getValueProps().className}`);\n    },\n    multiValueRemove: () => {\n      return classNames.multiValueRemove;\n    },\n    noOptionsMessage: () => {\n      return classNames.noOptionsMessage;\n    },\n    option: ({\n      isDisabled: optionIsDisabled,\n      isFocused: optionIsFocused,\n      isSelected: optionIsSelected,\n    }: {\n      isDisabled: boolean;\n      isFocused: boolean;\n      isSelected: boolean;\n    }) => {\n      return cn(classNames.option, {\n        [classNames.option_disabled]: optionIsDisabled,\n        [classNames.option_focused]: optionIsFocused,\n        [classNames.option_selected]: optionIsSelected,\n      });\n    },\n    placeholder: () => {\n      return classNames.placeholder;\n    },\n    singleValue: () => {\n      return cn(classNames.singleValue, `${getValueProps().className}`);\n    },\n    valueContainer: () => {\n      return classNames.valueContainer;\n    },\n  };\n\n  const { getBaseProps, getTriggerProps, getValueProps } = useSelect({\n    children: [],\n    classNames,\n    errorMessage,\n    isDisabled: disabled,\n    isInvalid: invalid,\n    isLoading: loading,\n    isRequired: required,\n    label,\n    labelPlacement: 'outside',\n  });\n\n  // react-select expects `isDisabled`, while our option contract uses `disabled`.\n  const reactSelectOptions = options.map((option) => {\n    return {\n      ...option,\n      isDisabled: option.disabled,\n    };\n  });\n\n  // Compute selected option(s) for react-select\n  //\n  // Priority for finding options:\n  // 1. Look in current options list\n  // 2. Use selectedOptionFallback prop (for async selects with pre-fetched data)\n  // 3. Create fallback with value as label\n  //\n  // Handles edge cases:\n  // - Compares as strings to support both string and number values\n  // - Returns null for empty single-select (required by react-select to clear)\n  // - Creates fallback options when value exists but isn't in options list\n  //   (common with async selects where options change after selection)\n  const reactSelectValue = (() => {\n    // Helper to find option by value\n    const findOption = (v: string | number): SelectOption => {\n      // First, look in options list\n      const inOptions = options.find((option) => {\n        return String(option.value) === String(v);\n      });\n      if (inOptions) {\n        return inOptions;\n      }\n\n      // Second, look in selectedOptionFallback prop (for async selects)\n      if (selectedOptionFallback) {\n        if (Array.isArray(selectedOptionFallback)) {\n          const inSelected = selectedOptionFallback.find((option) => {\n            return String(option.value) === String(v);\n          });\n          if (inSelected) {\n            return inSelected;\n          }\n        } else if (String(selectedOptionFallback.value) === String(v)) {\n          return selectedOptionFallback;\n        }\n      }\n\n      // Fallback: create option with value as label, marked as fallback\n      return { isFallback: true, label: String(v), value: v };\n    };\n\n    if (multiSelect) {\n      if (!Array.isArray(value) || isValueEmpty(value)) {\n        return [];\n      }\n      return value.map((v) => {\n        return findOption(v);\n      });\n    }\n\n    // Single select - use isValueEmpty to handle marker strings (__NULL__, etc.)\n    if (isValueEmpty(value)) {\n      return null;\n    }\n    return findOption(value);\n  })();\n\n  // Handle selection change\n  const handleChange = (\n    option: MultiValue<SelectOption> | SingleValue<SelectOption>,\n  ) => {\n    if (multiSelect) {\n      onChange(\n        (option as SelectOption[])?.map((_option) => {\n          return convertToOriginalType(_option.value);\n        }),\n      );\n    } else {\n      const newValue = (option as SelectOption)?.value;\n      // Pass null explicitly when clearing (not undefined)\n      onChange(newValue != null ? convertToOriginalType(newValue) : null);\n    }\n\n    // Mark field as touched immediately when a selection is made if not already touched\n    // This ensures validation errors show right away (isTouched becomes true)\n    // For Select components, selecting an option is a complete user action\n    // (unlike text inputs where typing is ongoing), so we mark as touched immediately\n    const { isTouched: currentIsTouched } = getFieldState(name, testId);\n    if (!currentIsTouched) {\n      // Defer blur/touched notification until after the onChange value commit.\n      // This prevents \"one render cycle behind\" validation states where blur\n      // validation runs against the previous value.\n      queueMicrotask(() => {\n        onBlur();\n      });\n    }\n  };\n\n  // Handle blur event\n  const handleBlur = () => {\n    setIsFocused(false);\n    onBlur();\n  };\n\n  // Handle focus event\n  const handleFocus = () => {\n    setIsFocused(true);\n  };\n\n  return (\n    <div\n      {...getBaseProps()}\n      className={cn(classNames.base)}\n      // see HeroUI styles for group-data condition (data-invalid),\n      // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/components/select/src/use-select.ts\n      data-required={required}\n      data-testid={`${testId}_wrapper`}\n    >\n      {label ? (\n        <label\n          className={classNames.label}\n          data-slot=\"label\"\n          htmlFor={`react-select-${name}-input`}\n          id={getLabelProps().id}\n        >\n          {label}\n          {required ? (\n            <span aria-hidden className=\"ml-0.5 text-danger\">\n              *\n            </span>\n          ) : null}\n        </label>\n      ) : null}\n      <ReactSelect\n        ref={ref}\n        aria-errormessage=\"\"\n        aria-invalid={invalid}\n        aria-label={ariaLabel}\n        // set aria-labelledby to the label id so that the select is accessible\n        aria-labelledby={\n          label\n            ? getTriggerProps()['aria-labelledby']?.split(' ')[1]\n            : undefined\n        }\n        classNames={reactSelectClassNames}\n        components={{\n          Control: ControlComponent,\n          DropdownIndicator: DropdownIndicatorComponent,\n          Input: InputComponent,\n          Option: OptionComponent,\n        }}\n        // Does not affect the testId of the select, but is needed to pass it to sub-components\n        data-testid={testId}\n        filterOption={filterOption}\n        formatOptionLabel={renderOptionLabel}\n        inputValue={inputValue}\n        instanceId={name}\n        isClearable={clearable}\n        isDisabled={disabled}\n        isLoading={loading}\n        isMulti={multiSelect}\n        menuIsOpen={debugMenuOpen ? true : undefined}\n        // set menuPosition to fixed so that menu can be rendered\n        // inside Card / Modal components, menuShouldBlockScroll\n        // prevents container scroll when menu is open\n        menuPosition=\"fixed\"\n        menuShouldBlockScroll\n        name={name}\n        noOptionsMessage={renderEmptyOptions}\n        onBlur={handleBlur}\n        onChange={handleChange}\n        onFocus={handleFocus}\n        onInputChange={onInputChange}\n        options={reactSelectOptions}\n        placeholder={placeholder}\n        unstyled\n        value={reactSelectValue}\n      />\n      {invalid ? (\n        <div {...getHelperWrapperProps()}>\n          <div {...getErrorMessageProps()}>{errorMessage}</div>\n        </div>\n      ) : null}\n    </div>\n  );\n};\n\nexport default Select;\n","import Select from './Select';\n\nexport type { SelectProps, SelectOption } from './Select';\n\nexport { selectVariants } from './Select';\n\nexport default Select;\n"],"mappings":"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"}

package/dist/Slider/index.cjs

@@ -10,12 +10,16 @@ let _react_aria_visually_hidden = require("@react-aria/visually-hidden");
 let _heroui_slider = require("@heroui/slider");
 //#region src/Slider/Slider.tsx
 const sliderVariants = (0, _fuf_stack_pixel_utils.tv)({ slots: {
-	base: "group",
+	base: [
+		"group",
+		"flex w-full flex-col",
+		"gap-y-1.5"
+	],
 	endContent: "",
 	errorMessage: "ml-1 mt-1",
 	filler: "",
-	label: "text-sm text-foreground subpixel-antialiased group-data-[invalid=true]:!text-danger group-data-[required=true]:after:ml-0.5 group-data-[required=true]:after:text-danger group-data-[required=true]:after:content-[\"*\"]",
-	labelWrapper: "",
+	label: "cursor-default text-sm text-foreground subpixel-antialiased group-data-[invalid=true]:!text-danger group-data-[required=true]:after:ml-0.5 group-data-[required=true]:after:text-danger group-data-[required=true]:after:content-[\"*\"]",
+	labelWrapper: "mb-1",
 	mark: "",
 	startContent: "",
 	step: "",

package/dist/Slider/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["useUniformField","VisuallyHidden","HeroUISlider"],"sources":["../../src/Slider/Slider.tsx","../../src/Slider/index.ts"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ReactNode } from 'react';\n\nimport { useRef } from 'react';\n\nimport { Slider as HeroUISlider } from '@heroui/slider';\nimport { VisuallyHidden } from '@react-aria/visually-hidden';\n\nimport { cn, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { useUniformField } from '../hooks/useUniformField';\n\nexport const sliderVariants = tv({\n  slots: {\n    base: 'group',\n    endContent: '',\n    errorMessage: 'ml-1 mt-1',\n    filler: '',\n    // see HeroUI styles for group-data condition,\n    // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/core/theme/src/components/select.ts\n    label:\n      'text-sm text-foreground subpixel-antialiased group-data-[invalid=true]:!text-danger group-data-[required=true]:after:ml-0.5 group-data-[required=true]:after:text-danger group-data-[required=true]:after:content-[\"*\"]',\n    labelWrapper: '',\n    mark: '',\n    startContent: '',\n    step: '',\n    thumb: '',\n    track: '',\n    trackWrapper: '',\n    value: '',\n  },\n});\n\ntype VariantProps = TVProps<typeof sliderVariants>;\ntype ClassName = TVClassName<typeof sliderVariants>;\n\nexport interface SliderProps extends VariantProps {\n  /** Custom aria-label for accessibility. If not provided, falls back to field name when no visible label exists */\n  ariaLabel?: string;\n  /** CSS class name */\n  className?: ClassName;\n  /** input field is disabled */\n  disabled?: boolean;\n  /** Content to display at the end of the slider */\n  endContent?: ReactNode;\n  /** The offset from where the fill should start */\n  fillOffset?: number;\n  /** form field label */\n  label?: string;\n  /** form field name */\n  name: string;\n  /**\n   * Whether to show step dots on the slider\n   * @default false\n   */\n  showSteps?: boolean;\n  /**\n   * The size of the slider\n   * @default \"md\"\n   */\n  size?: 'sm' | 'md' | 'lg';\n  /** Content to display at the start of the slider */\n  startContent?: ReactNode;\n  /**\n   * The step value of the slider\n   * @default 1\n   */\n  step?: number;\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n  /**\n   * The minimum value of the slider\n   * @default 0\n   */\n  minValue?: number;\n  /**\n   * The maximum value of the slider\n   * @default 100\n   */\n  maxValue?: number;\n}\n\n/**\n * Slider component based on [HeroUI Slider](https://www.heroui.com//docs/components/slider)\n */\nconst Slider = ({\n  className = undefined,\n  endContent = undefined,\n  fillOffset = undefined,\n  name,\n  showSteps = false,\n  size = 'md',\n  startContent = undefined,\n  step = 1,\n  minValue = 0,\n  maxValue = 100,\n  ...uniformFieldProps\n}: SliderProps) => {\n  const {\n    ariaLabel,\n    disabled,\n    field,\n    getErrorMessageProps,\n    getHelperWrapperProps,\n    invalid,\n    label,\n    onBlur,\n    onChange,\n    ref,\n    required,\n    errorMessage,\n    testId,\n  } = useUniformField({\n    name,\n    ...uniformFieldProps,\n  });\n\n  // Ref for the visual slider to forward focus\n  const visualSliderRef = useRef<HTMLDivElement>(null);\n\n  // classNames from slots\n  const variants = sliderVariants();\n  const classNames = variantsToClassNames(variants, className, 'base');\n\n  // Get the current value, defaulting to minValue if null/undefined\n  const currentValue = field.value != null ? Number(field.value) : minValue;\n\n  return (\n    <div\n      className={classNames.base}\n      data-invalid={invalid}\n      data-required={required}\n      data-testid={testId}\n    >\n      {/* Visually hidden input for form accessibility and focus management */}\n      <VisuallyHidden>\n        <input\n          ref={ref}\n          aria-label={ariaLabel}\n          disabled={disabled}\n          max={maxValue}\n          min={minValue}\n          name={name}\n          onBlur={onBlur}\n          onChange={(e) => {\n            onChange(Number(e.target.value));\n          }}\n          onFocus={() => {\n            // When RHF focuses this hidden input (e.g., on validation error),\n            // forward focus to the visual slider to show focus ring\n            visualSliderRef.current?.focus();\n          }}\n          step={step}\n          tabIndex={-1}\n          type=\"range\"\n          value={currentValue}\n        />\n      </VisuallyHidden>\n      {/* Visual HeroUISlider component */}\n      <HeroUISlider\n        ref={visualSliderRef}\n        aria-label={ariaLabel}\n        classNames={{\n          endContent: classNames.endContent,\n          filler: classNames.filler,\n          label: classNames.label,\n          labelWrapper: classNames.labelWrapper,\n          mark: classNames.mark,\n          startContent: classNames.startContent,\n          step: classNames.step,\n          thumb: classNames.thumb,\n          track: classNames.track,\n          trackWrapper: classNames.trackWrapper,\n          value: classNames.value,\n        }}\n        color={invalid ? 'danger' : 'primary'}\n        endContent={endContent}\n        fillOffset={fillOffset}\n        isDisabled={disabled}\n        label={label}\n        maxValue={maxValue}\n        minValue={minValue}\n        name={`${name}_slider`}\n        onBlur={onBlur}\n        onChange={onChange}\n        showSteps={showSteps}\n        size={size}\n        startContent={startContent}\n        step={step}\n        value={currentValue}\n      />\n      {invalid ? (\n        <div\n          {...getHelperWrapperProps()}\n          className={cn(\n            getHelperWrapperProps()?.className,\n            // force helper to be visible (for some reason it's hidden by default) and remove margin\n            'ml-0 block',\n          )}\n        >\n          <div {...getErrorMessageProps()}>{errorMessage}</div>\n        </div>\n      ) : null}\n    </div>\n  );\n};\n\nexport default Slider;\n","import Slider from './Slider';\n\nexport type { SliderProps } from './Slider';\n\nexport { sliderVariants } from './Slider';\n\nexport default Slider;\n"],"mappings":";;;;;;;;;;;AAYA,MAAa,kBAAA,GAAA,uBAAA,IAAoB,EAC/B,OAAO;CACL,MAAM;CACN,YAAY;CACZ,cAAc;CACd,QAAQ;CAGR,OACE;CACF,cAAc;CACd,MAAM;CACN,cAAc;CACd,MAAM;CACN,OAAO;CACP,OAAO;CACP,cAAc;CACd,OAAO;AACT,EACF,CAAC;;;;AAsDD,MAAM,UAAU,EACd,YAAY,KAAA,GACZ,aAAa,KAAA,GACb,aAAa,KAAA,GACb,MACA,YAAY,OACZ,OAAO,MACP,eAAe,KAAA,GACf,OAAO,GACP,WAAW,GACX,WAAW,KACX,GAAG,wBACc;CACjB,MAAM,EACJ,WACA,UACA,OACA,sBACA,uBACA,SACA,OACA,QACA,UACA,KACA,UACA,cACA,WACEA,oCAAAA,gBAAgB;EAClB;EACA,GAAG;CACL,CAAC;CAGD,MAAM,mBAAA,GAAA,MAAA,QAAyC,IAAI;CAInD,MAAM,cAAA,GAAA,uBAAA,sBADW,eAC8B,GAAG,WAAW,MAAM;CAGnE,MAAM,eAAe,MAAM,SAAS,OAAO,OAAO,MAAM,KAAK,IAAI;CAEjE,OACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EACE,WAAW,WAAW;EACtB,gBAAc;EACd,iBAAe;EACf,eAAa;YAJf;GAOE,iBAAA,GAAA,kBAAA,KAACC,4BAAAA,gBAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,KAAC,SAAD;IACO;IACL,cAAY;IACF;IACV,KAAK;IACL,KAAK;IACC;IACE;IACR,WAAW,MAAM;KACf,SAAS,OAAO,EAAE,OAAO,KAAK,CAAC;IACjC;IACA,eAAe;KAGb,gBAAgB,SAAS,MAAM;IACjC;IACM;IACN,UAAU;IACV,MAAK;IACL,OAAO;GACR,CAAA,EACa,CAAA;GAEhB,iBAAA,GAAA,kBAAA,KAACC,eAAAA,QAAD;IACE,KAAK;IACL,cAAY;IACZ,YAAY;KACV,YAAY,WAAW;KACvB,QAAQ,WAAW;KACnB,OAAO,WAAW;KAClB,cAAc,WAAW;KACzB,MAAM,WAAW;KACjB,cAAc,WAAW;KACzB,MAAM,WAAW;KACjB,OAAO,WAAW;KAClB,OAAO,WAAW;KAClB,cAAc,WAAW;KACzB,OAAO,WAAW;IACpB;IACA,OAAO,UAAU,WAAW;IAChB;IACA;IACZ,YAAY;IACL;IACG;IACA;IACV,MAAM,GAAG,KAAK;IACN;IACE;IACC;IACL;IACQ;IACR;IACN,OAAO;GACR,CAAA;GACA,UACC,iBAAA,GAAA,kBAAA,KAAC,OAAD;IACE,GAAI,sBAAsB;IAC1B,YAAA,GAAA,uBAAA,IACE,sBAAsB,GAAG,WAEzB,YACF;cAEA,iBAAA,GAAA,kBAAA,KAAC,OAAD;KAAK,GAAI,qBAAqB;eAAI;IAAkB,CAAA;GACjD,CAAA,IACH;EACD;;AAET;;;ACvMA,IAAA,iBAAe"}
+{"version":3,"file":"index.cjs","names":["useUniformField","VisuallyHidden","HeroUISlider"],"sources":["../../src/Slider/Slider.tsx","../../src/Slider/index.ts"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ReactNode } from 'react';\n\nimport { useRef } from 'react';\n\nimport { Slider as HeroUISlider } from '@heroui/slider';\nimport { VisuallyHidden } from '@react-aria/visually-hidden';\n\nimport { cn, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { useUniformField } from '../hooks/useUniformField';\n\nexport const sliderVariants = tv({\n  slots: {\n    base: [\n      // Enables group-data selectors used by slider slots.\n      'group',\n      // Match shared field wrapper layout.\n      'flex w-full flex-col',\n      // Keep spacing between label/track consistent.\n      'gap-y-1.5',\n    ],\n    endContent: '',\n    errorMessage: 'ml-1 mt-1',\n    filler: '',\n    // see HeroUI styles for group-data condition,\n    // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/core/theme/src/components/select.ts\n    label:\n      'cursor-default text-sm text-foreground subpixel-antialiased group-data-[invalid=true]:!text-danger group-data-[required=true]:after:ml-0.5 group-data-[required=true]:after:text-danger group-data-[required=true]:after:content-[\"*\"]',\n    labelWrapper: 'mb-1',\n    mark: '',\n    startContent: '',\n    step: '',\n    thumb: '',\n    track: '',\n    trackWrapper: '',\n    value: '',\n  },\n});\n\ntype VariantProps = TVProps<typeof sliderVariants>;\ntype ClassName = TVClassName<typeof sliderVariants>;\n\nexport interface SliderProps extends VariantProps {\n  /** Custom aria-label for accessibility. If not provided, falls back to field name when no visible label exists */\n  ariaLabel?: string;\n  /** CSS class name */\n  className?: ClassName;\n  /** input field is disabled */\n  disabled?: boolean;\n  /** Content to display at the end of the slider */\n  endContent?: ReactNode;\n  /** The offset from where the fill should start */\n  fillOffset?: number;\n  /** form field label */\n  label?: string;\n  /** form field name */\n  name: string;\n  /**\n   * Whether to show step dots on the slider\n   * @default false\n   */\n  showSteps?: boolean;\n  /**\n   * The size of the slider\n   * @default \"md\"\n   */\n  size?: 'sm' | 'md' | 'lg';\n  /** Content to display at the start of the slider */\n  startContent?: ReactNode;\n  /**\n   * The step value of the slider\n   * @default 1\n   */\n  step?: number;\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n  /**\n   * The minimum value of the slider\n   * @default 0\n   */\n  minValue?: number;\n  /**\n   * The maximum value of the slider\n   * @default 100\n   */\n  maxValue?: number;\n}\n\n/**\n * Slider component based on [HeroUI Slider](https://www.heroui.com//docs/components/slider)\n */\nconst Slider = ({\n  className = undefined,\n  endContent = undefined,\n  fillOffset = undefined,\n  name,\n  showSteps = false,\n  size = 'md',\n  startContent = undefined,\n  step = 1,\n  minValue = 0,\n  maxValue = 100,\n  ...uniformFieldProps\n}: SliderProps) => {\n  const {\n    ariaLabel,\n    disabled,\n    field,\n    getErrorMessageProps,\n    getHelperWrapperProps,\n    invalid,\n    label,\n    onBlur,\n    onChange,\n    ref,\n    required,\n    errorMessage,\n    testId,\n  } = useUniformField({\n    name,\n    ...uniformFieldProps,\n  });\n\n  // Ref for the visual slider to forward focus\n  const visualSliderRef = useRef<HTMLDivElement>(null);\n\n  // classNames from slots\n  const variants = sliderVariants();\n  const classNames = variantsToClassNames(variants, className, 'base');\n\n  // Get the current value, defaulting to minValue if null/undefined\n  const currentValue = field.value != null ? Number(field.value) : minValue;\n\n  return (\n    <div\n      className={classNames.base}\n      data-invalid={invalid}\n      data-required={required}\n      data-testid={testId}\n    >\n      {/* Visually hidden input for form accessibility and focus management */}\n      <VisuallyHidden>\n        <input\n          ref={ref}\n          aria-label={ariaLabel}\n          disabled={disabled}\n          max={maxValue}\n          min={minValue}\n          name={name}\n          onBlur={onBlur}\n          onChange={(e) => {\n            onChange(Number(e.target.value));\n          }}\n          onFocus={() => {\n            // When RHF focuses this hidden input (e.g., on validation error),\n            // forward focus to the visual slider to show focus ring\n            visualSliderRef.current?.focus();\n          }}\n          step={step}\n          tabIndex={-1}\n          type=\"range\"\n          value={currentValue}\n        />\n      </VisuallyHidden>\n      {/* Visual HeroUISlider component */}\n      <HeroUISlider\n        ref={visualSliderRef}\n        aria-label={ariaLabel}\n        classNames={{\n          endContent: classNames.endContent,\n          filler: classNames.filler,\n          label: classNames.label,\n          labelWrapper: classNames.labelWrapper,\n          mark: classNames.mark,\n          startContent: classNames.startContent,\n          step: classNames.step,\n          thumb: classNames.thumb,\n          track: classNames.track,\n          trackWrapper: classNames.trackWrapper,\n          value: classNames.value,\n        }}\n        color={invalid ? 'danger' : 'primary'}\n        endContent={endContent}\n        fillOffset={fillOffset}\n        isDisabled={disabled}\n        label={label}\n        maxValue={maxValue}\n        minValue={minValue}\n        name={`${name}_slider`}\n        onBlur={onBlur}\n        onChange={onChange}\n        showSteps={showSteps}\n        size={size}\n        startContent={startContent}\n        step={step}\n        value={currentValue}\n      />\n      {invalid ? (\n        <div\n          {...getHelperWrapperProps()}\n          className={cn(\n            getHelperWrapperProps()?.className,\n            // force helper to be visible (for some reason it's hidden by default) and remove margin\n            'ml-0 block',\n          )}\n        >\n          <div {...getErrorMessageProps()}>{errorMessage}</div>\n        </div>\n      ) : null}\n    </div>\n  );\n};\n\nexport default Slider;\n","import Slider from './Slider';\n\nexport type { SliderProps } from './Slider';\n\nexport { sliderVariants } from './Slider';\n\nexport default Slider;\n"],"mappings":";;;;;;;;;;;AAYA,MAAa,kBAAA,GAAA,uBAAA,IAAoB,EAC/B,OAAO;CACL,MAAM;EAEJ;EAEA;EAEA;CACF;CACA,YAAY;CACZ,cAAc;CACd,QAAQ;CAGR,OACE;CACF,cAAc;CACd,MAAM;CACN,cAAc;CACd,MAAM;CACN,OAAO;CACP,OAAO;CACP,cAAc;CACd,OAAO;AACT,EACF,CAAC;;;;AAsDD,MAAM,UAAU,EACd,YAAY,KAAA,GACZ,aAAa,KAAA,GACb,aAAa,KAAA,GACb,MACA,YAAY,OACZ,OAAO,MACP,eAAe,KAAA,GACf,OAAO,GACP,WAAW,GACX,WAAW,KACX,GAAG,wBACc;CACjB,MAAM,EACJ,WACA,UACA,OACA,sBACA,uBACA,SACA,OACA,QACA,UACA,KACA,UACA,cACA,WACEA,oCAAAA,gBAAgB;EAClB;EACA,GAAG;CACL,CAAC;CAGD,MAAM,mBAAA,GAAA,MAAA,QAAyC,IAAI;CAInD,MAAM,cAAA,GAAA,uBAAA,sBADW,eAC8B,GAAG,WAAW,MAAM;CAGnE,MAAM,eAAe,MAAM,SAAS,OAAO,OAAO,MAAM,KAAK,IAAI;CAEjE,OACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EACE,WAAW,WAAW;EACtB,gBAAc;EACd,iBAAe;EACf,eAAa;YAJf;GAOE,iBAAA,GAAA,kBAAA,KAACC,4BAAAA,gBAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,KAAC,SAAD;IACO;IACL,cAAY;IACF;IACV,KAAK;IACL,KAAK;IACC;IACE;IACR,WAAW,MAAM;KACf,SAAS,OAAO,EAAE,OAAO,KAAK,CAAC;IACjC;IACA,eAAe;KAGb,gBAAgB,SAAS,MAAM;IACjC;IACM;IACN,UAAU;IACV,MAAK;IACL,OAAO;GACR,CAAA,EACa,CAAA;GAEhB,iBAAA,GAAA,kBAAA,KAACC,eAAAA,QAAD;IACE,KAAK;IACL,cAAY;IACZ,YAAY;KACV,YAAY,WAAW;KACvB,QAAQ,WAAW;KACnB,OAAO,WAAW;KAClB,cAAc,WAAW;KACzB,MAAM,WAAW;KACjB,cAAc,WAAW;KACzB,MAAM,WAAW;KACjB,OAAO,WAAW;KAClB,OAAO,WAAW;KAClB,cAAc,WAAW;KACzB,OAAO,WAAW;IACpB;IACA,OAAO,UAAU,WAAW;IAChB;IACA;IACZ,YAAY;IACL;IACG;IACA;IACV,MAAM,GAAG,KAAK;IACN;IACE;IACC;IACL;IACQ;IACR;IACN,OAAO;GACR,CAAA;GACA,UACC,iBAAA,GAAA,kBAAA,KAAC,OAAD;IACE,GAAI,sBAAsB;IAC1B,YAAA,GAAA,uBAAA,IACE,sBAAsB,GAAG,WAEzB,YACF;cAEA,iBAAA,GAAA,kBAAA,KAAC,OAAD;KAAK,GAAI,qBAAqB;eAAI;IAAkB,CAAA;GACjD,CAAA,IACH;EACD;;AAET;;;AC9MA,IAAA,iBAAe"}