@g4rcez/components 5.0.1 → 5.0.3

package/dist/components/form/file-upload.jsx

@@ -0,0 +1,160 @@
+"use client";
+import { WaveformIcon, FileIcon, FileCodeIcon, FileTextIcon, FileVideoIcon, FolderIcon, FolderOpenIcon, TableIcon, XIcon, } from "@phosphor-icons/react";
+import prettyBytes from "pretty-bytes";
+import React, { cloneElement, createContext, Fragment, useContext, useEffect, useState } from "react";
+import { useDropzone } from "react-dropzone";
+import { useTranslations } from "../../hooks/use-translations";
+import { Modal } from "../floating/modal";
+const Context = createContext([null, () => { }]);
+const useFileManager = () => useContext(Context);
+const getMimeType = (file) => {
+    if (file.type.startsWith("image/"))
+        return "img";
+    if (file.type.startsWith("audio/"))
+        return "audio";
+    if (file.type.startsWith("video/"))
+        return "video";
+    return file.type;
+};
+const extensionMap = {
+    csv: TableIcon,
+    xls: TableIcon,
+    mov: FileVideoIcon,
+    mp4: FileVideoIcon,
+    xlsx: TableIcon,
+    pdf: FileTextIcon,
+    txt: FileTextIcon,
+    json: FileCodeIcon,
+    mp3: WaveformIcon,
+};
+const ItemViewer = (props) => {
+    const translations = useTranslations();
+    const [, setManager] = useFileManager();
+    const [info, setInfo] = useState({ url: "", type: "", size: "" });
+    useEffect(() => {
+        const file = props.file;
+        const url = URL.createObjectURL(file);
+        setInfo({ url, type: getMimeType(file), size: prettyBytes(file.size) });
+        return () => URL.revokeObjectURL(url);
+    }, [props.file]);
+    const onViewFile = (e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        setManager({ ...info, file: props.file });
+    };
+    const onDeleteFile = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        props.onDeleteFile?.(props.file);
+    };
+    const fileName = props.file.name;
+    const Icon = extensionMap[props.file.name.split(".").at(-1)] ?? FileIcon;
+    const Element = info.type === "img" ? <img src={info.url} className="w-full object-contain" alt={props.file.name}/> : <Icon size={48}/>;
+    return (<li className="flex w-full flex-row justify-between gap-file-upload-gap border-b border-card-border last:border-b-transparent">
+            <div className="flex flex-col gap-file-upload-gap">
+                <div className="flex flex-row items-center gap-file-upload-gap">
+                    <button type="button" onClick={onViewFile} aria-label={translations.fileUploadViewFile(fileName)} className="m-2 flex size-file-upload-thumb-size items-center justify-center overflow-hidden">
+                        {Element}
+                    </button>
+                    <div className="flex flex-col items-start justify-start text-left">
+                        <span>{props.file.name}</span>
+                        <span className="text-file-upload-text-size italic">{info.size}</span>
+                    </div>
+                </div>
+                {props.File ? (<div className="min-w-full flex-1">
+                        <props.File file={props.file}/>
+                    </div>) : null}
+            </div>
+            <div className="align-start flex justify-start py-file-upload-delete-py transition-colors duration-300 ease-linear hover:text-danger-hover">
+                <button onClick={onDeleteFile} type="button" aria-label={translations.fileUploadRemoveFile(fileName)} className="flex size-6 items-center justify-center">
+                    <XIcon size={16} aria-hidden="true"/>
+                </button>
+            </div>
+        </li>);
+};
+const FilesList = (props) => (<ul className="w-full space-y-8">
+        {props.files.map((file) => {
+        return <ItemViewer File={props.File} onDeleteFile={props.onDeleteFile} key={file.name} file={file}/>;
+    })}
+    </ul>);
+const Idle = (props) => {
+    const t = useTranslations();
+    const Icon = props.dragging ? FolderOpenIcon : FolderIcon;
+    const onUpload = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        props.onUpload?.();
+    };
+    const onUploadKeyDown = (event) => {
+        if (event.key !== "Enter" && event.key !== " ")
+            return;
+        onUpload(event);
+    };
+    return (<div className="flex flex-col items-center justify-center">
+            <div className="flex flex-col items-center justify-center gap-file-upload-inner-gap">
+                <span className="text-primary">
+                    <Icon size={80} aria-hidden="true"/>
+                </span>
+            </div>
+            <div className="my-file-upload-thumb-my flex flex-col items-center gap-file-upload-thumb-gap">
+                <p>{t.uploadIdle}</p>
+                <button className="text-primary underline" type="button" aria-label={t.fileUploadUploadButtonLabel(t.uploadIdleButton)} onClick={onUpload} onKeyDown={onUploadKeyDown}>
+                    {t.uploadIdleButton}
+                </button>
+            </div>
+        </div>);
+};
+const InteractiveArea = (props) => {
+    if (props.isDragActive)
+        return <Idle files={props.files} dragging onUpload={props.onUpload}/>;
+    if (props.files.length > 0) {
+        return <FilesList File={props.File} onDeleteFile={props.onDeleteFile} files={props.files}/>;
+    }
+    return <Fragment>{cloneElement(props.idle, { onUpload: props.onUpload })}</Fragment>;
+};
+const DefaultIdle = <Idle dragging={false}/>;
+const FileViewer = (props) => {
+    const file = props.item.file;
+    const type = props.item.type;
+    return (<div className="flex flex-col gap-file-upload-gap">
+            <p className="text-file-upload-text-name font-medium">{props.item.file.name}</p>
+            <p className="text-file-upload-text-size">{props.item.size}</p>
+            {type === "img" ? (<img className="container inline-block w-full max-w-96" src={props.item.url} alt={file.name}/>) : type === "video" ? (<video className="container block w-full max-w-96" src={props.item.url} controls muted/>) : type === "audio" ? (<figure>
+                    <audio controls src={props.item.url}>
+                        <track kind="captions"/>
+                    </audio>
+                </figure>) : null}
+        </div>);
+};
+export const FileUpload = ({ idle = DefaultIdle, onDeleteFile, File, onDrop, ...props }) => {
+    const t = useTranslations();
+    const state = useState(null);
+    const [files, setFiles] = useState([]);
+    const items = props.files ?? files;
+    const close = () => state[1](null);
+    const drop = (x) => {
+        onDrop?.(x);
+        setFiles((prev) => prev.concat(x));
+    };
+    const dropzoneOptions = {
+        multiple: props.multiple,
+        onDragEnter: props.onDragEnter,
+        onDragOver: props.onDragOver,
+        onDragLeave: props.onDragLeave,
+        onDrop: drop,
+    };
+    const { getRootProps, getInputProps, isDragActive, open } = useDropzone(dropzoneOptions);
+    return (<Context.Provider value={state}>
+            <Modal overlayClickClose title={t.uploadDialogTitle} ariaTitle={t.uploadDialogTitle} open={state[0] !== null} onChange={close}>
+                {state[0] ? <FileViewer item={state[0]}/> : null}
+            </Modal>
+            <div {...getRootProps({
+        "aria-label": t.fileUploadZoneLabel,
+        "data-active": items ? items.length > 0 : false,
+        className: "flex flex-col items-center justify-center rounded-file-upload-radius border border-card-border p-file-upload-p text-foreground data-[active=true]:border-solid data-[active=false]:border-dashed data-[active=true]:border-transparent data-[active=true]:bg-card-background",
+    })}>
+                <input {...getInputProps()} aria-label={t.fileUploadZoneLabel} name={props.name} id={props.name}/>
+                <InteractiveArea File={File} onDeleteFile={onDeleteFile} isDragActive={isDragActive} idle={idle} files={items} onUpload={open}/>
+            </div>
+        </Context.Provider>);
+};

