@g4rcez/components 3.0.0-0 → 3.0.0

package/dist/components/floating/modal.jsx

@@ -2,12 +2,15 @@
 import { FloatingFocusManager, FloatingOverlay, FloatingPortal, useClick, useDismiss, useFloating, useInteractions, useRole, } from "@floating-ui/react";
 import { cva } from "class-variance-authority";
 import { XIcon } from "lucide-react";
-import { motion, MotionConfig, useMotionValue, animate } from "motion/react";
+import { AnimatePresence, motion, MotionConfig, useMotionValue, animate, } from "motion/react";
 import { Slot } from "../core/slot";
-import React, { forwardRef, Fragment, useEffect, useId, useImperativeHandle, useRef } from "react";
+import React, { forwardRef, Fragment, useEffect, useId, useImperativeHandle, useRef, useState, useCallback, } from "react";
 import { useMediaQuery } from "../../hooks/use-media-query";
 import { css, mergeRefs } from "../../lib/dom";
 import { useFloatingRef } from "../../hooks/use-floating-ref";
+import { Button } from "../core/button";
+const ConfirmContext = React.createContext(async () => false);
+export const useConfirm = () => React.useContext(ConfirmContext);
 const animationDuration = "500ms";
 const drawerLeft = {
     exit: { x: ["0%", "-30%"], opacity: 0, animationDuration },
@@ -76,13 +79,13 @@ const Draggable = (props) => {
             return props.value.set(value);
         }
     };
