@rentnerkev/select 1.0.1 → 3.0.0

package/README.md

@@ -1,150 +1,257 @@
 # @rentnerkev/select
 
-Eine flexible React-Select-Komponente mit Einzel- und Mehrfachauswahl, Formularvalidierung und anpassbarem Tailwind-Design.
+An accessible, searchable React select for typed single and multiple selection, native form integration, validation, localization, and Tailwind CSS styling.
 
 ## Installation
 
-Installiere das Paket mit npm oder Bun:
+Install the package with npm:
 
 ```bash
 npm install @rentnerkev/select
 ```
 
-## Schnellstart
+Or with Bun:
 
-### 1. Komponente verwenden
+```bash
+bun add @rentnerkev/select
+```
 
-Importiere `CustomSelect` und nutze es in deinen Komponenten.
+## Quick start
+
+`CustomSelect<TValue>` infers its value type from `value` and `options`, so the change handler remains typed without casts.
 
 ```tsx
-import { CustomSelect } from '@rentnerkev/select'
+import { CustomSelect, type Option } from '@rentnerkev/select'
 import { useState } from 'react'
-import { User } from 'lucide-react'
 
-function MyComponent() {
-    const [selectedValue, setSelectedValue] = useState('')
+const contactOptions = [
+    {
+        value: 'alex-morgan',
+        label: 'Alex Morgan',
+        subOption: 'Customer success',
+    },
+    {
+        value: 'sam-rivera',
+        label: 'Sam Rivera',
+        subOption: 'Technical support',
+    },
+] satisfies ReadonlyArray<Option<string>>
 
-    const options = [
-        {
-            value: 'max-mustermann',
-            label: 'Max - Mustermann',
-            subOption: 'Musterstraße 12, 10115 Berlin',
-        },
-        {
-            value: 'erika-musterfrau',
-            label: 'Erika - Musterfrau',
-            subOption: 'Hafenweg 4, 20457 Hamburg',
-        },
-        {
-            value: 'tim-schneider',
-            label: 'Tim - Schneider',
-            subOption: 'Königsallee 22, 40212 Düsseldorf',
-        },
-    ]
+export function ContactSelect() {
+    const [contact, setContact] = useState('')
 
     return (
-        <div className="w-64">
-            <CustomSelect
-                id="fruit"
-                name="fruit"
-                value={selectedValue}
-                onValueChange={setSelectedValue}
-                options={options}
-                placeholder="Kontakt auswählen"
-                required
-                className="w-30 h-10"
-                fallbackOption="Du hast noch keine Früchte angelegt!"
-                icon={<User className="h-4 w-4" />}
-            />
-        </div>
+        <CustomSelect
+            id="contact"
+            name="contact"
+            label="Contact"
+            value={contact}
+            onValueChange={setContact}
+            options={contactOptions}
+            placeholder="Choose a contact"
+            required
+        />
+    )
+}
+```
+
+## Generic values
+
+Strings, numbers, booleans, and objects are supported. Use `isOptionEqualToValue` to define equality for object values and `getFormValue` to serialize values for native form submission. Without `getFormValue`, the component uses `String(value)`.
+
+```tsx
+import { CustomSelect, type Option } from '@rentnerkev/select'
+import { useState } from 'react'
+
+const statuses = ['todo', 'done'] as const
+type Status = (typeof statuses)[number]
+
+const statusOptions = statuses.map((status) => ({
+    value: status,
+    label: status === 'todo' ? 'To do' : 'Done',
+})) satisfies ReadonlyArray<Option<Status>>
+
+export function StatusSelect() {
+    const [status, setStatus] = useState<Status>('todo')
+
+    return (
+        <CustomSelect
+            value={status}
+            onValueChange={setStatus}
+            options={statusOptions}
+        />
+    )
+}
+```
+
+## Multiple selection
+
+The current multiple-selection API uses an array, preserving values that contain commas:
+
+```tsx
+import { CustomSelect } from '@rentnerkev/select'
+import { useState } from 'react'
+
+export function RegionSelect() {
+    const [regions, setRegions] = useState<Array<string>>([])
+
+    return (
+        <CustomSelect
+            name="regions"
+            multiple
+            value={regions}
+            onValueChange={setRegions}
+            options={[
+                { value: 'north,west', label: 'North West' },
+                { value: 'south', label: 'South' },
+            ]}
+            minSelection={1}
+            maxSelection={2}
+        />
     )
 }
 ```
 
