@kirill.konshin/utils 0.0.18 → 0.0.19

package/dist/next/noSSR.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"noSSR.d.ts","sourceRoot":"","sources":["../../src/next/noSSR.tsx"],"names":[],"mappings":"AAQA,wBAAgB,KAAK,CAAC,EAAE,QAAQ,EAAE,KAAwB,EAAE;;;CAAA,OAQ3D"}
+{"version":3,"file":"noSSR.d.ts","sourceRoot":"","sources":["../../src/next/noSSR.tsx"],"names":[],"mappings":"AAEA,OAAc,EAAE,EAAE,EAAE,GAAG,EAA6B,MAAM,OAAO,CAAC;AAElE;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,KAAK,EAAE,EAAE,CAAC;IAAE,QAAQ,EAAE,GAAG,CAAC;IAAC,KAAK,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;CAAE,CAQ5D,CAAC"}

package/dist/next/noSSR.js

@@ -1,14 +1,12 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
 import { useState, useLayoutEffect } from "react";
-const DefaultOnSSR = () => /* @__PURE__ */ jsx("span", {});
-function NoSSR({ children, onSSR = /* @__PURE__ */ jsx(DefaultOnSSR, {}) }) {
+const NoSSR = function NoSSR2({ children, onSSR = null }) {
   const [canRender, setCanRender] = useState(false);
   useLayoutEffect(() => {
     setCanRender(true);
   }, []);
   return canRender ? children : onSSR;
-}
+};
 export {
   NoSSR
 };

package/dist/next/noSSR.js.map

@@ -1 +1 @@
-{"version":3,"file":"noSSR.js","sources":["../../src/next/noSSR.tsx"],"sourcesContent":["'use client';\n\nimport React, { useLayoutEffect, useState } from 'react';\n\nconst DefaultOnSSR = () => <span />;\n\n// @see https://github.com/kadirahq/react-no-ssr/blob/master/src/index.js\n// @see https://nextjs.org/docs/messages/react-hydration-error#solution-1-using-useeffect-to-run-on-the-client-only\nexport function NoSSR({ children, onSSR = <DefaultOnSSR /> }) {\n    const [canRender, setCanRender] = useState(false);\n\n    useLayoutEffect(() => {\n        setCanRender(true);\n    }, []);\n\n    return canRender ? children : onSSR;\n}\n"],"names":[],"mappings":";;;AAIA,MAAM,eAAe,MAAM,oBAAC,QAAK,EAAA;AAI1B,SAAS,MAAM,EAAE,UAAU,QAAS,oBAAA,cAAA,CAAa,CAAA,KAAM;AAC1D,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAEhD,kBAAgB,MAAM;AAClB,iBAAa,IAAI;AAAA,EACrB,GAAG,EAAE;AAEL,SAAO,YAAY,WAAW;AAClC;"}
+{"version":3,"file":"noSSR.js","sources":["../../src/next/noSSR.tsx"],"sourcesContent":["'use client';\n\nimport React, { FC, JSX, useLayoutEffect, useState } from 'react';\n\n/**\n * Prefer using Next.js `dynamic()` import with `ssr: false` because this will also remove import from server bundle.\n *\n * ```tsx\n * 'use client';\n *\n * import React from 'react';\n * import dynamic from 'next/dynamic';\n *\n * const PageClient = dynamic(() => import('./pageClient'), { ssr: false });\n *\n * export default function Page() {\n *   return (\n *     <PageClient />\n *   );\n * }\n * ```\n *\n * In other cases this component can be used to just prevent server rendering.\n *\n * @see https://github.com/kadirahq/react-no-ssr/blob/master/src/index.js\n * @see https://nextjs.org/docs/messages/react-hydration-error#solution-1-using-useeffect-to-run-on-the-client-only\n */\nexport const NoSSR: FC<{ children: any; onSSR?: JSX.Element }> = function NoSSR({ children, onSSR = null }): any {\n    const [canRender, setCanRender] = useState(false);\n\n    useLayoutEffect(() => {\n        setCanRender(true);\n    }, []);\n\n    return canRender ? children : onSSR;\n};\n"],"names":["NoSSR"],"mappings":";;AA2BO,MAAM,QAAoD,SAASA,OAAM,EAAE,UAAU,QAAQ,QAAa;AAC7G,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAEhD,kBAAgB,MAAM;AAClB,iBAAa,IAAI;AAAA,EACrB,GAAG,EAAE;AAEL,SAAO,YAAY,WAAW;AAClC;"}

package/dist/react/form/client.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../../../src/react/form/client.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAU,WAAW,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AACzD,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAIxB,wBAAgB,YAAY,CAAC,CAAC,SAAS,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,EAAE,MAAM,EAAE,CAAC;8BAqBhD,CAAC,IAAI,EAAE,QAAQ,KAAK,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,gBACvC,WAAW,CAAC,CAAC,CAAC;wCAWjB,CAAC,IAAI,EAAE,QAAQ,KAAK,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,gBACvC,WAAW,CAAC,CAAC,CAAC,KAC5B,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC;EAkB9E"}
+{"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../../../src/react/form/client.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAU,WAAW,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AACzD,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAIxB,wBAAgB,YAAY,CAAC,CAAC,SAAS,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,EACnD,MAAM,EAAE,CAAC,GACV;IACC,aAAa,EAAE,CACX,QAAQ,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,EACpD,WAAW,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,KAC3B,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,OAAO,EAAE,QAAQ,KAAK,IAAI,EAAE,SAAS,EAAE,OAAO,CAAC,CAAC;IACvF,uBAAuB,EAAE,CACrB,QAAQ,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,EACpD,WAAW,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,KAC3B,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC;CACjF,CAqDA"}

package/dist/react/form/client.js.map

@@ -1 +1 @@
-{"version":3,"file":"client.js","sources":["../../../src/react/form/client.tsx"],"sourcesContent":["'use client';\n\nimport { useActionState, useCallback, useState, useTransition } from 'react';\nimport { create, MaybeTypeOf, Validation } from './form';\nimport { z } from 'zod';\n\nconst FORM_DEBUG = process.env.NEXT_PUBLIC_FORM_DEBUG === 'true';\n\nexport function createClient<S extends z.ZodObject<any>>(schema: S) {\n    const { validate } = create(schema);\n\n    function useValidationCallback(\n        actionFn: (data: FormData) => Promise<Validation<S>>,\n    ): (formData: FormData) => Promise<Validation<S>> {\n        return useCallback(\n            async (formData: FormData) => {\n                const clientRes = validate(formData);\n                console.log('Client validation', FORM_DEBUG ? 'ignored' : 'active', clientRes);\n                if (!clientRes.success && !FORM_DEBUG) return clientRes;\n\n                const serverRes = await actionFn(formData);\n                console.log('Server validation', serverRes);\n                return serverRes;\n            },\n            [actionFn],\n        );\n    }\n\n    function useValidation(\n        actionFn: (data: FormData) => Promise<Validation<S>>,\n        initialData: MaybeTypeOf<S> = {} as MaybeTypeOf<S>,\n    ) {\n        const cb = useValidationCallback(actionFn);\n\n        return useActionState<Validation<S>, FormData>(async (_, data) => cb(data), {\n            success: false,\n            data: initialData,\n        });\n    }\n\n    function useValidationTransition(\n        actionFn: (data: FormData) => Promise<Validation<S>>,\n        initialData: MaybeTypeOf<S> = {} as MaybeTypeOf<S>,\n    ): [Validation<S>, (formData: FormData) => Promise<Validation<S>>, boolean] {\n        const [isPending, startTransition] = useTransition();\n        const [state, setState] = useState<Validation<S>>({ success: false, data: initialData });\n        const cb = useValidationCallback(actionFn);\n\n        const wrappedCb = useCallback(\n            (formData: FormData) => {\n                const promise = cb(formData);\n                startTransition(() => promise.then(setState));\n                return promise;\n            },\n            [cb, startTransition],\n        );\n\n        return [state, wrappedCb, isPending];\n    }\n\n    return { useValidation, useValidationTransition };\n}\n"],"names":[],"mappings":";;;AAMA,MAAM,aAAa,QAAQ,IAAI,2BAA2B;AAEnD,SAAS,aAAyC,QAAW;AAChE,QAAM,EAAE,SAAA,IAAa,OAAO,MAAM;AAElC,WAAS,sBACL,UAC8C;AACvC,WAAA;AAAA,MACH,OAAO,aAAuB;AACpB,cAAA,YAAY,SAAS,QAAQ;AACnC,gBAAQ,IAAI,qBAAqB,aAAa,YAAY,UAAU,SAAS;AAC7E,YAAI,CAAC,UAAU,WAAW,CAAC,WAAmB,QAAA;AAExC,cAAA,YAAY,MAAM,SAAS,QAAQ;AACjC,gBAAA,IAAI,qBAAqB,SAAS;AACnC,eAAA;AAAA,MACX;AAAA,MACA,CAAC,QAAQ;AAAA,IACb;AAAA,EAAA;AAGJ,WAAS,cACL,UACA,cAA8B,IAChC;AACQ,UAAA,KAAK,sBAAsB,QAAQ;AAEzC,WAAO,eAAwC,OAAO,GAAG,SAAS,GAAG,IAAI,GAAG;AAAA,MACxE,SAAS;AAAA,MACT,MAAM;AAAA,IAAA,CACT;AAAA,EAAA;AAGL,WAAS,wBACL,UACA,cAA8B,IAC0C;AACxE,UAAM,CAAC,WAAW,eAAe,IAAI,cAAc;AAC7C,UAAA,CAAC,OAAO,QAAQ,IAAI,SAAwB,EAAE,SAAS,OAAO,MAAM,aAAa;AACjF,UAAA,KAAK,sBAAsB,QAAQ;AAEzC,UAAM,YAAY;AAAA,MACd,CAAC,aAAuB;AACd,cAAA,UAAU,GAAG,QAAQ;AAC3B,wBAAgB,MAAM,QAAQ,KAAK,QAAQ,CAAC;AACrC,eAAA;AAAA,MACX;AAAA,MACA,CAAC,IAAI,eAAe;AAAA,IACxB;AAEO,WAAA,CAAC,OAAO,WAAW,SAAS;AAAA,EAAA;AAGhC,SAAA,EAAE,eAAe,wBAAwB;AACpD;"}
+{"version":3,"file":"client.js","sources":["../../../src/react/form/client.tsx"],"sourcesContent":["'use client';\n\nimport { useActionState, useCallback, useState, useTransition } from 'react';\nimport { create, MaybeTypeOf, Validation } from './form';\nimport { z } from 'zod';\n\nconst FORM_DEBUG = process.env.NEXT_PUBLIC_FORM_DEBUG === 'true';\n\nexport function createClient<S extends z.ZodObject<any>>(\n    schema: S,\n): {\n    useValidation: (\n        actionFn: (data: FormData) => Promise<Validation<S>>,\n        initialData?: MaybeTypeOf<S>,\n    ) => [state: Validation<S>, dispatch: (payload: FormData) => void, isPending: boolean];\n    useValidationTransition: (\n        actionFn: (data: FormData) => Promise<Validation<S>>,\n        initialData?: MaybeTypeOf<S>,\n    ) => [Validation<S>, (formData: FormData) => Promise<Validation<S>>, boolean];\n} {\n    const { validate } = create(schema);\n\n    function useValidationCallback(\n        actionFn: (data: FormData) => Promise<Validation<S>>,\n    ): (formData: FormData) => Promise<Validation<S>> {\n        return useCallback(\n            async (formData: FormData) => {\n                const clientRes = validate(formData);\n                console.log('Client validation', FORM_DEBUG ? 'ignored' : 'active', clientRes);\n                if (!clientRes.success && !FORM_DEBUG) return clientRes;\n\n                const serverRes = await actionFn(formData);\n                console.log('Server validation', serverRes);\n                return serverRes;\n            },\n            [actionFn],\n        );\n    }\n\n    function useValidation(\n        actionFn: (data: FormData) => Promise<Validation<S>>,\n        initialData: MaybeTypeOf<S> = {} as MaybeTypeOf<S>,\n    ): [state: Validation<S>, dispatch: (payload: FormData) => void, isPending: boolean] {\n        const cb = useValidationCallback(actionFn);\n\n        return useActionState<Validation<S>, FormData>(async (_, data) => cb(data), {\n            success: false,\n            data: initialData,\n        });\n    }\n\n    function useValidationTransition(\n        actionFn: (data: FormData) => Promise<Validation<S>>,\n        initialData: MaybeTypeOf<S> = {} as MaybeTypeOf<S>,\n    ): [Validation<S>, (formData: FormData) => Promise<Validation<S>>, boolean] {\n        const [isPending, startTransition] = useTransition();\n        const [state, setState] = useState<Validation<S>>({ success: false, data: initialData });\n        const cb = useValidationCallback(actionFn);\n\n        const wrappedCb = useCallback(\n            (formData: FormData) => {\n                const promise = cb(formData);\n                startTransition(() => promise.then(setState));\n                return promise;\n            },\n            [cb, startTransition],\n        );\n\n        return [state, wrappedCb, isPending];\n    }\n\n    return { useValidation, useValidationTransition };\n}\n"],"names":[],"mappings":";;;AAMA,MAAM,aAAa,QAAQ,IAAI,2BAA2B;AAEnD,SAAS,aACZ,QAUF;AACE,QAAM,EAAE,SAAA,IAAa,OAAO,MAAM;AAElC,WAAS,sBACL,UAC8C;AACvC,WAAA;AAAA,MACH,OAAO,aAAuB;AACpB,cAAA,YAAY,SAAS,QAAQ;AACnC,gBAAQ,IAAI,qBAAqB,aAAa,YAAY,UAAU,SAAS;AAC7E,YAAI,CAAC,UAAU,WAAW,CAAC,WAAmB,QAAA;AAExC,cAAA,YAAY,MAAM,SAAS,QAAQ;AACjC,gBAAA,IAAI,qBAAqB,SAAS;AACnC,eAAA;AAAA,MACX;AAAA,MACA,CAAC,QAAQ;AAAA,IACb;AAAA,EAAA;AAGJ,WAAS,cACL,UACA,cAA8B,IACmD;AAC3E,UAAA,KAAK,sBAAsB,QAAQ;AAEzC,WAAO,eAAwC,OAAO,GAAG,SAAS,GAAG,IAAI,GAAG;AAAA,MACxE,SAAS;AAAA,MACT,MAAM;AAAA,IAAA,CACT;AAAA,EAAA;AAGL,WAAS,wBACL,UACA,cAA8B,IAC0C;AACxE,UAAM,CAAC,WAAW,eAAe,IAAI,cAAc;AAC7C,UAAA,CAAC,OAAO,QAAQ,IAAI,SAAwB,EAAE,SAAS,OAAO,MAAM,aAAa;AACjF,UAAA,KAAK,sBAAsB,QAAQ;AAEzC,UAAM,YAAY;AAAA,MACd,CAAC,aAAuB;AACd,cAAA,UAAU,GAAG,QAAQ;AAC3B,wBAAgB,MAAM,QAAQ,KAAK,QAAQ,CAAC;AACrC,eAAA;AAAA,MACX;AAAA,MACA,CAAC,IAAI,eAAe;AAAA,IACxB;AAEO,WAAA,CAAC,OAAO,WAAW,SAAS;AAAA,EAAA;AAGhC,SAAA,EAAE,eAAe,wBAAwB;AACpD;"}