package/dist/components/form/form.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+export declare const Form: (props: React.ComponentProps<"form">) => React.JSX.Element;
+//# sourceMappingURL=form.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"form.d.ts","sourceRoot":"","sources":["../../../src/components/form/form.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,eAAO,MAAM,IAAI,GAAI,OAAO,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,sBAOvD,CAAC"}

package/dist/components/form/form.jsx

@@ -0,0 +1,10 @@
+"use client";
+import React from "react";
+export const Form = (props) => {
+    const onSubmit = (e) => {
+        e.persist();
+        e.preventDefault();
+        props.onSubmit?.(e);
+    };
+    return <form {...props} onSubmit={onSubmit}/>;
+};

package/dist/components/form/formReset.d.ts

@@ -0,0 +1,2 @@
+export declare const formReset: (form?: HTMLFormElement | null) => void;
+//# sourceMappingURL=formReset.d.ts.map

package/dist/components/form/formReset.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"formReset.d.ts","sourceRoot":"","sources":["../../../src/components/form/formReset.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS,GAAI,OAAO,eAAe,GAAG,IAAI,SAatD,CAAC"}

package/dist/components/form/formReset.js

@@ -0,0 +1,10 @@
+//#region src/components/form/formReset.tsx
+var e = ["INPUT", "SELECT"], t = (t) => {
+	t && Array.from(t.elements).forEach((t) => {
+		e.includes(t.tagName) && (t.tagName === "INPUT" && (t.value = t.defaultValue), t.tagName === "SELECT" && (t.value = ""), t.setAttribute("data-initialized", "false"));
+	});
+};
+//#endregion
+export { t as formReset };
+
+//# sourceMappingURL=formReset.js.map

package/dist/components/form/formReset.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"formReset.js","names":[],"sources":["../../../src/components/form/formReset.tsx"],"sourcesContent":["const inputFields = [\"INPUT\", \"SELECT\"];\n\nexport const formReset = (form?: HTMLFormElement | null) => {\n    if (!form) return;\n    const elements = Array.from(form.elements);\n    elements.forEach((field) => {\n        if (!inputFields.includes(field.tagName)) return;\n        if (field.tagName === \"INPUT\") {\n            (field as HTMLInputElement).value = (field as HTMLInputElement).defaultValue;\n        }\n        if (field.tagName === \"SELECT\") {\n            (field as HTMLSelectElement).value = \"\";\n        }\n        field.setAttribute(\"data-initialized\", \"false\");\n    });\n};\n"],"mappings":";AAAA,IAAM,IAAc,CAAC,SAAS,QAAQ,GAEzB,KAAa,MAAkC;CACnD,KAEL,MADuB,KAAK,EAAK,QACjC,EAAS,SAAS,MAAU;EACnB,EAAY,SAAS,EAAM,OAAO,MACnC,EAAM,YAAY,YAClB,EAA4B,QAAS,EAA2B,eAEhE,EAAM,YAAY,aAClB,EAA6B,QAAQ,KAEzC,EAAM,aAAa,oBAAoB,OAAO;CAClD,CAAC;AACL"}

