@g4rcez/components 5.0.1 → 5.0.3

package/dist/components/form/autocomplete.jsx

@@ -0,0 +1,299 @@
+"use client";
+import { autoPlacement, autoUpdate, FloatingFocusManager, FloatingPortal, offset, size, useDismiss, useFloating, useInteractions, useListNavigation, useTransitionStyles, } from "@floating-ui/react";
+import { CaretDownIcon } from "@phosphor-icons/react";
+import { AnimatePresence, motion } from "motion/react";
+import React, { forwardRef, Fragment, useEffect, useId, 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.div {...props} ref={ref} role="select" id={context?.listboxId} className="max-h-dropdown-max-h w-full overscroll-contain rounded-dropdown-radius">
+            <AnimatePresence>{props.children}</AnimatePresence>
+        </motion.div>);
+});
+const Item = forwardRef(function VirtualItem({ item: _item, context: _context, ...props }, ref) {
+    return <motion.div {...props} ref={ref} role="presentation" className="first:rounded-t-dropdown-radius last:rounded-t-dropdown-radius"/>;
+});
+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 generatedId = useId();
+    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([
+        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]);
+    useEffect(() => {
+        const input = refs.reference.current;
+        if (!input)
+            return;
+        return initializeInputDataset(input);
+    }, [refs.reference]);
+    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);
+        input.focus();
+    };
+    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 || generatedId;
+    const shadowId = `${id}-shadow`;
+    const listboxId = `${shadowId}-listbox`;
+    const isEmpty = displayList.length === 0;
+    const isTopPlacement = placement === "top" || placement === "top-start";
+    const activeOptionId = open && index !== null && displayList[index] ? `${shadowId}-option-${index}` : undefined;
+    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-input-gap 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-input-gap 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) {
+            props.onKeyDown?.(event);
+            if (event.defaultPrevented)
+                return;
+            if (event.key === "Escape") {
+                event.preventDefault();
+                return setClosed();
+            }
+            if (!open)
+                return;
+            if (event.key === "ArrowDown") {
+                event.preventDefault();
+                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") {
+                event.preventDefault();
+                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} role="combobox" aria-autocomplete="list" aria-expanded={open} aria-haspopup="listbox" aria-controls={listboxId} aria-activedescendant={activeOptionId} aria-labelledby={`${shadowId}-label`} autoComplete="off" className={css("input placeholder-input-mask group h-input-height w-full flex-1", "rounded-input-radius bg-transparent px-input-padding-x py-input-padding-y text-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-input-text 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-dropdown-radius 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-menu-item-p text-left text-disabled">
+                                            {emptyMessage || translation.autocompleteEmpty}
+                                        </span>
+                                    </div>) : null}
+                                <Virtuoso overscan={40} ref={virtuoso} hidden={isEmpty} data={displayList} context={{ listboxId }} style={{ height: h }} initialItemCount={displayList.length} defaultItemHeight={MIN_SIZE} components={components} scrollerRef={(e) => {
+                scroller.current = e;
+                removeScrollRef.current = e;
+            }} className="border-floating max-h-full overscroll-contain rounded-dropdown-radius 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 (<div id={`${shadowId}-option-${i}`} data-value={option.value} {...getItemProps({
+                    ref: (node) => {
+                        listRef.current[i] = node;
+                    },
+                    role: "option",
+                    "aria-selected": active,
+                    "aria-disabled": option.disabled,
+                    tabIndex: -1,
+                    onClick: () => {
+                        if (!option.disabled)
+                            onSelect(option, i);
+                    },
+                    className: css("min-h-10 w-full cursor-pointer p-menu-item-p text-left hover:bg-floating-hover", 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>
+                                            </div>);
+            }}/>
+                            </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,KAA4B,MAAM,OAAO,CAAC;AAEjD,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,qGAuDpB,CAAC"}

package/dist/components/form/checkbox.js

@@ -1,34 +1,36 @@
 import { t as e } from "../../dom-Bn4wY_Zx.js";
-import { forwardRef as t } from "react";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { forwardRef as t, useId as n } from "react";
+import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
 //#region src/components/form/checkbox.tsx
