@majapisoftwares/ui 4.0.2

package/components/Text/Text.jsx

@@ -0,0 +1,28 @@
+import clsx from "../../utils/clsx";
+import Link from "../Link";
+export const defaultTextStyles = {
+    variant: {
+        default: "text-zinc-700 dark:text-zinc-200",
+        label: "text-zinc-800 font-medium dark:text-zinc-100",
+        secondary: "text-sm text-zinc-500 dark:text-zinc-400",
+    },
+    size: {
+        xs: "text-xs",
+        sm: "text-sm",
+        base: "text-base",
+        lg: "text-lg",
+        xl: "text-xl",
+        "2xl": "text-2xl",
+    },
+};
+function Text({ inline, variant = "default", className, href, target, size = variant !== "label" ? "base" : "sm", ...props }) {
+    if (href || variant === "link") {
+        return (<Link href={href} target={target} {...props} className={className}/>);
+    }
+    className = clsx(defaultTextStyles.variant[variant], defaultTextStyles.size[size], className);
+    if (inline) {
+        return <span {...props} className={className}/>;
+    }
+    return <div {...props} className={className}/>;
+}
+export default Text;

package/components/Text/index.d.ts

@@ -0,0 +1,3 @@
+import Text from "./Text";
+export * from "./Text";
+export default Text;

package/components/Text/index.jsx

@@ -0,0 +1,3 @@
+import Text from "./Text";
+export * from "./Text";
+export default Text;

package/components/Textarea/Textarea.d.ts

@@ -0,0 +1,5 @@
+import { InputProps } from "../Input";
+import { TextareaAutosizeProps } from "react-textarea-autosize/dist/declarations/src";
+export type TextareaProps = InputProps<false> & Partial<Pick<TextareaAutosizeProps, "maxRows" | "minRows" | "onHeightChange" | "cacheMeasurements">>;
+declare function Textarea(props: TextareaProps): import("react").JSX.Element;
+export default Textarea;

package/components/Textarea/Textarea.jsx

@@ -0,0 +1,6 @@
+import Input from "../Input";
+import TextareaAutosize from "react-textarea-autosize";
+function Textarea(props) {
+    return <Input as={TextareaAutosize} {...props}/>;
+}
+export default Textarea;

package/components/Textarea/index.d.ts

@@ -0,0 +1,3 @@
+import Textarea from "./Textarea";
+export * from "./Textarea";
+export default Textarea;

package/components/Textarea/index.js

@@ -0,0 +1,3 @@
+import Textarea from "./Textarea";
+export * from "./Textarea";
+export default Textarea;

package/components/Threads/Threads.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+interface ThreadsProps {
+    color?: [number, number, number];
+    amplitude?: number;
+    distance?: number;
+    enableMouseInteraction?: boolean;
+}
+declare const Threads: React.FC<ThreadsProps>;
+export default Threads;

package/components/Threads/Threads.jsx

