@g4rcez/components 3.0.0-0 → 3.0.1

package/dist/components/display/step.jsx

@@ -1,131 +0,0 @@
-"use client";
-import { motion } from "motion/react";
-import React, { createContext, Fragment, useContext, useEffect, useRef, useState } from "react";
-import { useColorParser } from "../../hooks/use-color-parser";
-const PROGRESS_BAR_DURATION = 0.3;
-const transition = { duration: PROGRESS_BAR_DURATION, type: "tween", ease: "easeInOut" };
-const StepContext = createContext(null);
-const iconTransitions = { delay: 0.2, duration: 0.3, type: "tween", ease: "easeOut" };
-const states = {
-    initial: { pathLength: 0, opacity: 0 },
-    animate: { pathLength: 1, opacity: 1 },
-};
-const ErrorIcon = (props) => (<svg {...props} viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-    <motion.path className="currentColor" initial={states.initial} animate={states.animate} transition={iconTransitions} d="M18 6 6 18"/>
-    <motion.path className="currentColor" initial={states.initial} animate={states.animate} transition={iconTransitions} d="m6 6 12 12"/>
-  </svg>);
-const CheckIcon = (props) => (<svg {...props} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={3}>
-    <motion.path d="M5 13l4 4L19 7" strokeLinecap="round" strokeLinejoin="round" animate={states.animate} initial={states.initial} transition={iconTransitions}/>
-  </svg>);
-const variants = {
-    complete: { scale: 1.25 },
-    active: { scale: 1, transition: { delay: 0, duration: 0.3 } }
-};
-const transitions = { duration: 0.6, delay: 0.2, type: "tween", ease: "circOut", };
-const getCurrentStatus = (step, currentStep, status) => {
-    if (status === "error")
-        return "error";
-    if (currentStep === step)
-        return "active";
-    if (currentStep < step)
-        return "inactive";
-    return "complete";
-};
-const calculateStepDelay = (step, currentStep, previousStep, duration) => {
-    if (currentStep === previousStep)
-        return 0;
-    const isForward = currentStep > previousStep;
-    if (isForward) {
-        if (step <= previousStep || step > currentStep)
-            return 0;
-        return ((step - previousStep) / (currentStep - previousStep)) * duration;
-    }
-    if (step <= currentStep || step > previousStep)
-        return 0;
-    return ((previousStep - step) / (previousStep - currentStep)) * duration;
-};
-export const useStepContext = () => useContext(StepContext);
-export const Step = ({ step, currentStep, status, title, titleClassName, ...props }) => {
-    const parser = useColorParser();
-    const context = useStepContext();
-    const [visualCurrentStep, setVisualCurrentStep] = useState(currentStep);
-    useEffect(() => {
-        if (!context) {
-            setVisualCurrentStep(currentStep);
-            return;
-        }
-        const delay = calculateStepDelay(step, context.currentStep, context.previousStep, context.progressBarDuration);
-        if (delay === 0) {
-            setVisualCurrentStep(currentStep);
-            return;
-        }
-        const timer = setTimeout(() => {
-            setVisualCurrentStep(currentStep);
-        }, delay * 1000);
-        return () => clearTimeout(timer);
-    }, [currentStep, context, step]);
-    const innerStatus = getCurrentStatus(step, visualCurrentStep, status);
-    const widthPerStep = context?.steps ? 100 / (context?.steps) : undefined;
-    return (<Fragment>
-      <div className={`h-[2px] w-full xl:block bg-card-border hidden first:hidden ${innerStatus === "active" || innerStatus === "complete" ? "bg-success" : ""}`}/>
-      <motion.button {...props} type="button" data-step={step} animate={innerStatus} className="flex relative justify-center items-center w-auto text-center">
-        <motion.div variants={variants} transition={transitions} className={`hidden xl:block absolute inset-0 rounded-full text-center ${innerStatus === "error" ? "bg-danger" : ""}`}/>
-        <motion.div initial={false} animate={innerStatus} transition={transition} className="flex relative justify-center items-center font-semibold rounded-full size-10 aspect-square" variants={{
-            error: {
-                color: parser("var(--danger-foreground)"),
-                borderColor: parser("var(--danger-hover)"),
-                backgroundColor: parser("var(--danger-DEFAULT)"),
-            },
-            inactive: {
-                transition,
-                color: parser("var(--disabled)"),
-                borderColor: parser("var(--card-border)"),
-                backgroundColor: parser("var(--background)"),
-            },
-            active: {
-                transition,
-                color: parser("var(--primary-foreground)"),
-                borderColor: parser("var(--primary-DEFAULT)"),
-                backgroundColor: parser("var(--primary-DEFAULT)"),
-            },
-            complete: {
-                transition,
-                color: parser("var(--success-foreground)"),
-                borderColor: parser("var(--success-DEFAULT)"),
-                backgroundColor: parser("var(--success-DEFAULT)"),
-            },
-        }}>
-          <div className="flex justify-center items-center">
-            {innerStatus === "complete" ? (<CheckIcon className="size-6 text-primary-foreground"/>) : innerStatus === "error" ? (<ErrorIcon className="size-6 text-danger-foreground"/>) : (<Fragment>
-                <span>{step}</span>
-              </Fragment>)}
-          </div>
-        </motion.div>
-        <header className="flex flex-col justify-start items-start px-2">
-          <h3 className={`h-full whitespace-nowrap flex items-center ${titleClassName}`}>{title}</h3>
-        </header>
-        </motion.button>
-    </Fragment>);
-};
-export const Steps = (props) => {
-    const previousStepRef = useRef(props.currentStep);
-    const [previousStep, setPreviousStep] = useState(props.currentStep);
-    useEffect(() => {
-        previousStepRef.current = previousStep;
-        const timer = setTimeout(() => {
-            setPreviousStep(props.currentStep);
-        }, PROGRESS_BAR_DURATION * 1000);
-        return () => clearTimeout(timer);
-    }, [props.currentStep, previousStep]);
-    const contextValue = {
-        currentStep: props.currentStep,
-        previousStep: previousStepRef.current,
-        progressBarDuration: PROGRESS_BAR_DURATION,
-        steps: React.Children.count(props.children),
-    };
-    return (<StepContext.Provider value={contextValue}>
-      <div className="flex relative flex-col gap-4 justify-center items-start w-full lg:flex-row lg:justify-between lg:items-center">
-        {props.children}
-      </div>
-    </StepContext.Provider>);
-};