package/dist/components/form/formReset.jsx

@@ -0,0 +1,17 @@
+const inputFields = ["INPUT", "SELECT"];
+export const formReset = (form) => {
+    if (!form)
+        return;
+    const elements = Array.from(form.elements);
+    elements.forEach((field) => {
+        if (!inputFields.includes(field.tagName))
+            return;
+        if (field.tagName === "INPUT") {
+            field.value = field.defaultValue;
+        }
+        if (field.tagName === "SELECT") {
+            field.value = "";
+        }
+        field.setAttribute("data-initialized", "false");
+    });
+};

package/dist/components/form/free-text.d.ts

@@ -0,0 +1,11 @@
+import MaskInput, { InputTypes } from "the-mask-input";
+import { Any, Override, ReactComponent } from "../../types";
+import { FeedbackProps, InputFieldProps } from "./input-field";
+type FreeTextTag = "input" | "textarea";
+export type FreeTextProps<T extends FreeTextTag, ExtraProps extends Any> = Override<InputFieldProps<T> & FeedbackProps & Partial<{
+    next: string;
+    type: InputTypes;
+}>, ExtraProps>;
+export declare const createFreeText: <const T extends FreeTextTag, const Html extends HTMLInputElement | HTMLTextAreaElement, Extra extends Any>(Element: "input" | "textarea" | typeof MaskInput, elementName: "input" | "textarea", defaultProps: FreeTextProps<T, Extra>, register?: (el: Html) => () => void) => ReactComponent<FreeTextProps<T, Extra>>;
+export {};
+//# sourceMappingURL=free-text.d.ts.map

package/dist/components/form/free-text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"free-text.d.ts","sourceRoot":"","sources":["../../../src/components/form/free-text.tsx"],"names":[],"mappings":"AAEA,OAAO,SAAS,EAAE,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAEvD,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAc,eAAe,EAAE,MAAM,eAAe,CAAC;AAE3E,KAAK,WAAW,GAAG,OAAO,GAAG,UAAU,CAAC;AAExC,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,WAAW,EAAE,UAAU,SAAS,GAAG,IAAI,QAAQ,CAC/E,eAAe,CAAC,CAAC,CAAC,GAAG,aAAa,GAAG,OAAO,CAAC;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,UAAU,CAAA;CAAE,CAAC,EAChF,UAAU,CACb,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,KAAK,CAAC,CAAC,SAAS,WAAW,EAAE,KAAK,CAAC,IAAI,SAAS,gBAAgB,GAAG,mBAAmB,EAAE,KAAK,SAAS,GAAG,EACpI,SAAS,OAAO,GAAG,UAAU,GAAG,OAAO,SAAS,EAChD,aAAa,OAAO,GAAG,UAAU,EACjC,cAAc,aAAa,CAAC,CAAC,EAAE,KAAK,CAAC,EACrC,WAAW,CAAC,EAAE,EAAE,IAAI,KAAK,MAAM,IAAI,4CA2GtC,CAAC"}

package/dist/components/form/free-text.js

@@ -0,0 +1,70 @@
+"use client";
+import { o as e, t, u as n } from "../../dom-Bn4wY_Zx.js";
+import { n as r } from "../../input-field-ffx1MbHo.js";
+import { forwardRef as i, useEffect as a, useRef as o } from "react";
+import { jsx as s } from "react/jsx-runtime";
+//#region src/components/form/free-text.tsx
+var c = (c, l, u, d) => i(({ info: i, left: f, next: p, error: m, right: h, container: g, rightLabel: _, interactive: v, optionalText: y, type: b = "text", labelClassName: x, feedback: S = null, hideLeft: C = !1, loading: w, hiddenLabel: T, ...E }, D) => {
+	let O = c, k = E.id ?? E.name, A = o(null);
+	return a(() => {
+		if (A.current === null) return;
+		let t = A.current, n = e(A.current), r = d?.(t), i = (e) => {
+			let n = e;
+			if (n.key === "Enter" && t.enterKeyHint === "next") {
+				let e = t.getAttribute("data-next");
+				if (e) {
+					let t = document.getElementById(e);
+					if (t) {
+						t.focus(), n.preventDefault();
+						return;
+					}
+				}
+			}
+		};
+		return t.addEventListener("keydown", i), () => {
+			r?.(), n(), t.removeEventListener("keydown", i);
+		};
+	}, []), /* @__PURE__ */ s(r, {
+		...u,
+		info: i,
+		left: f,
+		error: m,
+		right: h,
+		form: E.form,
+		loading: w,
+		name: E.name,
+		feedback: S,
+		hideLeft: C,
+		title: E.title,
+		rightLabel: _,
+		disabled: E.disabled,
+		hiddenLabel: T,
+		interactive: v,
+		required: E.required,
+		componentName: l,
+		id: E.name || E.id,
+		optionalText: y,
+		labelClassName: x,
+		placeholder: E.placeholder,
+		container: t(g, u.container),
+		children: /* @__PURE__ */ s(O, {
+			...u,
+			...E,
+			id: k,
+			name: k,
+			type: b,
+			"data-next": p,
+			"aria-busy": w,
+			"aria-invalid": !!m,
+			"aria-disabled": E.disabled,
+			"aria-readonly": E.readOnly,
+			"aria-describedby": m ? `${k}-error` : void 0,
+			ref: n(D, A),
+			className: t("input placeholder-input-mask group h-input-height w-full flex-1", "rounded-input-radius bg-transparent px-input-padding-x py-input-padding-y text-input-text text-foreground", "outline-none transition-colors", "group-error:text-danger group-error:placeholder-input-mask-error", "resize-y group-focus-within:border-primary group-hover:border-primary", "disabled:cursor-not-allowed disabled:text-disabled", E.className)
+		})
+	});
+});
+//#endregion
+export { c as createFreeText };
+
+//# sourceMappingURL=free-text.js.map

