@pallasoft/ps-input-components 1.19.2 → 1.20.0

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

@@ -0,0 +1,13 @@
+import type { PsDatePresetData } from '../interfaces/ps-date-preset-data';
+export interface PsDatePresetFieldProps {
+    errorText?: string;
+    hideLabel?: boolean;
+    label: string;
+    onChange: (date: string) => void;
+    presets: PsDatePresetData[];
+    presetsDisabled?: boolean;
+    presetsLabel: string;
+    required?: boolean;
+    value: string;
+}
+export declare const PsDatePresetField: ({ errorText, hideLabel, label, onChange, presets, presetsDisabled, presetsLabel, required, value, }: PsDatePresetFieldProps) => import("react").JSX.Element;

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

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsDatePresetField = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ps_date_input_1 = require("./ps-date-input");
+const ps_form_control_1 = require("./ps-form-control");
+const PsDatePresetField = ({ errorText, hideLabel, label, onChange, presets, presetsDisabled = false, presetsLabel, required, value, }) => ((0, jsx_runtime_1.jsxs)("div", { className: 'flex flex-col gap-2', children: [(0, jsx_runtime_1.jsx)(ps_form_control_1.PsFormControl, { errorText: errorText, children: (0, jsx_runtime_1.jsx)(ps_date_input_1.PsDateInput, { hideLabel: hideLabel, label: label, onChange: onChange, required: required, value: value }) }), (0, jsx_runtime_1.jsx)("div", { "aria-label": presetsLabel, className: 'flex flex-wrap gap-1.5', role: 'group', children: presets.map((preset) => ((0, jsx_runtime_1.jsx)("button", { "aria-pressed": preset.date === value, className: 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))) })] }));
+exports.PsDatePresetField = PsDatePresetField;

package/dist/components/ps-select-with-create.d.ts

@@ -0,0 +1,14 @@
+import { type PsSelectOption } from './ps-select-input';
+export interface PsSelectWithCreateProps {
+    createHref: string;
+    createOptionLabel: string;
+    errorText?: string;
+    hideLabel?: boolean;
+    label: string;
+    onChange: (value: string) => void;
+    options: PsSelectOption[];
+    placeholder: string;
+    required?: boolean;
+    value: string;
+}
+export declare const PsSelectWithCreate: ({ createHref, createOptionLabel, errorText, hideLabel, label, onChange, options, placeholder, required, value, }: PsSelectWithCreateProps) => import("react").JSX.Element;

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

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsSelectWithCreate = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ps_select_with_create_config_1 = require("../constants/ps-select-with-create-config");
+const ps_form_control_1 = require("./ps-form-control");
+const ps_select_input_1 = require("./ps-select-input");
+const PsSelectWithCreate = ({ createHref, createOptionLabel, errorText, hideLabel, label, onChange, options, placeholder, required, value, }) => ((0, jsx_runtime_1.jsx)(ps_form_control_1.PsFormControl, { errorText: errorText, children: (0, jsx_runtime_1.jsx)(ps_select_input_1.PsSelectInput, { hideLabel: hideLabel, label: label, onChange: (next) => {
+            if (next !== ps_select_with_create_config_1.PsSelectWithCreateConfig.createValue) {
+                onChange(next);
+                return;
+            }
+            window.open(createHref, '_blank', 'noopener,noreferrer');
+        }, options: [
+            ...options,
+            { label: createOptionLabel, value: ps_select_with_create_config_1.PsSelectWithCreateConfig.createValue },
+        ], placeholder: placeholder, required: required, value: value }) }));
+exports.PsSelectWithCreate = PsSelectWithCreate;

package/dist/constants/ps-select-with-create-config.d.ts

@@ -0,0 +1,3 @@
+export declare const PsSelectWithCreateConfig: {
+    createValue: string;
+};

package/dist/constants/ps-select-with-create-config.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsSelectWithCreateConfig = void 0;
+exports.PsSelectWithCreateConfig = {
+    createValue: '__new__',
+};

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

@@ -0,0 +1,6 @@
+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 === value, className: 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))) })] }));

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

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PsSelectWithCreateConfig } from '../constants/ps-select-with-create-config';
+import { PsFormControl } from './ps-form-control';
+import { PsSelectInput } from './ps-select-input';
+export const PsSelectWithCreate = ({ createHref, createOptionLabel, errorText, hideLabel, label, onChange, options, placeholder, required, value, }) => (_jsx(PsFormControl, { errorText: errorText, children: _jsx(PsSelectInput, { hideLabel: hideLabel, label: label, onChange: (next) => {
+            if (next !== PsSelectWithCreateConfig.createValue) {
+                onChange(next);
+                return;
+            }
+            window.open(createHref, '_blank', 'noopener,noreferrer');
+        }, options: [
+            ...options,
+            { label: createOptionLabel, value: PsSelectWithCreateConfig.createValue },
+        ], placeholder: placeholder, required: required, value: value }) }));