package/dist/components/display/tabs.jsx

@@ -1,100 +0,0 @@
-"use client";
-import React, { createContext, Fragment, useContext, useEffect, useRef } from "react";
-import { Is } from "sidekicker";
-import { useReactive } from "../../hooks/use-reactive";
-import { useStableRef } from "../../hooks/use-stable-ref";
-import { css } from "../../lib/dom";
-import { keyboardKeys } from "../../lib/keyboard-area";
-import { Polymorph } from "../core/polymorph";
-import { Card } from "./card";
-const Context = createContext("");
-const isElementDisabled = (element) => element.hasAttribute("disabled") || element.getAttribute("aria-disabled") === "true";
-const getNElement = (elements, currentIndex, direction) => {
-    const step = direction === "forward" ? 1 : -1;
-    const startIndex = currentIndex + step;
-    for (let i = startIndex; i >= 0 && i < elements.length; i += step) {
-        const element = elements[i];
-        if (!isElementDisabled(element))
-            return element;
-    }
-    return direction === "backward"
-        ? getNElement(elements, elements.length - 1, "backward")
-        : getNElement(elements, -1, "forward");
-};
-const moveOn = (ul, direction) => {
-    const items = Array.from(ul.querySelectorAll("li"));
-    const find = items.findIndex((x) => x.dataset.active === "true");
-    if (find === -1)
-        return null;
-    const item = getNElement(items, find, direction);
-    if (item === null)
-        return null;
-    item.querySelector("button")?.focus({ preventScroll: false });
-    return item.getAttribute("data-id") || "";
-};
-const actionKeys = {
-    [keyboardKeys.ArrowLeft]: (_, ul) => moveOn(ul, "backward"),
-    [keyboardKeys.ArrowRight]: (_, ul) => moveOn(ul, "forward"),
-};
-export const Tabs = (props) => {
-    const [active, setActive] = useReactive(props.active);
-    const ref = useRef(null);
-    const onChangeRef = useStableRef(props.onChange);
-    useEffect(() => {
-        const header = ref.current;
-        if (header === null)
-            return;
-        let first = header.querySelector(`li[data-active=true]`);
-        if (first === null) {
-            first = header.querySelector(`li[data-id]`);
-            const id = first.getAttribute("data-id") || "";
-            setActive(id);
-        }
-    }, [props.active, setActive]);
-    useEffect(() => {
-        if (onChangeRef.current)
-            onChangeRef.current(active);
-    }, [onChangeRef, active]);
-    const items = React.Children.toArray(props.children);
-    const onClick = (e) => {
-        const anchor = e.currentTarget;
-        setActive(anchor.dataset.id || "");
-    };
-    const onKeyDown = (e) => {
-        if (ref.current === null)
-            return;
-        const k = e.key;
-        if (Is.keyof(actionKeys, k)) {
-            const fn = actionKeys[k];
-            const result = fn(e, ref.current);
-            if (result === null)
-                return;
-            setActive(result);
-        }
-    };
-    return (<Context.Provider value={active}>
-            <Card className={props.className} container={css("pt-0 max-w-full w-full min-w-0", props.container)} header={<header className="overflow-x-auto relative mb-2">
-                        <div className="absolute bottom-0 w-full h-px bg-card-border"/>
-                        <nav className="min-w-0">
-                            <ul onKeyDown={onKeyDown} ref={ref} className="flex overflow-x-auto flex-1 justify-start w-0 min-w-full">
-                                {items.map((x) => {
-                const inner = x.props;
-                const current = active === inner.id;
-                return (<li data-id={inner.id} data-active={current} key={`tab-header-${inner.id}`} aria-disabled={inner.disabled} className={css("relative w-fit border-b border-transparent transition-all", current ? "border-primary font-medium text-primary" : "", inner.disabled ? "aria-disabled:text-disabled" : "")}>
-                                            <Polymorph as="button" type="button" data-id={inner.id} aria-current="page" disabled={inner.disabled} onClick={inner.disabled ? undefined : onClick} className="block py-4 px-10 w-full whitespace-nowrap disabled:cursor-not-allowed">
-                                                {inner.title}
-                                            </Polymorph>
-                                        </li>);
-            })}
-                            </ul>
-                        </nav>
-                    </header>}>
-                {props.children}
-            </Card>
-        </Context.Provider>);
-};
-const useTabs = () => useContext(Context);
-export const Tab = (props) => {
-    const active = useTabs();
-    return <Fragment>{props.id === active ? props.children : null}</Fragment>;
-};

