@g4rcez/components 2.0.32 → 2.0.34

package/dist/components/form/autocomplete.jsx

@@ -0,0 +1,276 @@
+"use client";
+import { autoUpdate, FloatingFocusManager, FloatingPortal, offset, size, useDismiss, useFloating, useInteractions, useListNavigation, useRole, useTransitionStyles, } from "@floating-ui/react";
+import { ChevronDown } from "lucide-react";
+import { AnimatePresence, motion } from "motion/react";
+import React, { forwardRef, Fragment, useEffect, useRef, useState } from "react";
+import { flushSync } from "react-dom";
+import { Virtuoso } from "react-virtuoso";
+import { Is } from "sidekicker";
+import { useRemoveScroll } from "../../hooks/use-remove-scroll";
+import { useTranslations } from "../../hooks/use-translations";
+import { css, dispatchInput, getRemainingSize, initializeInputDataset, mergeRefs } from "../../lib/dom";
+import { safeRegex } from "../../lib/fns";
+import { fzf } from "../../lib/fzf";
+import { InputField } from "./input-field";
+const Frag = (props) => <Fragment>{props.children}</Fragment>;
+const transitionStyles = {
+    duration: 300,
+    initial: { transform: "scaleY(0)", opacity: 0.2 },
+    open: { transform: "scaleY(1)", opacity: 1 },
+    close: { transform: "scaleY(0)", opacity: 0 },
+};
+const emptyRef = [];
+const List = forwardRef(function VirtualList(props, ref) {
+    return (<motion.ul {...props} ref={ref} className="overscroll-contain w-full rounded-lg">
+      <AnimatePresence>{props.children}</AnimatePresence>
+    </motion.ul>);
+});
+const Item = forwardRef(function VirtualItem({ item, context, ...props }, ref) {
+    return <motion.li {...props} ref={ref} className="first:rounded-t-lg last:rounded-t-lg"/>;
+});
+const components = { List, Item };
+const MIN_SIZE = 40;
+export const Autocomplete = forwardRef(({ left, error, right, loading, options, container, rightLabel, interactive, emptyMessage, optionalText, labelClassName, feedback = null, hideLeft = false, required = false, dynamicOption = false, ...props }, externalRef) => {
+    const scroller = useRef(null);
+    const fieldset = useRef(null);
+    const virtuoso = useRef(null);
+    const defaults = props.value ?? props.defaultValue ?? "";
+    const translation = useTranslations();
+    const [h, setH] = useState(() => Math.min(320, MIN_SIZE * options.length));
+    const [open, setOpen] = useState(false);
+    const [shadow, setShadow] = useState("");
+    const [value, setValue] = useState(defaults);
+    const [label, setLabel] = useState(() => options.find((x) => x.value === defaults)?.label ?? defaults);
+    const [index, setIndex] = useState(null);
+    const listRef = useRef(emptyRef);
+    const removeScrollRef = useRemoveScroll(open, "block-only");
+    const innerOptions = dynamicOption && shadow !== ""
+        ? [
+            {
+                value: shadow,
+                label: shadow,
+                "data-dynamic": "true",
+            },
+            ...options,
+        ]
+        : options;
+    const openDropdown = () => flushSync(() => setOpen(true));
+    const list = shadow
+        ? fzf(innerOptions, "value", [{ key: "value", value: shadow }, { key: "label", value: shadow }])
+        : innerOptions;
+    const setClosed = () => {
+        setOpen(false);
+        setH(0);
+    };
+    const displayList = list.filter((x) => x.hidden !== true);
+    const pattern = dynamicOption
+        ? undefined
+        : `^(${options.map((x) => `${safeRegex(x.value)}${x.label ? "|" + safeRegex(x.label) : ""}`).join("|")})$`;
+    const { x, y, strategy, refs, context } = useFloating({
+        open,
+        transform: true,
+        onOpenChange: setOpen,
+        placement: "bottom-start",
+        whileElementsMounted: autoUpdate,
+        middleware: [
+            offset(4),
+            size({
+                padding: 10,
+                elementContext: "reference",
+                apply(args) {
+                    const ul = args.elements.floating.querySelector("ul");
+                    const fullSize = ul?.getBoundingClientRect().height || 0;
+                    const DEFAULT_SIZE = getRemainingSize(refs.reference.current, window.innerHeight);
+                    const maxH = Math.min(fullSize < MIN_SIZE ? DEFAULT_SIZE : fullSize, DEFAULT_SIZE, args.availableHeight);
+                    const size = displayList.length === 0 ? MIN_SIZE : Math.min(maxH, DEFAULT_SIZE, fullSize);
+                    const mw = `${fieldset.current.getBoundingClientRect().width}px`;
+                    Object.assign(args.elements.floating.style, { width: mw, maxWidth: mw, height: size });
+                },
+            }),
+        ],
+    });
+    const transitions = useTransitionStyles(context, transitionStyles);
+    const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([
+        useRole(context, { role: "listbox" }),
+        useDismiss(context),
+        useListNavigation(context, {
+            cols: 0,
+            listRef,
+            loop: true,
+            virtual: true,
+            allowEscape: true,
+            activeIndex: index,
+            selectedIndex: index,
+            focusItemOnOpen: "auto",
+            openOnArrowKeyDown: true,
+            scrollItemIntoView: true,
+        }),
+    ]);
+    useEffect(() => {
+        if (props.value) {
+            const item = options.find((x) => x.value === props.value);
+            if (item) {
+                setLabel(item.label ?? item.value);
+                setValue(props.value);
+            }
+        }
+    }, [props.value, options.length]);
+    useEffect(() => {
+        if (!open)
+            return setH(0);
+        const inputRef = refs.reference;
+        if (inputRef.current === null)
+            return;
+        const s = getRemainingSize(inputRef.current, window.innerHeight);
+        setTimeout(() => setH(Math.min(s, displayList.length * MIN_SIZE)), 100);
+    }, [shadow, open, refs.reference, displayList.length]);
+    useEffect(() => {
+        const input = refs.reference.current;
+        if (!input)
+            return;
+        return initializeInputDataset(input);
+    }, []);
+    const onSelect = (opt, i) => {
+        setValue(opt.value);
+        const input = refs.reference.current;
+        if (!input)
+            return;
+        input?.setAttribute("data-value", opt.value);
+        input.value = opt.value;
+        const event = new Event("change", { bubbles: false, cancelable: true });
+        input.dispatchEvent(event);
+        if (props.onChange)
+            props.onChange(event);
+        setLabel(opt.label ?? "");
+        setClosed();
+        setShadow("");
+        setIndex(i);
+    };
+    const onChange = (event) => {
+        const value = event.target.value;
+        setShadow(value);
+        if (!open && value === "")
+            return setOpen(true);
+        event.target.name = props.name || "";
+        return value ? setOpen(true) : props.onChange?.(event);
+    };
+    const onCaretDownClick = () => {
+        openDropdown();
+        setShadow("");
+        refs.reference.current?.focus();
+    };
+    const onFocus = () => {
+        setIndex((prev) => (prev === null ? 0 : prev));
+        openDropdown();
+        setShadow("");
+    };
+    const onClose = () => {
+        refs.reference.current?.setAttribute("data-value", "");
+        setShadow("");
+        setValue("");
+        setLabel("");
+        dispatchInput(refs.reference.current);
+        setClosed();
+    };
+    const id = props.id || props.name;
+    const shadowId = `${id}-shadow`;
+    const isEmpty = displayList.length === 0;
+    return (<InputField {...props} left={left} error={error} ref={fieldset} form={props.form} loading={loading} name={props.name} feedback={feedback} hideLeft={hideLeft} required={required} title={props.title} container={container} rightLabel={rightLabel} interactive={interactive} id={shadowId} optionalText={optionalText} componentName="autocomplete" labelClassName={labelClassName} placeholder={props.placeholder} right={<span className="flex gap-0.5 items-center">
+            {right}
+            <button type="button" className="p-2 transition-colors md:p-1 link:text-primary" onClick={onCaretDownClick}>
+              <ChevronDown size={20}/>
+              <span className="sr-only">{translation.inputCaretDown}</span>
+            </button>
+            {value ? (<button type="button" onClick={onClose} className="p-2 transition-colors md:p-1 link:text-danger">
+                <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z" fill="currentColor" fillRule="evenodd" clipRule="evenodd"/>
+                </svg>
+              </button>) : null}
+          </span>}>
+        <input data-shadow="true" {...getReferenceProps({
+        ...props,
+        onFocus,
+        pattern,
+        onChange,
+        id: shadowId,
+        name: shadowId,
+        ref: refs.setReference,
+        onClick: (e) => e.currentTarget.focus(),
+        onKeyDown(event) {
+            if (event.key === "Escape") {
+                event.currentTarget.blur();
+                return setClosed();
+            }
+            if (!open)
+                return;
+            if (event.key === "ArrowDown") {
+                let next = Is.number(index) ? index + 1 : 0;
+                if (next > displayList.length - 1)
+                    next = 0;
+                virtuoso.current?.scrollIntoView({ index: next });
+                return setIndex(next);
+            }
+            if (event.key === "ArrowUp") {
+                let next = Is.number(index) ? index - 1 : displayList.length - 1;
+                if (next < 0)
+                    next = displayList.length - 1;
+                virtuoso.current?.scrollIntoView({ index: next });
+                return setIndex(next);
+            }
+            if (event.key === "Enter") {
+                if (index !== null && displayList[index]) {
+                    event.preventDefault();
+                    return onSelect(displayList[index], index);
+                }
+                if (displayList.length === 1) {
+                    event.preventDefault();
+                    return onSelect(displayList[0], 0);
+                }
+            }
+        },
+    })} data-value={value} data-error={!!error} data-name={id} data-target={id} required={required} value={open ? shadow : options.length === 0 ? "" : label || value} aria-autocomplete="list" autoComplete="off" className={css("input placeholder-input-mask group h-input-height w-full flex-1", "rounded-md bg-transparent px-input-x py-input-y text-foreground", "outline-none transition-colors focus:ring-2 focus:ring-inset focus:ring-primary", "group-error:text-danger group-error:placeholder-input-mask-error", "text-base group-focus-within:border-primary group-hover:border-primary", props.className)}/>
+        <input id={id} name={id} type="hidden" data-origin={id} ref={externalRef} required={required} defaultValue={props.value || value || undefined}/>
+        <FloatingPortal preserveTabOrder>
+          {open ? (<FloatingFocusManager modal guards returnFocus={false} context={context} initialFocus={-1} visuallyHiddenDismiss>
+              <motion.div {...getFloatingProps({
+            ref: mergeRefs(removeScrollRef, refs.setFloating),
+            style: { ...transitions.styles, left: x, top: y ?? 0, position: strategy, height: "auto" },
+        })} initial={false} data-floating="true" animate={{ height: isEmpty ? "auto" : h }} className="overscroll-contain p-0 m-0 max-h-80 list-none rounded-t-lg rounded-b-lg border ease-in-out isolate z-floating origin-[top_center] border-floating-border bg-floating-background text-foreground shadow-floating" onAnimationComplete={() => {
+                if (!open)
+                    return setH(0);
+                const ul = refs.floating.current;
+                const li = ul.querySelectorAll("li").item(0);
+                const sum = (li ? li.getBoundingClientRect().height : MIN_SIZE) * displayList.length;
+                return flushSync(() => setH(sum + 10));
+            }}>
+                {isEmpty ? (<div role="option" className="w-full border-b border-tooltip-border">
+                    <span className="flex justify-between p-2 w-full text-left text-disabled">
+                      {emptyMessage || translation.autocompleteEmpty}
+                    </span>
+                  </div>) : null}
+                <Virtuoso overscan={40} ref={virtuoso} hidden={isEmpty} data={displayList} 
+        // style={{ height: h - 10 }}
+        defaultItemHeight={MIN_SIZE} components={components} scrollerRef={(e) => void (scroller.current = e)} className="overscroll-contain p-0 max-h-full rounded-lg border-floating bg-floating-background text-foreground" itemContent={(i, option) => {
+                const Label = option.Render ?? Frag;
+                const active = value === option.value || value === option.label;
+                const selected = index === i;
+                const children = option.label ?? option.value;
+                return (<button data-value={option.value} {...getItemProps({
+                    ref: (node) => void (listRef.current[i] = node),
+                    role: "option",
+                    type: "button",
+                    "aria-checked": active,
+                    "aria-current": active,
+                    "aria-selected": active,
+                    "aria-busy": option.disabled,
+                    onClick: () => onSelect(option, i),
+                    className: `cursor-pointer min-h-10 hover:bg-floating-hover w-full p-2 text-left ${active ? "bg-primary-hover text-primary-foreground" : ""} ${selected ? "bg-floating-hover text-floating-foreground" : ""}`,
+                })}>
+                        <Label {...props} label={option.label} value={option.value} children={children}/>
+                      </button>);
+            }}/>
+              </motion.div>
+            </FloatingFocusManager>) : null}
+        </FloatingPortal>
+      </InputField>);
+});

