beez-ui 0.4.0 → 0.5.0

package/dist/components/form.js

@@ -1,59 +1,321 @@
 "use client";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import * as React from "react";
 import { Slot } from "radix-ui";
-import { Controller, FormProvider, useFormContext, useFormState, } from "react-hook-form";
+import { Controller, FormProvider, useFormContext, useFormState } from "react-hook-form";
 import { cn } from "../lib/utils.js";
 import { Label } from "./label.js";
+import { jsx as _jsx } from "react/jsx-runtime";
 const Form = FormProvider;
 const FormFieldContext = React.createContext({});
-const FormField = ({ ...props }) => {
-    return (_jsx(FormFieldContext.Provider, { value: { name: props.name }, children: _jsx(Controller, { ...props }) }));
+const FormField = (t0) => {
+	const $ = _c(9);
+	let props;
+	if ($[0] !== t0) {
+		({...props} = t0);
+		$[0] = t0;
+		$[1] = props;
+	} else {
+		props = $[1];
+	}
+	let t1;
+	if ($[2] !== props.name) {
+		t1 = { name: props.name };
+		$[2] = props.name;
+		$[3] = t1;
+	} else {
+		t1 = $[3];
+	}
+	let t2;
+	if ($[4] !== props) {
+		t2 = /* @__PURE__ */ _jsx(Controller, { ...props });
+		$[4] = props;
+		$[5] = t2;
+	} else {
+		t2 = $[5];
+	}
+	let t3;
+	if ($[6] !== t1 || $[7] !== t2) {
+		t3 = /* @__PURE__ */ _jsx(FormFieldContext.Provider, {
+			value: t1,
+			children: t2
+		});
+		$[6] = t1;
+		$[7] = t2;
+		$[8] = t3;
+	} else {
+		t3 = $[8];
+	}
+	return t3;
 };
 const useFormField = () => {
-    const fieldContext = React.useContext(FormFieldContext);
-    const itemContext = React.useContext(FormItemContext);
-    const { getFieldState } = useFormContext();
-    const formState = useFormState({ name: fieldContext.name });
-    const fieldState = getFieldState(fieldContext.name, formState);
-    if (!fieldContext) {
-        throw new Error("useFormField should be used within <FormField>");
-    }
-    const { id } = itemContext;
-    return {
-        id,
-        name: fieldContext.name,
-        formItemId: `${id}-form-item`,
-        formDescriptionId: `${id}-form-item-description`,
-        formMessageId: `${id}-form-item-message`,
-        ...fieldState,
-    };
+	const $ = _c(13);
+	const fieldContext = React.useContext(FormFieldContext);
+	const itemContext = React.useContext(FormItemContext);
+	const { getFieldState } = useFormContext();
+	let t0;
+	if ($[0] !== fieldContext.name) {
+		t0 = { name: fieldContext.name };
+		$[0] = fieldContext.name;
+		$[1] = t0;
+	} else {
+		t0 = $[1];
+	}
+	const formState = useFormState(t0);
+	let t1;
+	if ($[2] !== fieldContext.name || $[3] !== formState || $[4] !== getFieldState) {
+		t1 = getFieldState(fieldContext.name, formState);
+		$[2] = fieldContext.name;
+		$[3] = formState;
+		$[4] = getFieldState;
+		$[5] = t1;
+	} else {
+		t1 = $[5];
+	}
+	const fieldState = t1;
+	if (!fieldContext) {
+		throw new Error("useFormField should be used within <FormField>");
+	}
+	const { id } = itemContext;
+	const t2 = `${id}-form-item`;
+	const t3 = `${id}-form-item-description`;
+	const t4 = `${id}-form-item-message`;
+	let t5;
+	if ($[6] !== fieldContext.name || $[7] !== fieldState || $[8] !== id || $[9] !== t2 || $[10] !== t3 || $[11] !== t4) {
+		t5 = {
+			id,
+			name: fieldContext.name,
+			formItemId: t2,
+			formDescriptionId: t3,
+			formMessageId: t4,
+			...fieldState
+		};
+		$[6] = fieldContext.name;
+		$[7] = fieldState;
+		$[8] = id;
+		$[9] = t2;
+		$[10] = t3;
+		$[11] = t4;
+		$[12] = t5;
+	} else {
+		t5 = $[12];
+	}
+	return t5;
 };
 const FormItemContext = React.createContext({});
-function FormItem({ className, ...props }) {
-    const id = React.useId();
-    return (_jsx(FormItemContext.Provider, { value: { id }, children: _jsx("div", { "data-slot": "form-item", className: cn("grid gap-2", className), ...props }) }));
+function FormItem(t0) {
+	const $ = _c(13);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	const id = React.useId();
+	let t1;
+	if ($[3] !== id) {
+		t1 = { id };
+		$[3] = id;
+		$[4] = t1;
+	} else {
+		t1 = $[4];
+	}
+	let t2;
+	if ($[5] !== className) {
+		t2 = cn("grid gap-2", className);
+		$[5] = className;
+		$[6] = t2;
+	} else {
+		t2 = $[6];
+	}
+	let t3;
+	if ($[7] !== props || $[8] !== t2) {
+		t3 = /* @__PURE__ */ _jsx("div", {
+			"data-slot": "form-item",
+			className: t2,
+			...props
+		});
+		$[7] = props;
+		$[8] = t2;
+		$[9] = t3;
+	} else {
+		t3 = $[9];
+	}
+	let t4;
+	if ($[10] !== t1 || $[11] !== t3) {
+		t4 = /* @__PURE__ */ _jsx(FormItemContext.Provider, {
+			value: t1,
+			children: t3
+		});
+		$[10] = t1;
+		$[11] = t3;
+		$[12] = t4;
+	} else {
+		t4 = $[12];
+	}
+	return t4;
 }
-function FormLabel({ className, ...props }) {
-    const { error, formItemId } = useFormField();
-    return (_jsx(Label, { "data-slot": "form-label", "data-error": !!error, className: cn("data-[error=true]:text-destructive", className), htmlFor: formItemId, ...props }));
+function FormLabel(t0) {
+	const $ = _c(10);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	const { error, formItemId } = useFormField();
+	const t1 = !!error;
+	let t2;
+	if ($[3] !== className) {
+		t2 = cn("data-[error=true]:text-destructive", className);
+		$[3] = className;
+		$[4] = t2;
+	} else {
+		t2 = $[4];
+	}
+	let t3;
+	if ($[5] !== formItemId || $[6] !== props || $[7] !== t1 || $[8] !== t2) {
+		t3 = /* @__PURE__ */ _jsx(Label, {
+			"data-slot": "form-label",
+			"data-error": t1,
+			className: t2,
+			htmlFor: formItemId,
+			...props
+		});
+		$[5] = formItemId;
+		$[6] = props;
+		$[7] = t1;
+		$[8] = t2;
+		$[9] = t3;
+	} else {
+		t3 = $[9];
+	}
+	return t3;
 }
-function FormControl({ ...props }) {
-    const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
-    return (_jsx(Slot.Root, { "data-slot": "form-control", id: formItemId, "aria-describedby": !error
-            ? `${formDescriptionId}`
-            : `${formDescriptionId} ${formMessageId}`, "aria-invalid": !!error, ...props }));
+function FormControl(t0) {
+	const $ = _c(7);
+	let props;
+	if ($[0] !== t0) {
+		({...props} = t0);
+		$[0] = t0;
+		$[1] = props;
+	} else {
+		props = $[1];
+	}
+	const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
+	const t1 = !error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`;
+	const t2 = !!error;
+	let t3;
+	if ($[2] !== formItemId || $[3] !== props || $[4] !== t1 || $[5] !== t2) {
+		t3 = /* @__PURE__ */ _jsx(Slot.Root, {
+			"data-slot": "form-control",
+			id: formItemId,
+			"aria-describedby": t1,
+			"aria-invalid": t2,
+			...props
+		});
+		$[2] = formItemId;
+		$[3] = props;
+		$[4] = t1;
+		$[5] = t2;
+		$[6] = t3;
+	} else {
+		t3 = $[6];
+	}
+	return t3;
 }
-function FormDescription({ className, ...props }) {
-    const { formDescriptionId } = useFormField();
-    return (_jsx("p", { "data-slot": "form-description", id: formDescriptionId, className: cn("text-sm text-muted-foreground", className), ...props }));
+function FormDescription(t0) {
+	const $ = _c(9);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	const { formDescriptionId } = useFormField();
+	let t1;
+	if ($[3] !== className) {
+		t1 = cn("text-sm text-muted-foreground", className);
+		$[3] = className;
+		$[4] = t1;
+	} else {
+		t1 = $[4];
+	}
+	let t2;
+	if ($[5] !== formDescriptionId || $[6] !== props || $[7] !== t1) {
+		t2 = /* @__PURE__ */ _jsx("p", {
+			"data-slot": "form-description",
+			id: formDescriptionId,
+			className: t1,
+			...props
+		});
+		$[5] = formDescriptionId;
+		$[6] = props;
+		$[7] = t1;
+		$[8] = t2;
+	} else {
+		t2 = $[8];
+	}
+	return t2;
 }
-function FormMessage({ className, ...props }) {
-    const { error, formMessageId } = useFormField();
-    const body = error ? String(error?.message ?? "") : props.children;
-    if (!body) {
-        return null;
-    }
-    return (_jsx("p", { "data-slot": "form-message", id: formMessageId, className: cn("text-sm text-destructive", className), ...props, children: body }));
+function FormMessage(t0) {
+	const $ = _c(10);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	const { error, formMessageId } = useFormField();
+	const body = error ? String(error?.message ?? "") : props.children;
+	if (!body) {
+		return null;
+	}
+	let t1;
+	if ($[3] !== className) {
+		t1 = cn("text-sm text-destructive", className);
+		$[3] = className;
+		$[4] = t1;
+	} else {
+		t1 = $[4];
+	}
+	let t2;
+	if ($[5] !== body || $[6] !== formMessageId || $[7] !== props || $[8] !== t1) {
+		t2 = /* @__PURE__ */ _jsx("p", {
+			"data-slot": "form-message",
+			id: formMessageId,
+			className: t1,
+			...props,
+			children: body
+		});
+		$[5] = body;
+		$[6] = formMessageId;
+		$[7] = props;
+		$[8] = t1;
+		$[9] = t2;
+	} else {
+		t2 = $[9];
+	}
+	return t2;
 }
-export { useFormField, Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField, };
+export { useFormField, Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField };

package/dist/components/highlighter.js

@@ -1,91 +1,146 @@
 "use client";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import { useEffect, useRef, useState } from "react";
 import { annotate } from "rough-notation";
-export function Highlighter({ children, action = "highlight", color = "#ffd1dc", strokeWidth = 1.5, animationDuration = 600, iterations = 2, padding = 2, multiline = true, isView = false, }) {
-    const elementRef = useRef(null);
-    const annotationRef = useRef(null);
-    const [isInView, setIsInView] = useState(() => !isView || typeof IntersectionObserver === "undefined");
-    useEffect(() => {
-        if (!isView) {
-            return;
-        }
-        const element = elementRef.current;
-        if (!element || typeof IntersectionObserver === "undefined") {
-            return;
-        }
-        const observer = new IntersectionObserver(([entry]) => {
-            if (entry.isIntersecting) {
-                setIsInView(true);
-                observer.disconnect();
-            }
-        }, {
-            rootMargin: "-10%",
-        });
-        observer.observe(element);
-        return () => {
-            observer.disconnect();
-        };
-    }, [isView]);
-    // If isView is false, always show. If isView is true, wait for inView
-    const shouldShow = !isView || isInView;
-    useEffect(() => {
-        const element = elementRef.current;
-        let resizeObserver = null;
-        let redrawFrameId = null;
-        if (shouldShow && element) {
-            const annotationConfig = {
-                type: action,
-                color,
-                strokeWidth,
-                animationDuration,
-                iterations,
-                padding,
-                multiline,
-            };
-            const annotation = annotate(element, annotationConfig);
-            annotationRef.current = annotation;
-            annotation.show();
-            if (typeof ResizeObserver !== "undefined") {
-                // Solo se observa el elemento anotado, nunca `document.body`: redibujar
-                // la anotación inserta un SVG en el body, y observar el body provocaba
-                // un loop infinito (resize -> redibujo -> resize) que colgaba la página.
-                // El redibujo se difiere a un frame y se coalescen ráfagas para evitar
-                // el warning «ResizeObserver loop» y trabajo redundante.
-                resizeObserver = new ResizeObserver(() => {
-                    if (redrawFrameId != null) {
-                        return;
-                    }
-                    redrawFrameId = window.requestAnimationFrame(() => {
-                        redrawFrameId = null;
-                        annotation.hide();
-                        annotation.show();
-                    });
-                });
-                resizeObserver.observe(element);
-            }
-        }
-        return () => {
-            if (redrawFrameId != null) {
-                window.cancelAnimationFrame(redrawFrameId);
-            }
-            if (annotationRef.current) {
-                annotationRef.current.remove();
-                annotationRef.current = null;
-            }
-            if (resizeObserver) {
-                resizeObserver.disconnect();
-            }
-        };
-    }, [
-        shouldShow,
-        action,
-        color,
-        strokeWidth,
-        animationDuration,
-        iterations,
-        padding,
-        multiline,
-    ]);
-    return (_jsx("span", { ref: elementRef, className: "relative inline-block bg-transparent", children: children }));
+import { jsx as _jsx } from "react/jsx-runtime";
+export function Highlighter(t0) {
+	const $ = _c(17);
+	const { children, action: t1, color: t2, strokeWidth: t3, animationDuration: t4, iterations: t5, padding: t6, multiline: t7, isView: t8 } = t0;
+	const action = t1 === undefined ? "highlight" : t1;
+	const color = t2 === undefined ? "#ffd1dc" : t2;
+	const strokeWidth = t3 === undefined ? 1.5 : t3;
+	const animationDuration = t4 === undefined ? 600 : t4;
+	const iterations = t5 === undefined ? 2 : t5;
+	const padding = t6 === undefined ? 2 : t6;
+	const multiline = t7 === undefined ? true : t7;
+	const isView = t8 === undefined ? false : t8;
+	const elementRef = useRef(null);
+	const annotationRef = useRef(null);
+	let t9;
+	if ($[0] !== isView) {
+		t9 = () => !isView || typeof IntersectionObserver === "undefined";
+		$[0] = isView;
+		$[1] = t9;
+	} else {
+		t9 = $[1];
+	}
+	const [isInView, setIsInView] = useState(t9);
+	let t10;
+	let t11;
+	if ($[2] !== isView) {
+		t10 = () => {
+			if (!isView) {
+				return;
+			}
+			const element = elementRef.current;
+			if (!element || typeof IntersectionObserver === "undefined") {
+				return;
+			}
+			const observer = new IntersectionObserver((t12) => {
+				const [entry] = t12;
+				if (entry.isIntersecting) {
+					setIsInView(true);
+					observer.disconnect();
+				}
+			}, { rootMargin: "-10%" });
+			observer.observe(element);
+			return () => {
+				observer.disconnect();
+			};
+		};
+		t11 = [isView];
+		$[2] = isView;
+		$[3] = t10;
+		$[4] = t11;
+	} else {
+		t10 = $[3];
+		t11 = $[4];
+	}
+	useEffect(t10, t11);
+	const shouldShow = !isView || isInView;
+	let t12;
+	let t13;
+	if ($[5] !== action || $[6] !== animationDuration || $[7] !== color || $[8] !== iterations || $[9] !== multiline || $[10] !== padding || $[11] !== shouldShow || $[12] !== strokeWidth) {
+		t12 = () => {
+			const element_0 = elementRef.current;
+			let resizeObserver = null;
+			let redrawFrameId = null;
+			if (shouldShow && element_0) {
+				const annotationConfig = {
+					type: action,
+					color,
+					strokeWidth,
+					animationDuration,
+					iterations,
+					padding,
+					multiline
+				};
+				const annotation = annotate(element_0, annotationConfig);
+				annotationRef.current = annotation;
+				annotation.show();
+				if (typeof ResizeObserver !== "undefined") {
+					resizeObserver = new ResizeObserver(() => {
+						if (redrawFrameId != null) {
+							return;
+						}
+						redrawFrameId = window.requestAnimationFrame(() => {
+							redrawFrameId = null;
+							annotation.hide();
+							annotation.show();
+						});
+					});
+					resizeObserver.observe(element_0);
+				}
+			}
+			return () => {
+				if (redrawFrameId != null) {
+					window.cancelAnimationFrame(redrawFrameId);
+				}
+				if (annotationRef.current) {
+					annotationRef.current.remove();
+					annotationRef.current = null;
+				}
+				if (resizeObserver) {
+					resizeObserver.disconnect();
+				}
+			};
+		};
+		t13 = [
+			shouldShow,
+			action,
+			color,
+			strokeWidth,
+			animationDuration,
+			iterations,
+			padding,
+			multiline
+		];
+		$[5] = action;
+		$[6] = animationDuration;
+		$[7] = color;
+		$[8] = iterations;
+		$[9] = multiline;
+		$[10] = padding;
+		$[11] = shouldShow;
+		$[12] = strokeWidth;
+		$[13] = t12;
+		$[14] = t13;
+	} else {
+		t12 = $[13];
+		t13 = $[14];
+	}
+	useEffect(t12, t13);
+	let t14;
+	if ($[15] !== children) {
+		t14 = /* @__PURE__ */ _jsx("span", {
+			ref: elementRef,
+			className: "relative inline-block bg-transparent",
+			children
+		});
+		$[15] = children;
+		$[16] = t14;
+	} else {
+		t14 = $[16];
+	}
+	return t14;
 }