@g4rcez/components 0.0.38 → 0.0.39

package/dist/src/components/floating/menu.js

@@ -0,0 +1,126 @@
+"use client";
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { autoUpdate, flip, FloatingFocusManager, FloatingList, FloatingNode, FloatingPortal, FloatingTree, offset, safePolygon, shift, useClick, useDismiss, useFloating, useFloatingNodeId, useFloatingParentNodeId, useFloatingTree, useHover, useInteractions, useListItem, useListNavigation, useMergeRefs, useRole, useTypeahead, } from "@floating-ui/react";
+import { Slot } from "@radix-ui/react-slot";
+import { ChevronRightIcon } from "lucide-react";
+import React, { createContext, Fragment, useContext, useEffect, useRef, useState } from "react";
+import { FLOATING_DELAY, TYPEAHEAD_RESET_DELAY } from "../../constants";
+import { css } from "../../lib/dom";
+const menuItemClassName = (highlight = "") => css("w-full min-w-36 outline-none p-2.5  items-center flex justify-between text-left", "hover:bg-primary data-[open]:bg-primary focus:bg-primary aria-expanded:opacity-80", "first-of-type:rounded-t-lg last-of-type:rounded-b-lg", "disabled:opacity-40 disabled:cursor-not-allowed", highlight);
+const MenuContext = createContext({
+    activeIndex: null,
+    getItemProps: () => ({}),
+    isOpen: false,
+    setActiveIndex: () => { },
+    setHasFocusInside: () => { },
+});
+const MenuComponent = React.forwardRef((_a, forwardedRef) => {
+    var { children, FloatingComponent = "div", hover = true, isParent, floatingClassName = "", label } = _a, props = __rest(_a, ["children", "FloatingComponent", "hover", "isParent", "floatingClassName", "label"]);
+    const parentId = useFloatingParentNodeId();
+    const isNested = parentId !== null;
+    const [isOpen, setIsOpen] = useState(false);
+    const [hasFocusInside, setHasFocusInside] = useState(false);
+    const [activeIndex, setActiveIndex] = useState(null);
+    const elementsRef = useRef([]);
+    const labelsRef = useRef([]);
+    const parent = useContext(MenuContext);
+    const tree = useFloatingTree();
+    const nodeId = useFloatingNodeId();
+    const item = useListItem();
+    const { floatingStyles, refs, context } = useFloating({
+        nodeId,
+        open: isOpen,
+        transform: true,
+        onOpenChange: setIsOpen,
+        whileElementsMounted: autoUpdate,
+        placement: isNested ? "right" : "bottom-start",
+        strategy: "absolute",
+        middleware: [offset({ mainAxis: isNested ? 0 : 4, alignmentAxis: isNested ? -4 : 0 }), flip(), shift()],
+    });
+    const role = useRole(context, { role: "menu", enabled: true });
+    const dismiss = useDismiss(context, { bubbles: true });
+    const hoverModule = useHover(context, {
+        enabled: hover,
+        delay: { open: FLOATING_DELAY },
+        handleClose: safePolygon({ blockPointerEvents: true }),
+    });
+    const click = useClick(context, {
+        event: "mousedown",
+        toggle: !isNested,
+        ignoreMouse: isNested,
+        keyboardHandlers: true,
+    });
+    const listNavigation = useListNavigation(context, {
+        loop: true,
+        activeIndex,
+        virtual: true,
+        nested: isNested,
+        allowEscape: true,
+        listRef: elementsRef,
+        scrollItemIntoView: true,
+        onNavigate: setActiveIndex,
+    });
+    const typeahead = useTypeahead(context, {
+        activeIndex,
+        listRef: labelsRef,
+        resetMs: TYPEAHEAD_RESET_DELAY,
+        onMatch: isOpen ? setActiveIndex : undefined,
+    });
+    const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([hoverModule, click, role, dismiss, listNavigation, typeahead]);
+    useEffect(() => {
+        if (!tree)
+            return;
+        const handleTreeClick = () => setIsOpen(false);
+        const onSubMenuOpen = (event) => {
+            if (event.nodeId !== nodeId && event.parentId === parentId) {
+                setIsOpen(false);
+            }
+        };
+        tree.events.on("click", handleTreeClick);
+        tree.events.on("menuopen", onSubMenuOpen);
+        return () => {
+            tree.events.off("click", handleTreeClick);
+            tree.events.off("menuopen", onSubMenuOpen);
+        };
+    }, [tree, nodeId, parentId]);
+    useEffect(() => {
+        if (isOpen && tree)
+            tree.events.emit("menuopen", { parentId, nodeId });
+    }, [tree, isOpen, nodeId, parentId]);
+    const className = isParent ? props.className : css(menuItemClassName(props.className));
+    return (_jsxs(FloatingNode, { id: nodeId, children: [_jsx(Fragment, { children: props.asChild ? (_jsx(Slot, Object.assign({ children: label, ref: useMergeRefs([refs.setReference, item.ref, forwardedRef]), tabIndex: !isNested ? undefined : parent.activeIndex === item.index ? 0 : -1, "data-open": isOpen ? "" : undefined, "data-nested": isNested ? "" : undefined, role: isNested ? "menuitem" : undefined, "data-focus-inside": hasFocusInside ? "" : undefined, className: className }, getReferenceProps(parent.getItemProps(Object.assign(Object.assign({}, props), { onFocus(event) {
+                        var _a;
+                        (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, event);
+                        setHasFocusInside(false);
+                        parent.setHasFocusInside(true);
+                    } })))))) : (_jsxs("button", Object.assign({ type: "button", ref: useMergeRefs([refs.setReference, item.ref, forwardedRef]), tabIndex: !isNested ? undefined : parent.activeIndex === item.index ? 0 : -1, "data-open": isOpen ? "" : undefined, "data-nested": isNested ? "" : undefined, role: isNested ? "menuitem" : undefined, "data-focus-inside": hasFocusInside ? "" : undefined, className: className }, getReferenceProps(parent.getItemProps(Object.assign(Object.assign({}, props), { onFocus(event) {
+                        var _a;
+                        (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, event);
+                        setHasFocusInside(false);
+                        parent.setHasFocusInside(true);
+                    } }))), { children: [label, isNested && (_jsxs("span", { style: { marginLeft: 10, fontSize: 10 }, children: [_jsx("span", { className: "sr-only", children: "Next menu" }), _jsx(ChevronRightIcon, { size: 14 })] }))] }))) }), _jsx(MenuContext.Provider, { value: { activeIndex, setActiveIndex, getItemProps, setHasFocusInside, isOpen }, children: _jsx(FloatingList, { elementsRef: elementsRef, labelsRef: labelsRef, children: isOpen && (_jsx(FloatingPortal, { preserveTabOrder: true, children: _jsx(FloatingFocusManager, { context: context, modal: false, initialFocus: isNested ? -1 : 0, returnFocus: !isNested, children: _jsx(FloatingComponent, Object.assign({}, getFloatingProps(), { ref: refs.setFloating, style: Object.assign(Object.assign({}, props.style), floatingStyles), className: css("isolate z-tooltip flex flex-col items-start rounded-lg border border-floating-border bg-floating-background text-left shadow-xl outline-none", floatingClassName), children: children })) }) })) }) })] }));
+});
+export const MenuItem = React.forwardRef((_a, forwardedRef) => {
+    var { label, title, Right, disabled } = _a, props = __rest(_a, ["label", "title", "Right", "disabled"]);
+    const menu = useContext(MenuContext);
+    const item = useListItem({ label: disabled ? null : typeof label === "string" ? label : title });
+    const tree = useFloatingTree();
+    const isActive = item.index === menu.activeIndex;
+    return (_jsxs("button", Object.assign({}, props, { ref: useMergeRefs([item.ref, forwardedRef]), "data-active": isActive, type: "button", role: "menuitem", disabled: disabled, tabIndex: isActive ? 0 : -1, className: menuItemClassName(props.className) }, menu.getItemProps({
+        onClick(event) {
+            var _a;
+            (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, event);
+            tree === null || tree === void 0 ? void 0 : tree.events.emit("click");
+        },
+        onFocus(event) {
+            var _a;
+            (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, event);
+            menu.setHasFocusInside(true);
+        },
+    }), { children: [label, Right ? _jsx(Right, { size: 16 }) : null] })));
+});
+export const Menu = React.forwardRef((props, ref) => {
+    const parentId = useFloatingParentNodeId();
+    return parentId !== null ? (_jsx(MenuComponent, Object.assign({}, props, { isParent: false, ref: ref }))) : (_jsx(FloatingTree, { children: _jsx(MenuComponent, Object.assign({}, props, { isParent: true, ref: ref })) }));
+});

