@pallasoft/ps-input-components 3.9.0 → 3.10.0

package/dist/esm/components/ps-combobox-close-bridge.js

@@ -3,7 +3,13 @@ import { ComboBoxStateContext } from 'react-aria-components';
 export const PsComboboxCloseBridge = ({ closeRef }) => {
     const state = useContext(ComboBoxStateContext);
     useEffect(() => {
-        closeRef.current = state === null ? null : () => state.close();
+        closeRef.current =
+            state === null
+                ? null
+                : () => {
+                    if (state.isOpen)
+                        state.toggle();
+                };
     }, [closeRef, state]);
     return null;
 };

package/dist/esm/components/ps-combobox-input.js

@@ -4,15 +4,19 @@ import { PsSpinner } from '@pallasoft/ps-core-components';
 import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
 import { ComboBox, Label, ListBox, ListBoxItem, Popover } from 'react-aria-components';
 import { PsComboboxInputService } from '../services/ps-combobox-input-service';
+import { PsSuggestedTagService } from '../services/ps-suggested-tag-service';
 import { PsComboboxCloseBridge } from './ps-combobox-close-bridge';
 import { PsComboboxScanInput } from './ps-combobox-scan-input';
 import { PsRequiredMark } from './ps-required-mark';
-export const PsComboboxInput = ({ className, emptyText, getItemKey, getItemLabel, hideLabel = false, inputValue, isDisabled = false, isLoading = false, items, label, menuTrigger = 'input', onInputChange, onScan, onSelectionChange, placeholder, renderItem, required, selectedKey, }) => {
+import { PsSuggestedTag } from './ps-suggested-tag';
+export const PsComboboxInput = ({ className, emptyText, getItemKey, getItemLabel, hideLabel = false, inputValue, isDisabled = false, isLoading = false, isSuggested = false, items, label, menuTrigger = 'input', onInputChange, onScan, onSelectionChange, placeholder, renderItem, required, selectedKey, suggestedLabel, }) => {
     const itemsByKey = new Map(items.map((item) => [getItemKey(item), item]));
     const closeRef = useRef(null);
-    return (_jsxs(ComboBox, { allowsEmptyCollection: true, "aria-label": hideLabel ? label : undefined, className: PallasoftClassNameService.merge('block', className), defaultFilter: () => true, inputValue: inputValue, isDisabled: isDisabled, items: items, menuTrigger: menuTrigger, onInputChange: onInputChange, selectedKey: selectedKey, onSelectionChange: (key) => {
+    return (_jsxs(ComboBox, { allowsEmptyCollection: true, "aria-label": hideLabel && label !== undefined
+            ? PsSuggestedTagService.accessibleLabel(label, isSuggested, suggestedLabel)
+            : undefined, className: PallasoftClassNameService.merge('block', className), defaultFilter: () => true, inputValue: inputValue, isDisabled: isDisabled, items: items, menuTrigger: menuTrigger, onInputChange: onInputChange, selectedKey: selectedKey, onSelectionChange: (key) => {
             onSelectionChange?.(key === null ? null : PsComboboxInputService.getItem(itemsByKey, key));
             if (key !== null && closeRef.current !== null)
                 closeRef.current();
-        }, children: [_jsx(PsComboboxCloseBridge, { closeRef: closeRef }), label && !hideLabel ? (_jsxs(Label, { className: 'ps-input-label', children: [label, _jsx(PsRequiredMark, { isRequired: required })] })) : null, _jsx("span", { className: hideLabel || !label ? 'relative block' : 'relative mt-2 block', children: _jsx(PsComboboxScanInput, { className: 'ps-input-control ps-focus-ring w-full text-sm font-semibold', onScan: onScan, placeholder: placeholder }) }), _jsx(Popover, { className: 'w-[--trigger-width] rounded-2xl border border-line bg-surface p-1.5 shadow-lg', children: isLoading && items.length === 0 ? (_jsx("div", { className: 'flex items-center justify-center py-4', children: _jsx(PsSpinner, { label: 'Loading results', size: 'small' }) })) : (_jsx(ListBox, { "aria-busy": isLoading, className: 'max-h-72 overflow-y-auto outline-none', items: items, renderEmptyState: () => emptyText ? _jsx("div", { className: 'px-3 py-2 text-sm text-ink/55', children: emptyText }) : null, children: (item) => (_jsx(ListBoxItem, { className: 'ps-focus-ring cursor-pointer rounded-ps-control px-3 py-2 text-sm font-semibold text-ink selected:bg-primary-soft selected:text-primary hover:bg-mist focused:bg-mist', id: getItemKey(item), textValue: getItemLabel(item), children: renderItem ? renderItem(item) : getItemLabel(item) })) })) })] }));
+        }, children: [_jsx(PsComboboxCloseBridge, { closeRef: closeRef }), label && !hideLabel ? (_jsxs(Label, { className: 'ps-input-label', children: [label, _jsx(PsRequiredMark, { isRequired: required }), _jsx(PsSuggestedTag, { isSuggested: isSuggested, label: suggestedLabel })] })) : null, _jsx("span", { className: hideLabel || !label ? 'relative block' : 'relative mt-2 block', children: _jsx(PsComboboxScanInput, { className: 'ps-input-control ps-focus-ring w-full text-sm font-semibold', onScan: onScan, placeholder: placeholder }) }), _jsx(Popover, { className: 'w-[--trigger-width] rounded-2xl border border-line bg-surface p-1.5 shadow-lg', children: isLoading && items.length === 0 ? (_jsx("div", { className: 'flex items-center justify-center py-4', children: _jsx(PsSpinner, { label: 'Loading results', size: 'small' }) })) : (_jsx(ListBox, { "aria-busy": isLoading, className: 'max-h-72 overflow-y-auto outline-none', items: items, renderEmptyState: () => emptyText ? _jsx("div", { className: 'px-3 py-2 text-sm text-muted', children: emptyText }) : null, children: (item) => (_jsx(ListBoxItem, { className: 'ps-focus-ring cursor-pointer rounded-ps-control px-3 py-2 text-sm font-semibold text-ink selected:bg-primary-soft selected:text-primary hover:bg-mist focused:bg-mist', id: getItemKey(item), textValue: getItemLabel(item), children: renderItem ? renderItem(item) : getItemLabel(item) })) })) })] }));
 };

package/dist/esm/components/ps-date-input.js

@@ -12,7 +12,8 @@ import { PsDatePickerFallback } from './ps-date-picker-fallback';
 import { PsFieldSkeleton } from './ps-field-skeleton';
 import { PsLazyDatePicker } from './ps-lazy-date-picker';
 import { PsRequiredMark } from './ps-required-mark';
-export const PsDateInput = ({ className, defaultValue, disabled, helperText, hideLabel, isLoading = false, label, max, min, name, onChange, placeholder = PsDateInputConfig.placeholder, required, value, }) => {
+import { PsSuggestedTag } from './ps-suggested-tag';
+export const PsDateInput = ({ className, defaultValue, disabled, helperText, hideLabel, isLoading = false, isSuggested = false, label, max, min, name, onChange, placeholder = PsDateInputConfig.placeholder, required, suggestedLabel, value, }) => {
     if (isLoading)
         return _jsx(PsFieldSkeleton, { className: className, hideLabel: hideLabel, label: label });
     const inputId = useId();
@@ -42,5 +43,5 @@ export const PsDateInput = ({ className, defaultValue, disabled, helperText, hid
         onChange?.(nextValue);
     };
     const fallback = (_jsx(PsDatePickerFallback, { disabled: disabled, id: inputId, placeholder: placeholder, required: required, text: PsDateInputService.display(currentValue) }));
-    return (_jsxs("div", { className: PallasoftClassNameService.merge('block', className), children: [_jsxs("label", { className: hideLabel ? 'sr-only' : 'ps-input-label block', htmlFor: inputId, children: [label, _jsx(PsRequiredMark, { isRequired: required })] }), _jsxs("div", { className: hideLabel ? 'relative' : 'relative mt-2', children: [isHydrated ? (_jsx(Suspense, { fallback: fallback, children: _jsx(PsLazyDatePicker, { autoComplete: 'off', calendarClassName: PallasoftClassNameService.merge('ps-floating-panel ps-datepicker', view === PsCalendarView.day ? undefined : PsDateInputConfig.pickingClassName), className: PsDatePickerClasses.control, dateFormat: [...PsDateInputConfig.inputFormats], disabled: disabled, id: inputId, maxDate: maxDate, minDate: minDate, onCalendarClose: () => setView(PsCalendarView.day), onChange: handleChange, placeholderText: placeholder, popperClassName: 'ps-datepicker-popper', popperPlacement: 'bottom-start', popperProps: { strategy: 'fixed' }, portalId: portalId, renderCustomHeader: (headerProps) => (_jsx(PsCalendarHeader, { ...headerProps, maxDate: maxDate, minDate: minDate, onViewChange: setView, view: view })), required: required, selected: PsDateInputService.parse(currentValue), showPopperArrow: false, wrapperClassName: PsDatePickerClasses.wrapperOption }) })) : (fallback), _jsx(PsIcon, { "aria-hidden": 'true', className: 'pointer-events-none absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-ink/50', iconKey: PsIconKey.Calendar }), name ? _jsx("input", { name: name, type: 'hidden', value: currentValue }) : null] }), helperText ? _jsx("span", { className: 'ps-input-helper', children: helperText }) : null] }));
+    return (_jsxs("div", { className: PallasoftClassNameService.merge('block', className), children: [_jsxs("label", { className: hideLabel ? 'sr-only' : 'ps-input-label block', htmlFor: inputId, children: [label, _jsx(PsRequiredMark, { isRequired: required }), _jsx(PsSuggestedTag, { isSuggested: isSuggested, label: suggestedLabel })] }), _jsxs("div", { className: hideLabel ? 'relative' : 'relative mt-2', children: [isHydrated ? (_jsx(Suspense, { fallback: fallback, children: _jsx(PsLazyDatePicker, { autoComplete: 'off', calendarClassName: PallasoftClassNameService.merge('ps-floating-panel ps-datepicker', view === PsCalendarView.day ? undefined : PsDateInputConfig.pickingClassName), className: PsDatePickerClasses.control, dateFormat: [...PsDateInputConfig.inputFormats], disabled: disabled, id: inputId, maxDate: maxDate, minDate: minDate, onCalendarClose: () => setView(PsCalendarView.day), onChange: handleChange, placeholderText: placeholder, popperClassName: 'ps-datepicker-popper', popperPlacement: 'bottom-start', popperProps: { strategy: 'fixed' }, portalId: portalId, renderCustomHeader: (headerProps) => (_jsx(PsCalendarHeader, { ...headerProps, maxDate: maxDate, minDate: minDate, onViewChange: setView, view: view })), required: required, selected: PsDateInputService.parse(currentValue), showPopperArrow: false, wrapperClassName: PsDatePickerClasses.wrapperOption }) })) : (fallback), _jsx(PsIcon, { "aria-hidden": 'true', className: 'pointer-events-none absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-ink/50', iconKey: PsIconKey.Calendar }), name ? _jsx("input", { name: name, type: 'hidden', value: currentValue }) : null] }), helperText ? _jsx("span", { className: 'ps-input-helper', children: helperText }) : null] }));
 };

package/dist/esm/components/ps-grouped-switcher.js

@@ -42,11 +42,11 @@ export const PsGroupedSwitcher = ({ allOption, ariaLabel, className, emptyText,
             setIsOpen(next);
             if (!next)
                 setQuery('');
-        }, children: [_jsxs(Button, { "aria-label": ariaLabel, className: PallasoftClassNameService.merge('ps-input-control ps-focus-ring relative flex w-full min-w-0 items-center pr-10 text-left text-sm font-semibold', className), children: [_jsx("span", { className: 'min-w-0 flex-1', children: renderSelected(isAllSelected ? null : selected) }), _jsx(PsIcon, { "aria-hidden": 'true', className: 'pointer-events-none absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-primary', iconKey: PsIconKey.Chevron })] }), _jsx(Popover, { className: 'ps-floating-panel w-[max(var(--trigger-width),min(32rem,calc(100vw-2rem)))] min-w-[var(--trigger-width)] overflow-hidden p-0 outline-none', offset: 6, placement: 'bottom start', style: { zIndex }, children: _jsx(Dialog, { "aria-label": ariaLabel, className: 'flex max-h-[min(34rem,75vh)] flex-col outline-none', children: _jsxs(Autocomplete, { filter: () => true, inputValue: query, onInputChange: setQuery, children: [_jsxs(SearchField, { "aria-label": searchPlaceholder, autoFocus: true, className: 'relative block border-b border-line p-2', children: [_jsx(Input, { className: 'ps-input-control ps-focus-ring w-full pl-10 text-sm font-semibold', placeholder: searchPlaceholder }), _jsx(PsIcon, { "aria-hidden": 'true', className: 'pointer-events-none absolute left-5 top-1/2 h-4 w-4 -translate-y-1/2 text-ink/45', iconKey: PsIconKey.Search })] }), _jsxs(ListBox, { "aria-label": ariaLabel, className: 'ps-scrollbar-hidden min-h-0 flex-1 overflow-y-auto p-1.5 outline-none', onSelectionChange: onSelectionChange, renderEmptyState: () => (_jsx("div", { className: 'px-3 py-6 text-center text-sm text-ink/55', children: emptyText })), selectedKeys: [
+        }, children: [_jsxs(Button, { "aria-label": ariaLabel, className: PallasoftClassNameService.merge('ps-input-control ps-focus-ring relative flex w-full min-w-0 items-center pr-10 text-left text-sm font-semibold', className), children: [_jsx("span", { className: 'min-w-0 flex-1', children: renderSelected(isAllSelected ? null : selected) }), _jsx(PsIcon, { "aria-hidden": 'true', className: 'pointer-events-none absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-primary', iconKey: PsIconKey.Chevron })] }), _jsx(Popover, { className: 'ps-floating-panel w-[max(var(--trigger-width),min(32rem,calc(100vw-2rem)))] min-w-[var(--trigger-width)] overflow-hidden p-0 outline-none', offset: 6, placement: 'bottom start', style: { zIndex }, children: _jsx(Dialog, { "aria-label": ariaLabel, className: 'flex max-h-[min(34rem,75vh)] flex-col outline-none', children: _jsxs(Autocomplete, { filter: () => true, inputValue: query, onInputChange: setQuery, children: [_jsxs(SearchField, { "aria-label": searchPlaceholder, autoFocus: true, className: 'relative block border-b border-line p-2', children: [_jsx(Input, { className: 'ps-input-control ps-focus-ring w-full pl-10 text-sm font-semibold', placeholder: searchPlaceholder }), _jsx(PsIcon, { "aria-hidden": 'true', className: 'pointer-events-none absolute left-5 top-1/2 h-4 w-4 -translate-y-1/2 text-ink/45', iconKey: PsIconKey.Search })] }), _jsxs(ListBox, { "aria-label": ariaLabel, className: 'ps-scrollbar-hidden min-h-0 flex-1 overflow-y-auto p-1.5 outline-none', onSelectionChange: onSelectionChange, renderEmptyState: () => (_jsx("div", { className: 'px-3 py-6 text-center text-sm text-muted', children: emptyText })), selectedKeys: [
                                     isAllSelected
                                         ? PsGroupedSwitcherConfig.allKey
                                         : PsGroupedSwitcherService.selectedOptionId(sections, selectedKey, getItemKey),
-                                ], selectionMode: 'single', children: [showAll ? (_jsx(ListBoxSection, { children: _jsx(ListBoxItem, { className: 'ps-floating-option min-h-12 text-ink', id: PsGroupedSwitcherConfig.allKey, textValue: 'all', children: allOption.content }) })) : null, sections.map((section) => (_jsxs(ListBoxSection, { id: section.key, children: [_jsx(Header, { className: 'px-3 pb-1 pt-3 text-xs font-semibold tracking-wide text-ink/50 uppercase', children: renderSectionLabel === undefined
+                                ], selectionMode: 'single', children: [showAll ? (_jsx(ListBoxSection, { children: _jsx(ListBoxItem, { className: 'ps-floating-option min-h-12 text-ink', id: PsGroupedSwitcherConfig.allKey, textValue: 'all', children: allOption.content }) })) : null, sections.map((section) => (_jsxs(ListBoxSection, { id: section.key, children: [_jsx(Header, { className: 'px-3 pb-1 pt-3 text-xs font-semibold tracking-wide text-muted uppercase', children: renderSectionLabel === undefined
                                                     ? section.label
                                                     : renderSectionLabel(section.key, section.label) }), section.items.map((item) => {
                                                 const key = getItemKey(item);

package/dist/esm/components/ps-multi-select-input.js

@@ -20,7 +20,7 @@ export const PsMultiSelectInput = ({ className, defaultValue, disabled, helperTe
             setUncontrolledValue(nextValue);
         onChange?.(nextValue);
     };
-    return (_jsxs(Select, { "aria-label": hideLabel ? label : undefined, className: PallasoftClassNameService.merge('block', className), isDisabled: disabled, isRequired: required, name: name, onChange: handleChange, placeholder: placeholder, selectionMode: 'multiple', value: currentValue.filter((selected) => labelByValue.has(selected)), children: [hideLabel ? null : (_jsxs(Label, { className: 'ps-input-label block', children: [label, _jsx(PsRequiredMark, { isRequired: required })] })), _jsxs(Button, { className: PallasoftClassNameService.merge('ps-input-control ps-focus-ring relative flex w-full items-center py-1.5 pr-10 text-left text-sm font-semibold disabled:cursor-not-allowed disabled:opacity-60', hideLabel ? '' : 'mt-2'), children: [_jsx(SelectValue, { className: 'flex min-w-0 flex-1 flex-wrap gap-1.5', children: ({ isPlaceholder }) => isPlaceholder ? (_jsx("span", { className: 'font-medium text-ink/45', children: placeholder })) : (currentValue
+    return (_jsxs(Select, { "aria-label": hideLabel ? label : undefined, className: PallasoftClassNameService.merge('block', className), isDisabled: disabled, isRequired: required, name: name, onChange: handleChange, placeholder: placeholder, selectionMode: 'multiple', value: currentValue.filter((selected) => labelByValue.has(selected)), children: [hideLabel ? null : (_jsxs(Label, { className: 'ps-input-label block', children: [label, _jsx(PsRequiredMark, { isRequired: required })] })), _jsxs(Button, { className: PallasoftClassNameService.merge('ps-input-control ps-focus-ring relative flex w-full items-center py-1.5 pr-10 text-left text-sm font-semibold disabled:cursor-not-allowed disabled:opacity-60', hideLabel ? '' : 'mt-2'), children: [_jsx(SelectValue, { className: 'flex min-w-0 flex-1 flex-wrap gap-1.5', children: ({ isPlaceholder }) => isPlaceholder ? (_jsx("span", { className: 'font-medium text-subtle', children: placeholder })) : (currentValue
                             .filter((selected) => labelByValue.has(selected))
                             .map((selected) => (_jsx("span", { className: 'inline-flex max-w-full items-center rounded-ps-control bg-primary/12 px-2.5 py-0.5 text-xs font-semibold text-ink', children: _jsx("span", { className: 'truncate', children: labelByValue.get(selected) }) }, selected)))) }), _jsx(PsIcon, { "aria-hidden": 'true', className: 'pointer-events-none absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-primary', iconKey: PsIconKey.Chevron })] }), helperText ? (_jsx(Text, { className: 'ps-input-helper', slot: 'description', children: helperText })) : null, _jsx(Popover, { className: 'ps-floating-panel ps-scrollbar-hidden max-h-72 min-w-[var(--trigger-width)] overflow-y-auto p-1.5 outline-none', offset: 6, placement: 'bottom start', style: { zIndex }, children: _jsx(ListBox, { className: 'outline-none', items: options.map((option) => ({ ...option, id: option.value })), children: (option) => _jsx(PsSelectOptionItem, { option: option }) }) })] }));
 };

package/dist/esm/components/ps-percent-input.js

@@ -9,4 +9,4 @@ export const PsPercentInput = ({ className, onChange, ...props }) => (_jsxs("div
                     event.target.value = normalised;
                 if (onChange)
                     onChange(event);
-            }, type: 'text' }), _jsx("span", { "aria-hidden": 'true', className: 'pointer-events-none absolute right-3 bottom-3 text-sm text-ink/50', children: PsTextFormatConfig.percentSuffix })] }));
+            }, type: 'text' }), _jsx("span", { "aria-hidden": 'true', className: 'pointer-events-none absolute right-3 bottom-3 text-sm text-muted', children: PsTextFormatConfig.percentSuffix })] }));

package/dist/esm/components/ps-phone-input.js

@@ -34,9 +34,9 @@ export const PsPhoneInput = ({ className, defaultCountry = PsPhoneInputConfig.de
         emit(national, code);
         document.getElementById(inputId)?.focus();
     };
-    return (_jsxs("div", { className: PallasoftClassNameService.merge('block', className), children: [_jsxs("label", { className: hideLabel ? 'sr-only' : 'ps-input-label', htmlFor: inputId, children: [label, _jsx(PsRequiredMark, { isRequired: required })] }), _jsxs("div", { className: PallasoftClassNameService.merge('ps-input-control flex items-stretch overflow-hidden p-0 focus-within:border-primary focus-within:shadow-[0_0_0_1px_rgb(var(--ps-color-primary-rgb))]', hideLabel ? '' : 'mt-2', isInvalid ? 'border-danger bg-danger/5' : '', disabled ? 'opacity-60' : ''), children: [_jsxs(DialogTrigger, { isOpen: isOpen, onOpenChange: setIsOpen, children: [_jsxs(Button, { "aria-label": PsPhoneInputConfig.countryLabel, className: 'flex shrink-0 items-center gap-1.5 border-r border-line px-3 outline-none focus-visible:bg-primary/10 text-sm font-semibold text-ink', isDisabled: disabled, children: [country, _jsx(PsIcon, { "aria-hidden": 'true', className: 'block h-3.5 w-3.5 text-ink/45', iconKey: PsIconKey.Chevron })] }), _jsx(Popover, { className: 'ps-floating-panel w-72 outline-none', offset: 6, placement: 'bottom start', style: { zIndex }, children: _jsxs(Dialog, { "aria-label": PsPhoneInputConfig.countryLabel, className: 'flex flex-col outline-none', children: [_jsx("div", { className: 'border-b border-line p-2', children: _jsx("input", { "aria-label": PsPhoneInputConfig.searchPlaceholder, autoFocus: true, className: 'ps-input-control ps-control-compact ps-focus-ring w-full text-sm', onChange: (event) => setQuery(event.target.value), placeholder: PsPhoneInputConfig.searchPlaceholder, type: 'search', value: query }) }), _jsx("ul", { className: 'ps-scrollbar-hidden max-h-64 overflow-y-auto p-1.5', role: 'listbox', children: matches.length === 0 ? (_jsx("li", { className: 'px-3 py-2.5 text-sm text-ink/50', children: PsPhoneInputConfig.emptyMessage })) : (matches.map((option) => (_jsx("li", { role: 'none', children: _jsxs("button", { "aria-selected": option.code === country, className: PallasoftClassNameService.merge('ps-focus-ring flex w-full items-center justify-between gap-3 rounded-ps-control px-3 py-2.5 text-left text-sm', option.code === country
+    return (_jsxs("div", { className: PallasoftClassNameService.merge('block', className), children: [_jsxs("label", { className: hideLabel ? 'sr-only' : 'ps-input-label', htmlFor: inputId, children: [label, _jsx(PsRequiredMark, { isRequired: required })] }), _jsxs("div", { className: PallasoftClassNameService.merge('ps-input-control flex items-stretch overflow-hidden p-0 focus-within:border-primary focus-within:shadow-[0_0_0_1px_rgb(var(--ps-color-primary-rgb))]', hideLabel ? '' : 'mt-2', isInvalid ? 'border-danger bg-danger/5' : '', disabled ? 'opacity-60' : ''), children: [_jsxs(DialogTrigger, { isOpen: isOpen, onOpenChange: setIsOpen, children: [_jsxs(Button, { "aria-label": PsPhoneInputConfig.countryLabel, className: 'flex shrink-0 items-center gap-1.5 border-r border-line px-3 outline-none focus-visible:bg-primary/10 text-sm font-semibold text-ink', isDisabled: disabled, children: [country, _jsx(PsIcon, { "aria-hidden": 'true', className: 'block h-3.5 w-3.5 text-ink/45', iconKey: PsIconKey.Chevron })] }), _jsx(Popover, { className: 'ps-floating-panel w-72 outline-none', offset: 6, placement: 'bottom start', style: { zIndex }, children: _jsxs(Dialog, { "aria-label": PsPhoneInputConfig.countryLabel, className: 'flex flex-col outline-none', children: [_jsx("div", { className: 'border-b border-line p-2', children: _jsx("input", { "aria-label": PsPhoneInputConfig.searchPlaceholder, autoFocus: true, className: 'ps-input-control ps-control-compact ps-focus-ring w-full text-sm', onChange: (event) => setQuery(event.target.value), placeholder: PsPhoneInputConfig.searchPlaceholder, type: 'search', value: query }) }), _jsx("ul", { className: 'ps-scrollbar-hidden max-h-64 overflow-y-auto p-1.5', role: 'listbox', children: matches.length === 0 ? (_jsx("li", { className: 'px-3 py-2.5 text-sm text-muted', children: PsPhoneInputConfig.emptyMessage })) : (matches.map((option) => (_jsx("li", { role: 'none', children: _jsxs("button", { "aria-selected": option.code === country, className: PallasoftClassNameService.merge('ps-focus-ring flex w-full items-center justify-between gap-3 rounded-ps-control px-3 py-2.5 text-left text-sm', option.code === country
                                                         ? 'bg-primary/10 text-ink'
-                                                        : 'text-ink/80 hover:bg-mist/60 hover:text-ink'), onClick: () => choose(option.code), role: 'option', type: 'button', children: [_jsx("span", { className: 'min-w-0 truncate', children: PsPhoneInputService.highlight(option.label, query).map((part, index) => part.isMatch ? (_jsx("strong", { className: 'font-semibold text-ink', children: part.text }, index)) : (_jsx("span", { children: part.text }, index))) }), _jsxs("span", { className: 'shrink-0 text-xs text-ink/50', children: ["+", option.callingCode] })] }) }, option.code)))) })] }) })] }), _jsxs("span", { "aria-hidden": 'true', className: 'flex items-center pl-3 text-sm text-ink/45', children: [PsPhoneInputConfig.plus, PsPhoneInputService.callingCode(country)] }), _jsx("input", { "aria-invalid": isInvalid, autoComplete: 'tel-national', className: 'min-w-0 flex-1 bg-transparent px-2 text-sm text-ink outline-none', disabled: disabled, id: inputId, inputMode: 'tel', name: name, onBlur: () => {
+                                                        : 'text-ink/80 hover:bg-mist/60 hover:text-ink'), onClick: () => choose(option.code), role: 'option', type: 'button', children: [_jsx("span", { className: 'min-w-0 truncate', children: PsPhoneInputService.highlight(option.label, query).map((part, index) => part.isMatch ? (_jsx("strong", { className: 'font-semibold text-ink', children: part.text }, index)) : (_jsx("span", { children: part.text }, index))) }), _jsxs("span", { className: 'shrink-0 text-xs text-muted', children: ["+", option.callingCode] })] }) }, option.code)))) })] }) })] }), _jsxs("span", { "aria-hidden": 'true', className: 'flex items-center pl-3 text-sm text-subtle', children: [PsPhoneInputConfig.plus, PsPhoneInputService.callingCode(country)] }), _jsx("input", { "aria-invalid": isInvalid, autoComplete: 'tel-national', className: 'min-w-0 flex-1 bg-transparent px-2 text-sm text-ink outline-none', disabled: disabled, id: inputId, inputMode: 'tel', name: name, onBlur: () => {
                             setIsTouched(true);
                             if (onBlur)
                                 onBlur();

package/dist/esm/components/ps-select-input.js

@@ -6,10 +6,12 @@ import { PsIcon, PsIconKey } from '@pallasoft/ps-icons';
 import { Button, Label, ListBox, Popover, Select, SelectValue, Text, } from 'react-aria-components';
 import { PsInputSizeClassNames } from '../constants/ps-input-size-class-names';
 import { PsSelectInputService } from '../services/ps-select-input-service';
+import { PsSuggestedTagService } from '../services/ps-suggested-tag-service';
 import { PsFieldSkeleton } from './ps-field-skeleton';
 import { PsRequiredMark } from './ps-required-mark';
 import { PsSelectOptionItem } from './ps-select-option-item';
-export const PsSelectInput = ({ className, defaultValue, disabled, helperText, hideLabel, isLoading = false, label, name, onChange, options, placeholder = 'Select an option', required, controlSize = 'default', value, }) => {
+import { PsSuggestedTag } from './ps-suggested-tag';
+export const PsSelectInput = ({ className, defaultValue, disabled, helperText, hideLabel, isLoading = false, isSuggested = false, label, name, onChange, options, placeholder = 'Select an option', required, suggestedLabel, controlSize = 'default', value, }) => {
     if (isLoading)
         return _jsx(PsFieldSkeleton, { className: className, hideLabel: hideLabel, label: label });
     const [uncontrolledValue, setUncontrolledValue] = useState(() => PsSelectInputService.getDefaultValue(defaultValue, options));
@@ -22,5 +24,7 @@ export const PsSelectInput = ({ className, defaultValue, disabled, helperText, h
             setUncontrolledValue(nextValue);
         onChange?.(nextValue);
     };
-    return (_jsxs(Select, { "aria-label": hideLabel ? label : undefined, className: PallasoftClassNameService.merge('block', className), isDisabled: disabled, isRequired: required, name: name, onChange: handleChange, placeholder: placeholder, value: hasOption ? currentValue : null, children: [hideLabel ? null : (_jsxs(Label, { className: 'ps-input-label block', children: [label, _jsx(PsRequiredMark, { isRequired: required })] })), _jsxs(Button, { className: PallasoftClassNameService.merge('ps-input-control ps-focus-ring relative flex w-full items-center pr-10 text-left text-sm font-semibold disabled:cursor-not-allowed disabled:opacity-60', hideLabel ? '' : 'mt-2', PsInputSizeClassNames[controlSize]), children: [_jsx(SelectValue, { className: 'min-w-0 flex-1 truncate', children: ({ isPlaceholder, selectedText }) => isPlaceholder ? (_jsx("span", { className: 'font-medium text-ink/45', children: placeholder })) : (selectedText) }), _jsx(PsIcon, { "aria-hidden": 'true', className: 'pointer-events-none absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-primary', iconKey: PsIconKey.Chevron })] }), helperText ? (_jsx(Text, { className: 'ps-input-helper', slot: 'description', children: helperText })) : null, _jsx(Popover, { className: 'ps-floating-panel ps-scrollbar-hidden max-h-72 min-w-[var(--trigger-width)] overflow-y-auto p-1.5 outline-none', offset: 6, placement: 'bottom start', style: { zIndex }, children: _jsx(ListBox, { className: 'outline-none', items: options.map((option) => ({ ...option, id: option.value })), children: (option) => _jsx(PsSelectOptionItem, { option: option }) }) })] }));
+    return (_jsxs(Select, { "aria-label": hideLabel
+            ? PsSuggestedTagService.accessibleLabel(label, isSuggested, suggestedLabel)
+            : undefined, className: PallasoftClassNameService.merge('block', className), isDisabled: disabled, isRequired: required, name: name, onChange: handleChange, placeholder: placeholder, value: hasOption ? currentValue : null, children: [hideLabel ? null : (_jsxs(Label, { className: 'ps-input-label block', children: [label, _jsx(PsRequiredMark, { isRequired: required }), _jsx(PsSuggestedTag, { isSuggested: isSuggested, label: suggestedLabel })] })), _jsxs(Button, { className: PallasoftClassNameService.merge('ps-input-control ps-focus-ring relative flex w-full items-center pr-10 text-left text-sm font-semibold disabled:cursor-not-allowed disabled:opacity-60', hideLabel ? '' : 'mt-2', PsInputSizeClassNames[controlSize]), children: [_jsx(SelectValue, { className: 'min-w-0 flex-1 truncate', children: ({ isPlaceholder, selectedText }) => isPlaceholder ? (_jsx("span", { className: 'font-medium text-subtle', children: placeholder })) : (selectedText) }), _jsx(PsIcon, { "aria-hidden": 'true', className: 'pointer-events-none absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-primary', iconKey: PsIconKey.Chevron })] }), helperText ? (_jsx(Text, { className: 'ps-input-helper', slot: 'description', children: helperText })) : null, _jsx(Popover, { className: 'ps-floating-panel ps-scrollbar-hidden max-h-72 min-w-[var(--trigger-width)] overflow-y-auto p-1.5 outline-none', offset: 6, placement: 'bottom start', style: { zIndex }, children: _jsx(ListBox, { className: 'outline-none', items: options.map((option) => ({ ...option, id: option.value })), children: (option) => _jsx(PsSelectOptionItem, { option: option }) }) })] }));
 };

package/dist/esm/components/ps-select-option-item.js

@@ -1,4 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { PsIcon, PsIconKey } from '@pallasoft/ps-icons';
 import { ListBoxItem } from 'react-aria-components';
-export const PsSelectOptionItem = ({ option }) => (_jsx(ListBoxItem, { className: 'ps-floating-option text-ink', id: option.value, textValue: option.label, children: ({ isSelected }) => (_jsxs(_Fragment, { children: [_jsx("span", { className: 'flex h-4 w-4 shrink-0 items-center justify-center text-primary', children: isSelected ? (_jsx(PsIcon, { "aria-hidden": 'true', className: 'block h-4 w-4', iconKey: PsIconKey.Check })) : null }), _jsxs("span", { className: 'min-w-0 flex-1', children: [_jsx("span", { className: 'block truncate', children: option.label }), option.description ? (_jsx("span", { className: 'mt-0.5 block text-xs font-normal text-ink/55', children: option.description })) : null] })] })) }));
+export const PsSelectOptionItem = ({ option }) => (_jsx(ListBoxItem, { className: 'ps-floating-option text-ink', id: option.value, textValue: option.label, children: ({ isSelected }) => (_jsxs(_Fragment, { children: [_jsx("span", { className: 'flex h-4 w-4 shrink-0 items-center justify-center text-primary', children: isSelected ? (_jsx(PsIcon, { "aria-hidden": 'true', className: 'block h-4 w-4', iconKey: PsIconKey.Check })) : null }), _jsxs("span", { className: 'min-w-0 flex-1', children: [_jsx("span", { className: 'block truncate', children: option.label }), option.description ? (_jsx("span", { className: 'mt-0.5 block text-xs font-normal text-muted', children: option.description })) : null] })] })) }));

package/dist/esm/components/ps-select-with-create.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { PsSelectWithCreateConfig } from '../constants/ps-select-with-create-config';
 import { PsFormControl } from './ps-form-control';
 import { PsSelectInput } from './ps-select-input';
-export const PsSelectWithCreate = ({ createHref, createOptionLabel, errorText, hideLabel, label, onChange, options, placeholder, required, value, }) => (_jsx(PsFormControl, { errorText: errorText, children: _jsx(PsSelectInput, { hideLabel: hideLabel, label: label, onChange: (next) => {
+export const PsSelectWithCreate = ({ createHref, createOptionLabel, errorText, hideLabel, isSuggested, label, onChange, options, placeholder, required, suggestedLabel, value, }) => (_jsx(PsFormControl, { errorText: errorText, children: _jsx(PsSelectInput, { hideLabel: hideLabel, isSuggested: isSuggested, label: label, onChange: (next) => {
             if (next !== PsSelectWithCreateConfig.createValue) {
                 onChange(next);
                 return;
@@ -11,4 +11,4 @@ export const PsSelectWithCreate = ({ createHref, createOptionLabel, errorText, h
         }, options: [
             ...options,
             { label: createOptionLabel, value: PsSelectWithCreateConfig.createValue },
-        ], placeholder: placeholder, required: required, value: value }) }));
+        ], placeholder: placeholder, required: required, suggestedLabel: suggestedLabel, value: value }) }));

package/dist/esm/components/ps-suggested-tag.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
+import { PsIcon, PsIconKey } from '@pallasoft/ps-icons';
+export const PsSuggestedTag = ({ className, isSuggested = false, label }) => isSuggested && label !== undefined ? (_jsxs("span", { className: PallasoftClassNameService.merge('ml-2 inline-flex shrink-0 items-center gap-1 align-middle text-xs font-medium text-muted', className), children: [_jsx("span", { className: 'sr-only', children: ", " }), _jsx(PsIcon, { "aria-hidden": 'true', className: 'h-3 w-3 text-primary', iconKey: PsIconKey.Spark }), label] })) : null;

package/dist/esm/components/ps-tag-input.js

@@ -29,7 +29,7 @@ export const PsTagInput = ({ className, errorText, helperText, hideLabel, isDisa
     return (_jsx(PsFormControl, { className: className, errorText: errorText, helperText: helperText, children: _jsxs("label", { className: 'block', children: [_jsxs("span", { className: hideLabel ? 'sr-only' : 'ps-input-label', children: [label, _jsx(PsRequiredMark, { isRequired: required })] }), _jsxs("span", { className: PallasoftClassNameService.merge('ps-input-control flex flex-wrap items-center gap-1.5 py-1.5', hideLabel ? '' : 'mt-2', isDisabled ? 'opacity-60' : ''), children: [values.map((value) => (_jsx(PsActiveFilterChip, { label: value, onRemove: () => {
                                 if (!isDisabled)
                                     onChange(PsTagInputService.remove(values, value));
-                            }, removeLabel: removeLabel(value) }, value))), _jsx("input", { "aria-invalid": errorText ? true : undefined, className: 'min-w-24 flex-1 bg-transparent text-sm font-semibold outline-none placeholder:font-medium placeholder:text-ink/45 disabled:cursor-not-allowed', disabled: isDisabled || isFull, name: name, onBlur: () => commit(draft), onChange: (event) => {
+                            }, removeLabel: removeLabel(value) }, value))), _jsx("input", { "aria-invalid": errorText ? true : undefined, className: 'min-w-24 flex-1 bg-transparent text-sm font-semibold outline-none placeholder:font-medium placeholder:text-subtle disabled:cursor-not-allowed', disabled: isDisabled || isFull, name: name, onBlur: () => commit(draft), onChange: (event) => {
                                 const text = event.target.value;
                                 if (text.includes(PsTagInputConfig.separator))
                                     commit(text);

package/dist/esm/components/ps-text-input.js

@@ -4,13 +4,14 @@ import { PsInputSizeClassNames } from '../constants/ps-input-size-class-names';
 import { PsDateInput } from './ps-date-input';
 import { PsFieldSkeleton } from './ps-field-skeleton';
 import { PsRequiredMark } from './ps-required-mark';
-export const PsTextInput = ({ className, defaultValue, disabled, helperText, hideLabel, isLoading = false, label, name, onChange, required, controlSize = 'default', type, value, ...props }) => {
+import { PsSuggestedTag } from './ps-suggested-tag';
+export const PsTextInput = ({ className, defaultValue, disabled, helperText, hideLabel, isLoading = false, isSuggested = false, label, name, onChange, required, suggestedLabel, controlSize = 'default', type, value, ...props }) => {
     if (isLoading)
         return _jsx(PsFieldSkeleton, { className: className, hideLabel: hideLabel, label: label });
     if (type === 'date') {
         return (_jsx(PsDateInput, { className: className, defaultValue: typeof defaultValue === 'string' ? defaultValue : undefined, disabled: disabled, helperText: helperText, hideLabel: hideLabel, label: label, name: name, onChange: (nextValue) => onChange?.({
                 target: { name, value: nextValue },
-            }), required: required, value: typeof value === 'string' ? value : undefined }));
+            }), isSuggested: isSuggested, required: required, suggestedLabel: suggestedLabel, value: typeof value === 'string' ? value : undefined }));
     }
-    return (_jsxs("label", { className: 'block', children: [_jsxs("span", { className: hideLabel ? 'sr-only' : 'ps-input-label', children: [label, _jsx(PsRequiredMark, { isRequired: required })] }), _jsx("input", { className: PallasoftClassNameService.merge(hideLabel ? 'ps-input-control' : 'ps-input-control mt-2', PsInputSizeClassNames[controlSize], className), defaultValue: defaultValue, disabled: disabled, name: name, onChange: onChange, required: required, type: type, value: value, ...props }), helperText ? _jsx("span", { className: 'ps-input-helper', children: helperText }) : null] }));
+    return (_jsxs("label", { className: 'block', children: [_jsxs("span", { className: hideLabel ? 'sr-only' : 'ps-input-label', children: [label, _jsx(PsRequiredMark, { isRequired: required }), _jsx(PsSuggestedTag, { isSuggested: isSuggested, label: suggestedLabel })] }), _jsx("input", { className: PallasoftClassNameService.merge(hideLabel ? 'ps-input-control' : 'ps-input-control mt-2', PsInputSizeClassNames[controlSize], className), defaultValue: defaultValue, disabled: disabled, name: name, onChange: onChange, required: required, type: type, value: value, ...props }), helperText ? _jsx("span", { className: 'ps-input-helper', children: helperText }) : null] }));
 };

package/dist/esm/constants/ps-portable-text-editor-config.js

@@ -15,6 +15,6 @@ export const PsPortableTextEditorConfig = {
         code: 'rounded bg-ink/10 px-1 font-mono text-[0.9em]',
         link: 'text-primary underline',
         orderedList: 'list-decimal pl-6',
-        placeholder: 'before:pointer-events-none before:float-left before:h-0 before:text-ink/45 before:content-[attr(data-placeholder)]',
+        placeholder: 'before:pointer-events-none before:float-left before:h-0 before:text-subtle before:content-[attr(data-placeholder)]',
     },
 };

package/dist/esm/form/components/ps-form-cascader-field.js

@@ -3,4 +3,4 @@ import { Controller } from 'react-hook-form';
 import { PsCascaderInput } from '../../components/ps-cascader-input';
 import { PsFormControl } from '../../components/ps-form-control';
 import { PsFormFieldService } from '../services/ps-form-field-service';
-export const PsFormCascaderField = ({ control, disabled, groups, label, name, placeholder, rules, }) => (_jsx(Controller, { control: control, name: name, render: ({ field, fieldState }) => (_jsx(PsFormControl, { errorText: PsFormFieldService.error(fieldState.error), children: _jsx(PsCascaderInput, { disabled: disabled, groups: groups, label: label, onChange: field.onChange, placeholder: placeholder, value: PsFormFieldService.text(field.value) }) })), rules: rules }));
+export const PsFormCascaderField = ({ control, disabled, groups, isSuggested, label, name, placeholder, rules, suggestedLabel, }) => (_jsx(Controller, { control: control, name: name, render: ({ field, fieldState }) => (_jsx(PsFormControl, { errorText: PsFormFieldService.error(fieldState.error), children: _jsx(PsCascaderInput, { disabled: disabled, groups: groups, isSuggested: isSuggested, label: label, onChange: field.onChange, placeholder: placeholder, suggestedLabel: suggestedLabel, value: PsFormFieldService.text(field.value) }) })), rules: rules }));

package/dist/esm/form/components/ps-form-date-field.js

@@ -3,4 +3,4 @@ import { Controller } from 'react-hook-form';
 import { PsDateInput } from '../../components/ps-date-input';
 import { PsFormControl } from '../../components/ps-form-control';
 import { PsFormFieldService } from '../services/ps-form-field-service';
-export const PsFormDateField = ({ control, helperText, label, name, rules, }) => (_jsx(Controller, { control: control, name: name, render: ({ field, fieldState }) => (_jsx(PsFormControl, { errorText: PsFormFieldService.error(fieldState.error), children: _jsx(PsDateInput, { helperText: helperText, label: label, name: field.name, onChange: field.onChange, required: PsFormFieldService.isRequired(rules), value: PsFormFieldService.text(field.value) }) })), rules: rules }));
+export const PsFormDateField = ({ control, helperText, isSuggested, label, name, rules, suggestedLabel, }) => (_jsx(Controller, { control: control, name: name, render: ({ field, fieldState }) => (_jsx(PsFormControl, { errorText: PsFormFieldService.error(fieldState.error), children: _jsx(PsDateInput, { helperText: helperText, isSuggested: isSuggested, label: label, name: field.name, onChange: field.onChange, required: PsFormFieldService.isRequired(rules), suggestedLabel: suggestedLabel, value: PsFormFieldService.text(field.value) }) })), rules: rules }));

package/dist/esm/form/components/ps-form-money-field.js

@@ -3,7 +3,7 @@ import { Controller } from 'react-hook-form';
 import { PsAmountInput } from '../../components/ps-amount-input';
 import { PsFormControl } from '../../components/ps-form-control';
 import { PsFormFieldService } from '../services/ps-form-field-service';
-export const PsFormMoneyField = ({ control, label, name, normalize, placeholder, rules, }) => (_jsx(Controller, { control: control, name: name, render: ({ field, fieldState }) => (_jsx(PsFormControl, { errorText: PsFormFieldService.error(fieldState.error), children: _jsx(PsAmountInput, { className: 'text-right tabular-nums', label: label, name: field.name, onBlur: () => {
+export const PsFormMoneyField = ({ control, isSuggested, label, name, normalize, placeholder, rules, suggestedLabel, }) => (_jsx(Controller, { control: control, name: name, render: ({ field, fieldState }) => (_jsx(PsFormControl, { errorText: PsFormFieldService.error(fieldState.error), children: _jsx(PsAmountInput, { className: 'text-right tabular-nums', isSuggested: isSuggested, label: label, name: field.name, onBlur: () => {
                 if (normalize)
                     field.onChange(normalize(PsFormFieldService.text(field.value)));
-            }, onChange: field.onChange, placeholder: placeholder, required: PsFormFieldService.isRequired(rules), value: field.value }) })), rules: rules }));
+            }, onChange: field.onChange, placeholder: placeholder, required: PsFormFieldService.isRequired(rules), suggestedLabel: suggestedLabel, value: field.value }) })), rules: rules }));

package/dist/esm/form/components/ps-form-select-field.js

@@ -3,8 +3,8 @@ import { Controller } from 'react-hook-form';
 import { PsFormControl } from '../../components/ps-form-control';
 import { PsSelectInput } from '../../components/ps-select-input';
 import { PsFormFieldService } from '../services/ps-form-field-service';
-export const PsFormSelectField = ({ control, helperText, label, name, onValueChange, options, placeholder, rules, }) => (_jsx(Controller, { control: control, name: name, render: ({ field, fieldState }) => (_jsx(PsFormControl, { errorText: PsFormFieldService.error(fieldState.error), children: _jsx(PsSelectInput, { helperText: helperText, label: label, name: field.name, onChange: (value) => {
+export const PsFormSelectField = ({ control, helperText, isSuggested, label, name, onValueChange, options, placeholder, rules, suggestedLabel, }) => (_jsx(Controller, { control: control, name: name, render: ({ field, fieldState }) => (_jsx(PsFormControl, { errorText: PsFormFieldService.error(fieldState.error), children: _jsx(PsSelectInput, { helperText: helperText, isSuggested: isSuggested, label: label, name: field.name, onChange: (value) => {
                 field.onChange(value);
                 if (onValueChange)
                     onValueChange(value);
-            }, options: options, placeholder: placeholder, required: PsFormFieldService.isRequired(rules), value: PsFormFieldService.text(field.value) }) })), rules: rules }));
+            }, options: options, placeholder: placeholder, required: PsFormFieldService.isRequired(rules), suggestedLabel: suggestedLabel, value: PsFormFieldService.text(field.value) }) })), rules: rules }));

package/dist/esm/form/components/ps-form-text-field.js

@@ -9,12 +9,13 @@ import { PsTextInput } from '../../components/ps-text-input';
 import { PsUrlInput } from '../../components/ps-url-input';
 import { PsFormTextKind } from '../constants/ps-form-text-kind';
 import { PsFormFieldService } from '../services/ps-form-field-service';
-export const PsFormTextField = ({ asNumber = false, autoComplete, className, control, country = '', disabled, helperText, inputMode, kind = PsFormTextKind.Text, label, maxLength, name, placeholder, rules, type, }) => (_jsx(Controller, { control: control, name: name, render: ({ field, fieldState }) => {
+export const PsFormTextField = ({ asNumber = false, autoComplete, className, control, country = '', disabled, helperText, inputMode, isSuggested, kind = PsFormTextKind.Text, label, maxLength, name, placeholder, rules, suggestedLabel, type, }) => (_jsx(Controller, { control: control, name: name, render: ({ field, fieldState }) => {
         const shared = {
             autoComplete,
             className,
             disabled,
             helperText,
+            isSuggested,
             label,
             maxLength,
             name: field.name,
@@ -22,6 +23,7 @@ export const PsFormTextField = ({ asNumber = false, autoComplete, className, con
             onChange: (event) => field.onChange(asNumber ? PsFormFieldService.number(event.target.value) : event),
             placeholder,
             required: PsFormFieldService.isRequired(rules),
+            suggestedLabel,
             value: PsFormFieldService.text(field.value),
         };
         return (_jsxs(PsFormControl, { errorText: PsFormFieldService.error(fieldState.error), children: [kind === PsFormTextKind.Email ? _jsx(PsEmailInput, { ...shared }) : null, kind === PsFormTextKind.Url ? _jsx(PsUrlInput, { ...shared }) : null, kind === PsFormTextKind.Amount ? _jsx(PsAmountInput, { ...shared }) : null, kind === PsFormTextKind.Percent ? _jsx(PsPercentInput, { ...shared }) : null, kind === PsFormTextKind.PostalCode ? (_jsx(PsPostalCodeInput, { ...shared, country: country })) : null, kind === PsFormTextKind.Text ? (_jsx(PsTextInput, { ...shared, inputMode: inputMode, type: type })) : null] }));

package/dist/esm/index.js

@@ -38,6 +38,8 @@ export * from './services/ps-postal-code-service';
 export * from './services/ps-select-option-service';
 export * from './services/ps-text-format-service';
 export * from './components/ps-required-mark';
+export * from './components/ps-suggested-tag';
+export * from './services/ps-suggested-tag-service';
 export * from './components/ps-year-input';
 export * from './constants/ps-year-input-config';
 export * from './services/ps-year-input-service';

package/dist/esm/services/ps-suggested-tag-service.js

@@ -0,0 +1,5 @@
+export class PsSuggestedTagService {
+    static accessibleLabel(label, isSuggested, suggestedLabel) {
+        return isSuggested && suggestedLabel !== undefined ? `${label}, ${suggestedLabel}` : label;
+    }
+}

package/dist/form/components/ps-form-cascader-field.d.ts

@@ -5,9 +5,11 @@ export interface PsFormCascaderFieldProps<T extends FieldValues> {
     control: Control<T>;
     disabled?: boolean;
     groups: PsCascaderGroup[];
+    isSuggested?: boolean;
     label: string;
     name: Path<T>;
     placeholder?: string;
     rules?: PsFormFieldRules<T>;
+    suggestedLabel?: string;
 }
-export declare const PsFormCascaderField: <T extends FieldValues>({ control, disabled, groups, label, name, placeholder, rules, }: PsFormCascaderFieldProps<T>) => import("react").JSX.Element;
+export declare const PsFormCascaderField: <T extends FieldValues>({ control, disabled, groups, isSuggested, label, name, placeholder, rules, suggestedLabel, }: PsFormCascaderFieldProps<T>) => import("react").JSX.Element;

package/dist/form/components/ps-form-cascader-field.js

@@ -6,5 +6,5 @@ const react_hook_form_1 = require("react-hook-form");
 const ps_cascader_input_1 = require("../../components/ps-cascader-input");
 const ps_form_control_1 = require("../../components/ps-form-control");
 const ps_form_field_service_1 = require("../services/ps-form-field-service");
-const PsFormCascaderField = ({ control, disabled, groups, label, name, placeholder, rules, }) => ((0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { control: control, name: name, render: ({ field, fieldState }) => ((0, jsx_runtime_1.jsx)(ps_form_control_1.PsFormControl, { errorText: ps_form_field_service_1.PsFormFieldService.error(fieldState.error), children: (0, jsx_runtime_1.jsx)(ps_cascader_input_1.PsCascaderInput, { disabled: disabled, groups: groups, label: label, onChange: field.onChange, placeholder: placeholder, value: ps_form_field_service_1.PsFormFieldService.text(field.value) }) })), rules: rules }));
+const PsFormCascaderField = ({ control, disabled, groups, isSuggested, label, name, placeholder, rules, suggestedLabel, }) => ((0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { control: control, name: name, render: ({ field, fieldState }) => ((0, jsx_runtime_1.jsx)(ps_form_control_1.PsFormControl, { errorText: ps_form_field_service_1.PsFormFieldService.error(fieldState.error), children: (0, jsx_runtime_1.jsx)(ps_cascader_input_1.PsCascaderInput, { disabled: disabled, groups: groups, isSuggested: isSuggested, label: label, onChange: field.onChange, placeholder: placeholder, suggestedLabel: suggestedLabel, value: ps_form_field_service_1.PsFormFieldService.text(field.value) }) })), rules: rules }));
 exports.PsFormCascaderField = PsFormCascaderField;

package/dist/form/components/ps-form-date-field.d.ts

@@ -3,8 +3,10 @@ import type { PsFormFieldRules } from '../models/ps-form-field-rules';
 export interface PsFormDateFieldProps<T extends FieldValues> {
     control: Control<T>;
     helperText?: string;
+    isSuggested?: boolean;
     label: string;
     name: Path<T>;
     rules?: PsFormFieldRules<T>;
+    suggestedLabel?: string;
 }
-export declare const PsFormDateField: <T extends FieldValues>({ control, helperText, label, name, rules, }: PsFormDateFieldProps<T>) => import("react").JSX.Element;
+export declare const PsFormDateField: <T extends FieldValues>({ control, helperText, isSuggested, label, name, rules, suggestedLabel, }: PsFormDateFieldProps<T>) => import("react").JSX.Element;

package/dist/form/components/ps-form-date-field.js

@@ -6,5 +6,5 @@ const react_hook_form_1 = require("react-hook-form");
 const ps_date_input_1 = require("../../components/ps-date-input");
 const ps_form_control_1 = require("../../components/ps-form-control");
 const ps_form_field_service_1 = require("../services/ps-form-field-service");
-const PsFormDateField = ({ control, helperText, label, name, rules, }) => ((0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { control: control, name: name, render: ({ field, fieldState }) => ((0, jsx_runtime_1.jsx)(ps_form_control_1.PsFormControl, { errorText: ps_form_field_service_1.PsFormFieldService.error(fieldState.error), children: (0, jsx_runtime_1.jsx)(ps_date_input_1.PsDateInput, { helperText: helperText, label: label, name: field.name, onChange: field.onChange, required: ps_form_field_service_1.PsFormFieldService.isRequired(rules), value: ps_form_field_service_1.PsFormFieldService.text(field.value) }) })), rules: rules }));
+const PsFormDateField = ({ control, helperText, isSuggested, label, name, rules, suggestedLabel, }) => ((0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { control: control, name: name, render: ({ field, fieldState }) => ((0, jsx_runtime_1.jsx)(ps_form_control_1.PsFormControl, { errorText: ps_form_field_service_1.PsFormFieldService.error(fieldState.error), children: (0, jsx_runtime_1.jsx)(ps_date_input_1.PsDateInput, { helperText: helperText, isSuggested: isSuggested, label: label, name: field.name, onChange: field.onChange, required: ps_form_field_service_1.PsFormFieldService.isRequired(rules), suggestedLabel: suggestedLabel, value: ps_form_field_service_1.PsFormFieldService.text(field.value) }) })), rules: rules }));
 exports.PsFormDateField = PsFormDateField;

package/dist/form/components/ps-form-money-field.d.ts

@@ -2,10 +2,12 @@ import { type Control, type FieldValues, type Path } from 'react-hook-form';
 import type { PsFormFieldRules } from '../models/ps-form-field-rules';
 export interface PsFormMoneyFieldProps<T extends FieldValues> {
     control: Control<T>;
+    isSuggested?: boolean;
     label: string;
     name: Path<T>;
     normalize?: (value: string) => string;
     placeholder?: string;
     rules?: PsFormFieldRules<T>;
+    suggestedLabel?: string;
 }
-export declare const PsFormMoneyField: <T extends FieldValues>({ control, label, name, normalize, placeholder, rules, }: PsFormMoneyFieldProps<T>) => import("react").JSX.Element;
+export declare const PsFormMoneyField: <T extends FieldValues>({ control, isSuggested, label, name, normalize, placeholder, rules, suggestedLabel, }: PsFormMoneyFieldProps<T>) => import("react").JSX.Element;

package/dist/form/components/ps-form-money-field.js

@@ -6,8 +6,8 @@ const react_hook_form_1 = require("react-hook-form");
 const ps_amount_input_1 = require("../../components/ps-amount-input");
 const ps_form_control_1 = require("../../components/ps-form-control");
 const ps_form_field_service_1 = require("../services/ps-form-field-service");
-const PsFormMoneyField = ({ control, label, name, normalize, placeholder, rules, }) => ((0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { control: control, name: name, render: ({ field, fieldState }) => ((0, jsx_runtime_1.jsx)(ps_form_control_1.PsFormControl, { errorText: ps_form_field_service_1.PsFormFieldService.error(fieldState.error), children: (0, jsx_runtime_1.jsx)(ps_amount_input_1.PsAmountInput, { className: 'text-right tabular-nums', label: label, name: field.name, onBlur: () => {
+const PsFormMoneyField = ({ control, isSuggested, label, name, normalize, placeholder, rules, suggestedLabel, }) => ((0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { control: control, name: name, render: ({ field, fieldState }) => ((0, jsx_runtime_1.jsx)(ps_form_control_1.PsFormControl, { errorText: ps_form_field_service_1.PsFormFieldService.error(fieldState.error), children: (0, jsx_runtime_1.jsx)(ps_amount_input_1.PsAmountInput, { className: 'text-right tabular-nums', isSuggested: isSuggested, label: label, name: field.name, onBlur: () => {
                 if (normalize)
                     field.onChange(normalize(ps_form_field_service_1.PsFormFieldService.text(field.value)));
-            }, onChange: field.onChange, placeholder: placeholder, required: ps_form_field_service_1.PsFormFieldService.isRequired(rules), value: field.value }) })), rules: rules }));
+            }, onChange: field.onChange, placeholder: placeholder, required: ps_form_field_service_1.PsFormFieldService.isRequired(rules), suggestedLabel: suggestedLabel, value: field.value }) })), rules: rules }));
 exports.PsFormMoneyField = PsFormMoneyField;

package/dist/form/components/ps-form-select-field.d.ts

@@ -4,11 +4,13 @@ import type { PsFormFieldRules } from '../models/ps-form-field-rules';
 export interface PsFormSelectFieldProps<T extends FieldValues> {
     control: Control<T>;
     helperText?: string;
+    isSuggested?: boolean;
     label: string;
     name: Path<T>;
     onValueChange?: (value: string) => void;
     options: PsSelectOption[];
     placeholder?: string;
     rules?: PsFormFieldRules<T>;
+    suggestedLabel?: string;
 }
-export declare const PsFormSelectField: <T extends FieldValues>({ control, helperText, label, name, onValueChange, options, placeholder, rules, }: PsFormSelectFieldProps<T>) => import("react").JSX.Element;
+export declare const PsFormSelectField: <T extends FieldValues>({ control, helperText, isSuggested, label, name, onValueChange, options, placeholder, rules, suggestedLabel, }: PsFormSelectFieldProps<T>) => import("react").JSX.Element;

package/dist/form/components/ps-form-select-field.js

@@ -6,9 +6,9 @@ const react_hook_form_1 = require("react-hook-form");
 const ps_form_control_1 = require("../../components/ps-form-control");
 const ps_select_input_1 = require("../../components/ps-select-input");
 const ps_form_field_service_1 = require("../services/ps-form-field-service");
-const PsFormSelectField = ({ control, helperText, label, name, onValueChange, options, placeholder, rules, }) => ((0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { control: control, name: name, render: ({ field, fieldState }) => ((0, jsx_runtime_1.jsx)(ps_form_control_1.PsFormControl, { errorText: ps_form_field_service_1.PsFormFieldService.error(fieldState.error), children: (0, jsx_runtime_1.jsx)(ps_select_input_1.PsSelectInput, { helperText: helperText, label: label, name: field.name, onChange: (value) => {
+const PsFormSelectField = ({ control, helperText, isSuggested, label, name, onValueChange, options, placeholder, rules, suggestedLabel, }) => ((0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { control: control, name: name, render: ({ field, fieldState }) => ((0, jsx_runtime_1.jsx)(ps_form_control_1.PsFormControl, { errorText: ps_form_field_service_1.PsFormFieldService.error(fieldState.error), children: (0, jsx_runtime_1.jsx)(ps_select_input_1.PsSelectInput, { helperText: helperText, isSuggested: isSuggested, label: label, name: field.name, onChange: (value) => {
                 field.onChange(value);
                 if (onValueChange)
                     onValueChange(value);
-            }, options: options, placeholder: placeholder, required: ps_form_field_service_1.PsFormFieldService.isRequired(rules), value: ps_form_field_service_1.PsFormFieldService.text(field.value) }) })), rules: rules }));
+            }, options: options, placeholder: placeholder, required: ps_form_field_service_1.PsFormFieldService.isRequired(rules), suggestedLabel: suggestedLabel, value: ps_form_field_service_1.PsFormFieldService.text(field.value) }) })), rules: rules }));
 exports.PsFormSelectField = PsFormSelectField;

package/dist/form/components/ps-form-text-field.d.ts

@@ -11,12 +11,14 @@ export interface PsFormTextFieldProps<T extends FieldValues> {
     disabled?: boolean;
     helperText?: string;
     inputMode?: HTMLAttributes<HTMLInputElement>['inputMode'];
+    isSuggested?: boolean;
     kind?: PsFormTextKind;
     label: string;
     maxLength?: number;
     name: Path<T>;
     placeholder?: string;
     rules?: PsFormFieldRules<T>;
+    suggestedLabel?: string;
     type?: string;
 }
-export declare const PsFormTextField: <T extends FieldValues>({ asNumber, autoComplete, className, control, country, disabled, helperText, inputMode, kind, label, maxLength, name, placeholder, rules, type, }: PsFormTextFieldProps<T>) => import("react").JSX.Element;
+export declare const PsFormTextField: <T extends FieldValues>({ asNumber, autoComplete, className, control, country, disabled, helperText, inputMode, isSuggested, kind, label, maxLength, name, placeholder, rules, suggestedLabel, type, }: PsFormTextFieldProps<T>) => import("react").JSX.Element;

package/dist/form/components/ps-form-text-field.js

@@ -12,12 +12,13 @@ const ps_text_input_1 = require("../../components/ps-text-input");
 const ps_url_input_1 = require("../../components/ps-url-input");
 const ps_form_text_kind_1 = require("../constants/ps-form-text-kind");
 const ps_form_field_service_1 = require("../services/ps-form-field-service");
-const PsFormTextField = ({ asNumber = false, autoComplete, className, control, country = '', disabled, helperText, inputMode, kind = ps_form_text_kind_1.PsFormTextKind.Text, label, maxLength, name, placeholder, rules, type, }) => ((0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { control: control, name: name, render: ({ field, fieldState }) => {
+const PsFormTextField = ({ asNumber = false, autoComplete, className, control, country = '', disabled, helperText, inputMode, isSuggested, kind = ps_form_text_kind_1.PsFormTextKind.Text, label, maxLength, name, placeholder, rules, suggestedLabel, type, }) => ((0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { control: control, name: name, render: ({ field, fieldState }) => {
         const shared = {
             autoComplete,
             className,
             disabled,
             helperText,
+            isSuggested,
             label,
             maxLength,
             name: field.name,
@@ -25,6 +26,7 @@ const PsFormTextField = ({ asNumber = false, autoComplete, className, control, c
             onChange: (event) => field.onChange(asNumber ? ps_form_field_service_1.PsFormFieldService.number(event.target.value) : event),
             placeholder,
             required: ps_form_field_service_1.PsFormFieldService.isRequired(rules),
+            suggestedLabel,
             value: ps_form_field_service_1.PsFormFieldService.text(field.value),
         };
         return ((0, jsx_runtime_1.jsxs)(ps_form_control_1.PsFormControl, { errorText: ps_form_field_service_1.PsFormFieldService.error(fieldState.error), children: [kind === ps_form_text_kind_1.PsFormTextKind.Email ? (0, jsx_runtime_1.jsx)(ps_email_input_1.PsEmailInput, { ...shared }) : null, kind === ps_form_text_kind_1.PsFormTextKind.Url ? (0, jsx_runtime_1.jsx)(ps_url_input_1.PsUrlInput, { ...shared }) : null, kind === ps_form_text_kind_1.PsFormTextKind.Amount ? (0, jsx_runtime_1.jsx)(ps_amount_input_1.PsAmountInput, { ...shared }) : null, kind === ps_form_text_kind_1.PsFormTextKind.Percent ? (0, jsx_runtime_1.jsx)(ps_percent_input_1.PsPercentInput, { ...shared }) : null, kind === ps_form_text_kind_1.PsFormTextKind.PostalCode ? ((0, jsx_runtime_1.jsx)(ps_postal_code_input_1.PsPostalCodeInput, { ...shared, country: country })) : null, kind === ps_form_text_kind_1.PsFormTextKind.Text ? ((0, jsx_runtime_1.jsx)(ps_text_input_1.PsTextInput, { ...shared, inputMode: inputMode, type: type })) : null] }));

package/dist/index.d.ts

@@ -38,6 +38,8 @@ export * from './services/ps-postal-code-service';
 export * from './services/ps-select-option-service';
 export * from './services/ps-text-format-service';
 export * from './components/ps-required-mark';
+export * from './components/ps-suggested-tag';
+export * from './services/ps-suggested-tag-service';
 export * from './components/ps-year-input';
 export * from './constants/ps-year-input-config';
 export * from './services/ps-year-input-service';

package/dist/index.js

@@ -54,6 +54,8 @@ __exportStar(require("./services/ps-postal-code-service"), exports);
 __exportStar(require("./services/ps-select-option-service"), exports);
 __exportStar(require("./services/ps-text-format-service"), exports);
 __exportStar(require("./components/ps-required-mark"), exports);
+__exportStar(require("./components/ps-suggested-tag"), exports);
+__exportStar(require("./services/ps-suggested-tag-service"), exports);
 __exportStar(require("./components/ps-year-input"), exports);
 __exportStar(require("./constants/ps-year-input-config"), exports);
 __exportStar(require("./services/ps-year-input-service"), exports);

package/dist/services/ps-suggested-tag-service.d.ts

@@ -0,0 +1,3 @@
+export declare class PsSuggestedTagService {
+    static accessibleLabel(label: string, isSuggested: boolean, suggestedLabel: string | undefined): string;
+}

package/dist/services/ps-suggested-tag-service.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsSuggestedTagService = void 0;
+class PsSuggestedTagService {
+    static accessibleLabel(label, isSuggested, suggestedLabel) {
+        return isSuggested && suggestedLabel !== undefined ? `${label}, ${suggestedLabel}` : label;
+    }
+}
+exports.PsSuggestedTagService = PsSuggestedTagService;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@pallasoft/ps-input-components",
-	"version": "3.9.0",
+	"version": "3.10.0",
 	"private": false,
 	"main": "./dist/index.js",
 	"module": "./dist/esm/index.js",