@g4rcez/components 2.0.34 → 2.0.36

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

@@ -1 +1 @@
-{"version":3,"file":"typography.d.ts","sourceRoot":"","sources":["../../../src/components/core/typography.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC/C,OAAO,KAAK,EAAE,EAAE,KAAK,cAAc,EAAY,MAAM,OAAO,CAAC;AAE7D,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEpC,eAAO,MAAM,SAAS,GAAI,OAAO,cAAc,CAAC,GAAG,CAAC,sBAEnD,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,OAAO,cAAc,CAAC,GAAG,CAAC,sBAErD,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACpB,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,KAAK,EAAE,KAAK,CAAC;IACb,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAM,IAAI,GAAI,OAAO,KAAK,CAAC,iBAAiB,CAAC,SAAS,CAAC,sBAS7D,CAAC;AAEF,eAAO,MAAM,SAAS,GAAI,OAAO,iBAAiB,CAAC;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC,sBAKpE,CAAC;AAEF,KAAK,eAAe,GAAG;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,KAAK,CAAC;CACtB,CAAA;AAED,eAAO,MAAM,UAAU,GAAI,OAAO,iBAAiB,CAAC,eAAe,CAAC,sBAWnE,CAAA"}
+{"version":3,"file":"typography.d.ts","sourceRoot":"","sources":["../../../src/components/core/typography.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC/C,OAAO,KAAK,EAAE,EAAE,KAAK,cAAc,EAAY,MAAM,OAAO,CAAC;AAE7D,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEpC,eAAO,MAAM,SAAS,GAAI,OAAO,cAAc,CAAC,GAAG,CAAC,sBAEnD,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,OAAO,cAAc,CAAC,GAAG,CAAC,sBAErD,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,KAAK,EAAE,KAAK,CAAC;IACb,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,IAAI,GAAI,OAAO,KAAK,CAAC,iBAAiB,CAAC,SAAS,CAAC,sBAS7D,CAAC;AAEF,eAAO,MAAM,SAAS,GAAI,OAAO,iBAAiB,CAAC;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC,sBAKpE,CAAC;AAEF,KAAK,eAAe,GAAG;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,KAAK,CAAC;CACpB,CAAA;AAED,eAAO,MAAM,UAAU,GAAI,OAAO,iBAAiB,CAAC,eAAe,CAAC,sBAWnE,CAAA"}

package/dist/components/core/typography.jsx

@@ -3,24 +3,24 @@ import { css } from "../../lib/dom";
 export const Paragraph = (props) => (<p {...props} className={css("text-base leading-snug", props.className)}/>);
 export const Description = (props) => (<p {...props} className={css("mb-kilo text-sm text-secondary", props.className)}/>);
 export const Info = (props) => (<div className={css(`flex ${props.row ? "flex-row items-center" : "flex-col"} gap-1`, props.className)}>
-        <Fragment>
-            <span className="text-sm font-medium tracking-wide">{props.row ? `${props.label}:` : props.label}</span>
-            <span className={`w-fit ${props.disabled ? "text-disabled" : ""} ${props.row ? "text-base" : "text-lg"}`}>
-                {props.children}
-            </span>
-        </Fragment>
-    </div>);
+    <Fragment>
+      <span className="text-sm font-medium tracking-wide">{props.row ? `${props.label}:` : props.label}</span>
+      <span className={`w-fit ${props.disabled ? "text-disabled" : ""} ${props.row ? "text-base" : "text-lg"}`}>
+        {props.children}
+      </span>
+    </Fragment>
+  </div>);
 export const PageTitle = (props) => (<div>
-        <h2 className="text-3xl font-bold typography tracking-wide">{props.title}</h2>
-        <p className="text-secondary typography">{props.children}</p>
-    </div>);
+    <h2 className="text-3xl font-bold typography tracking-wide">{props.title}</h2>
+    <p className="text-secondary typography">{props.children}</p>
+  </div>);
 export const PageHeader = (props) => {
     return (<header className="flex flex-row flex-wrap justify-between items-center gap-mega">
-            <div>
-                <PageTitle title={props.title}>{props.description}</PageTitle>
-            </div>
-            <div className="flex gap-kilo items-center">
-                {props.children}
-            </div>
-        </header>);
+      <div>
+        <PageTitle title={props.title}>{props.description}</PageTitle>
+      </div>
+      <div className="flex gap-kilo items-center flex-wrap">
+        {props.children}
+      </div>
+    </header>);
 };

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