package/dist/esm/constants/ps-select-with-create-config.js

@@ -0,0 +1,3 @@
+export const PsSelectWithCreateConfig = {
+    createValue: '__new__',
+};

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

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

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

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

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

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

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

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Controller } from 'react-hook-form';
+import { PsFormControl } from '../../components/ps-form-control';
+import { PsPhoneInput } from '../../components/ps-phone-input';
+import { PsFormFieldService } from '../services/ps-form-field-service';
+export const PsFormPhoneField = ({ control, country, label, name, rules, }) => (_jsx(Controller, { control: control, name: name, render: ({ field, fieldState }) => (_jsx(PsFormControl, { errorText: PsFormFieldService.error(fieldState.error), children: _jsx(PsPhoneInput, { defaultCountry: country !== undefined && country !== '' ? country : undefined, label: label, name: field.name, onBlur: field.onBlur, onChange: field.onChange, required: PsFormFieldService.isRequired(rules), value: PsFormFieldService.text(field.value) }) })), rules: rules }));

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

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

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

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Controller } from 'react-hook-form';
+import { PsFormControl } from '../../components/ps-form-control';
+import { PsTextAreaInput } from '../../components/ps-text-area-input';
+import { PsFormFieldService } from '../services/ps-form-field-service';
+export const PsFormTextAreaField = ({ control, helperText, hideLabel, label, maxLength, name, placeholder, rows, rules, }) => (_jsx(Controller, { control: control, name: name, render: ({ field, fieldState }) => (_jsx(PsFormControl, { errorText: PsFormFieldService.error(fieldState.error), children: _jsx(PsTextAreaInput, { helperText: helperText, hideLabel: hideLabel, label: label, maxLength: maxLength, name: field.name, onBlur: field.onBlur, onChange: field.onChange, placeholder: placeholder, required: PsFormFieldService.isRequired(rules), rows: rows, value: PsFormFieldService.text(field.value) }) })), rules: rules }));

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

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Controller } from 'react-hook-form';
+import { PsAmountInput } from '../../components/ps-amount-input';
+import { PsEmailInput } from '../../components/ps-email-input';
+import { PsFormControl } from '../../components/ps-form-control';
+import { PsPercentInput } from '../../components/ps-percent-input';
+import { PsPostalCodeInput } from '../../components/ps-postal-code-input';
+import { PsTextInput } from '../../components/ps-text-input';
+import { PsUrlInput } from '../../components/ps-url-input';
+import { PsFormTextKind } from '../constants/ps-form-text-kind';
+import { PsFormFieldService } from '../services/ps-form-field-service';
+export const PsFormTextField = ({ asNumber = false, autoComplete, className, control, country = '', disabled, helperText, inputMode, kind = PsFormTextKind.Text, label, maxLength, name, placeholder, rules, type, }) => (_jsx(Controller, { control: control, name: name, render: ({ field, fieldState }) => {
+        const shared = {
+            autoComplete,
+            className,
+            disabled,
+            helperText,
+            label,
+            maxLength,
+            name: field.name,
+            onBlur: field.onBlur,
+            onChange: (event) => field.onChange(asNumber ? PsFormFieldService.number(event.target.value) : event),
+            placeholder,
+            required: PsFormFieldService.isRequired(rules),
+            value: PsFormFieldService.text(field.value),
+        };
+        return (_jsxs(PsFormControl, { errorText: PsFormFieldService.error(fieldState.error), children: [kind === PsFormTextKind.Email ? _jsx(PsEmailInput, { ...shared }) : null, kind === PsFormTextKind.Url ? _jsx(PsUrlInput, { ...shared }) : null, kind === PsFormTextKind.Amount ? _jsx(PsAmountInput, { ...shared }) : null, kind === PsFormTextKind.Percent ? _jsx(PsPercentInput, { ...shared }) : null, kind === PsFormTextKind.PostalCode ? (_jsx(PsPostalCodeInput, { ...shared, country: country })) : null, kind === PsFormTextKind.Text ? (_jsx(PsTextInput, { ...shared, inputMode: inputMode, type: type })) : null] }));
+    }, rules: rules }));

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

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Controller } from 'react-hook-form';
+import { PsFormControl } from '../../components/ps-form-control';
+import { PsYearInput } from '../../components/ps-year-input';
+import { PsFormFieldService } from '../services/ps-form-field-service';
+export const PsFormYearField = ({ control, helperText, label, maxYear, name, placeholder, rules, }) => (_jsx(Controller, { control: control, name: name, render: ({ field, fieldState }) => (_jsx(PsFormControl, { errorText: PsFormFieldService.error(fieldState.error), children: _jsx(PsYearInput, { helperText: helperText, label: label, maxYear: maxYear, name: field.name, onChange: field.onChange, placeholder: placeholder, required: PsFormFieldService.isRequired(rules), value: PsFormFieldService.text(field.value) }) })), rules: rules }));

