@g4rcez/components 4.1.1 → 4.1.3

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

@@ -0,0 +1,16 @@
+import React from "react";
+import { Label } from "../../types";
+import { InputFieldProps } from "./input-field";
+import { type OptionProps } from "./select";
+export type AutocompleteItemProps = OptionProps & {
+    Render?: React.FC<OptionProps>;
+};
+export type AutocompleteProps = Omit<InputFieldProps<"input">, "value"> & {
+    title?: string;
+    value?: string;
+    emptyMessage?: Label;
+    dynamicOption?: boolean;
+    options: AutocompleteItemProps[];
+};
+export declare const Autocomplete: React.ForwardRefExoticComponent<Omit<AutocompleteProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=autocomplete.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"autocomplete.d.ts","sourceRoot":"","sources":["../../../src/components/form/autocomplete.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAAkG,MAAM,OAAO,CAAC;AASvH,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,EAAc,eAAe,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AAE5C,MAAM,MAAM,qBAAqB,GAAG,WAAW,GAAG;IAAE,MAAM,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAAC,CAAA;CAAE,CAAC;AAErF,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC,GAAG;IACtE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,OAAO,EAAE,qBAAqB,EAAE,CAAC;CACpC,CAAC;AAgCF,eAAO,MAAM,YAAY,yGAkYxB,CAAC"}

package/dist/components/form/autocomplete.jsx

@@ -0,0 +1,278 @@
+"use client";
+import { autoPlacement, autoUpdate, FloatingFocusManager, FloatingPortal, offset, size, useDismiss, useFloating, useInteractions, useListNavigation, useRole, useTransitionStyles, } from "@floating-ui/react";
+import { CaretDownIcon } from "@phosphor-icons/react";
+import { AnimatePresence, motion } from "motion/react";
+import React, { forwardRef, Fragment, useEffect, useMemo, 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, synthesizeChangeEvent } 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,
+    open: { transform: "scaleY(1)", opacity: 1 },
+    close: { transform: "scaleY(0)", opacity: 0 },
+    initial: { transform: "scaleY(0)", opacity: 0.2 },
+};
+const List = forwardRef(function VirtualList({ context, ...props }, ref) {
+    return (<motion.ul {...props} ref={ref} className="max-h-96 w-full overscroll-contain 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 EMPTY_NODES = [];
+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 [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(EMPTY_NODES);
+    const [, tick] = useState(0);
+    const removeScrollRef = useRemoveScroll(open, "block-only");
+    const innerOptions = useMemo(() => (dynamicOption && shadow !== "" ? [{ value: shadow, label: shadow, "data-dynamic": "true" }, ...options] : options), [dynamicOption, shadow, options]);
+    const openDropdown = () => flushSync(() => setOpen(true));
+    const list = useMemo(() => shadow
+        ? fzf(innerOptions, "value", [
+            { key: "value", value: shadow },
+            { key: "label", value: shadow },
+        ])
+        : innerOptions, [innerOptions, shadow]);
+    const [h, setH] = useState(() => Math.min(320, MIN_SIZE * options.length));
+    const setClosed = () => {
+        setOpen(false);
+        setH(0);
+    };
+    const displayList = useMemo(() => list.filter((x) => x.hidden !== true), [list]);
+    const pattern = useMemo(() => dynamicOption ? undefined : `^(${options.map((x) => `${safeRegex(x.value)}${x.label ? "|" + safeRegex(x.label) : ""}`).join("|")})$`, [dynamicOption, options]);
+    const { x, y, strategy, refs, context, placement } = useFloating({
+        open,
+        transform: true,
+        onOpenChange: setOpen,
+        placement: "bottom-start",
+        whileElementsMounted: autoUpdate,
+        middleware: [
+            offset(4),
+            autoPlacement({ allowedPlacements: ["top-start", "bottom-start"], alignment: "start" }),
+            size({
+                padding: 10,
+                elementContext: "reference",
+                apply(args) {
+                    const DEFAULT_SIZE = getRemainingSize(refs.reference.current, window.innerHeight);
+                    const mw = `${fieldset.current?.getBoundingClientRect().width || DEFAULT_SIZE}px`;
+                    Object.assign(args.elements.floating.style, { width: mw, maxWidth: mw });
+                },
+            }),
+        ],
+    });
+    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(() => {
+        const input = refs.reference.current;
+        if (!input)
+            return;
+        return initializeInputDataset(input);
+    }, []);
+    useEffect(() => {
+        if (!open)
+            return;
+        const id = requestAnimationFrame(() => tick((n) => n + 1));
+        return () => cancelAnimationFrame(id);
+    }, [open]);
+    useEffect(() => {
+        if (!open) {
+            setH(0);
+            return;
+        }
+        const id = setTimeout(() => setH(Math.min(320, displayList.length * MIN_SIZE)), 100);
+        return () => clearTimeout(id);
+    }, [open, displayList.length]);
+    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(synthesizeChangeEvent(input));
+        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} id={shadowId} form={props.form} loading={loading} name={props.name} hideLeft={hideLeft} required={required} title={props.title} container={container} rightLabel={rightLabel} interactive={interactive} optionalText={optionalText} componentName="autocomplete" labelClassName={labelClassName} placeholder={props.placeholder} ref={fieldset} feedback={open && isTopPlacement ? props.title : feedback} right={<span className="flex items-center gap-0.5">
+                        {right}
+                        <button type="button" className="p-2 transition-colors link:text-primary md:p-1" onClick={onCaretDownClick}>
+                            <CaretDownIcon size={20}/>
+                            <span className="sr-only">{translation.inputCaretDown}</span>
+                        </button>
+                        {value ? (<button type="button" onClick={onClose} aria-label={translation.inputCloseValue} className="p-2 transition-colors link:text-danger md:p-1">
+                                <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: refs.setFloating,
+            style: { ...transitions.styles, left: x, top: y ?? 0, position: strategy, height: "auto" },
+        })} initial={false} data-floating="true" animate={{ height: isEmpty ? "auto" : h }} onAnimationComplete={() => {
+                if (!open) {
+                    setH(0);
+                    return;
+                }
+                const li = refs.floating.current?.querySelector("li");
+                const sum = (li?.getBoundingClientRect().height ?? MIN_SIZE) * displayList.length;
+                flushSync(() => setH(Math.min(320, sum + 2)));
+            }} className={css("shadow-floating isolate z-floating m-0 max-h-80 origin-[top_center] list-none overscroll-contain rounded-b-lg rounded-t-lg border border-floating-border bg-floating-background p-0 text-foreground ease-in-out", isTopPlacement ? "origin-[bottom_center]" : "origin-[top_center]")}>
+                                {isEmpty ? (<div className="w-full border-b border-tooltip-border">
+                                        <span className="flex w-full justify-between p-2 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) => {
+                scroller.current = e;
+                removeScrollRef.current = e;
+            }} className="border-floating max-h-full overscroll-contain rounded-lg bg-floating-background p-0 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) => {
+                        listRef.current[i] = node;
+                    },
+                    role: "option",
+                    type: "button",
+                    "aria-checked": active,
+                    "aria-current": active,
+                    "aria-selected": active,
+                    "aria-disabled": 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 {...option} ref={undefined} label={option.label} value={option.value}>
+                                                    {children}
+                                                </Label>
+                                            </button>);
+            }}/>
+                            </motion.div>
+                        </FloatingFocusManager>) : null}
+                </FloatingPortal>
+            </InputField>);
+});

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