-### 2. In Formularen mit required
+When `name` is set, each selected array item is submitted under the same field name. Read all values with `new FormData(form).getAll('regions')`.
+
+Multiple selection uses a typed array value and submits one native form entry per selected option. Values containing commas remain unambiguous.
 
-`required` ist standardmäßig deaktiviert. Wenn du es setzt und beim Submit noch kein Wert ausgewählt wurde, wird der Select rot, das linke Icon wird durch ein Ausrufezeichen ersetzt und der Fehlertext wird im Tooltip angezeigt. Das ist das praktisch, wenn der Placeholder wie "Bereich auswählen" nur ein Hinweis und keine echte Auswahl sein soll.
+## Forms and accessibility
+
+The visible trigger supports labels, descriptions, external errors, native validation, and forwarded `aria-*` attributes. Set `required` to participate in form validation. `disabled` removes the field from interaction and validation; `readOnly` prevents changes while retaining the submitted value.
 
 ```tsx
 import { CustomSelect } from '@rentnerkev/select'
-import { BriefcaseBusiness } from 'lucide-react'
 import { useState } from 'react'
 
-function RequiredSelectForm() {
+export function DepartmentForm() {
     const [department, setDepartment] = useState('')
 
     return (
-        <form
-            onSubmit={(event) => {
-                event.preventDefault()
-                event.currentTarget.reportValidity()
-            }}
-        >
+        <form>
             <CustomSelect
                 id="department"
                 name="department"
+                label="Department"
+                description="Choose the team that owns this request."
                 value={department}
                 onValueChange={setDepartment}
                 options={[
-                    { value: 'beratung', label: 'Beratung' },
+                    { value: 'consulting', label: 'Consulting' },
                     { value: 'support', label: 'Support' },
-                    { value: 'vertrieb', label: 'Vertrieb' },
+                    { value: 'sales', label: 'Sales' },
                 ]}
-                placeholder="Bereich auswählen"
+                placeholder="Choose a department"
                 required
-                icon={<BriefcaseBusiness className="h-4 w-4" />}
+                locale="en"
             />
 
-            <button type="submit">Absenden</button>
+            <button type="submit">Submit</button>
         </form>
     )
 }
 ```
 
-## Typdefinitionen
+## Localization
 
-### `CustomSelect`-Props
+German messages remain the default for backward compatibility. Set `locale="en"` for the complete English catalog, or override individual messages with a typed `Partial<SelectMessages>`. The catalog and resolver are available as `selectMessageCatalog` and `resolveSelectMessages`.
 
