@pallasoft/ps-input-components 1.1.1 → 1.3.0

package/dist/components/ps-calendar-header.d.ts

@@ -0,0 +1,2 @@
+import type { ReactDatePickerCustomHeaderProps } from 'react-datepicker';
+export declare const PsCalendarHeader: ({ decreaseMonth, increaseMonth, monthDate, nextMonthButtonDisabled, prevMonthButtonDisabled, }: ReactDatePickerCustomHeaderProps) => import("react").JSX.Element;

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

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

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

@@ -3,10 +3,14 @@ export interface PsDateInputProps {
     defaultValue?: string;
     disabled?: boolean;
     helperText?: string;
+    hideLabel?: boolean;
     label: string;
+    max?: string;
+    min?: string;
     name?: string;
     onChange?: (value: string) => void;
+    placeholder?: string;
     required?: boolean;
     value?: string;
 }
-export declare const PsDateInput: ({ className, defaultValue, disabled, helperText, label, name, onChange, required, value, }: PsDateInputProps) => import("react").JSX.Element;
+export declare const PsDateInput: ({ className, defaultValue, disabled, helperText, hideLabel, label, max, min, name, onChange, placeholder, required, value, }: PsDateInputProps) => import("react").JSX.Element;

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

@@ -1,7 +1,27 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PsDateInput = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const ps_design_system_1 = require("@pallasoft/ps-design-system");
-const PsDateInput = ({ className, defaultValue, disabled, helperText, label, name, onChange, required, value, }) => ((0, jsx_runtime_1.jsxs)("label", { className: ps_design_system_1.PallasoftClassNameService.merge('block', className), children: [(0, jsx_runtime_1.jsx)("span", { className: 'ps-input-label', children: label }), (0, jsx_runtime_1.jsx)("input", { className: 'ps-input-control ps-focus-ring mt-2 min-h-11 w-full text-sm font-semibold', defaultValue: value === undefined ? defaultValue : undefined, disabled: disabled, name: name, onChange: (event) => onChange?.(event.target.value), required: required, type: 'date', value: value }), helperText ? (0, jsx_runtime_1.jsx)("span", { className: 'ps-input-helper', children: helperText }) : null] }));
+const ps_icons_1 = require("@pallasoft/ps-icons");
+const react_datepicker_1 = __importDefault(require("react-datepicker"));
+const ps_date_input_config_1 = require("../constants/ps-date-input-config");
+const ps_date_input_service_1 = require("../services/ps-date-input-service");
+const ps_calendar_header_1 = require("./ps-calendar-header");
+const PsDateInput = ({ className, defaultValue, disabled, helperText, hideLabel, label, max, min, name, onChange, placeholder = ps_date_input_config_1.PsDateInputConfig.placeholder, required, value, }) => {
+    const inputId = (0, react_1.useId)();
+    const [uncontrolledValue, setUncontrolledValue] = (0, react_1.useState)(defaultValue === undefined ? '' : defaultValue);
+    const currentValue = value === undefined ? uncontrolledValue : value;
+    const handleChange = (date) => {
+        const nextValue = ps_date_input_service_1.PsDateInputService.format(date);
+        if (value === undefined)
+            setUncontrolledValue(nextValue);
+        onChange?.(nextValue);
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: ps_design_system_1.PallasoftClassNameService.merge('block', className), children: [(0, jsx_runtime_1.jsx)("label", { className: hideLabel ? 'sr-only' : 'ps-input-label block', htmlFor: inputId, children: label }), (0, jsx_runtime_1.jsxs)("div", { className: hideLabel ? 'relative' : 'relative mt-2', children: [(0, jsx_runtime_1.jsx)(react_datepicker_1.default, { autoComplete: 'off', calendarClassName: 'ps-floating-panel ps-datepicker', className: 'ps-input-control ps-focus-ring min-h-11 w-full pr-10 text-sm font-semibold', dateFormat: [...ps_date_input_config_1.PsDateInputConfig.inputFormats], disabled: disabled, id: inputId, maxDate: ps_date_input_service_1.PsDateInputService.parseBound(max), minDate: ps_date_input_service_1.PsDateInputService.parseBound(min), onChange: handleChange, placeholderText: placeholder, popperClassName: 'ps-datepicker-popper', popperPlacement: 'bottom-start', portalId: ps_date_input_config_1.PsDateInputConfig.portalId, renderCustomHeader: (headerProps) => (0, jsx_runtime_1.jsx)(ps_calendar_header_1.PsCalendarHeader, { ...headerProps }), required: required, selected: ps_date_input_service_1.PsDateInputService.parse(currentValue), showPopperArrow: false, wrapperClassName: 'block w-full' }), (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'pointer-events-none absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-ink/50', iconKey: ps_icons_1.PsIconKey.Calendar }), name ? (0, jsx_runtime_1.jsx)("input", { name: name, type: 'hidden', value: currentValue }) : null] }), helperText ? (0, jsx_runtime_1.jsx)("span", { className: 'ps-input-helper', children: helperText }) : null] }));
+};
 exports.PsDateInput = PsDateInput;