package/dist/esm/form/constants/ps-form-text-kind.js

@@ -0,0 +1,9 @@
+export var PsFormTextKind;
+(function (PsFormTextKind) {
+    PsFormTextKind["Amount"] = "amount";
+    PsFormTextKind["Email"] = "email";
+    PsFormTextKind["Percent"] = "percent";
+    PsFormTextKind["PostalCode"] = "postal-code";
+    PsFormTextKind["Text"] = "text";
+    PsFormTextKind["Url"] = "url";
+})(PsFormTextKind || (PsFormTextKind = {}));

package/dist/esm/form/index.js

@@ -0,0 +1,11 @@
+export * from './components/ps-form-cascader-field';
+export * from './components/ps-form-date-field';
+export * from './components/ps-form-money-field';
+export * from './components/ps-form-phone-field';
+export * from './components/ps-form-select-field';
+export * from './components/ps-form-text-area-field';
+export * from './components/ps-form-text-field';
+export * from './components/ps-form-year-field';
+export * from './constants/ps-form-text-kind';
+export * from './models/ps-form-field-rules';
+export * from './services/ps-form-field-service';

package/dist/esm/form/models/ps-form-field-rules.js

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

package/dist/esm/form/services/ps-form-field-service.js

@@ -0,0 +1,19 @@
+export class PsFormFieldService {
+    static isRequired(rules) {
+        return rules !== undefined && rules.required !== undefined && rules.required !== false;
+    }
+    static text(value) {
+        if (typeof value === 'string')
+            return value;
+        if (typeof value === 'number')
+            return String(value);
+        return '';
+    }
+    static error(error) {
+        return error !== undefined && typeof error.message === 'string' ? error.message : undefined;
+    }
+    static number(value) {
+        const parsed = Number(value);
+        return value.trim() === '' || !Number.isFinite(parsed) ? value : parsed;
+    }
+}

package/dist/esm/index.js

