@pagamio/frontend-commons-lib 0.8.261 → 0.8.263

package/lib/components/ui/DateRangePickerWithPresets.js

@@ -102,13 +102,21 @@ const DateRangePickerWithPresets = ({ value, onChange, presets = defaultDatePres
     }, [isOpen, value, selectedPreset]);
     // Format the display text
     const displayText = useMemo(() => {
-        if (!value?.from)
-            return placeholder;
-        if (value.to) {
-            return `${format(value.from, dateFormat)} - ${format(value.to, dateFormat)}`;
+        // Custom range with dates selected — show the formatted date range
+        if (value?.from) {
+            if (value.to) {
+                return `${format(value.from, dateFormat)} - ${format(value.to, dateFormat)}`;
+            }
+            return format(value.from, dateFormat);
+        }
+        // No custom dates — show the active preset label
+        if (selectedPreset && selectedPreset !== 'custom') {
+            const activePreset = presets.find((p) => p.value === selectedPreset);
+            if (activePreset)
+                return activePreset.label;
         }
-        return format(value.from, dateFormat);
-    }, [value, dateFormat, placeholder]);
+        return placeholder;
+    }, [value, dateFormat, placeholder, selectedPreset, presets]);
     // Handle preset selection
     const handlePresetSelect = (preset) => {
         // For custom preset, preserve current selection or clear it
@@ -160,7 +168,7 @@ const DateRangePickerWithPresets = ({ value, onChange, presets = defaultDatePres
                                                 ? `${format(tempRange.from, dateFormat)} - ${format(tempRange.to, dateFormat)}`
                                                 : tempRange?.from
                                                     ? format(tempRange.from, dateFormat)
-                                                    : 'Select a range' }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { variant: "outline", size: "sm", onClick: handleCancel, children: "Cancel" }), _jsx(Button, { size: "sm", onClick: handleApply, disabled: !tempRange?.from, children: "Apply" })] })] })] }))] }) })] }));
+                                                    : 'Select a range' }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { variant: "outline", size: "sm", onClick: handleCancel, children: "Cancel" }), _jsx(Button, { size: "sm", onClick: handleApply, disabled: !tempRange?.from || !tempRange?.to, children: "Apply" })] })] })] }))] }) })] }));
 };
 DateRangePickerWithPresets.displayName = 'DateRangePickerWithPresets';
 export default DateRangePickerWithPresets;

package/lib/form-engine/components/inputs/color-input/ColorInput.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { InputProps } from '../../../types';
+declare const ColorInput: React.ForwardRefExoticComponent<Omit<InputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export default ColorInput;

package/lib/form-engine/components/inputs/color-input/ColorInput.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { ColorInput as MantineColorInput } from '@mantine/core';
+import React from 'react';
+const ColorInput = React.forwardRef(({ field, error, value, onChange, ...props }, ref) => {
+    return (_jsxs(_Fragment, { children: [_jsx("label", { htmlFor: field.name, className: "block text-sm font-medium text-foreground", children: field.label }), _jsx(MantineColorInput, { ref: ref, id: field.name, value: value || '', onChange: (color) => onChange(color), disabled: field.disabled, placeholder: field.placeholder || 'Pick a color', format: "hex", swatches: [
+                    '#25262b',
+                    '#868e96',
+                    '#fa5252',
+                    '#e64980',
+                    '#be4bdb',
+                    '#7950f2',
+                    '#4c6ef5',
+                    '#228be6',
+                    '#15aabf',
+                    '#12b886',
+                    '#40c057',
+                    '#82c91e',
+                    '#fab005',
+                    '#fd7e14',
+                ], error: error?.message, className: "mt-1" })] }));
+});
+export default ColorInput;

package/lib/form-engine/components/inputs/color-input/index.d.ts

@@ -0,0 +1 @@
+export { default as ColorInput } from './ColorInput';

package/lib/form-engine/components/inputs/color-input/index.js

@@ -0,0 +1 @@
+export { default as ColorInput } from './ColorInput';

package/lib/form-engine/registry/RegisterComponents.js

@@ -31,9 +31,10 @@ export const setupInputRegistry = async () => {
     return getRegistryPromise();
 };
 const doSetup = async () => {
-    const [{ default: CardExpiryInput }, { default: CheckboxInput }, { default: CreditCardInput }, { default: DateInput }, { default: EmailInput }, { default: LabelInput }, { default: MultiSelectInputComponent }, { default: NumberInput }, { default: PasswordInput }, { default: RadioInput }, { default: SelectInput }, { default: TextareaInputFW }, { default: TimeInput }, { default: ToggleSwitchInput }, { default: UploadFieldForm }, { default: PhoneInput },] = await Promise.all([
+    const [{ default: CardExpiryInput }, { default: CheckboxInput }, { default: ColorInput }, { default: CreditCardInput }, { default: DateInput }, { default: EmailInput }, { default: LabelInput }, { default: MultiSelectInputComponent }, { default: NumberInput }, { default: PasswordInput }, { default: RadioInput }, { default: SelectInput }, { default: TextareaInputFW }, { default: TimeInput }, { default: ToggleSwitchInput }, { default: UploadFieldForm }, { default: PhoneInput },] = await Promise.all([
         import('../components/inputs/card-expiry-input/CardExpiryInput'),
         import('../components/inputs/checkbox-input/CheckboxInput'),
+        import('../components/inputs/color-input/ColorInput'),
         import('../components/inputs/credit-card-input/CreditCardInput'),
         import('../components/inputs/date-input/DateInput'),
         import('../components/inputs/email-input/EmailInput'),
@@ -51,6 +52,7 @@ const doSetup = async () => {
     ]);
     registerInput('card-expiry-input', CardExpiryInput);
     registerInput('checkbox', CheckboxInput);
+    registerInput('color', ColorInput);
     registerInput('credit-card', CreditCardInput);
     registerInput('date', DateInput);
     registerInput('email', EmailInput);

package/lib/form-engine/types/index.d.ts

@@ -130,7 +130,7 @@ export interface DependencyValidation {
 /**
  * Available field types supported by the form engine
  */
-export type FieldType = 'card-expiry-input' | 'checkbox' | 'credit-card' | 'date' | 'email' | 'file' | 'multi-select' | 'number' | 'password' | 'radio' | 'searchable-multi-select' | 'select' | 'switch' | 'tel' | 'text' | 'textarea' | 'time';
+export type FieldType = 'card-expiry-input' | 'checkbox' | 'color' | 'credit-card' | 'date' | 'email' | 'file' | 'multi-select' | 'number' | 'password' | 'radio' | 'searchable-multi-select' | 'select' | 'switch' | 'tel' | 'text' | 'textarea' | 'time';
 /**
  * Defines the structure of a form field
  */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pagamio/frontend-commons-lib",
   "description": "Pagamio library for Frontend reusable components like the form engine and table container",
-  "version": "0.8.261",
+  "version": "0.8.263",
   "publishConfig": {
     "access": "public",
     "provenance": false