@pallasoft/ps-input-components 2.1.0 → 3.0.0

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

@@ -35,7 +35,7 @@ export const PsColorPicker = ({ className, disabled, helperText, hideLabel, labe
             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) => {
+    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 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) => {
@@ -49,7 +49,7 @@ export const PsColorPicker = ({ className, disabled, helperText, hideLabel, labe
                                             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) => {
+                                            }, type: 'range', value: hsv.hue })] }), _jsx("input", { "aria-label": `${label} hex`, className: 'ps-input-control ps-control-compact ps-focus-ring 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();

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

@@ -6,5 +6,5 @@ import { PsComboboxInputService } from '../services/ps-combobox-input-service';
 import { PsRequiredMark } from './ps-required-mark';
 export const PsComboboxInput = ({ className, emptyText, getItemKey, getItemLabel, hideLabel = false, inputValue, isLoading = false, items, label, onInputChange, onSelectionChange, placeholder, renderItem, required, selectedKey, }) => {
     const itemsByKey = new Map(items.map((item) => [getItemKey(item), item]));
-    return (_jsxs(ComboBox, { allowsEmptyCollection: true, "aria-label": hideLabel ? label : undefined, className: PallasoftClassNameService.merge('block', className), defaultFilter: () => true, inputValue: inputValue, items: items, onInputChange: onInputChange, selectedKey: selectedKey, onSelectionChange: (key) => onSelectionChange?.(key === null ? null : PsComboboxInputService.getItem(itemsByKey, key)), children: [label && !hideLabel ? (_jsxs(Label, { className: 'ps-input-label', children: [label, _jsx(PsRequiredMark, { isRequired: required })] })) : null, _jsx("span", { className: hideLabel || !label ? 'relative block' : 'relative mt-2 block', children: _jsx(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, renderEmptyState: () => emptyText ? _jsx("div", { className: 'px-3 py-2 text-sm text-ink/55', children: emptyText }) : null, children: (item) => (_jsx(ListBoxItem, { className: 'ps-focus-ring cursor-pointer rounded-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 (_jsxs(ComboBox, { allowsEmptyCollection: true, "aria-label": hideLabel ? label : undefined, className: PallasoftClassNameService.merge('block', className), defaultFilter: () => true, inputValue: inputValue, items: items, onInputChange: onInputChange, selectedKey: selectedKey, onSelectionChange: (key) => onSelectionChange?.(key === null ? null : PsComboboxInputService.getItem(itemsByKey, key)), children: [label && !hideLabel ? (_jsxs(Label, { className: 'ps-input-label', children: [label, _jsx(PsRequiredMark, { isRequired: required })] })) : null, _jsx("span", { className: hideLabel || !label ? 'relative block' : 'relative mt-2 block', children: _jsx(Input, { className: 'ps-input-control ps-focus-ring 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, renderEmptyState: () => emptyText ? _jsx("div", { className: 'px-3 py-2 text-sm text-ink/55', children: emptyText }) : null, children: (item) => (_jsx(ListBoxItem, { className: 'ps-focus-ring cursor-pointer rounded-ps-control px-3 py-2 text-sm font-semibold text-ink selected:bg-primary-soft selected:text-primary hover:bg-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

@@ -38,5 +38,5 @@ export const PsDateInput = ({ className, defaultValue, disabled, helperText, hid
             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: PallasoftClassNameService.merge('ps-floating-panel ps-datepicker', view === PsCalendarView.day ? undefined : PsDateInputConfig.pickingClassName), 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: maxDate, minDate: minDate, onCalendarClose: () => setView(PsCalendarView.day), onChange: handleChange, placeholderText: placeholder, popperClassName: 'ps-datepicker-popper', popperPlacement: 'bottom-start', popperProps: { strategy: 'fixed' }, portalId: portalId, renderCustomHeader: (headerProps) => (_jsx(PsCalendarHeader, { ...headerProps, maxDate: maxDate, minDate: minDate, onViewChange: setView, view: view })), required: required, selected: PsDateInputService.parse(currentValue), showPopperArrow: false, wrapperClassName: '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] }));
+    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: PallasoftClassNameService.merge('ps-floating-panel ps-datepicker', view === PsCalendarView.day ? undefined : PsDateInputConfig.pickingClassName), className: 'ps-input-control ps-focus-ring w-full pr-10 text-sm font-semibold', dateFormat: [...PsDateInputConfig.inputFormats], disabled: disabled, id: inputId, maxDate: maxDate, minDate: minDate, onCalendarClose: () => setView(PsCalendarView.day), onChange: handleChange, placeholderText: placeholder, popperClassName: 'ps-datepicker-popper', popperPlacement: 'bottom-start', popperProps: { strategy: 'fixed' }, portalId: portalId, renderCustomHeader: (headerProps) => (_jsx(PsCalendarHeader, { ...headerProps, maxDate: maxDate, minDate: minDate, onViewChange: setView, view: view })), required: required, selected: PsDateInputService.parse(currentValue), showPopperArrow: false, wrapperClassName: '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-date-preset-field.js

@@ -2,5 +2,5 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { PsDateInput } from './ps-date-input';
 import { PsFormControl } from './ps-form-control';
 export const PsDatePresetField = ({ errorText, hideLabel, label, onChange, presets, presetsDisabled = false, presetsLabel, required, value, }) => (_jsxs("div", { className: 'flex flex-col gap-2', children: [_jsx(PsFormControl, { errorText: errorText, children: _jsx(PsDateInput, { hideLabel: hideLabel, label: label, onChange: onChange, required: required, value: value }) }), _jsx("div", { "aria-label": presetsLabel, className: 'flex flex-wrap gap-1.5', role: 'group', children: presets.map((preset) => (_jsx("button", { "aria-pressed": preset.date !== '' && preset.date === value, className: preset.date !== '' && preset.date === value
-                    ? 'ps-focus-ring rounded-full bg-primary px-2.5 py-1 text-xs font-semibold text-white'
-                    : 'ps-focus-ring rounded-full border border-line px-2.5 py-1 text-xs font-medium text-ink/70 hover:border-primary/40 hover:text-ink disabled:opacity-40', disabled: presetsDisabled, onClick: () => onChange(preset.date), type: 'button', children: preset.label }, preset.label))) })] }));
+                    ? 'ps-focus-ring rounded-ps-control bg-primary px-2.5 py-1 text-xs font-semibold text-white'
+                    : 'ps-focus-ring rounded-ps-control border border-line px-2.5 py-1 text-xs font-medium text-ink/70 hover:border-primary/40 hover:text-ink disabled:opacity-40', disabled: presetsDisabled, onClick: () => onChange(preset.date), type: 'button', children: preset.label }, preset.label))) })] }));

package/dist/esm/components/ps-field-skeleton.js

@@ -1,3 +1,3 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
-export const PsFieldSkeleton = ({ className, hideLabel, label, rows = 1, }) => (_jsxs("div", { "aria-busy": 'true', className: 'block', role: 'status', children: [_jsx("span", { className: 'sr-only', children: label }), hideLabel ? null : _jsx("span", { className: 'ps-skeleton mb-2 block h-2.5 w-24 rounded-full' }), _jsx("span", { className: PallasoftClassNameService.merge('ps-skeleton block w-full rounded-ps-control', rows > 1 ? 'min-h-24' : 'min-h-11', className) })] }));
+export const PsFieldSkeleton = ({ className, hideLabel, label, rows = 1, }) => (_jsxs("div", { "aria-busy": 'true', className: 'block', role: 'status', children: [_jsx("span", { className: 'sr-only', children: label }), hideLabel ? null : _jsx("span", { className: 'ps-skeleton mb-2 block h-2.5 w-24 rounded-full' }), _jsx("span", { className: PallasoftClassNameService.merge('ps-skeleton block w-full rounded-ps-control', rows > 1 ? 'min-h-24' : 'min-h-ps-control', className) })] }));

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

@@ -25,5 +25,5 @@ export const PsFilePicker = ({ accept, acceptLabel, className, disabled, dropLab
         }
         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 })] }));
+    return (_jsxs("div", { className: PallasoftClassNameService.merge('relative flex h-48 w-full flex-col items-center justify-center rounded-ps-control 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-multi-select-input.js

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

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

@@ -34,7 +34,7 @@ export const PsPhoneInput = ({ className, defaultCountry = PsPhoneInputConfig.de
         emit(national, code);
         document.getElementById(inputId)?.focus();
     };
-    return (_jsxs("div", { className: PallasoftClassNameService.merge('block', className), children: [_jsxs("label", { className: hideLabel ? 'sr-only' : 'ps-input-label', htmlFor: inputId, children: [label, _jsx(PsRequiredMark, { isRequired: required })] }), _jsxs("div", { className: PallasoftClassNameService.merge('ps-input-control flex 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
+    return (_jsxs("div", { className: PallasoftClassNameService.merge('block', className), children: [_jsxs("label", { className: hideLabel ? 'sr-only' : 'ps-input-label', htmlFor: inputId, children: [label, _jsx(PsRequiredMark, { isRequired: required })] }), _jsxs("div", { className: PallasoftClassNameService.merge('ps-input-control flex items-stretch overflow-hidden p-0 focus-within:border-primary has-[:focus-visible]:outline has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-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: 'flex shrink-0 items-center gap-1.5 border-r border-line px-3 outline-none focus-visible:bg-primary/10 text-sm font-semibold text-ink', isDisabled: disabled, children: [country, _jsx(PsIcon, { "aria-hidden": 'true', className: 'block h-3.5 w-3.5 text-ink/45', iconKey: PsIconKey.Chevron })] }), _jsx(Popover, { className: 'ps-floating-panel w-72 outline-none', offset: 6, placement: 'bottom start', style: { zIndex }, children: _jsxs(Dialog, { "aria-label": PsPhoneInputConfig.countryLabel, className: 'flex flex-col outline-none', children: [_jsx("div", { className: 'border-b border-line p-2', children: _jsx("input", { "aria-label": PsPhoneInputConfig.searchPlaceholder, autoFocus: true, className: 'ps-input-control ps-control-compact ps-focus-ring w-full text-sm', onChange: (event) => setQuery(event.target.value), placeholder: PsPhoneInputConfig.searchPlaceholder, type: 'search', value: query }) }), _jsx("ul", { className: 'ps-scrollbar-hidden max-h-64 overflow-y-auto p-1.5', role: 'listbox', children: matches.length === 0 ? (_jsx("li", { className: 'px-3 py-2.5 text-sm text-ink/50', children: PsPhoneInputConfig.emptyMessage })) : (matches.map((option) => (_jsx("li", { role: 'none', children: _jsxs("button", { "aria-selected": option.code === country, className: PallasoftClassNameService.merge('ps-focus-ring flex w-full items-center justify-between gap-3 rounded-ps-control px-3 py-2.5 text-left text-sm', option.code === country
                                                         ? '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);

package/dist/esm/components/ps-portable-text-editor.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
 import { PsPortableTextEditorConfig } from '../constants/ps-portable-text-editor-config';
-import { PsPortableTextEditorRenderers } from '../constants/ps-portable-text-editor-renderers';
 import { PsPortableTextCore } from '../portable-text-core/components/ps-portable-text-core';
 import { PsPortableTextCoreConfig } from '../portable-text-core/constants/ps-portable-text-core-config';
 import { PsPortableTextEditorService } from '../portable-text-core/services/ps-portable-text-editor-service';
 import { PsPortableTextToolbar } from './ps-portable-text-toolbar';
-export const PsPortableTextEditor = ({ className, disabled = false, labels = PsPortableTextCoreConfig.labels, minRows = 4, onChange, placeholder, value, }) => (_jsx(PsPortableTextCore, { ...PsPortableTextEditorRenderers, className: PallasoftClassNameService.merge(PsPortableTextEditorConfig.classNames.root, className), disabled: disabled, editableClassName: PsPortableTextEditorConfig.classNames.editable, fallback: _jsxs(_Fragment, { children: [_jsx("div", { "aria-hidden": 'true', className: PsPortableTextEditorConfig.classNames.toolbar, children: _jsx("span", { className: 'h-9' }) }), _jsx("div", { "aria-hidden": 'true', className: PsPortableTextEditorConfig.classNames.editable, style: { minHeight: PsPortableTextEditorService.minHeight(minRows) } })] }), minRows: minRows, onChange: onChange, renderPlaceholder: () => _jsx("span", { className: 'text-ink/45', children: placeholder }), toolbar: _jsx(PsPortableTextToolbar, { disabled: disabled, labels: labels }), value: value }));
+export const PsPortableTextEditor = ({ className, disabled = false, labels = PsPortableTextCoreConfig.labels, minRows = 4, onChange, placeholder, value, }) => (_jsx(PsPortableTextCore, { className: PallasoftClassNameService.merge(PsPortableTextEditorConfig.classNames.root, className), classNames: PsPortableTextEditorConfig.contentClassNames, disabled: disabled, editableClassName: PsPortableTextEditorConfig.classNames.editable, fallback: _jsxs(_Fragment, { children: [_jsx("div", { "aria-hidden": 'true', className: PsPortableTextEditorConfig.classNames.toolbar, children: _jsx("span", { className: 'h-9' }) }), _jsx("div", { "aria-hidden": 'true', className: PsPortableTextEditorConfig.classNames.editable, style: { minHeight: PsPortableTextEditorService.minHeight(minRows) } })] }), label: labels.editor, minRows: minRows, onChange: onChange, placeholder: placeholder, toolbar: _jsx(PsPortableTextToolbar, { disabled: disabled, labels: labels }), value: value }));

package/dist/esm/components/ps-portable-text-link-dialog.js

@@ -3,7 +3,7 @@ import { PsFormModal } from '@pallasoft/ps-popovers';
 import { PsPortableTextCoreConfig } from '../portable-text-core/constants/ps-portable-text-core-config';
 import { usePsPortableTextLinkForm } from '../portable-text-core/hooks/use-ps-portable-text-link-form';
 import { PsUrlInput } from './ps-url-input';
-export const PsPortableTextLinkDialog = ({ isOpen, labels, onClose, onSubmit, }) => {
-    const form = usePsPortableTextLinkForm({ onClose, onSubmit });
+export const PsPortableTextLinkDialog = ({ href, isOpen, labels, onClose, onSubmit, }) => {
+    const form = usePsPortableTextLinkForm({ href, isOpen, onClose, onSubmit });
     return (_jsx(PsFormModal, { cancelLabel: labels.cancel, isOpen: isOpen, isSubmitDisabled: form.isSubmitDisabled, onClose: form.close, onSubmit: form.submit, size: 'sm', submitLabel: labels.saveLink, title: labels.linkDialogTitle, children: _jsx(PsUrlInput, { "aria-invalid": form.hasError, autoFocus: true, helperText: form.hasError ? labels.invalidLink : undefined, label: labels.linkUrl, name: PsPortableTextCoreConfig.linkAnnotation, onChange: (event) => form.setAddress(event.target.value), value: form.address }) }));
 };

package/dist/esm/components/ps-portable-text-toolbar.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
 import { PsPortableTextEditorConfig } from '../constants/ps-portable-text-editor-config';
 import { PsPortableTextCoreConfig } from '../portable-text-core/constants/ps-portable-text-core-config';
 import { usePsPortableTextToolbar } from '../portable-text-core/hooks/use-ps-portable-text-toolbar';
@@ -7,12 +6,8 @@ import { PsPortableTextLinkDialog } from './ps-portable-text-link-dialog';
 import { PsPortableTextToolbarButton } from './ps-portable-text-toolbar-button';
 export const PsPortableTextToolbar = ({ disabled, labels }) => {
     const toolbar = usePsPortableTextToolbar();
-    const [isLinkOpen, setIsLinkOpen] = useState(false);
-    return (_jsxs("div", { "aria-label": labels.toolbar, className: PsPortableTextEditorConfig.classNames.toolbar, role: 'toolbar', children: [_jsx(PsPortableTextToolbarButton, { className: 'font-bold', disabled: disabled, isActive: toolbar.active.bold, label: labels.bold, onClick: () => toolbar.toggleDecorator(PsPortableTextCoreConfig.decorators.bold), children: "B" }), _jsx(PsPortableTextToolbarButton, { className: 'italic', disabled: disabled, isActive: toolbar.active.italic, label: labels.italic, onClick: () => toolbar.toggleDecorator(PsPortableTextCoreConfig.decorators.italic), children: "I" }), _jsx(PsPortableTextToolbarButton, { className: 'underline', disabled: disabled, isActive: toolbar.active.underline, label: labels.underline, onClick: () => toolbar.toggleDecorator(PsPortableTextCoreConfig.decorators.underline), children: "U" }), _jsx(PsPortableTextToolbarButton, { className: 'font-mono', disabled: disabled, isActive: toolbar.active.code, label: labels.code, onClick: () => toolbar.toggleDecorator(PsPortableTextCoreConfig.decorators.code), children: '</>' }), _jsx(PsPortableTextToolbarButton, { disabled: disabled, isActive: toolbar.active.link, label: toolbar.active.link ? labels.removeLink : labels.link, onClick: () => (toolbar.active.link ? toolbar.removeLink() : setIsLinkOpen(true)), children: _jsx("span", { className: 'underline', children: labels.link }) }), _jsx(PsPortableTextLinkDialog, { isOpen: isLinkOpen, labels: labels, onClose: () => {
-                    setIsLinkOpen(false);
-                    toolbar.focus();
-                }, onSubmit: (href) => {
+    return (_jsxs("div", { "aria-label": labels.toolbar, className: PsPortableTextEditorConfig.classNames.toolbar, role: 'toolbar', children: [_jsx(PsPortableTextToolbarButton, { className: 'font-bold', disabled: disabled, isActive: toolbar.active.bold, label: labels.bold, onClick: () => toolbar.toggleDecorator(PsPortableTextCoreConfig.decorators.bold), children: "B" }), _jsx(PsPortableTextToolbarButton, { className: 'italic', disabled: disabled, isActive: toolbar.active.italic, label: labels.italic, onClick: () => toolbar.toggleDecorator(PsPortableTextCoreConfig.decorators.italic), children: "I" }), _jsx(PsPortableTextToolbarButton, { className: 'underline', disabled: disabled, isActive: toolbar.active.underline, label: labels.underline, onClick: () => toolbar.toggleDecorator(PsPortableTextCoreConfig.decorators.underline), children: "U" }), _jsx(PsPortableTextToolbarButton, { className: 'font-mono', disabled: disabled, isActive: toolbar.active.code, label: labels.code, onClick: () => toolbar.toggleDecorator(PsPortableTextCoreConfig.decorators.code), children: '</>' }), _jsx(PsPortableTextToolbarButton, { disabled: disabled, isActive: toolbar.active.link, label: toolbar.active.link ? labels.removeLink : labels.link, onClick: () => (toolbar.active.link ? toolbar.removeLink() : toolbar.openLink()), children: _jsx("span", { className: 'underline', children: labels.link }) }), _jsx(PsPortableTextLinkDialog, { href: toolbar.linkHref, isOpen: toolbar.isLinkOpen, labels: labels, onClose: toolbar.closeLink, onSubmit: (href) => {
+                    toolbar.closeLink();
                     toolbar.addLink(href);
-                    setIsLinkOpen(false);
                 } }), _jsx("span", { "aria-hidden": 'true', className: PsPortableTextEditorConfig.classNames.separator }), _jsx(PsPortableTextToolbarButton, { disabled: disabled, isActive: toolbar.active.bulletedList, label: labels.bulletedList, onClick: () => toolbar.toggleListItem(PsPortableTextCoreConfig.listItems.bullet), children: "\u2022" }), _jsx(PsPortableTextToolbarButton, { disabled: disabled, isActive: toolbar.active.numberedList, label: labels.numberedList, onClick: () => toolbar.toggleListItem(PsPortableTextCoreConfig.listItems.number), children: "1." }), _jsx(PsPortableTextToolbarButton, { disabled: disabled, isActive: toolbar.active.quote, label: labels.quote, onClick: toolbar.toggleQuote, children: "\u201D" })] }));
 };

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

@@ -21,5 +21,5 @@ export const PsSelectInput = ({ className, defaultValue, disabled, helperText, h
             setUncontrolledValue(nextValue);
         onChange?.(nextValue);
     };
-    return (_jsxs(Select, { "aria-label": hideLabel ? label : undefined, className: PallasoftClassNameService.merge('block', className), isDisabled: disabled, isRequired: required, name: name, onChange: handleChange, placeholder: placeholder, value: hasOption ? currentValue : null, children: [hideLabel ? null : (_jsxs(Label, { className: 'ps-input-label block', children: [label, _jsx(PsRequiredMark, { isRequired: required })] })), _jsxs(Button, { className: PallasoftClassNameService.merge('ps-input-control ps-focus-ring relative flex 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 }) }) })] }));
+    return (_jsxs(Select, { "aria-label": hideLabel ? label : undefined, className: PallasoftClassNameService.merge('block', className), isDisabled: disabled, isRequired: required, name: name, onChange: handleChange, placeholder: placeholder, value: hasOption ? currentValue : null, children: [hideLabel ? null : (_jsxs(Label, { className: 'ps-input-label block', children: [label, _jsx(PsRequiredMark, { isRequired: required })] })), _jsxs(Button, { className: PallasoftClassNameService.merge('ps-input-control ps-focus-ring relative flex w-full items-center pr-10 text-left text-sm font-semibold disabled:cursor-not-allowed disabled:opacity-60', hideLabel ? '' : 'mt-2'), 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-toggle.js

@@ -1,3 +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') }) })] }));
+export const PsToggle = ({ description, isChecked, label, name, onChange }) => (_jsxs("label", { className: 'ps-control flex cursor-pointer items-center justify-between gap-4 rounded-ps-control border border-line bg-white/78 px-4 py-3 has-[:focus-visible]:outline has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-primary 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-year-input.js

@@ -40,7 +40,7 @@ export const PsYearInput = ({ className, defaultValue, disabled, helperText, hid
             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 ${PsDateInputConfig.pickingClassName}`, className: 'ps-input-control ps-focus-ring min-h-11 w-full pr-10 text-sm font-semibold', dateFormat: PsYearInputConfig.format, disabled: disabled, id: inputId, maxDate: maxDate, minDate: minDate, onChange: handleChange, placeholderText: placeholder, popperClassName: 'ps-datepicker-popper', popperPlacement: 'bottom-start', popperProps: { strategy: 'fixed' }, portalId: portalId, ref: pickerRef, renderCustomHeader: (headerProps) => (_jsx(PsCalendarHeader, { ...headerProps, maxDate: maxDate, minDate: minDate, onViewChange: () => undefined, onYearPick: (year) => {
+    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 ${PsDateInputConfig.pickingClassName}`, className: 'ps-input-control ps-focus-ring w-full pr-10 text-sm font-semibold', dateFormat: PsYearInputConfig.format, disabled: disabled, id: inputId, maxDate: maxDate, minDate: minDate, onChange: handleChange, placeholderText: placeholder, popperClassName: 'ps-datepicker-popper', popperPlacement: 'bottom-start', popperProps: { strategy: 'fixed' }, portalId: portalId, ref: pickerRef, renderCustomHeader: (headerProps) => (_jsx(PsCalendarHeader, { ...headerProps, maxDate: maxDate, minDate: minDate, onViewChange: () => undefined, onYearPick: (year) => {
                                 handleChange(PsYearInputService.startOfYear(year));
                                 pickerRef.current?.setOpen(false);
                             }, selectedYear: selected === null ? undefined : selected.getFullYear(), view: PsCalendarView.year })), required: required, selected: selected, showPopperArrow: false, wrapperClassName: 'block w-full' }), _jsx(PsIcon, { "aria-hidden": 'true', className: 'pointer-events-none absolute top-1/2 right-3 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/constants/ps-calendar-header-classes.js

@@ -0,0 +1,6 @@
+export const PsCalendarHeaderClasses = {
+    navigationButton: 'ps-focus-ring ps-control-square ps-control-compact flex items-center justify-center rounded-ps-control text-ink/60 transition-colors hover:bg-primary/10 hover:text-ink disabled:cursor-not-allowed disabled:opacity-30',
+    titleButton: 'ps-focus-ring ps-control-compact ps-control-padding-compact flex items-center gap-1 rounded-ps-control text-sm font-semibold text-ink transition-colors hover:bg-primary/10',
+    cell: 'ps-focus-ring ps-control flex items-center justify-center rounded-ps-control text-sm font-medium text-ink transition-colors hover:bg-primary/10 disabled:cursor-not-allowed disabled:opacity-35 disabled:hover:bg-transparent',
+    selectedCell: 'bg-primary font-bold text-[var(--ps-color-primary-contrast)] hover:bg-primary',
+};

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

@@ -2,9 +2,17 @@ export const PsPortableTextEditorConfig = {
     classNames: {
         editable: 'ps-input-control w-full resize-none overflow-y-auto rounded-t-none border-t-0 leading-6 outline-none',
         root: 'block',
-        toolbar: 'flex flex-wrap items-center gap-1 rounded-t-xl border border-line bg-white p-1 dark:bg-transparent',
-        button: 'ps-focus-ring inline-flex h-9 min-w-9 items-center justify-center rounded-lg px-2 text-sm text-ink/70 transition-colors hover:bg-ink/5 hover:text-ink disabled:cursor-not-allowed disabled:opacity-40',
+        toolbar: 'flex flex-wrap items-center gap-1 rounded-t-ps-control border border-line bg-white p-1 dark:bg-transparent',
+        button: 'ps-focus-ring ps-control-compact inline-flex min-w-ps-control-compact items-center justify-center rounded-ps-control px-2 text-sm text-ink/70 transition-colors hover:bg-ink/5 hover:text-ink disabled:cursor-not-allowed disabled:opacity-40',
         buttonActive: 'bg-primary text-white hover:bg-primary hover:text-white',
         separator: 'mx-1 h-5 w-px bg-line',
     },
+    contentClassNames: {
+        blockquote: 'border-l-2 border-primary pl-3 text-ink/80',
+        bulletList: 'list-disc pl-6',
+        code: 'rounded bg-ink/10 px-1 font-mono text-[0.9em]',
+        link: 'text-primary underline',
+        orderedList: 'list-decimal pl-6',
+        placeholder: 'before:pointer-events-none before:float-left before:h-0 before:text-ink/45 before:content-[attr(data-placeholder)]',
+    },
 };

package/dist/esm/index.js

@@ -47,3 +47,10 @@ export * from './constants/ps-select-with-create-config';
 export * from './interfaces/ps-date-preset-data';
 export * from './components/ps-option-card-group';
 export * from './interfaces/ps-option-card-data';
+export * from './components/ps-checkbox-matrix';
+export * from './interfaces/ps-checkbox-matrix-cell';
+export * from './interfaces/ps-checkbox-matrix-column';
+export * from './interfaces/ps-checkbox-matrix-group';
+export * from './interfaces/ps-checkbox-matrix-labels';
+export * from './interfaces/ps-checkbox-matrix-row';
+export * from './services/ps-checkbox-matrix-service';

package/dist/esm/interfaces/ps-checkbox-matrix-cell.js

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

package/dist/esm/interfaces/ps-checkbox-matrix-column.js

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

package/dist/esm/interfaces/ps-checkbox-matrix-group.js

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

package/dist/esm/interfaces/ps-checkbox-matrix-labels.js

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

package/dist/esm/interfaces/ps-checkbox-matrix-row.js

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

package/dist/esm/portable-text-core/components/ps-portable-text-core-editor-stub.js

@@ -0,0 +1,2 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const PsPortableTextCoreEditor = ({ className, fallback }) => (_jsx("div", { className: className, children: fallback }));

package/dist/esm/portable-text-core/components/ps-portable-text-core-editor.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { EditorContent, useEditor, useEditorState } from '@tiptap/react';
+import { PsPortableTextCoreContext } from '../contexts/ps-portable-text-core-context';
+import { PsPortableTextCommandService } from '../services/ps-portable-text-command-service';
+import { PsPortableTextConverterService } from '../services/ps-portable-text-converter-service';
+import { PsPortableTextEditorService } from '../services/ps-portable-text-editor-service';
+import { PsPortableTextExtensionService } from '../services/ps-portable-text-extension-service';
+export const PsPortableTextCoreEditor = ({ className, classNames, disabled = false, editableClassName = '', label, minRows = 4, onChange, placeholder = '', toolbar, value, }) => {
+    const [isLinkOpen, setIsLinkOpen] = useState(false);
+    const lastValue = useRef(value);
+    const editor = useEditor({
+        content: PsPortableTextConverterService.toDocument(value),
+        editable: !disabled,
+        editorProps: {
+            attributes: {
+                ...(label === undefined ? {} : { 'aria-label': label }),
+                'aria-multiline': 'true',
+                'class': editableClassName,
+                'role': 'textbox',
+                'style': `min-height: ${PsPortableTextEditorService.minHeight(minRows)}`,
+            },
+        },
+        extensions: PsPortableTextExtensionService.extensions({
+            classNames,
+            onLinkShortcut: () => setIsLinkOpen(true),
+            placeholder,
+        }),
+        immediatelyRender: true,
+    }, []);
+    const state = useEditorState({
+        editor,
+        selector: ({ editor: current }) => PsPortableTextCommandService.state(current),
+    });
+    useEffect(() => {
+        editor.setEditable(!disabled, false);
+    }, [editor, disabled]);
+    useEffect(() => {
+        const update = () => {
+            const next = PsPortableTextConverterService.toBlocks(editor.getJSON());
+            lastValue.current = next;
+            onChange(next);
+        };
+        editor.on('update', update);
+        return () => {
+            editor.off('update', update);
+        };
+    }, [editor, onChange]);
+    useEffect(() => {
+        if (PsPortableTextEditorService.isSame(value, lastValue.current))
+            return;
+        lastValue.current = value;
+        editor.commands.setContent(PsPortableTextConverterService.toDocument(value), {
+            emitUpdate: false,
+        });
+    }, [editor, value]);
+    return (_jsx("div", { className: className, children: _jsxs(PsPortableTextCoreContext.Provider, { value: {
+                closeLink: () => setIsLinkOpen(false),
+                editor,
+                isLinkOpen,
+                openLink: () => setIsLinkOpen(true),
+                state,
+            }, children: [toolbar, _jsx(EditorContent, { editor: editor })] }) }));
+};

package/dist/esm/portable-text-core/components/ps-portable-text-core.js

@@ -1,31 +1,10 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from 'react';
-import { EditorProvider, PortableTextEditable, } from '@portabletext/editor';
-import { EventListenerPlugin } from '@portabletext/editor/plugins';
-import { PsPortableTextCoreConfig } from '../constants/ps-portable-text-core-config';
-import { PsPortableTextEditorService } from '../services/ps-portable-text-editor-service';
-export const PsPortableTextCore = ({ className, disabled = false, editableClassName, fallback, minRows = 4, onChange, renderAnnotation, renderBlock, renderDecorator, renderPlaceholder, toolbar, value, }) => {
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { PsPortableTextCoreEditor } from '@pallasoft/ps-input-components/portable-text-engine';
+export const PsPortableTextCore = (props) => {
     const [isMounted, setIsMounted] = useState(false);
-    const [version, setVersion] = useState(0);
-    const lastValue = useRef(value);
     useEffect(() => {
         setIsMounted(true);
     }, []);
-    useEffect(() => {
-        if (PsPortableTextEditorService.isSame(value, lastValue.current))
-            return;
-        lastValue.current = value;
-        setVersion((current) => current + 1);
-    }, [value]);
-    return (_jsx("div", { className: className, children: isMounted ? (_jsxs(EditorProvider, { initialConfig: {
-                initialValue: value,
-                readOnly: disabled,
-                schemaDefinition: PsPortableTextCoreConfig.schemaDefinition,
-            }, children: [_jsx(EventListenerPlugin, { on: (event) => {
-                        if (event.type !== 'mutation')
-                            return;
-                        const next = Array.isArray(event.value) ? event.value : [];
-                        lastValue.current = next;
-                        onChange(next);
-                    } }), toolbar, _jsx(PortableTextEditable, { className: editableClassName, readOnly: disabled, renderAnnotation: renderAnnotation, renderBlock: renderBlock, renderDecorator: renderDecorator, renderPlaceholder: renderPlaceholder, style: { minHeight: PsPortableTextEditorService.minHeight(minRows) } })] }, version)) : (fallback) }));
+    return isMounted ? (_jsx(PsPortableTextCoreEditor, { ...props })) : (_jsx("div", { className: props.className, children: props.fallback }));
 };

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

@@ -1,11 +1,13 @@
 import { Common } from '@pallasoft/ps-models';
-import { defineSchema } from '@portabletext/editor';
 const Models = Common.PortableTextConfig;
 export const PsPortableTextCoreConfig = {
     linkAnnotation: Models.linkType,
     mailtoPrefix: 'mailto:',
     emailPattern: /^[^\s@/:]+@[^\s@/:]+\.[^\s@/:]+$/,
     lineHeightRem: 1.5,
+    lineBreak: '\n',
+    defaultLinkProtocol: 'https',
+    keyPrefix: { block: 'b', link: 'l', span: 's' },
     decorators: {
         bold: Models.decorators[0],
         code: Models.decorators[3],
@@ -14,19 +16,37 @@ export const PsPortableTextCoreConfig = {
     },
     styles: { blockquote: Models.styles[1], normal: Models.styles[0] },
     listItems: { bullet: Models.listItems[0], number: Models.listItems[1] },
-    schemaDefinition: defineSchema({
-        annotations: [{ name: Models.linkType, fields: [{ name: 'href', type: 'string' }] }],
-        blockObjects: [],
-        decorators: Models.decorators.map((name) => ({ name })),
-        inlineObjects: [],
-        lists: Models.listItems.map((name) => ({ name })),
-        styles: Models.styles.map((name) => ({ name })),
-    }),
+    decoratorMarks: {
+        [Models.decorators[0]]: 'bold',
+        [Models.decorators[1]]: 'italic',
+        [Models.decorators[2]]: 'underline',
+        [Models.decorators[3]]: 'code',
+    },
+    listNodes: {
+        [Models.listItems[0]]: 'bulletList',
+        [Models.listItems[1]]: 'orderedList',
+    },
+    nodes: {
+        blockquote: 'blockquote',
+        bulletList: 'bulletList',
+        document: 'doc',
+        hardBreak: 'hardBreak',
+        listItem: 'listItem',
+        orderedList: 'orderedList',
+        paragraph: 'paragraph',
+        text: 'text',
+    },
+    linkMark: 'link',
+    linkShortcutExtension: 'psLinkShortcut',
+    listItemContent: 'paragraph (bulletList | orderedList)*',
+    blockquoteContent: 'paragraph+',
+    shortcuts: { link: 'Mod-k', nest: 'Tab', unnest: 'Shift-Tab' },
     labels: {
         bold: 'Bold',
         bulletedList: 'Bulleted list',
         cancel: 'Cancel',
         code: 'Code',
+        editor: 'Text',
         invalidLink: 'Enter a web address or email address',
         italic: 'Italic',
         link: 'Link',

package/dist/esm/portable-text-core/contexts/ps-portable-text-core-context.js

@@ -0,0 +1,9 @@
+import { createContext } from 'react';
+import { PsPortableTextCommandService } from '../services/ps-portable-text-command-service';
+export const PsPortableTextCoreContext = createContext({
+    closeLink: () => undefined,
+    editor: null,
+    isLinkOpen: false,
+    openLink: () => undefined,
+    state: PsPortableTextCommandService.state(null),
+});

package/dist/esm/portable-text-core/hooks/use-ps-portable-text-link-form.js

@@ -1,8 +1,14 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { PsPortableTextEditorService } from '../services/ps-portable-text-editor-service';
-export const usePsPortableTextLinkForm = ({ onClose, onSubmit, }) => {
+export const usePsPortableTextLinkForm = ({ href, isOpen = false, onClose, onSubmit, }) => {
     const [address, setAddress] = useState('');
     const [hasError, setHasError] = useState(false);
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        setAddress(href === undefined ? '' : href);
+        setHasError(false);
+    }, [isOpen]);
     return {
         address,
         close: () => {
@@ -19,14 +25,14 @@ export const usePsPortableTextLinkForm = ({ onClose, onSubmit, }) => {
         submit: (event) => {
             event.preventDefault();
             event.stopPropagation();
-            const href = PsPortableTextEditorService.normalizeLink(address);
-            if (href === null) {
+            const normalized = PsPortableTextEditorService.normalizeLink(address);
+            if (normalized === null) {
                 setHasError(true);
                 return;
             }
             setAddress('');
             setHasError(false);
-            onSubmit(href);
+            onSubmit(normalized);
         },
     };
 };

package/dist/esm/portable-text-core/hooks/use-ps-portable-text-toolbar.js

@@ -1,54 +1,22 @@
-import { useEditor, useEditorSelector } from '@portabletext/editor';
-import { isActiveAnnotation, isActiveDecorator, isActiveListItem, isActiveStyle, } from '@portabletext/editor/selectors';
-import { PsPortableTextCoreConfig } from '../constants/ps-portable-text-core-config';
+import { useContext } from 'react';
+import { PsPortableTextCoreContext } from '../contexts/ps-portable-text-core-context';
+import { PsPortableTextCommandService } from '../services/ps-portable-text-command-service';
 export const usePsPortableTextToolbar = () => {
-    const editor = useEditor();
-    const isBold = useEditorSelector(editor, isActiveDecorator(PsPortableTextCoreConfig.decorators.bold));
-    const isItalic = useEditorSelector(editor, isActiveDecorator(PsPortableTextCoreConfig.decorators.italic));
-    const isUnderline = useEditorSelector(editor, isActiveDecorator(PsPortableTextCoreConfig.decorators.underline));
-    const isCode = useEditorSelector(editor, isActiveDecorator(PsPortableTextCoreConfig.decorators.code));
-    const isBulletedList = useEditorSelector(editor, isActiveListItem(PsPortableTextCoreConfig.listItems.bullet));
-    const isNumberedList = useEditorSelector(editor, isActiveListItem(PsPortableTextCoreConfig.listItems.number));
-    const isQuote = useEditorSelector(editor, isActiveStyle(PsPortableTextCoreConfig.styles.blockquote));
-    const isLink = useEditorSelector(editor, isActiveAnnotation(PsPortableTextCoreConfig.linkAnnotation));
-    const focus = () => editor.send({ type: 'focus' });
+    const { closeLink, editor, isLinkOpen, openLink, state } = useContext(PsPortableTextCoreContext);
     return {
-        active: {
-            bold: isBold,
-            bulletedList: isBulletedList,
-            code: isCode,
-            italic: isItalic,
-            link: isLink,
-            numberedList: isNumberedList,
-            quote: isQuote,
-            underline: isUnderline,
-        },
-        addLink: (href) => {
-            editor.send({
-                type: 'annotation.add',
-                annotation: { name: PsPortableTextCoreConfig.linkAnnotation, value: { href } },
-            });
-            focus();
-        },
-        focus,
-        removeLink: () => {
-            editor.send({
-                type: 'annotation.remove',
-                annotation: { name: PsPortableTextCoreConfig.linkAnnotation },
-            });
-            focus();
-        },
-        toggleDecorator: (decorator) => {
-            editor.send({ type: 'decorator.toggle', decorator });
-            focus();
-        },
-        toggleListItem: (listItem) => {
-            editor.send({ type: 'list item.toggle', listItem });
-            focus();
-        },
-        toggleQuote: () => {
-            editor.send({ type: 'style.toggle', style: PsPortableTextCoreConfig.styles.blockquote });
-            focus();
+        active: state.active,
+        addLink: (href) => PsPortableTextCommandService.setLink(editor, href),
+        closeLink: () => {
+            closeLink();
+            PsPortableTextCommandService.focus(editor);
         },
+        focus: () => PsPortableTextCommandService.focus(editor),
+        isLinkOpen,
+        linkHref: state.linkHref,
+        openLink,
+        removeLink: () => PsPortableTextCommandService.removeLink(editor),
+        toggleDecorator: (decorator) => PsPortableTextCommandService.toggleDecorator(editor, decorator),
+        toggleListItem: (listItem) => PsPortableTextCommandService.toggleListItem(editor, listItem),
+        toggleQuote: () => PsPortableTextCommandService.toggleQuote(editor),
     };
 };

package/dist/esm/portable-text-core/index.js

@@ -2,5 +2,9 @@ export * from './components/ps-portable-text-core';
 export * from './constants/ps-portable-text-core-config';
 export * from './hooks/use-ps-portable-text-link-form';
 export * from './hooks/use-ps-portable-text-toolbar';
+export * from './interfaces/ps-portable-text-active-formats';
+export * from './interfaces/ps-portable-text-core-class-names';
+export * from './interfaces/ps-portable-text-core-props';
 export * from './interfaces/ps-portable-text-editor-labels';
+export * from './services/ps-portable-text-converter-service';
 export * from './services/ps-portable-text-editor-service';

package/dist/esm/portable-text-core/interfaces/ps-portable-text-active-formats.js

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

package/dist/esm/portable-text-core/interfaces/ps-portable-text-block-draft.js

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

package/dist/esm/portable-text-core/interfaces/ps-portable-text-core-class-names.js

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

package/dist/esm/portable-text-core/interfaces/ps-portable-text-core-context-data.js

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

package/dist/esm/portable-text-core/interfaces/ps-portable-text-core-props.js

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