@@ -40,3 +40,7 @@ export * from './constants/ps-cascader-config';
 export * from './components/ps-currency-input';
 export * from './constants/ps-currency-input-config';
 export * from './services/ps-currency-input-service';
+export * from './components/ps-date-preset-field';
+export * from './components/ps-select-with-create';
+export * from './constants/ps-select-with-create-config';
+export * from './interfaces/ps-date-preset-data';

package/dist/esm/interfaces/ps-date-preset-data.js

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

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

@@ -0,0 +1,13 @@
+import { type Control, type FieldValues, type Path } from 'react-hook-form';
+import { type PsCascaderGroup } from '../../components/ps-cascader-input';
+import type { PsFormFieldRules } from '../models/ps-form-field-rules';
+export interface PsFormCascaderFieldProps<T extends FieldValues> {
+    control: Control<T>;
+    disabled?: boolean;
+    groups: PsCascaderGroup[];
+    label: string;
+    name: Path<T>;
+    placeholder?: string;
+    rules?: PsFormFieldRules<T>;
+}
+export declare const PsFormCascaderField: <T extends FieldValues>({ control, disabled, groups, label, name, placeholder, rules, }: PsFormCascaderFieldProps<T>) => import("react").JSX.Element;

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

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsFormCascaderField = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_hook_form_1 = require("react-hook-form");
+const ps_cascader_input_1 = require("../../components/ps-cascader-input");
+const ps_form_control_1 = require("../../components/ps-form-control");
+const ps_form_field_service_1 = require("../services/ps-form-field-service");
+const PsFormCascaderField = ({ control, disabled, groups, label, name, placeholder, rules, }) => ((0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { control: control, name: name, render: ({ field, fieldState }) => ((0, jsx_runtime_1.jsx)(ps_form_control_1.PsFormControl, { errorText: ps_form_field_service_1.PsFormFieldService.error(fieldState.error), children: (0, jsx_runtime_1.jsx)(ps_cascader_input_1.PsCascaderInput, { disabled: disabled, groups: groups, label: label, onChange: field.onChange, placeholder: placeholder, value: ps_form_field_service_1.PsFormFieldService.text(field.value) }) })), rules: rules }));
+exports.PsFormCascaderField = PsFormCascaderField;

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

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

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

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsFormDateField = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_hook_form_1 = require("react-hook-form");
+const ps_date_input_1 = require("../../components/ps-date-input");
+const ps_form_control_1 = require("../../components/ps-form-control");
+const ps_form_field_service_1 = require("../services/ps-form-field-service");
+const PsFormDateField = ({ control, helperText, label, name, rules, }) => ((0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { control: control, name: name, render: ({ field, fieldState }) => ((0, jsx_runtime_1.jsx)(ps_form_control_1.PsFormControl, { errorText: ps_form_field_service_1.PsFormFieldService.error(fieldState.error), children: (0, jsx_runtime_1.jsx)(ps_date_input_1.PsDateInput, { helperText: helperText, label: label, name: field.name, onChange: field.onChange, required: ps_form_field_service_1.PsFormFieldService.isRequired(rules), value: ps_form_field_service_1.PsFormFieldService.text(field.value) }) })), rules: rules }));
+exports.PsFormDateField = PsFormDateField;

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

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

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

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

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

