@pallasoft/ps-input-components 1.8.0 → 1.10.0

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

@@ -0,0 +1,3 @@
+import { type PsTextInputProps } from './ps-text-input';
+export type PsAmountInputProps = Omit<PsTextInputProps, 'inputMode' | 'type'>;
+export declare const PsAmountInput: ({ className, onChange, ...props }: PsAmountInputProps) => import("react").JSX.Element;

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

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsAmountInput = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ps_amount_input_service_1 = require("../services/ps-amount-input-service");
+const ps_text_input_1 = require("./ps-text-input");
+const PsAmountInput = ({ className, onChange, ...props }) => ((0, jsx_runtime_1.jsx)(ps_text_input_1.PsTextInput, { ...props, autoComplete: 'off', className: className, inputMode: 'decimal', onChange: (event) => {
+        const normalised = ps_amount_input_service_1.PsAmountInputService.normalise(event.target.value);
+        if (normalised !== event.target.value)
+            event.target.value = normalised;
+        if (onChange)
+            onChange(event);
+    }, type: 'text' }));
+exports.PsAmountInput = PsAmountInput;

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

@@ -6,27 +6,12 @@ const react_1 = require("react");
 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 PsColorInput = ({ className, helperText, label, onChange, swatches = [...ps_color_input_config_1.PsColorInputConfig.swatches], value, }) => {
     const labelId = (0, react_1.useId)();
     const swatchesId = (0, react_1.useId)();
-    const [draft, setDraft] = (0, react_1.useState)(value);
     const normalised = value.toUpperCase();
-    (0, react_1.useEffect)(() => {
-        setDraft(value);
-    }, [value]);
-    const commit = (next) => {
-        const hex = next.startsWith('#') ? next : `#${next}`;
-        if (ps_color_input_config_1.PsColorInputConfig.hexPattern.test(hex))
-            onChange(hex.toUpperCase());
-        else
-            setDraft(value);
-    };
-    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.jsx)("span", { className: 'ps-input-label', id: labelId, children: label }), (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.jsxs)("div", { className: 'flex items-center gap-3', children: [(0, jsx_runtime_1.jsx)("label", { className: 'ps-focus-ring relative h-11 w-11 shrink-0 cursor-pointer overflow-hidden rounded-ps-control border border-line ring-offset-2 ring-offset-surface', style: { backgroundColor: value === '' ? 'transparent' : value }, title: 'Pick a colour', children: (0, jsx_runtime_1.jsx)("input", { "aria-label": `${label} picker`, className: 'absolute inset-0 cursor-pointer opacity-0', onChange: (event) => onChange(event.target.value.toUpperCase()), type: 'color', value: value === '' ? '#000000' : value }) }), (0, jsx_runtime_1.jsx)("input", { "aria-label": `${label} hex`, className: 'ps-input-control ps-focus-ring h-11 min-w-0 flex-1 font-mono text-sm uppercase', maxLength: 7, onBlur: (event) => commit(event.target.value), onChange: (event) => setDraft(event.target.value), onKeyDown: (event) => {
-                                    if (event.key === 'Enter') {
-                                        event.preventDefault();
-                                        commit(draft);
-                                    }
-                                }, placeholder: '#000000', value: draft })] }), (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) => {
+    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.jsx)("span", { className: 'ps-input-label', id: labelId, children: label }), (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));
                                 }) })] })] }), helperText ? (0, jsx_runtime_1.jsx)("span", { className: 'ps-input-helper', children: helperText }) : null] }));

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