package/dist/src/components/floating/modal.d.ts

@@ -0,0 +1,19 @@
+import React, { PropsWithChildren } from "react";
+import { Label } from "../../types";
+export type ModalProps = {
+    layoutId?: string;
+    title?: Label;
+    open: boolean;
+    footer?: Label;
+    resizer?: boolean;
+    asChild?: boolean;
+    closable?: boolean;
+    overlayClickClose?: boolean;
+    position?: "left" | "right";
+    trigger?: Label | React.FC<any>;
+    forceType?: boolean;
+    type?: "dialog" | "drawer" | "sheet";
+    onChange: (nextState: boolean) => void;
+};
+export declare const Modal: ({ type: _type, resizer, overlayClickClose, forceType, closable, ...props }: PropsWithChildren<ModalProps>) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=modal.d.ts.map

package/dist/src/components/floating/modal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../../src/components/floating/modal.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,EAAY,iBAAiB,EAAS,MAAM,OAAO,CAAC;AAGlE,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AA2DpC,MAAM,MAAM,UAAU,GAAG;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,IAAI,EAAE,OAAO,CAAC;IACd,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B,OAAO,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;IAChC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC,QAAQ,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C,CAAC;AAoEF,eAAO,MAAM,KAAK,+EAOf,iBAAiB,CAAC,UAAU,CAAC,4CAsG/B,CAAC"}