package/dist/components/form/free-text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"free-text.js","names":[],"sources":["../../../src/components/form/free-text.tsx"],"sourcesContent":["\"use client\";\nimport React, { forwardRef, useEffect, useRef } from \"react\";\nimport MaskInput, { InputTypes } from \"the-mask-input\";\nimport { css, initializeInputDataset, mergeRefs } from \"../../lib/dom\";\nimport { Any, Override, ReactComponent } from \"../../types\";\nimport { FeedbackProps, InputField, InputFieldProps } from \"./input-field\";\n\ntype FreeTextTag = \"input\" | \"textarea\";\n\nexport type FreeTextProps<T extends FreeTextTag, ExtraProps extends Any> = Override<\n    InputFieldProps<T> & FeedbackProps & Partial<{ next: string; type: InputTypes }>,\n    ExtraProps\n>;\n\nexport const createFreeText = <const T extends FreeTextTag, const Html extends HTMLInputElement | HTMLTextAreaElement, Extra extends Any>(\n    Element: \"input\" | \"textarea\" | typeof MaskInput,\n    elementName: \"input\" | \"textarea\",\n    defaultProps: FreeTextProps<T, Extra>,\n    register?: (el: Html) => () => void\n) => {\n    const FreeText: ReactComponent<FreeTextProps<T, Extra>> = forwardRef<Html, FreeTextProps<T, Extra>>(\n        (\n            {\n                info,\n                left,\n                next,\n                error,\n                right,\n                container,\n                rightLabel,\n                interactive,\n                optionalText,\n                type = \"text\",\n                labelClassName,\n                feedback = null,\n                hideLeft = false,\n                loading,\n                hiddenLabel,\n                ...props\n            },\n            ref\n        ): React.ReactElement => {\n            const Render: React.ElementType = Element;\n            const id = props.id ?? props.name;\n            const inputRef = useRef<Html>(null);\n\n            useEffect(() => {\n                if (inputRef.current === null) return;\n                const input = inputRef.current;\n                const focus = initializeInputDataset(inputRef.current);\n                const registered = register?.(input);\n                const goNextInputImpl = (e: Event) => {\n                    const event = e as KeyboardEvent;\n                    if (event.key === \"Enter\" && input.enterKeyHint === \"next\") {\n                        const focusNext = input.getAttribute(\"data-next\");\n                        if (focusNext) {\n                            const el = document.getElementById(focusNext);\n                            if (el) {\n                                el.focus();\n                                return void event.preventDefault();\n                            }\n                        }\n                    }\n                };\n                input.addEventListener(\"keydown\", goNextInputImpl);\n                return () => {\n                    registered?.();\n                    focus();\n                    input.removeEventListener(\"keydown\", goNextInputImpl);\n                };\n            }, []);\n\n            return (\n                <InputField\n                    {...(defaultProps as unknown as InputFieldProps<T>)}\n                    info={info}\n                    left={left}\n                    error={error}\n                    right={right}\n                    form={props.form}\n                    loading={loading}\n                    name={props.name}\n                    feedback={feedback}\n                    hideLeft={hideLeft}\n                    title={props.title}\n                    rightLabel={rightLabel}\n                    disabled={props.disabled}\n                    hiddenLabel={hiddenLabel}\n                    interactive={interactive}\n                    required={props.required}\n                    componentName={elementName}\n                    id={props.name || props.id}\n                    optionalText={optionalText}\n                    labelClassName={labelClassName}\n                    placeholder={props.placeholder}\n                    container={css(container, defaultProps.container)}\n                >\n                    <Render\n                        {...defaultProps}\n                        {...props}\n                        id={id}\n                        name={id}\n                        type={type}\n                        data-next={next}\n                        aria-busy={loading}\n                        aria-invalid={!!error}\n                        aria-disabled={props.disabled}\n                        aria-readonly={props.readOnly}\n                        aria-describedby={error ? `${id}-error` : undefined}\n                        ref={mergeRefs(ref, inputRef) as unknown as React.Ref<Html>}\n                        className={css(\n                            \"input placeholder-input-mask group h-input-height w-full flex-1\",\n                            \"rounded-input-radius bg-transparent px-input-padding-x py-input-padding-y text-input-text text-foreground\",\n                            \"outline-none transition-colors\",\n                            \"group-error:text-danger group-error:placeholder-input-mask-error\",\n                            \"resize-y group-focus-within:border-primary group-hover:border-primary\",\n                            \"disabled:cursor-not-allowed disabled:text-disabled\",\n                            props.className\n                        )}\n                    />\n                </InputField>\n            );\n        }\n    ) as unknown as ReactComponent<FreeTextProps<T, Extra>>;\n    return FreeText;\n};\n"],"mappings":";;;;;;AAcA,IAAa,KACT,GACA,GACA,GACA,MAE0D,GAElD,EACI,SACA,SACA,SACA,UACA,UACA,cACA,eACA,gBACA,iBACA,UAAO,QACP,mBACA,cAAW,MACX,cAAW,IACX,YACA,gBACA,GAAG,KAEP,MACqB;CACrB,IAAM,IAA4B,GAC5B,IAAK,EAAM,MAAM,EAAM,MACvB,IAAW,EAAa,IAAI;CA4BlC,OA1BA,QAAgB;EACZ,IAAI,EAAS,YAAY,MAAM;EAC/B,IAAM,IAAQ,EAAS,SACjB,IAAQ,EAAuB,EAAS,OAAO,GAC/C,IAAa,IAAW,CAAK,GAC7B,KAAmB,MAAa;GAClC,IAAM,IAAQ;GACd,IAAI,EAAM,QAAQ,WAAW,EAAM,iBAAiB,QAAQ;IACxD,IAAM,IAAY,EAAM,aAAa,WAAW;IAChD,IAAI,GAAW;KACX,IAAM,IAAK,SAAS,eAAe,CAAS;KAC5C,IAAI,GAAI;MAEG,AADP,EAAG,MAAM,GACF,EAAW,eAAe;MAAjC;KACJ;IACJ;GACJ;EACJ;EAEA,OADA,EAAM,iBAAiB,WAAW,CAAe,SACpC;GAGT,AAFA,IAAa,GACb,EAAM,GACN,EAAM,oBAAoB,WAAW,CAAe;EACxD;CACJ,GAAG,CAAC,CAAC,GAGD,kBAAC,GAAD;EACI,GAAK;EACC;EACA;EACC;EACA;EACP,MAAM,EAAM;EACH;EACT,MAAM,EAAM;EACF;EACA;EACV,OAAO,EAAM;EACD;EACZ,UAAU,EAAM;EACH;EACA;EACb,UAAU,EAAM;EAChB,eAAe;EACf,IAAI,EAAM,QAAQ,EAAM;EACV;EACE;EAChB,aAAa,EAAM;EACnB,WAAW,EAAI,GAAW,EAAa,SAAS;YAEhD,kBAAC,GAAD;GACI,GAAI;GACJ,GAAI;GACA;GACJ,MAAM;GACA;GACN,aAAW;GACX,aAAW;GACX,gBAAc,CAAC,CAAC;GAChB,iBAAe,EAAM;GACrB,iBAAe,EAAM;GACrB,oBAAkB,IAAQ,GAAG,EAAG,UAAU,KAAA;GAC1C,KAAK,EAAU,GAAK,CAAQ;GAC5B,WAAW,EACP,mEACA,6GACA,kCACA,oEACA,yEACA,sDACA,EAAM,SACV;EACH,CAAA;CACO,CAAA;AAEpB,CAEG"}