package/dist/components/display/timeline.jsx

@@ -1,25 +0,0 @@
-import React from "react";
-import { css } from "../../lib/dom";
-import { Polymorph } from "../core/polymorph";
-export const TimelineItem = (props) => (<li data-component="timeline-item" className="relative pb-12" role="listitem">
-        <span aria-hidden="true" className="absolute left-6 top-8 -ml-px h-full w-0.5 bg-card-border"/>
-        <div className="relative flex items-stretch justify-start space-x-3">{props.children}</div>
-    </li>);
-TimelineItem.Icon = function TimelineIcon(props) {
-    return (<header {...props} className={css("flex size-12 items-center justify-center rounded-full bg-primary p-2 text-primary-foreground", props.className)}>
-            {props.children}
-        </header>);
-};
-TimelineItem.Body = function TimelineItemBody(props) {
-    return (<Polymorph {...props} className={css("min-w-0 flex-1", props.className)}>
-            {props.children}
-        </Polymorph>);
-};
-TimelineItem.Right = function TimelineItemRight(props) {
-    return (<footer className="flex gap-6 self-stretch px-4 align-baseline">
-            <Polymorph {...props} type="button"/>
-        </footer>);
-};
-export const Timeline = (props) => (<ul data-component="timeline" role="list" className="flow-root [&>li:last-child>span[aria-hidden=true]]:hidden">
-        {props.children}
-    </ul>);

package/dist/components/floating/command-palette.jsx