@@ -0,0 +1,10 @@
+import { type Control, type FieldValues, type Path } from 'react-hook-form';
+import type { PsFormFieldRules } from '../models/ps-form-field-rules';
+export interface PsFormPhoneFieldProps<T extends FieldValues> {
+    control: Control<T>;
+    country?: string;
+    label: string;
+    name: Path<T>;
+    rules?: PsFormFieldRules<T>;
+}
+export declare const PsFormPhoneField: <T extends FieldValues>({ control, country, label, name, rules, }: PsFormPhoneFieldProps<T>) => import("react").JSX.Element;

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

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsFormPhoneField = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_hook_form_1 = require("react-hook-form");
+const ps_form_control_1 = require("../../components/ps-form-control");
+const ps_phone_input_1 = require("../../components/ps-phone-input");
+const ps_form_field_service_1 = require("../services/ps-form-field-service");
+const PsFormPhoneField = ({ control, country, label, name, rules, }) => ((0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { control: control, name: name, render: ({ field, fieldState }) => ((0, jsx_runtime_1.jsx)(ps_form_control_1.PsFormControl, { errorText: ps_form_field_service_1.PsFormFieldService.error(fieldState.error), children: (0, jsx_runtime_1.jsx)(ps_phone_input_1.PsPhoneInput, { defaultCountry: country !== undefined && country !== '' ? country : undefined, label: label, name: field.name, onBlur: field.onBlur, onChange: field.onChange, required: ps_form_field_service_1.PsFormFieldService.isRequired(rules), value: ps_form_field_service_1.PsFormFieldService.text(field.value) }) })), rules: rules }));
+exports.PsFormPhoneField = PsFormPhoneField;

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

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

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

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

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

@@ -0,0 +1,14 @@
+import { type Control, type FieldValues, type Path } from 'react-hook-form';
+import type { PsFormFieldRules } from '../models/ps-form-field-rules';
+export interface PsFormTextAreaFieldProps<T extends FieldValues> {
+    control: Control<T>;
+    helperText?: string;
+    hideLabel?: boolean;
+    label: string;
+    maxLength?: number;
+    name: Path<T>;
+    placeholder?: string;
+    rows?: number;
+    rules?: PsFormFieldRules<T>;
+}
+export declare const PsFormTextAreaField: <T extends FieldValues>({ control, helperText, hideLabel, label, maxLength, name, placeholder, rows, rules, }: PsFormTextAreaFieldProps<T>) => import("react").JSX.Element;

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

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsFormTextAreaField = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_hook_form_1 = require("react-hook-form");
+const ps_form_control_1 = require("../../components/ps-form-control");
+const ps_text_area_input_1 = require("../../components/ps-text-area-input");
+const ps_form_field_service_1 = require("../services/ps-form-field-service");
+const PsFormTextAreaField = ({ control, helperText, hideLabel, label, maxLength, name, placeholder, rows, rules, }) => ((0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { control: control, name: name, render: ({ field, fieldState }) => ((0, jsx_runtime_1.jsx)(ps_form_control_1.PsFormControl, { errorText: ps_form_field_service_1.PsFormFieldService.error(fieldState.error), children: (0, jsx_runtime_1.jsx)(ps_text_area_input_1.PsTextAreaInput, { helperText: helperText, hideLabel: hideLabel, label: label, maxLength: maxLength, name: field.name, onBlur: field.onBlur, onChange: field.onChange, placeholder: placeholder, required: ps_form_field_service_1.PsFormFieldService.isRequired(rules), rows: rows, value: ps_form_field_service_1.PsFormFieldService.text(field.value) }) })), rules: rules }));
+exports.PsFormTextAreaField = PsFormTextAreaField;

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