package/dist/components/form/free-text.jsx

@@ -0,0 +1,41 @@
+"use client";
+import React, { forwardRef, useEffect, useRef } from "react";
+import { css, initializeInputDataset, mergeRefs } from "../../lib/dom";
+import { InputField } from "./input-field";
+export const createFreeText = (Element, elementName, defaultProps, register) => {
+    const FreeText = forwardRef(({ info, left, next, error, right, container, rightLabel, interactive, optionalText, type = "text", labelClassName, feedback = null, hideLeft = false, loading, hiddenLabel, ...props }, ref) => {
+        const Render = Element;
+        const id = props.id ?? props.name;
+        const inputRef = useRef(null);
+        useEffect(() => {
+            if (inputRef.current === null)
+                return;
+            const input = inputRef.current;
+            const focus = initializeInputDataset(inputRef.current);
+            const registered = register?.(input);
+            const goNextInputImpl = (e) => {
+                const event = e;
+                if (event.key === "Enter" && input.enterKeyHint === "next") {
+                    const focusNext = input.getAttribute("data-next");
+                    if (focusNext) {
+                        const el = document.getElementById(focusNext);
+                        if (el) {
+                            el.focus();
+                            return void event.preventDefault();
+                        }
+                    }
+                }
+            };
+            input.addEventListener("keydown", goNextInputImpl);
+            return () => {
+                registered?.();
+                focus();
+                input.removeEventListener("keydown", goNextInputImpl);
+            };
+        }, []);
+        return (<InputField {...defaultProps} info={info} left={left} error={error} right={right} form={props.form} loading={loading} name={props.name} feedback={feedback} hideLeft={hideLeft} title={props.title} rightLabel={rightLabel} disabled={props.disabled} hiddenLabel={hiddenLabel} interactive={interactive} required={props.required} componentName={elementName} id={props.name || props.id} optionalText={optionalText} labelClassName={labelClassName} placeholder={props.placeholder} container={css(container, defaultProps.container)}>
+                    <Render {...defaultProps} {...props} id={id} name={id} type={type} data-next={next} aria-busy={loading} aria-invalid={!!error} aria-disabled={props.disabled} aria-readonly={props.readOnly} aria-describedby={error ? `${id}-error` : undefined} ref={mergeRefs(ref, inputRef)} className={css("input placeholder-input-mask group h-input-height w-full flex-1", "rounded-input-radius bg-transparent px-input-padding-x py-input-padding-y text-input-text text-foreground", "outline-none transition-colors", "group-error:text-danger group-error:placeholder-input-mask-error", "resize-y group-focus-within:border-primary group-hover:border-primary", "disabled:cursor-not-allowed disabled:text-disabled", props.className)}/>
+                </InputField>);
+    });
+    return FreeText;
+};