package/dist/components/ps-multi-select-input.d.ts

@@ -4,10 +4,13 @@ export interface PsMultiSelectInputProps {
     defaultValue?: string[];
     disabled?: boolean;
     helperText?: string;
+    hideLabel?: boolean;
     label: string;
     name?: string;
     onChange?: (value: string[]) => void;
     options: PsSelectOption[];
+    placeholder?: string;
+    required?: boolean;
     value?: string[];
 }
-export declare const PsMultiSelectInput: ({ className, defaultValue, disabled, helperText, label, name, onChange, options, value, }: PsMultiSelectInputProps) => import("react").JSX.Element;
+export declare const PsMultiSelectInput: ({ className, defaultValue, disabled, helperText, hideLabel, label, name, onChange, options, placeholder, required, value, }: PsMultiSelectInputProps) => import("react").JSX.Element;

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

@@ -2,10 +2,23 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PsMultiSelectInput = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const ps_design_system_1 = require("@pallasoft/ps-design-system");
+const ps_icons_1 = require("@pallasoft/ps-icons");
 const react_aria_components_1 = require("react-aria-components");
-const PsMultiSelectInput = ({ className, defaultValue, disabled, helperText, label, name, onChange, options, value, }) => {
-    const selectedProps = value === undefined ? { defaultValue } : { value };
-    return ((0, jsx_runtime_1.jsxs)(react_aria_components_1.CheckboxGroup, { ...selectedProps, className: ps_design_system_1.PallasoftClassNameService.merge('grid gap-2', className), isDisabled: disabled, onChange: onChange, children: [(0, jsx_runtime_1.jsx)(react_aria_components_1.Label, { className: 'ps-input-label', children: label }), (0, jsx_runtime_1.jsx)("div", { className: 'grid gap-2', children: options.map((option) => ((0, jsx_runtime_1.jsxs)(react_aria_components_1.Checkbox, { className: 'ps-focus-ring group flex cursor-pointer items-start gap-3 rounded-2xl border border-line bg-white/62 px-3.5 py-3 text-sm transition selected:border-primary/40 selected:bg-primary-soft/42 hover:border-primary/30 dark:border-white/10 dark:bg-white/6', name: name, value: option.value, children: [(0, jsx_runtime_1.jsx)("span", { className: 'mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded border border-line bg-white text-[0.65rem] font-black text-white group-selected:border-primary group-selected:bg-primary dark:border-white/20 dark:bg-white/8', children: "\u2713" }), (0, jsx_runtime_1.jsxs)("span", { className: 'min-w-0', children: [(0, jsx_runtime_1.jsx)("span", { className: 'block font-semibold text-ink', children: option.label }), option.description ? ((0, jsx_runtime_1.jsx)("span", { className: 'mt-1 block text-xs leading-5 text-slate-500', children: option.description })) : null] })] }, option.value))) }), helperText ? (0, jsx_runtime_1.jsx)("span", { className: 'ps-input-helper', children: helperText }) : null] }));
+const ps_select_option_item_1 = require("./ps-select-option-item");
+const PsMultiSelectInput = ({ className, defaultValue, disabled, helperText, hideLabel, label, name, onChange, options, placeholder = 'Select options', required, value, }) => {
+    const [uncontrolledValue, setUncontrolledValue] = (0, react_1.useState)(defaultValue === undefined ? [] : defaultValue);
+    const currentValue = value === undefined ? uncontrolledValue : value;
+    const labelByValue = new Map(options.map((option) => [option.value, option.label]));
+    const handleChange = (keys) => {
+        const nextValue = keys.map((key) => String(key));
+        if (value === undefined)
+            setUncontrolledValue(nextValue);
+        onChange?.(nextValue);
+    };
+    return ((0, jsx_runtime_1.jsxs)(react_aria_components_1.Select, { "aria-label": hideLabel ? label : undefined, className: ps_design_system_1.PallasoftClassNameService.merge('block', className), isDisabled: disabled, isRequired: required, name: name, onChange: handleChange, placeholder: placeholder, selectionMode: 'multiple', value: currentValue.filter((selected) => labelByValue.has(selected)), children: [hideLabel ? null : (0, jsx_runtime_1.jsx)(react_aria_components_1.Label, { className: 'ps-input-label block', children: label }), (0, jsx_runtime_1.jsxs)(react_aria_components_1.Button, { className: ps_design_system_1.PallasoftClassNameService.merge('ps-input-control ps-focus-ring relative flex min-h-11 w-full items-center py-1.5 pr-10 text-left text-sm font-semibold disabled:cursor-not-allowed disabled:opacity-60', hideLabel ? '' : 'mt-2'), children: [(0, jsx_runtime_1.jsx)(react_aria_components_1.SelectValue, { className: 'flex min-w-0 flex-1 flex-wrap gap-1.5', children: ({ isPlaceholder }) => isPlaceholder ? ((0, jsx_runtime_1.jsx)("span", { className: 'font-medium text-ink/45', children: placeholder })) : (currentValue
+                            .filter((selected) => labelByValue.has(selected))
+                            .map((selected) => ((0, jsx_runtime_1.jsx)("span", { className: 'inline-flex max-w-full items-center rounded-full bg-primary/12 px-2.5 py-0.5 text-xs font-semibold text-ink', children: (0, jsx_runtime_1.jsx)("span", { className: 'truncate', children: labelByValue.get(selected) }) }, selected)))) }), (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'pointer-events-none absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-primary', iconKey: ps_icons_1.PsIconKey.Chevron })] }), helperText ? ((0, jsx_runtime_1.jsx)(react_aria_components_1.Text, { className: 'ps-input-helper', slot: 'description', children: helperText })) : null, (0, jsx_runtime_1.jsx)(react_aria_components_1.Popover, { className: 'ps-floating-panel ps-scrollbar max-h-72 min-w-[var(--trigger-width)] overflow-y-auto p-1.5 outline-none', offset: 6, placement: 'bottom start', children: (0, jsx_runtime_1.jsx)(react_aria_components_1.ListBox, { className: 'outline-none', items: options.map((option) => ({ ...option, id: option.value })), children: (option) => (0, jsx_runtime_1.jsx)(ps_select_option_item_1.PsSelectOptionItem, { option: option }) }) })] }));
 };
 exports.PsMultiSelectInput = PsMultiSelectInput;

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