-Die Komponente nimmt folgende Parameter entgegen:
+```tsx
+import { CustomSelect, type SelectMessages } from '@rentnerkev/select'
+import { useState } from 'react'
 
-| Parameter        | Typ                       | Beschreibung                                                             |
-| ---------------- | ------------------------- | ------------------------------------------------------------------------ |
-| `id`             | `string`                  | (Optional) ID für den sichtbaren Trigger, nützlich für Labels.           |
-| `name`           | `string`                  | (Optional) Name für Formular-Submit und native Validierung.              |
-| `value`          | `string`                  | Der aktuell ausgewählte Wert.                                            |
-| `onValueChange`  | `(value: string) => void` | Callback-Funktion, die bei Änderung aufgerufen wird.                     |
-| `options`        | `Option[]`                | Ein Array von Optionen (siehe unten).                                    |
-| `required`       | `boolean`                 | (Optional) Aktiviert Pflichtfeld-Validierung. Default ist `false`.       |
-| `className`      | `string`                  | (Optional) Überträgt classes an die Select-Komponente.                   |
-| `placeholder`    | `string`                  | (Optional) Text, der angezeigt wird, wenn nichts ausgewählt ist.         |
-| `icon`           | `React.ReactNode`         | (Optional) Ein Icon, das links im Select angezeigt wird.                 |
-| `fallbackOption` | `string`                  | (Optional) Text, der angezeigt wird, wenn keine Optionen vorhanden sind. |
-| `multiple`       | `boolean`                 | (Optional) Aktiviert die Mehrfachauswahl. Default ist false.             |
-| `minSelection`   | `number`                  | (Optional) Bestimmt die Mindestanzahl an auszuwählenden Optionen.        |
-| `maxSelection`   | `number`                  | (Optional) Bestimmt die maximale Anzahl an auszuwählenden Optionen.      |
+const messages: Partial<SelectMessages> = {
+    searchPlaceholder: 'Find an option',
+    noResults: 'Nothing found',
+    minSelection: (count) => `Choose at least ${count}`,
+}
 
-### Option
+export function LocalizedSelect() {
+    const [selectedValue, setSelectedValue] = useState('')
+
+    return (
+        <CustomSelect
+            value={selectedValue}
+            onValueChange={setSelectedValue}
+            options={[{ value: 'priority', label: 'Priority' }]}
+            locale="en"
+            messages={messages}
+        />
+    )
+}
+```
+
+## API
+
+### `CustomSelect` props
+
+| Prop                   | Type                                                     | Description                                                            |
+| ---------------------- | -------------------------------------------------------- | ---------------------------------------------------------------------- |
+| `id`                   | `string`                                                 | ID for the visible trigger and associated labels.                      |
+| `name`                 | `string`                                                 | Native form field name.                                                |
+| `value`                | `TValue \| null \| undefined` or `ReadonlyArray<TValue>` | Controlled single or multiple value.                                   |
+| `onValueChange`        | `(value: TValue) => void` or `(value: TValue[]) => void` | Typed callback for the selected mode.                                  |
+| `options`              | `ReadonlyArray<Option<TValue>>`                          | Available options.                                                     |
+| `required`             | `boolean`                                                | Enables required-field validation. Defaults to `false`.                |
+| `label`                | `ReactNode`                                              | Visible label linked to the trigger.                                   |
+| `description`          | `ReactNode`                                              | Supporting text linked through `aria-describedby`.                     |
+| `error`                | `string \| null`                                         | External validation message; `null` clears external and native errors. |
+| `disabled`             | `boolean`                                                | Disables interaction and validation.                                   |
+| `readOnly`             | `boolean`                                                | Prevents changes while retaining the form value.                       |
+| `className`            | `string`                                                 | Additional Tailwind classes for the visible trigger.                   |
+| `placeholder`          | `string`                                                 | Text shown while no value is selected.                                 |
+| `icon`                 | `ReactNode`                                              | Icon rendered at the start of the trigger.                             |
+| `fallbackOption`       | `string`                                                 | Message shown when no options are available.                           |
+| `multiple`             | `true`                                                   | Enables array-based multiple selection.                                |
+| `minSelection`         | `number`                                                 | Minimum number of selected options.                                    |
+| `maxSelection`         | `number`                                                 | Maximum number of selected options.                                    |
+| `isOptionEqualToValue` | `(optionValue, value) => boolean`                        | Compares option and selected values.                                   |
+| `getFormValue`         | `(value: TValue) => string`                              | Serializes a value for native form submission.                         |
+| `locale`               | `'de' \| 'en'`                                           | Selects the default message catalog. Defaults to `'de'`.               |
+| `messages`             | `Partial<SelectMessages>`                                | Overrides individual messages and ARIA text.                           |
+| `aria-label`           | `string`                                                 | Accessible name for the visible trigger.                               |
+| `aria-labelledby`      | `string`                                                 | External accessible-label IDs.                                         |
+| `aria-describedby`     | `string`                                                 | External description IDs combined with internal text.                  |
+| `triggerRef`           | `Ref<HTMLButtonElement>`                                 | Ref for the visible, focusable trigger.                                |
+
+Additional React `aria-*` attributes are forwarded to the visible trigger.
+
+### `Option<TValue>`
 
 ```ts
-interface Option {
-    value: string
+interface Option<TValue = string> {
+    value: TValue
     label: string
     subOption?: string
 }
 ```
 