package/dist/components/form/input-field.d.ts

@@ -0,0 +1,34 @@
+import React, { type PropsWithChildren } from "react";
+import { type Label, Override } from "../../types";
+import { type PolymorphicProps } from "../core/polymorph";
+export type FeedbackProps = React.PropsWithChildren<Partial<{
+    id: string;
+    info: Label;
+    title: Label;
+    hideLeft: boolean;
+    className: string;
+    placeholder: string;
+    reportStatus: boolean;
+    hiddenLabel: boolean;
+}>>;
+export declare const InputFeedback: ({ reportStatus, id, hideLeft, className, info, children, title }: FeedbackProps) => React.JSX.Element;
+export type InputFieldProps<T extends "input" | "select" | "textarea"> = PolymorphicProps<Partial<Override<FeedbackProps, {
+    id: string;
+    info: Label;
+    left: Label;
+    name: string;
+    right: Label;
+    error: string;
+    feedback: Label;
+    loading: boolean;
+    container: string;
+    hideLeft: boolean;
+    rightLabel: Label;
+    placeholder: string;
+    interactive: boolean;
+    optionalText: string;
+    componentName: string;
+    labelClassName: string;
+}>>, T>;
+export declare const InputField: <T extends "input" | "select" | "textarea">(props: PropsWithChildren<InputFieldProps<T>>) => React.ReactElement;
+//# sourceMappingURL=input-field.d.ts.map

package/dist/components/form/input-field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-field.d.ts","sourceRoot":"","sources":["../../../src/components/form/input-field.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAwB,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAI5E,OAAO,EAAE,KAAK,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAG1D,MAAM,MAAM,aAAa,GAAG,KAAK,CAAC,iBAAiB,CAC/C,OAAO,CAAC;IACJ,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,KAAK,CAAC;IACZ,KAAK,EAAE,KAAK,CAAC;IACb,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,OAAO,CAAC;IACtB,WAAW,EAAE,OAAO,CAAC;CACxB,CAAC,CACL,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,kEAA0E,aAAa,sBA6CpH,CAAC;AAEF,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,OAAO,GAAG,QAAQ,GAAG,UAAU,IAAI,gBAAgB,CACrF,OAAO,CACH,QAAQ,CACJ,aAAa,EACb;IACI,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,KAAK,CAAC;IACZ,IAAI,EAAE,KAAK,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,KAAK,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,KAAK,CAAC;IAChB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,UAAU,EAAE,KAAK,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,OAAO,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,aAAa,EAAE,MAAM,CAAC;IACtB,cAAc,EAAE,MAAM,CAAC;CAC1B,CACJ,CACJ,EACD,CAAC,CACJ,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,CAAC,CAAC,SAAS,OAAO,GAAG,QAAQ,GAAG,UAAU,EAAE,KAAK,EAAE,iBAAiB,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,YAiHG,CAAC"}

package/dist/components/form/input-field.js

@@ -0,0 +1,3 @@
+"use client";
+import { n as e, t } from "../../input-field-ffx1MbHo.js";
+export { t as InputFeedback, e as InputField };

package/dist/components/form/input-field.jsx

