@pallasoft/ps-input-components 1.10.0 → 1.11.0

package/dist/components/ps-cascader-input.d.ts

@@ -17,7 +17,8 @@ export interface PsCascaderInputProps {
     label: string;
     onChange: (value: string) => void;
     placeholder?: string;
+    required?: boolean;
     searchPlaceholder?: string;
     value: string;
 }
-export declare const PsCascaderInput: ({ className, disabled, groups, helperText, hideLabel, label, onChange, placeholder, searchPlaceholder, value, }: PsCascaderInputProps) => import("react").JSX.Element;
+export declare const PsCascaderInput: ({ className, disabled, groups, helperText, hideLabel, label, onChange, placeholder, required, searchPlaceholder, value, }: PsCascaderInputProps) => import("react").JSX.Element;

package/dist/components/ps-cascader-input.js

@@ -8,7 +8,8 @@ const ps_design_system_1 = require("@pallasoft/ps-design-system");
 const ps_icons_1 = require("@pallasoft/ps-icons");
 const react_aria_components_1 = require("react-aria-components");
 const ps_cascader_service_1 = require("../services/ps-cascader-service");
-const PsCascaderInput = ({ className, disabled, groups, helperText, hideLabel, label, onChange, placeholder = 'Select an option', searchPlaceholder = 'Search', value, }) => {
+const ps_required_mark_1 = require("./ps-required-mark");
+const PsCascaderInput = ({ className, disabled, groups, helperText, hideLabel, label, onChange, placeholder = 'Select an option', required, searchPlaceholder = 'Search', value, }) => {
     const zIndex = (0, ps_core_components_1.usePsLayerZIndex)(ps_design_system_1.PallasoftZIndex.Dropdown);
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
     const [query, setQuery] = (0, react_1.useState)('');
@@ -39,10 +40,10 @@ const PsCascaderInput = ({ className, disabled, groups, helperText, hideLabel, l
     const renderOption = (option, groupLabel, close) => ((0, jsx_runtime_1.jsxs)("button", { "aria-selected": option.value === value, className: ps_design_system_1.PallasoftClassNameService.merge('ps-focus-ring flex w-full items-start gap-2 rounded-ps-control px-3 py-2.5 text-left text-sm font-medium transition-colors', option.value === value
             ? 'bg-primary/10 text-ink'
             : 'text-ink/80 hover:bg-mist/60 hover:text-ink'), onClick: () => select(option.value, close), role: 'option', type: 'button', children: [(0, jsx_runtime_1.jsx)("span", { className: 'flex h-5 w-4 shrink-0 items-center justify-center text-primary', children: option.value === value ? ((0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'block h-4 w-4', iconKey: ps_icons_1.PsIconKey.Check })) : null }), (0, jsx_runtime_1.jsxs)("span", { className: 'min-w-0 flex-1', children: [(0, jsx_runtime_1.jsx)("span", { className: 'block truncate', children: option.label }), groupLabel ? ((0, jsx_runtime_1.jsx)("span", { className: 'mt-0.5 block truncate text-xs font-normal text-ink/50', children: groupLabel })) : null, option.description ? ((0, jsx_runtime_1.jsx)("span", { className: 'mt-0.5 block truncate text-xs font-normal text-ink/55', children: option.description })) : null] })] }, option.value));
-    return ((0, jsx_runtime_1.jsxs)("div", { className: ps_design_system_1.PallasoftClassNameService.merge('block', className), children: [hideLabel ? null : (0, jsx_runtime_1.jsx)("span", { className: 'ps-input-label block', children: label }), (0, jsx_runtime_1.jsxs)(react_aria_components_1.DialogTrigger, { isOpen: isOpen, onOpenChange: open, children: [(0, jsx_runtime_1.jsxs)(react_aria_components_1.Button, { "aria-label": hideLabel ? label : undefined, className: ps_design_system_1.PallasoftClassNameService.merge('ps-input-control ps-focus-ring relative flex min-h-11 w-full items-center pr-10 text-left text-sm font-semibold disabled:cursor-not-allowed disabled:opacity-60', hideLabel ? '' : 'mt-2'), isDisabled: disabled, children: [(0, jsx_runtime_1.jsx)("span", { className: 'min-w-0 flex-1 truncate', children: selected ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: 'truncate', children: selected.option.label }), (0, jsx_runtime_1.jsx)("span", { className: 'ml-2 text-xs font-medium text-ink/45', children: selected.group.label })] })) : ((0, jsx_runtime_1.jsx)("span", { className: 'font-medium text-ink/45', children: placeholder })) }), (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'pointer-events-none absolute top-1/2 right-3 h-4 w-4 -translate-y-1/2 text-primary', iconKey: ps_icons_1.PsIconKey.Chevron })] }), (0, jsx_runtime_1.jsx)(react_aria_components_1.Popover, { className: 'ps-floating-panel w-[min(calc(100vw-2rem),32rem)] min-w-[var(--trigger-width)] outline-none', offset: 6, placement: 'bottom start', style: { zIndex }, children: (0, jsx_runtime_1.jsx)(react_aria_components_1.Dialog, { "aria-label": label, className: 'flex flex-col outline-none', children: ({ close }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: 'border-b border-line p-2', children: (0, jsx_runtime_1.jsx)("input", { "aria-label": searchPlaceholder, autoFocus: true, className: 'ps-input-control ps-focus-ring h-10 w-full text-sm', onChange: (event) => setQuery(event.target.value), placeholder: searchPlaceholder, type: 'search', value: query }) }), query.trim() === '' ? ((0, jsx_runtime_1.jsxs)("div", { className: 'grid grid-cols-1 sm:grid-cols-[minmax(0,11rem)_minmax(0,1fr)]', children: [(0, jsx_runtime_1.jsx)("div", { className: ps_design_system_1.PallasoftClassNameService.merge('ps-scrollbar max-h-72 overflow-y-auto p-1.5 sm:border-r sm:border-line', activeGroupKey && groups.length > 1 ? 'hidden sm:block' : ''), children: groups.map((group) => ((0, jsx_runtime_1.jsxs)("button", { className: ps_design_system_1.PallasoftClassNameService.merge('ps-focus-ring flex w-full items-center gap-2 rounded-ps-control px-3 py-2.5 text-left text-sm font-semibold transition-colors', activeGroup?.key === group.key
+    return ((0, jsx_runtime_1.jsxs)("div", { className: ps_design_system_1.PallasoftClassNameService.merge('block', className), children: [hideLabel ? null : ((0, jsx_runtime_1.jsxs)("span", { className: 'ps-input-label block', children: [label, (0, jsx_runtime_1.jsx)(ps_required_mark_1.PsRequiredMark, { isRequired: required })] })), (0, jsx_runtime_1.jsxs)(react_aria_components_1.DialogTrigger, { isOpen: isOpen, onOpenChange: open, children: [(0, jsx_runtime_1.jsxs)(react_aria_components_1.Button, { "aria-label": hideLabel ? label : undefined, className: ps_design_system_1.PallasoftClassNameService.merge('ps-input-control ps-focus-ring relative flex min-h-11 w-full items-center pr-10 text-left text-sm font-semibold disabled:cursor-not-allowed disabled:opacity-60', hideLabel ? '' : 'mt-2'), isDisabled: disabled, children: [(0, jsx_runtime_1.jsx)("span", { className: 'min-w-0 flex-1 truncate', children: selected ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: 'truncate', children: selected.option.label }), (0, jsx_runtime_1.jsx)("span", { className: 'ml-2 text-xs font-medium text-ink/45', children: selected.group.label })] })) : ((0, jsx_runtime_1.jsx)("span", { className: 'font-medium text-ink/45', children: placeholder })) }), (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'pointer-events-none absolute top-1/2 right-3 h-4 w-4 -translate-y-1/2 text-primary', iconKey: ps_icons_1.PsIconKey.Chevron })] }), (0, jsx_runtime_1.jsx)(react_aria_components_1.Popover, { className: 'ps-floating-panel w-[min(calc(100vw-2rem),32rem)] min-w-[var(--trigger-width)] outline-none', offset: 6, placement: 'bottom start', style: { zIndex }, children: (0, jsx_runtime_1.jsx)(react_aria_components_1.Dialog, { "aria-label": label, className: 'flex flex-col outline-none', children: ({ close }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: 'border-b border-line p-2', children: (0, jsx_runtime_1.jsx)("input", { "aria-label": searchPlaceholder, autoFocus: true, className: 'ps-input-control ps-focus-ring h-10 w-full text-sm', onChange: (event) => setQuery(event.target.value), placeholder: searchPlaceholder, type: 'search', value: query }) }), query.trim() === '' ? ((0, jsx_runtime_1.jsxs)("div", { className: 'grid grid-cols-1 sm:grid-cols-[minmax(0,11rem)_minmax(0,1fr)]', children: [(0, jsx_runtime_1.jsx)("div", { className: ps_design_system_1.PallasoftClassNameService.merge('ps-scrollbar-hidden max-h-72 overflow-y-auto p-1.5 sm:border-r sm:border-line', activeGroupKey && groups.length > 1 ? 'hidden sm:block' : ''), children: groups.map((group) => ((0, jsx_runtime_1.jsxs)("button", { className: ps_design_system_1.PallasoftClassNameService.merge('ps-focus-ring flex w-full items-center gap-2 rounded-ps-control px-3 py-2.5 text-left text-sm font-semibold transition-colors', activeGroup?.key === group.key
                                                         ? 'bg-mist text-ink'
-                                                        : 'text-ink/70 hover:bg-mist/60 hover:text-ink'), onClick: () => setActiveGroupKey(group.key), type: 'button', children: [(0, jsx_runtime_1.jsx)("span", { className: 'min-w-0 flex-1 truncate', children: group.label }), (0, jsx_runtime_1.jsx)("span", { className: 'text-xs font-medium text-ink/45', children: group.options.length }), (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'block h-4 w-4 shrink-0 -rotate-90 text-ink/35', iconKey: ps_icons_1.PsIconKey.Chevron })] }, group.key))) }), (0, jsx_runtime_1.jsxs)("div", { className: ps_design_system_1.PallasoftClassNameService.merge('ps-scrollbar max-h-72 overflow-y-auto p-1.5', activeGroupKey && groups.length > 1 ? '' : 'hidden sm:block'), role: 'listbox', children: [groups.length > 1 ? ((0, jsx_runtime_1.jsxs)("button", { className: 'ps-focus-ring mb-1 flex w-full items-center gap-2 rounded-ps-control px-3 py-2 text-left text-xs font-semibold text-ink/60 hover:text-ink sm:hidden', onClick: () => setActiveGroupKey(null), type: 'button', children: [(0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'block h-4 w-4 rotate-90', iconKey: ps_icons_1.PsIconKey.Chevron }), "All groups"] })) : null, activeGroup
+                                                        : 'text-ink/70 hover:bg-mist/60 hover:text-ink'), onClick: () => setActiveGroupKey(group.key), type: 'button', children: [(0, jsx_runtime_1.jsx)("span", { className: 'min-w-0 flex-1 truncate', children: group.label }), (0, jsx_runtime_1.jsx)("span", { className: 'text-xs font-medium text-ink/45', children: group.options.length }), (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'block h-4 w-4 shrink-0 -rotate-90 text-ink/35', iconKey: ps_icons_1.PsIconKey.Chevron })] }, group.key))) }), (0, jsx_runtime_1.jsxs)("div", { className: ps_design_system_1.PallasoftClassNameService.merge('ps-scrollbar-hidden max-h-72 overflow-y-auto p-1.5', activeGroupKey && groups.length > 1 ? '' : 'hidden sm:block'), role: 'listbox', children: [groups.length > 1 ? ((0, jsx_runtime_1.jsxs)("button", { className: 'ps-focus-ring mb-1 flex w-full items-center gap-2 rounded-ps-control px-3 py-2 text-left text-xs font-semibold text-ink/60 hover:text-ink sm:hidden', onClick: () => setActiveGroupKey(null), type: 'button', children: [(0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'block h-4 w-4 rotate-90', iconKey: ps_icons_1.PsIconKey.Chevron }), "All groups"] })) : null, activeGroup
                                                         ? activeGroup.options.map((option) => renderOption(option, null, close))
-                                                        : null] })] })) : ((0, jsx_runtime_1.jsx)("div", { className: 'ps-scrollbar max-h-72 overflow-y-auto p-1.5', role: 'listbox', children: matches.length === 0 ? ((0, jsx_runtime_1.jsx)("p", { className: 'px-3 py-6 text-center text-sm text-ink/55', children: "No matches." })) : (matches.map((match) => renderOption(match.option, match.group.label, close))) }))] })) }) })] }), helperText ? (0, jsx_runtime_1.jsx)("span", { className: 'ps-input-helper mt-2 block', children: helperText }) : null] }));
+                                                        : null] })] })) : ((0, jsx_runtime_1.jsx)("div", { className: 'ps-scrollbar-hidden max-h-72 overflow-y-auto p-1.5', role: 'listbox', children: matches.length === 0 ? ((0, jsx_runtime_1.jsx)("p", { className: 'px-3 py-6 text-center text-sm text-ink/55', children: "No matches." })) : (matches.map((match) => renderOption(match.option, match.group.label, close))) }))] })) }) })] }), helperText ? (0, jsx_runtime_1.jsx)("span", { className: 'ps-input-helper mt-2 block', children: helperText }) : null] }));
 };
 exports.PsCascaderInput = PsCascaderInput;