@@ -0,0 +1,203 @@
+import React, { useEffect, useRef } from "react";
+import { Renderer, Program, Mesh, Triangle, Color } from "ogl";
+const vertexShader = `
+attribute vec2 position;
+attribute vec2 uv;
+varying vec2 vUv;
+void main() {
+  vUv = uv;
+  gl_Position = vec4(position, 0.0, 1.0);
+}
+`;
+const fragmentShader = `
+precision highp float;
+
+uniform float iTime;
+uniform vec3 iResolution;
+uniform vec3 uColor;
+uniform float uAmplitude;
+uniform float uDistance;
+uniform vec2 uMouse;
+
+#define PI 3.1415926538
+
+const int u_line_count = 40;
+const float u_line_width = 7.0;
+const float u_line_blur = 10.0;
+
+float Perlin2D(vec2 P) {
+    vec2 Pi = floor(P);
+    vec4 Pf_Pfmin1 = P.xyxy - vec4(Pi, Pi + 1.0);
+    vec4 Pt = vec4(Pi.xy, Pi.xy + 1.0);
+    Pt = Pt - floor(Pt * (1.0 / 71.0)) * 71.0;
+    Pt += vec2(26.0, 161.0).xyxy;
+    Pt *= Pt;
+    Pt = Pt.xzxz * Pt.yyww;
+    vec4 hash_x = fract(Pt * (1.0 / 951.135664));
+    vec4 hash_y = fract(Pt * (1.0 / 642.949883));
+    vec4 grad_x = hash_x - 0.49999;
+    vec4 grad_y = hash_y - 0.49999;
+    vec4 grad_results = inversesqrt(grad_x * grad_x + grad_y * grad_y)
+        * (grad_x * Pf_Pfmin1.xzxz + grad_y * Pf_Pfmin1.yyww);
+    grad_results *= 1.4142135623730950;
+    vec2 blend = Pf_Pfmin1.xy * Pf_Pfmin1.xy * Pf_Pfmin1.xy
+               * (Pf_Pfmin1.xy * (Pf_Pfmin1.xy * 6.0 - 15.0) + 10.0);
+    vec4 blend2 = vec4(blend, vec2(1.0 - blend));
+    return dot(grad_results, blend2.zxzx * blend2.wwyy);
+}
+
+float pixel(float count, vec2 resolution) {
+    return (1.0 / max(resolution.x, resolution.y)) * count;
+}
+
+float lineFn(vec2 st, float width, float perc, float offset, vec2 mouse, float time, float amplitude, float distance) {
+    float split_offset = (perc * 0.4);
+    float split_point = 0.1 + split_offset;
+
+    float amplitude_normal = smoothstep(split_point, 0.7, st.x);
+    float amplitude_strength = 0.5;
+    float finalAmplitude = amplitude_normal * amplitude_strength
+                           * amplitude * (1.0 + (mouse.y - 0.5) * 0.2);
+
+    float time_scaled = time / 10.0 + (mouse.x - 0.5) * 1.0;
+    float blur = smoothstep(split_point, split_point + 0.05, st.x) * perc;
+
+    float xnoise = mix(
+        Perlin2D(vec2(time_scaled, st.x + perc) * 2.5),
+        Perlin2D(vec2(time_scaled, st.x + time_scaled) * 3.5) / 1.5,
+        st.x * 0.3
+    );
+
+    float y = 0.5 + (perc - 0.5) * distance + xnoise / 2.0 * finalAmplitude;
+
+    float line_start = smoothstep(
+        y + (width / 2.0) + (u_line_blur * pixel(1.0, iResolution.xy) * blur),
+        y,
+        st.y
+    );
+
+    float line_end = smoothstep(
+        y,
+        y - (width / 2.0) - (u_line_blur * pixel(1.0, iResolution.xy) * blur),
+        st.y
+    );
+
+    return clamp(
+        (line_start - line_end) * (1.0 - smoothstep(0.0, 1.0, pow(perc, 0.3))),
+        0.0,
+        1.0
+    );
+}
+
+void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+    vec2 uv = fragCoord / iResolution.xy;
+
+    float line_strength = 1.0;
+    for (int i = 0; i < u_line_count; i++) {
+        float p = float(i) / float(u_line_count);
+        line_strength *= (1.0 - lineFn(
+            uv,
+            u_line_width * pixel(1.0, iResolution.xy) * (1.0 - p),
+            p,
+            (PI * 1.0) * p,
+            uMouse,
+            iTime,
+            uAmplitude,
+            uDistance
+        ));
+    }
+
+    float colorVal = 1.0 - line_strength;
+    fragColor = vec4(uColor * colorVal, colorVal);
+}
+
+void main() {
+    mainImage(gl_FragColor, gl_FragCoord.xy);
+}
+`;
+const Threads = ({ color = [1, 1, 1], amplitude = 1, distance = 0, enableMouseInteraction = false, ...rest }) => {
+    const containerRef = useRef(null);
+    const animationFrameId = useRef(undefined);
+    useEffect(() => {
+        if (!containerRef.current)
+            return;
+        const container = containerRef.current;
+        const renderer = new Renderer({ alpha: true });
+        const gl = renderer.gl;
+        gl.clearColor(0, 0, 0, 0);
+        gl.enable(gl.BLEND);
+        gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+        container.appendChild(gl.canvas);
+        const geometry = new Triangle(gl);
+        const program = new Program(gl, {
+            vertex: vertexShader,
+            fragment: fragmentShader,
+            uniforms: {
+                iTime: { value: 0 },
+                iResolution: {
+                    value: new Color(gl.canvas.width, gl.canvas.height, gl.canvas.width / gl.canvas.height),
+                },
+                uColor: { value: new Color(...color) },
+                uAmplitude: { value: amplitude },
+                uDistance: { value: distance },
+                uMouse: { value: new Float32Array([0.5, 0.5]) },
+            },
+        });
+        const mesh = new Mesh(gl, { geometry, program });
+        function resize() {
+            const { clientWidth, clientHeight } = container;
+            renderer.setSize(clientWidth, clientHeight);
+            program.uniforms.iResolution.value.r = clientWidth;
+            program.uniforms.iResolution.value.g = clientHeight;
+            program.uniforms.iResolution.value.b = clientWidth / clientHeight;
+        }
+        window.addEventListener("resize", resize);
+        resize();
+        const currentMouse = [0.5, 0.5];
+        let targetMouse = [0.5, 0.5];
+        function handleMouseMove(e) {
+            const rect = container.getBoundingClientRect();
+            const x = (e.clientX - rect.left) / rect.width;
+            const y = 1.0 - (e.clientY - rect.top) / rect.height;
+            targetMouse = [x, y];
+        }
+        function handleMouseLeave() {
+            targetMouse = [0.5, 0.5];
+        }
+        if (enableMouseInteraction) {
+            container.addEventListener("mousemove", handleMouseMove);
+            container.addEventListener("mouseleave", handleMouseLeave);
+        }
+        function update(t) {
+            if (enableMouseInteraction) {
+                const smoothing = 0.05;
+                currentMouse[0] += smoothing * (targetMouse[0] - currentMouse[0]);
+                currentMouse[1] += smoothing * (targetMouse[1] - currentMouse[1]);
+                program.uniforms.uMouse.value[0] = currentMouse[0];
+                program.uniforms.uMouse.value[1] = currentMouse[1];
+            }
+            else {
+                program.uniforms.uMouse.value[0] = 0.5;
+                program.uniforms.uMouse.value[1] = 0.5;
+            }
+            program.uniforms.iTime.value = t * 0.001;
+            renderer.render({ scene: mesh });
+            animationFrameId.current = requestAnimationFrame(update);
+        }
+        animationFrameId.current = requestAnimationFrame(update);
+        return () => {
+            if (animationFrameId.current)
+                cancelAnimationFrame(animationFrameId.current);
+            window.removeEventListener("resize", resize);
+            if (enableMouseInteraction) {
+                container.removeEventListener("mousemove", handleMouseMove);
+                container.removeEventListener("mouseleave", handleMouseLeave);
+            }
+            if (container.contains(gl.canvas))
+                container.removeChild(gl.canvas);
+            gl.getExtension("WEBGL_lose_context")?.loseContext();
+        };
+    }, [color, amplitude, distance, enableMouseInteraction]);
+    return (<div ref={containerRef} className="relative h-full w-full" {...rest}/>);
+};
+export default Threads;