package/dist/src/components/floating/modal.js

@@ -0,0 +1,102 @@
+"use client";
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FloatingFocusManager, FloatingOverlay, FloatingPortal, useClick, useDismiss, useFloating, useInteractions, useRole, } from "@floating-ui/react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { AnimatePresence, motion, useMotionValue } from "framer-motion";
+import { XIcon } from "lucide-react";
+import { Fragment, useId } from "react";
+import { useMediaQuery } from "../../hooks/use-media-query";
+import { css } from "../../lib/dom";
+const animationDuration = "600ms";
+const drawerLeft = {
+    initial: { translateX: ["-30%", "0%"], opacity: 0.8, animationDuration },
+    enter: { translateX: ["-30%", "0%"], opacity: 1, animationDuration },
+    exit: { translateX: ["0%", "-30%"], opacity: 0, animationDuration },
+};
+const drawerRight = {
+    initial: { translateX: ["30%", "0%"], opacity: 0.8 },
+    enter: { translateX: "0%", opacity: 1, animationDuration },
+    exit: { translateX: ["0%", "30%"], opacity: 0, animationDuration },
+};
+const animations = {
+    drawer: (type) => (type === "left" ? drawerLeft : drawerRight),
+    sheet: {
+        initial: { opacity: 0.5, translateY: "25%", animationDuration, originY: "bottom" },
+        enter: { opacity: 1, translateY: "0%", animationDuration, originY: "bottom" },
+        exit: { opacity: 0.1, translateY: "50%", animationDuration, originY: "bottom" },
+    },
+    dialog: {
+        initial: { opacity: 0, scale: 0.95, animationDuration },
+        enter: { opacity: 1, scale: [1.05, 1], animationDuration },
+        exit: { opacity: 0, scale: 0.97, animationDuration },
+    },
+};
+const variants = cva("isolate z-floating border border-card-border ring-0 outline-0 appearance-none flex flex-col gap-4 flex-nowrap min-w-xs bg-floating-background", {
+    variants: {
+        type: {
+            drawer: "max-h-screen max-w-[90%] absolute w-fit h-screen min-h-0",
+            dialog: "max-h-[calc(100lvh-10%)] relative container h-min rounded-lg py-4",
+            sheet: "w-screen absolute bottom-0 h-[85vh] max-h-[85vh] max-h-[85svh] pt-6 pb-4 rounded-t-lg",
+        },
+        position: {
+            none: "",
+            right: "py-4 absolute right-0 top-0 rounded-l-lg",
+            left: "py-4 absolute left-0 top-0 rounded-r-lg",
+        },
+    },
+    defaultVariants: { position: "right", type: "dialog" },
+});
+const dragConstraints = { top: 0, left: 0, right: 0, bottom: -1 };
+const calculateClose = (n) => n * 0.62;
+const Draggable = (props) => {
+    const onDrag = (_, info) => {
+        if (props.parent.current) {
+            if (!props.sheet) {
+                const div = props.parent.current;
+                const v = props.value.get() || div.getBoundingClientRect().width;
+                const delta = props.position === "right" ? -info.delta.x : info.delta.x;
+                return props.value.set(Math.abs(v + delta));
+            }
+            const div = props.parent.current;
+            const rect = div.getBoundingClientRect();
+            const v = props.value.get() || rect.height;
+            const result = Math.abs(v - info.delta.y);
+            const screenHeightToClose = calculateClose(window.outerHeight);
+            if (result < screenHeightToClose) {
+                props.onChange(false);
+                return setTimeout(() => props.value.set(window.outerHeight), 350);
+            }
+            return props.value.set(result);
+        }
+    };
+    return (_jsx(motion.div, { draggable: true, dragMomentum: true, dragListener: true, dragPropagation: true, onDrag: onDrag, animate: false, initial: false, dragElastic: 0, dragDirectionLock: true, dragSnapToOrigin: true, drag: props.sheet ? "y" : "x", dragConstraints: dragConstraints, whileDrag: { cursor: "grabbing" }, className: css("absolute rounded-lg", props.sheet ? "cursor-row-resize" : "cursor-col-resize bg-floating-border", props.sheet
+            ? "top-1 flex h-3 w-full justify-center py-2"
+            : props.position === "left"
+                ? "right-5 top-1/2 h-10 w-2"
+                : "left-2 top-1/2 h-10 w-2"), children: props.sheet ? _jsx("div", { className: "h-2 w-1/4 rounded-lg bg-floating-border" }) : null }));
+};
+const positions = { drawer: "right", sheet: "none", dialog: "none" };
+export const Modal = (_a) => {
+    var { type: _type = "dialog", resizer = true, overlayClickClose = false, forceType = false, closable = true } = _a, props = __rest(_a, ["type", "resizer", "overlayClickClose", "forceType", "closable"]);
+    const headingId = useId();
+    const descriptionId = useId();
+    const isDesktop = useMediaQuery("(min-width: 64rem)");
+    const useResizer = _type !== "dialog";
+    const position = isDesktop ? (_type === "drawer" ? props.position : positions[_type]) : forceType ? positions[_type] : positions.sheet;
+    const func = isDesktop ? animations[_type] : forceType ? animations[_type] : animations.sheet;
+    const animation = typeof func === "function" ? func(position) : func;
+    const type = isDesktop ? _type : forceType ? _type : "sheet";
+    const { refs, context } = useFloating({ open: props.open, onOpenChange: props.onChange });
+    const click = useClick(context);
+    const role = useRole(context);
+    const dismiss = useDismiss(context, { escapeKey: true, referencePress: true, outsidePress: overlayClickClose });
+    const { getReferenceProps, getFloatingProps } = useInteractions([click, role, dismiss]);
+    const Trigger = props.trigger;
+    const value = useMotionValue(undefined);
+    const onClose = () => props.onChange(false);
+    return (_jsxs(Fragment, { children: [props.trigger ? (_jsx(Fragment, { children: props.asChild ? (_jsx(Slot, Object.assign({ ref: refs.setReference }, getReferenceProps({
+                    layoutId: props.layoutId,
+                }), { children: Trigger }))) : (_jsx(motion.button, Object.assign({ ref: refs.setReference }, getReferenceProps(), { layoutId: props.layoutId, type: "button", children: Trigger }))) })) : null, _jsx(FloatingPortal, { children: _jsx(AnimatePresence, { presenceAffectsLayout: true, children: props.open ? (_jsx(FloatingOverlay, { lockScroll: true, className: `inset-0 isolate z-overlay h-[100dvh] !overflow-clip bg-floating-overlay/70 ${type === "drawer" ? "" : "grid items-end justify-center lg:items-center"}`, children: _jsx(FloatingFocusManager, { visuallyHiddenDismiss: true, modal: true, closeOnFocusOut: true, context: context, children: _jsxs(motion.div, Object.assign({ animate: "enter", "aria-describedby": descriptionId, "aria-labelledby": headingId, className: variants({ position, type }), exit: "exit", layoutId: props.layoutId, initial: "initial", ref: refs.setFloating, style: type === "drawer" ? { width: value } : { height: value }, variants: animation }, getFloatingProps(), { children: [props.title ? (_jsx("header", { className: "relative w-full", children: props.title ? (_jsx("h2", { className: "border-b border-floating-border px-8 pb-2 text-3xl font-medium leading-relaxed", children: props.title })) : null })) : null, _jsx("section", { className: "flex-1 overflow-y-auto px-8 py-1", children: props.children }), props.footer ? (_jsx("footer", { className: "w-full border-t border-floating-border px-8 pt-4", children: props.footer })) : null, closable ? (_jsx("nav", { className: "absolute right-4 top-1 z-floating", children: _jsx("button", { type: "button", onClick: onClose, className: "p-1 opacity-70 transition-colors hover:text-danger hover:opacity-100 focus:text-danger", children: _jsx(XIcon, {}) }) })) : null, useResizer && resizer ? (_jsx(Draggable, { onChange: props.onChange, parent: refs.floating, position: position, sheet: type === "sheet", value: value })) : null] })) }) })) : null }) })] }));
+};