package/dist/react/form/form.d.ts

@@ -1,4 +1,5 @@
 import { typeToFlattenedError, z, SafeParseReturnType, TypeOf } from 'zod';
+import { Context, FC } from 'react';
 export declare const stringRequired: () => z.ZodString;
 export declare const maxLength: (schema: z.ZodString) => number;
 export declare const minLength: (schema: z.ZodString) => number;
@@ -16,30 +17,43 @@ export type Validation<S extends ZodObject> = {
     data?: MaybeTypeOf<S>;
     errors?: Errors<S>;
 };
-export declare const FormContext: import('react').Context<{
+export declare const FormContext: Context<{
     schema: ZodObject;
 }>;
-export declare const Form: <S extends ZodObject>({ schema, children }: {
+export interface FormProps<S extends ZodObject> {
     schema: S;
     children: any;
-}) => import("react/jsx-runtime").JSX.Element;
+}
+export declare const Form: FC<FormProps<any>>;
 export declare function create<S extends ZodObject>(schema: S): {
     register: (name: keyof TypeOf<S>, data?: MaybeTypeOf<S>, errors?: Errors<S>, mui?: boolean) => {
         label?: any;
-        helperText?: string | undefined;
-        error?: boolean | undefined;
+        helperText?: string;
+        error?: boolean;
         name: keyof z.TypeOf<S>;
         id: keyof z.TypeOf<S>;
         required: boolean;
         maxLength: number;
         type: string;
-        defaultValue: Partial<z.TypeOf<S>>[keyof z.TypeOf<S>] | undefined;
+        defaultValue?: Partial<z.TypeOf<S>>[keyof z.TypeOf<S>];
     };
     validate: (formData: FormData) => Validation<S>;
     validationError: (data: MaybeTypeOf<S>, errors: Errors<S>) => Validation<S>;
 };
-export declare function Hint({ children, error }: {
+interface FieldProps<S extends ZodObject> {
+    children?: any;
+    name: keyof TypeOf<S>;
+    errors?: Validation<S>['errors'];
+    hint?: string;
+    className?: string;
+    labelProps?: any;
+    [key: string]: any;
+}
+export declare const Field: FC<FieldProps<any>>;
+export interface HintProps {
     children: any;
     error?: boolean;
-}): import("react/jsx-runtime").JSX.Element;
+}
+export declare const Hint: FC<HintProps>;
+export {};
 //# sourceMappingURL=form.d.ts.map

package/dist/react/form/form.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form.d.ts","sourceRoot":"","sources":["../../../src/react/form/form.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,CAAC,EAAE,mBAAmB,EAAE,MAAM,EAAE,MAAM,KAAK,CAAC;AAM3E,eAAO,MAAM,cAAc,mBAAgE,CAAC;AAC5F,eAAO,MAAM,SAAS,WAAY,CAAC,CAAC,SAAS,KAAG,MAA+B,CAAC;AAChF,eAAO,MAAM,SAAS,WAAY,CAAC,CAAC,SAAS,KAAG,MAA+B,CAAC;AAChF,eAAO,MAAM,UAAU,WAAY,CAAC,CAAC,SAAS,KAAG,OAAgC,CAAC;AAElF,MAAM,MAAM,SAAS,GAAG,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC;AAC1E,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,SAAS,IAAI,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;AAClE,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,SAAS,IAAI,mBAAmB,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;AAChG,MAAM,MAAM,MAAM,CAAC,CAAC,SAAS,SAAS,IAAI,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC;AACzF,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,SAAS,IACpC;IACI,OAAO,EAAE,IAAI,CAAC;IACd,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC;IACpB,MAAM,CAAC,EAAE,KAAK,CAAC;CAClB,GACD;IACI,OAAO,EAAE,KAAK,CAAC;IACf,IAAI,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC;CACtB,CAAC;AAER,eAAO,MAAM,WAAW;YACZ,SAAS;EACJ,CAAC;AAElB,eAAO,MAAM,IAAI,GAAI,CAAC,SAAS,SAAS,wBAAwB;IAAE,MAAM,EAAE,CAAC,CAAC;IAAC,QAAQ,EAAE,GAAG,CAAA;CAAE,4CAG3F,CAAC;AAKF,wBAAgB,MAAM,CAAC,CAAC,SAAS,SAAS,EAAE,MAAM,EAAE,CAAC;qBAKzB,MAAM,MAAM,CAAC,CAAC,CAAC,SAAS,WAAW,CAAC,CAAC,CAAC,WAAW,MAAM,CAAC,CAAC,CAAC,QAAO,OAAO;;;;;;;;;;;yBA2BpE,QAAQ,KAAG,UAAU,CAAC,CAAC,CAAC;4BARrB,WAAW,CAAC,CAAC,CAAC,UAAU,MAAM,CAAC,CAAC,CAAC,KAAG,UAAU,CAAC,CAAC,CAAC;EAwBnF;AAuCD,wBAAgB,IAAI,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE;IAAE,QAAQ,EAAE,GAAG,CAAC;IAAC,KAAK,CAAC,EAAE,OAAO,CAAA;CAAE,2CAE3E"}
+{"version":3,"file":"form.d.ts","sourceRoot":"","sources":["../../../src/react/form/form.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,CAAC,EAAE,mBAAmB,EAAE,MAAM,EAAE,MAAM,KAAK,CAAC;AAC3E,OAAO,EAAE,OAAO,EAA2C,EAAE,EAAQ,MAAM,OAAO,CAAC;AAKnF,eAAO,MAAM,cAAc,QAAO,CAAC,CAAC,SAAoE,CAAC;AACzG,eAAO,MAAM,SAAS,WAAY,CAAC,CAAC,SAAS,KAAG,MAA+B,CAAC;AAChF,eAAO,MAAM,SAAS,WAAY,CAAC,CAAC,SAAS,KAAG,MAA+B,CAAC;AAChF,eAAO,MAAM,UAAU,WAAY,CAAC,CAAC,SAAS,KAAG,OAAgC,CAAC;AAElF,MAAM,MAAM,SAAS,GAAG,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC;AAC1E,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,SAAS,IAAI,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;AAClE,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,SAAS,IAAI,mBAAmB,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;AAChG,MAAM,MAAM,MAAM,CAAC,CAAC,SAAS,SAAS,IAAI,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC;AACzF,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,SAAS,IACpC;IACI,OAAO,EAAE,IAAI,CAAC;IACd,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC;IACpB,MAAM,CAAC,EAAE,KAAK,CAAC;CAClB,GACD;IACI,OAAO,EAAE,KAAK,CAAC;IACf,IAAI,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC;CACtB,CAAC;AAER,eAAO,MAAM,WAAW,EAAE,OAAO,CAAC;IAC9B,MAAM,EAAE,SAAS,CAAC;CACrB,CAAgC,CAAC;AAElC,MAAM,WAAW,SAAS,CAAC,CAAC,SAAS,SAAS;IAC1C,MAAM,EAAE,CAAC,CAAC;IACV,QAAQ,EAAE,GAAG,CAAC;CACjB;AAED,eAAO,MAAM,IAAI,EAAE,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,CAGlC,CAAC;AAKH,wBAAgB,MAAM,CAAC,CAAC,SAAS,SAAS,EACtC,MAAM,EAAE,CAAC,GACV;IACC,QAAQ,EAAE,CACN,IAAI,EAAE,MAAM,MAAM,CAAC,CAAC,CAAC,EACrB,IAAI,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,EACrB,MAAM,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC,EAClB,GAAG,CAAC,EAAE,OAAO,KACZ;QACD,KAAK,CAAC,EAAE,GAAG,CAAC;QACZ,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,KAAK,CAAC,EAAE,OAAO,CAAC;QAChB,IAAI,EAAE,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;QACxB,EAAE,EAAE,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;QACtB,QAAQ,EAAE,OAAO,CAAC;QAClB,SAAS,EAAE,MAAM,CAAC;QAClB,IAAI,EAAE,MAAM,CAAC;QACb,YAAY,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;KAC1D,CAAC;IACF,QAAQ,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,CAAC;IAChD,eAAe,EAAE,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,KAAK,UAAU,CAAC,CAAC,CAAC,CAAC;CAC/E,CA+DA;AAED,UAAU,UAAU,CAAC,CAAC,SAAS,SAAS;IACpC,QAAQ,CAAC,EAAE,GAAG,CAAC;IACf,IAAI,EAAE,MAAM,MAAM,CAAC,CAAC,CAAC,CAAC;IACtB,MAAM,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC;IACjC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,GAAG,CAAC;IACjB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB;AAED,eAAO,MAAM,KAAK,EAAE,EAAE,CAAC,UAAU,CAAC,GAAG,CAAC,CA4BpC,CAAC;AAEH,MAAM,WAAW,SAAS;IACtB,QAAQ,EAAE,GAAG,CAAC;IACd,KAAK,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,IAAI,EAAE,EAAE,CAAC,SAAS,CAE7B,CAAC"}

package/dist/react/form/form.js

@@ -1,17 +1,17 @@
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { z } from "zod";
-import { createContext, useMemo } from "react";
-import "clsx";
+import { createContext, memo, useMemo, useContext } from "react";
+import clsx from "clsx";
 const nonEmpty = "This field cannot be empty";
 const stringRequired = () => z.string({ required_error: nonEmpty }).min(1, nonEmpty);
 const maxLength = (schema) => schema.maxLength || 0;
 const minLength = (schema) => schema.minLength || 0;
 const isRequired = (schema) => minLength(schema) > 0;
 const FormContext = createContext(null);
-const Form = ({ schema, children }) => {
+const Form = memo(function Form2({ schema, children }) {
   const value = useMemo(() => ({ schema }), [schema]);
   return /* @__PURE__ */ jsx(FormContext.Provider, { value, children });
-};
+});
 const getShape = (schema) => schema.shape || schema.sourceType().shape;
 function create(schema) {
   if (!getShape(schema)) {
@@ -53,10 +53,30 @@ function create(schema) {
   }
   return { register, validate, validationError };
 }
-function Hint({ children, error }) {
+const Field = memo(function Field2({
+  children,
+  name,
+  errors,
+  hint,
+  className,
+  labelProps,
+  ...props
+}) {
+  var _a;
+  const { schema } = useContext(FormContext);
+  const { description } = getShape(schema)[name];
+  return /* @__PURE__ */ jsxs("div", { ...props, className: clsx("form-row", className), children: [
+    description && /* @__PURE__ */ jsx("label", { ...labelProps, htmlFor: name, children: description }),
+    children,
+    hint && /* @__PURE__ */ jsx(Hint, { children: hint }),
+    (_a = errors == null ? void 0 : errors[name]) == null ? void 0 : _a.map((e) => /* @__PURE__ */ jsx(Hint, { error: true, children: e }, e))
+  ] });
+});
+const Hint = memo(function Hint2({ children, error }) {
   return /* @__PURE__ */ jsx("div", { className: `hint ${error ? "hint-error" : ""}`, children });
-}
+});
 export {
+  Field,
   Form,
   FormContext,
   Hint,

package/dist/react/form/form.js.map

@@ -1 +1 @@
-{"version":3,"file":"form.js","sources":["../../../src/react/form/form.tsx"],"sourcesContent":["import { typeToFlattenedError, z, SafeParseReturnType, TypeOf } from 'zod';\nimport { createContext, useContext, useMemo } from 'react';\nimport clsx from 'clsx';\n\nconst nonEmpty = 'This field cannot be empty';\n\nexport const stringRequired = () => z.string({ required_error: nonEmpty }).min(1, nonEmpty);\nexport const maxLength = (schema: z.ZodString): number => schema.maxLength || 0;\nexport const minLength = (schema: z.ZodString): number => schema.minLength || 0;\nexport const isRequired = (schema: z.ZodString): boolean => minLength(schema) > 0;\n\nexport type ZodObject = z.ZodObject<any> | z.ZodEffects<z.ZodObject<any>>; // z.ZodType<any, any, any>\nexport type MaybeTypeOf<S extends ZodObject> = Partial<TypeOf<S>>;\nexport type SafeTypeOf<S extends ZodObject> = SafeParseReturnType<TypeOf<S>, TypeOf<S>>['data'];\nexport type Errors<S extends ZodObject> = typeToFlattenedError<TypeOf<S>>['fieldErrors'];\nexport type Validation<S extends ZodObject> =\n    | {\n          success: true; // this is true only if form was validated successfully\n          data: SafeTypeOf<S>;\n          errors?: never;\n      }\n    | {\n          success: false;\n          data?: MaybeTypeOf<S>;\n          errors?: Errors<S>;\n      };\n\nexport const FormContext = createContext<{\n    schema: ZodObject;\n}>(null as never);\n\nexport const Form = <S extends ZodObject>({ schema, children }: { schema: S; children: any }) => {\n    const value = useMemo(() => ({ schema }), [schema]);\n    return <FormContext.Provider value={value}>{children}</FormContext.Provider>;\n};\n\nconst getShape = <S extends ZodObject>(schema: S) =>\n    (schema as z.ZodObject<any>).shape || (schema as z.ZodEffects<z.ZodObject<any>>).sourceType().shape;\n\nexport function create<S extends ZodObject>(schema: S) {\n    if (!getShape(schema)) {\n        throw new Error('Invalid schema: only z.object() or z.object().refine() are supported');\n    }\n\n    function register(name: keyof TypeOf<S>, data?: MaybeTypeOf<S>, errors?: Errors<S>, mui: boolean = false) {\n        const field = getShape(schema)[name];\n        return {\n            name,\n            id: name,\n            required: isRequired(field),\n            maxLength: maxLength(field),\n            type: field.isEmail ? 'email' : (name as string).includes('password') ? 'password' : 'text',\n            defaultValue: data?.[name],\n            ...(mui\n                ? {\n                      label: field.description,\n                      helperText: errors?.[name]?.join(', '),\n                      error: !!errors?.[name]?.length,\n                  }\n                : {}),\n        };\n    }\n\n    function validationError(data: MaybeTypeOf<S>, errors: Errors<S>): Validation<S> {\n        return {\n            success: false,\n            data, // data is undefined if there are errors\n            errors, // Next.js will butcher error object, so we provide something more primitive\n        };\n    }\n\n    function validate(formData: FormData): Validation<S> {\n        const rawData = Object.fromEntries(formData) as TypeOf<S>;\n        const { error, data } = schema.safeParse(rawData);\n\n        // console.log('Validate result', { error, data, rawData });\n\n        if (error) {\n            // data is undefined if there are errors\n            // Next.js will butcher error object, so we provide something more primitive\n            return validationError(rawData, error.flatten().fieldErrors as any);\n        }\n\n        return { success: true, data };\n    }\n\n    return { register, validate, validationError };\n}\n\nfunction Field<S extends ZodObject>({\n    children,\n    name,\n    errors,\n    hint,\n    className,\n    labelProps,\n    ...props\n}: {\n    children?: any;\n    name: keyof TypeOf<S>;\n    errors?: Validation<S>['errors'];\n    hint?: string;\n    className?: string;\n    labelProps?: any;\n}) {\n    const { schema } = useContext(FormContext);\n    const { description } = getShape(schema)[name];\n\n    return (\n        <div {...props} className={clsx('form-row', className)}>\n            {description && (\n                <label {...labelProps} htmlFor={name}>\n                    {description}\n                </label>\n            )}\n            {children}\n            {hint && <Hint>{hint}</Hint>}\n            {errors?.[name]?.map((e: string) => (\n                <Hint error key={e}>\n                    {e}\n                </Hint>\n            ))}\n        </div>\n    );\n}\n\nexport function Hint({ children, error }: { children: any; error?: boolean }) {\n    return <div className={`hint ${error ? 'hint-error' : ''}`}>{children}</div>;\n}\n"],"names":[],"mappings":";;;;AAIA,MAAM,WAAW;AAEJ,MAAA,iBAAiB,MAAM,EAAE,OAAO,EAAE,gBAAgB,UAAU,EAAE,IAAI,GAAG,QAAQ;AACnF,MAAM,YAAY,CAAC,WAAgC,OAAO,aAAa;AACvE,MAAM,YAAY,CAAC,WAAgC,OAAO,aAAa;AACvE,MAAM,aAAa,CAAC,WAAiC,UAAU,MAAM,IAAI;AAkBnE,MAAA,cAAc,cAExB,IAAa;AAET,MAAM,OAAO,CAAsB,EAAE,QAAQ,eAA6C;AACvF,QAAA,QAAQ,QAAQ,OAAO,EAAE,WAAW,CAAC,MAAM,CAAC;AAClD,SAAQ,oBAAA,YAAY,UAAZ,EAAqB,OAAe,SAAS,CAAA;AACzD;AAEA,MAAM,WAAW,CAAsB,WAClC,OAA4B,SAAU,OAA0C,aAAa;AAE3F,SAAS,OAA4B,QAAW;AAC/C,MAAA,CAAC,SAAS,MAAM,GAAG;AACb,UAAA,IAAI,MAAM,sEAAsE;AAAA,EAAA;AAG1F,WAAS,SAAS,MAAuB,MAAuB,QAAoB,MAAe,OAAO;;AACtG,UAAM,QAAQ,SAAS,MAAM,EAAE,IAAI;AAC5B,WAAA;AAAA,MACH;AAAA,MACA,IAAI;AAAA,MACJ,UAAU,WAAW,KAAK;AAAA,MAC1B,WAAW,UAAU,KAAK;AAAA,MAC1B,MAAM,MAAM,UAAU,UAAW,KAAgB,SAAS,UAAU,IAAI,aAAa;AAAA,MACrF,cAAc,6BAAO;AAAA,MACrB,GAAI,MACE;AAAA,QACI,OAAO,MAAM;AAAA,QACb,aAAY,sCAAS,UAAT,mBAAgB,KAAK;AAAA,QACjC,OAAO,CAAC,GAAC,sCAAS,UAAT,mBAAgB;AAAA,MAAA,IAE7B,CAAA;AAAA,IACV;AAAA,EAAA;AAGK,WAAA,gBAAgB,MAAsB,QAAkC;AACtE,WAAA;AAAA,MACH,SAAS;AAAA,MACT;AAAA;AAAA,MACA;AAAA;AAAA,IACJ;AAAA,EAAA;AAGJ,WAAS,SAAS,UAAmC;AAC3C,UAAA,UAAU,OAAO,YAAY,QAAQ;AAC3C,UAAM,EAAE,OAAO,KAAA,IAAS,OAAO,UAAU,OAAO;AAIhD,QAAI,OAAO;AAGP,aAAO,gBAAgB,SAAS,MAAM,QAAA,EAAU,WAAkB;AAAA,IAAA;AAG/D,WAAA,EAAE,SAAS,MAAM,KAAK;AAAA,EAAA;AAG1B,SAAA,EAAE,UAAU,UAAU,gBAAgB;AACjD;AAuCO,SAAS,KAAK,EAAE,UAAU,SAA6C;AACnE,SAAA,oBAAC,SAAI,WAAW,QAAQ,QAAQ,eAAe,EAAE,IAAK,SAAS,CAAA;AAC1E;"}
+{"version":3,"file":"form.js","sources":["../../../src/react/form/form.tsx"],"sourcesContent":["import { typeToFlattenedError, z, SafeParseReturnType, TypeOf } from 'zod';\nimport { Context, createContext, useContext, useMemo, JSX, FC, memo } from 'react';\nimport clsx from 'clsx';\n\nconst nonEmpty = 'This field cannot be empty';\n\nexport const stringRequired = (): z.ZodString => z.string({ required_error: nonEmpty }).min(1, nonEmpty);\nexport const maxLength = (schema: z.ZodString): number => schema.maxLength || 0;\nexport const minLength = (schema: z.ZodString): number => schema.minLength || 0;\nexport const isRequired = (schema: z.ZodString): boolean => minLength(schema) > 0;\n\nexport type ZodObject = z.ZodObject<any> | z.ZodEffects<z.ZodObject<any>>; // z.ZodType<any, any, any>\nexport type MaybeTypeOf<S extends ZodObject> = Partial<TypeOf<S>>;\nexport type SafeTypeOf<S extends ZodObject> = SafeParseReturnType<TypeOf<S>, TypeOf<S>>['data'];\nexport type Errors<S extends ZodObject> = typeToFlattenedError<TypeOf<S>>['fieldErrors'];\nexport type Validation<S extends ZodObject> =\n    | {\n          success: true; // this is true only if form was validated successfully\n          data: SafeTypeOf<S>;\n          errors?: never;\n      }\n    | {\n          success: false;\n          data?: MaybeTypeOf<S>;\n          errors?: Errors<S>;\n      };\n\nexport const FormContext: Context<{\n    schema: ZodObject;\n}> = createContext(null as never);\n\nexport interface FormProps<S extends ZodObject> {\n    schema: S;\n    children: any;\n}\n\nexport const Form: FC<FormProps<any>> = memo(function Form({ schema, children }) {\n    const value = useMemo(() => ({ schema }), [schema]);\n    return <FormContext.Provider value={value}>{children}</FormContext.Provider>;\n});\n\nconst getShape = <S extends ZodObject>(schema: S) =>\n    (schema as z.ZodObject<any>).shape || (schema as z.ZodEffects<z.ZodObject<any>>).sourceType().shape;\n\nexport function create<S extends ZodObject>(\n    schema: S,\n): {\n    register: (\n        name: keyof TypeOf<S>,\n        data?: MaybeTypeOf<S>,\n        errors?: Errors<S>,\n        mui?: boolean,\n    ) => {\n        label?: any;\n        helperText?: string;\n        error?: boolean;\n        name: keyof z.TypeOf<S>;\n        id: keyof z.TypeOf<S>;\n        required: boolean;\n        maxLength: number;\n        type: string;\n        defaultValue?: Partial<z.TypeOf<S>>[keyof z.TypeOf<S>];\n    };\n    validate: (formData: FormData) => Validation<S>;\n    validationError: (data: MaybeTypeOf<S>, errors: Errors<S>) => Validation<S>;\n} {\n    if (!getShape(schema)) {\n        throw new Error('Invalid schema: only z.object() or z.object().refine() are supported');\n    }\n\n    function register(\n        name: keyof TypeOf<S>,\n        data?: MaybeTypeOf<S>,\n        errors?: Errors<S>,\n        mui: boolean = false,\n    ): {\n        label?: any;\n        helperText?: string;\n        error?: boolean;\n        name: keyof z.TypeOf<S>;\n        id: keyof z.TypeOf<S>;\n        required: boolean;\n        maxLength: number;\n        type: string;\n        defaultValue?: Partial<z.TypeOf<S>>[keyof z.TypeOf<S>];\n    } {\n        const field = getShape(schema)[name];\n        return {\n            name,\n            id: name,\n            required: isRequired(field),\n            maxLength: maxLength(field),\n            type: field.isEmail ? 'email' : (name as string).includes('password') ? 'password' : 'text',\n            defaultValue: data?.[name],\n            ...(mui\n                ? {\n                      label: field.description,\n                      helperText: errors?.[name]?.join(', '),\n                      error: !!errors?.[name]?.length,\n                  }\n                : {}),\n        };\n    }\n\n    function validationError(data: MaybeTypeOf<S>, errors: Errors<S>): Validation<S> {\n        return {\n            success: false,\n            data, // data is undefined if there are errors\n            errors, // Next.js will butcher error object, so we provide something more primitive\n        };\n    }\n\n    function validate(formData: FormData): Validation<S> {\n        const rawData = Object.fromEntries(formData) as TypeOf<S>;\n        const { error, data } = schema.safeParse(rawData);\n\n        // console.log('Validate result', { error, data, rawData });\n\n        if (error) {\n            // data is undefined if there are errors\n            // Next.js will butcher error object, so we provide something more primitive\n            return validationError(rawData, error.flatten().fieldErrors as any);\n        }\n\n        return { success: true, data };\n    }\n\n    return { register, validate, validationError };\n}\n\ninterface FieldProps<S extends ZodObject> {\n    children?: any;\n    name: keyof TypeOf<S>;\n    errors?: Validation<S>['errors'];\n    hint?: string;\n    className?: string;\n    labelProps?: any;\n    [key: string]: any;\n}\n\nexport const Field: FC<FieldProps<any>> = memo(function Field({\n    children,\n    name,\n    errors,\n    hint,\n    className,\n    labelProps,\n    ...props\n}) {\n    const { schema } = useContext(FormContext);\n    const { description } = getShape(schema)[name];\n\n    return (\n        <div {...props} className={clsx('form-row', className)}>\n            {description && (\n                <label {...labelProps} htmlFor={name}>\n                    {description}\n                </label>\n            )}\n            {children}\n            {hint && <Hint>{hint}</Hint>}\n            {errors?.[name]?.map((e: string) => (\n                <Hint error key={e}>\n                    {e}\n                </Hint>\n            ))}\n        </div>\n    );\n});\n\nexport interface HintProps {\n    children: any;\n    error?: boolean;\n}\n\nexport const Hint: FC<HintProps> = memo(function Hint({ children, error }) {\n    return <div className={`hint ${error ? 'hint-error' : ''}`}>{children}</div>;\n});\n"],"names":["Form","Field","Hint"],"mappings":";;;;AAIA,MAAM,WAAW;AAEJ,MAAA,iBAAiB,MAAmB,EAAE,OAAO,EAAE,gBAAgB,UAAU,EAAE,IAAI,GAAG,QAAQ;AAChG,MAAM,YAAY,CAAC,WAAgC,OAAO,aAAa;AACvE,MAAM,YAAY,CAAC,WAAgC,OAAO,aAAa;AACvE,MAAM,aAAa,CAAC,WAAiC,UAAU,MAAM,IAAI;AAkBnE,MAAA,cAER,cAAc,IAAa;AAOzB,MAAM,OAA2B,KAAK,SAASA,MAAK,EAAE,QAAQ,YAAY;AACvE,QAAA,QAAQ,QAAQ,OAAO,EAAE,WAAW,CAAC,MAAM,CAAC;AAClD,SAAQ,oBAAA,YAAY,UAAZ,EAAqB,OAAe,SAAS,CAAA;AACzD,CAAC;AAED,MAAM,WAAW,CAAsB,WAClC,OAA4B,SAAU,OAA0C,aAAa;AAE3F,SAAS,OACZ,QAoBF;AACM,MAAA,CAAC,SAAS,MAAM,GAAG;AACb,UAAA,IAAI,MAAM,sEAAsE;AAAA,EAAA;AAG1F,WAAS,SACL,MACA,MACA,QACA,MAAe,OAWjB;;AACE,UAAM,QAAQ,SAAS,MAAM,EAAE,IAAI;AAC5B,WAAA;AAAA,MACH;AAAA,MACA,IAAI;AAAA,MACJ,UAAU,WAAW,KAAK;AAAA,MAC1B,WAAW,UAAU,KAAK;AAAA,MAC1B,MAAM,MAAM,UAAU,UAAW,KAAgB,SAAS,UAAU,IAAI,aAAa;AAAA,MACrF,cAAc,6BAAO;AAAA,MACrB,GAAI,MACE;AAAA,QACI,OAAO,MAAM;AAAA,QACb,aAAY,sCAAS,UAAT,mBAAgB,KAAK;AAAA,QACjC,OAAO,CAAC,GAAC,sCAAS,UAAT,mBAAgB;AAAA,MAAA,IAE7B,CAAA;AAAA,IACV;AAAA,EAAA;AAGK,WAAA,gBAAgB,MAAsB,QAAkC;AACtE,WAAA;AAAA,MACH,SAAS;AAAA,MACT;AAAA;AAAA,MACA;AAAA;AAAA,IACJ;AAAA,EAAA;AAGJ,WAAS,SAAS,UAAmC;AAC3C,UAAA,UAAU,OAAO,YAAY,QAAQ;AAC3C,UAAM,EAAE,OAAO,KAAA,IAAS,OAAO,UAAU,OAAO;AAIhD,QAAI,OAAO;AAGP,aAAO,gBAAgB,SAAS,MAAM,QAAA,EAAU,WAAkB;AAAA,IAAA;AAG/D,WAAA,EAAE,SAAS,MAAM,KAAK;AAAA,EAAA;AAG1B,SAAA,EAAE,UAAU,UAAU,gBAAgB;AACjD;AAYa,MAAA,QAA6B,KAAK,SAASC,OAAM;AAAA,EAC1D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACP,GAAG;;AACC,QAAM,EAAE,OAAA,IAAW,WAAW,WAAW;AACzC,QAAM,EAAE,YAAY,IAAI,SAAS,MAAM,EAAE,IAAI;AAGzC,SAAA,qBAAC,SAAK,GAAG,OAAO,WAAW,KAAK,YAAY,SAAS,GAChD,UAAA;AAAA,IAAA,mCACI,SAAO,EAAA,GAAG,YAAY,SAAS,MAC3B,UACL,aAAA;AAAA,IAEH;AAAA,IACA,QAAS,oBAAA,MAAA,EAAM,UAAK,KAAA,CAAA;AAAA,KACpB,sCAAS,UAAT,mBAAgB,IAAI,CAAC,MACjB,oBAAA,MAAA,EAAK,OAAK,MACN,UADY,EAAA,GAAA,CAEjB;AAAA,EACH,GACL;AAER,CAAC;AAOM,MAAM,OAAsB,KAAK,SAASC,MAAK,EAAE,UAAU,SAAS;AAChE,SAAA,oBAAC,SAAI,WAAW,QAAQ,QAAQ,eAAe,EAAE,IAAK,SAAS,CAAA;AAC1E,CAAC;"}

package/dist/react/index.js

@@ -1,10 +1,11 @@
 import { createClient } from "./form/client.js";
-import { Form, FormContext, Hint, create, isRequired, maxLength, minLength, stringRequired } from "./form/form.js";
+import { Field, Form, FormContext, Hint, create, isRequired, maxLength, minLength, stringRequired } from "./form/form.js";
 import { apiCall, jsonContentType } from "./apiCall.js";
 import { HotkeysContext, HotkeysProvider, useHotkeys } from "./keyboard.js";
 import { useFetch } from "./useFetch.js";
 import { useFetcher } from "./useFetcher.js";
 export {
+  Field,
   Form,
   FormContext,
   Hint,

package/dist/react/keyboard.d.ts

@@ -1,11 +1,10 @@
-import { Dispatch, SetStateAction } from 'react';
+import { Dispatch, SetStateAction, FC, Context } from 'react';
 export type Hotkeys = Record<KeyboardEvent['code'], (e: KeyboardEvent) => void>;
-export declare const HotkeysContext: import('react').Context<{
+export type HotkeyContextType = {
     enabled: boolean;
     setEnabled: Dispatch<SetStateAction<boolean>>;
-}>;
-export declare const HotkeysProvider: ({ children }: {
-    children: any;
-}) => import("react/jsx-runtime").JSX.Element;
+};
+export declare const HotkeysContext: Context<HotkeyContextType>;
+export declare const HotkeysProvider: FC<any>;
 export declare const useHotkeys: (hotkeys: Hotkeys) => void;
 //# sourceMappingURL=keyboard.d.ts.map

package/dist/react/keyboard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"keyboard.d.ts","sourceRoot":"","sources":["../../src/react/keyboard.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA+C,QAAQ,EAAE,cAAc,EAAc,MAAM,OAAO,CAAC;AAM1G,MAAM,MAAM,OAAO,GAAG,MAAM,CAAC,aAAa,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC,CAAC;AAEhF,eAAO,MAAM,cAAc;aACd,OAAO;gBACJ,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC;EAChC,CAAC;AAElB,eAAO,MAAM,eAAe;;6CAM3B,CAAC;AAEF,eAAO,MAAM,UAAU,YAAa,OAAO,SAyB1C,CAAC"}
+{"version":3,"file":"keyboard.d.ts","sourceRoot":"","sources":["../../src/react/keyboard.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA+C,QAAQ,EAAE,cAAc,EAAc,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAMvH,MAAM,MAAM,OAAO,GAAG,MAAM,CAAC,aAAa,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC,CAAC;AAEhF,MAAM,MAAM,iBAAiB,GAAG;IAC5B,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;CACjD,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,OAAO,CAAC,iBAAiB,CAGrC,CAAC;AAElB,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,GAAG,CAMnC,CAAC;AAEF,eAAO,MAAM,UAAU,YAAa,OAAO,KAAG,IAyB7C,CAAC"}

package/dist/react/keyboard.js.map

@@ -1 +1 @@
-{"version":3,"file":"keyboard.js","sources":["../../src/react/keyboard.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, createContext, useMemo, useState, Dispatch, SetStateAction, useContext } from 'react';\n\nconst isCtrlOrMeta = (e: KeyboardEvent) => e.metaKey || e.ctrlKey;\n\nconst EVENT = 'keydown';\n\nexport type Hotkeys = Record<KeyboardEvent['code'], (e: KeyboardEvent) => void>;\n\nexport const HotkeysContext = createContext<{\n    enabled: boolean;\n    setEnabled: Dispatch<SetStateAction<boolean>>;\n}>(null as never);\n\nexport const HotkeysProvider = ({ children }) => {\n    const [enabled, setEnabled] = useState(true);\n\n    const control = useMemo(() => ({ enabled, setEnabled }), [enabled, setEnabled]);\n\n    return <HotkeysContext.Provider value={control}>{children}</HotkeysContext.Provider>;\n};\n\nexport const useHotkeys = (hotkeys: Hotkeys) => {\n    const { enabled } = useContext(HotkeysContext);\n\n    useEffect(() => {\n        if (typeof document === 'undefined' || !enabled) {\n            return;\n        }\n\n        const listeners = (e: KeyboardEvent) => {\n            if (!isCtrlOrMeta(e)) return;\n\n            for (const [code, callback] of Object.entries(hotkeys)) {\n                if (e.code === code) {\n                    callback(e);\n                    return;\n                }\n            }\n        };\n\n        window.addEventListener(EVENT, listeners, true);\n\n        return () => {\n            window.removeEventListener(EVENT, listeners);\n        };\n    }, [hotkeys, enabled]);\n};\n"],"names":[],"mappings":";;;AAIA,MAAM,eAAe,CAAC,MAAqB,EAAE,WAAW,EAAE;AAE1D,MAAM,QAAQ;AAID,MAAA,iBAAiB,cAG3B,IAAa;AAET,MAAM,kBAAkB,CAAC,EAAE,eAAe;AAC7C,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,IAAI;AAErC,QAAA,UAAU,QAAQ,OAAO,EAAE,SAAS,eAAe,CAAC,SAAS,UAAU,CAAC;AAE9E,6BAAQ,eAAe,UAAf,EAAwB,OAAO,SAAU,UAAS;AAC9D;AAEa,MAAA,aAAa,CAAC,YAAqB;AAC5C,QAAM,EAAE,QAAA,IAAY,WAAW,cAAc;AAE7C,YAAU,MAAM;AACZ,QAAI,OAAO,aAAa,eAAe,CAAC,SAAS;AAC7C;AAAA,IAAA;AAGE,UAAA,YAAY,CAAC,MAAqB;AAChC,UAAA,CAAC,aAAa,CAAC,EAAG;AAEtB,iBAAW,CAAC,MAAM,QAAQ,KAAK,OAAO,QAAQ,OAAO,GAAG;AAChD,YAAA,EAAE,SAAS,MAAM;AACjB,mBAAS,CAAC;AACV;AAAA,QAAA;AAAA,MACJ;AAAA,IAER;AAEO,WAAA,iBAAiB,OAAO,WAAW,IAAI;AAE9C,WAAO,MAAM;AACF,aAAA,oBAAoB,OAAO,SAAS;AAAA,IAC/C;AAAA,EAAA,GACD,CAAC,SAAS,OAAO,CAAC;AACzB;"}
+{"version":3,"file":"keyboard.js","sources":["../../src/react/keyboard.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, createContext, useMemo, useState, Dispatch, SetStateAction, useContext, FC, Context } from 'react';\n\nconst isCtrlOrMeta = (e: KeyboardEvent) => e.metaKey || e.ctrlKey;\n\nconst EVENT = 'keydown';\n\nexport type Hotkeys = Record<KeyboardEvent['code'], (e: KeyboardEvent) => void>;\n\nexport type HotkeyContextType = {\n    enabled: boolean;\n    setEnabled: Dispatch<SetStateAction<boolean>>;\n};\n\nexport const HotkeysContext: Context<HotkeyContextType> = createContext<{\n    enabled: boolean;\n    setEnabled: Dispatch<SetStateAction<boolean>>;\n}>(null as never);\n\nexport const HotkeysProvider: FC<any> = ({ children }) => {\n    const [enabled, setEnabled] = useState(true);\n\n    const control = useMemo(() => ({ enabled, setEnabled }), [enabled, setEnabled]);\n\n    return <HotkeysContext.Provider value={control}>{children}</HotkeysContext.Provider>;\n};\n\nexport const useHotkeys = (hotkeys: Hotkeys): void => {\n    const { enabled } = useContext(HotkeysContext);\n\n    useEffect(() => {\n        if (typeof document === 'undefined' || !enabled) {\n            return;\n        }\n\n        const listeners = (e: KeyboardEvent) => {\n            if (!isCtrlOrMeta(e)) return;\n\n            for (const [code, callback] of Object.entries(hotkeys)) {\n                if (e.code === code) {\n                    callback(e);\n                    return;\n                }\n            }\n        };\n\n        window.addEventListener(EVENT, listeners, true);\n\n        return () => {\n            window.removeEventListener(EVENT, listeners);\n        };\n    }, [hotkeys, enabled]);\n};\n"],"names":[],"mappings":";;;AAIA,MAAM,eAAe,CAAC,MAAqB,EAAE,WAAW,EAAE;AAE1D,MAAM,QAAQ;AASD,MAAA,iBAA6C,cAGvD,IAAa;AAET,MAAM,kBAA2B,CAAC,EAAE,eAAe;AACtD,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,IAAI;AAErC,QAAA,UAAU,QAAQ,OAAO,EAAE,SAAS,eAAe,CAAC,SAAS,UAAU,CAAC;AAE9E,6BAAQ,eAAe,UAAf,EAAwB,OAAO,SAAU,UAAS;AAC9D;AAEa,MAAA,aAAa,CAAC,YAA2B;AAClD,QAAM,EAAE,QAAA,IAAY,WAAW,cAAc;AAE7C,YAAU,MAAM;AACZ,QAAI,OAAO,aAAa,eAAe,CAAC,SAAS;AAC7C;AAAA,IAAA;AAGE,UAAA,YAAY,CAAC,MAAqB;AAChC,UAAA,CAAC,aAAa,CAAC,EAAG;AAEtB,iBAAW,CAAC,MAAM,QAAQ,KAAK,OAAO,QAAQ,OAAO,GAAG;AAChD,YAAA,EAAE,SAAS,MAAM;AACjB,mBAAS,CAAC;AACV;AAAA,QAAA;AAAA,MACJ;AAAA,IAER;AAEO,WAAA,iBAAiB,OAAO,WAAW,IAAI;AAE9C,WAAO,MAAM;AACF,aAAA,oBAAoB,OAAO,SAAS;AAAA,IAC/C;AAAA,EAAA,GACD,CAAC,SAAS,OAAO,CAAC;AACzB;"}

package/dist/react/useFetcher.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useFetcher.d.ts","sourceRoot":"","sources":["../../src/react/useFetcher.ts"],"names":[],"mappings":"AAEA,wBAAgB,UAAU,CAAC,CAAC,GAAG,GAAG,EAC9B,EAAE,KAAA,EAEF,EAAE,YAAoB,EAAE,OAAO,EAAE,GAAE;IAAE,YAAY,CAAC,EAAE,OAAO,CAAC;IAAC,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAA;CAAO;;;;;EA2CnG"}
+{"version":3,"file":"useFetcher.d.ts","sourceRoot":"","sources":["../../src/react/useFetcher.ts"],"names":[],"mappings":"AAEA,wBAAgB,UAAU,CAAC,CAAC,GAAG,GAAG,EAC9B,EAAE,EAAE,GAAG,EAEP,EAAE,YAAoB,EAAE,OAAO,EAAE,GAAE;IAAE,YAAY,CAAC,EAAE,OAAO,CAAC;IAAC,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAA;CAAO,GACjG;IACC,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IACpB,IAAI,EAAE,CAAC,GAAG,IAAI,CAAC;IACf,OAAO,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,OAAO,CAAC,GAAG,CAAC,CAAC;CAC7C,CA0CA"}

package/dist/react/useFetcher.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFetcher.js","sources":["../../src/react/useFetcher.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\n\nexport function useFetcher<T = any>(\n    cb,\n\n    { fetchOnMount = false, onError }: { fetchOnMount?: boolean; onError?: (e: Error) => void } = {},\n) {\n    const [loading, setLoading] = useState(fetchOnMount);\n    const [error, setError] = useState<Error | null>(null);\n    const [data, setData] = useState<T | null>(null);\n\n    const isMounted = useRef(false);\n\n    const trigger = useCallback(\n        async (...args) => {\n            try {\n                setLoading(true);\n                setError(null);\n                const res = await cb(args);\n                if (!isMounted.current) return;\n                setData(res);\n                return res;\n            } catch (e) {\n                console.error('Fetch failed', e);\n                if (!isMounted.current) return;\n                setError(e);\n                (onError as any)?.(e);\n            } finally {\n                if (isMounted.current) setLoading(false);\n            }\n        },\n        [cb, onError],\n    );\n\n    useEffect(() => {\n        if (fetchOnMount) {\n            trigger().catch((e) => console.error('Fetch on mount failed', e)); // catch actually will never happen\n        }\n    }, [fetchOnMount, cb, trigger]);\n\n    useEffect(() => {\n        isMounted.current = true;\n        return () => {\n            isMounted.current = false;\n        };\n    });\n\n    return { loading, error, data, trigger };\n}\n"],"names":[],"mappings":";AAEgB,SAAA,WACZ,IAEA,EAAE,eAAe,OAAO,QAAQ,IAA8D,IAChG;AACE,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,YAAY;AACnD,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAuB,IAAI;AACrD,QAAM,CAAC,MAAM,OAAO,IAAI,SAAmB,IAAI;AAEzC,QAAA,YAAY,OAAO,KAAK;AAE9B,QAAM,UAAU;AAAA,IACZ,UAAU,SAAS;AACX,UAAA;AACA,mBAAW,IAAI;AACf,iBAAS,IAAI;AACP,cAAA,MAAM,MAAM,GAAG,IAAI;AACrB,YAAA,CAAC,UAAU,QAAS;AACxB,gBAAQ,GAAG;AACJ,eAAA;AAAA,eACF,GAAG;AACA,gBAAA,MAAM,gBAAgB,CAAC;AAC3B,YAAA,CAAC,UAAU,QAAS;AACxB,iBAAS,CAAC;AACT,2CAAkB;AAAA,MAAC,UACtB;AACM,YAAA,UAAU,QAAS,YAAW,KAAK;AAAA,MAAA;AAAA,IAE/C;AAAA,IACA,CAAC,IAAI,OAAO;AAAA,EAChB;AAEA,YAAU,MAAM;AACZ,QAAI,cAAc;AACN,cAAA,EAAE,MAAM,CAAC,MAAM,QAAQ,MAAM,yBAAyB,CAAC,CAAC;AAAA,IAAA;AAAA,EAErE,GAAA,CAAC,cAAc,IAAI,OAAO,CAAC;AAE9B,YAAU,MAAM;AACZ,cAAU,UAAU;AACpB,WAAO,MAAM;AACT,gBAAU,UAAU;AAAA,IACxB;AAAA,EAAA,CACH;AAED,SAAO,EAAE,SAAS,OAAO,MAAM,QAAQ;AAC3C;"}
+{"version":3,"file":"useFetcher.js","sources":["../../src/react/useFetcher.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\n\nexport function useFetcher<T = any>(\n    cb: any,\n\n    { fetchOnMount = false, onError }: { fetchOnMount?: boolean; onError?: (e: Error) => void } = {},\n): {\n    loading: boolean;\n    error: Error | null;\n    data: T | null;\n    trigger: (...args: any[]) => Promise<any>;\n} {\n    const [loading, setLoading] = useState(fetchOnMount);\n    const [error, setError] = useState<Error | null>(null);\n    const [data, setData] = useState<T | null>(null);\n\n    const isMounted = useRef(false);\n\n    const trigger = useCallback(\n        async (...args: any[]): Promise<any> => {\n            try {\n                setLoading(true);\n                setError(null);\n                const res = await cb(args);\n                if (!isMounted.current) return;\n                setData(res);\n                return res;\n            } catch (e) {\n                console.error('Fetch failed', e);\n                if (!isMounted.current) return;\n                setError(e);\n                (onError as any)?.(e);\n            } finally {\n                if (isMounted.current) setLoading(false);\n            }\n        },\n        [cb, onError],\n    );\n\n    useEffect(() => {\n        if (fetchOnMount) {\n            trigger().catch((e) => console.error('Fetch on mount failed', e)); // catch actually will never happen\n        }\n    }, [fetchOnMount, cb, trigger]);\n\n    useEffect(() => {\n        isMounted.current = true;\n        return () => {\n            isMounted.current = false;\n        };\n    });\n\n    return { loading, error, data, trigger };\n}\n"],"names":[],"mappings":";AAEgB,SAAA,WACZ,IAEA,EAAE,eAAe,OAAO,QAAQ,IAA8D,IAMhG;AACE,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,YAAY;AACnD,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAuB,IAAI;AACrD,QAAM,CAAC,MAAM,OAAO,IAAI,SAAmB,IAAI;AAEzC,QAAA,YAAY,OAAO,KAAK;AAE9B,QAAM,UAAU;AAAA,IACZ,UAAU,SAA8B;AAChC,UAAA;AACA,mBAAW,IAAI;AACf,iBAAS,IAAI;AACP,cAAA,MAAM,MAAM,GAAG,IAAI;AACrB,YAAA,CAAC,UAAU,QAAS;AACxB,gBAAQ,GAAG;AACJ,eAAA;AAAA,eACF,GAAG;AACA,gBAAA,MAAM,gBAAgB,CAAC;AAC3B,YAAA,CAAC,UAAU,QAAS;AACxB,iBAAS,CAAC;AACT,2CAAkB;AAAA,MAAC,UACtB;AACM,YAAA,UAAU,QAAS,YAAW,KAAK;AAAA,MAAA;AAAA,IAE/C;AAAA,IACA,CAAC,IAAI,OAAO;AAAA,EAChB;AAEA,YAAU,MAAM;AACZ,QAAI,cAAc;AACN,cAAA,EAAE,MAAM,CAAC,MAAM,QAAQ,MAAM,yBAAyB,CAAC,CAAC;AAAA,IAAA;AAAA,EAErE,GAAA,CAAC,cAAc,IAAI,OAAO,CAAC;AAE9B,YAAU,MAAM;AACZ,cAAU,UAAU;AACpB,WAAO,MAAM;AACT,gBAAU,UAAU;AAAA,IACxB;AAAA,EAAA,CACH;AAED,SAAO,EAAE,SAAS,OAAO,MAAM,QAAQ;AAC3C;"}

package/dist/react-native/share.d.ts

@@ -5,5 +5,5 @@
  * @param fileName
  * @returns {Promise<void>}
  */
-export declare const shareDialog: (base64: any, fileName: any) => Promise<void>;
+export declare const shareDialog: (base64: string, fileName: string) => Promise<void>;
 //# sourceMappingURL=share.d.ts.map

package/dist/react-native/share.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"share.d.ts","sourceRoot":"","sources":["../../src/react-native/share.ts"],"names":[],"mappings":"AAGA;;;;;;GAMG;AACH,eAAO,MAAM,WAAW,+CAoBvB,CAAC"}
+{"version":3,"file":"share.d.ts","sourceRoot":"","sources":["../../src/react-native/share.ts"],"names":[],"mappings":"AAGA;;;;;;GAMG;AACH,eAAO,MAAM,WAAW,WAAkB,MAAM,YAAY,MAAM,KAAG,OAAO,CAAC,IAAI,CAoBhF,CAAC"}

package/dist/react-native/share.js.map

@@ -1 +1 @@
-{"version":3,"file":"share.js","sources":["../../src/react-native/share.ts"],"sourcesContent":["import * as FileSystem from 'expo-file-system';\nimport * as Sharing from 'expo-sharing';\n\n/**\n * data:text/plain;base64,W29iamV\n * @see https://stackoverflow.com/questions/69738812/problem-to-generate-pdf-from-a-blob-in-an-expo-app-using-filesystem\n * @param base64\n * @param fileName\n * @returns {Promise<void>}\n */\nexport const shareDialog = async (base64, fileName) => {\n    const path = `${FileSystem.documentDirectory}/${fileName}`;\n\n    try {\n        if (!(await Sharing.isAvailableAsync())) throw new Error('Sharing is not available');\n\n        const [header, buffer] = base64.split(',');\n        const [, mimeTypeStr] = header.split(':');\n        const [mimeType] = mimeTypeStr.split(';');\n\n        await FileSystem.writeAsStringAsync(`${path}`, buffer, {\n            encoding: FileSystem.EncodingType.Base64,\n        });\n\n        await Sharing.shareAsync(path, { mimeType, UTI: fileName, dialogTitle: 'Save or share document' });\n    } catch (error) {\n        alert('Sharing failed: ' + error.message);\n    } finally {\n        await FileSystem.deleteAsync(path);\n    }\n};\n"],"names":[],"mappings":";;AAUa,MAAA,cAAc,OAAO,QAAQ,aAAa;AACnD,QAAM,OAAO,GAAG,WAAW,iBAAiB,IAAI,QAAQ;AAEpD,MAAA;AACI,QAAA,CAAE,MAAM,QAAQ,mBAA2B,OAAA,IAAI,MAAM,0BAA0B;AAEnF,UAAM,CAAC,QAAQ,MAAM,IAAI,OAAO,MAAM,GAAG;AACzC,UAAM,CAAG,EAAA,WAAW,IAAI,OAAO,MAAM,GAAG;AACxC,UAAM,CAAC,QAAQ,IAAI,YAAY,MAAM,GAAG;AAExC,UAAM,WAAW,mBAAmB,GAAG,IAAI,IAAI,QAAQ;AAAA,MACnD,UAAU,WAAW,aAAa;AAAA,IAAA,CACrC;AAEK,UAAA,QAAQ,WAAW,MAAM,EAAE,UAAU,KAAK,UAAU,aAAa,0BAA0B;AAAA,WAC5F,OAAO;AACN,UAAA,qBAAqB,MAAM,OAAO;AAAA,EAAA,UAC1C;AACQ,UAAA,WAAW,YAAY,IAAI;AAAA,EAAA;AAEzC;"}
+{"version":3,"file":"share.js","sources":["../../src/react-native/share.ts"],"sourcesContent":["import * as FileSystem from 'expo-file-system';\nimport * as Sharing from 'expo-sharing';\n\n/**\n * data:text/plain;base64,W29iamV\n * @see https://stackoverflow.com/questions/69738812/problem-to-generate-pdf-from-a-blob-in-an-expo-app-using-filesystem\n * @param base64\n * @param fileName\n * @returns {Promise<void>}\n */\nexport const shareDialog = async (base64: string, fileName: string): Promise<void> => {\n    const path = `${FileSystem.documentDirectory}/${fileName}`;\n\n    try {\n        if (!(await Sharing.isAvailableAsync())) throw new Error('Sharing is not available');\n\n        const [header, buffer] = base64.split(',');\n        const [, mimeTypeStr] = header.split(':');\n        const [mimeType] = mimeTypeStr.split(';');\n\n        await FileSystem.writeAsStringAsync(`${path}`, buffer, {\n            encoding: FileSystem.EncodingType.Base64,\n        });\n\n        await Sharing.shareAsync(path, { mimeType, UTI: fileName, dialogTitle: 'Save or share document' });\n    } catch (error) {\n        alert('Sharing failed: ' + error.message);\n    } finally {\n        await FileSystem.deleteAsync(path);\n    }\n};\n"],"names":[],"mappings":";;AAUa,MAAA,cAAc,OAAO,QAAgB,aAAoC;AAClF,QAAM,OAAO,GAAG,WAAW,iBAAiB,IAAI,QAAQ;AAEpD,MAAA;AACI,QAAA,CAAE,MAAM,QAAQ,mBAA2B,OAAA,IAAI,MAAM,0BAA0B;AAEnF,UAAM,CAAC,QAAQ,MAAM,IAAI,OAAO,MAAM,GAAG;AACzC,UAAM,CAAG,EAAA,WAAW,IAAI,OAAO,MAAM,GAAG;AACxC,UAAM,CAAC,QAAQ,IAAI,YAAY,MAAM,GAAG;AAExC,UAAM,WAAW,mBAAmB,GAAG,IAAI,IAAI,QAAQ;AAAA,MACnD,UAAU,WAAW,aAAa;AAAA,IAAA,CACrC;AAEK,UAAA,QAAQ,WAAW,MAAM,EAAE,UAAU,KAAK,UAAU,aAAa,0BAA0B;AAAA,WAC5F,OAAO;AACN,UAAA,qBAAqB,MAAM,OAAO;AAAA,EAAA,UAC1C;AACQ,UAAA,WAAW,YAAY,IAAI;AAAA,EAAA;AAEzC;"}

package/dist/react-native/update.d.ts

@@ -1,4 +1,3 @@
-export declare function Update({ children }: {
-    children: any;
-}): any;
+import { FC } from 'react';
+export declare const Update: FC<any>;
 //# sourceMappingURL=update.d.ts.map

package/dist/react-native/update.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"update.d.ts","sourceRoot":"","sources":["../../src/react-native/update.tsx"],"names":[],"mappings":"AAIA,wBAAgB,MAAM,CAAC,EAAE,QAAQ,EAAE;;CAAA,OAmClC"}
+{"version":3,"file":"update.d.ts","sourceRoot":"","sources":["../../src/react-native/update.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,EAAE,EAAuB,MAAM,OAAO,CAAC;AAGhD,eAAO,MAAM,MAAM,EAAE,EAAE,CAAC,GAAG,CAmC1B,CAAC"}

package/dist/react-native/update.js

@@ -2,7 +2,7 @@ import { jsxs } from "react/jsx-runtime";
 import * as Updates from "expo-updates";
 import { useState, useEffect } from "react";
 import { Text } from "react-native";
-function Update({ children }) {
+const Update = function Update2({ children }) {
   const [updating, setUpdating] = useState(true);
   useEffect(() => {
     (async () => {
@@ -33,7 +33,7 @@ function Update({ children }) {
     ] });
   }
   return children;
-}
+};
 export {
   Update
 };

package/dist/react-native/update.js.map

@@ -1 +1 @@
-{"version":3,"file":"update.js","sources":["../../src/react-native/update.tsx"],"sourcesContent":["import * as Updates from 'expo-updates';\nimport { useEffect, useState } from 'react';\nimport { Text } from 'react-native';\n\nexport function Update({ children }) {\n    //FIXME useUpdates https://blog.expo.dev/feature-preview-updates-js-api-for-expo-updates-3b92beb40dab\n    const [updating, setUpdating] = useState(true);\n\n    useEffect(() => {\n        (async () => {\n            try {\n                if (__DEV__) {\n                    setUpdating(false);\n                    return;\n                }\n\n                const update = await Updates.checkForUpdateAsync();\n\n                if (!update.isAvailable) {\n                    setUpdating(false);\n                    return;\n                }\n\n                await Updates.fetchUpdateAsync();\n                alert('Update is available. App will reload.');\n                await Updates.reloadAsync();\n            } catch (error) {\n                // You can also add an alert() to see the error message in case of an error when fetching updates.\n                alert(`Error fetching latest Expo update: ${error}`);\n                setUpdating(false);\n            }\n        })();\n    });\n\n    if (updating) {\n        return <Text>Checking for updates ({Updates.channel})...</Text>;\n    }\n\n    return children;\n}\n"],"names":[],"mappings":";;;;AAIgB,SAAA,OAAO,EAAE,YAAY;AAEjC,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,IAAI;AAE7C,YAAU,MAAM;AACZ,KAAC,YAAY;AACL,UAAA;AACA,YAAI,SAAS;AACT,sBAAY,KAAK;AACjB;AAAA,QAAA;AAGE,cAAA,SAAS,MAAM,QAAQ,oBAAoB;AAE7C,YAAA,CAAC,OAAO,aAAa;AACrB,sBAAY,KAAK;AACjB;AAAA,QAAA;AAGJ,cAAM,QAAQ,iBAAiB;AAC/B,cAAM,uCAAuC;AAC7C,cAAM,QAAQ,YAAY;AAAA,eACrB,OAAO;AAEN,cAAA,sCAAsC,KAAK,EAAE;AACnD,oBAAY,KAAK;AAAA,MAAA;AAAA,IACrB,GACD;AAAA,EAAA,CACN;AAED,MAAI,UAAU;AACV,gCAAQ,MAAK,EAAA,UAAA;AAAA,MAAA;AAAA,MAAuB,QAAQ;AAAA,MAAQ;AAAA,IAAA,GAAI;AAAA,EAAA;AAGrD,SAAA;AACX;"}
+{"version":3,"file":"update.js","sources":["../../src/react-native/update.tsx"],"sourcesContent":["import * as Updates from 'expo-updates';\nimport { FC, useEffect, useState } from 'react';\nimport { Text } from 'react-native';\n\nexport const Update: FC<any> = function Update({ children }) {\n    //FIXME useUpdates https://blog.expo.dev/feature-preview-updates-js-api-for-expo-updates-3b92beb40dab\n    const [updating, setUpdating] = useState(true);\n\n    useEffect(() => {\n        (async () => {\n            try {\n                if (__DEV__) {\n                    setUpdating(false);\n                    return;\n                }\n\n                const update = await Updates.checkForUpdateAsync();\n\n                if (!update.isAvailable) {\n                    setUpdating(false);\n                    return;\n                }\n\n                await Updates.fetchUpdateAsync();\n                alert('Update is available. App will reload.');\n                await Updates.reloadAsync();\n            } catch (error) {\n                // You can also add an alert() to see the error message in case of an error when fetching updates.\n                alert(`Error fetching latest Expo update: ${error}`);\n                setUpdating(false);\n            }\n        })();\n    });\n\n    if (updating) {\n        return <Text>Checking for updates ({Updates.channel})...</Text>;\n    }\n\n    return children;\n};\n"],"names":["Update"],"mappings":";;;;AAIO,MAAM,SAAkB,SAASA,QAAO,EAAE,YAAY;AAEzD,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,IAAI;AAE7C,YAAU,MAAM;AACZ,KAAC,YAAY;AACL,UAAA;AACA,YAAI,SAAS;AACT,sBAAY,KAAK;AACjB;AAAA,QAAA;AAGE,cAAA,SAAS,MAAM,QAAQ,oBAAoB;AAE7C,YAAA,CAAC,OAAO,aAAa;AACrB,sBAAY,KAAK;AACjB;AAAA,QAAA;AAGJ,cAAM,QAAQ,iBAAiB;AAC/B,cAAM,uCAAuC;AAC7C,cAAM,QAAQ,YAAY;AAAA,eACrB,OAAO;AAEN,cAAA,sCAAsC,KAAK,EAAE;AACnD,oBAAY,KAAK;AAAA,MAAA;AAAA,IACrB,GACD;AAAA,EAAA,CACN;AAED,MAAI,UAAU;AACV,gCAAQ,MAAK,EAAA,UAAA;AAAA,MAAA;AAAA,MAAuB,QAAQ;AAAA,MAAQ;AAAA,IAAA,GAAI;AAAA,EAAA;AAGrD,SAAA;AACX;"}

package/dist/react-native/useAppState.d.ts

@@ -1,2 +1,2 @@
-export declare function useAppState(): "active" | "unknown" | "background" | "inactive" | "extension";
+export declare function useAppState(): 'active' | 'background' | 'inactive' | 'unknown' | 'extension';
 //# sourceMappingURL=useAppState.d.ts.map

package/dist/react-native/useAppState.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useAppState.d.ts","sourceRoot":"","sources":["../../src/react-native/useAppState.ts"],"names":[],"mappings":"AAGA,wBAAgB,WAAW,mEAc1B"}
+{"version":3,"file":"useAppState.d.ts","sourceRoot":"","sources":["../../src/react-native/useAppState.ts"],"names":[],"mappings":"AAGA,wBAAgB,WAAW,IAAI,QAAQ,GAAG,YAAY,GAAG,UAAU,GAAG,SAAS,GAAG,WAAW,CAc5F"}

package/dist/react-native/useAppState.js.map

@@ -1 +1 @@
-{"version":3,"file":"useAppState.js","sources":["../../src/react-native/useAppState.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport { AppState } from 'react-native';\n\nexport function useAppState() {\n    const [appState, setAppState] = useState(AppState.currentState);\n\n    useEffect(() => {\n        const subscription = AppState.addEventListener('change', (nextAppState) => {\n            setAppState(nextAppState);\n        });\n\n        return () => {\n            subscription.remove();\n        };\n    }, []);\n\n    return appState;\n}\n"],"names":[],"mappings":";;AAGO,SAAS,cAAc;AAC1B,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,SAAS,YAAY;AAE9D,YAAU,MAAM;AACZ,UAAM,eAAe,SAAS,iBAAiB,UAAU,CAAC,iBAAiB;AACvE,kBAAY,YAAY;AAAA,IAAA,CAC3B;AAED,WAAO,MAAM;AACT,mBAAa,OAAO;AAAA,IACxB;AAAA,EACJ,GAAG,EAAE;AAEE,SAAA;AACX;"}
+{"version":3,"file":"useAppState.js","sources":["../../src/react-native/useAppState.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport { AppState } from 'react-native';\n\nexport function useAppState(): 'active' | 'background' | 'inactive' | 'unknown' | 'extension' {\n    const [appState, setAppState] = useState(AppState.currentState);\n\n    useEffect(() => {\n        const subscription = AppState.addEventListener('change', (nextAppState) => {\n            setAppState(nextAppState);\n        });\n\n        return () => {\n            subscription.remove();\n        };\n    }, []);\n\n    return appState;\n}\n"],"names":[],"mappings":";;AAGO,SAAS,cAA8E;AAC1F,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,SAAS,YAAY;AAE9D,YAAU,MAAM;AACZ,UAAM,eAAe,SAAS,iBAAiB,UAAU,CAAC,iBAAiB;AACvE,kBAAY,YAAY;AAAA,IAAA,CAC3B;AAED,WAAO,MAAM;AACT,mBAAa,OAAO;AAAA,IACxB;AAAA,EACJ,GAAG,EAAE;AAEE,SAAA;AACX;"}

package/dist/tailwind/fullpage.d.ts

@@ -1,7 +1,3 @@
-export declare const Fullpage: ({ divRef, className, children, ...props }: {
-    [x: string]: any;
-    divRef?: null | undefined;
-    className?: string | undefined;
-    children: any;
-}) => import("react/jsx-runtime").JSX.Element;
+import { FC } from 'react';
+export declare const Fullpage: FC<any>;
 //# sourceMappingURL=fullpage.d.ts.map

package/dist/tailwind/fullpage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"fullpage.d.ts","sourceRoot":"","sources":["../../src/tailwind/fullpage.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,QAAQ;;;;;6CAQpB,CAAC"}
+{"version":3,"file":"fullpage.d.ts","sourceRoot":"","sources":["../../src/tailwind/fullpage.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAElC,eAAO,MAAM,QAAQ,EAAE,EAAE,CAAC,GAAG,CAQ5B,CAAC"}

package/dist/tailwind/fullpage.js.map

@@ -1 +1 @@
-{"version":3,"file":"fullpage.js","sources":["../../src/tailwind/fullpage.tsx"],"sourcesContent":["import React from 'react';\n\nexport const Fullpage = ({ divRef = null, className = '', children, ...props }) => (\n    <div\n        ref={divRef}\n        {...props}\n        className={`container h-screen flex flex-col justify-center items-center ${className}`}\n    >\n        {children}\n    </div>\n);\n"],"names":[],"mappings":";AAEa,MAAA,WAAW,CAAC,EAAE,SAAS,MAAM,YAAY,IAAI,UAAU,GAAG,MAAA,MACnE;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,KAAK;AAAA,IACJ,GAAG;AAAA,IACJ,WAAW,gEAAgE,SAAS;AAAA,IAEnF;AAAA,EAAA;AACL;"}
+{"version":3,"file":"fullpage.js","sources":["../../src/tailwind/fullpage.tsx"],"sourcesContent":["import React, { FC } from 'react';\n\nexport const Fullpage: FC<any> = ({ divRef = null, className = '', children, ...props }) => (\n    <div\n        ref={divRef}\n        {...props}\n        className={`container h-screen flex flex-col justify-center items-center ${className}`}\n    >\n        {children}\n    </div>\n);\n"],"names":[],"mappings":";AAEa,MAAA,WAAoB,CAAC,EAAE,SAAS,MAAM,YAAY,IAAI,UAAU,GAAG,MAAA,MAC5E;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,KAAK;AAAA,IACJ,GAAG;AAAA,IACJ,WAAW,gEAAgE,SAAS;AAAA,IAEnF;AAAA,EAAA;AACL;"}

package/dist/tailwind/responsiveHelper.d.ts

@@ -1,2 +1,3 @@
-export declare function ResponsiveHelperTW(): import("react/jsx-runtime").JSX.Element;
+import { FC } from 'react';
+export declare const ResponsiveHelperTW: FC<any>;
 //# sourceMappingURL=responsiveHelper.d.ts.map

package/dist/tailwind/responsiveHelper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"responsiveHelper.d.ts","sourceRoot":"","sources":["../../src/tailwind/responsiveHelper.tsx"],"names":[],"mappings":"AAIA,wBAAgB,kBAAkB,4CAWjC"}
+{"version":3,"file":"responsiveHelper.d.ts","sourceRoot":"","sources":["../../src/tailwind/responsiveHelper.tsx"],"names":[],"mappings":"AAEA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAElC,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC,GAAG,CAWtC,CAAC"}

package/dist/tailwind/responsiveHelper.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsxs, jsx } from "react/jsx-runtime";
-function ResponsiveHelperTW() {
+const ResponsiveHelperTW = function ResponsiveHelperTW2() {
   return /* @__PURE__ */ jsxs("span", { className: "fixed bottom-0 right-2 z-30 leading-none text-xs", children: [
     /* @__PURE__ */ jsx("small", { className: "hidden xs:max-sm:block", children: "XS" }),
     /* @__PURE__ */ jsx("small", { className: "hidden sm:max-md:block", children: "SM" }),
@@ -9,7 +9,7 @@ function ResponsiveHelperTW() {
     /* @__PURE__ */ jsx("small", { className: "hidden xl:max-2xl:block", children: "XL" }),
     /* @__PURE__ */ jsx("small", { className: "hidden 2xl:block", children: "XXL" })
   ] });
-}
+};
 export {
   ResponsiveHelperTW
 };

package/dist/tailwind/responsiveHelper.js.map

@@ -1 +1 @@
-{"version":3,"file":"responsiveHelper.js","sources":["../../src/tailwind/responsiveHelper.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\n\nexport function ResponsiveHelperTW() {\n    return (\n        <span className=\"fixed bottom-0 right-2 z-30 leading-none text-xs\">\n            <small className=\"hidden xs:max-sm:block\">XS</small>\n            <small className=\"hidden sm:max-md:block\">SM</small>\n            <small className=\"hidden md:max-lg:block\">MD</small>\n            <small className=\"hidden lg:max-xl:block\">LG</small>\n            <small className=\"hidden xl:max-2xl:block\">XL</small>\n            <small className=\"hidden 2xl:block\">XXL</small>\n        </span>\n    );\n}\n"],"names":[],"mappings":";;AAIO,SAAS,qBAAqB;AAE7B,SAAA,qBAAC,QAAK,EAAA,WAAU,oDACZ,UAAA;AAAA,IAAC,oBAAA,SAAA,EAAM,WAAU,0BAAyB,UAAE,MAAA;AAAA,IAC3C,oBAAA,SAAA,EAAM,WAAU,0BAAyB,UAAE,MAAA;AAAA,IAC3C,oBAAA,SAAA,EAAM,WAAU,0BAAyB,UAAE,MAAA;AAAA,IAC3C,oBAAA,SAAA,EAAM,WAAU,0BAAyB,UAAE,MAAA;AAAA,IAC3C,oBAAA,SAAA,EAAM,WAAU,2BAA0B,UAAE,MAAA;AAAA,IAC5C,oBAAA,SAAA,EAAM,WAAU,oBAAmB,UAAG,MAAA,CAAA;AAAA,EAAA,GAC3C;AAER;"}
+{"version":3,"file":"responsiveHelper.js","sources":["../../src/tailwind/responsiveHelper.tsx"],"sourcesContent":["'use client';\n\nimport React, { FC } from 'react';\n\nexport const ResponsiveHelperTW: FC<any> = function ResponsiveHelperTW() {\n    return (\n        <span className=\"fixed bottom-0 right-2 z-30 leading-none text-xs\">\n            <small className=\"hidden xs:max-sm:block\">XS</small>\n            <small className=\"hidden sm:max-md:block\">SM</small>\n            <small className=\"hidden md:max-lg:block\">MD</small>\n            <small className=\"hidden lg:max-xl:block\">LG</small>\n            <small className=\"hidden xl:max-2xl:block\">XL</small>\n            <small className=\"hidden 2xl:block\">XXL</small>\n        </span>\n    );\n};\n"],"names":["ResponsiveHelperTW"],"mappings":";;AAIa,MAAA,qBAA8B,SAASA,sBAAqB;AAEjE,SAAA,qBAAC,QAAK,EAAA,WAAU,oDACZ,UAAA;AAAA,IAAC,oBAAA,SAAA,EAAM,WAAU,0BAAyB,UAAE,MAAA;AAAA,IAC3C,oBAAA,SAAA,EAAM,WAAU,0BAAyB,UAAE,MAAA;AAAA,IAC3C,oBAAA,SAAA,EAAM,WAAU,0BAAyB,UAAE,MAAA;AAAA,IAC3C,oBAAA,SAAA,EAAM,WAAU,0BAAyB,UAAE,MAAA;AAAA,IAC3C,oBAAA,SAAA,EAAM,WAAU,2BAA0B,UAAE,MAAA;AAAA,IAC5C,oBAAA,SAAA,EAAM,WAAU,oBAAmB,UAAG,MAAA,CAAA;AAAA,EAAA,GAC3C;AAER;"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@kirill.konshin/utils",
   "description": "Utilities",
-  "version": "0.0.18",
+  "version": "0.0.19",
   "type": "module",
   "scripts": {
     "----- BUILD -----": "",

package/src/bootstrap/adaptiveContainer.tsx

@@ -1,12 +1,12 @@
-import React from 'react';
+import React, { FC } from 'react';
 import { Container, ContainerProps } from 'react-bootstrap';
 import { useBreakpoint } from './responsiveHelper';
 
-export function AdaptiveContainer({ children, ...props }: ContainerProps) {
+export const AdaptiveContainer: FC<ContainerProps> = function AdaptiveContainer({ children, ...props }) {
     const { isMobile } = useBreakpoint();
     return (
         <Container fluid={isMobile} {...props}>
             {children}
         </Container>
     );
-}
+};

package/src/bootstrap/controls.stories.tsx

@@ -19,7 +19,7 @@ const meta: Meta<typeof Control> = {
         const [options, setOptionsRaw] = useState(args.options);
 
         const setOptions = useCallback(
-            (options) =>
+            (options: any) =>
                 setOptionsRaw((currentOptions) => {
                     return { ...currentOptions, ...options };
                 }),

package/src/bootstrap/controls.tsx

@@ -1,8 +1,8 @@
-import React, { HTMLInputTypeAttribute, memo } from 'react';
+import React, { HTMLInputTypeAttribute, memo, FC } from 'react';
 
-const lcFirst = (str) => str[0].toLowerCase() + str.substring(1, str.length);
+const lcFirst = (str: string) => str[0].toLowerCase() + str.substring(1, str.length);
 
-const toProperty = (str) => lcFirst(str).split(' ').join('');
+const toProperty = (str: string) => lcFirst(str).split(' ').join('');
 
 export interface ControlProps {
     value?: any;
@@ -24,7 +24,7 @@ export interface ControlProps {
 
 export type LabelProps = Pick<ControlProps, 'name' | 'value' | 'defaultValue'> & { reset: () => void };
 
-export const Label = memo<LabelProps>(function Label({ name, reset, value, defaultValue }) {
+export const Label: FC<LabelProps> = memo(function Label({ name, reset, value, defaultValue }) {
     return (
         <label className="flex-grow-1 mb-0 d-flex align-items-center justify-content-start gap-2">
             {name}
@@ -39,7 +39,7 @@ export const Label = memo<LabelProps>(function Label({ name, reset, value, defau
     );
 });
 
-export const Control = memo<ControlProps>(function Control({
+export const Control: FC<ControlProps> = memo(function Control({
     value = null,
     setValue,
     defaultValue = null,
@@ -47,7 +47,7 @@ export const Control = memo<ControlProps>(function Control({
     setOptions,
     defaultOptions = {},
     name,
-    inputProps: { Tag = 'input', property = 'value', valueExtractor = (e) => e.target.value, ...inputProps } = {},
+    inputProps: { Tag = 'input', property = 'value', valueExtractor = (e: any) => e.target.value, ...inputProps } = {},
     hideValue = false,
     children,
 }) {
@@ -66,7 +66,7 @@ export const Control = memo<ControlProps>(function Control({
                 {...inputProps}
                 {...{ [property]: value || '' }} // null is needed to make it always controlled
                 className={`${value === defaultValue ? 'opacity-75' : ''} ${inputProps.className}`}
-                onChange={(e) => setValue(valueExtractor(e))}
+                onChange={(e: Event) => setValue(valueExtractor(e))}
             >
                 {children}
             </Tag>
@@ -85,7 +85,7 @@ export interface RangeProps extends ControlProps {
     step?: number;
 }
 
-export const Range = memo<RangeProps>(function Range({ min, max, step = 0.1, ...props }) {
+export const Range: FC<RangeProps> = memo(function Range({ min, max, step = 0.1, ...props }) {
     return (
         <Control
             inputProps={{
@@ -94,23 +94,23 @@ export const Range = memo<RangeProps>(function Range({ min, max, step = 0.1, ...
                 max,
                 step,
                 className: 'form-control-range',
-                valueExtractor: (e) => parseFloat(e.target.value),
+                valueExtractor: (e: any) => parseFloat(e.target.value),
             }}
             {...props}
         />
     );
 });
 
-export const Checkbox = memo<ControlProps>(function Checkbox(props) {
+export const Checkbox: FC<ControlProps> = memo(function Checkbox(props) {
     return (
         <Control
-            inputProps={{ type: 'checkbox', property: 'checked', valueExtractor: (e) => e.target.checked }}
+            inputProps={{ type: 'checkbox', property: 'checked', valueExtractor: (e: any) => e.target.checked }}
             {...props}
         />
     );
 });
 
-export const Select = memo<ControlProps>(function Select({ children, ...props }) {
+export const Select: FC<ControlProps> = memo(function Select({ children, ...props }) {
     return (
         <Control inputProps={{ Tag: 'select', className: 'form-select' }} {...props} hideValue={true}>
             {children}