-`subOption` ist optional und wird kleiner unter dem Label angezeigt. Das funktioniert sowohl in der geöffneten Auswahl als auch im geschlossenen Select. Das ist das nützlich für Zusatzinfos wie Adressen, Kundennummern oder Rollen.
+`subOption` adds secondary information below the label in both the open list and the closed trigger.
 
-## CSS-Integration
+## Tailwind CSS
 
-Füge die folgenden Zeilen in deine Haupt-CSS-Datei ein, um die Stile zu konfigurieren.
+Import the package entry after Tailwind CSS in your application stylesheet:
 
 ```css
 @import 'tailwindcss';
-@source "../node_modules/@rentnerkev/select";
+@import '@rentnerkev/select/tailwind.css';
 ```
 
-## Entwicklung
+The package entry scans only the published JavaScript under `dist` and provides the shared theme tokens `primary`, `primary-hover`, `background-dark`, `surface-dark`, `input-dark`, `border-dark`, `secondary-text`, and `muted-foreground`. Override them with a later `@theme` block when needed.
+
+## Public entry points
+
+| Entry point                       | Purpose                                      |
+| --------------------------------- | -------------------------------------------- |
+| `@rentnerkev/select`              | Component, messages, and public types.       |
+| `@rentnerkev/select/select`       | `CustomSelect` component module.             |
+| `@rentnerkev/select/value`        | Value comparison and toggle helpers.         |
+| `@rentnerkev/select/messages`     | Locale catalog, resolver, and message types. |
+| `@rentnerkev/select/types`        | Component and option types.                  |
+| `@rentnerkev/select/tailwind.css` | Tailwind source and shared theme tokens.     |
+| `@rentnerkev/select/package.json` | Package metadata.                            |
+
+## Development
 
 ```bash
 bun install
@@ -152,5 +259,8 @@ bun run verify
 bun run playground:dev
 ```
 
-`bun run verify` prüft Typen, Oxlint, Oxfmt, den Paket-Build und den
-veröffentlichten Paketinhalt per Dry Run.
+`bun run verify` checks types, lint, formatting, tests, the package build, and the published package contents.
+
+## License
+
+MIT

package/dist/Components/SelectView.d.ts

@@ -0,0 +1,12 @@
+import type { SingleSelectProps } from '../types.js';
+export type SelectViewProps<TValue> = Omit<SingleSelectProps<TValue>, 'value' | 'onValueChange' | 'multiple' | 'getFormValue'> & {
+    selectedValues: ReadonlyArray<TValue>;
+    formEntries: ReadonlyArray<{
+        key: string;
+        value: string;
+    }>;
+    multiple: boolean;
+    onSelectValue: (value: TValue) => void;
+};
+export default function SelectView<TValue>({ id, name, options, selectedValues, formEntries, onSelectValue, required, label, description, error: externalError, disabled, readOnly, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, triggerRef, icon, placeholder, className, fallbackOption, multiple, minSelection, maxSelection, locale, messages: providedMessages, isOptionEqualToValue: isOptionEqualToValueProp, ...ariaProps }: SelectViewProps<TValue>): import("react").JSX.Element;
+//# sourceMappingURL=SelectView.d.ts.map