@@ -1,172 +0,0 @@
-"use client";
-import { autoUpdate, useFloating, useInteractions, useListNavigation } from "@floating-ui/react";
-import { FilterIcon } from "lucide-react";
-import React, { forwardRef, Fragment, useEffect, useId, useRef, useState } from "react";
-import { Is } from "sidekicker";
-import { useStableRef } from "../../hooks/use-stable-ref";
-import { useTranslations } from "../../hooks/use-translations";
-import { CombiKeys } from "../../lib/combi-keys";
-import { Dict } from "../../lib/dict";
-import { css, isReactFC } from "../../lib/dom";
-import { fzf } from "../../lib/fzf";
-import { Shortcut } from "../display/shortcut";
-import { SkeletonCell } from "../display/skeleton";
-import { Modal } from "./modal";
-const Group = (props) => (<span className="flex items-center h-full text-sm font-medium text-left text-secondary">
-    {isReactFC(props.item.title) ? <props.item.title text={props.text}/> : props.item.title}
-  </span>);
-const Item = forwardRef((props, ref) => {
-    const id = useId();
-    const active = props.active;
-    const item = props.item;
-    if (item.type === "group")
-        return (<div id={id} className="px-2 pt-2 pb-1 h-10">
-        <Group text={props.text} item={item}/>
-      </div>);
-    if (item.type !== "shortcut")
-        return <Fragment />;
-    return (<button {...props} id={id} ref={ref} role="option" type="button" aria-selected={active} data-component="command-palette-item" className={css("flex h-10 items-center justify-between rounded-lg p-2 hover:bg-floating-hover", active ? "bg-floating-hover" : "")}>
-      <span className="flex gap-2 items-center">
-        {item.Icon ? item.Icon : null}
-        <span>{isReactFC(item.title) ? <item.title text={props.text}/> : item.title}</span>
-      </span>
-      {item.shortcut ? <Shortcut value={item.shortcut}/> : null}
-    </button>);
-});
-const getFuzzyData = (commands, value) => {
-    if (value.length === 0)
-        return commands;
-    const rules = [
-        { key: "title", value },
-        { key: "shortcut", value },
-        { key: "hint", value },
-    ];
-    const normalize = commands.map((x) => ({ ...x, title: Is.function(x.title) ? x.title({ text: value }) : x.title }));
-    const target = normalize.reduce((acc, x) => {
-        const enabled = Is.function(x.enabled) ? x.enabled({ text: value }) : (x.enabled ?? true);
-        if (enabled)
-            acc.push({ ...x, enabled: enabled });
-        return acc;
-    }, []);
-    const filter = fzf(target, "title", rules);
-    const withEnabled = normalize.filter((x) => (Is.function(x.enabled) ? x.enabled({ text: value }) : false));
-    return Dict.unique(filter.concat(withEnabled), (x) => x.title);
-};
-const loadingSkeleton = [0, 0, 0, 0, 0];
-export const CommandPalette = (props) => {
-    const bindKey = props.bind ?? "Mod + k";
-    const listRef = useRef([]);
-    const translations = useTranslations();
-    const [value, setValue] = useState("");
-    const valueRef = useStableRef(value);
-    const id = useId();
-    const ref = useRef(null);
-    const [activeIndex, setActiveIndex] = useState(null);
-    const root = useFloating({
-        open: props.open,
-        strategy: "absolute",
-        whileElementsMounted: autoUpdate,
-        onOpenChange: props.onChangeVisibility,
-    });
-    const listNav = useListNavigation(root.context, {
-        cols: 0,
-        listRef,
-        loop: true,
-        activeIndex,
-        virtual: true,
-        allowEscape: true,
-        focusItemOnHover: false,
-        focusItemOnOpen: "auto",
-        openOnArrowKeyDown: true,
-        scrollItemIntoView: false,
-        selectedIndex: activeIndex,
-        onNavigate: (n) => {
-            if (Is.number(n)) {
-                listRef.current[n]?.scrollIntoView({ block: "start", inline: "start" });
-            }
-            setActiveIndex((prev) => {
-                if (Is.number(n))
-                    return n;
-                return props.open ? (prev ?? 0) : null;
-            });
-        }
-    });
-    const { getItemProps, getReferenceProps } = useInteractions([listNav]);
-    const commands = props.commands.flatMap((x) => (x.type === "group" ? [x, ...x.items] : [x]));
-    const fuzzy = getFuzzyData(commands, value);
-    const displayItems = value === ""
-        ? commands
-        : [
-            {
-                type: "group",
-                title: "Results",
-                items: [],
-            },
-            ...fuzzy.filter((x) => x.type !== "group"),
-        ];
-    useEffect(() => {
-        const combi = new CombiKeys();
-        combi.add(bindKey, () => props.onChangeVisibility?.(true));
-        commands.forEach((cmd) => {
-            if (cmd.type === "group")
-                return;
-            if (cmd.type === "shortcut" && cmd.shortcut !== undefined)
-                combi.add(cmd.shortcut, (event) => cmd.action({
-                    event,
-                    text: valueRef.current,
-                    setOpen: props.onChangeVisibility,
-                }));
-        });
-        return combi.register();
-    }, [bindKey, commands, props, valueRef]);
-    const Icon = props.Icon ?? FilterIcon;
-    return (<Fragment>
-      <Modal ref={ref} animated={false} closable={false} open={props.open} overlayClickClose ariaTitle="Command palette" bodyClassName="px-0 py-0 pt-0" data-component="command-palette" onChange={props.onChangeVisibility} className="container relative py-0 md:max-w-(--breakpoint-sm) lg:max-w-(--breakpoint-md) overflow-clip">
-        <header className="flex sticky top-0 items-center w-full h-12 border-b overflow-clip isolate z-floating border-floating-border bg-floating-background">
-          <div className="flex justify-center items-center size-10">
-            {props.Icon ? <Icon Default={FilterIcon} text={value} size={16}/> : <FilterIcon size={16}/>}
-
-          </div>
-          <input {...getReferenceProps({
-        ref: root.refs.setReference,
-        onKeyDown: (e) => {
-            const item = Is.number(activeIndex) ? displayItems[activeIndex] : null;
-            if (item) {
-                const key = e.key;
-                if (key === "Enter") {
-                    if (item.type === "shortcut")
-                        item.action({ event: e, text: value, setOpen: props.onChangeVisibility, });
-                }
-            }
-        }
-    })} autoFocus value={value} data-combikeysbypass="true" placeholder="Search for..." onChange={(e) => setValue(e.target.value)} className="items-center py-2 px-2 pb-2 w-full h-12 text-lg text-left bg-transparent outline-hidden"/>
-        </header>
-        {props.loading ? (<ul role="listbox" data-component="command-palette-list" className="flex overflow-y-auto flex-col gap-1 px-2 my-2 w-full max-h-96 origin-[top_center]">
-            <div className="px-2 pt-2 pb-1 h-10">{translations.commandPaletteLoading}</div>
-            {loadingSkeleton.map((_, i) => (<li key={`${id}-${i}-skeleton-index`} className={css("flex h-10 items-center justify-between rounded-lg p-2 hover:bg-primary hover:text-primary-foreground")}>
-                {SkeletonCell}
-              </li>))}
-          </ul>) : (<div className="flex flex-row flex-nowrap min-w-full" data-component="command-palette-container">
-            <ul role="listbox" data-component="command-palette-list" className="flex overflow-y-auto flex-col gap-1 px-2 my-2 w-full max-h-96 h-fit origin-[top_center]">
-              {displayItems.map((item, index) => (<Item {...getItemProps({
-                onMouseEnter: () => setActiveIndex(index),
-                ref(node) {
-                    listRef.current[index] = node;
-                },
-                onClick(e) {
-                    e.preventDefault();
-                    props.onChangeVisibility(false);
-                    if (item.type === "shortcut")
-                        item.action({ event: e, text: value, setOpen: props.onChangeVisibility, });
-                },
-            })} item={item} text={value} active={activeIndex === index} key={`${id}-${item.type}-${index}`}/>))}
-              {displayItems.length === 1 ? (<div className={css("flex items-center justify-between rounded-lg p-2 text-secondary")}>
-                  {translations.commandPaletteEmpty ?? props.emptyMessage}
-                </div>) : null}
-            </ul>
-            {props.Preview && Is.number(activeIndex) ? <props.Preview command={displayItems[activeIndex]} text={value}/> : null}
-          </div>)}
-        {props.footer ? <footer className="flex items-center p-2 h-8 rounded-b-lg bg-background">{props.footer}</footer> : null}
-      </Modal>
-    </Fragment>);
-};