package/dist/src/components/floating/toolbar.d.ts

@@ -0,0 +1,6 @@
+import { PropsWithChildren } from "react";
+export type ToolbarProps = {
+    root?: HTMLElement;
+};
+export declare const Toolbar: (props: PropsWithChildren<ToolbarProps>) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=toolbar.d.ts.map

package/dist/src/components/floating/toolbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toolbar.d.ts","sourceRoot":"","sources":["../../../../src/components/floating/toolbar.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE1C,MAAM,MAAM,YAAY,GAAG;IACvB,IAAI,CAAC,EAAE,WAAW,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,OAAO,UAAW,iBAAiB,CAAC,YAAY,CAAC,4CAI7D,CAAC"}

package/dist/src/components/floating/toolbar.js

@@ -0,0 +1,4 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { motion } from "framer-motion";
+export const Toolbar = (props) => (_jsx(motion.div, { className: "sticky bottom-4 flex items-center justify-center rounded-lg border border-card-border bg-background p-4", children: props.children }));

package/dist/src/components/floating/tooltip.d.ts

@@ -0,0 +1,12 @@
+import { type Placement } from "@floating-ui/react";
+import React from "react";
+import { PolymorphicProps } from "../../components/core/polymorph";
+import { ComponentLike, Label, Override } from "../../types";
+export type TooltipProps<T extends ComponentLike = "span"> = Override<PolymorphicProps<React.ComponentProps<T>, T>, {
+    title: Label;
+    enabled?: boolean;
+    placement?: Placement;
+    followCursor?: boolean;
+}>;
+export declare const Tooltip: <T extends ComponentLike = "span">({ children, followCursor, placement, enabled, as, title, ...props }: TooltipProps<T>) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=tooltip.d.ts.map

