@g4rcez/components 2.0.1 → 2.0.3

package/dist/components/core/button.d.ts

@@ -1,6 +1,10 @@
 import React, { PropsWithChildren } from "react";
 import { CvaVariants, type Label } from "../../types";
 import { PolymorphicProps } from "./polymorph";
+/**
+ * Button variant definitions for styling
+ * @internal
+ */
 declare const variants: {
     size: {
         icon: string;
@@ -37,10 +41,42 @@ declare const variants: {
     };
 };
 type Variants = CvaVariants<typeof variants>;
+/**
+ * Props for the Button component
+ * @template T - The HTML element type to render as (defaults to "button")
+ */
 export type ButtonProps<T extends React.ElementType = "button"> = PropsWithChildren<PolymorphicProps<Variants & Partial<{
+    /** Icon to display in the button */
     icon: Label;
+    /** Whether the button is in a loading state */
     loading: boolean;
 }>, T>>;
+/**
+ * A versatile button component with multiple variants, sizes, and states.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <Button>Click me</Button>
+ *
+ * // With variants
+ * <Button theme="primary" size="big">Primary Button</Button>
+ *
+ * // Loading state
+ * <Button loading>Saving...</Button>
+ *
+ * // With icon
+ * <Button icon={<Icon name="plus" />}>Add Item</Button>
+ *
+ * // As different element
+ * <Button as="a" href="/link">Link Button</Button>
+ * ```
+ *
+ * @template T - The HTML element type to render as
+ * @param props - Button props including theme, size, loading state, etc.
+ * @param ref - Forwarded ref to the button element
+ * @returns A styled button component
+ */
 export declare const Button: <T extends React.ElementType = "button">(props: ButtonProps<T>) => React.ReactNode;
 export {};
 //# sourceMappingURL=button.d.ts.map

package/dist/components/core/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/core/button.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAc,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE7D,OAAO,EAAE,WAAW,EAAE,KAAK,KAAK,EAAE,MAAM,aAAa,CAAC;AACtD,OAAO,EAAa,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE1D,QAAA,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmCb,CAAC;AAUF,KAAK,QAAQ,GAAG,WAAW,CAAC,OAAO,QAAQ,CAAC,CAAC;AAE7C,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,IAAI,iBAAiB,CAC/E,gBAAgB,CAAC,QAAQ,GAAG,OAAO,CAAC;IAAE,IAAI,EAAE,KAAK,CAAC;IAAC,OAAO,EAAE,OAAO,CAAA;CAAE,CAAC,EAAE,CAAC,CAAC,CAC7E,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,EAAE,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,SAwB5F,CAAC"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/core/button.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAc,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE7D,OAAO,EAAE,WAAW,EAAE,KAAK,KAAK,EAAE,MAAM,aAAa,CAAC;AACtD,OAAO,EAAa,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE1D;;;GAGG;AACH,QAAA,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmCb,CAAC;AAeF,KAAK,QAAQ,GAAG,WAAW,CAAC,OAAO,QAAQ,CAAC,CAAC;AAE7C;;;GAGG;AACH,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,IAAI,iBAAiB,CAC/E,gBAAgB,CAAC,QAAQ,GAAG,OAAO,CAAC;IAChC,oCAAoC;IACpC,IAAI,EAAE,KAAK,CAAC;IACZ,+CAA+C;IAC/C,OAAO,EAAE,OAAO,CAAA;CACnB,CAAC,EAAE,CAAC,CAAC,CACT,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,eAAO,MAAM,MAAM,EAAE,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,EAAE,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,SAwB5F,CAAC"}

package/dist/components/core/button.js

@@ -3,6 +3,10 @@ import { cva } from "class-variance-authority";
 import { forwardRef } from "react";
 import { css } from "../../lib/dom";
 import { Polymorph } from "./polymorph";