package/dist/Components/SelectView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectView.d.ts","sourceRoot":"","sources":["../../src/Components/SelectView.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAA;AAEpD,MAAM,MAAM,eAAe,CAAC,MAAM,IAAI,IAAI,CACtC,iBAAiB,CAAC,MAAM,CAAC,EACzB,OAAO,GAAG,eAAe,GAAG,UAAU,GAAG,cAAc,CAC1D,GAAG;IACA,cAAc,EAAE,aAAa,CAAC,MAAM,CAAC,CAAA;IACrC,WAAW,EAAE,aAAa,CAAC;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAA;IAC1D,QAAQ,EAAE,OAAO,CAAA;IACjB,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CACzC,CAAA;AAUD,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,MAAM,EAAE,EACvC,EAAE,EACF,IAAI,EACJ,OAAO,EACP,cAAc,EACd,WAAW,EACX,aAAa,EACb,QAAgB,EAChB,KAAK,EACL,WAAW,EACX,KAAK,EAAE,aAAa,EACpB,QAAgB,EAChB,QAAgB,EAChB,YAAY,EAAE,SAAS,EACvB,iBAAiB,EAAE,cAAc,EACjC,kBAAkB,EAAE,eAAe,EACnC,UAAU,EACV,IAAI,EACJ,WAAW,EACX,SAAS,EACT,cAAc,EACd,QAAgB,EAChB,YAAY,EACZ,YAAY,EACZ,MAAa,EACb,QAAQ,EAAE,gBAAgB,EAC1B,oBAAoB,EAAE,wBAAwB,EAC9C,GAAG,SAAS,EACf,EAAE,eAAe,CAAC,MAAM,CAAC,+BA0TzB"}

package/dist/Components/SelectView.js

