@pallasoft/ps-input-components 1.4.1 → 1.5.0

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

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

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

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsColorInput = 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 ps_color_input_config_1 = require("../constants/ps-color-input-config");
+const PsColorInput = ({ className, helperText, label, onChange, swatches = [...ps_color_input_config_1.PsColorInputConfig.swatches], value, }) => {
+    const labelId = (0, react_1.useId)();
+    const [draft, setDraft] = (0, react_1.useState)(value);
+    const normalised = value.toUpperCase();
+    const isCustom = value !== '' && !swatches.some((swatch) => swatch.toUpperCase() === normalised);
+    (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", { "aria-labelledby": labelId, className: 'flex flex-wrap items-center 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));
+                    }), (0, jsx_runtime_1.jsxs)("label", { className: ps_design_system_1.PallasoftClassNameService.merge('ps-focus-ring relative flex h-8 w-8 cursor-pointer items-center justify-center overflow-hidden rounded-full border border-dashed border-line text-ink/60 ring-offset-2 ring-offset-surface hover:border-primary/60 hover:text-ink', isCustom ? 'border-solid ring-2 ring-ink/70' : ''), style: isCustom ? { backgroundColor: value } : undefined, title: 'Custom colour', children: [isCustom ? null : ((0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'block h-4 w-4', iconKey: ps_icons_1.PsIconKey.Plus })), (0, jsx_runtime_1.jsx)("input", { "aria-label": 'Custom colour', 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-8 w-28 rounded-full px-3 py-0 font-mono text-xs 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 })] }), helperText ? (0, jsx_runtime_1.jsx)("span", { className: 'ps-input-helper', children: helperText }) : null] }));
+};
+exports.PsColorInput = PsColorInput;

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

@@ -0,0 +1,4 @@
+export declare const PsColorInputConfig: {
+    readonly hexPattern: RegExp;
+    readonly swatches: readonly ["#1F6FEB", "#0E9F6E", "#F59E0B", "#E02424", "#7E3AF2", "#0F172A", "#DB2777", "#0891B2"];
+};

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

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsColorInputConfig = void 0;
+exports.PsColorInputConfig = {
+    hexPattern: /^#[0-9a-fA-F]{6}$/,
+    swatches: [
+        '#1F6FEB',
+        '#0E9F6E',
+        '#F59E0B',
+        '#E02424',
+        '#7E3AF2',
+        '#0F172A',
+        '#DB2777',
+        '#0891B2',
+    ],
+};

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export * from './components/ps-checkbox';
+export * from './components/ps-color-input';
 export * from './components/ps-combobox-input';
 export * from './components/ps-date-input';
 export * from './components/ps-dropdown';

package/dist/index.js

@@ -15,6 +15,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./components/ps-checkbox"), exports);
+__exportStar(require("./components/ps-color-input"), exports);
 __exportStar(require("./components/ps-combobox-input"), exports);
 __exportStar(require("./components/ps-date-input"), exports);
 __exportStar(require("./components/ps-dropdown"), exports);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@pallasoft/ps-input-components",
-	"version": "1.4.1",
+	"version": "1.5.0",
 	"private": false,
 	"main": "./dist/index.js",
 	"types": "./dist/index.d.ts",