@@ -0,0 +1,11 @@
+export interface PsColorPickerProps {
+    className?: string;
+    disabled?: boolean;
+    helperText?: string;
+    hideLabel?: boolean;
+    label: string;
+    onChange: (value: string) => void;
+    swatches?: string[];
+    value: string;
+}
+export declare const PsColorPicker: ({ className, disabled, helperText, hideLabel, label, onChange, swatches, value, }: PsColorPickerProps) => import("react").JSX.Element;

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

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsColorPicker = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+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_color_input_config_1 = require("../constants/ps-color-input-config");
+const ps_color_service_1 = require("../services/ps-color-service");
+const PsColorPicker = ({ className, disabled, helperText, hideLabel, label, onChange, swatches = [...ps_color_input_config_1.PsColorInputConfig.swatches], value, }) => {
+    const zIndex = (0, ps_core_components_1.usePsLayerZIndex)(ps_design_system_1.PallasoftZIndex.Dropdown);
+    const areaRef = (0, react_1.useRef)(null);
+    const [draft, setDraft] = (0, react_1.useState)(value);
+    const hsv = (0, react_1.useMemo)(() => ps_color_service_1.PsColorService.toHsv(value), [value]);
+    const swatchColor = ps_color_service_1.PsColorService.normaliseHex(value);
+    (0, react_1.useEffect)(() => {
+        setDraft(value);
+    }, [value]);
+    const commitHex = (next) => {
+        const hex = ps_color_service_1.PsColorService.normaliseHex(next);
+        if (hex)
+            onChange(hex);
+        else
+            setDraft(value);
+    };
+    const pickFromArea = (event) => {
+        const area = areaRef.current;
+        if (!area)
+            return;
+        const bounds = area.getBoundingClientRect();
+        const x = Math.min(Math.max(event.clientX - bounds.left, 0), bounds.width);
+        const y = Math.min(Math.max(event.clientY - bounds.top, 0), bounds.height);
+        onChange(ps_color_service_1.PsColorService.toHex({
+            brightness: Math.round(100 - (y / bounds.height) * 100),
+            hue: hsv.hue,
+            saturation: Math.round((x / bounds.width) * 100),
+        }));
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: ps_design_system_1.PallasoftClassNameService.merge('flex flex-col gap-2', className), children: [hideLabel ? null : (0, jsx_runtime_1.jsx)("span", { className: 'ps-input-label block', children: label }), (0, jsx_runtime_1.jsxs)(react_aria_components_1.DialogTrigger, { children: [(0, jsx_runtime_1.jsxs)(react_aria_components_1.Button, { "aria-label": hideLabel ? label : undefined, className: 'ps-input-control ps-focus-ring flex min-h-11 w-full items-center gap-3 text-left text-sm font-semibold disabled:cursor-not-allowed disabled:opacity-60', isDisabled: disabled, children: [(0, jsx_runtime_1.jsx)("span", { className: 'h-6 w-6 shrink-0 rounded-md border border-line', style: { backgroundColor: swatchColor ? swatchColor : 'transparent' } }), (0, jsx_runtime_1.jsx)("span", { className: 'font-mono text-sm uppercase', children: swatchColor ? swatchColor : 'Pick a colour' }), (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'ml-auto block h-4 w-4 shrink-0 text-primary', iconKey: ps_icons_1.PsIconKey.Chevron })] }), (0, jsx_runtime_1.jsx)(react_aria_components_1.Popover, { className: 'ps-floating-panel w-[min(calc(100vw-2rem),18rem)] outline-none', offset: 6, placement: 'bottom start', style: { zIndex }, children: (0, jsx_runtime_1.jsxs)(react_aria_components_1.Dialog, { "aria-label": label, className: 'flex flex-col gap-3 p-3 outline-none', children: [(0, jsx_runtime_1.jsx)("div", { className: 'relative h-36 w-full cursor-crosshair rounded-ps-control', onPointerDown: (event) => {
+                                        event.currentTarget.setPointerCapture(event.pointerId);
+                                        pickFromArea(event);
+                                    }, onPointerMove: (event) => {
+                                        if (event.buttons === 1)
+                                            pickFromArea(event);
+                                    }, ref: areaRef, role: 'presentation', style: {
+                                        background: `linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, hsl(${hsv.hue} 100% 50%))`,
+                                    }, children: (0, jsx_runtime_1.jsx)("span", { "aria-hidden": 'true', className: 'pointer-events-none absolute h-4 w-4 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow', style: {
+                                            left: `${hsv.saturation}%`,
+                                            top: `${100 - hsv.brightness}%`,
+                                            backgroundColor: swatchColor ? swatchColor : 'transparent',
+                                        } }) }), (0, jsx_runtime_1.jsxs)("label", { className: 'flex flex-col gap-1', children: [(0, jsx_runtime_1.jsx)("span", { className: 'ps-input-helper', children: "Hue" }), (0, jsx_runtime_1.jsx)("input", { className: 'ps-focus-ring h-3 w-full cursor-pointer appearance-none rounded-full', max: 360, min: 0, onChange: (event) => onChange(ps_color_service_1.PsColorService.toHex({ ...hsv, hue: Number(event.target.value) })), step: 1, style: {
+                                                background: 'linear-gradient(to right, #FF0000, #FFFF00, #00FF00, #00FFFF, #0000FF, #FF00FF, #FF0000)',
+                                            }, type: 'range', value: hsv.hue })] }), (0, jsx_runtime_1.jsx)("input", { "aria-label": `${label} hex`, className: 'ps-input-control ps-focus-ring h-10 w-full font-mono text-sm uppercase', maxLength: 7, onBlur: (event) => commitHex(event.target.value), onChange: (event) => setDraft(event.target.value), onKeyDown: (event) => {
+                                        if (event.key !== 'Enter')
+                                            return;
+                                        event.preventDefault();
+                                        commitHex(draft);
+                                    }, placeholder: '#000000', value: draft }), (0, jsx_runtime_1.jsx)("div", { className: 'flex flex-wrap gap-1.5', children: swatches.map((swatch) => ((0, jsx_runtime_1.jsx)("button", { "aria-label": swatch, className: ps_design_system_1.PallasoftClassNameService.merge('ps-focus-ring h-7 w-7 rounded-full ring-offset-2 ring-offset-surface transition-shadow', swatch.toUpperCase() === (swatchColor ? swatchColor : '')
+                                            ? 'ring-2 ring-ink/70'
+                                            : 'hover:ring-2 hover:ring-ink/25'), onClick: () => onChange(swatch.toUpperCase()), style: { backgroundColor: swatch }, type: 'button' }, swatch))) })] }) })] }), helperText ? (0, jsx_runtime_1.jsx)("span", { className: 'ps-input-helper', children: helperText }) : null] }));
+};
+exports.PsColorPicker = PsColorPicker;

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