@@ -0,0 +1,90 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { CustomTooltip } from '@rentnerkev/tooltips';
+import { AlertCircle, Check, ChevronDown } from 'lucide-react';
+import useSelectLogic from '../Hooks/useSelect.logic.js';
+function mergeAriaIds(...values) {
+    const ids = values.flatMap((value) => value?.split(/\s+/).filter(Boolean) ?? []);
+    return [...new Set(ids)].join(' ') || undefined;
+}
+export default function SelectView({ id, name, options, selectedValues, formEntries, onSelectValue, required = false, label, description, error: externalError, disabled = false, readOnly = false, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, triggerRef, icon, placeholder, className, fallbackOption, multiple = false, minSelection, maxSelection, locale = 'de', messages: providedMessages, isOptionEqualToValue: isOptionEqualToValueProp, ...ariaProps }) {
+    const logic = useSelectLogic({
+        id,
+        options,
+        selectedValues,
+        multiple,
+        required,
+        externalError,
+        disabled,
+        readOnly,
+        triggerRef,
+        minSelection,
+        maxSelection,
+        locale,
+        messages: providedMessages,
+        isOptionEqualToValue: isOptionEqualToValueProp,
+        onSelectValue,
+    });
+    const { triggerId, labelId, descriptionId, errorId, messages, open, searchValue, filteredOptions, selectedEntries, selectedRadixValue, hasError, resolvedError, isOptionEqualToValue, } = logic.state;
+    const { trigger, validationInput, searchInput } = logic.ref;
+    const { handleInvalid, handleValueChange, handleOpenChange, handleContentKeyDownCapture, setSearchValue, } = logic.handler;
+    const { shouldKeepOpen } = logic.setter;
+    const hasLeftIcon = Boolean(icon || hasError);
+    const describedBy = mergeAriaIds(ariaDescribedBy, description !== undefined && description !== null
+        ? descriptionId
+        : undefined, hasError ? errorId : undefined);
+    const labelledBy = mergeAriaIds(ariaLabelledBy, label !== undefined && label !== null ? labelId : undefined);
+    return (_jsxs(SelectPrimitive.Root, { open: open, onOpenChange: handleOpenChange, value: selectedRadixValue, onValueChange: handleValueChange, children: [_jsxs("div", { className: "group relative", children: [label !== undefined && label !== null && (_jsx("label", { id: labelId, htmlFor: triggerId, className: "mb-1 block text-sm font-medium text-gray-300", children: label })), _jsx("input", { ref: validationInput, name: name, value: formEntries[0]?.value ?? '', onChange: () => undefined, onInvalid: handleInvalid, required: required &&
+                            selectedValues.length === 0 &&
+                            !disabled &&
+                            externalError === undefined, disabled: disabled, readOnly: readOnly, tabIndex: -1, "aria-hidden": "true", className: "pointer-events-none absolute left-0 top-1/2 h-px w-px -translate-y-1/2 opacity-0" }), multiple &&
+                        formEntries
+                            .slice(1)
+                            .map((formEntry) => (_jsx("input", { type: "hidden", name: name, value: formEntry.value, disabled: disabled, readOnly: readOnly }, formEntry.key))), hasLeftIcon && (_jsx("div", { className: "absolute left-2.5 top-1/2 z-10 -translate-y-1/2 text-gray-500", children: hasError ? (_jsx(CustomTooltip, { content: resolvedError || '', side: "bottom", children: _jsx(AlertCircle, { className: "h-4 w-4 text-red-500" }) })) : (_jsx("span", { className: "pointer-events-none flex items-center transition-colors group-focus-within:text-primary [&>svg]:h-4 [&>svg]:w-4", children: icon })) })), _jsxs(SelectPrimitive.Trigger, { ref: trigger, id: triggerId, disabled: disabled, ...ariaProps, "aria-invalid": hasError || ariaProps['aria-invalid'] || undefined, "aria-required": disabled
+                            ? undefined
+                            : externalError === undefined
+                                ? required ||
+                                    ariaProps['aria-required'] ||
+                                    undefined
+                                : ariaProps['aria-required'], "aria-label": ariaLabel, "aria-labelledby": labelledBy, "aria-describedby": describedBy, "aria-errormessage": hasError ? errorId : ariaProps['aria-errormessage'], "aria-readonly": readOnly || ariaProps['aria-readonly'] || undefined, "aria-disabled": disabled || ariaProps['aria-disabled'] || undefined, onPointerDown: (event) => {
+                            if (readOnly) {
+                                event.preventDefault();
+                                event.currentTarget.focus();
+                            }
+                        }, onKeyDown: (event) => {
+                            if (readOnly &&
+                                (event.key === 'Enter' ||
+                                    event.key === ' ' ||
+                                    event.key === 'ArrowDown' ||
+                                    event.key === 'ArrowUp')) {
+                                event.preventDefault();
+                            }
+                        }, className: `bg-input-dark border text-[11px] text-gray-300 rounded-lg ${hasLeftIcon ? 'pl-8' : 'pl-3'} pr-8 py-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 w-full uppercase font-bold tracking-wider cursor-pointer flex items-center justify-between transition-colors min-w-45 disabled:cursor-not-allowed disabled:opacity-50 ${hasError
+                            ? 'border-red-500 focus:ring-2 focus:ring-red-500/50 data-[state=open]:border-red-500'
+                            : 'border-border-dark focus:border-primary data-[state=open]:border-primary'} ${className || ''}`, children: [_jsx("span", { className: "min-w-0 flex-1 text-left", children: selectedEntries.length > 0 ? (_jsxs("span", { className: "flex min-w-0 flex-col gap-0.5", children: [_jsx("span", { className: "truncate leading-4", children: selectedEntries
+                                                .map(({ option }) => option.label)
+                                                .join(', ') }), selectedEntries.length === 1 &&
+                                            selectedEntries[0].option.subOption && (_jsx("span", { className: "truncate text-[10px] font-semibold leading-3 tracking-normal text-gray-400 normal-case", children: selectedEntries[0].option
+                                                .subOption }))] })) : (_jsx(SelectPrimitive.Value, { placeholder: placeholder })) }), _jsx(SelectPrimitive.Icon, { asChild: true, children: _jsx(ChevronDown, { className: "absolute right-2.5 top-1/2 h-4 w-4 -translate-y-1/2 opacity-50" }) })] })] }), description !== undefined && description !== null && (_jsx("div", { id: descriptionId, className: "mt-1 text-xs text-gray-400", children: description })), hasError && (_jsx("span", { id: errorId, className: "sr-only", "aria-live": "polite", children: resolvedError })), _jsx(SelectPrimitive.Portal, { children: _jsxs(SelectPrimitive.Content, { position: "popper", sideOffset: 4, onKeyDownCapture: handleContentKeyDownCapture, className: "z-9998 w-(--radix-select-trigger-width) min-w-45 overflow-hidden rounded-lg border border-border-dark bg-surface-dark shadow-xl motion-safe:animate-in motion-safe:fade-in motion-safe:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", children: [_jsx("div", { className: "border-b border-border-dark p-1", children: _jsx("input", { ref: searchInput, "aria-label": messages.searchOptions, value: searchValue, onChange: (event) => setSearchValue(event.target.value), onPointerDownCapture: (event) => event.stopPropagation(), onKeyDownCapture: (event) => {
+                                    if (event.key !== 'Escape') {
+                                        event.stopPropagation();
+                                    }
+                                }, onKeyDown: (event) => {
+                                    if (event.key !== 'Escape') {
+                                        event.stopPropagation();
+                                    }
+                                }, placeholder: messages.searchPlaceholder, className: "h-8 w-full rounded-md border border-border-dark bg-input-dark px-2 text-[11px] font-bold uppercase tracking-wider text-gray-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 placeholder:text-gray-500 focus:border-primary" }) }), _jsx("div", { className: "rentnerselect-scrollbar max-h-[min(var(--radix-select-content-available-height),16rem)] overflow-y-scroll scrollbar-gutter-stable", children: _jsx(SelectPrimitive.Viewport, { className: "p-1", children: filteredOptions.length > 0 ? (filteredOptions.map(({ option, radixValue }) => (_jsxs(SelectPrimitive.Item, { value: radixValue, onPointerDown: () => {
+                                        if (multiple) {
+                                            shouldKeepOpen.current = true;
+                                        }
+                                    }, onKeyDown: (event) => {
+                                        if (multiple &&
+                                            (event.key === 'Enter' ||
+                                                event.key === ' ')) {
+                                            shouldKeepOpen.current = true;
+                                        }
+                                    }, className: "relative flex w-full cursor-pointer select-none items-center rounded-md py-2 pl-8 pr-2 text-[11px] font-bold uppercase tracking-wider text-gray-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus:bg-primary/20 focus:text-primary transition-colors data-disabled:opacity-50", children: [_jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: multiple ? (selectedValues.some((value) => isOptionEqualToValue(option.value, value)) && (_jsx(Check, { className: "h-4 w-4" }))) : (_jsx(SelectPrimitive.ItemIndicator, { children: _jsx(Check, { className: "h-4 w-4" }) })) }), _jsx(SelectPrimitive.ItemText, { children: _jsxs("span", { className: "flex min-w-0 flex-col gap-0.5", children: [_jsx("span", { className: "truncate leading-4", children: option.label }), option.subOption && (_jsx("span", { className: "truncate text-[10px] font-semibold leading-3 tracking-normal text-gray-400 normal-case", children: option.subOption }))] }) })] }, radixValue)))) : (_jsx("div", { className: "relative flex w-full select-none items-center rounded-md py-2 pl-8 pr-2 text-[11px] font-bold uppercase tracking-wider text-gray-400 opacity-60 outline-none italic cursor-not-allowed", children: searchValue.trim()
+                                        ? messages.noResults
+                                        : fallbackOption || messages.noOptions })) }) })] }) })] }));
+}
+//# sourceMappingURL=SelectView.js.map