package/dist/src/components/floating/tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../../src/components/floating/tooltip.tsx"],"names":[],"mappings":"AACA,OAAO,EAOH,KAAK,SAAS,EASjB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,KAAqC,MAAM,OAAO,CAAC;AAC1D,OAAO,EAAa,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AAE9E,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAE7D,MAAM,MAAM,YAAY,CAAC,CAAC,SAAS,aAAa,GAAG,MAAM,IAAI,QAAQ,CACjE,gBAAgB,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,EAC5C;IACI,KAAK,EAAE,KAAK,CAAC;IACb,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;CAC1B,CACJ,CAAC;AAEF,eAAO,MAAM,OAAO,GAAI,CAAC,SAAS,aAAa,gFAAwF,YAAY,CAAC,CAAC,CAAC,4CAuCrJ,CAAC"}

package/dist/src/components/floating/tooltip.js

@@ -0,0 +1,28 @@
+"use client";
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { arrow, autoUpdate, flip, FloatingArrow, FloatingPortal, offset, shift, useClientPoint, useDismiss, useFloating, useFocus, useHover, useInteractions, useRole, } from "@floating-ui/react";
+import { Fragment, useRef, useState } from "react";
+import { Polymorph } from "../../components/core/polymorph";
+import { FLOATING_DELAY } from "../../constants";
+export const Tooltip = (_a) => {
+    var { children, followCursor = false, placement, enabled, as, title } = _a, props = __rest(_a, ["children", "followCursor", "placement", "enabled", "as", "title"]);
+    const [open, setOpen] = useState(false);
+    const arrowRef = useRef(null);
+    const Component = as || "span";
+    const { refs, floatingStyles, context } = useFloating({
+        open,
+        placement,
+        transform: true,
+        onOpenChange: setOpen,
+        whileElementsMounted: autoUpdate,
+        middleware: [offset(5), flip({ fallbackAxisSideDirection: "start" }), shift(), arrow({ element: arrowRef, padding: 5 })],
+    });
+    const hover = useHover(context, { move: true, enabled, delay: { open: FLOATING_DELAY } });
+    const focus = useFocus(context, { enabled });
+    const dismiss = useDismiss(context, { enabled });
+    const role = useRole(context, { role: "tooltip", enabled });
+    const clientPoint = useClientPoint(context, { enabled: !!enabled && !!followCursor });
+    const { getReferenceProps, getFloatingProps } = useInteractions([hover, focus, dismiss, role, clientPoint]);
+    return (_jsxs(Fragment, { children: [_jsx(Component, Object.assign({ ref: refs.setReference }, getReferenceProps(props), { children: title })), _jsx(FloatingPortal, { children: open && (_jsxs(Polymorph, Object.assign({}, getFloatingProps(), { ref: refs.setFloating, style: floatingStyles, className: "z-tooltip rounded-lg border border-tooltip-border bg-tooltip-background p-3 text-tooltip-foreground shadow-lg", children: [_jsx(FloatingArrow, { ref: arrowRef, context: context, strokeWidth: 0.1, className: "fill-tooltip-background stroke-tooltip-border" }), children] }))) })] }));
+};

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