package/dist/components/ps-color-input.d.ts

@@ -3,7 +3,8 @@ export interface PsColorInputProps {
     helperText?: string;
     label: string;
     onChange: (value: string) => void;
+    required?: boolean;
     swatches?: string[];
     value: string;
 }
-export declare const PsColorInput: ({ className, helperText, label, onChange, swatches, value, }: PsColorInputProps) => import("react").JSX.Element;
+export declare const PsColorInput: ({ className, helperText, label, onChange, required, swatches, value, }: PsColorInputProps) => import("react").JSX.Element;

package/dist/components/ps-color-input.js

@@ -7,11 +7,12 @@ const ps_design_system_1 = require("@pallasoft/ps-design-system");
 const ps_icons_1 = require("@pallasoft/ps-icons");
 const ps_color_input_config_1 = require("../constants/ps-color-input-config");
 const ps_color_picker_1 = require("./ps-color-picker");
-const PsColorInput = ({ className, helperText, label, onChange, swatches = [...ps_color_input_config_1.PsColorInputConfig.swatches], value, }) => {
+const ps_required_mark_1 = require("./ps-required-mark");
+const PsColorInput = ({ className, helperText, label, onChange, required, swatches = [...ps_color_input_config_1.PsColorInputConfig.swatches], value, }) => {
     const labelId = (0, react_1.useId)();
     const swatchesId = (0, react_1.useId)();
     const normalised = value.toUpperCase();
-    return ((0, jsx_runtime_1.jsxs)("div", { className: ps_design_system_1.PallasoftClassNameService.merge('flex flex-col gap-2', className), children: [(0, jsx_runtime_1.jsx)("span", { className: 'ps-input-label', id: labelId, children: label }), (0, jsx_runtime_1.jsxs)("div", { className: 'flex flex-col gap-4 rounded-ps-control border border-line bg-surface p-4', children: [(0, jsx_runtime_1.jsx)(ps_color_picker_1.PsColorPicker, { hideLabel: true, label: `${label} picker`, onChange: onChange, swatches: swatches, value: value }), (0, jsx_runtime_1.jsxs)("div", { className: 'flex flex-col gap-2 border-t border-line pt-4', children: [(0, jsx_runtime_1.jsx)("span", { className: 'ps-input-helper', id: swatchesId, children: "Presets" }), (0, jsx_runtime_1.jsx)("div", { "aria-labelledby": swatchesId, className: 'flex flex-wrap gap-2', role: 'radiogroup', children: swatches.map((swatch) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: ps_design_system_1.PallasoftClassNameService.merge('flex flex-col gap-2', className), children: [(0, jsx_runtime_1.jsxs)("span", { className: 'ps-input-label', id: labelId, children: [label, (0, jsx_runtime_1.jsx)(ps_required_mark_1.PsRequiredMark, { isRequired: required })] }), (0, jsx_runtime_1.jsxs)("div", { className: 'flex flex-col gap-4 rounded-ps-control border border-line bg-surface p-4', children: [(0, jsx_runtime_1.jsx)(ps_color_picker_1.PsColorPicker, { hideLabel: true, label: `${label} picker`, onChange: onChange, swatches: swatches, value: value }), (0, jsx_runtime_1.jsxs)("div", { className: 'flex flex-col gap-2 border-t border-line pt-4', children: [(0, jsx_runtime_1.jsx)("span", { className: 'ps-input-helper', id: swatchesId, children: "Presets" }), (0, jsx_runtime_1.jsx)("div", { "aria-labelledby": swatchesId, className: 'flex flex-wrap gap-2', role: 'radiogroup', children: swatches.map((swatch) => {
                                     const isSelected = swatch.toUpperCase() === normalised;
                                     return ((0, jsx_runtime_1.jsx)("button", { "aria-checked": isSelected, "aria-label": swatch, className: ps_design_system_1.PallasoftClassNameService.merge('ps-focus-ring flex h-8 w-8 items-center justify-center rounded-full text-white ring-offset-2 ring-offset-surface transition-shadow', isSelected ? 'ring-2 ring-ink/70' : 'hover:ring-2 hover:ring-ink/25'), onClick: () => onChange(swatch.toUpperCase()), role: 'radio', style: { backgroundColor: swatch }, type: 'button', children: isSelected ? ((0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'block h-4 w-4', iconKey: ps_icons_1.PsIconKey.Check })) : null }, swatch));
                                 }) })] })] }), helperText ? (0, jsx_runtime_1.jsx)("span", { className: 'ps-input-helper', children: helperText }) : null] }));

package/dist/components/ps-combobox-input.d.ts

@@ -10,5 +10,6 @@ export interface PsComboboxInputProps<T> {
     onSelectionChange?: (item: T | null) => void;
     placeholder?: string;
     renderItem?: (item: T) => ReactNode;
+    required?: boolean;
 }
-export declare const PsComboboxInput: <T>({ className, getItemKey, getItemLabel, isLoading, items, label, onInputChange, onSelectionChange, placeholder, renderItem, }: PsComboboxInputProps<T>) => import("react").JSX.Element;
+export declare const PsComboboxInput: <T>({ className, getItemKey, getItemLabel, isLoading, items, label, onInputChange, onSelectionChange, placeholder, renderItem, required, }: PsComboboxInputProps<T>) => import("react").JSX.Element;

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

@@ -6,8 +6,9 @@ const ps_core_components_1 = require("@pallasoft/ps-core-components");
 const ps_design_system_1 = require("@pallasoft/ps-design-system");
 const react_aria_components_1 = require("react-aria-components");
 const ps_combobox_input_service_1 = require("../services/ps-combobox-input-service");
-const PsComboboxInput = ({ className, getItemKey, getItemLabel, isLoading = false, items, label, onInputChange, onSelectionChange, placeholder, renderItem, }) => {
+const ps_required_mark_1 = require("./ps-required-mark");
+const PsComboboxInput = ({ className, getItemKey, getItemLabel, isLoading = false, items, label, onInputChange, onSelectionChange, placeholder, renderItem, required, }) => {
     const itemsByKey = new Map(items.map((item) => [getItemKey(item), item]));
-    return ((0, jsx_runtime_1.jsxs)(react_aria_components_1.ComboBox, { className: ps_design_system_1.PallasoftClassNameService.merge('block', className), defaultFilter: () => true, items: items, onInputChange: onInputChange, onSelectionChange: (key) => onSelectionChange?.(key === null ? null : ps_combobox_input_service_1.PsComboboxInputService.getItem(itemsByKey, key)), children: [label ? (0, jsx_runtime_1.jsx)(react_aria_components_1.Label, { className: 'ps-input-label', children: label }) : null, (0, jsx_runtime_1.jsx)("span", { className: 'relative mt-2 block', children: (0, jsx_runtime_1.jsx)(react_aria_components_1.Input, { className: 'ps-input-control ps-focus-ring min-h-11 w-full text-sm font-semibold', placeholder: placeholder }) }), (0, jsx_runtime_1.jsx)(react_aria_components_1.Popover, { className: 'w-[--trigger-width] rounded-2xl border border-line bg-white/95 p-1.5 shadow-lg dark:border-white/10 dark:bg-slate-900/95', children: isLoading ? ((0, jsx_runtime_1.jsx)("div", { className: 'flex items-center justify-center py-4', children: (0, jsx_runtime_1.jsx)(ps_core_components_1.PsSpinner, { label: 'Loading results', size: 'small' }) })) : ((0, jsx_runtime_1.jsx)(react_aria_components_1.ListBox, { className: 'max-h-72 overflow-y-auto outline-none', items: items, children: (item) => ((0, jsx_runtime_1.jsx)(react_aria_components_1.ListBoxItem, { className: 'ps-focus-ring cursor-pointer rounded-xl px-3 py-2 text-sm font-semibold text-ink selected:bg-primary-soft selected:text-primary hover:bg-slate-50 dark:hover:bg-white/6', id: getItemKey(item), textValue: getItemLabel(item), children: renderItem ? renderItem(item) : getItemLabel(item) })) })) })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_aria_components_1.ComboBox, { className: ps_design_system_1.PallasoftClassNameService.merge('block', className), defaultFilter: () => true, items: items, onInputChange: onInputChange, onSelectionChange: (key) => onSelectionChange?.(key === null ? null : ps_combobox_input_service_1.PsComboboxInputService.getItem(itemsByKey, key)), children: [label ? ((0, jsx_runtime_1.jsxs)(react_aria_components_1.Label, { className: 'ps-input-label', children: [label, (0, jsx_runtime_1.jsx)(ps_required_mark_1.PsRequiredMark, { isRequired: required })] })) : null, (0, jsx_runtime_1.jsx)("span", { className: 'relative mt-2 block', children: (0, jsx_runtime_1.jsx)(react_aria_components_1.Input, { className: 'ps-input-control ps-focus-ring min-h-11 w-full text-sm font-semibold', placeholder: placeholder }) }), (0, jsx_runtime_1.jsx)(react_aria_components_1.Popover, { className: 'w-[--trigger-width] rounded-2xl border border-line bg-white/95 p-1.5 shadow-lg dark:border-white/10 dark:bg-slate-900/95', children: isLoading ? ((0, jsx_runtime_1.jsx)("div", { className: 'flex items-center justify-center py-4', children: (0, jsx_runtime_1.jsx)(ps_core_components_1.PsSpinner, { label: 'Loading results', size: 'small' }) })) : ((0, jsx_runtime_1.jsx)(react_aria_components_1.ListBox, { className: 'max-h-72 overflow-y-auto outline-none', items: items, children: (item) => ((0, jsx_runtime_1.jsx)(react_aria_components_1.ListBoxItem, { className: 'ps-focus-ring cursor-pointer rounded-xl px-3 py-2 text-sm font-semibold text-ink selected:bg-primary-soft selected:text-primary hover:bg-slate-50 dark:hover:bg-white/6', id: getItemKey(item), textValue: getItemLabel(item), children: renderItem ? renderItem(item) : getItemLabel(item) })) })) })] }));
 };
 exports.PsComboboxInput = PsComboboxInput;

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

@@ -13,6 +13,7 @@ const react_datepicker_1 = __importDefault(require("react-datepicker"));
 const ps_date_input_config_1 = require("../constants/ps-date-input-config");
 const ps_date_input_service_1 = require("../services/ps-date-input-service");
 const ps_calendar_header_1 = require("./ps-calendar-header");
+const ps_required_mark_1 = require("./ps-required-mark");
 const PsDateInput = ({ className, defaultValue, disabled, helperText, hideLabel, label, max, min, name, onChange, placeholder = ps_date_input_config_1.PsDateInputConfig.placeholder, required, value, }) => {
     const inputId = (0, react_1.useId)();
     const portalId = `${ps_date_input_config_1.PsDateInputConfig.portalId}-${inputId.replace(/:/g, '')}`;
@@ -36,6 +37,6 @@ const PsDateInput = ({ className, defaultValue, disabled, helperText, hideLabel,
             setUncontrolledValue(nextValue);
         onChange?.(nextValue);
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { className: ps_design_system_1.PallasoftClassNameService.merge('block', className), children: [(0, jsx_runtime_1.jsx)("label", { className: hideLabel ? 'sr-only' : 'ps-input-label block', htmlFor: inputId, children: label }), (0, jsx_runtime_1.jsxs)("div", { className: hideLabel ? 'relative' : 'relative mt-2', children: [(0, jsx_runtime_1.jsx)(react_datepicker_1.default, { autoComplete: 'off', calendarClassName: 'ps-floating-panel ps-datepicker', className: 'ps-input-control ps-focus-ring min-h-11 w-full pr-10 text-sm font-semibold', dateFormat: [...ps_date_input_config_1.PsDateInputConfig.inputFormats], disabled: disabled, id: inputId, maxDate: ps_date_input_service_1.PsDateInputService.parseBound(max), minDate: ps_date_input_service_1.PsDateInputService.parseBound(min), onChange: handleChange, placeholderText: placeholder, popperClassName: 'ps-datepicker-popper', popperPlacement: 'bottom-start', popperProps: { strategy: 'fixed' }, portalId: portalId, renderCustomHeader: (headerProps) => (0, jsx_runtime_1.jsx)(ps_calendar_header_1.PsCalendarHeader, { ...headerProps }), required: required, selected: ps_date_input_service_1.PsDateInputService.parse(currentValue), showPopperArrow: false, wrapperClassName: 'block w-full' }), (0, jsx_runtime_1.jsx)(ps_icons_1.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: ps_icons_1.PsIconKey.Calendar }), name ? (0, jsx_runtime_1.jsx)("input", { name: name, type: 'hidden', value: currentValue }) : null] }), helperText ? (0, jsx_runtime_1.jsx)("span", { className: 'ps-input-helper', children: helperText }) : null] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: ps_design_system_1.PallasoftClassNameService.merge('block', className), children: [(0, jsx_runtime_1.jsxs)("label", { className: hideLabel ? 'sr-only' : 'ps-input-label block', htmlFor: inputId, children: [label, (0, jsx_runtime_1.jsx)(ps_required_mark_1.PsRequiredMark, { isRequired: required })] }), (0, jsx_runtime_1.jsxs)("div", { className: hideLabel ? 'relative' : 'relative mt-2', children: [(0, jsx_runtime_1.jsx)(react_datepicker_1.default, { autoComplete: 'off', calendarClassName: 'ps-floating-panel ps-datepicker', className: 'ps-input-control ps-focus-ring min-h-11 w-full pr-10 text-sm font-semibold', dateFormat: [...ps_date_input_config_1.PsDateInputConfig.inputFormats], disabled: disabled, id: inputId, maxDate: ps_date_input_service_1.PsDateInputService.parseBound(max), minDate: ps_date_input_service_1.PsDateInputService.parseBound(min), onChange: handleChange, placeholderText: placeholder, popperClassName: 'ps-datepicker-popper', popperPlacement: 'bottom-start', popperProps: { strategy: 'fixed' }, portalId: portalId, renderCustomHeader: (headerProps) => (0, jsx_runtime_1.jsx)(ps_calendar_header_1.PsCalendarHeader, { ...headerProps }), required: required, selected: ps_date_input_service_1.PsDateInputService.parse(currentValue), showPopperArrow: false, wrapperClassName: 'block w-full' }), (0, jsx_runtime_1.jsx)(ps_icons_1.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: ps_icons_1.PsIconKey.Calendar }), name ? (0, jsx_runtime_1.jsx)("input", { name: name, type: 'hidden', value: currentValue }) : null] }), helperText ? (0, jsx_runtime_1.jsx)("span", { className: 'ps-input-helper', children: helperText }) : null] }));
 };
 exports.PsDateInput = PsDateInput;

package/dist/components/ps-email-input.d.ts

@@ -0,0 +1,3 @@
+import { type PsTextInputProps } from './ps-text-input';
+export type PsEmailInputProps = Omit<PsTextInputProps, 'type' | 'inputMode'>;
+export declare const PsEmailInput: ({ onBlur, onChange, ...props }: PsEmailInputProps) => import("react").JSX.Element;

package/dist/components/ps-email-input.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsEmailInput = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ps_text_format_service_1 = require("../services/ps-text-format-service");
+const ps_text_input_1 = require("./ps-text-input");
+const PsEmailInput = ({ onBlur, onChange, ...props }) => ((0, jsx_runtime_1.jsx)(ps_text_input_1.PsTextInput, { ...props, autoCapitalize: 'none', autoComplete: 'email', inputMode: 'email', onBlur: (event) => {
+        const formatted = ps_text_format_service_1.PsTextFormatService.email(event.target.value);
+        if (formatted !== event.target.value) {
+            event.target.value = formatted;
+            if (onChange)
+                onChange(event);
+        }
+        if (onBlur)
+            onBlur(event);
+    }, onChange: onChange, spellCheck: false, type: 'email' }));
+exports.PsEmailInput = PsEmailInput;

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

@@ -7,6 +7,7 @@ const ps_core_components_1 = require("@pallasoft/ps-core-components");
 const ps_design_system_1 = require("@pallasoft/ps-design-system");
 const ps_icons_1 = require("@pallasoft/ps-icons");
 const react_aria_components_1 = require("react-aria-components");
+const ps_required_mark_1 = require("./ps-required-mark");
 const ps_select_option_item_1 = require("./ps-select-option-item");
 const PsMultiSelectInput = ({ className, defaultValue, disabled, helperText, hideLabel, label, name, onChange, options, placeholder = 'Select options', required, value, }) => {
     const [uncontrolledValue, setUncontrolledValue] = (0, react_1.useState)(defaultValue === undefined ? [] : defaultValue);
@@ -19,8 +20,8 @@ const PsMultiSelectInput = ({ className, defaultValue, disabled, helperText, hid
             setUncontrolledValue(nextValue);
         onChange?.(nextValue);
     };
-    return ((0, jsx_runtime_1.jsxs)(react_aria_components_1.Select, { "aria-label": hideLabel ? label : undefined, className: ps_design_system_1.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 : (0, jsx_runtime_1.jsx)(react_aria_components_1.Label, { className: 'ps-input-label block', children: label }), (0, jsx_runtime_1.jsxs)(react_aria_components_1.Button, { className: ps_design_system_1.PallasoftClassNameService.merge('ps-input-control ps-focus-ring relative flex min-h-11 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: [(0, jsx_runtime_1.jsx)(react_aria_components_1.SelectValue, { className: 'flex min-w-0 flex-1 flex-wrap gap-1.5', children: ({ isPlaceholder }) => isPlaceholder ? ((0, jsx_runtime_1.jsx)("span", { className: 'font-medium text-ink/45', children: placeholder })) : (currentValue
+    return ((0, jsx_runtime_1.jsxs)(react_aria_components_1.Select, { "aria-label": hideLabel ? label : undefined, className: ps_design_system_1.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 : ((0, jsx_runtime_1.jsxs)(react_aria_components_1.Label, { className: 'ps-input-label block', children: [label, (0, jsx_runtime_1.jsx)(ps_required_mark_1.PsRequiredMark, { isRequired: required })] })), (0, jsx_runtime_1.jsxs)(react_aria_components_1.Button, { className: ps_design_system_1.PallasoftClassNameService.merge('ps-input-control ps-focus-ring relative flex min-h-11 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: [(0, jsx_runtime_1.jsx)(react_aria_components_1.SelectValue, { className: 'flex min-w-0 flex-1 flex-wrap gap-1.5', children: ({ isPlaceholder }) => isPlaceholder ? ((0, jsx_runtime_1.jsx)("span", { className: 'font-medium text-ink/45', children: placeholder })) : (currentValue
                             .filter((selected) => labelByValue.has(selected))
-                            .map((selected) => ((0, jsx_runtime_1.jsx)("span", { className: 'inline-flex max-w-full items-center rounded-full bg-primary/12 px-2.5 py-0.5 text-xs font-semibold text-ink', children: (0, jsx_runtime_1.jsx)("span", { className: 'truncate', children: labelByValue.get(selected) }) }, selected)))) }), (0, jsx_runtime_1.jsx)(ps_icons_1.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: ps_icons_1.PsIconKey.Chevron })] }), helperText ? ((0, jsx_runtime_1.jsx)(react_aria_components_1.Text, { className: 'ps-input-helper', slot: 'description', children: helperText })) : null, (0, jsx_runtime_1.jsx)(react_aria_components_1.Popover, { className: 'ps-floating-panel ps-scrollbar max-h-72 min-w-[var(--trigger-width)] overflow-y-auto p-1.5 outline-none', offset: 6, placement: 'bottom start', style: { zIndex }, children: (0, jsx_runtime_1.jsx)(react_aria_components_1.ListBox, { className: 'outline-none', items: options.map((option) => ({ ...option, id: option.value })), children: (option) => (0, jsx_runtime_1.jsx)(ps_select_option_item_1.PsSelectOptionItem, { option: option }) }) })] }));
+                            .map((selected) => ((0, jsx_runtime_1.jsx)("span", { className: 'inline-flex max-w-full items-center rounded-full bg-primary/12 px-2.5 py-0.5 text-xs font-semibold text-ink', children: (0, jsx_runtime_1.jsx)("span", { className: 'truncate', children: labelByValue.get(selected) }) }, selected)))) }), (0, jsx_runtime_1.jsx)(ps_icons_1.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: ps_icons_1.PsIconKey.Chevron })] }), helperText ? ((0, jsx_runtime_1.jsx)(react_aria_components_1.Text, { className: 'ps-input-helper', slot: 'description', children: helperText })) : null, (0, jsx_runtime_1.jsx)(react_aria_components_1.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: (0, jsx_runtime_1.jsx)(react_aria_components_1.ListBox, { className: 'outline-none', items: options.map((option) => ({ ...option, id: option.value })), children: (option) => (0, jsx_runtime_1.jsx)(ps_select_option_item_1.PsSelectOptionItem, { option: option }) }) })] }));
 };
 exports.PsMultiSelectInput = PsMultiSelectInput;

package/dist/components/ps-percent-input.d.ts

@@ -0,0 +1,3 @@
+import { type PsTextInputProps } from './ps-text-input';
+export type PsPercentInputProps = Omit<PsTextInputProps, 'type' | 'inputMode'>;
+export declare const PsPercentInput: ({ className, onChange, ...props }: PsPercentInputProps) => import("react").JSX.Element;

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

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsPercentInput = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ps_design_system_1 = require("@pallasoft/ps-design-system");
+const ps_text_format_config_1 = require("../constants/ps-text-format-config");
+const ps_amount_input_service_1 = require("../services/ps-amount-input-service");
+const ps_text_input_1 = require("./ps-text-input");
+const PsPercentInput = ({ className, onChange, ...props }) => ((0, jsx_runtime_1.jsxs)("div", { className: 'relative', children: [(0, jsx_runtime_1.jsx)(ps_text_input_1.PsTextInput, { ...props, autoComplete: 'off', className: ps_design_system_1.PallasoftClassNameService.merge('pr-8', className), inputMode: 'decimal', onChange: (event) => {
+                const normalised = ps_amount_input_service_1.PsAmountInputService.normalise(event.target.value);
+                if (normalised !== event.target.value)
+                    event.target.value = normalised;
+                if (onChange)
+                    onChange(event);
+            }, type: 'text' }), (0, jsx_runtime_1.jsx)("span", { "aria-hidden": 'true', className: 'pointer-events-none absolute right-3 bottom-3 text-sm text-ink/50', children: ps_text_format_config_1.PsTextFormatConfig.percentSuffix })] }));
+exports.PsPercentInput = PsPercentInput;

package/dist/components/ps-phone-input.d.ts

@@ -0,0 +1,14 @@
+export interface PsPhoneInputProps {
+    className?: string;
+    defaultCountry?: string;
+    disabled?: boolean;
+    helperText?: string;
+    hideLabel?: boolean;
+    label: string;
+    name?: string;
+    onBlur?: () => void;
+    onChange: (value: string) => void;
+    required?: boolean;
+    value: string;
+}
+export declare const PsPhoneInput: ({ className, defaultCountry, disabled, helperText, hideLabel, label, name, onBlur, onChange, required, value, }: PsPhoneInputProps) => import("react").JSX.Element;

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

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsPhoneInput = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ps_core_components_1 = require("@pallasoft/ps-core-components");
+const ps_design_system_1 = require("@pallasoft/ps-design-system");
+const ps_icons_1 = require("@pallasoft/ps-icons");
+const react_aria_components_1 = require("react-aria-components");
+const ps_phone_input_config_1 = require("../constants/ps-phone-input-config");
+const ps_phone_input_service_1 = require("../services/ps-phone-input-service");
+const ps_required_mark_1 = require("./ps-required-mark");
+const PsPhoneInput = ({ className, defaultCountry = ps_phone_input_config_1.PsPhoneInputConfig.defaultCountry, disabled, helperText, hideLabel, label, name, onBlur, onChange, required, value, }) => {
+    const inputId = (0, react_1.useId)();
+    const zIndex = (0, ps_core_components_1.usePsLayerZIndex)(ps_design_system_1.PallasoftZIndex.Dropdown);
+    const initial = ps_phone_input_service_1.PsPhoneInputService.display(value, defaultCountry);
+    const [country, setCountry] = (0, react_1.useState)(initial.country);
+    const [national, setNational] = (0, react_1.useState)(initial.national);
+    const [isTouched, setIsTouched] = (0, react_1.useState)(false);
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const [query, setQuery] = (0, react_1.useState)('');
+    const countries = (0, react_1.useMemo)(() => ps_phone_input_service_1.PsPhoneInputService.countries(defaultCountry), [defaultCountry]);
+    const matches = (0, react_1.useMemo)(() => ps_phone_input_service_1.PsPhoneInputService.search(countries, query), [countries, query]);
+    (0, react_1.useEffect)(() => {
+        if (ps_phone_input_service_1.PsPhoneInputService.toStored(national, country) === value)
+            return;
+        const next = ps_phone_input_service_1.PsPhoneInputService.display(value, country);
+        setCountry(next.country);
+        setNational(next.national);
+    }, [value]);
+    const emit = (nextNational, nextCountry) => onChange(ps_phone_input_service_1.PsPhoneInputService.toStored(nextNational, nextCountry));
+    const isInvalid = isTouched && !ps_phone_input_service_1.PsPhoneInputService.isValid(national, country);
+    const choose = (code) => {
+        setCountry(code);
+        setIsOpen(false);
+        setQuery('');
+        emit(national, code);
+        document.getElementById(inputId)?.focus();
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: ps_design_system_1.PallasoftClassNameService.merge('block', className), children: [(0, jsx_runtime_1.jsxs)("label", { className: hideLabel ? 'sr-only' : 'ps-input-label', htmlFor: inputId, children: [label, (0, jsx_runtime_1.jsx)(ps_required_mark_1.PsRequiredMark, { isRequired: required })] }), (0, jsx_runtime_1.jsxs)("div", { className: ps_design_system_1.PallasoftClassNameService.merge('ps-input-control flex min-h-11 items-stretch overflow-hidden p-0 focus-within:border-primary', hideLabel ? '' : 'mt-2', isInvalid ? 'border-danger bg-danger/5' : '', disabled ? 'opacity-60' : ''), children: [(0, jsx_runtime_1.jsxs)(react_aria_components_1.DialogTrigger, { isOpen: isOpen, onOpenChange: setIsOpen, children: [(0, jsx_runtime_1.jsxs)(react_aria_components_1.Button, { "aria-label": ps_phone_input_config_1.PsPhoneInputConfig.countryLabel, className: 'ps-focus-ring flex shrink-0 items-center gap-1.5 border-r border-line px-3 text-sm font-semibold text-ink', isDisabled: disabled, children: [country, (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'block h-3.5 w-3.5 text-ink/45', iconKey: ps_icons_1.PsIconKey.Chevron })] }), (0, jsx_runtime_1.jsx)(react_aria_components_1.Popover, { className: 'ps-floating-panel w-72 outline-none', offset: 6, placement: 'bottom start', style: { zIndex }, children: (0, jsx_runtime_1.jsxs)(react_aria_components_1.Dialog, { "aria-label": ps_phone_input_config_1.PsPhoneInputConfig.countryLabel, className: 'flex flex-col outline-none', children: [(0, jsx_runtime_1.jsx)("div", { className: 'border-b border-line p-2', children: (0, jsx_runtime_1.jsx)("input", { "aria-label": ps_phone_input_config_1.PsPhoneInputConfig.searchPlaceholder, autoFocus: true, className: 'ps-input-control ps-focus-ring h-10 w-full text-sm', onChange: (event) => setQuery(event.target.value), placeholder: ps_phone_input_config_1.PsPhoneInputConfig.searchPlaceholder, type: 'search', value: query }) }), (0, jsx_runtime_1.jsx)("ul", { className: 'ps-scrollbar-hidden max-h-64 overflow-y-auto p-1.5', role: 'listbox', children: matches.length === 0 ? ((0, jsx_runtime_1.jsx)("li", { className: 'px-3 py-2.5 text-sm text-ink/50', children: ps_phone_input_config_1.PsPhoneInputConfig.emptyMessage })) : (matches.map((option) => ((0, jsx_runtime_1.jsx)("li", { role: 'none', children: (0, jsx_runtime_1.jsxs)("button", { "aria-selected": option.code === country, className: ps_design_system_1.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: [(0, jsx_runtime_1.jsx)("span", { className: 'min-w-0 truncate', children: ps_phone_input_service_1.PsPhoneInputService.highlight(option.label, query).map((part, index) => part.isMatch ? ((0, jsx_runtime_1.jsx)("strong", { className: 'font-semibold text-ink', children: part.text }, index)) : ((0, jsx_runtime_1.jsx)("span", { children: part.text }, index))) }), (0, jsx_runtime_1.jsxs)("span", { className: 'shrink-0 text-xs text-ink/50', children: ["+", option.callingCode] })] }) }, option.code)))) })] }) })] }), (0, jsx_runtime_1.jsxs)("span", { "aria-hidden": 'true', className: 'flex items-center pl-3 text-sm text-ink/45', children: [ps_phone_input_config_1.PsPhoneInputConfig.plus, ps_phone_input_service_1.PsPhoneInputService.callingCode(country)] }), (0, jsx_runtime_1.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();
+                        }, onChange: (event) => {
+                            const isDeleting = event.target.value.length < national.length;
+                            const next = isDeleting
+                                ? event.target.value
+                                : ps_phone_input_service_1.PsPhoneInputService.format(event.target.value, country);
+                            setNational(next);
+                            emit(next, country);
+                        }, required: required, type: 'tel', value: national })] }), isInvalid ? ((0, jsx_runtime_1.jsx)("span", { className: 'ps-input-helper text-danger', children: ps_phone_input_config_1.PsPhoneInputConfig.invalidMessage })) : helperText ? ((0, jsx_runtime_1.jsx)("span", { className: 'ps-input-helper', children: helperText })) : null] }));
+};
+exports.PsPhoneInput = PsPhoneInput;