package/dist/components/floating/dropdown.jsx

@@ -1,53 +0,0 @@
-"use client";
-import { arrow, autoUpdate, flip, FloatingArrow, FloatingFocusManager, FloatingPortal, offset, shift, useClick, useDismiss, useFloating, useInteractions, useRole, } from "@floating-ui/react";
-import React, { Fragment, useEffect, useId, useMemo, useRef, useState } from "react";
-export const Dropdown = (props) => {
-    const headingId = useId();
-    const [open, setOpen] = useState(props.open);
-    useEffect(() => setOpen(props.open), [props.open]);
-    const arrowRef = useRef(null);
-    const middleware = useMemo(() => [
-        offset(10),
-        flip({ fallbackAxisSideDirection: "end" }),
-        shift(),
-        arrow({
-            padding: 5,
-            element: arrowRef,
-        }),
-    ], [props.arrow]);
-    const { refs, floatingStyles, context } = useFloating({
-        open,
-        middleware,
-        transform: true,
-        whileElementsMounted: autoUpdate,
-        onOpenChange: (nextValue, event) => {
-            const element = event?.relatedTarget;
-            if (element) {
-                if (element.dataset.floating === "true" && !nextValue)
-                    return;
-            }
-            setOpen(nextValue);
-            props.onChange?.(nextValue);
-        },
-    });
-    const click = useClick(context);
-    const dismiss = useDismiss(context);
-    const role = useRole(context, { role: "tooltip" });
-    const { getReferenceProps, getFloatingProps } = useInteractions([click, dismiss, role]);
-    return (<Fragment>
-      <button ref={refs.setReference} {...getReferenceProps(props.buttonProps)} type="button">
-        {props.trigger}
-      </button>
-      {open && (<FloatingPortal preserveTabOrder id={`${headingId}-portal`}>
-          <FloatingFocusManager guards restoreFocus={true} returnFocus={true} visuallyHiddenDismiss context={context} modal={false}>
-            <div className="relative p-4 rounded-lg border isolate z-floating min-w-96 border-floating-border bg-floating-background shadow-shadow-floating" ref={refs.setFloating} aria-labelledby={headingId} style={floatingStyles} {...getFloatingProps()}>
-              <FloatingArrow ref={arrowRef} context={context} strokeWidth={0.1} className="fill-floating-background stroke-floating-border"/>
-              <header className="mb-2">
-                <h3 className="text-2xl font-medium tracking-wide leading-snug text-left">{props.title}</h3>
-              </header>
-              {props.children}
-            </div>
-          </FloatingFocusManager>
-        </FloatingPortal>)}
-    </Fragment>);
-};

