@pagamio/frontend-commons-lib 0.8.261 → 0.8.262

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.262",
   "publishConfig": {
     "access": "public",
     "provenance": false