@@ -0,0 +1,64 @@
+"use client";
+import { CheckCircleIcon, InfoIcon, XCircleIcon } from "@phosphor-icons/react";
+import React, { forwardRef, Fragment } from "react";
+import { useTranslations } from "../../hooks/use-translations";
+import { useTweaks } from "../../hooks/use-tweaks";
+import { css } from "../../lib/dom";
+import { Tooltip } from "../floating/tooltip";
+export const InputFeedback = ({ reportStatus, id, hideLeft = false, className, info, children, title }) => (<span className={css("w-full justify-between", hideLeft && children === null ? "hidden" : "flex", className)}>
+        {hideLeft ? null : (<span className="flex items-center gap-1 transition-colors group-focus-within:text-primary group-hover:text-primary group-disabled:text-disabled group-error:text-danger">
+                <span id={id ? `${id}-label` : undefined}>{title}</span>
+                {reportStatus || info ? (<span className="flex items-center justify-center gap-1">
+                        {info ? (<Tooltip as="button" type="button" aria-label={typeof info === "string" ? info : undefined} aria-describedby={typeof info === "string" ? undefined : id ? `tooltip-info-content-${id}` : undefined} title={<span className="cursor-help">
+                                        <span className="flex aspect-square size-3 items-center justify-center">
+                                            <InfoIcon aria-hidden="true" size={16}/>
+                                        </span>
+                                    </span>}>
+                                <div id={id ? `tooltip-info-content-${id}` : undefined} className="w-full max-w-48 whitespace-break-spaces break-words">
+                                    {info}
+                                </div>
+                            </Tooltip>) : null}
+                        {reportStatus ? (<span className="flex h-3 min-w-6 items-center">
+                                <span className="hidden aspect-square size-3 opacity-0 transition-opacity group-assert:block group-assert:text-success group-assert:opacity-100">
+                                    <CheckCircleIcon aria-hidden="true" size={16}/>
+                                </span>
+                                <span className="hidden aspect-square size-3 opacity-0 transition-opacity group-error:block group-error:opacity-100">
+                                    <XCircleIcon aria-hidden="true" size={16}/>
+                                </span>
+                            </span>) : null}
+                    </span>) : null}
+            </span>)}
+        {children}
+    </span>);
+export const InputField = forwardRef(({ optionalText: _optionalText, left, rightLabel, container, feedback, interactive, right, info, children, error, form, id, labelClassName = "", name, title, componentName, placeholder, hideLeft = false, required, disabled, reportStatus, hiddenLabel, }, ref) => {
+    const tweaks = useTweaks();
+    const reportStatusDefault = reportStatus !== undefined ? reportStatus : tweaks.input.iconFeedback;
+    const ID = id ?? name;
+    const translation = useTranslations();
+    const optionalText = _optionalText ?? translation.inputOptionalLabel;
+    return (<fieldset ref={ref} form={form} disabled={disabled} data-error={!!error} aria-disabled={disabled} data-component={componentName} data-interactive={!!interactive} className={css("group flex min-h-0 min-w-0 max-w-full flex-col items-start", container)}>
+                <label form={form} htmlFor={ID} className={css("relative inline-flex w-full max-w-full cursor-text flex-row flex-wrap justify-between gap-input-label-mb text-input-label-text transition-colors empty:hidden group-disabled:cursor-not-allowed group-error:text-danger")}>
+                    {hiddenLabel ? (<span className="sr-only">
+                            <InputFeedback id={ID} info={info} hideLeft={hideLeft} reportStatus={reportStatusDefault} title={title} placeholder={placeholder}/>
+                        </span>) : (<InputFeedback id={ID} info={info} title={title} hideLeft={hideLeft} placeholder={placeholder} reportStatus={reportStatusDefault}>
+                            {optionalText || rightLabel ? (<Fragment>
+                                    {!required ? (<span aria-disabled={disabled} className="text-opacity-70 transition-colors group-focus-within:text-primary group-hover:text-primary aria-disabled:text-disabled">
+                                            {optionalText}
+                                        </span>) : null}
+                                    {rightLabel ? <Fragment>{rightLabel}</Fragment> : null}
+                                </Fragment>) : null}
+                        </InputFeedback>)}
+                    <div className={css("group relative flex w-full flex-row flex-nowrap items-center gap-x-input-gap gap-y-input-inline rounded-input-radius border border-input-border bg-transparent transition-colors group-hover:border-primary group-disabled:border-disabled group-error:border-danger", labelClassName)}>
+                        {left ? <span className="flex flex-nowrap gap-input-slot-gap whitespace-nowrap pl-input-slot-pl">{left}</span> : null}
+                        {children}
+                        {right ? <span className="flex flex-nowrap gap-input-slot-gap whitespace-nowrap pr-input-slot-pr">{right}</span> : null}
+                    </div>
+                </label>
+                <p id={ID ? `${ID}-error` : undefined} role="alert" className="mt-input-hint-mt hidden whitespace-pre-wrap text-wrap text-input-hint-text empty:mt-0 empty:hidden group-has-[input:not(:focus):invalid[data-initialized=true]]:flex group-error:flex group-error:text-danger">
+                    {error}
+                </p>
+                <p id={ID ? `${ID}-feedback` : undefined} className="mt-input-hint-mt text-input-hint-text empty:mt-0 empty:hidden group-has-[input:not(:focus):valid[data-initialized=true]]:block group-assert:block group-error:hidden">
+                    {feedback}
+                </p>
+            </fieldset>);
+}); // forwardRef return is non-generic; cast restores the polymorphic signature

package/dist/components/form/input.d.ts