@@ -0,0 +1,7 @@
+export declare const PsAmountInputConfig: {
+    readonly closeBracket: ")";
+    readonly disallowed: RegExp;
+    readonly minus: "-";
+    readonly openBracket: "(";
+    readonly point: ".";
+};

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

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsAmountInputConfig = void 0;
+exports.PsAmountInputConfig = {
+    closeBracket: ')',
+    disallowed: /[^0-9.]/g,
+    minus: '-',
+    openBracket: '(',
+    point: '.',
+};

package/dist/index.d.ts

@@ -1,6 +1,8 @@
 export * from './components/ps-cascader-input';
+export * from './components/ps-amount-input';
 export * from './components/ps-checkbox';
 export * from './components/ps-color-input';
+export * from './components/ps-color-picker';
 export * from './components/ps-combobox-input';
 export * from './components/ps-date-input';
 export * from './components/ps-dropdown';
@@ -11,3 +13,6 @@ export * from './components/ps-select-input';
 export * from './components/ps-text-area-input';
 export * from './components/ps-text-input';
 export * from './components/ps-toggle';
+export * from './services/ps-amount-input-service';
+export * from './services/ps-color-service';
+export * from './interfaces/color-hsv';

package/dist/index.js

@@ -15,8 +15,10 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./components/ps-cascader-input"), exports);
+__exportStar(require("./components/ps-amount-input"), exports);
 __exportStar(require("./components/ps-checkbox"), exports);
 __exportStar(require("./components/ps-color-input"), exports);
+__exportStar(require("./components/ps-color-picker"), exports);
 __exportStar(require("./components/ps-combobox-input"), exports);
 __exportStar(require("./components/ps-date-input"), exports);
 __exportStar(require("./components/ps-dropdown"), exports);
@@ -27,3 +29,6 @@ __exportStar(require("./components/ps-select-input"), exports);
 __exportStar(require("./components/ps-text-area-input"), exports);
 __exportStar(require("./components/ps-text-input"), exports);
 __exportStar(require("./components/ps-toggle"), exports);
+__exportStar(require("./services/ps-amount-input-service"), exports);
+__exportStar(require("./services/ps-color-service"), exports);
+__exportStar(require("./interfaces/color-hsv"), exports);

package/dist/interfaces/color-hsv.d.ts

@@ -0,0 +1,5 @@
+export interface PsColorHsv {
+    brightness: number;
+    hue: number;
+    saturation: number;
+}

package/dist/interfaces/color-hsv.js

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

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

@@ -0,0 +1,4 @@
+export declare class PsAmountInputService {
+    static normalise(raw: string): string;
+    static toNumber(raw: string): number;
+}

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

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsAmountInputService = void 0;
+const ps_amount_input_config_1 = require("../constants/ps-amount-input-config");
+class PsAmountInputService {
+    static normalise(raw) {
+        const trimmed = raw.trim();
+        const isBracketed = trimmed.startsWith(ps_amount_input_config_1.PsAmountInputConfig.openBracket) &&
+            trimmed.endsWith(ps_amount_input_config_1.PsAmountInputConfig.closeBracket);
+        const isNegative = isBracketed || trimmed.startsWith(ps_amount_input_config_1.PsAmountInputConfig.minus);
+        const kept = trimmed.replace(ps_amount_input_config_1.PsAmountInputConfig.disallowed, '');
+        const pointIndex = kept.indexOf(ps_amount_input_config_1.PsAmountInputConfig.point);
+        const digits = pointIndex === -1
+            ? kept
+            : `${kept.slice(0, pointIndex + 1)}${kept
+                .slice(pointIndex + 1)
+                .split(ps_amount_input_config_1.PsAmountInputConfig.point)
+                .join('')}`;
+        if (digits === '')
+            return isNegative && !isBracketed ? ps_amount_input_config_1.PsAmountInputConfig.minus : '';
+        return isNegative ? `${ps_amount_input_config_1.PsAmountInputConfig.minus}${digits}` : digits;
+    }
+    static toNumber(raw) {
+        const normalised = PsAmountInputService.normalise(raw);
+        const parsed = Number(normalised);
+        return normalised === '' || !Number.isFinite(parsed) ? 0 : parsed;
+    }
+}
+exports.PsAmountInputService = PsAmountInputService;