package/dist/components/form/checkbox.jsx

@@ -0,0 +1,12 @@
+import React, { forwardRef } from "react";
+import { css } from "../../lib/dom";
+export const Checkbox = forwardRef(({ children, asTask = false, labelClassName, loading, error, className = "", size, container, ...props }, ref) => {
+    const d = props.disabled || loading;
+    return (<label aria-disabled={d} data-disabled={d} data-task={asTask} data-component="checkbox" className={css("group flex w-fit flex-wrap items-center font-normal data-[disabled=true]:cursor-not-allowed", asTask ? "group-checkbox-checked:line-through" : "", container)}>
+                <input {...props} ref={ref} disabled={d} type="checkbox" data-task={asTask} className={css("form-checkbox mr-2 inline-block size-4 appearance-none rounded border-card-border bg-origin-border text-primary focus:ring-primary disabled:opacity-70 group-aria-disabled:cursor-not-allowed", className)}/>
+                {children}
+                <span data-name="checkbox-label" className={css("min-w-full flex-1 text-xs text-danger empty:mt-0 empty:hidden", labelClassName)}>
+                {error}
+            </span>
+            </label>);
+});

package/dist/components/form/{date-picker.js → date-picker.jsx}

@@ -1,8 +1,7 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { format, isValid, parse, startOfDay } from "date-fns";
 import { CalendarIcon } from "lucide-react";