package/dist/components/floating/expand.jsx

@@ -1,44 +0,0 @@
-"use client";
-import { FloatingFocusManager, FloatingPortal, useClick, useDismiss, useFloating, useInteractions, useRole } from "@floating-ui/react";
-import { AnimatePresence, motion } from "motion/react";
-import { useEffect, useId, useRef, useState } from "react";
-import { Button } from "../core/button";
-export const Expand = (props) => {
-    const root = useRef(null);
-    const id = useId();
-    const wrapperId = `${id}:wrapper`;
-    const titleId = `${id}:title`;
-    const [open, setOpen] = useState(props.open ?? false);
-    useEffect(() => {
-        setOpen(props.open ?? false);
-    }, [props.open]);
-    const { context, refs } = useFloating({
-        transform: true,
-        open: open !== null,
-        nodeId: id,
-        onOpenChange: setOpen,
-        strategy: "absolute",
-    });
-    const click = useClick(context, { enabled: props.disabled ?? true });
-    const role = useRole(context, { role: "tooltip" });
-    const dismiss = useDismiss(context, {
-        escapeKey: true,
-        referencePress: true,
-        outsidePress: true,
-    });
-    const { getFloatingProps, getReferenceProps } = useInteractions([click, role, dismiss]);
-    return (<div className="relative inline-flex items-center justify-center" ref={root}>
-            <Button {...getReferenceProps(props)} as={motion.button} layoutId={wrapperId} ref={refs.setReference} size="small" onClick={() => setOpen(true)}>
-                <motion.span layoutId={titleId}>{props.trigger}</motion.span>
-            </Button>
-            <AnimatePresence>
-                {open ? (<FloatingPortal root={root}>
-                        <FloatingFocusManager visuallyHiddenDismiss modal closeOnFocusOut context={context}>
-                            <motion.div {...getFloatingProps()} ref={refs.setFloating} layoutId={wrapperId} className="absolute -left-1/4 -top-3/4">
-                                {props.children}
-                            </motion.div>
-                        </FloatingFocusManager>
-                    </FloatingPortal>) : null}
-            </AnimatePresence>
-        </div>);
-};