@pallasoft/ps-input-components 1.10.0 → 1.11.0

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

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
+import { PsIcon, PsIconKey } from '@pallasoft/ps-icons';
+import { PsColorInputConfig } from '../constants/ps-color-input-config';
+import { PsColorPicker } from './ps-color-picker';
+import { PsRequiredMark } from './ps-required-mark';
+export const PsColorInput = ({ className, helperText, label, onChange, required, swatches = [...PsColorInputConfig.swatches], value, }) => {
+    const labelId = useId();
+    const swatchesId = useId();
+    const normalised = value.toUpperCase();
+    return (_jsxs("div", { className: PallasoftClassNameService.merge('flex flex-col gap-2', className), children: [_jsxs("span", { className: 'ps-input-label', id: labelId, children: [label, _jsx(PsRequiredMark, { isRequired: required })] }), _jsxs("div", { className: 'flex flex-col gap-4 rounded-ps-control border border-line bg-surface p-4', children: [_jsx(PsColorPicker, { hideLabel: true, label: `${label} picker`, onChange: onChange, swatches: swatches, value: value }), _jsxs("div", { className: 'flex flex-col gap-2 border-t border-line pt-4', children: [_jsx("span", { className: 'ps-input-helper', id: swatchesId, children: "Presets" }), _jsx("div", { "aria-labelledby": swatchesId, className: 'flex flex-wrap gap-2', role: 'radiogroup', children: swatches.map((swatch) => {
+                                    const isSelected = swatch.toUpperCase() === normalised;
+                                    return (_jsx("button", { "aria-checked": isSelected, "aria-label": swatch, className: 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 ? (_jsx(PsIcon, { "aria-hidden": 'true', className: 'block h-4 w-4', iconKey: PsIconKey.Check })) : null }, swatch));
+                                }) })] })] }), helperText ? _jsx("span", { className: 'ps-input-helper', children: helperText }) : null] }));
+};