@@ -0,0 +1,12 @@
+import React from "react";
+import { Override } from "../../types";
+export type CheckboxProps = Override<React.PropsWithChildren<React.ComponentProps<"input">>, {
+    error?: string;
+    asTask?: boolean;
+    loading?: boolean;
+    container?: string;
+    labelClassName?: string;
+    size?: "medium" | "large";
+}>;
+export declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=checkbox.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/form/checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEvC,MAAM,MAAM,aAAa,GAAG,QAAQ,CAChC,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,EACtD;IACI,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;CAC7B,CACJ,CAAC;AAEF,eAAO,MAAM,QAAQ,qGAiCpB,CAAC"}

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.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { Override } from "../../types";
+import { CalendarProps } from "../display/calendar";
+import { InputProps } from "./input";
+export type DatePickerProps = Omit<Override<InputProps, CalendarProps & {
+    floating?: boolean;
+    clickToClose?: boolean;
+}>, "currency">;
+export declare const DatePicker: React.ForwardRefExoticComponent<Omit<DatePickerProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=date-picker.d.ts.map

package/dist/components/form/date-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker.d.ts","sourceRoot":"","sources":["../../../src/components/form/date-picker.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAoE,MAAM,OAAO,CAAC;AAIzF,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAY,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAE9D,OAAO,EAAS,UAAU,EAAE,MAAM,SAAS,CAAC;AAE5C,MAAM,MAAM,eAAe,GAAG,IAAI,CAC9B,QAAQ,CACJ,UAAU,EACV,aAAa,GAAG;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;CAC1B,CACJ,EACD,UAAU,CACb,CAAC;AAkDF,eAAO,MAAM,UAAU,uGAsItB,CAAC"}

package/dist/components/form/date-picker.jsx

@@ -0,0 +1,115 @@
+"use client";
+import { format, isValid, parse, startOfDay } from "date-fns";
+import { CalendarIcon } from "@phosphor-icons/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.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import { DropzoneProps } from "react-dropzone";
+import { Override } from "sidekicker";
+type Props = Override<React.ComponentProps<"input">, DropzoneProps> & {
+    files?: File[];
+    idle?: React.ReactElement;
+    File?: React.FC<{
+        file: File;
+    }>;
+    onDrop?: (file: File[]) => void;
+    onDeleteFile?: (file: File) => void;
+};
+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

@@ -0,0 +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;AAkJF,eAAO,MAAM,UAAU,GAAI,gDAA8D,KAAK,sBA+B7F,CAAC"}

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

@@ -0,0 +1,134 @@
+"use client";
+import { WaveformIcon, FileIcon, FileCodeIcon, FileTextIcon, FileVideoIcon, FolderIcon, FolderOpenIcon, TableIcon, XIcon, } from "@phosphor-icons/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: TableIcon,
+    xls: TableIcon,
+    mov: FileVideoIcon,
+    mp4: FileVideoIcon,
+    xlsx: TableIcon,
+    pdf: FileTextIcon,
+    txt: FileTextIcon,
+    json: FileCodeIcon,
+    mp3: WaveformIcon,
+};
+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 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-4 border-b border-card-border last:border-b-transparent">
+            <div className="flex flex-col gap-4">
+                <div className="flex flex-row items-center gap-4">
+                    <button type="button" onClick={onViewFile} aria-label={`View ${fileName}`} className="m-2 flex size-16 max-w-16 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-sm 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-4 transition-colors duration-300 ease-linear hover:text-danger-hover">
+                <button onClick={onDeleteFile} type="button" aria-label={`Remove ${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;
+    return (<div className="flex flex-col items-center justify-center">
+            <div className="flex flex-col items-center justify-center gap-2">
+                <Icon className="text-primary" size={80}/>
+            </div>
+            <div className="my-4 flex flex-col items-center gap-1">
+                <p>{t.uploadIdle}</p>
+                <button className="text-primary underline" 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()} aria-label={t.fileUploadZoneLabel} 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

@@ -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"}