@redneckz/wildless-cms-uni-blocks 0.10.5 → 0.10.7

package/mobile/src/components/Filtration/Filtration.tsx

@@ -10,23 +10,25 @@ import { renderFormItem } from './renderFormItem';
 
 interface FiltrationProps extends FiltrationContent, UniBlockProps {}
 
+const initialFiltrationState = {};
+
 export const Filtration: JSXBlock<FiltrationProps> = JSX<FiltrationProps>(
   ({ className, filtrationSchema = {}, resetButton, ...rest }) => {
-    const { formState, register, resetForm } = useForm();
+    const [filtrationState, { field, reset }] = useForm(initialFiltrationState);
 
     return (
       <BlockWrapper className={style(className)} version="transparent" {...rest}>
         <form className="flex justify-between bg-white p-9 mb-1">
           <div className="flex gap-11">
-            {Object.keys(filtrationSchema).map(renderFormItem(filtrationSchema, register))}
+            {Object.keys(filtrationSchema).map(renderFormItem(filtrationSchema, field))}
           </div>
           {resetButton ? (
             <div>
-              <Button className="w-72" onClick={resetForm} {...resetButton} />
+              <Button className="w-72" onClick={reset} {...resetButton} />
             </div>
           ) : null}
         </form>
-        <FiltrationInner filtrationState={formState} {...rest} />
+        <FiltrationInner filtrationState={filtrationState} {...rest} />
       </BlockWrapper>
     );
   },

package/mobile/src/components/Filtration/renderFormItem.tsx

@@ -1,22 +1,22 @@
-import type { FormElementRegisterer } from '../../hooks/useForm';
+import type { FormFieldRegisterer } from '../../hooks/useForm';
 import { SlideCheckboxGroup } from '../../ui-kit/SlideCheckboxGroup/SlideCheckboxGroup';
 import { Text } from '../../ui-kit/Text/Text';
 import type { FiltrationSchema, StringArray } from './FiltrationContent';
 
 export const renderFormItem =
-  (filtrationSchema: FiltrationSchema, register: FormElementRegisterer) => (key: string) => {
+  (filtrationSchema: FiltrationSchema, field: FormFieldRegisterer<any>) => (key: string) => {
     const item = filtrationSchema[key as keyof typeof filtrationSchema];
     const type = item?.type;
 
     switch (type) {
       case 'array':
-        return renderCheckboxes(key, register)(item);
+        return renderCheckboxes(key, field)(item);
       default:
         return null;
     }
   };
 
-const renderCheckboxes = (key: string, register: FormElementRegisterer) => (item?: StringArray) => {
+const renderCheckboxes = (key: string, field: FormFieldRegisterer<any>) => (item?: StringArray) => {
   const options =
     item?.items?.enum?.map((e, i) => ({ value: e, title: item?.items?.enumNames?.[i] || '' })) ||
     [];
@@ -30,7 +30,7 @@ const renderCheckboxes = (key: string, register: FormElementRegisterer) => (item
           </Text>
         </div>
       ) : null}
-      <SlideCheckboxGroup items={options} multiple {...register(key)} />
+      <SlideCheckboxGroup items={options} multiple {...field(key)} />
     </div>
   );
 };

package/mobile/src/components/GracePeriod/GracePeriod.tsx

@@ -13,7 +13,7 @@ export interface GracePeriodProps extends GracePeriodContent, UniBlockProps {}
 
 export const GracePeriod = JSX<GracePeriodProps>(
   ({ className = '', title, description, calendar, ...rest }) => (
-    <BlockWrapper className={`p-12 ${className}`} {...rest}>
+    <BlockWrapper className={`p-default ${className}`} {...rest}>
       <Headline className="!p-0 mb-4" title={title} description={description} headlineVersion="M" />
       {calendar ? renderCalendar(calendar) : null}
     </BlockWrapper>

package/mobile/src/components/Headline/Headline.tsx

@@ -1,12 +1,12 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
-import type { TextSize } from '../../ui-kit/Text/TextProps';
 import { style } from '../../utils/style';
-import type { HeadlineContent } from './HeadlineContent';
 import { headlineVersionStyles } from './headlineVersionStyles';
+import type { TextSize } from '../../ui-kit/Text/TextProps';
+import type { UniBlockProps } from '../../model/JSXBlock';
+import type { HeadlineContent } from './HeadlineContent';
 
 export interface HeadlineProps extends UniBlockProps, HeadlineContent {}
 
@@ -24,11 +24,12 @@ export const Headline = JSX<HeadlineProps>(
     ...rest
   }) => {
     const versionStyle = headlineVersionStyles[headlineVersion];
-    const paddingStyle = isPadding ? 'p-12' : '';
+    const paddingStyle = isPadding ? 'p-default' : '';
+    const descriptionStyle = { marginTop: versionStyle.descriptionStyle };
 
     return (
       <BlockWrapper
-        className={style('flex flex-col', paddingStyle, versionStyle.wrapper, className)}
+        className={style(paddingStyle, className)}
         version={version}
         isTheme={isTheme}
         {...rest}
@@ -42,7 +43,11 @@ export const Headline = JSX<HeadlineProps>(
           />
         ) : null}
         {description ? (
-          <Paragraph size={versionStyle.descriptionSize as TextSize} align={align}>
+          <Paragraph
+            size={versionStyle.descriptionSize as TextSize}
+            align={align}
+            {...descriptionStyle}
+          >
             {description}
           </Paragraph>
         ) : null}

package/mobile/src/components/Headline/headlineVersionStyles.ts

@@ -5,40 +5,40 @@ import type { TextSize, TitleSize } from '../../ui-kit/Text/TextProps';
 export const headlineVersionStyles: Record<
   HeadlineVersion,
   {
-    wrapper: string;
     title: HeadingCommonProps;
     descriptionSize: TextSize | TitleSize;
+    descriptionStyle: string;
   }
 > = {
   XXL: {
-    wrapper: 'gap-[18px]',
     title: { headingType: 'h0', as: 'h1' },
     descriptionSize: 'text-h5',
+    descriptionStyle: 'mt-5',
   },
   XL: {
-    wrapper: 'gap-4',
     title: { headingType: 'h1', as: 'h1' },
     descriptionSize: 'text-xl-light',
+    descriptionStyle: 'mt-4',
   },
   L: {
-    wrapper: 'gap-4',
     title: { headingType: 'h2', as: 'h2' },
     descriptionSize: 'text-xl-light',
+    descriptionStyle: 'mt-4',
   },
   M: {
-    wrapper: 'gap-3',
     title: { headingType: 'h3', as: 'h3' },
     descriptionSize: 'text-xl-light',
+    descriptionStyle: 'mt-3',
   },
   S: {
-    wrapper: 'gap-2',
     title: { headingType: 'h4', as: 'h4' },
     descriptionSize: 'text-xl-light',
+    descriptionStyle: 'mt-2',
   },
   XS: {
-    wrapper: 'gap-2',
     title: { headingType: 'h5', as: 'h5' },
     descriptionSize: 'text-l-light',
+    descriptionStyle: 'mt-2',
   },
 };
 

package/mobile/src/components/HorizontalLayout/HorizontalLayout.tsx

@@ -21,7 +21,7 @@ export const HorizontalLayout: JSXBlock<HorizontalLayoutProps> = JSX<HorizontalL
       className={style(
         'relative',
         'grid grid-cols-12',
-        isPadding ? 'p-12' : '',
+        isPadding ? 'p-default' : '',
         gapStyles[gap],
         className,
       )}

package/mobile/src/components/LinkDocs/LinkDocs.tsx

@@ -19,7 +19,7 @@ export const LinkDocs = JSX<LinkDocsProps>(
     align,
     ...rest
   }) => (
-    <BlockWrapper className={style('py-6 px-4', className)} {...rest}>
+    <BlockWrapper className={style('p-default', className)} {...rest}>
       <Headline
         isPadding={false}
         title={title}

package/mobile/src/components/SafeDepositRental/WrapperSelect.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { OptionProps, Select } from '../../ui-kit/Select/Select';
+import { Option, Select } from '../../ui-kit/Select/Select';
 import { Currency } from '../ExchangeRateTile/CurrencyProps';
 
 interface WrapperSelectProps {
@@ -14,7 +14,7 @@ interface WrapperSelectProps {
 
 export const WrapperSelect = JSX<WrapperSelectProps>(
   ({ data, fieldLabel, fieldValue, selected, placeholder = '', setSelected, label }) => {
-    const dataFormat: OptionProps[] = data
+    const dataFormat: Option[] = data
       .filter(Boolean)
       .map((_) => ({ key: _?.[fieldValue || fieldLabel], text: _?.[fieldLabel] }));
     const selectedObj = dataFormat.find((_) => _.key === selected);

package/mobile/src/components/SafeDepositRental/useGetRegions.ts

@@ -9,8 +9,10 @@ export interface Region {
   name?: string;
 }
 
+const EMPTY_VALUE = [];
+
 export function useGetRegions(): Region[] {
   const { data } = useAsyncData<Region[]>(REGIONS_URL, fetchJSONUnsafe);
 
-  return data || [];
+  return data || EMPTY_VALUE;
 }

package/mobile/src/components/TariffsTable/TariffsTable.ui.json

@@ -11,6 +11,9 @@
               "image": {
                 "ui:field": "picture"
               },
+              "dataUrl": {
+                "ui:widget": "sourceBook"
+              },
               "buttons": {
                 "items": {
                   "icon": {

package/mobile/src/components/TextBlock/TextBlock.tsx

@@ -1,42 +1,76 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import type { Picture } from '../../model/Picture';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Img } from '../../ui-kit/Img/Img';
-import { List } from '../../ui-kit/List/List';
+import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
+import { RichText } from '../../ui-kit/RichText/RichText';
+import { Text } from '../../ui-kit/Text/Text';
+import { style } from '../../utils/style';
 import type { TextBlockContent } from './TextBlockContent';
 
 export interface TextBlockProps extends TextBlockContent, UniBlockProps {}
 
 export const TextBlock = JSX<TextBlockProps>(
-  ({ title, description, iconVersion, image, className = '', items, isDotted = true }) => {
+  ({ className = '', title, description, iconVersion, image, __html, items = [], ...rest }) => {
     return (
-      <section
-        className={`font-sans px-4 py-[18px] flex flex-col bg-white group-data-secondary:bg-primary-main ${className}`}
+      <BlockWrapper
+        className={style(
+          'px-9 py-4 flex gap-3 bg-white group-data-secondary:bg-primary-main/10',
+          className,
+        )}
+        {...rest}
       >
-        {iconVersion === 'small' ? renderIcon() : null}
+        {iconVersion === 'small' ? <div className="mt-1">{renderIcon()}</div> : null}
         {iconVersion === 'big' ? renderImage(image) : null}
-        <div className="py-0.5 text-secondary-text group-data-secondary:text-white">
-          {title ? <div className={`text-l font-medium mb-1`}>{title}</div> : null}
-          {description ? <div className={`text-s `}>{description}</div> : null}
-          {items?.length ? (
-            <List className="mt-1 text-m" items={items} isDotted={isDotted} />
+        <div className="flex flex-col w-fit gap-3">
+          {title ? (
+            <Text
+              size="text-l"
+              font="font-medium"
+              color="text-primary-text group-data-secondary:text-white"
+            >
+              {title}
+            </Text>
           ) : null}
+          {description ? renderDescription(description) : null}
+          {items?.length ? renderList(items, true) : null}
+          {__html ? <RichText __html={__html} /> : null}
         </div>
-      </section>
+      </BlockWrapper>
     );
   },
 );
 
-function renderIcon() {
+const renderIcon = () => (
+  <div
+    className={`rounded-full h-4 w-4 text-center text-xs-light bg-primary-main text-white group-data-secondary:bg-white group-data-secondary:text-primary-main`}
+  >
+    i
+  </div>
+);
+
+const renderImage = (image?: Picture) =>
+  image?.src ? <Img className="h-fit" image={image} /> : null;
+
+const renderDescription = (description: string) => (
+  <Paragraph size="text-s" color="text-secondary-text group-data-secondary:text-white">
+    {description}
+  </Paragraph>
+);
+
+const renderList = (items: string[], bullets: boolean) => {
+  const listStyle = bullets ? 'list-disc pl-6' : '';
+
   return (
-    <div className="mb-3">
-      <div className="rounded-full h-4 w-4 text-center text-xs-light bg-primary-main text-white group-data-secondary:bg-white group-data-secondary:text-primary-main">
-        i
-      </div>
-    </div>
+    <ul className={style('text-secondary-text group-data-secondary:text-white/80', listStyle)}>
+      {items.map((_, i) => (
+        <li key={`listItem-${i}`}>
+          <Text size="text-s" font="font-light">
+            {_}
+          </Text>
+        </li>
+      ))}
+    </ul>
   );
-}
-
-function renderImage(image?: Picture) {
-  return image?.src ? <Img className="pb-3 mr-auto" image={image} /> : null;
-}
+};

package/mobile/src/components/TextBlock/TextBlockContent.ts

@@ -1,4 +1,3 @@
-import type { BulletsProps } from '../../model/Bullets';
 import type { HeadlineCommonProps } from '../../model/HeadlineType';
 import type { UniBlockContent } from '../../model/JSXBlock';
 import type { ImageContent } from '../../ui-kit/Img/ImgProps';
@@ -18,7 +17,6 @@ export type TextBlockContent = UniBlockContent &
   HeadlineCommonProps &
   RichTextProps &
   ImageContent &
-  ListContent &
-  BulletsProps & {
+  ListContent & {
     iconVersion?: TextBlockIconVersion;
   };

package/mobile/src/components/VerticalLayout/VerticalLayout.tsx

@@ -35,7 +35,7 @@ export const VerticalLayout: JSXBlock<VerticalLayoutProps> = JSX<VerticalLayoutP
         className={style(
           'relative',
           'flex flex-col [&>*]:max-w-full',
-          isPadding ? 'p-12' : '',
+          isPadding ? 'p-default' : '',
           gapStyles[gap],
           align && alignStyle[align],
           className,

package/mobile/src/hooks/useForm.ts

@@ -1,29 +1,80 @@
 import { useCallback, useRef, useState } from '@redneckz/uni-jsx/lib/hooks';
+import type { PreventableEvent } from '../ui-kit/PreventableEvent';
 
-export type FormElementRegisterer = ReturnType<typeof useForm>['register'];
+export interface FieldProps<V> {
+  value?: V;
+  isDirty?: boolean;
+  onChange?: (value: V) => void;
+}
+
+export type FormFieldRegisterer<FormState> = <N extends keyof FormState>(
+  fieldName: N,
+) => FieldProps<FormState[N]>;
 
 export const useForm = <FormState extends Record<string, any>>(
-  initialState: Partial<FormState> = {},
-) => {
-  const [formState, setFormState] = useState<Partial<FormState>>(initialState);
+  initialState: FormState,
+  onSubmit?: (_: FormState) => void,
+): [
+  FormState,
+  {
+    isDirty: boolean;
+    field: FormFieldRegisterer<FormState>;
+    reset: () => void;
+    onSubmit: (e: PreventableEvent) => void;
+  },
+] => {
+  const [formState, setFormState] = useState<FormState>(initialState);
+
+  const [isDirtyForm, setDirtyForm] = useState(false);
+  const [dirtyFieldsMap, setDirtyFieldsMap] = useState<Partial<Record<keyof FormState, boolean>>>(
+    {},
+  );
+
+  const handlersMap = useRef<Partial<Record<keyof FormState, (value: any) => void>>>({});
 
-  const handlersMap = useRef<Partial<Record<keyof FormState, () => void>>>({});
+  const field: FormFieldRegisterer<FormState> = useCallback(
+    (fieldName) => {
+      if (!handlersMap.current) {
+        handlersMap.current = {};
+      }
 
-  const register = <FieldName extends keyof FormState>(fieldName: FieldName) => {
-    if (!handlersMap.current) {
-      return {};
-    }
+      handlersMap.current[fieldName] ||= (value) => {
+        setFormState((prev) => ({ ...prev, [fieldName]: value }));
+        setDirtyFieldsMap((prev) => ({ ...prev, [fieldName]: true }));
+      };
 
-    const handler = (value?: FormState[FieldName]) => {
-      setFormState((prev) => ({ ...prev, [fieldName]: value }));
-    };
+      return {
+        value: formState[fieldName],
+        isDirty: isDirtyForm || dirtyFieldsMap[fieldName],
+        onChange: handlersMap.current[fieldName],
+      };
+    },
+    [formState, isDirtyForm, dirtyFieldsMap],
+  );
 
-    handlersMap.current[fieldName] ||= handler;
+  const reset = useCallback(() => {
+    setFormState(initialState);
+    setDirtyForm(false);
+    setDirtyFieldsMap({});
+  }, [initialState]);
 
-    return { value: formState?.[fieldName], onChange: handlersMap.current[fieldName] };
-  };
+  const handleSubmit = useCallback(
+    (e: PreventableEvent) => {
+      e.preventDefault();
 
-  const resetForm = useCallback(() => setFormState({}), []);
+      setDirtyForm(true);
+      onSubmit && onSubmit(formState);
+    },
+    [onSubmit, formState],
+  );
 
-  return { formState, register, resetForm };
+  return [
+    formState,
+    {
+      isDirty: isDirtyForm || Object.values(dirtyFieldsMap).some(Boolean),
+      field,
+      reset,
+      onSubmit: handleSubmit,
+    },
+  ];
 };

package/mobile/src/ui-kit/Checkbox/Checkbox.tsx

@@ -1,5 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
 import { style } from '../../utils/style';
+import type { PreventableEvent } from '../PreventableEvent';
 import { SVG } from '../SVG';
 import type { CheckboxProps } from './CheckboxProps';
 
@@ -13,39 +15,55 @@ const CHECK_PATHS = [
 ];
 
 export const Checkbox = JSX<CheckboxProps>(
-  ({ className, text, checked, disabled, isRadio, onChange }) => {
+  ({ className, value, text, disabled, isRadio, onChange }) => {
+    const handleChange = useCallback(
+      (e: PreventableEvent) => {
+        if (disabled) {
+          return;
+        }
+
+        e.preventDefault();
+        onChange && onChange(!value);
+      },
+      [onChange, disabled, value],
+    );
+
+    const icon = isRadio ? (
+      <div className="absolute left-1 w-3 h-3 rounded-full bg-primary-main" />
+    ) : (
+      <SVG
+        paths={CHECK_PATHS}
+        className="absolute left-1 ml-px block"
+        width="11"
+        height="9"
+        fill="white"
+        viewBox="0 0 11 9"
+      />
+    );
+
     return (
       <div className={className}>
-        <label className="flex items-center relative cursor-pointer group/box">
-          <input
+        <label
+          className="flex items-center relative cursor-pointer group/box"
+          onClick={handleChange}
+        >
+          <div
             className={style(
-              'peer appearance-none w-5 h-5 border-solid cursor-pointer checked:border-primary-main m-0',
-              isRadio
-                ? 'rounded-full border-2'
-                : 'rounded checked:bg-primary-main disabled:bg-main-disabled border',
-              checked ? 'border-black' : 'border-gray',
-              disabled ? '' : 'group-hover/box:border-primary-hover',
+              'appearance-none w-5 h-5 border-solid cursor-pointer m-0',
+              isRadio ? 'rounded-full border-2' : checkboxStyle(value),
+              value ? 'border-primary-main' : 'border-gray',
+              disabled ? 'bg-main-disabled' : 'group-hover/box:border-primary-hover',
             )}
-            type="checkbox"
-            onChange={(e) => onChange && onChange(e.target.checked as boolean)}
-            checked={checked}
-            disabled={disabled}
+            role="checkbox"
+            aria-checked={Boolean(value)}
+            aria-disabled={Boolean(disabled)}
           />
-          {isRadio ? (
-            <div className="left-1 w-3 h-3 rounded-full bg-primary-main hidden absolute peer-checked:block" />
-          ) : (
-            <SVG
-              paths={CHECK_PATHS}
-              className="hidden absolute left-1 ml-px peer-checked:block"
-              width="11"
-              height="9"
-              fill="white"
-              viewBox="0 0 11 9"
-            />
-          )}
+          {value ? icon : null}
           {text ? <span className="font-sans ml-3 text-l-light">{text}</span> : null}
         </label>
       </div>
     );
   },
 );
+
+const checkboxStyle = (value?: boolean) => style('rounded border', value ? 'bg-primary-main' : '');

package/mobile/src/ui-kit/Checkbox/CheckboxProps.ts

@@ -1,8 +1,8 @@
 export interface CheckboxProps {
+  className?: string;
+  value?: boolean;
   text?: string;
-  checked?: boolean;
   disabled?: boolean;
-  className?: string;
   isRadio?: boolean;
   onChange?: (value: boolean) => void;
 }

package/mobile/src/ui-kit/CurrencyInput/CurrencyInput.tsx

@@ -1,38 +1,30 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { clamp } from '../../utils/clamp';
-import { adjustValue, localNumberFormat } from './adjustValue';
 import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
+import { clamp } from '../../utils/clamp';
 import { Input } from '../Input/Input';
+import { adjustValue, localNumberFormat } from './adjustValue';
 import type { CurrencyInputProps } from './CurrencyInputProps';
 
 export const CurrencyInput = JSX<CurrencyInputProps>(
-  ({ className = '', onChange, minValue = 0, maxValue = 300000, ...inputProps }) => {
+  ({ className = '', value = '', onChange, minValue = 0, maxValue = 300000, ...inputProps }) => {
     const handleChange = useCallback(
       (inputValue: string) => {
-        if (!onChange) {
-          return;
-        }
         const adjustedVal = adjustValue(inputValue);
         const clampVal = getClampValue(adjustedVal, clamp(Number(adjustedVal), minValue, maxValue));
-        onChange(String(clampVal));
+        onChange && onChange(clampVal);
       },
       [onChange],
     );
 
-    const handleBlur = useCallback(
-      (inputValue: string) => {
-        if (!onChange) {
-          return;
-        }
-        onChange(localNumberFormat(inputValue));
-      },
-      [onChange],
-    );
+    const handleBlur = useCallback(() => {
+      onChange && onChange(localNumberFormat(value));
+    }, [onChange, value]);
 
     return (
       <Input
         className={className}
         inputClassName="w-full"
+        value={value}
         onChange={handleChange}
         onBlur={handleBlur}
         {...inputProps}

package/mobile/src/ui-kit/Input/Input.tsx

@@ -1,5 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
+import { style } from '../../utils/style';
 import type { InputProps } from './InputProps';
 
 export const Input = JSX<InputProps>(
@@ -14,44 +15,35 @@ export const Input = JSX<InputProps>(
     valid = true,
     children,
     onChange,
-    onBlur,
     ...inputProps
   }) => {
     const handleChange = useCallback(
-      (e) => {
-        const validInputValue = e.target.validity.valid ? (e.target.value as string) : value;
-        onChange(validInputValue);
+      (e: { target?: { value?: string } }) => {
+        onChange && onChange(e.target?.value || '');
       },
       [onChange],
     );
 
-    const handleBlur = useCallback(
-      (e) => {
-        if (!onBlur) {
-          return;
-        }
-        const validInputValue = e.target.validity.valid ? (e.target.value as string) : value;
-        onBlur(validInputValue);
-      },
-      [onBlur],
-    );
-
     const paddingStyle = children ? 'pr-8' : '';
     const validStyle = valid
       ? 'border-gray hover:border-primary-hover active:border-primary-text focus:border-primary-text'
       : 'border-error';
 
     return (
-      <div className={`relative ${className}`}>
+      <div className={style('relative', className)}>
         {label ? <label className="block text-m-light mb-2">{label}</label> : null}
         <input
-          className={`w-full border rounded-md text-primary-text outline-none p-4 ${paddingStyle} ${validStyle} ${inputClassName}`}
+          className={style(
+            'w-full border rounded-md text-primary-text outline-none p-4',
+            paddingStyle,
+            validStyle,
+            inputClassName,
+          )}
           id={id}
           name={name || id}
           type={type}
           value={value}
-          onChange={handleChange}
-          onBlur={handleBlur}
+          onInput={handleChange as any}
           {...inputProps}
         />
         {children}