@@ -27,7 +27,7 @@ export type ModalProps = Override<HTMLMotionProps<"div">, ({
     overlayClassName: string;
     position: DrawerPosition;
     overlayClickClose: boolean;
-    role: "dialog" | "listbox";
+    role: "dialog";
     interactions: ElementProps[];
     trigger: Label | React.FC<any>;
 }>>;
@@ -55,7 +55,7 @@ export declare const Modal: React.ForwardRefExoticComponent<(Omit<Omit<HTMLMotio
     overlayClassName: string;
     position: DrawerPosition;
     overlayClickClose: boolean;
-    role: "dialog" | "listbox";
+    role: "dialog";
     interactions: ElementProps[];
     trigger: Label | React.FC<any>;
 }> & {
@@ -80,7 +80,7 @@ export declare const Modal: React.ForwardRefExoticComponent<(Omit<Omit<HTMLMotio
     overlayClassName: string;
     position: DrawerPosition;
     overlayClickClose: boolean;
-    role: "dialog" | "listbox";
+    role: "dialog";
     interactions: ElementProps[];
     trigger: Label | React.FC<any>;
 }> & {

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,EASL,KAAK,YAAY,EAClB,MAAM,oBAAoB,CAAC;AAG5B,OAAO,EAAmB,eAAe,EAAmF,MAAM,cAAc,CAAC;AAEjJ,OAAO,KAA+G,MAAM,OAAO,CAAC;AAGpI,OAAO,EAAE,KAAK,EAAO,QAAQ,EAAE,MAAM,aAAa,CAAC;AAInD,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,CAC/B,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;IAC9E,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC,GAAG,OAAO,CAAC;IACV,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;CAChC,CAAC,CACH,CAAC;AAgFF,KAAK,QAAQ,GAAG;IAAE,OAAO,EAAE,GAAG,CAAC;IAAC,QAAQ,EAAE,WAAW,GAAG,IAAI,CAAA;CAAE,CAAC;AAI/D,eAAO,MAAM,KAAK;WAzGN,KAAK;gBAAc,MAAM;;UAC3B,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;;;;eAnBqB,MAAM;YAAU,KAAK;;UAClE,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;;;2CAyUjC,CAAC"}
+{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../src/components/floating/modal.tsx"],"names":[],"mappings":"AACA,OAAO,EASL,KAAK,YAAY,EAClB,MAAM,oBAAoB,CAAC;AAG5B,OAAO,EAAmB,eAAe,EAA4F,MAAM,cAAc,CAAC;AAE1J,OAAO,KAA+G,MAAM,OAAO,CAAC;AAGpI,OAAO,EAAE,KAAK,EAAO,QAAQ,EAAE,MAAM,aAAa,CAAC;AAInD,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,CAC/B,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;IAC9E,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC,GAAG,OAAO,CAAC;IACV,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,CAAC;IACf,YAAY,EAAE,YAAY,EAAE,CAAC;IAC7B,OAAO,EAAE,KAAK,GAAG,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;CAChC,CAAC,CACH,CAAC;AAgFF,KAAK,QAAQ,GAAG;IAAE,OAAO,EAAE,GAAG,CAAC;IAAC,QAAQ,EAAE,WAAW,GAAG,IAAI,CAAA;CAAE,CAAC;AAI/D,eAAO,MAAM,KAAK;WAzGN,KAAK;gBAAc,MAAM;;UAC3B,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;kBACA,YAAY,EAAE;aACnB,KAAK,GAAG,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC;;;;eAnBqB,MAAM;YAAU,KAAK;;UAClE,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;kBACA,YAAY,EAAE;aACnB,KAAK,GAAG,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC;;;2CAuUjC,CAAC"}

package/dist/components/floating/modal.jsx

@@ -2,7 +2,7 @@
 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 { AnimatePresence, motion, MotionConfig, useMotionValue } 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 { useMediaQuery } from "../../hooks/use-media-query";
@@ -91,7 +91,7 @@ const fetchPosition = (isDesktop, forceType, propsType, propsPosition) => {
     return forceType ? positions[type] : positions.sheet;
 };
 const noop = [];
-export const Modal = forwardRef(({ open, title, footer, asChild, trigger, children, onChange, ariaTitle, className, bodyClassName, resizer = true, animated = true, closable = true, forceType = false, layoutId = undefined, overlayClassName = "", type: _type = "dialog", position: propsPosition, overlayClickClose = false, role: roleName = "dialog", interactions: outInteractions = noop, ...props }, externalRef) => {
+export const Modal = forwardRef(({ open, title, footer, asChild, trigger, children, onChange, ariaTitle, className, bodyClassName, resizer = true, animated = true, closable = true, forceType = false, layoutId = undefined, overlayClassName = "", type: _type = "dialog", position: propsPosition, overlayClickClose = false, interactions: outInteractions = noop, ...props }, externalRef) => {
     const innerContent = useRef(null);
     const removeScrollRef = useRef(null);
     const headingId = useId();
@@ -104,17 +104,22 @@ export const Modal = forwardRef(({ open, title, footer, asChild, trigger, childr
     const useResizer = type !== "dialog";
     const floating = useFloating({ open, onOpenChange: onChange, strategy: "fixed" });
     const click = useClick(floating.context, {});
-    const role = useRole(floating.context, { role: roleName });
+    const role = useRole(floating.context, { role: "dialog" });
     const dismiss = useDismiss(floating.context, {
         bubbles: true,
         escapeKey: true,
-        ancestorScroll: true,
         outsidePress: overlayClickClose,
     });
     const interactions = useInteractions([click, dismiss, role].concat(outInteractions));
     const Trigger = trigger;
     const floatingSize = useMotionValue(undefined);
-    useEffect(() => floatingSize.set(undefined), [type, floatingSize]);
+    const sheetY = useMotionValue(undefined);
+    const isDragging = useRef(false);
+    const dragStart = useRef(0);
+    useEffect(() => {
+        floatingSize.set(undefined);
+        sheetY.set(undefined);
+    }, [type, floatingSize, sheetY]);
     const onClose = () => onChange(false);
     useImperativeHandle(externalRef, () => ({ context: floating.context, floating: removeScrollRef.current }), [floating.context, removeScrollRef]);
     const onDragHeader = (_, info) => {
@@ -132,25 +137,6 @@ export const Modal = forwardRef(({ open, title, footer, asChild, trigger, childr
         onChange?.(false);
         return setTimeout(() => floatingSize.set(undefined), 350);
     };
-    const onDragBody = (_, info) => {
-        const div = floating.refs.floating.current;
-        if (info.delta.y < 0 && info.offset.y < 0) {
-            div.scrollTo({ top: div.scrollTop + Math.abs(info.offset.y), behavior: "smooth" });
-            return;
-        }
-        const rect = div.getBoundingClientRect();
-        const v = floatingSize.get() || rect.height;
-        const result = Math.abs(v - info.delta.y);
-        const max = window.outerHeight;
-        const screenHeightToClose = calculateClose(max);
-        if (result >= screenHeightToClose)
-            return floatingSize.set(result);
-        if (document.activeElement instanceof HTMLElement) {
-            document.activeElement?.blur();
-        }
-        onChange?.(false);
-        return setTimeout(() => floatingSize.set(undefined), 350);
-    };
     const draggableMotionProps = type === "sheet" ? {
         drag: "y",
         animate: false,
@@ -187,40 +173,52 @@ export const Modal = forwardRef(({ open, title, footer, asChild, trigger, childr
             "aria-modal": open,
             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 }}>
+        })} 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" dragConstraints={dragConstraints} drag={isDesktop ? undefined : "y"} onDrag={type === "sheet" ? (isDesktop ? undefined : onDragBody) : undefined} className={css("flex-1 select-text overflow-y-auto px-8 py-1", bodyClassName)} onTouchEnd={() => {
+                      <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);
-            }} onTouchStart={e => {
+                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;
+                        onChange(false);
+                    }
+                    else {
+                        animate(sheetY, 0, { type: "spring", bounce: 0, duration: 0.3 });
+                    }
+                    isDragging.current = false;
+                }
+            }} onTouchStart={(e) => {
                 const touch = e.changedTouches[0];
                 scrollInitial.set(touch.pageY);
                 scroll.set(touch.pageY);
-            }} onTouchMove={e => {
+                isDragging.current = false;
+            }} onTouchMove={(e) => {
                 const touch = e.changedTouches[0];
                 const y = touch.pageY;
-                const initial = scrollInitial.get();
-                if (initial < y) {
-                    const distanceFromTop = innerContent.current?.scrollTop;
-                    if (distanceFromTop === 0) {
-                        const div = floating.refs.floating.current;
-                        const rect = div.getBoundingClientRect();
-                        const v = floatingSize.get() || rect.height;
-                        const diff = (initial - y) / 10;
-                        const down = v + diff;
-                        const max = window.outerHeight;
-                        const screenHeightToClose = calculateClose(max);
-                        if (down < screenHeightToClose)
-                            onChange?.(false);
-                        floatingSize.set(down);
+                const prevY = scroll.get() || y;
+                const scrollTop = innerContent.current?.scrollTop || 0;
+                if (!isDragging.current && scrollTop <= 0 && y > prevY && type === "sheet") {
+                    isDragging.current = true;
+                    dragStart.current = y;
+                }
+                if (isDragging.current) {
+                    const delta = y - dragStart.current;
+                    if (delta < 0) {
+                        sheetY.set(delta * 0.2);
+                    }
+                    else {
+                        sheetY.set(delta);
                     }
                 }
-                scroll.set(touch.pageY);
+                scroll.set(y);
             }}>
                         {children}
                       </motion.section>