package/dist/services/ps-color-service.d.ts

@@ -0,0 +1,7 @@
+import { PsColorHsv } from '../interfaces/color-hsv';
+export declare class PsColorService {
+    static normaliseHex(value: string): string | null;
+    static toHsv(value: string): PsColorHsv;
+    static toHex({ brightness, hue, saturation }: PsColorHsv): string;
+    static readableTextOn(value: string): string;
+}

package/dist/services/ps-color-service.js

@@ -0,0 +1,77 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsColorService = void 0;
+class PsColorService {
+    static normaliseHex(value) {
+        const hex = value.trim().replace('#', '');
+        if (/^[0-9a-fA-F]{3}$/.test(hex))
+            return `#${hex
+                .split('')
+                .map((character) => character + character)
+                .join('')
+                .toUpperCase()}`;
+        return /^[0-9a-fA-F]{6}$/.test(hex) ? `#${hex.toUpperCase()}` : null;
+    }
+    static toHsv(value) {
+        const hex = PsColorService.normaliseHex(value);
+        if (!hex)
+            return { brightness: 100, hue: 0, saturation: 0 };
+        const red = parseInt(hex.slice(1, 3), 16) / 255;
+        const green = parseInt(hex.slice(3, 5), 16) / 255;
+        const blue = parseInt(hex.slice(5, 7), 16) / 255;
+        const max = Math.max(red, green, blue);
+        const min = Math.min(red, green, blue);
+        const delta = max - min;
+        let hue = 0;
+        if (delta !== 0) {
+            if (max === red)
+                hue = ((green - blue) / delta) % 6;
+            else if (max === green)
+                hue = (blue - red) / delta + 2;
+            else
+                hue = (red - green) / delta + 4;
+        }
+        return {
+            brightness: Math.round(max * 100),
+            hue: Math.round(((hue * 60) % 360) + (hue < 0 ? 360 : 0)),
+            saturation: Math.round((max === 0 ? 0 : delta / max) * 100),
+        };
+    }
+    static toHex({ brightness, hue, saturation }) {
+        const value = brightness / 100;
+        const chroma = (saturation / 100) * value;
+        const second = chroma * (1 - Math.abs(((hue / 60) % 2) - 1));
+        const match = value - chroma;
+        const sector = Math.floor(hue / 60) % 6;
+        const channels = [
+            [chroma, second, 0],
+            [second, chroma, 0],
+            [0, chroma, second],
+            [0, second, chroma],
+            [second, 0, chroma],
+            [chroma, 0, second],
+        ][sector];
+        return `#${channels
+            .map((channel) => Math.round((channel + match) * 255)
+            .toString(16)
+            .padStart(2, '0'))
+            .join('')
+            .toUpperCase()}`;
+    }
+    static readableTextOn(value) {
+        const hex = PsColorService.normaliseHex(value);
+        if (!hex)
+            return '#0F172A';
+        const channel = (part) => {
+            const normalised = part / 255;
+            return normalised <= 0.03928
+                ? normalised / 12.92
+                : Math.pow((normalised + 0.055) / 1.055, 2.4);
+        };
+        const luminance = 0.2126 * channel(parseInt(hex.slice(1, 3), 16)) +
+            0.7152 * channel(parseInt(hex.slice(3, 5), 16)) +
+            0.0722 * channel(parseInt(hex.slice(5, 7), 16));
+        return 1.05 / (luminance + 0.05) >= 3 ? '#FFFFFF' : '#0F172A';
+    }
+}
+exports.PsColorService = PsColorService;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@pallasoft/ps-input-components",
-	"version": "1.8.0",
+	"version": "1.10.0",
 	"private": false,
 	"main": "./dist/index.js",
 	"types": "./dist/index.d.ts",
@@ -29,7 +29,7 @@
 	},
 	"dependencies": {
 		"@internationalized/date": "^3.12.2",
-		"@pallasoft/ps-core-components": "^2.2.0",
+		"@pallasoft/ps-core-components": "^2.3.1",
 		"@pallasoft/ps-design-system": "^1.3.0",
 		"@pallasoft/ps-icons": "^1.2.0",
 		"@pallasoft/ps-utilities": "^2.0.0",