@@ -0,0 +1,52 @@
+import { AllMasks, CurrencyCode, CurrencyInputProps, CurrencyMaskTypes, Locales, PercentInputMask, PercentInputProps, TheMaskProps } from "the-mask-input";
+import { FreeTextProps } from "./free-text";
+export type * from "the-mask-input";
+/**
+ * Props for the Input component, extending FreeTextProps with mask functionality
+ * Supports currency, percentage, and custom mask patterns
+ */
+export type InputProps = FreeTextProps<"input", ({
+    mask?: CurrencyMaskTypes;
+    locale?: Locales;
+    currency?: CurrencyCode | undefined;
+} & CurrencyInputProps) | ({
+    mask?: PercentInputMask;
+    locale?: Locales;
+    currency?: undefined;
+} & PercentInputProps) | ({
+    mask?: AllMasks | Array<string | RegExp> | ((p: string) => Array<string | RegExp> | AllMasks);
+    locale?: undefined;
+    currency?: undefined;
+} & TheMaskProps)>;
+/**
+ * A text input component with advanced masking capabilities.
+ *
+ * Supports various input masks including:
+ * - Currency formatting with locale support
+ * - Percentage inputs
+ * - Custom regex patterns
+ * - Phone numbers, dates, and other formatted inputs
+ *
+ * @example
+ * ```tsx
+ * // Basic input
+ * <Input placeholder="Enter text..." />
+ *
+ * // Phone number mask
+ * <Input mask="(99) 99999-9999" placeholder="Phone" />
+ *
+ * // Currency input
+ * <Input mask="currency" currency="USD" locale="en-US" />
+ *
+ * // Percentage input
+ * <Input mask="percentage" />
+ *
+ * // Custom mask
+ * <Input mask={["999.999.999-99"]} placeholder="CPF" />
+ * ```
+ *
+ * @param props - Input props including mask, validation, and styling options
+ * @returns A masked input component with form integration
+ */
+export declare const Input: import("../..").ReactComponent<FreeTextProps<"input", InputProps>>;
+//# sourceMappingURL=input.d.ts.map

package/dist/components/form/input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/components/form/input.tsx"],"names":[],"mappings":"AACA,OAAkB,EACd,QAAQ,EACR,YAAY,EACZ,kBAAkB,EAClB,iBAAiB,EACjB,OAAO,EACP,gBAAgB,EAChB,iBAAiB,EACjB,YAAY,EACf,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAkB,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5D,mBAAmB,gBAAgB,CAAC;AAEpC;;;GAGG;AACH,MAAM,MAAM,UAAU,GAAG,aAAa,CAClC,OAAO,EACL,CAAC;IACG,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,YAAY,GAAG,SAAS,CAAC;CACvC,GAAG,kBAAkB,CAAC,GACvB,CAAC;IACG,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACxB,GAAG,iBAAiB,CAAC,GACtB,CAAC;IACG,IAAI,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,MAAM,KAAK,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,GAAG,QAAQ,CAAC,CAAC;IAC9F,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACxB,GAAG,YAAY,CAAC,CACtB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,eAAO,MAAM,KAAK,oEAEhB,CAAC"}

package/dist/components/form/input.js

@@ -1,3 +1,3 @@
 "use client";
-import { t as e } from "../../input-B7jqwPG4.js";
+import { t as e } from "../../input-Cmyuea4Y.js";
 export { e as Input };

package/dist/components/form/input.jsx

@@ -0,0 +1,36 @@
+"use client";
+import MaskInput from "the-mask-input";
+import { createFreeText } from "./free-text";
+/**
+ * A text input component with advanced masking capabilities.
+ *
+ * Supports various input masks including:
+ * - Currency formatting with locale support
+ * - Percentage inputs
+ * - Custom regex patterns
+ * - Phone numbers, dates, and other formatted inputs
+ *
+ * @example
+ * ```tsx
+ * // Basic input
+ * <Input placeholder="Enter text..." />
+ *
+ * // Phone number mask
+ * <Input mask="(99) 99999-9999" placeholder="Phone" />
+ *
+ * // Currency input
+ * <Input mask="currency" currency="USD" locale="en-US" />
+ *
+ * // Percentage input
+ * <Input mask="percentage" />
+ *
+ * // Custom mask
+ * <Input mask={["999.999.999-99"]} placeholder="CPF" />
+ * ```
+ *
+ * @param props - Input props including mask, validation, and styling options
+ * @returns A masked input component with form integration
+ */
+export const Input = createFreeText(MaskInput, "input", {
+    type: "text",
+});

package/dist/components/form/multi-select.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+import { Label, Override } from "../../types";
+import { InputFieldProps } from "./input-field";
+import { type OptionProps } from "./select";
+export type MultiSelectItemProps = OptionProps & {
+    Render?: React.FC<OptionProps>;
+};
+export type MultiSelectProps = Override<InputFieldProps<"input">, {
+    title?: string;
+    value?: string[];
+    emptyMessage?: Label;
+    selectedLabel?: string;
+    defaultValue?: string[];
+    dynamicOption?: boolean;
+    options: MultiSelectItemProps[];
+    onChangeOptions?: (options: string[]) => void;
+}>;
+export declare const MultiSelect: React.ForwardRefExoticComponent<Omit<MultiSelectProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=multi-select.d.ts.map

package/dist/components/form/multi-select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"multi-select.d.ts","sourceRoot":"","sources":["../../../src/components/form/multi-select.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAAoG,MAAM,OAAO,CAAC;AAQzH,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAE9C,OAAO,EAAc,eAAe,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AAE5C,MAAM,MAAM,oBAAoB,GAAG,WAAW,GAAG;IAC7C,MAAM,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC;CAClC,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,QAAQ,CACnC,eAAe,CAAC,OAAO,CAAC,EACxB;IACI,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,OAAO,EAAE,oBAAoB,EAAE,CAAC;IAChC,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CACjD,CACJ,CAAC;AA8DF,eAAO,MAAM,WAAW,wGAsevB,CAAC"}