package/dist/components/ps-postal-code-input.d.ts

@@ -0,0 +1,5 @@
+import { type PsTextInputProps } from './ps-text-input';
+export interface PsPostalCodeInputProps extends Omit<PsTextInputProps, 'type' | 'maxLength'> {
+    country: string;
+}
+export declare const PsPostalCodeInput: ({ country, onChange, ...props }: PsPostalCodeInputProps) => import("react").JSX.Element;

package/dist/components/ps-postal-code-input.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsPostalCodeInput = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ps_postal_code_service_1 = require("../services/ps-postal-code-service");
+const ps_text_input_1 = require("./ps-text-input");
+const PsPostalCodeInput = ({ country, onChange, ...props }) => ((0, jsx_runtime_1.jsx)(ps_text_input_1.PsTextInput, { ...props, autoComplete: 'postal-code', autoCapitalize: 'characters', maxLength: ps_postal_code_service_1.PsPostalCodeService.maxLength(country), onChange: (event) => {
+        const formatted = ps_postal_code_service_1.PsPostalCodeService.format(event.target.value, country);
+        if (formatted !== event.target.value)
+            event.target.value = formatted;
+        if (onChange)
+            onChange(event);
+    }, type: 'text' }));
+exports.PsPostalCodeInput = PsPostalCodeInput;

