@ahmadmubarak98/namozaj 1.10.1 → 1.11.0

package/dist/main.d.ts

@@ -114,6 +114,16 @@ export declare type CheckBoxGroupFieldConfig = BaseFieldConfig & {
     };
 };
 
+export declare type ColorFieldConfig = BaseFieldConfig & {
+    type: "color";
+    meta: BaseFieldConfig["meta"] & {
+        variant?: FieldVariant;
+        size?: FieldSize;
+        startAdornment?: React.ReactNode | string;
+        step?: number;
+    };
+};
+
 export declare type ComputedFieldConfig = BaseFieldConfig & {
     type: "computed";
     meta: BaseFieldConfig["meta"] & {
@@ -195,7 +205,7 @@ export declare type FieldOptionFetchFunction = (() => Promise<FieldOption[]>) |
 
 export declare type FieldSize = 'small' | 'medium';
 
-export declare type FieldType = "text" | "phone" | "number" | "slider" | "select" | "multi-select" | "checkbox-group" | "radio-group" | "checkbox" | "switch" | "date" | "time" | "datetime" | "file" | "repeater" | "field-array" | "group" | "button";
+export declare type FieldType = "text" | "phone" | "number" | "slider" | "select" | "multi-select" | "checkbox-group" | "radio-group" | "checkbox" | "switch" | "date" | "time" | "datetime" | "file" | "repeater" | "field-array" | "group" | "button" | "color";
 
 export declare type FieldValueType = string | number | boolean | Date | File | (string | undefined)[] | ({
     [x: string]: any;
@@ -315,7 +325,7 @@ export declare const Namozaj: default_2.ForwardRefExoticComponent<NamozajProps &
 
 export declare type NamozajBlock = NamozajField | NamozajRepresentationalBlock;
 
-export declare type NamozajField = TextFieldConfig | NumberFieldConfig | SliderFieldConfig | PhoneFieldConfig | GroupFieldConfig | SelectFieldConfig | MultiSelectFieldConfig | CheckBoxGroupFieldConfig | RadioGroupFieldConfig | SwitchFieldConfig | CheckboxFieldConfig | DateFieldConfig | FileFieldConfig | ComputedFieldConfig | SectionFieldConfig | ButtonFieldConfig | RepeaterFieldConfig | FieldArrayFieldConfig;
+export declare type NamozajField = TextFieldConfig | ColorFieldConfig | NumberFieldConfig | SliderFieldConfig | PhoneFieldConfig | GroupFieldConfig | SelectFieldConfig | MultiSelectFieldConfig | CheckBoxGroupFieldConfig | RadioGroupFieldConfig | SwitchFieldConfig | CheckboxFieldConfig | DateFieldConfig | FileFieldConfig | ComputedFieldConfig | SectionFieldConfig | ButtonFieldConfig | RepeaterFieldConfig | FieldArrayFieldConfig;
 
 export declare type NamozajFormMethods = RHFFormMethods & {
     validateForm: () => Promise<boolean>;

package/dist/namozaj.js

@@ -86036,6 +86036,81 @@ const ConfirmationDialog = ({
       children: a.label
     }
   );
+}, ColorField = ({
+  id: e,
+  config: t,
+  value: a,
+  onChange: l,
+  error: c
+}) => {
+  const { name: p, meta: d } = t, u = useFormContext(), b = useRef(null), h = useMemo(
+    () => _.debounce((y) => {
+      l(y), u.setValue(p, y);
+    }, 300),
+    [l, u.setValue, p]
+  ), g = (y) => {
+    l(y.target.value);
+  }, m = (y) => {
+    h(y.target.value);
+  };
+  return /* @__PURE__ */ jsx(
+    TextField$2,
+    {
+      id: e,
+      placeholder: d.placeholder,
+      variant: d.variant || DEFAULT_FIELD_VARIANT,
+      size: d.size || DEFAULT_FIELD_SIZE,
+      type: "text",
+      error: c,
+      disabled: d.disabled,
+      value: a ?? "",
+      onChange: g,
+      fullWidth: !0,
+      slotProps: {
+        htmlInput: {
+          maxLength: 7
+        },
+        input: {
+          endAdornment: /* @__PURE__ */ jsxs(InputAdornment$1, { position: "end", children: [
+            /* @__PURE__ */ jsx(
+              Box$1,
+              {
+                role: "button",
+                onClick: () => {
+                  var y;
+                  return (y = b.current) == null ? void 0 : y.click();
+                },
+                sx: {
+                  width: 24,
+                  height: 24,
+                  bgcolor: a || "#ffffff",
+                  border: "1px solid #ccc",
+                  borderRadius: 1,
+                  cursor: "pointer"
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ref: b,
+                type: "color",
+                value: a || "#ffffff",
+                onChange: m,
+                style: {
+                  opacity: 0,
+                  width: 0,
+                  height: 0,
+                  pointerEvents: "none"
+                },
+                title: "Pick a color"
+              }
+            )
+          ] })
+        }
+      }
+    }
+  );
 }, FieldRenderer = (e) => {
   var C, v, T, S;
   const { fieldsOptions: t, setFieldOptions: a } = useLocalNamozajProvider(), l = useRef(`${e.name}`), [c, p] = useState(!0), d = e.meta || {}, u = e.locale, b = d.grid || {}, h = useController({
@@ -86079,6 +86154,8 @@ const ConfirmationDialog = ({
         return /* @__PURE__ */ jsx(FieldArrayField, { ...D });
       case "group":
         return /* @__PURE__ */ jsx(GroupField, { ...D });
+      case "color":
+        return /* @__PURE__ */ jsx(ColorField, { ...D });
       case "button":
         return /* @__PURE__ */ jsx(Button, { ...D });
       default:

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ahmadmubarak98/namozaj",
   "private": false,
-  "version": "1.10.1",
+  "version": "1.11.0",
   "type": "module",
   "main": "dist/namozaj.js",
   "types": "dist/main.d.ts",