-import { forwardRef, Fragment, useEffect, useId, useMemo, useState } from "react";
+import React, { forwardRef, Fragment, useEffect, useId, useMemo, useState } from "react";
 import { Is } from "sidekicker";
 import { useLocale } from "../../hooks/use-locale";
 import { useTranslations } from "../../hooks/use-translations";
@@ -99,6 +98,18 @@ export const DatePicker = forwardRef(({ date, locale: inputLocal, disabledDate,
     };
     const validDate = isValid(innerDate);
     const htmlValue = validDate ? innerDate.toISOString() : undefined;
-    const CalendarComponent = _jsx(Calendar, { ...props, type: type, locale: locale, changeOnlyOnClick: true, markToday: markToday, onChange: onChangeDate, disabledDate: disabledDate, date: validDate ? innerDate : undefined });
-    return (_jsx(Fragment, { children: _jsx(Input, { ...props, mask: mask, value: value, id: undefined, name: undefined, "data-value": htmlValue, formNoValidate: !open, "data-target": props.name, "data-component": "date-picker", onChange: onChangeDateInput, required: props.required ?? true, error: open ? undefined : props.error, placeholder: props.placeholder || translation.datepickerPlaceholder(placeholder), right: floating ? _jsxs(Fragment, { children: [_jsx("input", { "data-origin": props.name, defaultValue: htmlValue, form: props.form, hidden: true, id: props.name, name: props.name, ref: externalRef, type: "date" }), _jsx(Dropdown, { open: open, onChange: setOpen, buttonProps: { "aria-describedby": labelId }, trigger: _jsxs("span", { "aria-labelledby": labelId, children: [_jsx("span", { id: labelId, className: "sr-only", children: translation.datePickerCalendarButtonLabel }), _jsx(CalendarIcon, {})] }), children: CalendarComponent })] }) : null }) }));
+    const CalendarComponent = <Calendar {...props} type={type} locale={locale} changeOnlyOnClick markToday={markToday} onChange={onChangeDate} disabledDate={disabledDate} date={validDate ? innerDate : undefined}/>;
+    return (<Fragment>
+                <Input {...props} mask={mask} value={value} id={undefined} name={undefined} data-value={htmlValue} formNoValidate={!open} data-target={props.name} data-component="date-picker" onChange={onChangeDateInput} required={props.required ?? true} error={open ? undefined : props.error} placeholder={props.placeholder || translation.datepickerPlaceholder(placeholder)} right={floating ? <Fragment>
+                            <input data-origin={props.name} defaultValue={htmlValue} form={props.form} hidden id={props.name} name={props.name} ref={externalRef} type="date"/>
+                            <Dropdown open={open} onChange={setOpen} buttonProps={{ "aria-describedby": labelId }} trigger={<span aria-labelledby={labelId}>
+                                        <span id={labelId} className="sr-only">
+                                            {translation.datePickerCalendarButtonLabel}
+                                        </span>
+                                        <CalendarIcon />
+                                    </span>}>
+                                {CalendarComponent}
+                            </Dropdown>
+                        </Fragment> : null}/>
+            </Fragment>);
 });