+/**
+ * Button variant definitions for styling
+ * @internal
+ */
 const variants = {
     size: {
         icon: "p-1",
@@ -38,10 +42,41 @@ const variants = {
         "ghost-secondary": "bg-transparent hover:bg-secondary/20 border border-secondary text-secondary",
     },
 };
+/**
+ * Class variance authority configuration for button styling
+ * Handles all visual states and variants of the button component
+ * @internal
+ */
 const buttonVariants = cva("relative overflow-hidden inline-flex duration-500 enabled:hover:bg-opacity-70 enabled:focus:bg-opacity-70 data-[loading=true]:opacity-30 data-[loading=true]:animate-pulse gap-1.5 items-center justify-center align-middle cursor-pointer whitespace-nowrap font-medium transition-colors ease-in disabled:cursor-not-allowed disabled:bg-opacity-40 disabled:text-opacity-80 focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-ring", {
     variants,
     defaultVariants: { theme: "main", size: "default", rounded: "default" },
 });
+/**
+ * A versatile button component with multiple variants, sizes, and states.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <Button>Click me</Button>
+ *
+ * // With variants
+ * <Button theme="primary" size="big">Primary Button</Button>
+ *
+ * // Loading state
+ * <Button loading>Saving...</Button>
+ *
+ * // With icon
+ * <Button icon={<Icon name="plus" />}>Add Item</Button>
+ *
+ * // As different element
+ * <Button as="a" href="/link">Link Button</Button>
+ * ```
+ *
+ * @template T - The HTML element type to render as
+ * @param props - Button props including theme, size, loading state, etc.
+ * @param ref - Forwarded ref to the button element
+ * @returns A styled button component
+ */
 export const Button = forwardRef(function Button({ className, icon, loading, theme, type = "button", size, rounded, ...props }, ref) {
     const disabled = loading || props.disabled;
     return (_jsxs(Polymorph, { ...props, ref: ref, type: type, "data-theme": theme, disabled: disabled, "data-loading": loading, "data-component": "button", "aria-disabled": disabled, as: props.as ?? "button", "aria-busy": disabled || loading, onClick: disabled ? undefined : props.onClick, className: css(buttonVariants({ size, rounded, theme }), className), children: [icon, props.children] }));

package/dist/components/display/notifications.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"notifications.d.ts","sourceRoot":"","sources":["../../../src/components/display/notifications.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGlE,OAAO,EAA8C,KAAK,iBAAiB,EAAwD,MAAM,OAAO,CAAC;AAEjJ,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEpC,QAAA,MAAM,QAAQ;;mFAcb,CAAC;AAEF,KAAK,mBAAmB,GAAG,OAAO,CAAC;IAC/B,KAAK,EAAE,KAAK,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,YAAY,CAAC,OAAO,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC;CACjD,CAAC,CAAC;AAEH,KAAK,sBAAsB,GAAG;IAAE,KAAK,EAAE,MAAM,IAAI,CAAC;IAAC,KAAK,EAAE,MAAM,IAAI,CAAA;CAAE,CAAC;AAEvE,KAAK,eAAe,GAAG,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,EAAE,mBAAmB,KAAK,sBAAsB,CAAC;AAM3F,eAAO,MAAM,eAAe,uBAAwC,CAAC;AA+DrE,MAAM,MAAM,iBAAiB,GAAG,OAAO,CAAC;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AAE3E,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,GAAO,EAAE,QAAe,EAAE,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,2CAuDzG"}
+{"version":3,"file":"notifications.d.ts","sourceRoot":"","sources":["../../../src/components/display/notifications.tsx"],"names":[],"mappings":"AACA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAIlE,OAAO,EAAgD,KAAK,iBAAiB,EAAwD,MAAM,OAAO,CAAC;AAEnJ,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEpC,QAAA,MAAM,QAAQ;;mFAcb,CAAC;AAEF,KAAK,mBAAmB,GAAG,OAAO,CAAC;IAC/B,KAAK,EAAE,KAAK,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,YAAY,CAAC,OAAO,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC;CACjD,CAAC,CAAC;AAEH,KAAK,sBAAsB,GAAG;IAAE,KAAK,EAAE,MAAM,IAAI,CAAC;IAAC,KAAK,EAAE,MAAM,IAAI,CAAA;CAAE,CAAC;AAEvE,KAAK,eAAe,GAAG,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,EAAE,mBAAmB,KAAK,sBAAsB,CAAC;AAM3F,eAAO,MAAM,eAAe,uBAAwC,CAAC;AA+DrE,MAAM,MAAM,iBAAiB,GAAG,OAAO,CAAC;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AAE3E,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,GAAO,EAAE,QAAe,EAAE,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,2CAyDzG"}

package/dist/components/display/notifications.js

@@ -1,20 +1,20 @@
 "use client";
 import { createElement as _createElement } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Toast as RadixToast } from "radix-ui";
 import { cva } from "class-variance-authority";
-import { AnimatePresence, motion } from "motion/react";
 import { XIcon } from "lucide-react";
+import { AnimatePresence, motion } from "motion/react";
+import { Toast as RadixToast } from "radix-ui";
 import { createContext, forwardRef, useCallback, useContext, useEffect, useRef, useState } from "react";
 import { useHover } from "../../hooks/use-hover";
 const variants = cva("relative isolate z-tooltip flex justify-between overflow-hidden whitespace-nowrap rounded-lg border text-sm shadow-shadow-notification supports-[backdrop-filter]:backdrop-blur-xl", {
     variants: {
         theme: {
             warn: "bg-warn-notification/90 text-warn-hover border-warn/50",
-            info: "bg-info-notification supports-[backdrop-filter]:bg-info-notification/50 supports-[backdrop-filter]:bg-info/20 text-info border-info/50",
+            default: "border-card-border bg-card-background text-foreground",
             danger: "bg-danger-notification supports-[backdrop-filter]:bg-danger-notification/60 text-danger border-danger/50",
             success: "bg-success-notification supports-[backdrop-filter]:bg-success-notification/50 text-success border-success/50",
-            default: "border-card-border bg-card-background text-foreground",
+            info: "bg-info-notification supports-[backdrop-filter]:bg-info-notification/50 supports-[backdrop-filter]:bg-info/20 text-info border-info/50",
         },
     },
     defaultVariants: { theme: "default" },
@@ -34,11 +34,11 @@ const Notification = forwardRef(function Toast(props, forwardedRef) {
     const duration = props.duration;
     const variant = props.hover ? "hover" : props.isLast ? "isLast" : "other";
     const className = variants({ theme: props.theme || "default" });
-    return (_jsx(RadixToast.Root, { ref: forwardedRef, asChild: true, forceMount: true, onOpenChange: props.onClose, duration: duration, children: _jsx(motion.li, { layout: true, layoutScroll: true, animate: variant, "data-index": props.index, initial: { y: -100, zIndex: -1 }, className: "absolute top-0 right-0 w-80 pointer-events-auto text-select", variants: {
+    return (_jsx(RadixToast.Root, { ref: forwardedRef, asChild: true, forceMount: true, onOpenChange: props.onClose, duration: duration, children: _jsx(motion.li, { layout: true, layoutScroll: true, animate: variant, "data-index": props.index, initial: { y: -100, zIndex: -1 }, className: "text-select pointer-events-auto absolute right-0 top-0 w-80", variants: {
                 isLast: { y: 10, scale: 1, animationDuration: "300ms", opacity: 1 },
                 hover: { y: 0, position: "static", scale: 1, opacity: 1 },
                 other: animatedIndex[props.reversedIndex] || animatedIndex.default,
-            }, transition: { type: "spring", mass: 1.2, damping: 30, stiffness: 200 }, exit: { opacity: [0.9, 0], transition: { opacity: { bounce: 0.25, duration: 0.3 } } }, children: _jsxs("div", { className: className, children: [_jsxs("div", { className: "flex flex-col p-4", children: [props.title ? (_jsx(RadixToast.Title, { className: "text-lg font-medium leading-relaxed select-text truncate", children: "Title" })) : null, _jsx(RadixToast.Description, { className: "select-text truncate", children: props.text })] }), closable ? (_jsx(RadixToast.Close, { className: "absolute top-2 right-2 p-1 rounded-full transition text-foreground hover:bg-danger/10 hover:text-danger-hover", children: _jsx(XIcon, { className: "w-5 h-5" }) })) : null] }) }) }));
+            }, transition: { type: "spring", mass: 1.2, damping: 30, stiffness: 200 }, exit: { opacity: [0.9, 0], transition: { opacity: { bounce: 0.25, duration: 0.3 } } }, children: _jsxs("div", { className: className, children: [_jsxs("div", { className: "flex flex-col p-4", children: [props.title ? (_jsx(RadixToast.Title, { className: "select-text truncate text-lg font-medium leading-relaxed", children: props.title })) : null, _jsx(RadixToast.Description, { className: "select-text truncate", children: props.text })] }), closable ? (_jsx(RadixToast.Close, { className: "absolute right-2 top-2 rounded-full p-1 text-foreground transition hover:bg-danger/10 hover:text-danger-hover", children: _jsx(XIcon, { className: "size-5" }) })) : null] }) }) }));
 });
 export function Notifications({ children, max = 5, duration = 5000 }) {
     const ref = useRef(null);
@@ -59,10 +59,10 @@ export function Notifications({ children, max = 5, duration = 5000 }) {
         const close = () => setMessages((prev) => prev.filter((x) => x.id !== id));
         return { clear, close };
     }, [max]);
-    return (_jsxs(RadixToast.Provider, { duration: duration, swipeThreshold: 150, children: [_jsx(NotificationContext.Provider, { value: notify, children: children }), _jsx(AnimatePresence, { presenceAffectsLayout: true, mode: "popLayout", children: messages.map((toast, index, list) => {
-                    const close = () => setMessages((prev) => prev.filter((t) => t.id !== toast.id));
-                    return (_createElement(Notification, { ...toast, key: toast.id, hover: hover, index: index, onClose: close, isLast: list.length - 1 === index, reversedIndex: list.length - (index + 1) }));
-                }) }), _jsx(RadixToast.Viewport, { ref: ref, "data-items": messages.length, style: {
+    return (_jsxs(RadixToast.Provider, { duration: duration, swipeThreshold: 150, children: [_jsx(NotificationContext.Provider, { value: notify, children: children }), _jsx(motion.ol, { children: _jsx(AnimatePresence, { presenceAffectsLayout: true, mode: "popLayout", children: messages.map((toast, index, list) => {
+                        const close = () => setMessages((prev) => prev.filter((t) => t.id !== toast.id));
+                        return (_createElement(Notification, { ...toast, hover: hover, index: index, key: toast.id, onClose: close, isLast: list.length - 1 === index, reversedIndex: list.length - (index + 1) }));
+                    }) }) }), _jsx(RadixToast.Viewport, { ref: ref, "data-items": messages.length, style: {
                     justifyContent: "start",
                     height: `${(hover ? messages.length : Math.min(1, messages.length)) * 7}rem`,
                 }, className: "fixed right-4 top-10 flex w-80 list-none flex-col-reverse items-end gap-4 overflow-y-clip overflow-x-visible data-[items=true]:pb-8 max-sm:top-20" })] }));

package/dist/components/display/progress.d.ts

@@ -1,6 +1,8 @@
 import { PropsWithoutRef } from "react";
+import { Label } from "../../types";
 type ProgressProps = {
     max?: number;
+    label?: Label;
     percent?: number;
     container?: string;
     className?: string;

package/dist/components/display/progress.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"progress.d.ts","sourceRoot":"","sources":["../../../src/components/display/progress.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,eAAe,EAAE,MAAM,OAAO,CAAC;AAExC,KAAK,aAAa,GAAG;IACnB,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAA;AAED,eAAO,MAAM,QAAQ,GAAI,OAAO,eAAe,CAAC,aAAa,CAAC,4CAoB7D,CAAA"}
+{"version":3,"file":"progress.d.ts","sourceRoot":"","sources":["../../../src/components/display/progress.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,eAAe,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEpC,KAAK,aAAa,GAAG;IACnB,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAA;AAED,eAAO,MAAM,QAAQ,GAAI,OAAO,eAAe,CAAC,aAAa,CAAC,4CAoB7D,CAAA"}

package/dist/components/display/progress.js

@@ -4,6 +4,6 @@ import { Progress as RadixProgress } from "radix-ui";
 import { css } from "../../lib/dom";
 export const Progress = (props) => {
     return (_jsxs(RadixProgress.Root, { max: props.max, value: props.percent, style: { transform: "translateZ(0)", }, className: css("overflow-hidden relative w-full rounded-full h-6 bg-background", props.container), children: [_jsx(RadixProgress.Indicator, { style: { transform: Is.number(props.percent) ? `translateX(-${100 - props.percent}%)` : undefined }, className: css("bg-primary transition-transform ease-in-out size-full duration-500", props.className) }), Is.number(props.percent)
-                ? _jsxs("p", { className: css("flex absolute inset-0 justify-center items-center w-full font-semibold tabular-nums text-primary-foreground", props.textClassName), children: [props.percent, " %"] })
+                ? _jsx("p", { className: css("flex absolute inset-0 justify-center items-center w-full font-semibold tabular-nums text-primary-foreground", props.textClassName), children: props.label ? props.label : `${props.percent} %` })
                 : null] }));
 };

package/dist/components/floating/menu.js

@@ -42,7 +42,7 @@ const MenuComponent = React.forwardRef(({ children, FloatingComponent = "div", h
         move: false,
         enabled: hover,
         delay: { open: FLOATING_DELAY },
-        handleClose: safePolygon({ blockPointerEvents: true }),
+        handleClose: safePolygon({ blockPointerEvents: true, requireIntent: false }),
     });
     const click = useClick(context, {
         toggle: !isNested,

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

@@ -1 +1 @@
-{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../src/components/floating/modal.tsx"],"names":[],"mappings":"AACA,OAAO,EACH,KAAK,YAAY,EASpB,MAAM,oBAAoB,CAAC;AAI5B,OAAO,EAAmB,eAAe,EAAqE,MAAM,cAAc,CAAC;AACnI,OAAO,KAAkH,MAAM,OAAO,CAAC;AAIvI,OAAO,EAAE,KAAK,EAAO,QAAQ,EAAE,MAAM,aAAa,CAAC;AAMnD,MAAM,MAAM,SAAS,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEtD,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,OAAO,CAAC;AAuD9C,MAAM,MAAM,UAAU,GAAG,QAAQ,CAC7B,eAAe,CAAC,KAAK,CAAC,EACtB,CAAC;IAAE,KAAK,EAAE,KAAK,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG;IAAE,SAAS,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC,GAAG;IAC5E,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C,GAAG,OAAO,CAAC;IACR,MAAM,EAAE,KAAK,CAAC;IACd,IAAI,EAAE,SAAS,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,OAAO,CAAC;IACnB,aAAa,EAAE,MAAM,CAAC;IACtB,gBAAgB,EAAE,MAAM,CAAC;IACzB,QAAQ,EAAE,cAAc,CAAC;IACzB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,IAAI,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC3B,YAAY,EAAE,YAAY,EAAE,CAAC;IAC7B,OAAO,EAAE,KAAK,GAAG,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;CAClC,CAAC,CACL,CAAC;AAyEF,KAAK,QAAQ,GAAG;IAAE,OAAO,EAAE,GAAG,CAAC;IAAC,QAAQ,EAAE,WAAW,GAAG,IAAI,CAAA;CAAE,CAAC;AAI/D,eAAO,MAAM,KAAK;WAlGJ,KAAK;gBAAc,MAAM;;UACzB,OAAO;cACH,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI;;YAE9B,KAAK;UACP,SAAS;cACL,OAAO;aACR,OAAO;cACN,MAAM;aACP,OAAO;eACL,MAAM;cACP,OAAO;eACN,OAAO;mBACH,MAAM;sBACH,MAAM;cACd,cAAc;uBACL,OAAO;UACpB,QAAQ,GAAG,SAAS;kBACZ,YAAY,EAAE;aACnB,KAAK,GAAG,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC;;;;eAnBmB,MAAM;YAAU,KAAK;;UAChE,OAAO;cACH,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI;;YAE9B,KAAK;UACP,SAAS;cACL,OAAO;aACR,OAAO;cACN,MAAM;aACP,OAAO;eACL,MAAM;cACP,OAAO;eACN,OAAO;mBACH,MAAM;sBACH,MAAM;cACd,cAAc;uBACL,OAAO;UACpB,QAAQ,GAAG,SAAS;kBACZ,YAAY,EAAE;aACnB,KAAK,GAAG,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC;;;2CAuRrC,CAAC"}
+{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../src/components/floating/modal.tsx"],"names":[],"mappings":"AACA,OAAO,EACH,KAAK,YAAY,EASpB,MAAM,oBAAoB,CAAC;AAI5B,OAAO,EAAmB,eAAe,EAAqE,MAAM,cAAc,CAAC;AACnI,OAAO,KAAkH,MAAM,OAAO,CAAC;AAIvI,OAAO,EAAE,KAAK,EAAO,QAAQ,EAAE,MAAM,aAAa,CAAC;AAMnD,MAAM,MAAM,SAAS,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEtD,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,OAAO,CAAC;AAuD9C,MAAM,MAAM,UAAU,GAAG,QAAQ,CAC7B,eAAe,CAAC,KAAK,CAAC,EACtB,CAAC;IAAE,KAAK,EAAE,KAAK,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG;IAAE,SAAS,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC,GAAG;IAC5E,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C,GAAG,OAAO,CAAC;IACJ,MAAM,EAAE,KAAK,CAAC;IACd,IAAI,EAAE,SAAS,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,OAAO,CAAC;IACnB,aAAa,EAAE,MAAM,CAAC;IACtB,gBAAgB,EAAE,MAAM,CAAC;IACzB,QAAQ,EAAE,cAAc,CAAC;IACzB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,IAAI,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC3B,YAAY,EAAE,YAAY,EAAE,CAAC;IAC7B,OAAO,EAAE,KAAK,GAAG,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;CAClC,CAAC,CACT,CAAC;AA6EF,KAAK,QAAQ,GAAG;IAAE,OAAO,EAAE,GAAG,CAAC;IAAC,QAAQ,EAAE,WAAW,GAAG,IAAI,CAAA;CAAE,CAAC;AAI/D,eAAO,MAAM,KAAK;WAtGJ,KAAK;gBAAc,MAAM;;UACzB,OAAO;cACH,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI;;YAE1B,KAAK;UACP,SAAS;cACL,OAAO;aACR,OAAO;cACN,MAAM;aACP,OAAO;eACL,MAAM;cACP,OAAO;eACN,OAAO;mBACH,MAAM;sBACH,MAAM;cACd,cAAc;uBACL,OAAO;UACpB,QAAQ,GAAG,SAAS;kBACZ,YAAY,EAAE;aACnB,KAAK,GAAG,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC;;;;eAnBe,MAAM;YAAU,KAAK;;UAChE,OAAO;cACH,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI;;YAE1B,KAAK;UACP,SAAS;cACL,OAAO;aACR,OAAO;cACN,MAAM;aACP,OAAO;eACL,MAAM;cACP,OAAO;eACN,OAAO;mBACH,MAAM;sBACH,MAAM;cACd,cAAc;uBACL,OAAO;UACpB,QAAQ,GAAG,SAAS;kBACZ,YAAY,EAAE;aACnB,KAAK,GAAG,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC;;;2CAoSzC,CAAC"}

package/dist/components/floating/modal.js

@@ -30,7 +30,7 @@ const animations = {
     },
     dialog: {
         exit: { opacity: 0, scale: 0.95, animationDuration },
-        initial: { opacity: 0.5, scale: 0.95, animationDuration, transition: { duration: 0.5, ease: 'easeInOut' } },
+        initial: { opacity: 0.5, scale: 0.95, animationDuration, transition: { duration: 0.5, ease: "easeInOut" } },
         enter: { opacity: 1, scale: [1.05, 1], animationDuration },
     },
 };
@@ -50,7 +50,7 @@ const variants = cva("z-floating border border-card-border ring-0 outline-0 appe
     defaultVariants: { position: "right", type: "dialog" },
 });
 const dragConstraints = { top: 0, left: 0, right: 0, bottom: 0 };
-const calculateClose = (n) => n * 0.65;
+const calculateClose = (n) => n * 0.6;
 const Draggable = (props) => {
     const onDrag = (_, info) => {
         if (props.parent.current) {
@@ -65,18 +65,22 @@ const Draggable = (props) => {
             const rect = div.getBoundingClientRect();
             const v = props.value.get() || rect.height;
             const result = Math.abs(v - info.delta.y);
-            const screenHeightToClose = calculateClose(window.outerHeight);
+            const max = window.outerHeight;
+            const screenHeightToClose = calculateClose(max);
             if (result >= screenHeightToClose)
                 return props.value.set(result);
+            if (document.activeElement instanceof HTMLElement) {
+                document.activeElement?.blur();
+            }
             props.onChange(false);
-            return setTimeout(() => props.value.set(window.outerHeight), 350);
+            return setTimeout(() => props.value.set(undefined), 350);
         }
     };
     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: "w-1/4 h-2 rounded-lg bg-floating-border" }) : null }));
+                : "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" };
 const fetchPosition = (isDesktop, forceType, propsType, propsPosition) => {
@@ -96,12 +100,11 @@ export const Modal = forwardRef(({ open, title, footer, asChild, trigger, childr
     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 floating = useFloating({ open: open, onOpenChange: onChange, transform: true, strategy: "absolute" });
-    const click = useClick(floating.context);
+    const floating = useFloating({ open, onOpenChange: onChange });
+    const click = useClick(floating.context, {});
     const role = useRole(floating.context, { role: roleName });
     const dismiss = useDismiss(floating.context, {
         escapeKey: true,
-        referencePress: true,
         outsidePress: overlayClickClose,
     });
     const interactions = useInteractions([click, role, dismiss].concat(outInteractions));
@@ -109,7 +112,7 @@ export const Modal = forwardRef(({ open, title, footer, asChild, trigger, childr
     const floatingSize = useMotionValue(undefined);
     useEffect(() => {
         floatingSize.set(undefined);
-    }, [floatingSize, type]);
+    }, [type]);
     const onClose = () => onChange(false);
     useImperativeHandle(externalRef, () => {
         return { context: floating.context, floating: removeScrollRef.current };
@@ -139,10 +142,10 @@ export const Modal = forwardRef(({ open, title, footer, asChild, trigger, childr
     };
     const animationProps = animated && type === "sheet"
         ? {
+            ...commonAnimated,
             dragElastic: 0,
             onDrag: onDrag,
             dragConstraints,
-            ...commonAnimated,
             dragListener: true,
             dragMomentum: true,
             dragPropagation: true,
@@ -152,7 +155,10 @@ export const Modal = forwardRef(({ open, title, footer, asChild, trigger, childr
             drag: type === "sheet" ? "y" : "x",
         }
         : commonAnimated;
-    return (_jsxs(Fragment, { children: [trigger ? (_jsx(Fragment, { children: asChild ? (_jsx(Slot, { ref: floating.refs.setReference, ...interactions.getReferenceProps({ layoutId: layoutId }), children: Trigger })) : (_jsx(motion.button, { ref: floating.refs.setReference, ...interactions.getReferenceProps(), layoutId: layoutId, type: "button", children: Trigger })) })) : null, _jsx(FloatingPortal, { preserveTabOrder: true, children: _jsx(AnimatePresence, { mode: "wait", propagate: true, presenceAffectsLayout: true, initial: false, children: open ? (_jsx(FloatingOverlay, { lockScroll: true, className: css(`inset-0 isolate z-overlay h-[100dvh] !overflow-clip bg-floating-overlay/70 ${type === "drawer" ? "" : "flex items-start justify-center p-10"}`, overlayClassName), children: _jsx(FloatingFocusManager, { guards: true, visuallyHiddenDismiss: true, modal: true, closeOnFocusOut: true, context: floating.context, children: _jsxs(motion.div, { ...props, ...animationProps, ...(title
+    useEffect(() => {
+        console.log({ open });
+    }, [open]);
+    return (_jsxs(Fragment, { children: [trigger ? (_jsx(Fragment, { children: asChild ? (_jsx(Slot, { ref: floating.refs.setReference, ...interactions.getReferenceProps({ layoutId: layoutId }), children: Trigger })) : (_jsx(motion.button, { ref: floating.refs.setReference, ...interactions.getReferenceProps(), layoutId: layoutId, type: "button", children: Trigger })) })) : null, _jsx(FloatingPortal, { preserveTabOrder: true, children: _jsx(AnimatePresence, { propagate: true, mode: "wait", initial: false, children: open ? (_jsx(FloatingOverlay, { lockScroll: false, className: css("inset-0 isolate z-overlay h-[100dvh] !overflow-clip bg-floating-overlay/70", type === "drawer" ? "" : "flex items-start justify-center p-10", overlayClassName), children: _jsx(FloatingFocusManager, { guards: true, visuallyHiddenDismiss: true, modal: true, closeOnFocusOut: true, context: floating.context, children: _jsxs(motion.div, { ...props, ...animationProps, ...(title
                                     ? {
                                         "aria-labelledby": headingId,
                                         "aria-describedby": descriptionId,
@@ -164,5 +170,5 @@ export const Modal = forwardRef(({ open, title, footer, asChild, trigger, childr
                                         position,
                                         type,
                                     }), className, "overscroll-contain"),
-                                }), "data-component": "modal", style: type === "drawer" ? { width: floatingSize } : { height: floatingSize }, children: [title ? (_jsx("header", { className: "relative w-full", children: title ? (_jsx("h2", { id: headingId, className: "px-8 pb-2 text-3xl font-medium leading-relaxed border-b select-text border-floating-border", children: title })) : null })) : null, _jsx("section", { "data-component": "modal-body", className: css("flex-1 select-text overflow-y-auto px-8 py-1", bodyClassName), children: children }), footer ? (_jsx("footer", { className: "px-8 pt-4 w-full border-t select-text border-floating-border", children: footer })) : null, closable ? (_jsx("nav", { className: "absolute top-1 right-4 z-floating", children: _jsx("button", { type: "button", onClick: onClose, className: "p-1 opacity-70 transition-colors hover:opacity-100 hover:text-danger focus:text-danger", children: _jsx(XIcon, {}) }) })) : null, useResizer && resizer ? (_jsx(Draggable, { onChange: onChange, value: floatingSize, sheet: type === "sheet", position: position, parent: floating.refs.floating })) : null] }) }) })) : null }, headingId) })] }));
+                                }), "data-component": "modal", style: type === "drawer" ? { width: floatingSize } : { height: floatingSize }, children: [title ? (_jsx("header", { className: "relative w-full", children: title ? (_jsx("h2", { id: headingId, className: "select-text border-b border-floating-border px-8 pb-2 text-3xl font-medium leading-relaxed", children: title })) : null })) : null, _jsx("section", { "data-component": "modal-body", className: css("flex-1 select-text overflow-y-auto px-8 py-1", bodyClassName), children: children }), footer ? (_jsx("footer", { className: "w-full select-text border-t border-floating-border px-8 pt-4", children: 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: onChange, value: floatingSize, sheet: type === "sheet", position: position, parent: floating.refs.floating })) : null] }) }) })) : null }, headingId) })] }));
 });

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

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

package/dist/components/form/autocomplete.js

@@ -22,13 +22,13 @@ const transitionStyles = {
 };
 const emptyRef = [];
 const List = forwardRef(function VirtualList(props, ref) {
-    return (_jsx(motion.ul, { ...props, ref: ref, className: "w-full overscroll-contain rounded-lg border-b border-tooltip-border last:border-transparent", children: _jsx(AnimatePresence, { children: props.children }) }));
+    return (_jsx(motion.ul, { ...props, ref: ref, className: "w-full overscroll-contain rounded-lg", children: _jsx(AnimatePresence, { children: props.children }) }));
 });
 const Item = forwardRef(function VirtualItem({ item, context, ...props }, ref) {
     return _jsx(motion.li, { ...props, ref: ref, className: "first:rounded-t-lg last:rounded-t-lg" });
 });
 const components = { List, Item };
-const MIN_SIZE = 40;
+const MIN_SIZE = 44;
 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);
@@ -171,15 +171,16 @@ export const Autocomplete = forwardRef(({ left, error, right, loading, options,
         setClosed();
     };
     const id = props.id || props.name;
+    const shadowId = `${id}-shadow`;
     const isEmpty = displayList.length === 0;
-    return (_jsxs(InputField, { ...props, left: left, error: error, ref: fieldset, form: props.form, loading: loading, name: props.name, feedback: feedback, hideLeft: hideLeft, required: required, title: props.title, container: container, rightLabel: rightLabel, interactive: interactive, id: props.name || props.id, optionalText: optionalText, componentName: "autocomplete", labelClassName: labelClassName, placeholder: props.placeholder, right: _jsxs("span", { className: "flex items-center gap-0.5", children: [right, _jsxs("button", { type: "button", className: "p-2 transition-colors link:text-primary md:p-1", onClick: onCaretDownClick, children: [_jsx(ChevronDown, { size: 20 }), _jsx("span", { className: "sr-only", children: translation.inputCaretDown })] }), value ? (_jsx("button", { type: "button", onClick: onClose, className: "p-2 transition-colors link:text-danger md:p-1", 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", { "data-shadow": "true", ...getReferenceProps({
+    return (_jsxs(InputField, { ...props, left: left, error: error, ref: fieldset, form: props.form, loading: loading, name: props.name, feedback: feedback, hideLeft: hideLeft, required: required, title: props.title, container: container, rightLabel: rightLabel, interactive: interactive, id: shadowId, optionalText: optionalText, componentName: "autocomplete", labelClassName: labelClassName, placeholder: props.placeholder, right: _jsxs("span", { className: "flex items-center gap-0.5", children: [right, _jsxs("button", { type: "button", className: "p-2 transition-colors link:text-primary md:p-1", onClick: onCaretDownClick, children: [_jsx(ChevronDown, { size: 20 }), _jsx("span", { className: "sr-only", children: translation.inputCaretDown })] }), value ? (_jsx("button", { type: "button", onClick: onClose, className: "p-2 transition-colors link:text-danger md:p-1", 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", { "data-shadow": "true", ...getReferenceProps({
                     ...props,
-                    onChange,
                     onFocus,
                     pattern,
+                    onChange,
+                    id: shadowId,
+                    name: shadowId,
                     ref: refs.setReference,
-                    name: `${id}-shadow`,
-                    id: `${id}-shadow`,
                     onClick: (e) => e.currentTarget.focus(),
                     onKeyDown(event) {
                         if (event.key === "Escape") {
@@ -222,8 +223,8 @@ export const Autocomplete = forwardRef(({ left, error, right, loading, options,
                             const ul = refs.floating.current;
                             const li = ul.querySelectorAll("li").item(0);
                             const sum = (li ? li.getBoundingClientRect().height : MIN_SIZE) * displayList.length;
-                            return flushSync(() => setH(sum + 2));
-                        }, children: [isEmpty ? (_jsx("div", { role: "option", className: "w-full border-b border-tooltip-border last:border-transparent", children: _jsx("span", { className: "flex w-full justify-between p-2 text-left text-disabled", children: emptyMessage || translation.autocompleteEmpty }) })) : null, _jsx(Virtuoso, { overscan: 40, ref: virtuoso, hidden: isEmpty, data: displayList, style: { height: h }, defaultItemHeight: MIN_SIZE, components: components, scrollerRef: (e) => void (scroller.current = e), className: "max-h-80 overscroll-contain rounded-lg border-floating-border bg-floating-background p-0 text-foreground", itemContent: (i, option) => {
+                            return flushSync(() => setH(sum + 10));
+                        }, children: [isEmpty ? (_jsx("div", { role: "option", className: "w-full border-b border-tooltip-border", children: _jsx("span", { className: "flex w-full justify-between p-2 text-left text-disabled", children: emptyMessage || translation.autocompleteEmpty }) })) : null, _jsx(Virtuoso, { overscan: 40, ref: virtuoso, hidden: isEmpty, data: displayList, style: { height: h - 10 }, defaultItemHeight: MIN_SIZE, components: components, scrollerRef: (e) => void (scroller.current = e), className: "max-h-[calc(100%-2px)] overscroll-contain rounded-lg border-floating 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;

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

@@ -48,16 +48,16 @@ const ItemViewer = (props) => {
         props.onDeleteFile?.(props.file);
     };
     const Icon = extensionMap[props.file.name.split(".").at(-1)] ?? FileIcon;
-    const Element = info.type === "img" ? (_jsx("img", { src: info.url, className: "block w-full", alt: props.file.name })) : (_jsx(Icon, { strokeWidth: 2, absoluteStrokeWidth: true, size: 48 }));
-    return (_jsxs("li", { className: "flex w-full flex-row justify-between gap-4 border-b border-card-border last:border-b-transparent", children: [_jsxs("div", { className: "flex flex-col gap-4", children: [_jsxs("div", { className: "flex flex-row items-center gap-4", children: [_jsx("button", { type: "button", onClick: onViewFile, className: "flex size-20 items-center justify-center", children: Element }), _jsxs("div", { className: "flex flex-col items-start justify-start text-left", children: [_jsx("span", { children: props.file.name }), _jsx("span", { className: "text-sm italic", children: info.size })] })] }), props.File ? (_jsx("div", { className: "min-w-full flex-1", children: _jsx(props.File, { file: props.file }) })) : null] }), _jsx("div", { className: "align-start justify-start flex py-4 transition-colors duration-300 ease-linear hover:text-danger-hover", children: _jsx("button", { onClick: onDeleteFile, type: "button", className: "size-6 flex items-center justify-center", children: _jsx(XIcon, { size: 16 }) }) })] }));
+    const Element = info.type === "img" ? (_jsx("img", { src: info.url, className: "object-contain w-full", alt: props.file.name })) : (_jsx(Icon, { strokeWidth: 2, absoluteStrokeWidth: true, size: 48 }));
+    return (_jsxs("li", { className: "flex flex-row gap-4 justify-between w-full border-b border-card-border last:border-b-transparent", children: [_jsxs("div", { className: "flex flex-col gap-4", children: [_jsxs("div", { className: "flex flex-row gap-4 items-center", children: [_jsx("button", { type: "button", onClick: onViewFile, className: "flex overflow-hidden justify-center items-center max-w-16 m-2 size-16", children: Element }), _jsxs("div", { className: "flex flex-col justify-start items-start text-left", children: [_jsx("span", { children: props.file.name }), _jsx("span", { className: "text-sm italic", children: info.size })] })] }), props.File ? (_jsx("div", { className: "flex-1 min-w-full", children: _jsx(props.File, { file: props.file }) })) : null] }), _jsx("div", { className: "flex justify-start py-4 transition-colors duration-300 ease-linear align-start hover:text-danger-hover", children: _jsx("button", { onClick: onDeleteFile, type: "button", className: "flex justify-center items-center size-6", children: _jsx(XIcon, { size: 16 }) }) })] }));
 };
-const FilesList = (props) => (_jsx("ul", { className: "w-full space-y-8", children: props.files.map((file) => {
+const FilesList = (props) => (_jsx("ul", { className: "space-y-8 w-full", children: props.files.map((file) => {
         return _jsx(ItemViewer, { File: props.File, onDeleteFile: props.onDeleteFile, file: file }, file.name);
     }) }));
 const Idle = (props) => {
     const t = useTranslations();
     const Icon = props.dragging ? FolderOpenIcon : FolderIcon;
-    return (_jsxs("div", { className: "flex flex-col items-center justify-center", children: [_jsx("div", { className: "flex flex-col items-center justify-center gap-2", children: _jsx(Icon, { className: "text-primary", size: 80 }) }), _jsxs("div", { className: "my-4 flex flex-col items-center gap-1", children: [_jsx("p", { children: t.uploadIdle }), _jsx("button", { className: "text-primary underline", type: "button", children: t.uploadIdleButton })] })] }));
+    return (_jsxs("div", { className: "flex flex-col justify-center items-center", children: [_jsx("div", { className: "flex flex-col gap-2 justify-center items-center", children: _jsx(Icon, { className: "text-primary", size: 80 }) }), _jsxs("div", { className: "flex flex-col gap-1 items-center my-4", children: [_jsx("p", { children: t.uploadIdle }), _jsx("button", { className: "underline text-primary", type: "button", children: t.uploadIdleButton })] })] }));
 };
 const InteractiveArea = (props) => {
     if (props.isDragActive)
@@ -71,7 +71,7 @@ const DefaultIdle = _jsx(Idle, { dragging: false });
 const FileViewer = (props) => {
     const file = props.item.file;
     const type = props.item.type;
-    return (_jsxs("div", { className: "flex flex-col gap-4", children: [_jsx("p", { className: "text-lg font-medium", children: props.item.file.name }), _jsx("p", { className: "text-base", children: props.item.size }), type === "img" ? (_jsx("img", { className: "container block w-full max-w-96", src: props.item.url, alt: file.name })) : type === "video" ? (_jsx("video", { className: "container block w-full max-w-96", src: props.item.url, controls: true, muted: true })) : type === "audio" ? (_jsx("figure", { children: _jsx("audio", { controls: true, src: props.item.url }) })) : null] }));
+    return (_jsxs("div", { className: "flex flex-col gap-4", children: [_jsx("p", { className: "text-lg font-medium", children: props.item.file.name }), _jsx("p", { className: "text-base", children: props.item.size }), type === "img" ? (_jsx("img", { className: "container inline-block w-full max-w-96", src: props.item.url, alt: file.name })) : type === "video" ? (_jsx("video", { className: "container block w-full max-w-96", src: props.item.url, controls: true, muted: true })) : type === "audio" ? (_jsx("figure", { children: _jsx("audio", { controls: true, src: props.item.url }) })) : null] }));
 };
 export const FileUpload = ({ idle = DefaultIdle, onDeleteFile, File, onDrop, ...props }) => {
     const t = useTranslations();

package/dist/components/form/input-field.js

@@ -6,7 +6,7 @@ import { useTranslations } from "../../hooks/use-translations";
 import { useTweaks } from "../../hooks/use-tweaks";
 import { css } from "../../lib/dom";
 import { Tooltip } from "../floating/tooltip";
-export const InputFeedback = ({ reportStatus, id, hideLeft = false, className, info, children, title }) => (_jsxs("span", { className: css("w-full justify-between", hideLeft && children === null ? "hidden" : "flex", className), children: [hideLeft ? null : (_jsxs("span", { className: "flex items-center gap-1 transition-colors group-focus-within:text-primary group-hover:text-primary group-disabled:text-disabled group-error:text-danger", children: [title, reportStatus || info ? (_jsxs("span", { className: "flex items-center justify-center gap-1", children: [info ? (_jsx(Tooltip, { as: "button", type: "button", "aria-description": typeof info === "string" ? info : undefined, "aria-describedby": typeof info === "string" ? undefined : id ? `tooltip-info-content-${id}` : undefined, title: _jsx("span", { className: "cursor-help", children: _jsx(InfoIcon, { className: "aspect-square size-3", "aria-hidden": "true", size: 16, strokeWidth: 1, absoluteStrokeWidth: true }) }), children: _jsx("div", { id: id ? `tooltip-info-content-${id}` : undefined, className: "w-full max-w-48 whitespace-break-spaces break-words", children: info }) })) : null, reportStatus ? (_jsxs("span", { className: "flex h-3 min-w-6 items-center", children: [_jsx(CheckCircle, { className: "hidden aspect-square size-3 opacity-0 transition-opacity group-assert:block group-assert:text-success group-assert:opacity-100", "aria-hidden": "true", size: 16, strokeWidth: 1, absoluteStrokeWidth: true }), _jsx(XCircle, { className: "hidden aspect-square size-3 opacity-0 transition-opacity group-error:block group-error:opacity-100", "aria-hidden": "true", size: 16, strokeWidth: 1, absoluteStrokeWidth: true })] })) : null] })) : null] })), children] }));
+export const InputFeedback = ({ reportStatus, id, hideLeft = false, className, info, children, title }) => (_jsxs("span", { className: css("w-full justify-between", hideLeft && children === null ? "hidden" : "flex", className), children: [hideLeft ? null : (_jsxs("span", { className: "flex items-center gap-1 transition-colors group-focus-within:text-primary group-hover:text-primary group-disabled:text-disabled group-error:text-danger", children: [title, reportStatus || info ? (_jsxs("span", { className: "flex items-center justify-center gap-1", children: [info ? (_jsx(Tooltip, { as: "button", type: "button", "aria-label": typeof info === "string" ? info : undefined, "aria-describedby": typeof info === "string" ? undefined : id ? `tooltip-info-content-${id}` : undefined, title: _jsx("span", { className: "cursor-help", children: _jsx(InfoIcon, { className: "aspect-square size-3", "aria-hidden": "true", size: 16, strokeWidth: 1, absoluteStrokeWidth: true }) }), children: _jsx("div", { id: id ? `tooltip-info-content-${id}` : undefined, className: "w-full max-w-48 whitespace-break-spaces break-words", children: info }) })) : null, reportStatus ? (_jsxs("span", { className: "flex h-3 min-w-6 items-center", children: [_jsx(CheckCircle, { className: "hidden aspect-square size-3 opacity-0 transition-opacity group-assert:block group-assert:text-success group-assert:opacity-100", "aria-hidden": "true", size: 16, strokeWidth: 1, absoluteStrokeWidth: true }), _jsx(XCircle, { className: "hidden aspect-square size-3 opacity-0 transition-opacity group-error:block group-error:opacity-100", "aria-hidden": "true", size: 16, strokeWidth: 1, absoluteStrokeWidth: true })] })) : null] })) : null] })), children] }));
 export const InputField = forwardRef(({ optionalText: _optionalText, left, rightLabel, container, feedback, interactive, right, info, children, error, form, id, labelClassName = "", name, title, componentName, placeholder, hideLeft = false, required, disabled, reportStatus, }, ref) => {
     const tweaks = useTweaks();
     const reportStatusDefault = reportStatus !== undefined ? reportStatus : tweaks.input.iconFeedback;

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

@@ -1,6 +1,10 @@
 import { AllMasks, CurrencyCode, CurrencyInputProps, CurrencyMaskTypes, Locales, PercentInputMask, PercentInputProps, TheMaskProps } from "the-mask-input";
 import { FreeTextProps } from "./free-text";
 export type * from "the-mask-input";
+/**
+ * Props for the Input component, extending FreeTextProps with mask functionality
+ * Supports currency, percentage, and custom mask patterns
+ */
 export type InputProps = FreeTextProps<"input", ({
     mask?: CurrencyMaskTypes;
     locale?: Locales;
@@ -14,5 +18,35 @@ export type InputProps = FreeTextProps<"input", ({
     locale?: undefined;
     currency?: undefined;
 } & TheMaskProps)>;
+/**
+ * A text input component with advanced masking capabilities.
+ *
+ * Supports various input masks including:
+ * - Currency formatting with locale support
+ * - Percentage inputs
+ * - Custom regex patterns
+ * - Phone numbers, dates, and other formatted inputs
+ *
+ * @example
+ * ```tsx
+ * // Basic input
+ * <Input placeholder="Enter text..." />
+ *
+ * // Phone number mask
+ * <Input mask="(99) 99999-9999" placeholder="Phone" />
+ *
+ * // Currency input
+ * <Input mask="currency" currency="USD" locale="en-US" />
+ *
+ * // Percentage input
+ * <Input mask="percentage" />
+ *
+ * // Custom mask
+ * <Input mask={["999.999.999-99"]} placeholder="CPF" />
+ * ```
+ *
+ * @param props - Input props including mask, validation, and styling options
+ * @returns A masked input component with form integration
+ */
 export declare const Input: import("../..").ReactComponent<FreeTextProps<"input", InputProps>>;
 //# sourceMappingURL=input.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/components/form/input.tsx"],"names":[],"mappings":"AACA,OAAkB,EACd,QAAQ,EACR,YAAY,EACZ,kBAAkB,EAClB,iBAAiB,EACjB,OAAO,EACP,gBAAgB,EAChB,iBAAiB,EACjB,YAAY,EACf,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAkB,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5D,mBAAmB,gBAAgB,CAAC;AAEpC,MAAM,MAAM,UAAU,GAAG,aAAa,CAClC,OAAO,EACL,CAAC;IACG,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,YAAY,GAAG,SAAS,CAAC;CACvC,GAAG,kBAAkB,CAAC,GACvB,CAAC;IACG,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACxB,GAAG,iBAAiB,CAAC,GACtB,CAAC;IACG,IAAI,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,MAAM,KAAK,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,GAAG,QAAQ,CAAC,CAAC;IAC9F,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACxB,GAAG,YAAY,CAAC,CACtB,CAAC;AAEF,eAAO,MAAM,KAAK,oEAEhB,CAAC"}
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/components/form/input.tsx"],"names":[],"mappings":"AACA,OAAkB,EACd,QAAQ,EACR,YAAY,EACZ,kBAAkB,EAClB,iBAAiB,EACjB,OAAO,EACP,gBAAgB,EAChB,iBAAiB,EACjB,YAAY,EACf,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAkB,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5D,mBAAmB,gBAAgB,CAAC;AAEpC;;;GAGG;AACH,MAAM,MAAM,UAAU,GAAG,aAAa,CAClC,OAAO,EACL,CAAC;IACG,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,YAAY,GAAG,SAAS,CAAC;CACvC,GAAG,kBAAkB,CAAC,GACvB,CAAC;IACG,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACxB,GAAG,iBAAiB,CAAC,GACtB,CAAC;IACG,IAAI,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,MAAM,KAAK,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,GAAG,QAAQ,CAAC,CAAC;IAC9F,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACxB,GAAG,YAAY,CAAC,CACtB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,eAAO,MAAM,KAAK,oEAEhB,CAAC"}

package/dist/components/form/input.js

@@ -1,6 +1,36 @@
 "use client";
 import MaskInput from "the-mask-input";
 import { createFreeText } from "./free-text";
+/**
+ * A text input component with advanced masking capabilities.
+ *
+ * Supports various input masks including:
+ * - Currency formatting with locale support
+ * - Percentage inputs
+ * - Custom regex patterns
+ * - Phone numbers, dates, and other formatted inputs
+ *
+ * @example
+ * ```tsx
+ * // Basic input
+ * <Input placeholder="Enter text..." />
+ *
+ * // Phone number mask
+ * <Input mask="(99) 99999-9999" placeholder="Phone" />
+ *
+ * // Currency input
+ * <Input mask="currency" currency="USD" locale="en-US" />
+ *
+ * // Percentage input
+ * <Input mask="percentage" />
+ *
+ * // Custom mask
+ * <Input mask={["999.999.999-99"]} placeholder="CPF" />
+ * ```
+ *
+ * @param props - Input props including mask, validation, and styling options
+ * @returns A masked input component with form integration
+ */
 export const Input = createFreeText(MaskInput, "input", {
     type: "text",
 });

package/dist/hooks/use-form.d.ts

@@ -3,6 +3,11 @@ import { type AllPaths } from "sidekicker";
 import { z } from "zod";
 import { AutocompleteProps, CheckboxProps, DatePickerProps, InputProps, MultiSelectProps, SelectProps, SwitchProps, TextareaProps } from "../components";
 import { Any, SetState } from "../types";
+/**
+ * Converts a form element to a JSON object
+ * @param form - The HTML form element to convert
+ * @returns A JSON object representing the form data
+ */
 export declare const formToJson: (form: HTMLFormElement) => any;
 export declare const getSchemaShape: <T extends z.ZodObject<any>>(name: string, schema: T) => T;
 type CustomOnInvalid = (args: {
@@ -34,7 +39,48 @@ export type UseFormOptions<T> = Partial<{
     interceptor: Interceptor<T>;
     state: T | Partial<T> | (() => T | Partial<T>);
 }>;
+/**
+ * Creates a form storage interceptor for persisting form state
+ * @param name - The unique name for the form storage
+ * @returns An interceptor object with get, set, and clear methods
+ */
 export declare const createFormStorage: (name: string) => Interceptor<any>;
+/**
+ * A comprehensive form management hook with Zod schema validation.
+ *
+ * Provides form state management, validation, and component binding for React forms.
+ * Supports automatic validation, error handling, and form persistence.
+ *
+ * @example
+ * ```tsx
+ * const schema = z.object({
+ *   name: z.string().min(1, "Name is required"),
+ *   email: z.string().email("Invalid email"),
+ *   age: z.number().min(18, "Must be 18 or older")
+ * });
+ *
+ * const MyForm = () => {
+ *   const form = useForm(schema, "user-form");
+ *
+ *   return (
+ *     <form {...form.controller()} onSubmit={form.onSubmit((e, { data }) => {
+ *       console.log("Form data:", data);
+ *     })}>
+ *       <Input {...form.input("name")} placeholder="Name" />
+ *       <Input {...form.input("email")} type="email" placeholder="Email" />
+ *       <Input {...form.input("age")} type="number" placeholder="Age" />
+ *       <Button type="submit">Submit</Button>
+ *     </form>
+ *   );
+ * };
+ * ```
+ *
+ * @template T - The Zod schema type
+ * @param schema - Zod schema for form validation
+ * @param formName - Unique identifier for the form
+ * @param opts - Optional configuration including initial state and interceptors
+ * @returns Form management object with input helpers and handlers
+ */
 export declare const useForm: <T extends z.ZodObject<any>>(schema: T, formName: string, opts?: UseFormOptions<z.infer<T>>) => {
     get: (p: AllPaths<z.TypeOf<T>>) => Any | "";
     input: <Props extends InputProps>(name: AllPaths<z.TypeOf<T>>, props?: Props) => Props;