@@ -8,6 +8,7 @@ export interface PsSelectInputProps {
     defaultValue?: string;
     disabled?: boolean;
     helperText?: string;
+    hideLabel?: boolean;
     label: string;
     name?: string;
     onChange?: (value: string) => void;
@@ -16,4 +17,4 @@ export interface PsSelectInputProps {
     required?: boolean;
     value?: string;
 }
-export declare const PsSelectInput: ({ className, defaultValue, disabled, helperText, label, name, onChange, options, placeholder, required, value, }: PsSelectInputProps) => import("react").JSX.Element;
+export declare const PsSelectInput: ({ className, defaultValue, disabled, helperText, hideLabel, label, name, onChange, options, placeholder, required, value, }: PsSelectInputProps) => import("react").JSX.Element;

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

@@ -2,10 +2,22 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PsSelectInput = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const ps_design_system_1 = require("@pallasoft/ps-design-system");
 const ps_icons_1 = require("@pallasoft/ps-icons");
+const react_aria_components_1 = require("react-aria-components");
 const ps_select_input_service_1 = require("../services/ps-select-input-service");
-const PsSelectInput = ({ className, defaultValue, disabled, helperText, label, name, onChange, options, placeholder = 'Select an option', required, value, }) => ((0, jsx_runtime_1.jsxs)("label", { className: ps_design_system_1.PallasoftClassNameService.merge('block', className), children: [(0, jsx_runtime_1.jsx)("span", { className: 'ps-input-label', children: label }), (0, jsx_runtime_1.jsxs)("span", { className: 'relative mt-2 block', children: [(0, jsx_runtime_1.jsxs)("select", { className: 'ps-input-control ps-focus-ring min-h-11 w-full appearance-none pr-10 text-left font-semibold disabled:cursor-not-allowed disabled:opacity-60', defaultValue: value === undefined
-                        ? ps_select_input_service_1.PsSelectInputService.getDefaultValue(defaultValue, options)
-                        : undefined, disabled: disabled, name: name, onChange: (event) => onChange?.(event.target.value), required: required, value: value, children: [options.length === 0 || !defaultValue ? ((0, jsx_runtime_1.jsx)("option", { disabled: true, value: '', children: placeholder })) : null, options.map((option) => ((0, jsx_runtime_1.jsx)("option", { value: option.value, children: option.label }, option.value)))] }), (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', iconKey: ps_icons_1.PsIconKey.Chevron, className: 'pointer-events-none absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-primary' })] }), helperText ? (0, jsx_runtime_1.jsx)("span", { className: 'ps-input-helper', children: helperText }) : null] }));
+const ps_select_option_item_1 = require("./ps-select-option-item");
+const PsSelectInput = ({ className, defaultValue, disabled, helperText, hideLabel, label, name, onChange, options, placeholder = 'Select an option', required, value, }) => {
+    const [uncontrolledValue, setUncontrolledValue] = (0, react_1.useState)(() => ps_select_input_service_1.PsSelectInputService.getDefaultValue(defaultValue, options));
+    const currentValue = value === undefined ? uncontrolledValue : value;
+    const hasOption = options.some((option) => option.value === currentValue);
+    const handleChange = (key) => {
+        const nextValue = key === null ? '' : String(key);
+        if (value === undefined)
+            setUncontrolledValue(nextValue);
+        onChange?.(nextValue);
+    };
+    return ((0, jsx_runtime_1.jsxs)(react_aria_components_1.Select, { "aria-label": hideLabel ? label : undefined, className: ps_design_system_1.PallasoftClassNameService.merge('block', className), isDisabled: disabled, isRequired: required, name: name, onChange: handleChange, placeholder: placeholder, value: hasOption ? currentValue : null, children: [hideLabel ? null : (0, jsx_runtime_1.jsx)(react_aria_components_1.Label, { className: 'ps-input-label block', children: label }), (0, jsx_runtime_1.jsxs)(react_aria_components_1.Button, { className: ps_design_system_1.PallasoftClassNameService.merge('ps-input-control ps-focus-ring relative flex min-h-11 w-full items-center pr-10 text-left text-sm font-semibold disabled:cursor-not-allowed disabled:opacity-60', hideLabel ? '' : 'mt-2'), children: [(0, jsx_runtime_1.jsx)(react_aria_components_1.SelectValue, { className: 'min-w-0 flex-1 truncate', children: ({ isPlaceholder, selectedText }) => isPlaceholder ? ((0, jsx_runtime_1.jsx)("span", { className: 'font-medium text-ink/45', children: placeholder })) : (selectedText) }), (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'pointer-events-none absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-primary', iconKey: ps_icons_1.PsIconKey.Chevron })] }), helperText ? ((0, jsx_runtime_1.jsx)(react_aria_components_1.Text, { className: 'ps-input-helper', slot: 'description', children: helperText })) : null, (0, jsx_runtime_1.jsx)(react_aria_components_1.Popover, { className: 'ps-floating-panel ps-scrollbar max-h-72 min-w-[var(--trigger-width)] overflow-y-auto p-1.5 outline-none', offset: 6, placement: 'bottom start', children: (0, jsx_runtime_1.jsx)(react_aria_components_1.ListBox, { className: 'outline-none', items: options.map((option) => ({ ...option, id: option.value })), children: (option) => (0, jsx_runtime_1.jsx)(ps_select_option_item_1.PsSelectOptionItem, { option: option }) }) })] }));
+};
 exports.PsSelectInput = PsSelectInput;

package/dist/components/ps-select-option-item.d.ts

@@ -0,0 +1,5 @@
+import type { PsSelectOption } from './ps-select-input';
+export interface PsSelectOptionItemProps {
+    option: PsSelectOption;
+}
+export declare const PsSelectOptionItem: ({ option }: PsSelectOptionItemProps) => import("react").JSX.Element;

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

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsSelectOptionItem = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ps_icons_1 = require("@pallasoft/ps-icons");
+const react_aria_components_1 = require("react-aria-components");
+const PsSelectOptionItem = ({ option }) => ((0, jsx_runtime_1.jsx)(react_aria_components_1.ListBoxItem, { className: 'ps-floating-option text-ink', id: option.value, textValue: option.label, children: ({ isSelected }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: 'flex h-4 w-4 shrink-0 items-center justify-center text-primary', children: isSelected ? ((0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'block h-4 w-4', iconKey: ps_icons_1.PsIconKey.Check })) : null }), (0, jsx_runtime_1.jsxs)("span", { className: 'min-w-0 flex-1', children: [(0, jsx_runtime_1.jsx)("span", { className: 'block truncate', children: option.label }), option.description ? ((0, jsx_runtime_1.jsx)("span", { className: 'mt-0.5 block text-xs font-normal text-ink/55', children: option.description })) : null] })] })) }));
+exports.PsSelectOptionItem = PsSelectOptionItem;

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

@@ -1,6 +1,7 @@
 import type { InputHTMLAttributes } from 'react';
 export interface PsTextInputProps extends InputHTMLAttributes<HTMLInputElement> {
     helperText?: string;
+    hideLabel?: boolean;
     label: string;
 }
-export declare const PsTextInput: ({ className, defaultValue, disabled, helperText, label, name, onChange, required, type, value, ...props }: PsTextInputProps) => import("react").JSX.Element;
+export declare const PsTextInput: ({ className, defaultValue, disabled, helperText, hideLabel, label, name, onChange, required, type, value, ...props }: PsTextInputProps) => import("react").JSX.Element;

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

@@ -4,12 +4,12 @@ exports.PsTextInput = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const ps_design_system_1 = require("@pallasoft/ps-design-system");
 const ps_date_input_1 = require("./ps-date-input");
-const PsTextInput = ({ className, defaultValue, disabled, helperText, label, name, onChange, required, type, value, ...props }) => {
+const PsTextInput = ({ className, defaultValue, disabled, helperText, hideLabel, label, name, onChange, required, type, value, ...props }) => {
     if (type === 'date') {
-        return ((0, jsx_runtime_1.jsx)(ps_date_input_1.PsDateInput, { className: className, defaultValue: typeof defaultValue === 'string' ? defaultValue : undefined, disabled: disabled, helperText: helperText, label: label, name: name, onChange: (nextValue) => onChange?.({
+        return ((0, jsx_runtime_1.jsx)(ps_date_input_1.PsDateInput, { className: className, defaultValue: typeof defaultValue === 'string' ? defaultValue : undefined, disabled: disabled, helperText: helperText, hideLabel: hideLabel, label: label, name: name, onChange: (nextValue) => onChange?.({
                 target: { name, value: nextValue },
             }), required: required, value: typeof value === 'string' ? value : undefined }));
     }
-    return ((0, jsx_runtime_1.jsxs)("label", { className: 'block', children: [(0, jsx_runtime_1.jsx)("span", { className: 'ps-input-label', children: label }), (0, jsx_runtime_1.jsx)("input", { className: ps_design_system_1.PallasoftClassNameService.merge('ps-input-control mt-2', className), defaultValue: defaultValue, disabled: disabled, name: name, onChange: onChange, required: required, type: type, value: value, ...props }), helperText ? (0, jsx_runtime_1.jsx)("span", { className: 'ps-input-helper', children: helperText }) : null] }));
+    return ((0, jsx_runtime_1.jsxs)("label", { className: 'block', children: [(0, jsx_runtime_1.jsx)("span", { className: hideLabel ? 'sr-only' : 'ps-input-label', children: label }), (0, jsx_runtime_1.jsx)("input", { className: ps_design_system_1.PallasoftClassNameService.merge(hideLabel ? 'ps-input-control' : 'ps-input-control mt-2', className), defaultValue: defaultValue, disabled: disabled, name: name, onChange: onChange, required: required, type: type, value: value, ...props }), helperText ? (0, jsx_runtime_1.jsx)("span", { className: 'ps-input-helper', children: helperText }) : null] }));
 };
 exports.PsTextInput = PsTextInput;

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

@@ -0,0 +1,7 @@
+export declare const PsDateInputConfig: {
+    readonly inputFormats: readonly ["MMM d, yyyy", "yyyy-MM-dd", "MM/dd/yyyy", "d MMM yyyy"];
+    readonly monthLabelFormat: "MMMM YYYY";
+    readonly valueFormat: "YYYY-MM-DD";
+    readonly placeholder: "Select a date";
+    readonly portalId: "ps-floating-root";
+};

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

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsDateInputConfig = void 0;
+exports.PsDateInputConfig = {
+    inputFormats: ['MMM d, yyyy', 'yyyy-MM-dd', 'MM/dd/yyyy', 'd MMM yyyy'],
+    monthLabelFormat: 'MMMM YYYY',
+    valueFormat: 'YYYY-MM-DD',
+    placeholder: 'Select a date',
+    portalId: 'ps-floating-root',
+};

package/dist/services/ps-date-input-service.d.ts

@@ -0,0 +1,6 @@
+export declare class PsDateInputService {
+    static parse(value: string | undefined): Date | null;
+    static parseBound(value: string | undefined): Date | undefined;
+    static format(date: Date | null): string;
+    static monthLabel(date: Date): string;
+}

package/dist/services/ps-date-input-service.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsDateInputService = void 0;
+const ps_utilities_1 = require("@pallasoft/ps-utilities");
+const ps_date_input_config_1 = require("../constants/ps-date-input-config");
+class PsDateInputService {
+    static parse(value) {
+        if (value === undefined || value === '')
+            return null;
+        const date = ps_utilities_1.Common.DateService.getDate(value);
+        return date.isValid() && date.format(ps_date_input_config_1.PsDateInputConfig.valueFormat) === value
+            ? date.toDate()
+            : null;
+    }
+    static parseBound(value) {
+        const date = PsDateInputService.parse(value);
+        return date === null ? undefined : date;
+    }
+    static format(date) {
+        return date === null
+            ? ''
+            : ps_utilities_1.Common.DateService.formatDate(date.getTime(), ps_date_input_config_1.PsDateInputConfig.valueFormat);
+    }
+    static monthLabel(date) {
+        return ps_utilities_1.Common.DateService.formatDate(date.getTime(), ps_date_input_config_1.PsDateInputConfig.monthLabelFormat);
+    }
+}
+exports.PsDateInputService = PsDateInputService;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@pallasoft/ps-input-components",
-	"version": "1.1.1",
+	"version": "1.3.0",
 	"private": false,
 	"main": "./dist/index.js",
 	"types": "./dist/index.d.ts",
@@ -30,9 +30,11 @@
 	"dependencies": {
 		"@internationalized/date": "^3.12.2",
 		"@pallasoft/ps-core-components": "^2.0.0",
-		"@pallasoft/ps-design-system": "^1.1.0",
-		"@pallasoft/ps-icons": "^1.1.0",
-		"react-aria-components": "^1.19.0"
+		"@pallasoft/ps-design-system": "^1.2.1",
+		"@pallasoft/ps-icons": "^1.2.0",
+		"@pallasoft/ps-utilities": "^2.0.0",
+		"react-aria-components": "^1.19.0",
+		"react-datepicker": "^9.1.0"
 	},
 	"peerDependencies": {
 		"react": "^18 || ^19",