-var i = t(({ children: t, asTask: i = !1, labelClassName: a, loading: o, error: s, className: c = "", size: l, container: u, ...d }, f) => {
-	let p = d.disabled || o;
-	return /* @__PURE__ */ r("label", {
-		"aria-disabled": p,
-		"data-disabled": p,
-		"data-task": i,
+var o = t(({ children: t, asTask: o = !1, labelClassName: s, loading: c, error: l, className: u = "", size: d, container: f, ...p }, m) => {
+	let h = p.disabled || c, g = n(), _ = p.id ?? p.name ?? g, v = l ? `${_}-error` : void 0, y = [p["aria-describedby"], v].filter(Boolean).join(" ") || void 0, b = l ? !0 : p["aria-invalid"];
+	return /* @__PURE__ */ a(r, { children: [/* @__PURE__ */ a("label", {
+		"aria-disabled": h,
+		"data-disabled": h,
+		"data-task": o,
 		"data-component": "checkbox",
-		className: e("group flex w-fit flex-wrap items-center font-normal data-[disabled=true]:cursor-not-allowed", i ? "group-checkbox-checked:line-through" : "", u),
-		children: [
-			/* @__PURE__ */ n("input", {
-				...d,
-				ref: f,
-				disabled: p,
-				type: "checkbox",
-				"data-task": i,
-				className: e("form-checkbox mr-checkbox-gap inline-block size-checkbox-size appearance-none rounded-checkbox-radius border-card-border bg-origin-border text-primary focus:ring-primary disabled:opacity-70 group-aria-disabled:cursor-not-allowed", c)
-			}),
-			t,
-			/* @__PURE__ */ n("span", {
-				"data-name": "checkbox-label",
-				className: e("min-w-full flex-1 text-checkbox-hint-text text-danger empty:mt-0 empty:hidden", a),
-				children: s
-			})
-		]
-	});
+		className: e("group flex w-fit flex-wrap items-center font-normal data-[disabled=true]:cursor-not-allowed", o ? "group-checkbox-checked:line-through" : "", f),
+		children: [/* @__PURE__ */ i("input", {
+			...p,
+			ref: m,
+			disabled: h,
+			type: "checkbox",
+			"data-task": o,
+			"aria-invalid": b,
+			"aria-describedby": y,
+			onKeyDown: (e) => {
+				p.onKeyDown?.(e), !e.defaultPrevented && (e.key === " " || e.key === "Space" || e.code === "Space" || e.key === "Enter") && (e.preventDefault(), e.currentTarget.click());
+			},
+			className: e("form-checkbox mr-checkbox-gap inline-block size-checkbox-size appearance-none rounded-checkbox-radius border-card-border bg-origin-border text-primary focus:ring-primary disabled:opacity-70 group-aria-disabled:cursor-not-allowed", u)
+		}), t]
+	}), /* @__PURE__ */ i("span", {
+		id: v,
+		"data-name": "checkbox-label",
+		className: e("min-w-full flex-1 text-checkbox-hint-text text-danger empty:mt-0 empty:hidden", s),
+		children: l
+	})] });
 });
 //#endregion
-export { i as Checkbox };
+export { o as Checkbox };
 
 //# sourceMappingURL=checkbox.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","names":[],"sources":["../../../src/components/form/checkbox.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\";\nimport { css } from \"../../lib/dom\";\nimport { Override } from \"../../types\";\n\nexport type CheckboxProps = Override<\n    React.PropsWithChildren<React.ComponentProps<\"input\">>,\n    {\n        error?: string;\n        asTask?: boolean;\n        loading?: boolean;\n        container?: string;\n        labelClassName?: string;\n        size?: \"medium\" | \"large\";\n    }\n>;\n\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(\n    ({ children, asTask = false, labelClassName, loading, error, className = \"\", size: _size, container, ...props }: CheckboxProps, ref) => {\n        const d = props.disabled || loading;\n        return (\n            <label\n                aria-disabled={d}\n                data-disabled={d}\n                data-task={asTask}\n                data-component=\"checkbox\"\n                className={css(\n                    \"group flex w-fit flex-wrap items-center font-normal data-[disabled=true]:cursor-not-allowed\",\n                    asTask ? \"group-checkbox-checked:line-through\" : \"\",\n                    container\n                )}\n            >\n                <input\n                    {...props}\n                    ref={ref}\n                    disabled={d}\n                    type=\"checkbox\"\n                    data-task={asTask}\n                    className={css(\n                        \"form-checkbox mr-checkbox-gap inline-block size-checkbox-size appearance-none rounded-checkbox-radius border-card-border bg-origin-border text-primary focus:ring-primary disabled:opacity-70 group-aria-disabled:cursor-not-allowed\",\n                        className\n                    )}\n                />\n                {children}\n                <span\n                    data-name=\"checkbox-label\"\n                    className={css(\"min-w-full flex-1 text-checkbox-hint-text text-danger empty:mt-0 empty:hidden\", labelClassName)}\n                >\n                    {error}\n                </span>\n            </label>\n        );\n    }\n);\n"],"mappings":";;;;AAgBA,IAAa,IAAW,GACnB,EAAE,aAAU,YAAS,IAAO,mBAAgB,YAAS,UAAO,eAAY,IAAI,MAAM,GAAO,cAAW,GAAG,KAAwB,MAAQ;CACpI,IAAM,IAAI,EAAM,YAAY;CAC5B,OACI,kBAAC,SAAD;EACI,iBAAe;EACf,iBAAe;EACf,aAAW;EACX,kBAAe;EACf,WAAW,EACP,+FACA,IAAS,wCAAwC,IACjD,CACJ;YATJ;GAWI,kBAAC,SAAD;IACI,GAAI;IACC;IACL,UAAU;IACV,MAAK;IACL,aAAW;IACX,WAAW,EACP,wOACA,CACJ;GACH,CAAA;GACA;GACD,kBAAC,QAAD;IACI,aAAU;IACV,WAAW,EAAI,iFAAiF,CAAc;cAE7G;GACC,CAAA;EACH;;AAEf,CACJ"}
+{"version":3,"file":"checkbox.js","names":[],"sources":["../../../src/components/form/checkbox.tsx"],"sourcesContent":["import React, { forwardRef, useId } from \"react\";\nimport { css } from \"../../lib/dom\";\nimport { Override } from \"../../types\";\n\nexport type CheckboxProps = Override<\n    React.PropsWithChildren<React.ComponentProps<\"input\">>,\n    {\n        error?: string;\n        asTask?: boolean;\n        loading?: boolean;\n        container?: string;\n        labelClassName?: string;\n        size?: \"medium\" | \"large\";\n    }\n>;\n\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(\n    ({ children, asTask = false, labelClassName, loading, error, className = \"\", size: _size, container, ...props }: CheckboxProps, ref) => {\n        const d = props.disabled || loading;\n        const generatedId = useId();\n        const id = props.id ?? props.name ?? generatedId;\n        const errorId = error ? `${id}-error` : undefined;\n        const describedBy = [props[\"aria-describedby\"], errorId].filter(Boolean).join(\" \") || undefined;\n        const ariaInvalid = error ? true : props[\"aria-invalid\"];\n        return (\n            <>\n                <label\n                    aria-disabled={d}\n                    data-disabled={d}\n                    data-task={asTask}\n                    data-component=\"checkbox\"\n                    className={css(\n                        \"group flex w-fit flex-wrap items-center font-normal data-[disabled=true]:cursor-not-allowed\",\n                        asTask ? \"group-checkbox-checked:line-through\" : \"\",\n                        container\n                    )}\n                >\n                    <input\n                        {...props}\n                        ref={ref}\n                        disabled={d}\n                        type=\"checkbox\"\n                        data-task={asTask}\n                        aria-invalid={ariaInvalid}\n                        aria-describedby={describedBy}\n                        onKeyDown={(event) => {\n                            props.onKeyDown?.(event);\n\n                            if (event.defaultPrevented) return;\n                            if (event.key === \" \" || event.key === \"Space\" || event.code === \"Space\" || event.key === \"Enter\") {\n                                event.preventDefault();\n                                event.currentTarget.click();\n                            }\n                        }}\n                        className={css(\n                            \"form-checkbox mr-checkbox-gap inline-block size-checkbox-size appearance-none rounded-checkbox-radius border-card-border bg-origin-border text-primary focus:ring-primary disabled:opacity-70 group-aria-disabled:cursor-not-allowed\",\n                            className\n                        )}\n                    />\n                    {children}\n                </label>\n                <span\n                    id={errorId}\n                    data-name=\"checkbox-label\"\n                    className={css(\"min-w-full flex-1 text-checkbox-hint-text text-danger empty:mt-0 empty:hidden\", labelClassName)}\n                >\n                    {error}\n                </span>\n            </>\n        );\n    }\n);\n"],"mappings":";;;;AAgBA,IAAa,IAAW,GACnB,EAAE,aAAU,YAAS,IAAO,mBAAgB,YAAS,UAAO,eAAY,IAAI,MAAM,GAAO,cAAW,GAAG,KAAwB,MAAQ;CACpI,IAAM,IAAI,EAAM,YAAY,GACtB,IAAc,EAAM,GACpB,IAAK,EAAM,MAAM,EAAM,QAAQ,GAC/B,IAAU,IAAQ,GAAG,EAAG,UAAU,KAAA,GAClC,IAAc,CAAC,EAAM,qBAAqB,CAAO,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,KAAK,KAAA,GAChF,IAAc,IAAQ,KAAO,EAAM;CACzC,OACI,kBAAA,GAAA,EAAA,UAAA,CACI,kBAAC,SAAD;EACI,iBAAe;EACf,iBAAe;EACf,aAAW;EACX,kBAAe;EACf,WAAW,EACP,+FACA,IAAS,wCAAwC,IACjD,CACJ;YATJ,CAWI,kBAAC,SAAD;GACI,GAAI;GACC;GACL,UAAU;GACV,MAAK;GACL,aAAW;GACX,gBAAc;GACd,oBAAkB;GAClB,YAAY,MAAU;IAClB,EAAM,YAAY,CAAK,GAEnB,GAAM,qBACN,EAAM,QAAQ,OAAO,EAAM,QAAQ,WAAW,EAAM,SAAS,WAAW,EAAM,QAAQ,aACtF,EAAM,eAAe,GACrB,EAAM,cAAc,MAAM;GAElC;GACA,WAAW,EACP,wOACA,CACJ;EACH,CAAA,GACA,CACE;KACP,kBAAC,QAAD;EACI,IAAI;EACJ,aAAU;EACV,WAAW,EAAI,iFAAiF,CAAc;YAE7G;CACC,CAAA,CACR,EAAA,CAAA;AAEV,CACJ"}

package/dist/components/form/checkbox.jsx

@@ -0,0 +1,27 @@
+import React, { forwardRef, useId } from "react";
+import { css } from "../../lib/dom";
+export const Checkbox = forwardRef(({ children, asTask = false, labelClassName, loading, error, className = "", size: _size, container, ...props }, ref) => {
+    const d = props.disabled || loading;
+    const generatedId = useId();
+    const id = props.id ?? props.name ?? generatedId;
+    const errorId = error ? `${id}-error` : undefined;
+    const describedBy = [props["aria-describedby"], errorId].filter(Boolean).join(" ") || undefined;
+    const ariaInvalid = error ? true : props["aria-invalid"];
+    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} aria-invalid={ariaInvalid} aria-describedby={describedBy} onKeyDown={(event) => {
+            props.onKeyDown?.(event);
+            if (event.defaultPrevented)
+                return;
+            if (event.key === " " || event.key === "Space" || event.code === "Space" || event.key === "Enter") {
+                event.preventDefault();
+                event.currentTarget.click();
+            }
+        }} className={css("form-checkbox mr-checkbox-gap inline-block size-checkbox-size appearance-none rounded-checkbox-radius border-card-border bg-origin-border text-primary focus:ring-primary disabled:opacity-70 group-aria-disabled:cursor-not-allowed", className)}/>
+                    {children}
+                </label>
+                <span id={errorId} data-name="checkbox-label" className={css("min-w-full flex-1 text-checkbox-hint-text text-danger empty:mt-0 empty:hidden", labelClassName)}>
+                    {error}
+                </span>
+            </>);
+});

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.js