@@ -0,0 +1,17 @@
+import React from "react";
+import { InputFieldProps } from "./input-field";
+import { type OptionProps } from "./select";
+type ItemProps = Omit<React.HTMLProps<HTMLLIElement>, "children"> & {
+    selected: boolean;
+    active: boolean;
+    option: OptionProps;
+};
+export declare const Option: React.ForwardRefExoticComponent<Omit<ItemProps, "ref"> & React.RefAttributes<HTMLLIElement>>;
+export type AutocompleteProps = Omit<InputFieldProps<"input">, "value"> & {
+    value?: string;
+    options: OptionProps[];
+    dynamicOption?: boolean;
+};
+export declare const Autocomplete: React.ForwardRefExoticComponent<Omit<AutocompleteProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export {};
+//# sourceMappingURL=autocomplete.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"autocomplete.d.ts","sourceRoot":"","sources":["../../../../src/components/form/autocomplete.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAIvE,OAAO,EAAc,eAAe,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AAE5C,KAAK,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,aAAa,CAAC,EAAE,UAAU,CAAC,GAAG;IAChE,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,OAAO,CAAC;IAChB,MAAM,EAAE,WAAW,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,MAAM,8FAmBjB,CAAC;AAEH,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC,GAAG;IACtE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,aAAa,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC;AAaF,eAAO,MAAM,YAAY,yGAmPxB,CAAC"}

package/dist/src/components/form/autocomplete.js