package/dist/Components/SelectView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectView.js","sourceRoot":"","sources":["../../src/Components/SelectView.tsx"],"names":[],"mappings":"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"}

package/dist/Hooks/useSelect.logic.d.ts

@@ -0,0 +1,69 @@
+import type { InvalidEvent, KeyboardEvent, Ref } from 'react';
+import { type SelectLocale, type SelectMessages } from '../i18n.js';
+import type { Option } from '../types.js';
+export interface UseSelectLogicOptions<TValue> {
+    id?: string;
+    name?: string;
+    options: ReadonlyArray<Option<TValue>>;
+    selectedValues: ReadonlyArray<TValue>;
+    multiple: boolean;
+    required?: boolean;
+    externalError?: string | null;
+    disabled?: boolean;
+    readOnly?: boolean;
+    triggerRef?: Ref<HTMLButtonElement>;
+    minSelection?: number;
+    maxSelection?: number;
+    locale?: SelectLocale;
+    messages?: Partial<SelectMessages>;
+    isOptionEqualToValue?: (optionValue: TValue, value: TValue) => boolean;
+    onSelectValue: (value: TValue) => void;
+}
+export default function useSelectLogic<TValue>({ id, options, selectedValues, multiple, required, externalError, disabled, readOnly, triggerRef, minSelection, maxSelection, locale, messages: providedMessages, isOptionEqualToValue: isOptionEqualToValueProp, onSelectValue, }: UseSelectLogicOptions<TValue>): {
+    ref: {
+        trigger: (node: HTMLButtonElement | null) => void;
+        searchInput: import("react").RefObject<HTMLInputElement | null>;
+        validationInput: import("react").RefObject<HTMLInputElement | null>;
+    };
+    state: {
+        messages: SelectMessages;
+        triggerId: string;
+        labelId: string;
+        descriptionId: string;
+        errorId: string;
+        open: boolean;
+        searchValue: string;
+        optionEntries: {
+            option: Option<TValue>;
+            radixValue: string;
+        }[];
+        filteredOptions: {
+            option: Option<TValue>;
+            radixValue: string;
+        }[];
+        selectedEntries: {
+            option: Option<TValue>;
+            radixValue: string;
+        }[];
+        selectedRadixValue: string;
+        hasError: boolean;
+        resolvedError: string | null;
+        hasLeftIcon: boolean;
+        isOptionEqualToValue: (value1: any, value2: any) => boolean;
+    };
+    handler: {
+        handleInvalid: (event: InvalidEvent<HTMLInputElement>) => void;
+        handleValueChange: (nextRadixValue: string) => void;
+        handleOpenChange: (nextOpen: boolean) => void;
+        handleContentKeyDownCapture: (event: KeyboardEvent<HTMLDivElement>) => void;
+        setSearchValue: import("react").Dispatch<import("react").SetStateAction<string>>;
+    };
+    setter: {
+        setOpen: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+        setSearchValue: import("react").Dispatch<import("react").SetStateAction<string>>;
+        setIsTouched: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+        shouldKeepOpen: import("react").RefObject<boolean>;
+    };
+};
+export type SelectLogic = ReturnType<typeof useSelectLogic>;
+//# sourceMappingURL=useSelect.logic.d.ts.map