package/dist/components/form/file-upload.d.ts

@@ -10,6 +10,6 @@ type Props = Override<React.ComponentProps<"input">, DropzoneProps> & {
     onDrop?: (file: File[]) => void;
     onDeleteFile?: (file: File) => void;
 };
-export declare const FileUpload: ({ idle, onDeleteFile, File, onDrop, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const FileUpload: ({ idle, onDeleteFile, File, onDrop, ...props }: Props) => React.JSX.Element;
 export {};
 //# sourceMappingURL=file-upload.d.ts.map

package/dist/components/form/file-upload.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"file-upload.d.ts","sourceRoot":"","sources":["../../../src/components/form/file-upload.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAmE,MAAM,OAAO,CAAC;AACxF,OAAO,EAAE,aAAa,EAAe,MAAM,gBAAgB,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAatC,KAAK,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,aAAa,CAAC,GAAG;IAClE,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC;IACf,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC1B,IAAI,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC;QAAE,IAAI,EAAE,IAAI,CAAA;KAAE,CAAC,CAAC;IAChC,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IAChC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;CACvC,CAAC;AAgJF,eAAO,MAAM,UAAU,GAAI,gDAA8D,KAAK,4CA8B7F,CAAC"}
+{"version":3,"file":"file-upload.d.ts","sourceRoot":"","sources":["../../../src/components/form/file-upload.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAmE,MAAM,OAAO,CAAC;AACxF,OAAO,EAAE,aAAa,EAAe,MAAM,gBAAgB,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAatC,KAAK,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,aAAa,CAAC,GAAG;IAClE,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC;IACf,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC1B,IAAI,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC;QAAE,IAAI,EAAE,IAAI,CAAA;KAAE,CAAC,CAAC;IAChC,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IAChC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;CACvC,CAAC;AAgJF,eAAO,MAAM,UAAU,GAAI,gDAA8D,KAAK,sBA8B7F,CAAC"}

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

@@ -0,0 +1,133 @@
+"use client";
+import { AudioLinesIcon, FileIcon, FileJsonIcon, FileTextIcon, FileVideo2, FolderIcon, FolderOpenIcon, SheetIcon, XIcon, } from "lucide-react";
+import prettyBytes from "pretty-bytes";
+import React, { 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: SheetIcon,
+    xls: SheetIcon,
+    mov: FileVideo2,
+    mp4: FileVideo2,
+    xlsx: SheetIcon,
+    pdf: FileTextIcon,
+    txt: FileTextIcon,
+    json: FileJsonIcon,
+    mp3: AudioLinesIcon,
+};
+const ItemViewer = (props) => {
+    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 Icon = extensionMap[props.file.name.split(".").at(-1)] ?? FileIcon;
+    const Element = info.type === "img" ? (<img src={info.url} className="object-contain w-full" alt={props.file.name}/>) : (<Icon strokeWidth={2} absoluteStrokeWidth size={48}/>);
+    return (<li className="flex flex-row gap-4 justify-between w-full border-b border-card-border last:border-b-transparent">
+            <div className="flex flex-col gap-4">
+                <div className="flex flex-row gap-4 items-center">
+                    <button type="button" onClick={onViewFile} className="flex overflow-hidden justify-center items-center max-w-16 m-2 size-16">
+                        {Element}
+                    </button>
+                    <div className="flex flex-col justify-start items-start text-left">
+                        <span>{props.file.name}</span>
+                        <span className="text-sm italic">{info.size}</span>
+                    </div>
+                </div>
+                {props.File ? (<div className="flex-1 min-w-full">
+                        <props.File file={props.file}/>
+                    </div>) : null}
+            </div>
+            <div className="flex justify-start py-4 transition-colors duration-300 ease-linear align-start hover:text-danger-hover">
+                <button onClick={onDeleteFile} type="button" className="flex justify-center items-center size-6">
+                    <XIcon size={16}/>
+                </button>
+            </div>
+        </li>);
+};
+const FilesList = (props) => (<ul className="space-y-8 w-full">
+        {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;
+    return (<div className="flex flex-col justify-center items-center">
+            <div className="flex flex-col gap-2 justify-center items-center">
+                <Icon className="text-primary" size={80}/>
+            </div>
+            <div className="flex flex-col gap-1 items-center my-4">
+                <p>{t.uploadIdle}</p>
+                <button className="underline text-primary" type="button">
+                    {t.uploadIdleButton}
+                </button>
+            </div>
+        </div>);
+};
+const InteractiveArea = (props) => {
+    if (props.isDragActive)
+        return <Idle files={props.files} dragging/>;
+    if (props.files.length > 0) {
+        return <FilesList File={props.File} onDeleteFile={props.onDeleteFile} files={props.files}/>;
+    }
+    return <Fragment>{props.idle}</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-4">
+            <p className="text-lg font-medium">{props.item.file.name}</p>
+            <p className="text-base">{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}></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 { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop: drop });
+    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()} data-active={items ? items.length > 0 : false} className="flex flex-col items-center justify-center rounded-lg border border-card-border p-6 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(props)} name={props.name} id={props.name}/>
+                <InteractiveArea File={File} onDeleteFile={onDeleteFile} isDragActive={isDragActive} idle={idle} files={items}/>
+            </div>
+        </Context.Provider>);
+};

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

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

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

@@ -1 +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,4CAOvD,CAAC"}
+{"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.js → form.jsx}

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

package/dist/components/form/{free-text.js → free-text.jsx}

@@ -1,6 +1,5 @@
 "use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, useEffect, useRef } from "react";
+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) => {
@@ -34,7 +33,9 @@ export const createFreeText = (Element, elementName, defaultProps, register) =>
                 input.removeEventListener("keydown", goNextInputImpl);
             };
         }, []);