package/dist/components/ps-required-mark.d.ts

@@ -0,0 +1,4 @@
+export interface PsRequiredMarkProps {
+    isRequired?: boolean;
+}
+export declare const PsRequiredMark: ({ isRequired }: PsRequiredMarkProps) => import("react").JSX.Element | null;

package/dist/components/ps-required-mark.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsRequiredMark = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const PsRequiredMark = ({ isRequired }) => isRequired ? ((0, jsx_runtime_1.jsx)("span", { "aria-hidden": 'true', className: 'ml-0.5 text-danger', children: "*" })) : null;
+exports.PsRequiredMark = PsRequiredMark;

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

@@ -8,6 +8,7 @@ const ps_design_system_1 = require("@pallasoft/ps-design-system");
 const ps_icons_1 = require("@pallasoft/ps-icons");
 const react_aria_components_1 = require("react-aria-components");
 const ps_select_input_service_1 = require("../services/ps-select-input-service");
+const ps_required_mark_1 = require("./ps-required-mark");
 const ps_select_option_item_1 = require("./ps-select-option-item");
 const PsSelectInput = ({ className, defaultValue, disabled, helperText, hideLabel, label, name, onChange, options, placeholder = 'Select an option', required, value, }) => {
     const [uncontrolledValue, setUncontrolledValue] = (0, react_1.useState)(() => ps_select_input_service_1.PsSelectInputService.getDefaultValue(defaultValue, options));
@@ -20,6 +21,6 @@ const PsSelectInput = ({ className, defaultValue, disabled, helperText, hideLabe
             setUncontrolledValue(nextValue);
         onChange?.(nextValue);
     };
-    return ((0, jsx_runtime_1.jsxs)(react_aria_components_1.Select, { "aria-label": hideLabel ? label : undefined, className: ps_design_system_1.PallasoftClassNameService.merge('block', className), isDisabled: disabled, isRequired: required, name: name, onChange: handleChange, placeholder: placeholder, value: hasOption ? currentValue : null, children: [hideLabel ? null : (0, jsx_runtime_1.jsx)(react_aria_components_1.Label, { className: 'ps-input-label block', children: label }), (0, jsx_runtime_1.jsxs)(react_aria_components_1.Button, { className: ps_design_system_1.PallasoftClassNameService.merge('ps-input-control ps-focus-ring relative flex min-h-11 w-full items-center pr-10 text-left text-sm font-semibold disabled:cursor-not-allowed disabled:opacity-60', hideLabel ? '' : 'mt-2'), children: [(0, jsx_runtime_1.jsx)(react_aria_components_1.SelectValue, { className: 'min-w-0 flex-1 truncate', children: ({ isPlaceholder, selectedText }) => isPlaceholder ? ((0, jsx_runtime_1.jsx)("span", { className: 'font-medium text-ink/45', children: placeholder })) : (selectedText) }), (0, jsx_runtime_1.jsx)(ps_icons_1.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: ps_icons_1.PsIconKey.Chevron })] }), helperText ? ((0, jsx_runtime_1.jsx)(react_aria_components_1.Text, { className: 'ps-input-helper', slot: 'description', children: helperText })) : null, (0, jsx_runtime_1.jsx)(react_aria_components_1.Popover, { className: 'ps-floating-panel ps-scrollbar max-h-72 min-w-[var(--trigger-width)] overflow-y-auto p-1.5 outline-none', offset: 6, placement: 'bottom start', style: { zIndex }, children: (0, jsx_runtime_1.jsx)(react_aria_components_1.ListBox, { className: 'outline-none', items: options.map((option) => ({ ...option, id: option.value })), children: (option) => (0, jsx_runtime_1.jsx)(ps_select_option_item_1.PsSelectOptionItem, { option: option }) }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_aria_components_1.Select, { "aria-label": hideLabel ? label : undefined, className: ps_design_system_1.PallasoftClassNameService.merge('block', className), isDisabled: disabled, isRequired: required, name: name, onChange: handleChange, placeholder: placeholder, value: hasOption ? currentValue : null, children: [hideLabel ? null : ((0, jsx_runtime_1.jsxs)(react_aria_components_1.Label, { className: 'ps-input-label block', children: [label, (0, jsx_runtime_1.jsx)(ps_required_mark_1.PsRequiredMark, { isRequired: required })] })), (0, jsx_runtime_1.jsxs)(react_aria_components_1.Button, { className: ps_design_system_1.PallasoftClassNameService.merge('ps-input-control ps-focus-ring relative flex min-h-11 w-full items-center pr-10 text-left text-sm font-semibold disabled:cursor-not-allowed disabled:opacity-60', hideLabel ? '' : 'mt-2'), children: [(0, jsx_runtime_1.jsx)(react_aria_components_1.SelectValue, { className: 'min-w-0 flex-1 truncate', children: ({ isPlaceholder, selectedText }) => isPlaceholder ? ((0, jsx_runtime_1.jsx)("span", { className: 'font-medium text-ink/45', children: placeholder })) : (selectedText) }), (0, jsx_runtime_1.jsx)(ps_icons_1.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: ps_icons_1.PsIconKey.Chevron })] }), helperText ? ((0, jsx_runtime_1.jsx)(react_aria_components_1.Text, { className: 'ps-input-helper', slot: 'description', children: helperText })) : null, (0, jsx_runtime_1.jsx)(react_aria_components_1.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: (0, jsx_runtime_1.jsx)(react_aria_components_1.ListBox, { className: 'outline-none', items: options.map((option) => ({ ...option, id: option.value })), children: (option) => (0, jsx_runtime_1.jsx)(ps_select_option_item_1.PsSelectOptionItem, { option: option }) }) })] }));
 };
 exports.PsSelectInput = PsSelectInput;

package/dist/components/ps-text-area-input.d.ts

@@ -4,4 +4,4 @@ export interface PsTextAreaInputProps extends TextareaHTMLAttributes<HTMLTextAre
     hideLabel?: boolean;
     label: string;
 }
-export declare const PsTextAreaInput: ({ className, helperText, hideLabel, label, rows, ...props }: PsTextAreaInputProps) => import("react").JSX.Element;
+export declare const PsTextAreaInput: ({ className, helperText, hideLabel, label, required, rows, ...props }: PsTextAreaInputProps) => import("react").JSX.Element;

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

@@ -3,5 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PsTextAreaInput = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const ps_design_system_1 = require("@pallasoft/ps-design-system");
-const PsTextAreaInput = ({ className, helperText, hideLabel, label, rows = 4, ...props }) => ((0, jsx_runtime_1.jsxs)("label", { className: 'block', children: [(0, jsx_runtime_1.jsx)("span", { className: hideLabel ? 'sr-only' : 'ps-input-label', children: label }), (0, jsx_runtime_1.jsx)("textarea", { className: ps_design_system_1.PallasoftClassNameService.merge(hideLabel ? 'ps-input-control' : 'ps-input-control mt-2', 'min-h-24 resize-y leading-6', className), rows: rows, ...props }), helperText ? (0, jsx_runtime_1.jsx)("span", { className: 'ps-input-helper', children: helperText }) : null] }));
+const ps_required_mark_1 = require("./ps-required-mark");
+const PsTextAreaInput = ({ className, helperText, hideLabel, label, required, rows = 4, ...props }) => ((0, jsx_runtime_1.jsxs)("label", { className: 'block', children: [(0, jsx_runtime_1.jsxs)("span", { className: hideLabel ? 'sr-only' : 'ps-input-label', children: [label, (0, jsx_runtime_1.jsx)(ps_required_mark_1.PsRequiredMark, { isRequired: required })] }), (0, jsx_runtime_1.jsx)("textarea", { className: ps_design_system_1.PallasoftClassNameService.merge(hideLabel ? 'ps-input-control' : 'ps-input-control mt-2', 'min-h-24 resize-y leading-6', className), required: required, rows: rows, ...props }), helperText ? (0, jsx_runtime_1.jsx)("span", { className: 'ps-input-helper', children: helperText }) : null] }));
 exports.PsTextAreaInput = PsTextAreaInput;

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

@@ -4,12 +4,13 @@ exports.PsTextInput = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const ps_design_system_1 = require("@pallasoft/ps-design-system");
 const ps_date_input_1 = require("./ps-date-input");
+const ps_required_mark_1 = require("./ps-required-mark");
 const PsTextInput = ({ className, defaultValue, disabled, helperText, hideLabel, label, name, onChange, required, type, value, ...props }) => {
     if (type === 'date') {
         return ((0, jsx_runtime_1.jsx)(ps_date_input_1.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 }));
     }
-    return ((0, jsx_runtime_1.jsxs)("label", { className: 'block', children: [(0, jsx_runtime_1.jsx)("span", { className: hideLabel ? 'sr-only' : 'ps-input-label', children: label }), (0, jsx_runtime_1.jsx)("input", { className: ps_design_system_1.PallasoftClassNameService.merge(hideLabel ? 'ps-input-control' : 'ps-input-control mt-2', className), defaultValue: defaultValue, disabled: disabled, name: name, onChange: onChange, required: required, type: type, value: value, ...props }), helperText ? (0, jsx_runtime_1.jsx)("span", { className: 'ps-input-helper', children: helperText }) : null] }));
+    return ((0, jsx_runtime_1.jsxs)("label", { className: 'block', children: [(0, jsx_runtime_1.jsxs)("span", { className: hideLabel ? 'sr-only' : 'ps-input-label', children: [label, (0, jsx_runtime_1.jsx)(ps_required_mark_1.PsRequiredMark, { isRequired: required })] }), (0, jsx_runtime_1.jsx)("input", { className: ps_design_system_1.PallasoftClassNameService.merge(hideLabel ? 'ps-input-control' : 'ps-input-control mt-2', className), defaultValue: defaultValue, disabled: disabled, name: name, onChange: onChange, required: required, type: type, value: value, ...props }), helperText ? (0, jsx_runtime_1.jsx)("span", { className: 'ps-input-helper', children: helperText }) : null] }));
 };
 exports.PsTextInput = PsTextInput;

package/dist/components/ps-url-input.d.ts

@@ -0,0 +1,3 @@
+import { type PsTextInputProps } from './ps-text-input';
+export type PsUrlInputProps = Omit<PsTextInputProps, 'type' | 'inputMode'>;
+export declare const PsUrlInput: ({ onBlur, onChange, ...props }: PsUrlInputProps) => import("react").JSX.Element;

package/dist/components/ps-url-input.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsUrlInput = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ps_text_format_service_1 = require("../services/ps-text-format-service");
+const ps_text_input_1 = require("./ps-text-input");
+const PsUrlInput = ({ onBlur, onChange, ...props }) => ((0, jsx_runtime_1.jsx)(ps_text_input_1.PsTextInput, { ...props, autoCapitalize: 'none', autoComplete: 'url', inputMode: 'url', onBlur: (event) => {
+        const formatted = ps_text_format_service_1.PsTextFormatService.url(event.target.value);
+        if (formatted !== event.target.value) {
+            event.target.value = formatted;
+            if (onChange)
+                onChange(event);
+        }
+        if (onBlur)
+            onBlur(event);
+    }, onChange: onChange, spellCheck: false, type: 'text' }));
+exports.PsUrlInput = PsUrlInput;

package/dist/constants/ps-phone-input-config.d.ts

@@ -0,0 +1,10 @@
+export declare const PsPhoneInputConfig: {
+    readonly countryLabel: "Country";
+    readonly defaultCountry: "CA";
+    readonly displayNamesType: "region";
+    readonly emptyMessage: "No country matches that";
+    readonly invalidMessage: "Check this number for the country chosen.";
+    readonly locale: "en";
+    readonly plus: "+";
+    readonly searchPlaceholder: "Search for a country";
+};

package/dist/constants/ps-phone-input-config.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsPhoneInputConfig = void 0;
+exports.PsPhoneInputConfig = {
+    countryLabel: 'Country',
+    defaultCountry: 'CA',
+    displayNamesType: 'region',
+    emptyMessage: 'No country matches that',
+    invalidMessage: 'Check this number for the country chosen.',
+    locale: 'en',
+    plus: '+',
+    searchPlaceholder: 'Search for a country',
+};

package/dist/constants/ps-postal-code-formats.d.ts

@@ -0,0 +1,5 @@
+import { PsPostalCodeFormat } from '../interfaces/ps-postal-code-format';
+export declare const PsPostalCodeFormats: Record<string, PsPostalCodeFormat>;
+export declare const PsPostalCodeConfig: {
+    readonly fallbackAllowed: RegExp;
+};

package/dist/constants/ps-postal-code-formats.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsPostalCodeConfig = exports.PsPostalCodeFormats = void 0;
+exports.PsPostalCodeFormats = {
+    CA: { allowed: /[^A-Z0-9]/g, groups: [3, 3], separator: ' ' },
+    GB: { allowed: /[^A-Z0-9]/g, groups: [], separator: ' ' },
+    IN: { allowed: /[^0-9]/g, groups: [6], separator: '' },
+    NL: { allowed: /[^A-Z0-9]/g, groups: [4, 2], separator: ' ' },
+    US: { allowed: /[^0-9]/g, groups: [5, 4], separator: '-' },
+};
+exports.PsPostalCodeConfig = {
+    fallbackAllowed: /[^A-Z0-9 -]/g,
+};

package/dist/constants/ps-text-format-config.d.ts

@@ -0,0 +1,6 @@
+export declare const PsTextFormatConfig: {
+    readonly httpsPrefix: "https://";
+    readonly percentSuffix: "%";
+    readonly schemePattern: RegExp;
+    readonly whitespace: RegExp;
+};

package/dist/constants/ps-text-format-config.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsTextFormatConfig = void 0;
+exports.PsTextFormatConfig = {
+    httpsPrefix: 'https://',
+    percentSuffix: '%',
+    schemePattern: /^[a-z][a-z0-9+.-]*:\/\//i,
+    whitespace: /\s+/g,
+};

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

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PsAmountInputService } from '../services/ps-amount-input-service';
+import { PsTextInput } from './ps-text-input';
+export const PsAmountInput = ({ className, onChange, ...props }) => (_jsx(PsTextInput, { ...props, autoComplete: 'off', className: className, inputMode: 'decimal', onChange: (event) => {
+        const normalised = PsAmountInputService.normalise(event.target.value);
+        if (normalised !== event.target.value)
+            event.target.value = normalised;
+        if (onChange)
+            onChange(event);
+    }, type: 'text' }));