package/components/Threads/index.d.ts

@@ -0,0 +1,3 @@
+import Threads from "./Threads";
+export * from "./Threads";
+export default Threads;

package/components/Threads/index.jsx

@@ -0,0 +1,3 @@
+import Threads from "./Threads";
+export * from "./Threads";
+export default Threads;

package/components/Tooltip/Tooltip.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode, Ref } from "react";
+declare function Tooltip({ children, content, side, delayDuration, className, arrowClassName, ref, }: {
+    children?: ReactNode;
+    content?: ReactNode;
+    side?: "top" | "bottom" | "left" | "right";
+    delayDuration?: number;
+    className?: string;
+    arrowClassName?: string;
+    ref?: Ref<HTMLButtonElement>;
+}): import("react").JSX.Element;
+export default Tooltip;

package/components/Tooltip/Tooltip.jsx

@@ -0,0 +1,21 @@
+import * as RTooltip from "@radix-ui/react-tooltip";
+import clsx from "../../utils/clsx";
+function Tooltip({ children, content, side, delayDuration, className, arrowClassName, ref, }) {
+    if (!content) {
+        return <>{children}</>;
+    }
+    return (<RTooltip.Provider>
+      <RTooltip.Root delayDuration={delayDuration}>
+        <RTooltip.Trigger asChild ref={ref}>
+          {children}
+        </RTooltip.Trigger>
+        <RTooltip.Portal>
+          <RTooltip.Content className={clsx("z-20 rounded-sm bg-zinc-950 px-2 py-1 text-center text-sm text-zinc-50 shadow-sm", "dark:bg-zinc-50 dark:text-zinc-950", "data-[state=closed]:animate-fade-out data-[state=delayed-open]:data-[side=bottom]:animate-elastic-slide-up-and-fade data-[state=delayed-open]:data-[side=left]:animate-elastic-slide-right-and-fade data-[state=delayed-open]:data-[side=right]:animate-elastic-slide-left-and-fade data-[state=delayed-open]:data-[side=top]:animate-elastic-slide-down-and-fade will-change-[transform,opacity]", className)} sideOffset={5} side={side}>
+            {content}
+            <RTooltip.Arrow className={clsx("fill-zinc-950 dark:fill-zinc-50", arrowClassName)}/>
+          </RTooltip.Content>
+        </RTooltip.Portal>
+      </RTooltip.Root>
+    </RTooltip.Provider>);
+}
+export default Tooltip;

