@pallasoft/ps-input-components 1.22.0 → 1.23.0

package/dist/components/ps-option-card-group.d.ts

@@ -0,0 +1,8 @@
+import type { PsOptionCardData } from '../interfaces/ps-option-card-data';
+export interface PsOptionCardGroupProps {
+    label: string;
+    onChange: (value: string) => void;
+    options: PsOptionCardData[];
+    value: string;
+}
+export declare const PsOptionCardGroup: ({ label, onChange, options, value }: PsOptionCardGroupProps) => import("react").JSX.Element;

package/dist/components/ps-option-card-group.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsOptionCardGroup = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ps_design_system_1 = require("@pallasoft/ps-design-system");
+const PsOptionCardGroup = ({ label, onChange, options, value }) => ((0, jsx_runtime_1.jsx)("div", { "aria-label": label, className: 'grid gap-3 sm:grid-cols-2', role: 'radiogroup', children: options.map((option) => {
+        const isSelected = option.value === value;
+        return ((0, jsx_runtime_1.jsxs)("button", { "aria-checked": isSelected, className: ps_design_system_1.PallasoftClassNameService.merge('ps-focus-ring flex flex-col gap-1 rounded-ps-card border px-4 py-3 text-left transition-colors', isSelected
+                ? 'border-primary bg-primary/5 ring-2 ring-primary/25'
+                : 'border-line hover:border-primary/40'), onClick: () => onChange(option.value), role: 'radio', type: 'button', children: [(0, jsx_runtime_1.jsx)("span", { className: 'text-sm font-semibold text-ink', children: option.label }), (0, jsx_runtime_1.jsx)("span", { className: 'text-xs text-ink/60', children: option.description })] }, option.value));
+    }) }));
+exports.PsOptionCardGroup = PsOptionCardGroup;

package/dist/esm/components/ps-option-card-group.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
+export const PsOptionCardGroup = ({ label, onChange, options, value }) => (_jsx("div", { "aria-label": label, className: 'grid gap-3 sm:grid-cols-2', role: 'radiogroup', children: options.map((option) => {
+        const isSelected = option.value === value;
+        return (_jsxs("button", { "aria-checked": isSelected, className: PallasoftClassNameService.merge('ps-focus-ring flex flex-col gap-1 rounded-ps-card border px-4 py-3 text-left transition-colors', isSelected
+                ? 'border-primary bg-primary/5 ring-2 ring-primary/25'
+                : 'border-line hover:border-primary/40'), onClick: () => onChange(option.value), role: 'radio', type: 'button', children: [_jsx("span", { className: 'text-sm font-semibold text-ink', children: option.label }), _jsx("span", { className: 'text-xs text-ink/60', children: option.description })] }, option.value));
+    }) }));

package/dist/esm/form/components/ps-form-name-modal.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect } from 'react';
+import { PsFormModal } from '@pallasoft/ps-popovers';
+import { useForm } from 'react-hook-form';
+import { PsFormTextField } from './ps-form-text-field';
+export const PsFormNameModal = ({ cancelLabel, initialName, isOpen, isSubmitting = false, label, maxLength = 80, onClose, onSave, placeholder, requiredMessage, submitLabel, title, }) => {
+    const { control, formState: { isDirty, isValid }, handleSubmit, reset, } = useForm({ mode: 'onChange' });
+    useEffect(() => {
+        if (isOpen)
+            reset({ name: initialName });
+    }, [initialName, isOpen, reset]);
+    return (_jsx(PsFormModal, { cancelLabel: cancelLabel, isOpen: isOpen, isSubmitDisabled: !isValid || (initialName !== '' && !isDirty), isSubmitting: isSubmitting, onClose: onClose, onSubmit: handleSubmit((values) => onSave(values.name.trim())), size: 'sm', submitLabel: submitLabel, title: title, children: _jsx(PsFormTextField, { control: control, label: label, maxLength: maxLength, name: 'name', placeholder: placeholder, rules: {
+                required: requiredMessage,
+                validate: (value) => value.trim() !== '' || requiredMessage,
+            } }) }));
+};

package/dist/esm/form/index.js

@@ -9,3 +9,5 @@ export * from './components/ps-form-year-field';
 export * from './constants/ps-form-text-kind';
 export * from './models/ps-form-field-rules';
 export * from './services/ps-form-field-service';
+export * from './components/ps-form-name-modal';
+export * from './models/ps-form-name-data';

package/dist/esm/form/models/ps-form-name-data.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/index.js

@@ -47,3 +47,5 @@ export * from './constants/ps-select-with-create-config';
 export * from './interfaces/ps-date-preset-data';
 export * from './components/ps-portable-text-editor';
 export * from './interfaces/ps-portable-text-editor-labels';