@@ -0,0 +1,22 @@
+import type { HTMLAttributes } from 'react';
+import { type Control, type FieldValues, type Path } from 'react-hook-form';
+import { PsFormTextKind } from '../constants/ps-form-text-kind';
+import type { PsFormFieldRules } from '../models/ps-form-field-rules';
+export interface PsFormTextFieldProps<T extends FieldValues> {
+    asNumber?: boolean;
+    autoComplete?: string;
+    className?: string;
+    control: Control<T>;
+    country?: string;
+    disabled?: boolean;
+    helperText?: string;
+    inputMode?: HTMLAttributes<HTMLInputElement>['inputMode'];
+    kind?: PsFormTextKind;
+    label: string;
+    maxLength?: number;
+    name: Path<T>;
+    placeholder?: string;
+    rules?: PsFormFieldRules<T>;
+    type?: string;
+}
+export declare const PsFormTextField: <T extends FieldValues>({ asNumber, autoComplete, className, control, country, disabled, helperText, inputMode, kind, label, maxLength, name, placeholder, rules, type, }: PsFormTextFieldProps<T>) => import("react").JSX.Element;

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

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsFormTextField = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_hook_form_1 = require("react-hook-form");
+const ps_amount_input_1 = require("../../components/ps-amount-input");
+const ps_email_input_1 = require("../../components/ps-email-input");
+const ps_form_control_1 = require("../../components/ps-form-control");
+const ps_percent_input_1 = require("../../components/ps-percent-input");
+const ps_postal_code_input_1 = require("../../components/ps-postal-code-input");
+const ps_text_input_1 = require("../../components/ps-text-input");
+const ps_url_input_1 = require("../../components/ps-url-input");
+const ps_form_text_kind_1 = require("../constants/ps-form-text-kind");
+const ps_form_field_service_1 = require("../services/ps-form-field-service");
+const PsFormTextField = ({ asNumber = false, autoComplete, className, control, country = '', disabled, helperText, inputMode, kind = ps_form_text_kind_1.PsFormTextKind.Text, label, maxLength, name, placeholder, rules, type, }) => ((0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { control: control, name: name, render: ({ field, fieldState }) => {
+        const shared = {
+            autoComplete,
+            className,
+            disabled,
+            helperText,
+            label,
+            maxLength,
+            name: field.name,
+            onBlur: field.onBlur,
+            onChange: (event) => field.onChange(asNumber ? ps_form_field_service_1.PsFormFieldService.number(event.target.value) : event),
+            placeholder,
+            required: ps_form_field_service_1.PsFormFieldService.isRequired(rules),
+            value: ps_form_field_service_1.PsFormFieldService.text(field.value),
+        };
+        return ((0, jsx_runtime_1.jsxs)(ps_form_control_1.PsFormControl, { errorText: ps_form_field_service_1.PsFormFieldService.error(fieldState.error), children: [kind === ps_form_text_kind_1.PsFormTextKind.Email ? (0, jsx_runtime_1.jsx)(ps_email_input_1.PsEmailInput, { ...shared }) : null, kind === ps_form_text_kind_1.PsFormTextKind.Url ? (0, jsx_runtime_1.jsx)(ps_url_input_1.PsUrlInput, { ...shared }) : null, kind === ps_form_text_kind_1.PsFormTextKind.Amount ? (0, jsx_runtime_1.jsx)(ps_amount_input_1.PsAmountInput, { ...shared }) : null, kind === ps_form_text_kind_1.PsFormTextKind.Percent ? (0, jsx_runtime_1.jsx)(ps_percent_input_1.PsPercentInput, { ...shared }) : null, kind === ps_form_text_kind_1.PsFormTextKind.PostalCode ? ((0, jsx_runtime_1.jsx)(ps_postal_code_input_1.PsPostalCodeInput, { ...shared, country: country })) : null, kind === ps_form_text_kind_1.PsFormTextKind.Text ? ((0, jsx_runtime_1.jsx)(ps_text_input_1.PsTextInput, { ...shared, inputMode: inputMode, type: type })) : null] }));
+    }, rules: rules }));
+exports.PsFormTextField = PsFormTextField;

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