package/components/Tooltip/index.d.ts

@@ -0,0 +1,3 @@
+import Tooltip from "./Tooltip";
+export * from "./Tooltip";
+export default Tooltip;

package/components/Tooltip/index.jsx

@@ -0,0 +1,3 @@
+import Tooltip from "./Tooltip";
+export * from "./Tooltip";
+export default Tooltip;

package/components/VisibilityActivatedButton/VisibilityActivatedButton.d.ts

@@ -0,0 +1,7 @@
+import { ComponentProps } from "react";
+import Button from "../Button";
+export default function VisibilityActivatedButton({ rootMargin, threshold, root, ...props }: ComponentProps<typeof Button> & {
+    root?: Element | Document | null;
+    threshold?: number;
+    rootMargin?: string;
+}): import("react").JSX.Element;

package/components/VisibilityActivatedButton/VisibilityActivatedButton.jsx

@@ -0,0 +1,18 @@
+import { useEffect, useRef } from "react";
+import { useIntersection } from "react-use";
+import Button from "../Button";
+export default function VisibilityActivatedButton({ rootMargin, threshold, root, ...props }) {
+    const observerRef = useRef(null);
+    const intersection = useIntersection(observerRef, {
+        root,
+        rootMargin,
+        threshold,
+    });
+    useEffect(() => {
+        if (intersection && intersection.isIntersecting) {
+            observerRef.current?.click();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [intersection?.isIntersecting]);
+    return <Button ref={observerRef} {...props}/>;
+}

package/components/VisibilityActivatedButton/index.d.ts

@@ -0,0 +1,3 @@
+import VisibilityActivatedButton from "./VisibilityActivatedButton";
+export * from "./VisibilityActivatedButton";
+export default VisibilityActivatedButton;

package/components/VisibilityActivatedButton/index.jsx

@@ -0,0 +1,3 @@
+import VisibilityActivatedButton from "./VisibilityActivatedButton";
+export * from "./VisibilityActivatedButton";
+export default VisibilityActivatedButton;

package/form.d.ts

@@ -0,0 +1,82 @@
+import { FormEvent } from "react";
+import { ArrayKey, IsTuple, TupleKeys } from "react-hook-form/dist/types/path/common";
+import { Get, PartialDeep, RequiredDeep, WritableDeep } from "type-fest";
+import { DeepPartial } from "redux";
+type Any = any;
+export type DeepMapValues<T, V> = {
+    [K in keyof T]: T[K] extends Array<Any> ? DeepMapValues<T[K][0], V> & V : T[K] extends object ? DeepMapValues<T[K], V> : V;
+};
+export type IsEqual<T1, T2> = T1 extends T2 ? (<G>() => G extends T1 ? 1 : 2) extends <G>() => G extends T2 ? 1 : 2 ? true : false : false;
+export type Primitive = null | undefined | string | number | boolean | symbol | bigint;
+export type BrowserNativeObject = Date | FileList | File;
+export type FieldValues = Record<string, Any>;
+export type AnyIsEqual<T1, T2> = T1 extends T2 ? IsEqual<T1, T2> extends true ? true : never : never;
+export type PathImpl<K extends string | number, V, TraversedTypes> = V extends Primitive | BrowserNativeObject ? `${K}` : true extends AnyIsEqual<TraversedTypes, V> ? `${K}` : `${K}` | `${K}.${PathInternal<V, TraversedTypes | V>}`;
+export type PathInternal<T, TraversedTypes = T> = T extends ReadonlyArray<infer V> ? IsTuple<T> extends true ? {
+    [K in TupleKeys<T>]-?: PathImpl<K & string, T[K], TraversedTypes>;
+}[TupleKeys<T>] : PathImpl<ArrayKey, V, TraversedTypes> : {
+    [K in keyof T]-?: PathImpl<K & string, T[K], TraversedTypes>;
+}[keyof T];
+export type Path<T> = T extends Any ? PathInternal<T> : never;
+export type FieldPath<TFieldValues extends FieldValues> = Path<TFieldValues>;
+export type DeepRequiredByValidation<T, V extends {
+    [K in keyof T]?: Any;
+}> = {
+    [P in keyof T]-?: P extends keyof V ? T[P] extends object ? DeepRequiredByValidation<T[P], V[P]> : DeepRequiredByValidation<NonNullable<T[P]>, V[P]> : T[P];
+};
+export type Validation = {
+    required?: string;
+    min?: [number, string];
+    pattern?: [RegExp, string];
+};
+export declare function createFormState<T extends object, V extends PartialDeep<DeepMapValues<RequiredDeep<T>, Validation>>>(options: {
+    defaultValues: T;
+    validation?: V;
+}): {
+    options: {
+        defaultValues: T;
+        validation?: V;
+    };
+    values: DeepRequiredByValidation<T, V>;
+    setValue<N extends FieldPath<T>>(name: N, value: DeepPartial<Get<T, N>>): void;
+    errors: DeepMapValues<RequiredDeep<T>, {
+        message: string;
+    }>;
+    registeredFields: {
+        value: string[];
+    } & {
+        $$valtioSnapshot: {
+            value: string[];
+        };
+    };
+    reset(values?: DeepPartial<T>): void;
+};
+export declare function useForm<T extends ReturnType<typeof createFormState>>(state: T, options?: {
+    onSubmit?: (values: T["values"]) => void;
+    resetOnUnmount?: boolean;
+}): WritableDeep<import("valtio").Snapshot<T>> & {
+    onSubmit: (e: FormEvent<HTMLFormElement>) => void;
+    register: <N extends FieldPath<T["values"]>>(name: N, handler?: {
+        onChange?: (e: Any) => Any;
+        onValueChange?: (e: Any) => Any;
+    }) => {
+        onChange(event: {
+            target: {
+                value: Any;
+            };
+        }): void;
+        name: N;
+        value: any;
+        error: boolean;
+        helpText: any;
+        required: boolean;
+    } | {
+        onValueChange(value: Any): void;
+        name: N;
+        value: any;
+        error: boolean;
+        helpText: any;
+        required: boolean;
+    };
+};
+export {};

package/form.js

@@ -0,0 +1,113 @@
+import { proxy, ref, useSnapshot } from "valtio";
+import { useCallback } from "react";
+import { cloneDeep, get, isNil, merge, set, unset } from "lodash-es";
+import { useUnmount } from "react-use";
+export function createFormState(options) {
+    const defaultValues = cloneDeep(options.defaultValues);
+    const valuesState = proxy(defaultValues);
+    const errorsState = proxy({});
+    const formState = proxy({
+        options,
+        values: valuesState,
+        setValue(name, value) {
+            unset(errorsState, name);
+            set(valuesState, name, value);
+        },
+        errors: errorsState,
+        registeredFields: ref({
+            value: [],
+        }),
+        reset(values) {
+            const update = merge(cloneDeep(defaultValues), cloneDeep(values));
+            for (const key in formState.values) {
+                delete formState.values[key];
+            }
+            for (const key in update) {
+                const typedKey = key;
+                formState.setValue(typedKey, update[key]);
+            }
+        },
+    });
+    return formState;
+}
+// noinspection JSUnusedGlobalSymbols
+export function useForm(state, options) {
+    const snapshot = useSnapshot(state, {
+        sync: true,
+    });
+    useUnmount(() => {
+        if (options?.resetOnUnmount) {
+            snapshot.reset();
+        }
+    });
+    return {
+        ...snapshot,
+        onSubmit: (e) => {
+            e.preventDefault();
+            const fields = Array.from(e.currentTarget.querySelectorAll(`[name],[data-input-name]`)).map((f) => f.getAttribute("name") || f.getAttribute("data-input-name"));
+            for (const field of fields) {
+                const nameWithoutIndexes = field
+                    .split(".")
+                    .filter((n) => isNaN(+n))
+                    .join(".");
+                const validation = get(snapshot.options.validation, nameWithoutIndexes);
+                const value = get(snapshot.values, field);
+                if (validation?.required &&
+                    (Array.isArray(value) ? !value.length : !value)) {
+                    set(state.errors, field, { message: validation.required });
+                }
+                else if (validation?.pattern &&
+                    !validation.pattern[0].test(value)) {
+                    set(state.errors, field, { message: validation.pattern[1] });
+                }
+                else if (!isNil(validation?.min) &&
+                    value.length < validation?.min[0]) {
+                    set(state.errors, field, { message: validation?.min[1] });
+                }
+            }
+            if (Object.keys(state.errors).length === 0) {
+                options?.onSubmit?.(snapshot.values);
+            }
+            else {
+                console.error(state.errors);
+            }
+        },
+        register: useCallback((name, handler) => {
+            if (!state.registeredFields.value.includes(name)) {
+                state.registeredFields.value.push(name);
+            }
+            const nameWithoutIndexes = name
+                .split(".")
+                .filter((n) => isNaN(+n))
+                .join(".");
+            const value = get(snapshot.values, name);
+            const props = {
+                name,
+                value: !isNil(value) ? value : "",
+                error: !!get(snapshot.errors, name),
+                // @ts-expect-error the type is correct
+                helpText: get(snapshot.errors, name)?.message,
+                required: !!get(snapshot.options.validation, nameWithoutIndexes)?.required,
+                ...(handler?.onChange || !handler?.onValueChange
+                    ? {
+                        onChange(event) {
+                            snapshot.setValue(name, (handler?.onChange
+                                ? handler?.onChange(event)
+                                : event.target.value));
+                        },
+                    }
+                    : {
+                        onValueChange(value) {
+                            snapshot.setValue(name, handler.onValueChange(value));
+                        },
+                    }),
+            };
+            if (!props.helpText) {
+                delete props.helpText;
+            }
+            return props;
+        }, 
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        [snapshot]),
+    };
+}

package/form2.d.ts

@@ -0,0 +1,15 @@
+import { ControllerFieldState, ControllerProps, ControllerRenderProps, FieldPath, FieldValues, UseFormProps, UseFormReturn, UseFormStateReturn } from "react-hook-form";
+import * as z from "zod";
+import React from "react";
+export declare function useForm<TSchema extends z.Schema<any, any>, TFieldValues extends FieldValues = z.infer<TSchema>>({ schema, ...props }: UseFormProps<TFieldValues> & {
+    schema?: TSchema;
+}): UseFormReturn<TFieldValues>;
+export declare function Controller<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>(props: Omit<ControllerProps<TFieldValues, TName>, "render"> & {
+    render: ({ field, fieldState, formState, }: {
+        field: ControllerRenderProps<TFieldValues, TName> & {
+            error?: string;
+        };
+        fieldState: ControllerFieldState;
+        formState: UseFormStateReturn<TFieldValues>;
+    }) => React.ReactElement;
+}): React.JSX.Element;

package/form2.jsx

@@ -0,0 +1,29 @@
+import { Controller as RHFController, useForm as useRHForm, } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import React, { useMemo } from "react";
+import { get } from "lodash-es";
+export function useForm({ schema, ...props }) {
+    const jsonProps = JSON.stringify(props);
+    const config = useMemo(() => ({
+        resolver: schema ? zodResolver(schema) : undefined,
+        ...props,
+    }), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [jsonProps, schema]);
+    const formReturn = useRHForm(config);
+    const register = formReturn.register;
+    formReturn.register = function (name, options) {
+        const registerReturn = register(name, options);
+        const zodProperty = schema
+            ?.shape?.[name];
+        return {
+            ...registerReturn,
+            error: get(formReturn.formState.errors, name)?.message,
+            required: !!zodProperty && !zodProperty.isOptional(),
+        };
+    };
+    return formReturn;
+}
+export function Controller(props) {
+    return <RHFController {...props}/>;
+}

package/hooks/useBeforeUnload.d.ts

@@ -0,0 +1 @@
+export default function useBeforeUnload(message?: string | false): void;

package/hooks/useBeforeUnload.js

@@ -0,0 +1,17 @@
+import { useEffect } from "react";
+export default function useBeforeUnload(message) {
+    useEffect(() => {
+        if (message) {
+            const handleBeforeUnload = (e) => {
+                e.preventDefault();
+                // noinspection JSDeprecatedSymbols
+                e.returnValue = message; // This message is not shown in most browsers
+                return message; // Some older browsers may display this message
+            };
+            window.addEventListener("beforeunload", handleBeforeUnload);
+            return () => {
+                window.removeEventListener("beforeunload", handleBeforeUnload);
+            };
+        }
+    }, [message]);
+}

package/hooks/useDebounceEffect.d.ts

@@ -0,0 +1,2 @@
+import { DependencyList } from "react";
+export default function useDebounceEffect(fn: () => void, waitTime: number, deps?: DependencyList): void;

package/hooks/useDebounceEffect.js

@@ -0,0 +1,14 @@
+import { useEffect } from "react";
+export default function useDebounceEffect(fn, waitTime, deps) {
+    useEffect(() => {
+        const t = setTimeout(() => {
+            // @ts-expect-error trust me
+            // eslint-disable-next-line prefer-spread
+            fn.apply(undefined, deps);
+        }, waitTime);
+        return () => {
+            clearTimeout(t);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, deps);
+}

package/hooks/useDebouncedValue.d.ts

@@ -0,0 +1,2 @@
+import { StringValue } from "ms";
+export default function useDebounce<T = unknown>(value: T, delay: StringValue | number): T;