@@ -0,0 +1,152 @@
+"use client";
+import { __rest } from "tslib";
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { autoUpdate, FloatingFocusManager, FloatingPortal, offset, size, useDismiss, useFloating, useInteractions, useListNavigation, useRole, useTransitionStyles, } from "@floating-ui/react";
+import Fuzzy from "fuzzy-search";
+import { CheckIcon, ChevronDown } from "lucide-react";
+import { forwardRef, useEffect, useRef, useState } from "react";
+import { useTranslations } from "../../hooks/use-translate-context";
+import { css, dispatchInput, initializeInputDataset } from "../../lib/dom";
+import { safeRegex } from "../../lib/fns";
+import { InputField } from "./input-field";
+export const Option = forwardRef((_a, ref) => {
+    var _b;
+    var { selected, active, onClick, option } = _a, rest = __rest(_a, ["selected", "active", "onClick", "option"]);
+    return (_jsx("li", Object.assign({}, rest, { ref: ref, role: "option", "aria-selected": active, className: "w-full border-b border-tooltip-border last:border-transparent", children: _jsxs("button", { type: "button", "data-value": option.value, onClick: onClick, "aria-selected": active, "aria-checked": active, "aria-current": active, className: `flex w-full cursor-pointer justify-between p-2 text-left ${active ? "bg-primary text-primary-foreground" : ""} ${selected ? "bg-primary/70 text-primary-foreground" : ""}`, children: [(_b = option.label) !== null && _b !== void 0 ? _b : option.value, active ? (_jsx("span", { children: _jsx(CheckIcon, { "aria-hidden": true, className: "text-current", absoluteStrokeWidth: true, strokeWidth: 2, size: 22 }) })) : null] }) })));
+});
+const transitionStyles = {
+    duration: 300,
+    initial: { transform: "scaleY(0)", opacity: 0.4 },
+    open: { transform: "scaleY(1)", opacity: 1 },
+    close: { transform: "scaleY(0)", opacity: 0 },
+};
+const fuzzyOptions = { caseSensitive: false, sort: false };
+const emptyRef = [];
+export const Autocomplete = forwardRef((_a, externalRef) => {
+    var _b, _c, _d, _e;
+    var { options, dynamicOption = false, feedback = null, labelClassName, interactive, rightLabel, optionalText, container, hideLeft = false, right, left, error, required = false } = _a, props = __rest(_a, ["options", "dynamicOption", "feedback", "labelClassName", "interactive", "rightLabel", "optionalText", "container", "hideLeft", "right", "left", "error", "required"]);
+    const translation = useTranslations();
+    const ref = useRef(null);
+    const [open, setOpen] = useState(false);
+    const [shadow, setShadow] = useState("");
+    const [value, setValue] = useState((_c = (_b = props.value) !== null && _b !== void 0 ? _b : props.defaultValue) !== null && _c !== void 0 ? _c : "");
+    const [label, setLabel] = useState((_e = (_d = props.value) !== null && _d !== void 0 ? _d : props.defaultValue) !== null && _e !== void 0 ? _e : "");
+    const [index, setIndex] = useState(null);
+    const listRef = useRef(emptyRef);
+    const innerOptions = dynamicOption && shadow !== "" ? [{ value: shadow, label: shadow, "data-dynamic": "true" }, ...options] : options;
+    const list = new Fuzzy(innerOptions, ["value", "label"], fuzzyOptions).search(shadow);
+    const pattern = dynamicOption
+        ? undefined
+        : `^(${options.map((x) => `${safeRegex(x.value)}${x.label ? "|" + safeRegex(x.label) : ""}`).join("|")})$`;
+    useEffect(() => {
+        const input = refs.reference.current;
+        if (!input)
+            return;
+        return initializeInputDataset(input);
+    }, []);
+    useEffect(() => {
+        var _a;
+        if (props.value) {
+            const item = options.find((x) => x.value === props.value);
+            setValue((_a = item === null || item === void 0 ? void 0 : item.label) !== null && _a !== void 0 ? _a : props.value);
+        }
+    }, [props.value]);
+    const { x, y, strategy, refs, context } = useFloating({
+        open,
+        transform: true,
+        onOpenChange: setOpen,
+        whileElementsMounted: autoUpdate,
+        middleware: [
+            offset(4),
+            size({
+                padding: 10,
+                apply(a) {
+                    Object.assign(a.elements.floating.style, {
+                        width: `${a.rects.reference.width}px`,
+                        maxHeight: `${Math.min(480, a.availableHeight)}px`,
+                    });
+                },
+            }),
+        ],
+    });
+    const transitions = useTransitionStyles(context, transitionStyles);
+    const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([
+        useRole(context, { role: "listbox" }),
+        useDismiss(context),
+        useListNavigation(context, {
+            activeIndex: index,
+            allowEscape: true,
+            cols: 0,
+            focusItemOnOpen: "auto",
+            listRef,
+            loop: true,
+            openOnArrowKeyDown: true,
+            scrollItemIntoView: true,
+            selectedIndex: index,
+            virtual: true,
+            onNavigate: (n) => setIndex((prev) => n !== null && n !== void 0 ? n : prev),
+        }),
+    ]);
+    const onSelect = (opt, i) => {
+        var _a, _b, _c;
+        setValue(opt.value);
+        (_a = refs.reference.current) === null || _a === void 0 ? void 0 : _a.setAttribute("data-value", opt.value);
+        setLabel((_b = opt.label) !== null && _b !== void 0 ? _b : "");
+        const fakeEvent = dispatchInput(ref.current, opt.value);
+        if (fakeEvent)
+            (_c = props.onChange) === null || _c === void 0 ? void 0 : _c.call(props, fakeEvent);
+        setOpen(false);
+        setShadow("");
+        setIndex(i);
+    };
+    const onChange = (event) => {
+        var _a;
+        const value = event.target.value;
+        setShadow(value);
+        if (!open && value === "")
+            return setOpen(true);
+        event.target.name = props.name || "";
+        return value ? setOpen(true) : (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, event);
+    };
+    const onFocus = () => {
+        setOpen(true);
+        setShadow("");
+    };
+    const onClose = () => {
+        var _a;
+        setShadow("");
+        setValue("");
+        (_a = refs.reference.current) === null || _a === void 0 ? void 0 : _a.setAttribute("data-value", "");
+        setLabel("");
+        dispatchInput(refs.reference.current, "");
+        setOpen(false);
+    };
+    const id = props.id || props.name;
+    return (_jsxs(InputField, Object.assign({}, props, { container: css("group inline-block w-full", container), error: error, feedback: feedback, form: props.form, hideLeft: hideLeft, id: props.name || props.id, interactive: interactive, labelClassName: labelClassName, left: left, name: props.name, optionalText: optionalText, placeholder: props.placeholder, required: required, rightLabel: rightLabel, title: props.title, right: _jsxs("span", { className: "flex items-center gap-0.5", children: [_jsxs("button", { type: "button", className: "transition-colors link:text-primary", children: [_jsx(ChevronDown, { size: 20 }), _jsx("span", { className: "sr-only", children: translation.inputCaretDown })] }), value ? (_jsx("button", { type: "button", onClick: onClose, className: "transition-colors link:text-danger", children: _jsx("svg", { width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("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" }) }) })) : null] }), children: [_jsx("input", Object.assign({}, getReferenceProps(Object.assign(Object.assign({}, props), { onChange,
+                onFocus,
+                pattern, ref: refs.setReference, name: `${id}-shadow`, id: `${id}-shadow`, onClick: (e) => e.currentTarget.focus(), onKeyDown(event) {
+                    if (event.key === "Escape") {
+                        event.currentTarget.blur();
+                        return setOpen(false);
+                    }
+                    if (event.key === "Enter") {
+                        if (index !== null && list[index]) {
+                            event.preventDefault();
+                            return onSelect(list[index], index);
+                        }
+                        if (list.length === 1) {
+                            event.preventDefault();
+                            return onSelect(list[0], 0);
+                        }
+                    }
+                } })), { "data-value": value, "data-error": !!error, "data-name": id, "data-target": id, required: required, value: open ? shadow : label || value, "aria-autocomplete": "list", autoComplete: "off", className: css("input placeholder-input-mask group h-10 w-full flex-1 rounded-md bg-transparent px-2 py-1 text-base text-foreground outline-none transition-colors group-error:text-danger group-error:placeholder-input-mask-error", !!right || shadow ? "pe-12" : "", !!left ? "ps-8" : "", props.className) })), _jsx("input", { id: id, name: id, type: "hidden", "data-origin": id, ref: externalRef, required: required, defaultValue: props.value || value || undefined }), _jsx(FloatingPortal, { preserveTabOrder: true, children: open ? (_jsx(FloatingFocusManager, { guards: true, returnFocus: false, context: context, initialFocus: -1, visuallyHiddenDismiss: true, children: _jsx("ul", Object.assign({}, getFloatingProps({
+                        ref: refs.setFloating,
+                        style: Object.assign({ position: strategy, left: x !== null && x !== void 0 ? x : 0, top: y !== null && y !== void 0 ? y : 0 }, transitions.styles),
+                    }), { "data-floating": "true", className: "z-floating m-0 origin-[top_center] list-none overflow-auto overflow-y-auto rounded-b-lg rounded-t-lg border border-floating-border bg-floating-background p-0 text-foreground shadow-floating", children: list.map((option, i) => (_createElement(Option, Object.assign({}, getItemProps({
+                            onClick: () => onSelect(option, i),
+                            ref: (node) => void (listRef.current[i] = node),
+                            selected: index === i,
+                            active: value === option.value,
+                        }), { key: `${option.value}-option`, option: option, selected: index === i, active: value === option.value })))) })) })) : null })] })));
+});

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

