@g4rcez/components 3.0.0-0 → 3.0.1

package/dist/components/form/autocomplete.jsx

@@ -1,275 +0,0 @@
-"use client";
-import { autoPlacement, 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: 200,
-    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 h-96">
-      <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, placement } = useFloating({
-        open,
-        transform: true,
-        onOpenChange: setOpen,
-        whileElementsMounted: autoUpdate,
-        middleware: [
-            offset(4),
-            autoPlacement({ allowedPlacements: ['top-start', 'bottom-start'], alignment: "start" }),
-            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;
-    const isTopPlacement = placement === "top" || placement === "top-start";
-    return (<InputField {...props} left={left} error={error} ref={fieldset} form={props.form} loading={loading} name={props.name} feedback={open && (isTopPlacement) ? props.title : 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-hidden 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={css("overscroll-contain p-0 m-0 max-h-80 list-none rounded-t-lg rounded-b-lg border ease-in-out isolate z-floating border-floating-border bg-floating-background text-foreground shadow-floating", isTopPlacement ? "origin-[bottom_center]" : "origin-[top_center]")} 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 + 2));
-            }}>
-                {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 }} 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

@@ -1,12 +0,0 @@
-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-sm 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.jsx

@@ -1,115 +0,0 @@
-"use client";
-import { format, isValid, parse, startOfDay } from "date-fns";
-import { CalendarIcon } from "lucide-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";
-import { Calendar } from "../display/calendar";
-import { Dropdown } from "../floating/dropdown";
-import { Input } from "./input";
-const fixedDate = new Date(1970, 11, 31);
-const parts = {
-    year: () => [/\d/, /\d/, /\d/, /\d/],
-    month: () => [/\d/, /\d/],
-    day: () => [/\d/, /\d/],
-    hour: () => [/\d/, /\d/],
-    minute: () => [/\d/, /\d/],
-    literal: (str) => str.split(""),
-};
-const placeholders = {
-    day: () => "dd",
-    hour: () => "HH",
-    month: () => "MM",
-    minute: () => "mm",
-    year: () => "yyyy",
-    literal: (str) => str,
-};
-const partValues = {
-    literal: (_, str) => str,
-    year: (date) => date.getFullYear().toString(),
-    day: (date) => date.getDate().toString().padStart(2, "0"),
-    hour: (date) => date.getHours().toString().padStart(2, "0"),
-    minute: (date) => date.getMinutes().toString().padStart(2, "0"),
-    month: (date) => (date.getMonth() + 1).toString().padStart(2, "0"),
-};
-const formatParts = (datetimeFormat, date) => {
-    try {
-        return datetimeFormat.formatToParts(date).map(x => {
-            if ((x.type === "literal" && x.value === ", ")) {
-                return { type: x.type, value: " " };
-            }
-            return x;
-        });
-    }
-    catch (e) {
-        return [];
-    }
-};
-const DATE_TIME_FORMAT = { day: "numeric", month: "numeric", year: "numeric", hour: "numeric", minute: "numeric" };
-const DATE_FORMAT = { day: "numeric", month: "numeric", year: "numeric" };
-export const DatePicker = forwardRef(({ date, locale: inputLocal, disabledDate, onChange, markToday, clickToClose, floating = true, type, ...props }, externalRef) => {
-    const locale = useLocale(inputLocal);
-    const labelId = useId();
-    const translation = useTranslations();
-    const datetimeFormat = useMemo(() => new Intl.DateTimeFormat(locale, type === "datetime" ? DATE_TIME_FORMAT : DATE_FORMAT), [locale, type]);
-    const [innerDate, setInnerDate] = useState(date || undefined);
-    const [open, setOpen] = useState(false);
-    const mask = formatParts(datetimeFormat, fixedDate).flatMap((x) => (Is.keyof(parts, x.type) ? parts[x.type](x.value) : []));
-    const placeholder = useMemo(() => {
-        return formatParts(datetimeFormat, fixedDate).reduce((acc, x) => acc + (Is.keyof(placeholders, x.type) ? placeholders[x.type](x.value) : ""), "");
-    }, [datetimeFormat]);
-    const isoDateEffect = date?.toISOString();
-    const [value, setValue] = useState(!innerDate
-        ? ""
-        : formatParts(datetimeFormat, innerDate).reduce((acc, x) => acc + (Is.keyof(parts, x.type) ? partValues[x.type](innerDate, x.value) : ""), ""));
-    const onChangeDateInput = (e) => {
-        const v = e.target.value;
-        setValue(v);
-        if (mask.length === v.length) {
-            const matches = mask.every((x, i) => {
-                const c = v.charAt(i);
-                return typeof x === "string" ? c === x : x.test(c);
-            });
-            if (matches) {
-                const parsed = parse(v, placeholder, new Date());
-                const d = type === "datetime" ? parsed : startOfDay(parsed);
-                setInnerDate(d);
-                return onChange?.(d);
-            }
-        }
-        setInnerDate(undefined);
-        return onChange?.(undefined);
-    };
-    useEffect(() => {
-        if (isValid(date)) {
-            setInnerDate(date);
-            setValue(format(date, placeholder));
-        }
-    }, [isoDateEffect, placeholder]);
-    const onChangeDate = (d) => {
-        setInnerDate(d);
-        onChange?.(d);
-        if (clickToClose)
-            setOpen(false);
-        if (d)
-            return setValue(format(d, placeholder));
-        return setValue("");
-    };
-    const validDate = isValid(innerDate);
-    const htmlValue = validDate ? innerDate.toISOString() : undefined;
-    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.jsx

@@ -1,133 +0,0 @@
-"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.jsx

@@ -1,10 +0,0 @@
-"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.jsx

@@ -1,17 +0,0 @@
-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.jsx

@@ -1,41 +0,0 @@
-"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, ...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} 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-hidden 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;
-};