package/dist/esm/components/ps-color-picker.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, 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 { PsColorInputConfig } from '../constants/ps-color-input-config';
+import { PsColorService } from '../services/ps-color-service';
+export const PsColorPicker = ({ className, disabled, helperText, hideLabel, label, onChange, swatches = [...PsColorInputConfig.swatches], value, }) => {
+    const zIndex = usePsLayerZIndex(PallasoftZIndex.Dropdown);
+    const areaRef = useRef(null);
+    const [draft, setDraft] = useState(value);
+    const hsv = useMemo(() => PsColorService.toHsv(value), [value]);
+    const swatchColor = PsColorService.normaliseHex(value);
+    useEffect(() => {
+        setDraft(value);
+    }, [value]);
+    const commitHex = (next) => {
+        const hex = PsColorService.normaliseHex(next);
+        if (hex)
+            onChange(hex);
+        else
+            setDraft(value);
+    };
+    const pickFromArea = (event) => {
+        const area = areaRef.current;
+        if (!area)
+            return;
+        const bounds = area.getBoundingClientRect();
+        const x = Math.min(Math.max(event.clientX - bounds.left, 0), bounds.width);
+        const y = Math.min(Math.max(event.clientY - bounds.top, 0), bounds.height);
+        onChange(PsColorService.toHex({
+            brightness: Math.round(100 - (y / bounds.height) * 100),
+            hue: hsv.hue,
+            saturation: Math.round((x / bounds.width) * 100),
+        }));
+    };
+    return (_jsxs("div", { className: PallasoftClassNameService.merge('flex flex-col gap-2', className), children: [hideLabel ? null : _jsx("span", { className: 'ps-input-label block', children: label }), _jsxs(DialogTrigger, { children: [_jsxs(Button, { "aria-label": hideLabel ? label : undefined, className: 'ps-input-control ps-focus-ring flex min-h-11 w-full items-center gap-3 text-left text-sm font-semibold disabled:cursor-not-allowed disabled:opacity-60', isDisabled: disabled, children: [_jsx("span", { className: 'h-6 w-6 shrink-0 rounded-md border border-line', style: { backgroundColor: swatchColor ? swatchColor : 'transparent' } }), _jsx("span", { className: 'font-mono text-sm uppercase', children: swatchColor ? swatchColor : 'Pick a colour' }), _jsx(PsIcon, { "aria-hidden": 'true', className: 'ml-auto block h-4 w-4 shrink-0 text-primary', iconKey: PsIconKey.Chevron })] }), _jsx(Popover, { className: 'ps-floating-panel w-[min(calc(100vw-2rem),18rem)] outline-none', offset: 6, placement: 'bottom start', style: { zIndex }, children: _jsxs(Dialog, { "aria-label": label, className: 'flex flex-col gap-3 p-3 outline-none', children: [_jsx("div", { className: 'relative h-36 w-full cursor-crosshair rounded-ps-control', onPointerDown: (event) => {
+                                        event.currentTarget.setPointerCapture(event.pointerId);
+                                        pickFromArea(event);
+                                    }, onPointerMove: (event) => {
+                                        if (event.buttons === 1)
+                                            pickFromArea(event);
+                                    }, ref: areaRef, role: 'presentation', style: {
+                                        background: `linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, hsl(${hsv.hue} 100% 50%))`,
+                                    }, children: _jsx("span", { "aria-hidden": 'true', className: 'pointer-events-none absolute h-4 w-4 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow', style: {
+                                            left: `${hsv.saturation}%`,
+                                            top: `${100 - hsv.brightness}%`,
+                                            backgroundColor: swatchColor ? swatchColor : 'transparent',
+                                        } }) }), _jsxs("label", { className: 'flex flex-col gap-1', children: [_jsx("span", { className: 'ps-input-helper', children: "Hue" }), _jsx("input", { className: 'ps-focus-ring h-3 w-full cursor-pointer appearance-none rounded-full', max: 360, min: 0, onChange: (event) => onChange(PsColorService.toHex({ ...hsv, hue: Number(event.target.value) })), step: 1, style: {
+                                                background: 'linear-gradient(to right, #FF0000, #FFFF00, #00FF00, #00FFFF, #0000FF, #FF00FF, #FF0000)',
+                                            }, type: 'range', value: hsv.hue })] }), _jsx("input", { "aria-label": `${label} hex`, className: 'ps-input-control ps-focus-ring h-10 w-full font-mono text-sm uppercase', maxLength: 7, onBlur: (event) => commitHex(event.target.value), onChange: (event) => setDraft(event.target.value), onKeyDown: (event) => {
+                                        if (event.key !== 'Enter')
+                                            return;
+                                        event.preventDefault();
+                                        commitHex(draft);
+                                    }, placeholder: '#000000', value: draft }), _jsx("div", { className: 'flex flex-wrap gap-1.5', children: swatches.map((swatch) => (_jsx("button", { "aria-label": swatch, className: PallasoftClassNameService.merge('ps-focus-ring h-7 w-7 rounded-full ring-offset-2 ring-offset-surface transition-shadow', swatch.toUpperCase() === (swatchColor ? swatchColor : '')
+                                            ? 'ring-2 ring-ink/70'
+                                            : 'hover:ring-2 hover:ring-ink/25'), onClick: () => onChange(swatch.toUpperCase()), style: { backgroundColor: swatch }, type: 'button' }, swatch))) })] }) })] }), helperText ? _jsx("span", { className: 'ps-input-helper', children: helperText }) : null] }));
+};

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

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PsSpinner } from '@pallasoft/ps-core-components';
+import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
+import { ComboBox, Input, Label, ListBox, ListBoxItem, Popover } from 'react-aria-components';
+import { PsComboboxInputService } from '../services/ps-combobox-input-service';
+import { PsRequiredMark } from './ps-required-mark';
+export 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 (_jsxs(ComboBox, { className: PallasoftClassNameService.merge('block', className), defaultFilter: () => true, items: items, onInputChange: onInputChange, onSelectionChange: (key) => onSelectionChange?.(key === null ? null : PsComboboxInputService.getItem(itemsByKey, key)), children: [label ? (_jsxs(Label, { className: 'ps-input-label', children: [label, _jsx(PsRequiredMark, { isRequired: required })] })) : null, _jsx("span", { className: 'relative mt-2 block', children: _jsx(Input, { className: 'ps-input-control ps-focus-ring min-h-11 w-full text-sm font-semibold', placeholder: placeholder }) }), _jsx(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 ? (_jsx("div", { className: 'flex items-center justify-center py-4', children: _jsx(PsSpinner, { label: 'Loading results', size: 'small' }) })) : (_jsx(ListBox, { className: 'max-h-72 overflow-y-auto outline-none', items: items, children: (item) => (_jsx(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) })) })) })] }));
+};

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

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, 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 DatePicker from 'react-datepicker';
+import { PsDateInputConfig } from '../constants/ps-date-input-config';
+import { PsDateInputService } from '../services/ps-date-input-service';
+import { PsCalendarHeader } from './ps-calendar-header';
+import { PsRequiredMark } from './ps-required-mark';
+export const PsDateInput = ({ className, defaultValue, disabled, helperText, hideLabel, label, max, min, name, onChange, placeholder = PsDateInputConfig.placeholder, required, value, }) => {
+    const inputId = useId();
+    const portalId = `${PsDateInputConfig.portalId}-${inputId.replace(/:/g, '')}`;
+    const zIndex = usePsLayerZIndex(PallasoftZIndex.Dropdown);
+    const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue === undefined ? '' : defaultValue);
+    const currentValue = value === undefined ? uncontrolledValue : value;
+    useEffect(() => {
+        const existing = document.getElementById(portalId);
+        const container = existing ? existing : document.createElement('div');
+        container.id = portalId;
+        container.setAttribute(PsDateInputConfig.topLayerAttribute, 'true');
+        container.style.position = 'relative';
+        container.style.zIndex = String(zIndex);
+        if (!existing)
+            document.body.appendChild(container);
+        return () => container.remove();
+    }, [portalId, zIndex]);
+    const handleChange = (date) => {
+        const nextValue = PsDateInputService.format(date);
+        if (value === undefined)
+            setUncontrolledValue(nextValue);
+        onChange?.(nextValue);
+    };
+    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: [_jsx(DatePicker, { 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: [...PsDateInputConfig.inputFormats], disabled: disabled, id: inputId, maxDate: PsDateInputService.parseBound(max), minDate: PsDateInputService.parseBound(min), onChange: handleChange, placeholderText: placeholder, popperClassName: 'ps-datepicker-popper', popperPlacement: 'bottom-start', popperProps: { strategy: 'fixed' }, portalId: portalId, renderCustomHeader: (headerProps) => _jsx(PsCalendarHeader, { ...headerProps }), required: required, selected: PsDateInputService.parse(currentValue), showPopperArrow: false, wrapperClassName: 'block w-full' }), _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-dropdown.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PsSelectInput } from './ps-select-input';
+export const PsDropdown = ({ className, defaultValue, disabled = false, helperText, label, name, onChange, options, placeholder, value, }) => (_jsx(PsSelectInput, { className: className, defaultValue: defaultValue, disabled: disabled, helperText: helperText, label: label, name: name, onChange: onChange, options: options, placeholder: placeholder, value: value }));

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

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PsTextFormatService } from '../services/ps-text-format-service';
+import { PsTextInput } from './ps-text-input';
+export const PsEmailInput = ({ onBlur, onChange, ...props }) => (_jsx(PsTextInput, { ...props, autoCapitalize: 'none', autoComplete: 'email', inputMode: 'email', onBlur: (event) => {
+        const formatted = 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' }));

package/dist/esm/components/ps-file-picker.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
+import { PsIcon } from '@pallasoft/ps-icons';
+export const PsFilePicker = ({ accept, acceptLabel, className, disabled, dropLabel, maxSizeBytes, maxSizeLabel, onError, onFileLoad, }) => {
+    const acceptAttr = useMemo(() => accept.join(','), [accept]);
+    const isAccepted = (candidate) => accept.some((entry) => entry.startsWith('.')
+        ? candidate.name.toLowerCase().endsWith(entry.toLowerCase())
+        : entry === candidate.type);
+    const onFileChange = (event) => {
+        const newFile = event.target.files?.[0];
+        if (!newFile || disabled)
+            return;
+        if (!isAccepted(newFile)) {
+            onError?.('Invalid file type. Please select a supported file.');
+            event.target.value = '';
+            return;
+        }
+        if (maxSizeBytes && newFile.size > maxSizeBytes) {
+            onError?.(maxSizeLabel ? `File is too large. ${maxSizeLabel}.` : 'File is too large.');
+            event.target.value = '';
+            return;
+        }
+        onFileLoad(newFile);
+    };
+    return (_jsxs("div", { className: PallasoftClassNameService.merge('relative flex h-48 w-full flex-col items-center justify-center rounded-lg border-2 border-dashed border-line p-4 transition-all hover:border-primary/50 hover:bg-primary/5 sm:h-64', className), children: [_jsxs("div", { className: 'flex flex-col items-center gap-3 text-center', children: [_jsx(PsIcon, { iconKey: 'upload', className: 'h-8 w-8 text-primary' }), _jsxs("div", { children: [_jsx("p", { className: 'text-body-2 font-medium text-ink sm:text-body-1', children: dropLabel }), _jsx("p", { className: 'mt-1 text-body-3 text-ink/60 sm:text-body-2', children: "or click to browse your files" }), maxSizeLabel ? _jsx("p", { className: 'mt-3 text-body-3 text-ink/60', children: maxSizeLabel }) : null, _jsxs("p", { className: 'text-body-3 text-ink/60', children: ["Accepted formats: ", acceptLabel] })] })] }), _jsx("input", { type: 'file', accept: acceptAttr, className: 'absolute inset-0 h-full w-full cursor-pointer opacity-0', "aria-label": 'File upload', onChange: onFileChange, disabled: disabled, "aria-disabled": disabled })] }));
+};

package/dist/esm/components/ps-form-control.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
+export const PsFormControl = ({ children, className, errorText, helperText, label, }) => (_jsxs("div", { className: PallasoftClassNameService.merge('grid gap-2', className), children: [label ? _jsx("span", { className: 'ps-input-label-compact', children: label }) : null, children, errorText ? (_jsx("p", { className: 'text-xs font-semibold text-danger', children: errorText })) : helperText ? (_jsx("p", { className: 'ps-input-helper', children: helperText })) : null] }));

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

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { 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, Label, ListBox, Popover, Select, SelectValue, Text, } from 'react-aria-components';
+import { PsRequiredMark } from './ps-required-mark';
+import { PsSelectOptionItem } from './ps-select-option-item';
+export const PsMultiSelectInput = ({ className, defaultValue, disabled, helperText, hideLabel, label, name, onChange, options, placeholder = 'Select options', required, value, }) => {
+    const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue === undefined ? [] : defaultValue);
+    const currentValue = value === undefined ? uncontrolledValue : value;
+    const zIndex = usePsLayerZIndex(PallasoftZIndex.Dropdown);
+    const labelByValue = new Map(options.map((option) => [option.value, option.label]));
+    const handleChange = (keys) => {
+        const nextValue = keys.map((key) => String(key));
+        if (value === undefined)
+            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 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: [_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
+                            .filter((selected) => labelByValue.has(selected))
+                            .map((selected) => (_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: _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

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
+import { PsTextFormatConfig } from '../constants/ps-text-format-config';
+import { PsAmountInputService } from '../services/ps-amount-input-service';
+import { PsTextInput } from './ps-text-input';
+export const PsPercentInput = ({ className, onChange, ...props }) => (_jsxs("div", { className: 'relative', children: [_jsx(PsTextInput, { ...props, autoComplete: 'off', className: PallasoftClassNameService.merge('pr-8', 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' }), _jsx("span", { "aria-hidden": 'true', className: 'pointer-events-none absolute right-3 bottom-3 text-sm text-ink/50', children: PsTextFormatConfig.percentSuffix })] }));

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

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, 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 { PsPhoneInputConfig } from '../constants/ps-phone-input-config';
+import { PsPhoneInputService } from '../services/ps-phone-input-service';
+import { PsRequiredMark } from './ps-required-mark';
+export const PsPhoneInput = ({ className, defaultCountry = PsPhoneInputConfig.defaultCountry, disabled, helperText, hideLabel, label, name, onBlur, onChange, required, value, }) => {
+    const inputId = useId();
+    const zIndex = usePsLayerZIndex(PallasoftZIndex.Dropdown);
+    const initial = PsPhoneInputService.display(value, defaultCountry);
+    const [country, setCountry] = useState(initial.country);
+    const [national, setNational] = useState(initial.national);
+    const [isTouched, setIsTouched] = useState(false);
+    const [isOpen, setIsOpen] = useState(false);
+    const [query, setQuery] = useState('');
+    const countries = useMemo(() => PsPhoneInputService.countries(defaultCountry), [defaultCountry]);
+    const matches = useMemo(() => PsPhoneInputService.search(countries, query), [countries, query]);
+    useEffect(() => {
+        if (PsPhoneInputService.toStored(national, country) === value)
+            return;
+        const next = PsPhoneInputService.display(value, country);
+        setCountry(next.country);
+        setNational(next.national);
+    }, [value]);
+    const emit = (nextNational, nextCountry) => onChange(PsPhoneInputService.toStored(nextNational, nextCountry));
+    const isInvalid = isTouched && !PsPhoneInputService.isValid(national, country);
+    const choose = (code) => {
+        setCountry(code);
+        setIsOpen(false);
+        setQuery('');
+        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 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: [_jsxs(DialogTrigger, { isOpen: isOpen, onOpenChange: setIsOpen, children: [_jsxs(Button, { "aria-label": 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, _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-focus-ring h-10 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
+                                                        ? '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: () => {
+                            setIsTouched(true);
+                            if (onBlur)
+                                onBlur();
+                        }, onChange: (event) => {
+                            const isDeleting = event.target.value.length < national.length;
+                            const next = isDeleting
+                                ? event.target.value
+                                : PsPhoneInputService.format(event.target.value, country);
+                            setNational(next);
+                            emit(next, country);
+                        }, required: required, type: 'tel', value: national })] }), isInvalid ? (_jsx("span", { className: 'ps-input-helper text-danger', children: PsPhoneInputConfig.invalidMessage })) : helperText ? (_jsx("span", { className: 'ps-input-helper', children: helperText })) : null] }));
+};

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

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PsPostalCodeService } from '../services/ps-postal-code-service';
+import { PsTextInput } from './ps-text-input';
+export const PsPostalCodeInput = ({ country, onChange, ...props }) => (_jsx(PsTextInput, { ...props, autoComplete: 'postal-code', autoCapitalize: 'characters', maxLength: PsPostalCodeService.maxLength(country), onChange: (event) => {
+        const formatted = PsPostalCodeService.format(event.target.value, country);
+        if (formatted !== event.target.value)
+            event.target.value = formatted;
+        if (onChange)
+            onChange(event);
+    }, type: 'text' }));

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

@@ -0,0 +1,2 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const PsRequiredMark = ({ isRequired }) => isRequired ? (_jsx("span", { "aria-hidden": 'true', className: 'ml-0.5 text-danger', children: "*" })) : null;

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

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { 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, Label, ListBox, Popover, Select, SelectValue, Text, } from 'react-aria-components';
+import { PsSelectInputService } from '../services/ps-select-input-service';
+import { PsRequiredMark } from './ps-required-mark';
+import { PsSelectOptionItem } from './ps-select-option-item';
+export const PsSelectInput = ({ className, defaultValue, disabled, helperText, hideLabel, label, name, onChange, options, placeholder = 'Select an option', required, value, }) => {
+    const [uncontrolledValue, setUncontrolledValue] = useState(() => PsSelectInputService.getDefaultValue(defaultValue, options));
+    const currentValue = value === undefined ? uncontrolledValue : value;
+    const zIndex = usePsLayerZIndex(PallasoftZIndex.Dropdown);
+    const hasOption = options.some((option) => option.value === currentValue);
+    const handleChange = (key) => {
+        const nextValue = key === null ? '' : String(key);
+        if (value === undefined)
+            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 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: [_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 }) }) })] }));
+};

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

@@ -0,0 +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] })] })) }));

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

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
+import { PsRequiredMark } from './ps-required-mark';
+export const PsTextAreaInput = ({ className, helperText, hideLabel, label, required, rows = 4, ...props }) => (_jsxs("label", { className: 'block', children: [_jsxs("span", { className: hideLabel ? 'sr-only' : 'ps-input-label', children: [label, _jsx(PsRequiredMark, { isRequired: required })] }), _jsx("textarea", { className: 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 ? _jsx("span", { className: 'ps-input-helper', children: helperText }) : null] }));

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

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
+import { PsDateInput } from './ps-date-input';
+import { PsRequiredMark } from './ps-required-mark';
+export const PsTextInput = ({ className, defaultValue, disabled, helperText, hideLabel, label, name, onChange, required, type, value, ...props }) => {
+    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 }));
+    }
+    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', 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/components/ps-toggle.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
+export const PsToggle = ({ description, isChecked, label, name, onChange }) => (_jsxs("label", { className: 'ps-focus-ring flex cursor-pointer items-center justify-between gap-4 rounded-2xl border border-line bg-white/78 px-4 py-3 text-ink transition-colors hover:border-primary/35 dark:border-white/10 dark:bg-white/6 dark:text-white', children: [_jsxs("span", { children: [_jsx("span", { className: 'block text-sm font-semibold text-current', children: label }), description ? (_jsx("span", { className: 'mt-1 block text-xs leading-5 text-slate-500 dark:text-slate-400', children: description })) : null] }), _jsx("input", { checked: isChecked, className: 'sr-only', name: name, onChange: (event) => onChange?.(event.target.checked), type: 'checkbox' }), _jsx("span", { className: PallasoftClassNameService.merge('flex h-7 w-12 items-center rounded-full p-1 transition', isChecked ? 'bg-primary' : 'bg-slate-200 dark:bg-slate-700'), children: _jsx("span", { className: PallasoftClassNameService.merge('h-5 w-5 rounded-full bg-white ring-1 ring-black/5 transition dark:ring-white/10', isChecked && 'translate-x-5') }) })] }));

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

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PsTextFormatService } from '../services/ps-text-format-service';
+import { PsTextInput } from './ps-text-input';
+export const PsUrlInput = ({ onBlur, onChange, ...props }) => (_jsx(PsTextInput, { ...props, autoCapitalize: 'none', autoComplete: 'url', inputMode: 'url', onBlur: (event) => {
+        const formatted = 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' }));

package/dist/esm/constants/ps-amount-input-config.js

@@ -0,0 +1,7 @@
+export const PsAmountInputConfig = {
+    closeBracket: ')',
+    disallowed: /[^0-9.]/g,
+    minus: '-',
+    openBracket: '(',
+    point: '.',
+};

package/dist/esm/constants/ps-color-input-config.js

@@ -0,0 +1,13 @@
+export const PsColorInputConfig = {
+    hexPattern: /^#[0-9a-fA-F]{6}$/,
+    swatches: [
+        '#1F6FEB',
+        '#0E9F6E',
+        '#F59E0B',
+        '#E02424',
+        '#7E3AF2',
+        '#0F172A',
+        '#DB2777',
+        '#0891B2',
+    ],
+};

package/dist/esm/constants/ps-date-input-config.js

@@ -0,0 +1,8 @@
+export const PsDateInputConfig = {
+    inputFormats: ['MMM d, yyyy', 'yyyy-MM-dd', 'MM/dd/yyyy', 'd MMM yyyy'],
+    monthLabelFormat: 'MMMM YYYY',
+    valueFormat: 'YYYY-MM-DD',
+    placeholder: 'Select a date',
+    portalId: 'ps-floating-root',
+    topLayerAttribute: 'data-react-aria-top-layer',
+};

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

@@ -0,0 +1,10 @@
+export const 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/esm/constants/ps-postal-code-formats.js

@@ -0,0 +1,10 @@
+export const 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: '-' },
+};
+export const PsPostalCodeConfig = {
+    fallbackAllowed: /[^A-Z0-9 -]/g,
+};

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

@@ -0,0 +1,6 @@
+export const PsTextFormatConfig = {
+    httpsPrefix: 'https://',
+    percentSuffix: '%',
+    schemePattern: /^[a-z][a-z0-9+.-]*:\/\//i,
+    whitespace: /\s+/g,
+};

package/dist/esm/index.js

@@ -0,0 +1,34 @@
+export * from './components/ps-cascader-input';
+export * from './components/ps-amount-input';
+export * from './components/ps-checkbox';
+export * from './components/ps-color-input';
+export * from './components/ps-color-picker';
+export * from './components/ps-combobox-input';
+export * from './components/ps-date-input';
+export * from './components/ps-dropdown';
+export * from './components/ps-file-picker';
+export * from './components/ps-form-control';
+export * from './components/ps-multi-select-input';
+export * from './components/ps-select-input';
+export * from './components/ps-text-area-input';
+export * from './components/ps-text-input';
+export * from './components/ps-toggle';
+export * from './services/ps-amount-input-service';
+export * from './services/ps-color-service';
+export * from './interfaces/color-hsv';
+export * from './components/ps-email-input';
+export * from './components/ps-percent-input';
+export * from './components/ps-phone-input';
+export * from './components/ps-postal-code-input';
+export * from './components/ps-url-input';
+export * from './constants/ps-phone-input-config';
+export * from './constants/ps-postal-code-formats';
+export * from './constants/ps-text-format-config';
+export * from './interfaces/ps-highlight-part';
+export * from './interfaces/ps-phone-country-option';
+export * from './interfaces/ps-phone-display-data';
+export * from './interfaces/ps-postal-code-format';
+export * from './services/ps-phone-input-service';
+export * from './services/ps-postal-code-service';
+export * from './services/ps-text-format-service';
+export * from './components/ps-required-mark';

package/dist/esm/interfaces/color-hsv.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/interfaces/ps-highlight-part.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/interfaces/ps-phone-country-option.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/interfaces/ps-phone-display-data.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/interfaces/ps-postal-code-format.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/services/ps-amount-input-service.js

@@ -0,0 +1,25 @@
+import { PsAmountInputConfig } from '../constants/ps-amount-input-config';
+export class PsAmountInputService {
+    static normalise(raw) {
+        const trimmed = raw.trim();
+        const isBracketed = trimmed.startsWith(PsAmountInputConfig.openBracket) &&
+            trimmed.endsWith(PsAmountInputConfig.closeBracket);
+        const isNegative = isBracketed || trimmed.startsWith(PsAmountInputConfig.minus);
+        const kept = trimmed.replace(PsAmountInputConfig.disallowed, '');
+        const pointIndex = kept.indexOf(PsAmountInputConfig.point);
+        const digits = pointIndex === -1
+            ? kept
+            : `${kept.slice(0, pointIndex + 1)}${kept
+                .slice(pointIndex + 1)
+                .split(PsAmountInputConfig.point)
+                .join('')}`;
+        if (digits === '')
+            return isNegative && !isBracketed ? PsAmountInputConfig.minus : '';
+        return isNegative ? `${PsAmountInputConfig.minus}${digits}` : digits;
+    }
+    static toNumber(raw) {
+        const normalised = PsAmountInputService.normalise(raw);
+        const parsed = Number(normalised);
+        return normalised === '' || !Number.isFinite(parsed) ? 0 : parsed;
+    }
+}

package/dist/esm/services/ps-cascader-service.js

@@ -0,0 +1,22 @@
+export class PsCascaderService {
+    static findSelected(groups, value) {
+        if (value === '')
+            return null;
+        for (const group of groups) {
+            const option = group.options.find((item) => item.value === value);
+            if (option)
+                return { group, option };
+        }
+        return null;
+    }
+    static search(groups, query) {
+        const term = query.trim().toLowerCase();
+        if (term === '')
+            return [];
+        return groups.flatMap((group) => group.options
+            .filter((option) => option.label.toLowerCase().includes(term) ||
+            group.label.toLowerCase().includes(term) ||
+            (option.description ? option.description.toLowerCase().includes(term) : false))
+            .map((option) => ({ group, option })));
+    }
+}