@@ -1,3 +1,3 @@
 "use client";
-import { t as e } from "../../date-picker-BhKEFZew.js";
+import { t as e } from "../../date-picker-DNzupG8R.js";
 export { e as DatePicker };

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 {
+        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, date]);
+    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 size={16}/>
+                                        </span>}>
+                                    {CalendarComponent}
+                                </Dropdown>
+                            </Fragment>) : null}/>
+            </Fragment>);
+});

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

@@ -0,0 +1,20 @@
+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<IdleProps>;
+    File?: React.FC<{
+        file: File;
+    }>;
+    onDrop?: (file: File[]) => void;
+    onDeleteFile?: (file: File) => void;
+};
+type IdleProps = {
+    dragging: boolean;
+    files?: File[];
+    onUpload?: () => 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,KAAiF,MAAM,OAAO,CAAC;AACtG,OAAO,EAAmB,aAAa,EAAe,MAAM,gBAAgB,CAAC;AAC7E,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,SAAS,CAAC,CAAC;IACrC,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;AAgGF,KAAK,SAAS,GAAG;IACb,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB,CAAC;AAiFF,eAAO,MAAM,UAAU,GAAI,gDAA8D,KAAK,sBAwC7F,CAAC"}

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

@@ -1,3 +1,3 @@
 "use client";
-import { t as e } from "../../file-upload-DWbZfeG5.js";
+import { t as e } from "../../file-upload-C2zNnv9n.js";
 export { e as FileUpload };