package/dist/esm/components/ps-calendar-header.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PsIcon, PsIconKey } from '@pallasoft/ps-icons';
+import { PsDateInputService } from '../services/ps-date-input-service';
+const navigationButtonClassName = 'ps-focus-ring flex h-8 w-8 items-center justify-center rounded-lg text-ink/60 transition-colors hover:bg-primary/10 hover:text-ink disabled:cursor-not-allowed disabled:opacity-30';
+export const PsCalendarHeader = ({ decreaseMonth, increaseMonth, monthDate, nextMonthButtonDisabled, prevMonthButtonDisabled, }) => (_jsxs("div", { className: 'flex items-center justify-between gap-2 px-1', children: [_jsx("button", { "aria-label": 'Previous month', className: navigationButtonClassName, disabled: prevMonthButtonDisabled, onClick: decreaseMonth, type: 'button', children: _jsx(PsIcon, { "aria-hidden": 'true', className: 'block h-4 w-4 rotate-180', iconKey: PsIconKey.ChevronRight }) }), _jsx("p", { "aria-live": 'polite', className: 'text-sm font-semibold text-ink', children: PsDateInputService.monthLabel(monthDate) }), _jsx("button", { "aria-label": 'Next month', className: navigationButtonClassName, disabled: nextMonthButtonDisabled, onClick: increaseMonth, type: 'button', children: _jsx(PsIcon, { "aria-hidden": 'true', className: 'block h-4 w-4', iconKey: PsIconKey.ChevronRight }) })] }));

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

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import { usePsLayerZIndex } from '@pallasoft/ps-core-components';
+import { PallasoftClassNameService, PallasoftZIndex } from '@pallasoft/ps-design-system';
+import { PsIcon, PsIconKey } from '@pallasoft/ps-icons';
+import { Button, Dialog, DialogTrigger, Popover } from 'react-aria-components';
+import { PsCascaderService } from '../services/ps-cascader-service';
+import { PsRequiredMark } from './ps-required-mark';
+export const PsCascaderInput = ({ className, disabled, groups, helperText, hideLabel, label, onChange, placeholder = 'Select an option', required, searchPlaceholder = 'Search', value, }) => {
+    const zIndex = usePsLayerZIndex(PallasoftZIndex.Dropdown);
+    const [isOpen, setIsOpen] = useState(false);
+    const [query, setQuery] = useState('');
+    const [activeGroupKey, setActiveGroupKey] = useState(null);
+    const selected = useMemo(() => PsCascaderService.findSelected(groups, value), [groups, value]);
+    const matches = useMemo(() => PsCascaderService.search(groups, query), [groups, query]);
+    const activeGroup = useMemo(() => {
+        const key = activeGroupKey
+            ? activeGroupKey
+            : selected
+                ? selected.group.key
+                : groups.length > 0
+                    ? groups[0].key
+                    : null;
+        return groups.find((group) => group.key === key) ?? null;
+    }, [activeGroupKey, groups, selected]);
+    const open = (nextOpen) => {
+        setIsOpen(nextOpen);
+        if (!nextOpen)
+            return;
+        setQuery('');
+        setActiveGroupKey(selected ? selected.group.key : null);
+    };
+    const select = (nextValue, close) => {
+        onChange(nextValue);
+        close();
+    };
+    const renderOption = (option, groupLabel, close) => (_jsxs("button", { "aria-selected": option.value === value, className: PallasoftClassNameService.merge('ps-focus-ring flex w-full items-start gap-2 rounded-ps-control px-3 py-2.5 text-left text-sm font-medium transition-colors', option.value === value
+            ? 'bg-primary/10 text-ink'
+            : 'text-ink/80 hover:bg-mist/60 hover:text-ink'), onClick: () => select(option.value, close), role: 'option', type: 'button', children: [_jsx("span", { className: 'flex h-5 w-4 shrink-0 items-center justify-center text-primary', children: option.value === value ? (_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 }), groupLabel ? (_jsx("span", { className: 'mt-0.5 block truncate text-xs font-normal text-ink/50', children: groupLabel })) : null, option.description ? (_jsx("span", { className: 'mt-0.5 block truncate text-xs font-normal text-ink/55', children: option.description })) : null] })] }, option.value));
+    return (_jsxs("div", { className: PallasoftClassNameService.merge('block', className), children: [hideLabel ? null : (_jsxs("span", { className: 'ps-input-label block', children: [label, _jsx(PsRequiredMark, { isRequired: required })] })), _jsxs(DialogTrigger, { isOpen: isOpen, onOpenChange: open, children: [_jsxs(Button, { "aria-label": hideLabel ? label : undefined, className: PallasoftClassNameService.merge('ps-input-control ps-focus-ring relative flex min-h-11 w-full items-center pr-10 text-left text-sm font-semibold disabled:cursor-not-allowed disabled:opacity-60', hideLabel ? '' : 'mt-2'), isDisabled: disabled, children: [_jsx("span", { className: 'min-w-0 flex-1 truncate', children: selected ? (_jsxs(_Fragment, { children: [_jsx("span", { className: 'truncate', children: selected.option.label }), _jsx("span", { className: 'ml-2 text-xs font-medium text-ink/45', children: selected.group.label })] })) : (_jsx("span", { className: 'font-medium text-ink/45', children: placeholder })) }), _jsx(PsIcon, { "aria-hidden": 'true', className: 'pointer-events-none absolute top-1/2 right-3 h-4 w-4 -translate-y-1/2 text-primary', iconKey: PsIconKey.Chevron })] }), _jsx(Popover, { className: 'ps-floating-panel w-[min(calc(100vw-2rem),32rem)] min-w-[var(--trigger-width)] outline-none', offset: 6, placement: 'bottom start', style: { zIndex }, children: _jsx(Dialog, { "aria-label": label, className: 'flex flex-col outline-none', children: ({ close }) => (_jsxs(_Fragment, { children: [_jsx("div", { className: 'border-b border-line p-2', children: _jsx("input", { "aria-label": searchPlaceholder, autoFocus: true, className: 'ps-input-control ps-focus-ring h-10 w-full text-sm', onChange: (event) => setQuery(event.target.value), placeholder: searchPlaceholder, type: 'search', value: query }) }), query.trim() === '' ? (_jsxs("div", { className: 'grid grid-cols-1 sm:grid-cols-[minmax(0,11rem)_minmax(0,1fr)]', children: [_jsx("div", { className: PallasoftClassNameService.merge('ps-scrollbar-hidden max-h-72 overflow-y-auto p-1.5 sm:border-r sm:border-line', activeGroupKey && groups.length > 1 ? 'hidden sm:block' : ''), children: groups.map((group) => (_jsxs("button", { className: PallasoftClassNameService.merge('ps-focus-ring flex w-full items-center gap-2 rounded-ps-control px-3 py-2.5 text-left text-sm font-semibold transition-colors', activeGroup?.key === group.key
+                                                        ? 'bg-mist text-ink'
+                                                        : 'text-ink/70 hover:bg-mist/60 hover:text-ink'), onClick: () => setActiveGroupKey(group.key), type: 'button', children: [_jsx("span", { className: 'min-w-0 flex-1 truncate', children: group.label }), _jsx("span", { className: 'text-xs font-medium text-ink/45', children: group.options.length }), _jsx(PsIcon, { "aria-hidden": 'true', className: 'block h-4 w-4 shrink-0 -rotate-90 text-ink/35', iconKey: PsIconKey.Chevron })] }, group.key))) }), _jsxs("div", { className: PallasoftClassNameService.merge('ps-scrollbar-hidden max-h-72 overflow-y-auto p-1.5', activeGroupKey && groups.length > 1 ? '' : 'hidden sm:block'), role: 'listbox', children: [groups.length > 1 ? (_jsxs("button", { className: 'ps-focus-ring mb-1 flex w-full items-center gap-2 rounded-ps-control px-3 py-2 text-left text-xs font-semibold text-ink/60 hover:text-ink sm:hidden', onClick: () => setActiveGroupKey(null), type: 'button', children: [_jsx(PsIcon, { "aria-hidden": 'true', className: 'block h-4 w-4 rotate-90', iconKey: PsIconKey.Chevron }), "All groups"] })) : null, activeGroup
+                                                        ? activeGroup.options.map((option) => renderOption(option, null, close))
+                                                        : null] })] })) : (_jsx("div", { className: 'ps-scrollbar-hidden max-h-72 overflow-y-auto p-1.5', role: 'listbox', children: matches.length === 0 ? (_jsx("p", { className: 'px-3 py-6 text-center text-sm text-ink/55', children: "No matches." })) : (matches.map((match) => renderOption(match.option, match.group.label, close))) }))] })) }) })] }), helperText ? _jsx("span", { className: 'ps-input-helper mt-2 block', children: helperText }) : null] }));
+};

