@pallasoft/ps-input-components 1.11.0 → 1.13.0

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

@@ -14,6 +14,7 @@ export interface PsCascaderInputProps {
     groups: PsCascaderGroup[];
     helperText?: string;
     hideLabel?: boolean;
+    isLoading?: boolean;
     label: string;
     onChange: (value: string) => void;
     placeholder?: string;
@@ -21,4 +22,4 @@ export interface PsCascaderInputProps {
     searchPlaceholder?: string;
     value: string;
 }
-export declare const PsCascaderInput: ({ className, disabled, groups, helperText, hideLabel, label, onChange, placeholder, required, searchPlaceholder, value, }: PsCascaderInputProps) => import("react").JSX.Element;
+export declare const PsCascaderInput: ({ className, disabled, groups, helperText, hideLabel, isLoading, label, onChange, placeholder, required, searchPlaceholder, value, }: PsCascaderInputProps) => import("react").JSX.Element;

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

@@ -8,8 +8,11 @@ const ps_design_system_1 = require("@pallasoft/ps-design-system");
 const ps_icons_1 = require("@pallasoft/ps-icons");
 const react_aria_components_1 = require("react-aria-components");
 const ps_cascader_service_1 = require("../services/ps-cascader-service");
+const ps_field_skeleton_1 = require("./ps-field-skeleton");
 const ps_required_mark_1 = require("./ps-required-mark");
-const PsCascaderInput = ({ className, disabled, groups, helperText, hideLabel, label, onChange, placeholder = 'Select an option', required, searchPlaceholder = 'Search', value, }) => {
+const PsCascaderInput = ({ className, disabled, groups, helperText, hideLabel, isLoading = false, label, onChange, placeholder = 'Select an option', required, searchPlaceholder = 'Search', value, }) => {
+    if (isLoading)
+        return (0, jsx_runtime_1.jsx)(ps_field_skeleton_1.PsFieldSkeleton, { className: className, hideLabel: hideLabel, label: label });
     const zIndex = (0, ps_core_components_1.usePsLayerZIndex)(ps_design_system_1.PallasoftZIndex.Dropdown);
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
     const [query, setQuery] = (0, react_1.useState)('');

package/dist/components/ps-checkbox.d.ts

@@ -4,10 +4,11 @@ export interface PsCheckboxProps {
     className?: string;
     isDisabled?: boolean;
     isIndeterminate?: boolean;
+    isLoading?: boolean;
     isSelected: boolean;
     label: string;
     name?: string;
     onChange: (isSelected: boolean) => void;
     value?: string;
 }
-export declare const PsCheckbox: ({ children, className, isDisabled, isIndeterminate, isSelected, label, name, onChange, value, }: PsCheckboxProps) => import("react").JSX.Element;
+export declare const PsCheckbox: ({ children, className, isDisabled, isIndeterminate, isLoading, isSelected, label, name, onChange, value, }: PsCheckboxProps) => import("react").JSX.Element;

package/dist/components/ps-checkbox.js

@@ -5,7 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 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 PsCheckbox = ({ children, className, isDisabled, isIndeterminate, isSelected, label, name, onChange, value, }) => ((0, jsx_runtime_1.jsx)(react_aria_components_1.Checkbox, { "aria-label": children ? undefined : label, className: ps_design_system_1.PallasoftClassNameService.merge('group inline-flex cursor-pointer items-center gap-3 text-sm text-ink outline-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-45', className), isDisabled: isDisabled, isIndeterminate: isIndeterminate, isSelected: isSelected, name: name, onChange: onChange, value: value, children: ({ isIndeterminate: showDash, isSelected: showCheck }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: ps_design_system_1.PallasoftClassNameService.merge('flex h-[1.125rem] w-[1.125rem] shrink-0 items-center justify-center rounded-[0.35rem] border transition-colors duration-150 group-data-[focus-visible]:outline group-data-[focus-visible]:outline-2 group-data-[focus-visible]:outline-offset-2 group-data-[focus-visible]:outline-[rgb(var(--ps-color-primary-rgb))]', showCheck || showDash
+const PsCheckbox = ({ children, className, isDisabled, isIndeterminate, isLoading = false, isSelected, label, name, onChange, value, }) => isLoading ? ((0, jsx_runtime_1.jsx)("span", { "aria-busy": 'true', className: ps_design_system_1.PallasoftClassNameService.merge('ps-skeleton inline-block h-5 w-5 rounded-md', className), role: 'status', children: (0, jsx_runtime_1.jsx)("span", { className: 'sr-only', children: label }) })) : ((0, jsx_runtime_1.jsx)(react_aria_components_1.Checkbox, { "aria-label": children ? undefined : label, className: ps_design_system_1.PallasoftClassNameService.merge('group inline-flex cursor-pointer items-center gap-3 text-sm text-ink outline-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-45', className), isDisabled: isDisabled, isIndeterminate: isIndeterminate, isSelected: isSelected, name: name, onChange: onChange, value: value, children: ({ isIndeterminate: showDash, isSelected: showCheck }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: ps_design_system_1.PallasoftClassNameService.merge('flex h-[1.125rem] w-[1.125rem] shrink-0 items-center justify-center rounded-[0.35rem] border transition-colors duration-150 group-data-[focus-visible]:outline group-data-[focus-visible]:outline-2 group-data-[focus-visible]:outline-offset-2 group-data-[focus-visible]:outline-[rgb(var(--ps-color-primary-rgb))]', showCheck || showDash
                     ? 'border-primary bg-primary text-[color:var(--ps-color-primary-contrast)]'
                     : 'border-line bg-surface group-hover:border-primary/60 dark:border-white/20'), children: showDash ? ((0, jsx_runtime_1.jsx)("span", { className: 'block h-0.5 w-2.5 rounded-full bg-current' })) : showCheck ? ((0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'block h-3.5 w-3.5', iconKey: ps_icons_1.PsIconKey.Check, strokeWidth: 3 })) : null }), children] })) }));
 exports.PsCheckbox = PsCheckbox;

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

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

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

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

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

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

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

@@ -13,8 +13,11 @@ const react_datepicker_1 = __importDefault(require("react-datepicker"));
 const ps_date_input_config_1 = require("../constants/ps-date-input-config");
 const ps_date_input_service_1 = require("../services/ps-date-input-service");
 const ps_calendar_header_1 = require("./ps-calendar-header");
+const ps_field_skeleton_1 = require("./ps-field-skeleton");
 const ps_required_mark_1 = require("./ps-required-mark");
-const PsDateInput = ({ className, defaultValue, disabled, helperText, hideLabel, label, max, min, name, onChange, placeholder = ps_date_input_config_1.PsDateInputConfig.placeholder, required, value, }) => {
+const PsDateInput = ({ className, defaultValue, disabled, helperText, hideLabel, isLoading = false, label, max, min, name, onChange, placeholder = ps_date_input_config_1.PsDateInputConfig.placeholder, required, value, }) => {
+    if (isLoading)
+        return (0, jsx_runtime_1.jsx)(ps_field_skeleton_1.PsFieldSkeleton, { className: className, hideLabel: hideLabel, label: label });
     const inputId = (0, react_1.useId)();
     const portalId = `${ps_date_input_config_1.PsDateInputConfig.portalId}-${inputId.replace(/:/g, '')}`;
     const zIndex = (0, ps_core_components_1.usePsLayerZIndex)(ps_design_system_1.PallasoftZIndex.Dropdown);

package/dist/components/ps-field-skeleton.d.ts

@@ -0,0 +1,7 @@
+export interface PsFieldSkeletonProps {
+    className?: string;
+    hideLabel?: boolean;
+    label: string;
+    rows?: number;
+}
+export declare const PsFieldSkeleton: ({ className, hideLabel, label, rows, }: PsFieldSkeletonProps) => import("react").JSX.Element;

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsFieldSkeleton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ps_design_system_1 = require("@pallasoft/ps-design-system");
+const PsFieldSkeleton = ({ className, hideLabel, label, rows = 1, }) => ((0, jsx_runtime_1.jsxs)("div", { "aria-busy": 'true', className: 'block', role: 'status', children: [(0, jsx_runtime_1.jsx)("span", { className: 'sr-only', children: label }), hideLabel ? null : (0, jsx_runtime_1.jsx)("span", { className: 'ps-skeleton mb-2 block h-2.5 w-24 rounded-full' }), (0, jsx_runtime_1.jsx)("span", { className: ps_design_system_1.PallasoftClassNameService.merge('ps-skeleton block w-full rounded-ps-control', rows > 1 ? 'min-h-24' : 'min-h-11', className) })] }));
+exports.PsFieldSkeleton = PsFieldSkeleton;

package/dist/components/ps-file-picker.d.ts

@@ -4,9 +4,10 @@ export interface PsFilePickerProps {
     className?: string;
     disabled?: boolean;
     dropLabel: string;
+    isLoading?: boolean;
     maxSizeBytes?: number;
     maxSizeLabel?: string;
     onError?: (message: string) => void;
     onFileLoad: (file: File) => void;
 }
-export declare const PsFilePicker: ({ accept, acceptLabel, className, disabled, dropLabel, maxSizeBytes, maxSizeLabel, onError, onFileLoad, }: PsFilePickerProps) => import("react").JSX.Element;
+export declare const PsFilePicker: ({ accept, acceptLabel, className, disabled, dropLabel, isLoading, maxSizeBytes, maxSizeLabel, onError, onFileLoad, }: PsFilePickerProps) => import("react").JSX.Element;

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

@@ -5,8 +5,10 @@ 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 PsFilePicker = ({ accept, acceptLabel, className, disabled, dropLabel, maxSizeBytes, maxSizeLabel, onError, onFileLoad, }) => {
+const PsFilePicker = ({ accept, acceptLabel, className, disabled, dropLabel, isLoading = false, maxSizeBytes, maxSizeLabel, onError, onFileLoad, }) => {
     const acceptAttr = (0, react_1.useMemo)(() => accept.join(','), [accept]);
+    if (isLoading)
+        return ((0, jsx_runtime_1.jsx)("span", { "aria-busy": 'true', className: ps_design_system_1.PallasoftClassNameService.merge('ps-skeleton block min-h-32 w-full rounded-ps-panel', className), role: 'status' }));
     const isAccepted = (candidate) => accept.some((entry) => entry.startsWith('.')
         ? candidate.name.toLowerCase().endsWith(entry.toLowerCase())
         : entry === candidate.type);

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

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

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

@@ -7,13 +7,16 @@ const ps_core_components_1 = require("@pallasoft/ps-core-components");
 const ps_design_system_1 = require("@pallasoft/ps-design-system");
 const ps_icons_1 = require("@pallasoft/ps-icons");
 const react_aria_components_1 = require("react-aria-components");
+const ps_field_skeleton_1 = require("./ps-field-skeleton");
 const ps_required_mark_1 = require("./ps-required-mark");
 const ps_select_option_item_1 = require("./ps-select-option-item");
-const PsMultiSelectInput = ({ className, defaultValue, disabled, helperText, hideLabel, label, name, onChange, options, placeholder = 'Select options', required, value, }) => {
+const PsMultiSelectInput = ({ className, defaultValue, disabled, helperText, hideLabel, isLoading = false, 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 zIndex = (0, ps_core_components_1.usePsLayerZIndex)(ps_design_system_1.PallasoftZIndex.Dropdown);
     const labelByValue = new Map(options.map((option) => [option.value, option.label]));
+    if (isLoading)
+        return (0, jsx_runtime_1.jsx)(ps_field_skeleton_1.PsFieldSkeleton, { className: className, hideLabel: hideLabel, label: label });
     const handleChange = (keys) => {
         const nextValue = keys.map((key) => String(key));
         if (value === undefined)

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

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

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

@@ -8,9 +8,12 @@ const ps_design_system_1 = require("@pallasoft/ps-design-system");
 const ps_icons_1 = require("@pallasoft/ps-icons");
 const react_aria_components_1 = require("react-aria-components");
 const ps_select_input_service_1 = require("../services/ps-select-input-service");
+const ps_field_skeleton_1 = require("./ps-field-skeleton");
 const ps_required_mark_1 = require("./ps-required-mark");
 const ps_select_option_item_1 = require("./ps-select-option-item");
-const PsSelectInput = ({ className, defaultValue, disabled, helperText, hideLabel, label, name, onChange, options, placeholder = 'Select an option', required, value, }) => {
+const PsSelectInput = ({ className, defaultValue, disabled, helperText, hideLabel, isLoading = false, label, name, onChange, options, placeholder = 'Select an option', required, value, }) => {
+    if (isLoading)
+        return (0, jsx_runtime_1.jsx)(ps_field_skeleton_1.PsFieldSkeleton, { className: className, hideLabel: hideLabel, label: label });
     const [uncontrolledValue, setUncontrolledValue] = (0, react_1.useState)(() => ps_select_input_service_1.PsSelectInputService.getDefaultValue(defaultValue, options));
     const currentValue = value === undefined ? uncontrolledValue : value;
     const zIndex = (0, ps_core_components_1.usePsLayerZIndex)(ps_design_system_1.PallasoftZIndex.Dropdown);

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

@@ -2,6 +2,7 @@ import type { TextareaHTMLAttributes } from 'react';
 export interface PsTextAreaInputProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
     helperText?: string;
     hideLabel?: boolean;
+    isLoading?: boolean;
     label: string;
 }
-export declare const PsTextAreaInput: ({ className, helperText, hideLabel, label, required, rows, ...props }: PsTextAreaInputProps) => import("react").JSX.Element;
+export declare const PsTextAreaInput: ({ className, helperText, hideLabel, isLoading, label, required, rows, ...props }: PsTextAreaInputProps) => import("react").JSX.Element;

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

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

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

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

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

@@ -4,8 +4,11 @@ exports.PsTextInput = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const ps_design_system_1 = require("@pallasoft/ps-design-system");
 const ps_date_input_1 = require("./ps-date-input");
+const ps_field_skeleton_1 = require("./ps-field-skeleton");
 const ps_required_mark_1 = require("./ps-required-mark");
-const PsTextInput = ({ className, defaultValue, disabled, helperText, hideLabel, label, name, onChange, required, type, value, ...props }) => {
+const PsTextInput = ({ className, defaultValue, disabled, helperText, hideLabel, isLoading = false, label, name, onChange, required, type, value, ...props }) => {
+    if (isLoading)
+        return (0, jsx_runtime_1.jsx)(ps_field_skeleton_1.PsFieldSkeleton, { className: className, hideLabel: hideLabel, label: label });
     if (type === 'date') {
         return ((0, jsx_runtime_1.jsx)(ps_date_input_1.PsDateInput, { className: className, defaultValue: typeof defaultValue === 'string' ? defaultValue : undefined, disabled: disabled, helperText: helperText, hideLabel: hideLabel, label: label, name: name, onChange: (nextValue) => onChange?.({
                 target: { name, value: nextValue },

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

@@ -5,8 +5,11 @@ import { PallasoftClassNameService, PallasoftZIndex } from '@pallasoft/ps-design
 import { PsIcon, PsIconKey } from '@pallasoft/ps-icons';
 import { Button, Dialog, DialogTrigger, Popover } from 'react-aria-components';
 import { PsCascaderService } from '../services/ps-cascader-service';
+import { PsFieldSkeleton } from './ps-field-skeleton';
 import { PsRequiredMark } from './ps-required-mark';
-export const PsCascaderInput = ({ className, disabled, groups, helperText, hideLabel, label, onChange, placeholder = 'Select an option', required, searchPlaceholder = 'Search', value, }) => {
+export const PsCascaderInput = ({ className, disabled, groups, helperText, hideLabel, isLoading = false, label, onChange, placeholder = 'Select an option', required, searchPlaceholder = 'Search', value, }) => {
+    if (isLoading)
+        return _jsx(PsFieldSkeleton, { className: className, hideLabel: hideLabel, label: label });
     const zIndex = usePsLayerZIndex(PallasoftZIndex.Dropdown);
     const [isOpen, setIsOpen] = useState(false);
     const [query, setQuery] = useState('');

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

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

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

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

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

@@ -7,8 +7,11 @@ import DatePicker from 'react-datepicker';
 import { PsDateInputConfig } from '../constants/ps-date-input-config';
 import { PsDateInputService } from '../services/ps-date-input-service';
 import { PsCalendarHeader } from './ps-calendar-header';
+import { PsFieldSkeleton } from './ps-field-skeleton';
 import { PsRequiredMark } from './ps-required-mark';
-export const PsDateInput = ({ className, defaultValue, disabled, helperText, hideLabel, label, max, min, name, onChange, placeholder = PsDateInputConfig.placeholder, required, value, }) => {
+export const PsDateInput = ({ className, defaultValue, disabled, helperText, hideLabel, isLoading = false, label, max, min, name, onChange, placeholder = PsDateInputConfig.placeholder, required, value, }) => {
+    if (isLoading)
+        return _jsx(PsFieldSkeleton, { className: className, hideLabel: hideLabel, label: label });
     const inputId = useId();
     const portalId = `${PsDateInputConfig.portalId}-${inputId.replace(/:/g, '')}`;
     const zIndex = usePsLayerZIndex(PallasoftZIndex.Dropdown);

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

@@ -0,0 +1,3 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
+export const 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) })] }));

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

@@ -2,8 +2,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } from 'react';
 import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
 import { PsIcon } from '@pallasoft/ps-icons';
-export const PsFilePicker = ({ accept, acceptLabel, className, disabled, dropLabel, maxSizeBytes, maxSizeLabel, onError, onFileLoad, }) => {
+export const PsFilePicker = ({ accept, acceptLabel, className, disabled, dropLabel, isLoading = false, maxSizeBytes, maxSizeLabel, onError, onFileLoad, }) => {
     const acceptAttr = useMemo(() => accept.join(','), [accept]);
+    if (isLoading)
+        return (_jsx("span", { "aria-busy": 'true', className: PallasoftClassNameService.merge('ps-skeleton block min-h-32 w-full rounded-ps-panel', className), role: 'status' }));
     const isAccepted = (candidate) => accept.some((entry) => entry.startsWith('.')
         ? candidate.name.toLowerCase().endsWith(entry.toLowerCase())
         : entry === candidate.type);

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

@@ -4,13 +4,16 @@ import { usePsLayerZIndex } from '@pallasoft/ps-core-components';
 import { PallasoftClassNameService, PallasoftZIndex } from '@pallasoft/ps-design-system';
 import { PsIcon, PsIconKey } from '@pallasoft/ps-icons';
 import { Button, Label, ListBox, Popover, Select, SelectValue, Text, } from 'react-aria-components';
+import { PsFieldSkeleton } from './ps-field-skeleton';
 import { PsRequiredMark } from './ps-required-mark';
 import { PsSelectOptionItem } from './ps-select-option-item';
-export const PsMultiSelectInput = ({ className, defaultValue, disabled, helperText, hideLabel, label, name, onChange, options, placeholder = 'Select options', required, value, }) => {
+export const PsMultiSelectInput = ({ className, defaultValue, disabled, helperText, hideLabel, isLoading = false, label, name, onChange, options, placeholder = 'Select options', required, value, }) => {
     const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue === undefined ? [] : defaultValue);
     const currentValue = value === undefined ? uncontrolledValue : value;
     const zIndex = usePsLayerZIndex(PallasoftZIndex.Dropdown);
     const labelByValue = new Map(options.map((option) => [option.value, option.label]));
+    if (isLoading)
+        return _jsx(PsFieldSkeleton, { className: className, hideLabel: hideLabel, label: label });
     const handleChange = (keys) => {
         const nextValue = keys.map((key) => String(key));
         if (value === undefined)

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

@@ -5,9 +5,12 @@ import { PallasoftClassNameService, PallasoftZIndex } from '@pallasoft/ps-design
 import { PsIcon, PsIconKey } from '@pallasoft/ps-icons';
 import { Button, Label, ListBox, Popover, Select, SelectValue, Text, } from 'react-aria-components';
 import { PsSelectInputService } from '../services/ps-select-input-service';
+import { PsFieldSkeleton } from './ps-field-skeleton';
 import { PsRequiredMark } from './ps-required-mark';
 import { PsSelectOptionItem } from './ps-select-option-item';
-export const PsSelectInput = ({ className, defaultValue, disabled, helperText, hideLabel, label, name, onChange, options, placeholder = 'Select an option', required, value, }) => {
+export const PsSelectInput = ({ className, defaultValue, disabled, helperText, hideLabel, isLoading = false, label, name, onChange, options, placeholder = 'Select an option', required, value, }) => {
+    if (isLoading)
+        return _jsx(PsFieldSkeleton, { className: className, hideLabel: hideLabel, label: label });
     const [uncontrolledValue, setUncontrolledValue] = useState(() => PsSelectInputService.getDefaultValue(defaultValue, options));
     const currentValue = value === undefined ? uncontrolledValue : value;
     const zIndex = usePsLayerZIndex(PallasoftZIndex.Dropdown);

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

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
+import { PsFieldSkeleton } from './ps-field-skeleton';
 import { PsRequiredMark } from './ps-required-mark';
-export const PsTextAreaInput = ({ className, helperText, hideLabel, label, required, rows = 4, ...props }) => (_jsxs("label", { className: 'block', children: [_jsxs("span", { className: hideLabel ? 'sr-only' : 'ps-input-label', children: [label, _jsx(PsRequiredMark, { isRequired: required })] }), _jsx("textarea", { className: PallasoftClassNameService.merge(hideLabel ? 'ps-input-control' : 'ps-input-control mt-2', 'min-h-24 resize-y leading-6', className), required: required, rows: rows, ...props }), helperText ? _jsx("span", { className: 'ps-input-helper', children: helperText }) : null] }));
+export const PsTextAreaInput = ({ className, helperText, hideLabel, isLoading = false, label, required, rows = 4, ...props }) => isLoading ? (_jsx(PsFieldSkeleton, { className: className, hideLabel: hideLabel, label: label, rows: 3 })) : (_jsxs("label", { className: 'block', children: [_jsxs("span", { className: hideLabel ? 'sr-only' : 'ps-input-label', children: [label, _jsx(PsRequiredMark, { isRequired: required })] }), _jsx("textarea", { className: PallasoftClassNameService.merge(hideLabel ? 'ps-input-control' : 'ps-input-control mt-2', 'min-h-24 resize-y leading-6', className), required: required, rows: rows, ...props }), helperText ? _jsx("span", { className: 'ps-input-helper', children: helperText }) : null] }));

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

@@ -1,8 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
 import { PsDateInput } from './ps-date-input';
+import { PsFieldSkeleton } from './ps-field-skeleton';
 import { PsRequiredMark } from './ps-required-mark';
-export const PsTextInput = ({ className, defaultValue, disabled, helperText, hideLabel, label, name, onChange, required, type, value, ...props }) => {
+export const PsTextInput = ({ className, defaultValue, disabled, helperText, hideLabel, isLoading = false, label, name, onChange, required, type, value, ...props }) => {
+    if (isLoading)
+        return _jsx(PsFieldSkeleton, { className: className, hideLabel: hideLabel, label: label });
     if (type === 'date') {
         return (_jsx(PsDateInput, { className: className, defaultValue: typeof defaultValue === 'string' ? defaultValue : undefined, disabled: disabled, helperText: helperText, hideLabel: hideLabel, label: label, name: name, onChange: (nextValue) => onChange?.({
                 target: { name, value: nextValue },

package/dist/esm/index.js

@@ -7,6 +7,7 @@ export * from './components/ps-combobox-input';
 export * from './components/ps-date-input';
 export * from './components/ps-dropdown';
 export * from './components/ps-file-picker';
+export * from './components/ps-field-skeleton';
 export * from './components/ps-form-control';
 export * from './components/ps-multi-select-input';
 export * from './components/ps-select-input';

package/dist/index.d.ts

@@ -7,6 +7,7 @@ export * from './components/ps-combobox-input';
 export * from './components/ps-date-input';
 export * from './components/ps-dropdown';
 export * from './components/ps-file-picker';
+export * from './components/ps-field-skeleton';
 export * from './components/ps-form-control';
 export * from './components/ps-multi-select-input';
 export * from './components/ps-select-input';

package/dist/index.js

@@ -23,6 +23,7 @@ __exportStar(require("./components/ps-combobox-input"), exports);
 __exportStar(require("./components/ps-date-input"), exports);
 __exportStar(require("./components/ps-dropdown"), exports);
 __exportStar(require("./components/ps-file-picker"), exports);
+__exportStar(require("./components/ps-field-skeleton"), exports);
 __exportStar(require("./components/ps-form-control"), exports);
 __exportStar(require("./components/ps-multi-select-input"), exports);
 __exportStar(require("./components/ps-select-input"), exports);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@pallasoft/ps-input-components",
-	"version": "1.11.0",
+	"version": "1.13.0",
 	"private": false,
 	"main": "./dist/index.js",
 	"module": "./dist/esm/index.js",