+export * from './components/ps-option-card-group';
+export * from './interfaces/ps-option-card-data';

package/dist/esm/interfaces/ps-option-card-data.js

@@ -0,0 +1 @@
+export {};

package/dist/form/components/ps-form-name-modal.d.ts

@@ -0,0 +1,15 @@
+export interface PsFormNameModalProps {
+    cancelLabel: string;
+    initialName: string;
+    isOpen: boolean;
+    isSubmitting?: boolean;
+    label: string;
+    maxLength?: number;
+    onClose: () => void;
+    onSave: (name: string) => void;
+    placeholder?: string;
+    requiredMessage: string;
+    submitLabel: string;
+    title: string;
+}
+export declare const PsFormNameModal: ({ cancelLabel, initialName, isOpen, isSubmitting, label, maxLength, onClose, onSave, placeholder, requiredMessage, submitLabel, title, }: PsFormNameModalProps) => import("react").JSX.Element;

package/dist/form/components/ps-form-name-modal.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsFormNameModal = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ps_popovers_1 = require("@pallasoft/ps-popovers");
+const react_hook_form_1 = require("react-hook-form");
+const ps_form_text_field_1 = require("./ps-form-text-field");
+const PsFormNameModal = ({ cancelLabel, initialName, isOpen, isSubmitting = false, label, maxLength = 80, onClose, onSave, placeholder, requiredMessage, submitLabel, title, }) => {
+    const { control, formState: { isDirty, isValid }, handleSubmit, reset, } = (0, react_hook_form_1.useForm)({ mode: 'onChange' });
+    (0, react_1.useEffect)(() => {
+        if (isOpen)
+            reset({ name: initialName });
+    }, [initialName, isOpen, reset]);
+    return ((0, jsx_runtime_1.jsx)(ps_popovers_1.PsFormModal, { cancelLabel: cancelLabel, isOpen: isOpen, isSubmitDisabled: !isValid || (initialName !== '' && !isDirty), isSubmitting: isSubmitting, onClose: onClose, onSubmit: handleSubmit((values) => onSave(values.name.trim())), size: 'sm', submitLabel: submitLabel, title: title, children: (0, jsx_runtime_1.jsx)(ps_form_text_field_1.PsFormTextField, { control: control, label: label, maxLength: maxLength, name: 'name', placeholder: placeholder, rules: {
+                required: requiredMessage,
+                validate: (value) => value.trim() !== '' || requiredMessage,
+            } }) }));
+};
+exports.PsFormNameModal = PsFormNameModal;

package/dist/form/index.d.ts

@@ -9,3 +9,5 @@ export * from './components/ps-form-year-field';
 export * from './constants/ps-form-text-kind';
 export * from './models/ps-form-field-rules';
 export * from './services/ps-form-field-service';
+export * from './components/ps-form-name-modal';
+export * from './models/ps-form-name-data';

package/dist/form/index.js

@@ -25,3 +25,5 @@ __exportStar(require("./components/ps-form-year-field"), exports);
 __exportStar(require("./constants/ps-form-text-kind"), exports);
 __exportStar(require("./models/ps-form-field-rules"), exports);
 __exportStar(require("./services/ps-form-field-service"), exports);
+__exportStar(require("./components/ps-form-name-modal"), exports);
+__exportStar(require("./models/ps-form-name-data"), exports);

package/dist/form/models/ps-form-name-data.d.ts

@@ -0,0 +1,3 @@
+export interface PsFormNameData {
+    name: string;
+}

package/dist/form/models/ps-form-name-data.js

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

package/dist/index.d.ts

@@ -48,3 +48,5 @@ export * from './interfaces/ps-date-preset-data';
 export * from './components/ps-portable-text-editor';
 export * from './interfaces/ps-portable-text-editor-labels';
 export type { PortableTextBlock } from '@portabletext/editor';
+export * from './components/ps-option-card-group';
+export * from './interfaces/ps-option-card-data';

package/dist/index.js

@@ -63,3 +63,5 @@ __exportStar(require("./constants/ps-select-with-create-config"), exports);
 __exportStar(require("./interfaces/ps-date-preset-data"), exports);
 __exportStar(require("./components/ps-portable-text-editor"), exports);
 __exportStar(require("./interfaces/ps-portable-text-editor-labels"), exports);
+__exportStar(require("./components/ps-option-card-group"), exports);
+__exportStar(require("./interfaces/ps-option-card-data"), exports);

package/dist/interfaces/ps-option-card-data.d.ts

@@ -0,0 +1,5 @@
+export interface PsOptionCardData {
+    description: string;
+    label: string;
+    value: string;
+}

package/dist/interfaces/ps-option-card-data.js

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

package/package.json

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