@pallasoft/ps-input-components 1.12.0 → 1.13.0

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-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/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-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/package.json

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