package/dist/Hooks/useSelect.logic.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSelect.logic.d.ts","sourceRoot":"","sources":["../../src/Hooks/useSelect.logic.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,YAAY,EAAE,aAAa,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAC7D,OAAO,EAEH,KAAK,YAAY,EACjB,KAAK,cAAc,EACtB,MAAM,YAAY,CAAA;AACnB,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAA;AAEzC,MAAM,WAAW,qBAAqB,CAAC,MAAM;IACzC,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,aAAa,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAA;IACtC,cAAc,EAAE,aAAa,CAAC,MAAM,CAAC,CAAA;IACrC,QAAQ,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,UAAU,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAA;IACnC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,MAAM,CAAC,EAAE,YAAY,CAAA;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAA;IAClC,oBAAoB,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,OAAO,CAAA;IACtE,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CACzC;AAED,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,MAAM,EAAE,EAC3C,EAAE,EACF,OAAO,EACP,cAAc,EACd,QAAQ,EACR,QAAgB,EAChB,aAAa,EACb,QAAgB,EAChB,QAAgB,EAChB,UAAU,EACV,YAAY,EACZ,YAAY,EACZ,MAAa,EACb,QAAQ,EAAE,gBAAgB,EAC1B,oBAAoB,EAAE,wBAAwB,EAC9C,aAAa,GAChB,EAAE,qBAAqB,CAAC,MAAM,CAAC;;QA8MpB,OAAO,SArHJ,iBAAiB,GAAG,IAAI;QAsH3B,WAAW;QACX,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+BAtEO,YAAY,CAAC,gBAAgB,CAAC;4CAMjB,MAAM;qCAUb,OAAO;6CAcC,aAAa,CAAC,cAAc,CAAC;;;;;;;;;EAyE5E;AAED,MAAM,MAAM,WAAW,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAA"}