package/dist/esm/components/ps-checkbox.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
+import { PsIcon, PsIconKey } from '@pallasoft/ps-icons';
+import { Checkbox } from 'react-aria-components';
+export const PsCheckbox = ({ children, className, isDisabled, isIndeterminate, isSelected, label, name, onChange, value, }) => (_jsx(Checkbox, { "aria-label": children ? undefined : label, className: PallasoftClassNameService.merge('group inline-flex cursor-pointer items-center gap-3 text-sm text-ink outline-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-45', className), isDisabled: isDisabled, isIndeterminate: isIndeterminate, isSelected: isSelected, name: name, onChange: onChange, value: value, children: ({ isIndeterminate: showDash, isSelected: showCheck }) => (_jsxs(_Fragment, { children: [_jsx("span", { className: PallasoftClassNameService.merge('flex h-[1.125rem] w-[1.125rem] shrink-0 items-center justify-center rounded-[0.35rem] border transition-colors duration-150 group-data-[focus-visible]:outline group-data-[focus-visible]:outline-2 group-data-[focus-visible]:outline-offset-2 group-data-[focus-visible]:outline-[rgb(var(--ps-color-primary-rgb))]', showCheck || showDash
+                    ? 'border-primary bg-primary text-[color:var(--ps-color-primary-contrast)]'
+                    : 'border-line bg-surface group-hover:border-primary/60 dark:border-white/20'), children: showDash ? (_jsx("span", { className: 'block h-0.5 w-2.5 rounded-full bg-current' })) : showCheck ? (_jsx(PsIcon, { "aria-hidden": 'true', className: 'block h-3.5 w-3.5', iconKey: PsIconKey.Check, strokeWidth: 3 })) : null }), children] })) }));