@@ -0,0 +1,12 @@
+import { type Control, type FieldValues, type Path } from 'react-hook-form';
+import type { PsFormFieldRules } from '../models/ps-form-field-rules';
+export interface PsFormYearFieldProps<T extends FieldValues> {
+    control: Control<T>;
+    helperText?: string;
+    label: string;
+    maxYear?: number;
+    name: Path<T>;
+    placeholder?: string;
+    rules?: PsFormFieldRules<T>;
+}
+export declare const PsFormYearField: <T extends FieldValues>({ control, helperText, label, maxYear, name, placeholder, rules, }: PsFormYearFieldProps<T>) => import("react").JSX.Element;

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

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsFormYearField = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_hook_form_1 = require("react-hook-form");
+const ps_form_control_1 = require("../../components/ps-form-control");
+const ps_year_input_1 = require("../../components/ps-year-input");
+const ps_form_field_service_1 = require("../services/ps-form-field-service");
+const PsFormYearField = ({ control, helperText, label, maxYear, name, placeholder, rules, }) => ((0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { control: control, name: name, render: ({ field, fieldState }) => ((0, jsx_runtime_1.jsx)(ps_form_control_1.PsFormControl, { errorText: ps_form_field_service_1.PsFormFieldService.error(fieldState.error), children: (0, jsx_runtime_1.jsx)(ps_year_input_1.PsYearInput, { helperText: helperText, label: label, maxYear: maxYear, name: field.name, onChange: field.onChange, placeholder: placeholder, required: ps_form_field_service_1.PsFormFieldService.isRequired(rules), value: ps_form_field_service_1.PsFormFieldService.text(field.value) }) })), rules: rules }));
+exports.PsFormYearField = PsFormYearField;

package/dist/form/constants/ps-form-text-kind.d.ts

@@ -0,0 +1,8 @@
+export declare enum PsFormTextKind {
+    Amount = "amount",
+    Email = "email",
+    Percent = "percent",
+    PostalCode = "postal-code",
+    Text = "text",
+    Url = "url"
+}

package/dist/form/constants/ps-form-text-kind.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsFormTextKind = void 0;
+var PsFormTextKind;
+(function (PsFormTextKind) {
+    PsFormTextKind["Amount"] = "amount";
+    PsFormTextKind["Email"] = "email";
+    PsFormTextKind["Percent"] = "percent";
+    PsFormTextKind["PostalCode"] = "postal-code";
+    PsFormTextKind["Text"] = "text";
+    PsFormTextKind["Url"] = "url";
+})(PsFormTextKind || (exports.PsFormTextKind = PsFormTextKind = {}));

package/dist/form/index.d.ts

@@ -0,0 +1,11 @@
+export * from './components/ps-form-cascader-field';
+export * from './components/ps-form-date-field';
+export * from './components/ps-form-money-field';
+export * from './components/ps-form-phone-field';
+export * from './components/ps-form-select-field';
+export * from './components/ps-form-text-area-field';
+export * from './components/ps-form-text-field';
+export * from './components/ps-form-year-field';
+export * from './constants/ps-form-text-kind';
+export * from './models/ps-form-field-rules';
+export * from './services/ps-form-field-service';

package/dist/form/index.js

@@ -0,0 +1,27 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./components/ps-form-cascader-field"), exports);
+__exportStar(require("./components/ps-form-date-field"), exports);
+__exportStar(require("./components/ps-form-money-field"), exports);
+__exportStar(require("./components/ps-form-phone-field"), exports);
+__exportStar(require("./components/ps-form-select-field"), exports);
+__exportStar(require("./components/ps-form-text-area-field"), exports);
+__exportStar(require("./components/ps-form-text-field"), exports);
+__exportStar(require("./components/ps-form-year-field"), exports);
+__exportStar(require("./constants/ps-form-text-kind"), exports);
+__exportStar(require("./models/ps-form-field-rules"), exports);
+__exportStar(require("./services/ps-form-field-service"), exports);

package/dist/form/models/ps-form-field-rules.d.ts

@@ -0,0 +1,2 @@
+import type { FieldValues, Path, RegisterOptions } from 'react-hook-form';
+export type PsFormFieldRules<T extends FieldValues> = Omit<RegisterOptions<T, Path<T>>, 'setValueAs' | 'disabled' | 'valueAsNumber' | 'valueAsDate'>;

package/dist/form/models/ps-form-field-rules.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/form/services/ps-form-field-service.d.ts

