@g4rcez/components 5.0.1 → 5.0.2

package/dist/components/floating/tooltip.jsx

@@ -0,0 +1,67 @@
+"use client";
+import { arrow, autoPlacement, autoUpdate, flip, FloatingArrow, FloatingPortal, offset, safePolygon, shift, useClick, useClientPoint, useDismiss, useFloating, useFocus, useHover, useInteractions, useRole, } from "@floating-ui/react";
+import React, { forwardRef, Fragment, useEffect, useRef, useState } from "react";
+import { Polymorph } from "../../components/core/polymorph";
+import { FLOATING_DELAY } from "../../constants";
+import { mergeRefs } from "../../lib/dom";
+import { noop } from "../../lib/fns";
+export const Tooltip = forwardRef(function Tooltip({ as, open, title, children, placement, focus = true, hover = true, enabled = true, popover = true, onChange = noop, followCursor = false, ...props }, outerRef) {
+    const [innerOpen, setInnerOpen] = useState(open ?? false);
+    const arrowRef = useRef(null);
+    const Component = as || "span";
+    const toggleBoth = (b) => {
+        setInnerOpen(b);
+        onChange?.(b);
+    };
+    const { refs, floatingStyles, context } = useFloating({
+        placement,
+        open: innerOpen,
+        whileElementsMounted: autoUpdate,
+        onOpenChange: open ? undefined : toggleBoth,
+        middleware: [shift(), offset(5), autoPlacement(), arrow({ padding: 5, element: arrowRef }), flip({ fallbackAxisSideDirection: "start" })],
+    });
+    const dismiss = useDismiss(context, { enabled });
+    const role = useRole(context, {
+        role: popover ? "dialog" : "tooltip",
+        enabled,
+    });
+    const focusController = useFocus(context, {
+        enabled: enabled ? focus : false,
+    });
+    const clickController = useClick(context, {
+        enabled: enabled ? popover : false,
+    });
+    const clientPoint = useClientPoint(context, {
+        enabled: !!enabled && !!followCursor,
+    });
+    const hoverController = useHover(context, {
+        move: true,
+        delay: { open: FLOATING_DELAY },
+        enabled: enabled ? hover : false,
+        handleClose: popover ? safePolygon() : null,
+    });
+    const { getReferenceProps, getFloatingProps } = useInteractions([
+        role,
+        dismiss,
+        clientPoint,
+        focus ? focusController : undefined,
+        hover ? hoverController : undefined,
+        popover ? clickController : undefined,
+    ]);
+    useEffect(() => {
+        if (open === undefined)
+            return setInnerOpen(false);
+        return setInnerOpen(open);
+    }, [open]);
+    return (<Fragment>
+                <Component {...getReferenceProps(props)} ref={mergeRefs(refs.setReference, outerRef)}>
+                    {title}
+                </Component>
+                {innerOpen && (<FloatingPortal>
+                        <Polymorph {...getFloatingProps()} style={floatingStyles} ref={refs.setFloating} className="isolate z-tooltip rounded-tooltip-radius border border-tooltip-border bg-tooltip-background p-tooltip-p text-tooltip-foreground shadow-shadow-floating">
+                            <FloatingArrow ref={arrowRef} context={context} strokeWidth={0.1} className="fill-tooltip-background stroke-tooltip-border"/>
+                            {children}
+                        </Polymorph>
+                    </FloatingPortal>)}
+            </Fragment>);
+});

package/dist/components/floating/wizard.d.ts

@@ -0,0 +1,26 @@
+import { Placement } from "@floating-ui/react";
+import React from "react";
+export type WizardStep = {
+    side?: Placement;
+    onNext?: () => void;
+    onEnter?: () => void;
+    onPrevious?: () => void;
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    element: string | Element | React.RefObject<Element | null>;
+};
+export type WizardProps = {
+    active?: boolean;
+    steps: WizardStep[];
+    onClose?: () => void;
+    onFinish?: () => void;
+    onChange?: (index: number) => void;
+    labels?: {
+        next?: string;
+        skip?: string;
+        finish?: string;
+        previous?: string;
+    };
+};
+export declare const Wizard: ({ steps, active, onClose, onFinish, onChange, labels: labelsProp }: WizardProps) => React.JSX.Element | null;
+//# sourceMappingURL=wizard.d.ts.map