-    return (<motion.button draggable dragListener dragMomentum type="button" animate={false} dragElastic={0} dragPropagation initial={false} onDrag={onDrag} dragSnapToOrigin dragDirectionLock drag={props.sheet ? "y" : "x"} dragConstraints={dragConstraints} whileDrag={{ cursor: "grabbing" }} className={css("absolute rounded-lg isolate z-calendar", props.sheet ? "cursor-row-resize" : "cursor-col-resize bg-floating-border", props.sheet
+    return (<motion.button draggable dragListener dragMomentum type="button" animate={false} dragElastic={0} dragPropagation initial={false} onDrag={onDrag} dragSnapToOrigin dragDirectionLock drag={props.sheet ? "y" : "x"} dragConstraints={dragConstraints} whileDrag={{ cursor: "grabbing" }} className={css("absolute isolate z-calendar 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")}>
-      {props.sheet ? <div className="w-1/4 h-2 rounded-lg bg-floating-border"/> : null}
-    </motion.button>);
+            {props.sheet ? <div className="h-2 w-1/4 rounded-lg bg-floating-border"/> : null}
+        </motion.button>);
 };
 const positions = { drawer: "right", sheet: "none", dialog: "none" };
 const fetchPosition = (isDesktop, forceType, propsType, propsPosition) => {
@@ -126,7 +129,10 @@ export const Modal = forwardRef(({ open, title, footer, asChild, trigger, childr
         sheetY.set(undefined);
     }, [type, floatingSize, sheetY]);
     const onClose = () => onChange(false);
-    useImperativeHandle(externalRef, () => ({ context: floating.context, floating: removeScrollRef.current }), [floating.context, removeScrollRef]);
+    useImperativeHandle(externalRef, () => ({ context: floating.context, floating: removeScrollRef.current }), [
+        floating.context,
+        removeScrollRef,
+    ]);
     const onDragHeader = (_, info) => {
         const div = floating.refs.floating.current;
         const rect = div.getBoundingClientRect();
@@ -142,33 +148,37 @@ export const Modal = forwardRef(({ open, title, footer, asChild, trigger, childr
         onChange?.(false);
         return setTimeout(() => floatingSize.set(undefined), 350);
     };
-    const draggableMotionProps = type === "sheet" ? {
-        drag: "y",
-        animate: false,
-        dragElastic: 0,
-        initial: false,
-        dragConstraints,
-        draggable: true,
-        dragListener: true,
-        dragMomentum: true,
-        onDrag: onDragHeader,
-        dragPropagation: true,
-        dragSnapToOrigin: true,
-        dragDirectionLock: true,
-        whileDrag: { cursor: "grabbing" },
-    } : { animate: animated, initial: false };
+    const draggableMotionProps = type === "sheet"
+        ? {
+            drag: "y",
+            animate: false,
+            dragElastic: 0,
+            initial: false,
+            dragConstraints,
+            draggable: true,
+            dragListener: true,
+            dragMomentum: true,
+            onDrag: onDragHeader,
+            dragPropagation: true,
+            dragSnapToOrigin: true,
+            dragDirectionLock: true,
+            whileDrag: { cursor: "grabbing" },
+        }
+        : { animate: animated, initial: false };
     const scrollInitial = useMotionValue(undefined);
     const scroll = useMotionValue(undefined);
     const Component = asChild ? Slot : motion.button;
     return (<Fragment>
-        {trigger ? (<Component ref={floating.refs.setReference} {...interactions.getReferenceProps()} layoutId={layoutId} type="button">
-            {Trigger}
-          </Component>) : null}
-        <FloatingPortal preserveTabOrder root={root}>
-          {open ? (<FloatingOverlay lockScroll className={css("inset-0 flex isolate bg-floating-overlay/70 z-overlay h-dvh overflow-clip!", type === "drawer" ? "" : "items-start justify-center lg:p-10 pt-10", overlayClassName)}>
-              <MotionConfig reducedMotion={animated ? "user" : "always"}>
-                <FloatingFocusManager guards modal closeOnFocusOut={closeOnFocusOut} context={floating.context}>
-                  <motion.div {...props} {...(title
+                {trigger ? (<Component ref={floating.refs.setReference} {...interactions.getReferenceProps()} layoutId={layoutId} type="button">
+                        {Trigger}
+                    </Component>) : null}
+                <MotionConfig reducedMotion={animated ? "user" : "always"}>
+                    <FloatingPortal preserveTabOrder root={root}>
+                        <AnimatePresence mode="wait" propagate>
+                            {open ? (<FloatingOverlay lockScroll className={css("inset-0 isolate z-overlay flex h-[100dvh] !overflow-clip bg-floating-overlay/80", type === "drawer" ? "" : "items-start justify-center pt-10 lg:p-10", overlayClassName)}>
+                                    <FloatingFocusManager guards modal closeOnFocusOut={closeOnFocusOut} context={floating.context}>
+                                        <AnimatePresence propagate>
+                                            <motion.div {...props} {...(title
             ? {
                 "aria-labelledby": headingId,
                 "aria-describedby": descriptionId,
@@ -178,20 +188,21 @@ export const Modal = forwardRef(({ open, title, footer, asChild, trigger, childr
             ref: mergeRefs(floating.refs.setFloating, removeScrollRef),
             className: css(variants({ position, type }), className, "isolate overscroll-contain"),
         })} exit="exit" layout={true} animate="enter" initial="initial" layoutId={layoutId} variants={animation} data-component="modal" style={type === "drawer" ? { width: floatingSize } : { height: floatingSize, y: sheetY }}>
-                    {useResizer && resizer ? (<Draggable onChange={onChange} value={floatingSize} sheet={type === "sheet"} position={position} parent={floating.refs.floating}/>) : null}
-                    {title ? (<motion.header {...draggableMotionProps} className="relative w-full isolate">
-                        {title ? (<h2 id={headingId} className="block px-8 pb-2 text-3xl font-medium leading-relaxed border-b select-text border-floating-border">
-                            {title}
-                          </h2>) : null}
-                      </motion.header>) : null}
-                    <motion.section ref={innerContent} data-component="modal-body" className={css("flex-1 select-text overflow-y-auto px-8 py-1", bodyClassName)} onTouchEnd={async () => {
+                                                {useResizer && resizer ? (<Draggable onChange={onChange} value={floatingSize} sheet={type === "sheet"} position={position} parent={floating.refs.floating}/>) : null}
+                                                {title ? (<motion.header {...draggableMotionProps} className="relative isolate w-full">
+                                                        {title ? (<h2 id={headingId} className="block select-text border-b border-floating-border px-8 pb-2 text-3xl font-medium leading-relaxed">
+                                                                {title}
+                                                            </h2>) : null}
+                                                    </motion.header>) : null}
+                                                <motion.section ref={innerContent} data-component="modal-body" className={css("flex-1 select-text overflow-y-auto px-8 py-1", bodyClassName)} onTouchEnd={async () => {
                 scroll.set(undefined);
                 scrollInitial.set(undefined);
                 if (isDragging.current) {
                     const currentY = sheetY.get() || 0;
                     const threshold = window.innerHeight * 0.2;
                     if (currentY > threshold) {
-                        await animate(sheetY, window.innerHeight, { duration: 0.2, ease: "easeIn" }).finished;
+                        await animate(sheetY, window.innerHeight, { duration: 0.2, ease: "easeIn" })
+                            .finished;
                         onChange(false);
                     }
                     else {
@@ -224,18 +235,65 @@ export const Modal = forwardRef(({ open, title, footer, asChild, trigger, childr
                 }
                 scroll.set(y);
             }}>
-                      {children}
-                    </motion.section>
-                    {footer ? (<footer className="px-8 pt-4 w-full border-t select-text border-floating-border">{footer}</footer>) : null}
-                    {closable ? (<nav className="absolute top-1 right-4 z-floating">
-                        <button type="button" onClick={onClose} className="p-1 opacity-70 transition-colors hover:opacity-100 hover:text-danger focus:text-danger">
-                          <XIcon />
-                        </button>
-                      </nav>) : null}
-                  </motion.div>
-                </FloatingFocusManager>
-              </MotionConfig>
-            </FloatingOverlay>) : null}
-        </FloatingPortal>
-      </Fragment>);
+                                                    {children}
+                                                </motion.section>
+                                                {footer ? (<footer className="w-full select-text border-t border-floating-border px-8 pt-4">{footer}</footer>) : null}
+                                                {closable ? (<nav className="absolute right-4 top-1 z-floating">
+                                                        <button type="button" onClick={onClose} className="p-1 opacity-70 transition-colors hover:text-danger hover:opacity-100 focus:text-danger">
+                                                            <XIcon />
+                                                        </button>
+                                                    </nav>) : null}
+                                            </motion.div>
+                                        </AnimatePresence>
+                                    </FloatingFocusManager>
+                                </FloatingOverlay>) : null}
+                        </AnimatePresence>
+                    </FloatingPortal>
+                </MotionConfig>
+            </Fragment>);
 });
+let confirmGlobal = async (options) => {
+    if (typeof window !== "undefined") {
+        console.warn("ConfirmationProvider is not mounted");
+    }
+    return false;
+};
+Modal.confirm = (options) => confirmGlobal(options);
+export const ModalConfirmProvider = ({ children }) => {
+    const [open, setOpen] = useState(false);
+    const [options, setOptions] = useState({});
+    const [resolve, setResolve] = useState(() => { });
+    const confirmAction = useCallback((opts) => {
+        setOptions(opts);
+        setOpen(true);
+        return new Promise((res) => {
+            setResolve(() => res);
+        });
+    }, []);
+    useEffect(() => {
+        confirmGlobal = confirmAction;
+    }, [confirmAction]);
+    const onConfirm = () => {
+        setOpen(false);
+        const value = options.confirm?.value ?? true;
+        resolve(value ?? true);
+    };
+    const onCancel = () => {
+        setOpen(false);
+        const value = options.cancel?.value ?? false;
+        resolve(value ?? false);
+    };
+    return (<ConfirmContext.Provider value={confirmAction}>
+            {children}
+            <Modal open={open} type="dialog" closable={false} onChange={setOpen} overlayClickClose={false} title={options.title || "Confirmation"} className="container max-w-dialog lg:max-w-96" footer={<div className="flex justify-end gap-2">
+                        <Button theme={options.cancel?.theme || "ghost-muted"} onClick={onCancel}>
+                            {options.cancel?.text || "Cancel"}
+                        </Button>
+                        <Button theme={options.confirm?.theme || "primary"} onClick={onConfirm}>
+                            {options.confirm?.text || "Confirm"}
+                        </Button>
+                    </div>}>
+                <div className="py-2 text-foreground">{options.description}</div>
+            </Modal>
+        </ConfirmContext.Provider>);
+};

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

@@ -1 +1 @@
-{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/floating/tooltip.tsx"],"names":[],"mappings":"AACA,OAAO,EAQH,KAAK,SAAS,EAWjB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,KAA4D,MAAM,OAAO,CAAC;AACjF,OAAO,EAAa,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AAI9E,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEnD,MAAM,MAAM,YAAY,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,MAAM,IAAI,gBAAgB,CAC7E;IACI,KAAK,EAAE,KAAK,CAAC;IACb,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;CACnC,EACD,CAAC,CACJ,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,CAAC,CAAC,SAAS,aAAa,GAAG,MAAM,EAAE,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,YAyF9E,CAAC"}
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/floating/tooltip.tsx"],"names":[],"mappings":"AACA,OAAO,EAQH,KAAK,SAAS,EAWjB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,KAA4D,MAAM,OAAO,CAAC;AACjF,OAAO,EAAa,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AAI9E,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEnD,MAAM,MAAM,YAAY,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,MAAM,IAAI,gBAAgB,CAC7E;IACI,KAAK,EAAE,KAAK,CAAC;IACb,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;CACnC,EACD,CAAC,CACJ,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,CAAC,CAAC,SAAS,aAAa,GAAG,MAAM,EAAE,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,YAmF9E,CAAC"}

package/dist/components/floating/tooltip.jsx

@@ -18,13 +18,7 @@ export const Tooltip = forwardRef(function Tooltip({ as, open, title, children,
         open: innerOpen,
         whileElementsMounted: autoUpdate,
         onOpenChange: open ? undefined : toggleBoth,
-        middleware: [
-            shift(),
-            offset(5),
-            autoPlacement(),
-            arrow({ padding: 5, element: arrowRef }),
-            flip({ fallbackAxisSideDirection: "start" }),
-        ],
+        middleware: [shift(), offset(5), autoPlacement(), arrow({ padding: 5, element: arrowRef }), flip({ fallbackAxisSideDirection: "start" })],
     });
     const dismiss = useDismiss(context, { enabled });
     const role = useRole(context, { role: "tooltip", enabled });
@@ -55,7 +49,7 @@ export const Tooltip = forwardRef(function Tooltip({ as, open, title, children,
                     {title}
                 </Component>
                 {innerOpen && (<FloatingPortal>
-                        <Polymorph {...getFloatingProps()} ref={refs.setFloating} style={floatingStyles} className="p-3 rounded-lg border isolate z-tooltip border-tooltip-border bg-tooltip-background text-tooltip-foreground shadow-shadow-floating">
+                        <Polymorph {...getFloatingProps()} ref={refs.setFloating} style={floatingStyles} className="isolate z-tooltip rounded-lg border border-tooltip-border bg-tooltip-background p-3 text-tooltip-foreground shadow-shadow-floating">
                             <FloatingArrow ref={arrowRef} context={context} strokeWidth={0.1} className="fill-tooltip-background stroke-tooltip-border"/>
                             {children}
                         </Polymorph>

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

@@ -22,5 +22,5 @@ export type WizardProps = {
         previous?: string;
     };
 };
-export declare const Wizard: ({ steps, active, onClose, onFinish, onChange, labels: labelsProp, }: WizardProps) => React.JSX.Element | null;
+export declare const Wizard: ({ steps, active, onClose, onFinish, onChange, labels: labelsProp }: WizardProps) => React.JSX.Element | null;
 //# sourceMappingURL=wizard.d.ts.map

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

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

package/dist/components/floating/wizard.jsx

@@ -13,15 +13,15 @@ const getRect = (element) => {
     return element.getBoundingClientRect();
 };
 const resolveElement = (element) => {
-    if (typeof element === 'string') {
+    if (typeof element === "string") {
         return document.querySelector(element);
     }
-    if ('current' in element) {
+    if ("current" in element) {
         return element.current;
     }
     return element;
 };
-export const Wizard = ({ steps, active = false, onClose = noop, onFinish = noop, onChange = noop, labels: labelsProp, }) => {
+export const Wizard = ({ steps, active = false, onClose = noop, onFinish = noop, onChange = noop, labels: labelsProp }) => {
     const translation = useTranslations();
     const [index, setIndex] = useState(0);
     const currentStep = steps[index];
@@ -40,14 +40,9 @@ export const Wizard = ({ steps, active = false, onClose = noop, onFinish = noop,
         open: active && isOverlayReady,
         placement: currentStep?.side || "bottom",
         whileElementsMounted: autoUpdate,
-        middleware: [
-            offset(10),
-            flip(),
-            shift(),
-            arrow({ element: arrowRef }),
-        ],
+        middleware: [offset(10), flip(), shift(), arrow({ element: arrowRef })],
     });
-    const { getFloatingProps } = useInteractions([useRole(context),]);
+    const { getFloatingProps } = useInteractions([useRole(context)]);
     useEffect(() => {
         if (active) {
             setIndex(0);
@@ -114,51 +109,53 @@ export const Wizard = ({ steps, active = false, onClose = noop, onFinish = noop,
     const hasNext = index < steps.length - 1;
     const hasPrevious = index > 0;
     return (<FloatingPortal>
-      <div className="fixed inset-0 pointer-events-none z-wizard">
-        <svg className="absolute inset-0 w-full h-full fill-current text-floating-overlay/70" xmlns="http://www.w3.org/2000/svg">
-          <defs>
-            <mask id="driver-mask">
-              <rect x="0" y="0" width="100%" height="100%" fill="white"/>
-              <motion.rect rx="4" fill="black" initial={false} onAnimationComplete={() => setIsOverlayReady(true)} transition={{ type: "spring", duration: 0.5, ease: "easeInOut" }} animate={{
+            <div className="pointer-events-none fixed inset-0 z-wizard">
+                <svg className="absolute inset-0 h-full w-full fill-current text-floating-overlay/70" xmlns="http://www.w3.org/2000/svg">
+                    <defs>
+                        <mask id="driver-mask">
+                            <rect x="0" y="0" width="100%" height="100%" fill="white"/>
+                            <motion.rect rx="4" fill="black" initial={false} onAnimationComplete={() => setIsOverlayReady(true)} transition={{ type: "spring", duration: 0.5, ease: "easeInOut" }} animate={{
             x: rect.left - 5,
             y: rect.top - 5,
             width: rect.width + 10,
-            height: rect.height + 10
+            height: rect.height + 10,
         }}/>
-            </mask>
-          </defs>
-          <rect x="0" y="0" width="100%" height="100%" mask="url(#driver-mask)" className="pointer-events-auto"/>
-        </svg>
-        <AnimatePresence mode="wait">
-          {currentStep && isOverlayReady && (<div {...getFloatingProps()} ref={refs.setFloating} style={element ? floatingStyles : {
-                position: "fixed",
-                top: "50%",
-                left: "50%",
-                transform: "translate(-50%, -50%)"
-            }} className="outline-hidden pointer-events-auto">
-              <motion.div transition={{ duration: 0.2 }} exit={{ opacity: 0, scale: 0.9 }} animate={{ opacity: 1, scale: 1 }} initial={{ opacity: 0, scale: 0.9 }} className="flex flex-col gap-3 p-4 w-80 max-w-sm rounded-lg border shadow-lg bg-card-background border-card-border">
-                {element && (<FloatingArrow ref={arrowRef} context={context} className="fill-card-background stroke-card-border"/>)}
-                {currentStep.title && (<h3>{currentStep.title}</h3>)}
-                {currentStep.description && (<Fragment>{currentStep.description}</Fragment>)}
-                <div className="flex justify-between items-center pt-2 mt-2 border-t border-floating-border">
-                  <Button theme="raw" size="small" onClick={onClose} className="text-xs text-muted-foreground hover:text-foreground">
-                    {labels.skip}
-                  </Button>
-                  <div className="flex gap-2">
-                    {hasPrevious && (<Button size="small" theme="neutral" onClick={handlePrevious}>
-                        {labels.previous}
-                      </Button>)}
-                    <Button size="small" onClick={handleNext}>
-                      {hasNext ? labels.next : labels.finish}
-                    </Button>
-                  </div>
-                </div>
-                <div className="absolute top-2 right-2 text-xs text-muted-foreground">
-                  {index + 1} / {steps.length}
-                </div>
-              </motion.div>
-            </div>)}
-        </AnimatePresence>
-      </div>
-    </FloatingPortal>);
+                        </mask>
+                    </defs>
+                    <rect x="0" y="0" width="100%" height="100%" mask="url(#driver-mask)" className="pointer-events-auto"/>
+                </svg>
+                <AnimatePresence mode="wait">
+                    {currentStep && isOverlayReady && (<div {...getFloatingProps()} ref={refs.setFloating} style={element
+                ? floatingStyles
+                : {
+                    position: "fixed",
+                    top: "50%",
+                    left: "50%",
+                    transform: "translate(-50%, -50%)",
+                }} className="pointer-events-auto outline-none">
+                            <motion.div transition={{ duration: 0.2 }} exit={{ opacity: 0, scale: 0.9 }} animate={{ opacity: 1, scale: 1 }} initial={{ opacity: 0, scale: 0.9 }} className="flex w-80 max-w-sm flex-col gap-3 rounded-lg border border-floating-border bg-floating-background p-4 shadow-lg">
+                                {element && (<FloatingArrow ref={arrowRef} context={context} className="fill-floating-background stroke-floating-border"/>)}
+                                {currentStep.title && <h3>{currentStep.title}</h3>}
+                                {currentStep.description && <Fragment>{currentStep.description}</Fragment>}
+                                <div className="mt-2 flex items-center justify-between border-t border-floating-border pt-2">
+                                    <Button theme="raw" size="small" onClick={onClose} className="text-xs text-muted-foreground hover:text-foreground">
+                                        {labels.skip}
+                                    </Button>
+                                    <div className="flex gap-2">
+                                        {hasPrevious && (<Button size="small" theme="ghost-muted" onClick={handlePrevious}>
+                                                {labels.previous}
+                                            </Button>)}
+                                        <Button size="small" onClick={handleNext}>
+                                            {hasNext ? labels.next : labels.finish}
+                                        </Button>
+                                    </div>
+                                </div>
+                                <div className="absolute right-2 top-2 text-xs text-muted-foreground">
+                                    {index + 1} / {steps.length}
+                                </div>
+                            </motion.div>
+                        </div>)}
+                </AnimatePresence>
+            </div>
+        </FloatingPortal>);
 };

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":"AAiBA,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;IACxE,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;CAClC,CAAC;AAiCF,eAAO,MAAM,YAAY,yGA0WxB,CAAC"}
+{"version":3,"file":"autocomplete.d.ts","sourceRoot":"","sources":["../../../src/components/form/autocomplete.tsx"],"names":[],"mappings":"AAiBA,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;AA6BF,eAAO,MAAM,YAAY,yGA+WxB,CAAC"}

package/dist/components/form/autocomplete.jsx

@@ -15,15 +15,15 @@ import { InputField } from "./input-field";
 const Frag = (props) => <Fragment>{props.children}</Fragment>;
 const transitionStyles = {
     duration: 200,
-    initial: { transform: "scaleY(0)", opacity: 0.2 },
     open: { transform: "scaleY(1)", opacity: 1 },
     close: { transform: "scaleY(0)", opacity: 0 },
+    initial: { transform: "scaleY(0)", opacity: 0.2 },
 };
 const emptyRef = [];
 const List = forwardRef(function VirtualList(props, ref) {
-    return (<motion.ul {...props} ref={ref} className="overscroll-contain w-full rounded-lg h-96">
-      <AnimatePresence>{props.children}</AnimatePresence>
-    </motion.ul>);
+    return (<motion.ul {...props} ref={ref} className="max-h-96 w-full overscroll-contain rounded-lg">
+            <AnimatePresence>{props.children}</AnimatePresence>
+        </motion.ul>);
 });
 const Item = forwardRef(function VirtualItem({ item, context, ...props }, ref) {
     return <motion.li {...props} ref={ref} className="first:rounded-t-lg last:rounded-t-lg"/>;
@@ -56,7 +56,10 @@ export const Autocomplete = forwardRef(({ left, error, right, loading, options,
         : options;
     const openDropdown = () => flushSync(() => setOpen(true));
     const list = shadow
-        ? fzf(innerOptions, "value", [{ key: "value", value: shadow }, { key: "label", value: shadow }])
+        ? fzf(innerOptions, "value", [
+            { key: "value", value: shadow },
+            { key: "label", value: shadow },
+        ])
         : innerOptions;
     const setClosed = () => {
         setOpen(false);
@@ -70,10 +73,11 @@ export const Autocomplete = forwardRef(({ left, error, right, loading, options,
         open,
         transform: true,
         onOpenChange: setOpen,
+        placement: "bottom-start",
         whileElementsMounted: autoUpdate,
         middleware: [
             offset(4),
-            autoPlacement({ allowedPlacements: ['top-start', 'bottom-start'], alignment: "start" }),
+            autoPlacement({ allowedPlacements: ["top-start", "bottom-start"], alignment: "start" }),
             size({
                 padding: 10,
                 elementContext: "reference",
@@ -83,7 +87,7 @@ export const Autocomplete = forwardRef(({ left, error, right, loading, options,
                     const DEFAULT_SIZE = getRemainingSize(refs.reference.current, window.innerHeight);
                     const maxH = Math.min(fullSize < MIN_SIZE ? DEFAULT_SIZE : fullSize, DEFAULT_SIZE, args.availableHeight);
                     const size = displayList.length === 0 ? MIN_SIZE : Math.min(maxH, DEFAULT_SIZE, fullSize);
-                    const mw = `${fieldset.current.getBoundingClientRect().width}px`;
+                    const mw = `${fieldset.current?.getBoundingClientRect().width || DEFAULT_SIZE}px`;
                     Object.assign(args.elements.floating.style, { width: mw, maxWidth: mw, height: size });
                 },
             }),
@@ -176,19 +180,19 @@ export const Autocomplete = forwardRef(({ left, error, right, loading, options,
     const shadowId = `${id}-shadow`;
     const isEmpty = displayList.length === 0;
     const isTopPlacement = placement === "top" || placement === "top-start";
-    return (<InputField {...props} left={left} error={error} ref={fieldset} form={props.form} loading={loading} name={props.name} feedback={open && (isTopPlacement) ? props.title : 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={<span className="flex gap-0.5 items-center">
-            {right}
-            <button type="button" className="p-2 transition-colors md:p-1 link:text-primary" onClick={onCaretDownClick}>
-              <ChevronDown size={20}/>
-              <span className="sr-only">{translation.inputCaretDown}</span>
-            </button>
-            {value ? (<button type="button" onClick={onClose} className="p-2 transition-colors md:p-1 link:text-danger">
-                <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-                  <path d="M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z" fill="currentColor" fillRule="evenodd" clipRule="evenodd"/>
-                </svg>
-              </button>) : null}
-          </span>}>
-        <input data-shadow="true" {...getReferenceProps({
+    return (<InputField {...props} left={left} error={error} ref={fieldset} form={props.form} loading={loading} name={props.name} feedback={open && isTopPlacement ? props.title : 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={<span className="flex items-center gap-0.5">
+                        {right}
+                        <button type="button" className="p-2 transition-colors link:text-primary md:p-1" onClick={onCaretDownClick}>
+                            <ChevronDown size={20}/>
+                            <span className="sr-only">{translation.inputCaretDown}</span>
+                        </button>
+                        {value ? (<button type="button" onClick={onClose} className="p-2 transition-colors link:text-danger md:p-1">
+                                <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                    <path d="M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z" fill="currentColor" fillRule="evenodd" clipRule="evenodd"/>
+                                </svg>
+                            </button>) : null}
+                    </span>}>
+                <input data-shadow="true" {...getReferenceProps({
         ...props,
         onFocus,
         pattern,
@@ -229,14 +233,14 @@ export const Autocomplete = forwardRef(({ left, error, right, loading, options,
                 }
             }
         },
-    })} data-value={value} data-error={!!error} data-name={id} data-target={id} required={required} value={open ? shadow : options.length === 0 ? "" : label || value} aria-autocomplete="list" autoComplete="off" className={css("input placeholder-input-mask group h-input-height w-full flex-1", "rounded-md bg-transparent px-input-x py-input-y text-foreground", "outline-hidden transition-colors focus:ring-2 focus:ring-inset focus:ring-primary", "group-error:text-danger group-error:placeholder-input-mask-error", "text-base group-focus-within:border-primary group-hover:border-primary", props.className)}/>
-        <input id={id} name={id} type="hidden" data-origin={id} ref={externalRef} required={required} defaultValue={props.value || value || undefined}/>
-        <FloatingPortal preserveTabOrder>
-          {open ? (<FloatingFocusManager modal guards returnFocus={false} context={context} initialFocus={-1} visuallyHiddenDismiss>
-              <motion.div {...getFloatingProps({
+    })} data-value={value} data-error={!!error} data-name={id} data-target={id} required={required} value={open ? shadow : options.length === 0 ? "" : label || value} aria-autocomplete="list" autoComplete="off" className={css("input placeholder-input-mask group h-input-height w-full flex-1", "rounded-md bg-transparent px-input-x py-input-y text-foreground", "outline-none transition-colors focus:ring-2 focus:ring-inset focus:ring-primary", "group-error:text-danger group-error:placeholder-input-mask-error", "text-base group-focus-within:border-primary group-hover:border-primary", props.className)}/>
+                <input id={id} name={id} type="hidden" data-origin={id} ref={externalRef} required={required} defaultValue={props.value || value || undefined}/>
+                <FloatingPortal preserveTabOrder>
+                    {open ? (<FloatingFocusManager modal guards returnFocus={false} context={context} initialFocus={-1} visuallyHiddenDismiss>
+                            <motion.div {...getFloatingProps({
             ref: mergeRefs(removeScrollRef, refs.setFloating),
             style: { ...transitions.styles, left: x, top: y ?? 0, position: strategy, height: "auto" },
-        })} initial={false} data-floating="true" animate={{ height: isEmpty ? "auto" : h }} className={css("overscroll-contain p-0 m-0 max-h-80 list-none rounded-t-lg rounded-b-lg border ease-in-out isolate z-floating border-floating-border bg-floating-background text-foreground shadow-floating", isTopPlacement ? "origin-[bottom_center]" : "origin-[top_center]")} onAnimationComplete={() => {
+        })} initial={false} data-floating="true" animate={{ height: isEmpty ? "auto" : h }} className={css("shadow-floating isolate z-floating m-0 max-h-80 origin-[top_center] list-none overscroll-contain rounded-b-lg rounded-t-lg border border-floating-border bg-floating-background p-0 text-foreground ease-in-out", isTopPlacement ? "origin-[bottom_center]" : "origin-[top_center]")} onAnimationComplete={() => {
                 if (!open)
                     return setH(0);
                 const ul = refs.floating.current;
@@ -244,12 +248,12 @@ export const Autocomplete = forwardRef(({ left, error, right, loading, options,
                 const sum = (li ? li.getBoundingClientRect().height : MIN_SIZE) * displayList.length;
                 return flushSync(() => setH(sum + 2));
             }}>
-                {isEmpty ? (<div role="option" className="w-full border-b border-tooltip-border">
-                    <span className="flex justify-between p-2 w-full text-left text-disabled">
-                      {emptyMessage || translation.autocompleteEmpty}
-                    </span>
-                  </div>) : null}
-                <Virtuoso overscan={40} ref={virtuoso} hidden={isEmpty} data={displayList} style={{ height: h }} defaultItemHeight={MIN_SIZE} components={components} scrollerRef={(e) => void (scroller.current = e)} className="overscroll-contain p-0 max-h-full rounded-lg border-floating bg-floating-background text-foreground" itemContent={(i, option) => {
+                                {isEmpty ? (<div role="option" className="w-full border-b border-tooltip-border">
+                                        <span className="flex w-full justify-between p-2 text-left text-disabled">
+                                            {emptyMessage || translation.autocompleteEmpty}
+                                        </span>
+                                    </div>) : null}
+                                <Virtuoso overscan={40} ref={virtuoso} hidden={isEmpty} data={displayList} style={{ height: h }} defaultItemHeight={MIN_SIZE} components={components} scrollerRef={(e) => void (scroller.current = e)} className="border-floating max-h-full overscroll-contain rounded-lg bg-floating-background p-0 text-foreground" itemContent={(i, option) => {
                 const Label = option.Render ?? Frag;
                 const active = value === option.value || value === option.label;
                 const selected = index === i;
@@ -265,11 +269,11 @@ export const Autocomplete = forwardRef(({ left, error, right, loading, options,
                     onClick: () => onSelect(option, i),
                     className: `cursor-pointer min-h-10 hover:bg-floating-hover w-full p-2 text-left ${active ? "bg-primary-hover text-primary-foreground" : ""} ${selected ? "bg-floating-hover text-floating-foreground" : ""}`,
                 })}>
-                        <Label {...props} label={option.label} value={option.value} children={children}/>
-                      </button>);
+                                                <Label {...props} label={option.label} value={option.value} children={children}/>
+                                            </button>);
             }}/>
-              </motion.div>
-            </FloatingFocusManager>) : null}
-        </FloatingPortal>
-      </InputField>);
+                            </motion.div>
+                        </FloatingFocusManager>) : null}
+                </FloatingPortal>
+            </InputField>);
 });

package/dist/components/form/checkbox.jsx

@@ -3,10 +3,10 @@ import { css } from "../../lib/dom";
 export const Checkbox = forwardRef(({ children, asTask = false, labelClassName, loading, error, className = "", size, container, ...props }, ref) => {
     const d = props.disabled || loading;
     return (<label aria-disabled={d} data-disabled={d} data-task={asTask} data-component="checkbox" className={css("group flex w-fit flex-wrap items-center font-normal data-[disabled=true]:cursor-not-allowed", asTask ? "group-checkbox-checked:line-through" : "", container)}>
-                <input {...props} ref={ref} disabled={d} type="checkbox" data-task={asTask} className={css("form-checkbox mr-2 inline-block size-4 appearance-none rounded-sm border-card-border bg-origin-border text-primary focus:ring-primary disabled:opacity-70 group-aria-disabled:cursor-not-allowed", className)}/>
+                <input {...props} ref={ref} disabled={d} type="checkbox" data-task={asTask} className={css("form-checkbox mr-2 inline-block size-4 appearance-none rounded border-card-border bg-origin-border text-primary focus:ring-primary disabled:opacity-70 group-aria-disabled:cursor-not-allowed", className)}/>
                 {children}
                 <span data-name="checkbox-label" className={css("min-w-full flex-1 text-xs text-danger empty:mt-0 empty:hidden", labelClassName)}>
-                {error}
-            </span>
+                    {error}
+                </span>
             </label>);
 });

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

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