@@ -0,0 +1,8 @@
+import type { FieldError, FieldValues } from 'react-hook-form';
+import type { PsFormFieldRules } from '../models/ps-form-field-rules';
+export declare class PsFormFieldService {
+    static isRequired<T extends FieldValues>(rules: PsFormFieldRules<T> | undefined): boolean;
+    static text(value: unknown): string;
+    static error(error: FieldError | undefined): string | undefined;
+    static number(value: string): number | string;
+}

package/dist/form/services/ps-form-field-service.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsFormFieldService = void 0;
+class PsFormFieldService {
+    static isRequired(rules) {
+        return rules !== undefined && rules.required !== undefined && rules.required !== false;
+    }
+    static text(value) {
+        if (typeof value === 'string')
+            return value;
+        if (typeof value === 'number')
+            return String(value);
+        return '';
+    }
+    static error(error) {
+        return error !== undefined && typeof error.message === 'string' ? error.message : undefined;
+    }
+    static number(value) {
+        const parsed = Number(value);
+        return value.trim() === '' || !Number.isFinite(parsed) ? value : parsed;
+    }
+}
+exports.PsFormFieldService = PsFormFieldService;

package/dist/index.d.ts

@@ -40,3 +40,7 @@ export * from './constants/ps-cascader-config';
 export * from './components/ps-currency-input';
 export * from './constants/ps-currency-input-config';
 export * from './services/ps-currency-input-service';
+export * from './components/ps-date-preset-field';
+export * from './components/ps-select-with-create';
+export * from './constants/ps-select-with-create-config';
+export * from './interfaces/ps-date-preset-data';

package/dist/index.js

@@ -56,3 +56,7 @@ __exportStar(require("./constants/ps-cascader-config"), exports);
 __exportStar(require("./components/ps-currency-input"), exports);
 __exportStar(require("./constants/ps-currency-input-config"), exports);
 __exportStar(require("./services/ps-currency-input-service"), exports);
+__exportStar(require("./components/ps-date-preset-field"), exports);
+__exportStar(require("./components/ps-select-with-create"), exports);
+__exportStar(require("./constants/ps-select-with-create-config"), exports);
+__exportStar(require("./interfaces/ps-date-preset-data"), exports);

package/dist/interfaces/ps-date-preset-data.d.ts

@@ -0,0 +1,4 @@
+export interface PsDatePresetData {
+    date: string;
+    label: string;
+}

package/dist/interfaces/ps-date-preset-data.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@pallasoft/ps-input-components",
-	"version": "1.19.2",
+	"version": "1.20.0",
 	"private": false,
 	"main": "./dist/index.js",
 	"module": "./dist/esm/index.js",
@@ -12,6 +12,12 @@
 			"module": "./dist/esm/index.js",
 			"require": "./dist/index.js",
 			"default": "./dist/index.js"
+		},
+		"./form": {
+			"types": "./dist/form/index.d.ts",
+			"module": "./dist/esm/form/index.js",
+			"require": "./dist/form/index.js",
+			"default": "./dist/form/index.js"
 		}
 	},
 	"files": [
@@ -42,7 +48,8 @@
 	},
 	"peerDependencies": {
 		"react": "^18 || ^19",
-		"react-dom": "^18 || ^19"
+		"react-dom": "^18 || ^19",
+		"react-hook-form": "^7"
 	},
 	"devDependencies": {
 		"@commitlint/cli": "^20.1.0",
@@ -70,6 +77,7 @@
 		"prettier": "^3.6.2",
 		"react": "^19.3.0",
 		"react-dom": "^19.3.0",
+		"react-hook-form": "^7.89.0",
 		"semantic-release": "^24.2.0",
 		"ts-node": "^10.9.2",
 		"typescript": "^5.9.3"
@@ -81,5 +89,17 @@
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/pallasoft/ps-input-components.git"
+	},
+	"typesVersions": {
+		"*": {
+			"form": [
+				"./dist/form/index.d.ts"
+			]
+		}
+	},
+	"peerDependenciesMeta": {
+		"react-hook-form": {
+			"optional": true
+		}
 	}
 }