package/dist/components/floating/wizard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"wizard.d.ts","sourceRoot":"","sources":["../../../src/components/floating/wizard.tsx"],"names":[],"mappings":"AACA,OAAO,EAOH,SAAS,EAKZ,MAAM,oBAAoB,CAAC;AAE5B,OAAO,KAAgF,MAAM,OAAO,CAAC;AAOrG,MAAM,MAAM,UAAU,GAAG;IACrB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,OAAO,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK,CAAC,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC,CAAC;CAC/D,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,UAAU,EAAE,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,MAAM,CAAC,EAAE;QAAE,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CACjF,CAAC;AAiBF,eAAO,MAAM,MAAM,GAAI,oEAAiG,WAAW,6BAoLlI,CAAC"}

package/dist/components/floating/wizard.jsx

@@ -0,0 +1,165 @@
+"use client";
+import { arrow, autoUpdate, flip, FloatingArrow, FloatingPortal, offset, shift, useFloating, useInteractions, useRole, } from "@floating-ui/react";
+import { AnimatePresence, motion } from "motion/react";
+import React, { Fragment, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { useResizeObserver } from "../../hooks/use-resize-observer";
+import { useTranslations } from "../../hooks/use-translations";
+import { useWindowSize } from "../../hooks/use-window-size";
+import { noop } from "../../lib/fns";
+import { Button } from "../core/button";
+const getRect = (element) => {
+    if (!element)
+        return { top: 0, left: 0, width: 0, height: 0, bottom: 0, right: 0 };
+    return element.getBoundingClientRect();
+};
+const resolveElement = (element) => {
+    if (typeof element === "string") {
+        return document.querySelector(element);
+    }
+    if ("current" in element) {
+        return element.current;
+    }
+    return element;
+};
+export const Wizard = ({ steps, active = false, onClose = noop, onFinish = noop, onChange = noop, labels: labelsProp }) => {
+    const translation = useTranslations();
+    const [index, setIndex] = useState(0);
+    const currentStep = steps[index];
+    const [element, setElement] = useState(null);
+    const [rect, setRect] = useState(getRect(null));
+    const [isOverlayReady, setIsOverlayReady] = useState(false);
+    const arrowRef = useRef(null);
+    const { width, height } = useWindowSize();
+    const labels = {
+        next: labelsProp?.next ?? translation.wizardNext,
+        previous: labelsProp?.previous ?? translation.wizardPrev,
+        finish: labelsProp?.finish ?? translation.wizardFinish,
+        skip: labelsProp?.skip ?? translation.wizardSkip,
+    };
+    const { refs, floatingStyles, context } = useFloating({
+        open: active && isOverlayReady,
+        placement: currentStep?.side || "bottom",
+        whileElementsMounted: autoUpdate,
+        middleware: [offset(10), flip(), shift(), arrow({ element: arrowRef })],
+    });
+    const { getFloatingProps } = useInteractions([useRole(context)]);
+    useEffect(() => {
+        if (active) {
+            setIndex(0);
+        }
+    }, [active]);
+    useEffect(() => {
+        setIsOverlayReady(false);
+    }, [index, active]);
+    useEffect(() => {
+        if (!active || !currentStep)
+            return;
+        const el = resolveElement(currentStep.element);
+        if (el) {
+            currentStep.onEnter?.();
+            setTimeout(() => {
+                setRect(el.getBoundingClientRect());
+                refs.setReference(el);
+                setElement(el);
+            }, 100);
+        }
+        else {
+            console.warn(`Driver: Element not found:`, currentStep.element);
+            setElement(null);
+            setRect({ top: 0, left: 0, width: 0, height: 0, bottom: 0, right: 0 });
+        }
+    }, [index, active, currentStep, refs]);
+    useLayoutEffect(() => {
+        if (!element)
+            return;
+        const update = () => setRect(element.getBoundingClientRect());
+        update();
+        window.addEventListener("scroll", update, { capture: true, passive: true });
+        window.addEventListener("resize", update, { capture: true, passive: true });
+        return () => {
+            window.removeEventListener("scroll", update, { capture: true });
+            window.removeEventListener("resize", update, { capture: true });
+        };
+    }, [element, width, height]);
+    useResizeObserver(element, (entry) => {
+        setRect(entry.target.getBoundingClientRect());
+    });
+    const handleNext = () => {
+        currentStep.onNext?.();
+        setTimeout(() => {
+            if (index < steps.length - 1) {
+                setIndex((i) => i + 1);
+                onChange(index + 1);
+            }
+            else {
+                onFinish();
+                onClose();
+            }
+        }, 0);
+    };
+    const handlePrevious = () => {
+        currentStep.onPrevious?.();
+        if (index > 0) {
+            setIndex((i) => i - 1);
+            onChange(index - 1);
+        }
+    };
+    if (!active)
+        return null;
+    const hasNext = index < steps.length - 1;
+    const hasPrevious = index > 0;
+    return (<FloatingPortal>
+            <div className="pointer-events-none fixed inset-0 z-wizard">
+                <svg className="absolute inset-0 h-full w-full fill-current text-floating-overlay/70" xmlns="http://www.w3.org/2000/svg">
+                    <defs>
+                        <mask id="driver-mask">
+                            <rect x="0" y="0" width="100%" height="100%" fill="white"/>
+                            <motion.rect rx="4" fill="black" initial={false} onAnimationComplete={() => setIsOverlayReady(true)} transition={{
+            type: "spring",
+            duration: 0.5,
+            ease: "easeInOut",
+        }} animate={{
+            x: rect.left - 5,
+            y: rect.top - 5,
+            width: rect.width + 10,
+            height: rect.height + 10,
+        }}/>
+                        </mask>
+                    </defs>
+                    <rect x="0" y="0" width="100%" height="100%" mask="url(#driver-mask)" className="pointer-events-auto"/>
+                </svg>
+                <AnimatePresence mode="wait">
+                    {currentStep && isOverlayReady && (<div {...getFloatingProps()} ref={refs.setFloating} style={element
+                ? floatingStyles
+                : {
+                    position: "fixed",
+                    top: "50%",
+                    left: "50%",
+                    transform: "translate(-50%, -50%)",
+                }} className="pointer-events-auto outline-none">
+                            <motion.div transition={{ duration: 0.2 }} exit={{ opacity: 0, scale: 0.9 }} animate={{ opacity: 1, scale: 1 }} initial={{ opacity: 0, scale: 0.9 }} className="flex w-wizard-w max-w-sm flex-col gap-wizard-gap rounded-wizard-radius border border-floating-border bg-floating-background p-wizard-p shadow-shadow-floating">
+                                {element && (<FloatingArrow ref={arrowRef} context={context} className="fill-floating-background stroke-floating-border"/>)}
+                                {currentStep.title && <h3>{currentStep.title}</h3>}
+                                {currentStep.description && <Fragment>{currentStep.description}</Fragment>}
+                                <div className="mt-wizard-footer-pt flex items-center justify-between border-t border-floating-border pt-wizard-footer-pt">
+                                    <Button theme="raw" size="small" onClick={onClose} className="text-wizard-label-text text-muted-foreground hover:text-foreground">
+                                        {labels.skip}
+                                    </Button>
+                                    <div className="flex gap-wizard-actions-gap">
+                                        {hasPrevious && (<Button size="small" theme="ghost-muted" onClick={handlePrevious}>
+                                                {labels.previous}
+                                            </Button>)}
+                                        <Button size="small" onClick={handleNext}>
+                                            {hasNext ? labels.next : labels.finish}
+                                        </Button>
+                                    </div>
+                                </div>
+                                <div className="absolute right-wizard-counter-right top-wizard-counter-top text-wizard-label-text text-muted-foreground">
+                                    {index + 1} / {steps.length}
+                                </div>
+                            </motion.div>
+                        </div>)}
+                </AnimatePresence>
+            </div>
+        </FloatingPortal>);
+};

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;IAC9C,MAAM,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC;CAClC,CAAC;AAEF,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,yGA8YxB,CAAC"}

package/dist/components/form/autocomplete.jsx

@@ -0,0 +1,290 @@
+"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: _context, ...props }, ref) {
+    return (<motion.ul {...props} ref={ref} className="max-h-dropdown-max-h w-full overscroll-contain rounded-dropdown-radius">
+            <AnimatePresence>{props.children}</AnimatePresence>
+        </motion.ul>);
+});
+const Item = forwardRef(function VirtualItem({ item: _item, context: _context, ...props }, ref) {
+    return <motion.li {...props} ref={ref} 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 [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]);
+    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);
+    };
+    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-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) {
+            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-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} 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-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 (<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-menu-item-p 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,qGAoCpB,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: _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-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}
+                <span 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>
+            </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"}