@@ -0,0 +1,11 @@
+import React from "react";
+import { Override } from "../../types";
+export type CheckboxProps = Override<React.PropsWithChildren<React.ComponentProps<"input">>, {
+    error?: string;
+    asTask?: 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/src/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,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,qGA4BpB,CAAC"}

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

@@ -0,0 +1,8 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { css } from "../../lib/dom";
+export const Checkbox = forwardRef((_a, ref) => {
+    var { children, asTask = false, labelClassName, error, className = "", size, container } = _a, props = __rest(_a, ["children", "asTask", "labelClassName", "error", "className", "size", "container"]);
+    return (_jsxs("label", { "data-task": asTask, "data-disabled": props.disabled, "aria-disabled": props.disabled, 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), children: [_jsx("input", Object.assign({}, props, { ref: ref, 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, _jsx("span", { "data-name": "checkbox-label", className: css("min-w-full flex-1 text-xs text-danger empty:mt-0 empty:hidden", labelClassName), children: error })] }));
+});

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

@@ -0,0 +1,61 @@
+import React from "react";
+import { Override } from "../../types";
+import { CalendarProps } from "../display/calendar";
+import { InputProps } from "./input";
+export type DatePickerProps = Override<InputProps, CalendarProps<"date">>;
+export declare const DatePicker: React.ForwardRefExoticComponent<(Omit<Omit<InputProps, "onChange" | "date" | "locale" | "markToday" | "rangeMode" | "changeOnlyOnClick" | "onChangeMonth" | "onChangeYear" | "RenderOnDay" | "disabledDate" | "styles"> & Partial<{
+    locale: import("the-mask-input").Locales;
+    markToday: boolean;
+    rangeMode: boolean;
+    changeOnlyOnClick: boolean;
+    onChangeMonth: (d: Date) => void;
+    onChangeYear: (d: Date) => void;
+    RenderOnDay: React.FC<{
+        date: Date;
+    }>;
+    disabledDate: (date: Date) => boolean;
+    styles: Partial<{
+        day: string;
+        week: string;
+        weekDay: string;
+        dayFrame: string;
+        calendar: string;
+    }>;
+} & {
+    date: Date;
+    onChange: (d: Date | undefined) => void;
+} & {
+    date: Date;
+    onChange: (d: Date | undefined) => void;
+}>, "ref"> | Omit<Omit<InputProps, "onChange" | "date" | "locale" | "markToday" | "rangeMode" | "changeOnlyOnClick" | "onChangeMonth" | "onChangeYear" | "RenderOnDay" | "disabledDate" | "styles"> & Partial<{
+    locale: import("the-mask-input").Locales;
+    markToday: boolean;
+    rangeMode: boolean;
+    changeOnlyOnClick: boolean;
+    onChangeMonth: (d: Date) => void;
+    onChangeYear: (d: Date) => void;
+    RenderOnDay: React.FC<{
+        date: Date;
+    }>;
+    disabledDate: (date: Date) => boolean;
+    styles: Partial<{
+        day: string;
+        week: string;
+        weekDay: string;
+        dayFrame: string;
+        calendar: string;
+    }>;
+} & {
+    date: Date;
+    onChange: (d: Date | undefined) => void;
+} & {
+    range: {
+        from?: Date;
+        to?: Date;
+    };
+    onChange: (d: {
+        from?: Date;
+        to?: Date;
+    } | undefined) => void;
+}>, "ref">) & React.RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=date-picker.d.ts.map

package/dist/src/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":"AAEA,OAAO,KAAyD,MAAM,OAAO,CAAC;AAG9E,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,QAAQ,CAAC,UAAU,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC;AAmC1E,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oDAyGtB,CAAC"}