-        return (_jsx(InputField, { ...defaultProps, info: info, left: left, error: error, right: right, loading: loading, form: props.form, name: props.name, feedback: feedback, hideLeft: hideLeft, title: props.title, container: css(container, defaultProps.container), rightLabel: rightLabel, disabled: props.disabled, interactive: interactive, required: props.required, componentName: elementName, id: props.name || props.id, optionalText: optionalText, labelClassName: labelClassName, placeholder: props.placeholder, children: _jsx(Render, { ...defaultProps, ...props, id: id, name: id, type: type, "data-next": next, "aria-busy": props.disabled, "aria-disabled": props.disabled, "aria-readonly": props.readOnly, ref: mergeRefs(ref, inputRef), className: css("input placeholder-input-mask group h-input-height w-full flex-1", "rounded-md bg-transparent px-input-x py-input-y text-base text-foreground", "outline-none transition-colors focus:ring-2 focus:ring-inset focus:ring-primary", "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) }) }));
+        return (<InputField {...defaultProps} info={info} left={left} error={error} right={right} loading={loading} form={props.form} name={props.name} feedback={feedback} hideLeft={hideLeft} title={props.title} container={css(container, defaultProps.container)} rightLabel={rightLabel} disabled={props.disabled} interactive={interactive} required={props.required} componentName={elementName} id={props.name || props.id} optionalText={optionalText} labelClassName={labelClassName} placeholder={props.placeholder}>
+                    <Render {...defaultProps} {...props} id={id} name={id} type={type} data-next={next} aria-busy={props.disabled} aria-disabled={props.disabled} aria-readonly={props.readOnly} ref={mergeRefs(ref, inputRef)} className={css("input placeholder-input-mask group h-input-height w-full flex-1", "rounded-md bg-transparent px-input-x py-input-y text-base text-foreground", "outline-none transition-colors focus:ring-2 focus:ring-inset focus:ring-primary", "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

@@ -10,7 +10,7 @@ export type FeedbackProps = React.PropsWithChildren<Partial<{
     placeholder: string;
     reportStatus: boolean;
 }>>;
-export declare const InputFeedback: ({ reportStatus, id, hideLeft, className, info, children, title }: FeedbackProps) => import("react/jsx-runtime").JSX.Element;
+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, {
     loading: boolean;
     componentName: string;

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

@@ -1 +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,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,OAAO,CAAC;CACzB,CAAC,CACL,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,kEAA0E,aAAa,4CA8CpH,CAAC;AAEF,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,OAAO,GAAG,QAAQ,GAAG,UAAU,IAAI,gBAAgB,CACrF,OAAO,CACH,QAAQ,CACJ,aAAa,EACb;IACI,OAAO,EAAE,OAAO,CAAC;IACjB,aAAa,EAAE,MAAM,CAAC;IACtB,IAAI,EAAE,KAAK,CAAC;IACZ,cAAc,EAAE,MAAM,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,EAAE,OAAO,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,KAAK,CAAC;IACZ,QAAQ,EAAE,KAAK,CAAC;IAChB,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,KAAK,CAAC;IACb,UAAU,EAAE,KAAK,CAAC;IAClB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;CACvB,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,YA6EpH,CAAC"}
+{"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,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,OAAO,CAAC;CACzB,CAAC,CACL,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,kEAA0E,aAAa,sBA8CpH,CAAC;AAEF,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,OAAO,GAAG,QAAQ,GAAG,UAAU,IAAI,gBAAgB,CACrF,OAAO,CACH,QAAQ,CACJ,aAAa,EACb;IACI,OAAO,EAAE,OAAO,CAAC;IACjB,aAAa,EAAE,MAAM,CAAC;IACtB,IAAI,EAAE,KAAK,CAAC;IACZ,cAAc,EAAE,MAAM,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,EAAE,OAAO,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,KAAK,CAAC;IACZ,QAAQ,EAAE,KAAK,CAAC;IAChB,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,KAAK,CAAC;IACb,UAAU,EAAE,KAAK,CAAC;IAClB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;CACvB,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,YA6EpH,CAAC"}

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

@@ -0,0 +1,54 @@
+"use client";
+import { CheckCircle, InfoIcon, XCircle } from "lucide-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">
+                {title}
+                {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">
+                                        <InfoIcon className="aspect-square size-3" aria-hidden="true" size={16} strokeWidth={1} absoluteStrokeWidth/>
+                                    </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">
+                                <CheckCircle className="hidden aspect-square size-3 opacity-0 transition-opacity group-assert:block group-assert:text-success group-assert:opacity-100" aria-hidden="true" size={16} strokeWidth={1} absoluteStrokeWidth/>
+                                <XCircle className="hidden aspect-square size-3 opacity-0 transition-opacity group-error:block group-error:opacity-100" aria-hidden="true" size={16} strokeWidth={1} absoluteStrokeWidth/>
+                            </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, }, 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 max-w-full min-w-0 flex-col items-start", container)}>
+                <label form={form} htmlFor={ID} className="text-field-label max-w-full w-full relative inline-flex cursor-text flex-row flex-wrap justify-between gap-1 text-sm transition-colors empty:hidden group-disabled:cursor-not-allowed group-error:text-danger">
+                    <InputFeedback info={info} hideLeft={hideLeft} reportStatus={reportStatusDefault} title={title} placeholder={placeholder}>
+                        {optionalText || rightLabel ? (<Fragment>
+                                {!required ? (<span aria-disabled={disabled} className="transition-colors text-opacity-70 aria-disabled:text-disabled group-focus-within:text-primary group-hover:text-primary">
+                                        {optionalText}
+                                    </span>) : null}
+                                {rightLabel ? <Fragment>{rightLabel}</Fragment> : null}
+                            </Fragment>) : null}
+                    </InputFeedback>
+                    <div className={`group relative flex w-full flex-row flex-nowrap items-center gap-x-2 gap-y-1 rounded-md 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-1 whitespace-nowrap pl-2">{left}</span> : null}
+                        {children}
+                        {right ? <span className="flex flex-nowrap gap-2 whitespace-nowrap pr-2">{right}</span> : null}
+                    </div>
+                </label>
+                <p className="mt-input-gap hidden whitespace-pre-wrap text-wrap text-xs 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 className="mt-input-gap text-xs empty:mt-0 empty:hidden group-has-[input:not(:focus):valid[data-initialized=true]]:block group-assert:block group-error:hidden">
+                    {feedback}
+                </p>
+            </fieldset>);
+});