@g4rcez/components 4.1.1 → 4.1.3

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

@@ -0,0 +1,10 @@
+import React, { ComponentProps, ElementType, PropsWithChildren } from "react";
+import { PolymorphicProps } from "../core/polymorph";
+export declare const TimelineItem: {
+    (props: PropsWithChildren): React.JSX.Element;
+    Icon(props: PropsWithChildren<ComponentProps<"header">>): React.JSX.Element;
+    Body<T extends ElementType = "section">(props: PropsWithChildren<PolymorphicProps<object, T>>): React.JSX.Element;
+    Right<T extends ElementType = "button">(props: PolymorphicProps<object, T>): React.JSX.Element;
+};
+export declare const Timeline: (props: PropsWithChildren) => React.JSX.Element;
+//# sourceMappingURL=timeline.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"timeline.d.ts","sourceRoot":"","sources":["../../../src/components/display/timeline.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,cAAc,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE9E,OAAO,EAAa,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAEhE,eAAO,MAAM,YAAY;YAAW,iBAAiB;gBAOJ,iBAAiB,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC;SAW9C,CAAC,SAAS,WAAW,qBAAqB,iBAAiB,CAAC,gBAAgB,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;UAQtF,CAAC,SAAS,WAAW,oBAAoB,gBAAgB,CAAC,MAAM,EAAE,CAAC,CAAC;CArBnH,CAAC;AA6BF,eAAO,MAAM,QAAQ,GAAI,OAAO,iBAAiB,sBAIhD,CAAC"}

package/dist/components/display/timeline.jsx

@@ -0,0 +1,25 @@
+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-warn-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.d.ts

@@ -0,0 +1,49 @@
+import { type Icon, type IconProps } from "@phosphor-icons/react";
+import React from "react";
+import { Label } from "../../types";
+type ViewProps = {
+    text: string;
+};
+type CommandItem<T extends string, P extends object> = P & {
+    type: T;
+    hint?: string | string[];
+    Icon?: React.ReactElement;
+    enabled?: ((props: ViewProps) => boolean) | boolean;
+};
+type View = string | ((props: ViewProps) => string);
+type CommandShortcutItem = CommandItem<"shortcut", {
+    title: View;
+    shortcut?: string;
+    action: (args: {
+        text: string;
+        setText: (state: string) => void;
+        setOpen: (state: boolean) => void;
+        event: KeyboardEvent | React.MouseEvent | React.KeyboardEvent;
+    }) => void | Promise<void>;
+}>;
+type CommandGroupItem = CommandItem<"group", {
+    title: View;
+    items: CommandItemTypes[];
+}>;
+export type CommandItemTypes = CommandGroupItem | CommandShortcutItem;
+export type CommandPaletteProps = {
+    bind?: string;
+    open: boolean;
+    loading?: boolean;
+    emptyMessage?: Label;
+    footer?: React.ReactElement;
+    commands: CommandItemTypes[];
+    onChangeText?: (text: string) => void;
+    onChangeVisibility: (next: boolean) => void;
+    Preview?: React.FC<{
+        command: CommandItemTypes;
+        text: string;
+    }>;
+    Icon?: React.FC<IconProps & {
+        text: string;
+        Default: Icon;
+    }>;
+};
+export declare const CommandPalette: (props: CommandPaletteProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=command-palette.d.ts.map

package/dist/components/floating/command-palette.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"command-palette.d.ts","sourceRoot":"","sources":["../../../src/components/floating/command-palette.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAc,KAAK,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAC9E,OAAO,KAAmE,MAAM,OAAO,CAAC;AAQxF,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAKpC,KAAK,SAAS,GAAG;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC;AAElC,KAAK,WAAW,CAAC,CAAC,SAAS,MAAM,EAAE,CAAC,SAAS,MAAM,IAAI,CAAC,GAAG;IACvD,IAAI,EAAE,CAAC,CAAC;IACR,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IACzB,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC1B,OAAO,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,SAAS,KAAK,OAAO,CAAC,GAAG,OAAO,CAAC;CACvD,CAAC;AAEF,KAAK,IAAI,GAAG,MAAM,GAAG,CAAC,CAAC,KAAK,EAAE,SAAS,KAAK,MAAM,CAAC,CAAC;AAEpD,KAAK,mBAAmB,GAAG,WAAW,CAClC,UAAU,EACV;IACI,KAAK,EAAE,IAAI,CAAC;IACZ,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,CAAC,IAAI,EAAE;QACX,IAAI,EAAE,MAAM,CAAC;QACb,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;QACjC,OAAO,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;QAClC,KAAK,EAAE,aAAa,GAAG,KAAK,CAAC,UAAU,GAAG,KAAK,CAAC,aAAa,CAAC;KACjE,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CAC9B,CACJ,CAAC;AAEF,KAAK,gBAAgB,GAAG,WAAW,CAAC,OAAO,EAAE;IAAE,KAAK,EAAE,IAAI,CAAC;IAAC,KAAK,EAAE,gBAAgB,EAAE,CAAA;CAAE,CAAC,CAAC;AAEzF,MAAM,MAAM,gBAAgB,GAAG,gBAAgB,GAAG,mBAAmB,CAAC;AA8CtE,MAAM,MAAM,mBAAmB,GAAG;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,MAAM,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC5B,QAAQ,EAAE,gBAAgB,EAAE,CAAC;IAC7B,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,kBAAkB,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5C,OAAO,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC;QAAE,OAAO,EAAE,gBAAgB,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAChE,IAAI,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,GAAG;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,IAAI,CAAA;KAAE,CAAC,CAAC;CAChE,CAAC;AAgCF,eAAO,MAAM,cAAc,GAAI,OAAO,mBAAmB,sBA6LxD,CAAC"}

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

@@ -0,0 +1,197 @@
+"use client";
+import { autoUpdate, useFloating, useInteractions, useListNavigation } from "@floating-ui/react";
+import { FunnelIcon } from "@phosphor-icons/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, isChildVisible, 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 h-full items-center text-left text-sm font-medium 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="h-10 px-2 pb-1 pt-2">
+                <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 items-center gap-2">
+                {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];
+const findFirstClickable = (items) => {
+    for (let index = 0; index < items.length; index++) {
+        const element = items[index];
+        if (element.type === "shortcut")
+            return element;
+        const recursive = findFirstClickable(element.items);
+        if (recursive)
+            return recursive;
+    }
+    return null;
+};
+export const CommandPalette = (props) => {
+    const id = useId();
+    const scrollContainerRef = useRef(null);
+    const [text, setText] = useState("");
+    const listRef = useRef([]);
+    const translations = useTranslations();
+    const valueRef = useStableRef(text);
+    const [activeIndex, setActiveIndex] = useState(null);
+    useEffect(() => {
+        setActiveIndex(null);
+    }, [text]);
+    const bindKey = props.bind ?? "Mod + k";
+    const root = useFloating({
+        open: props.open,
+        strategy: "absolute",
+        whileElementsMounted: autoUpdate,
+        onOpenChange: props.onChangeVisibility,
+    });
+    const commands = props.commands.flatMap((x) => (x.type === "group" ? [x, ...x.items] : [x]));
+    const fuzzy = getFuzzyData(commands, text);
+    const displayItems = text === ""
+        ? commands
+        : [
+            {
+                type: "group",
+                title: "Results",
+                items: [],
+            },
+            ...fuzzy.filter((x) => x.type !== "group"),
+        ];
+    const listNav = useListNavigation(root.context, {
+        listRef,
+        loop: true,
+        activeIndex,
+        virtual: true,
+        allowEscape: false,
+        focusItemOnOpen: true,
+        focusItemOnHover: true,
+        openOnArrowKeyDown: true,
+        scrollItemIntoView: false,
+        selectedIndex: activeIndex,
+        disabledIndices: (n) => {
+            const item = displayItems[n];
+            if (item)
+                return item.type === "group";
+            return false;
+        },
+        onNavigate: (n) => {
+            if (Is.number(n)) {
+                if (!isChildVisible(scrollContainerRef.current, listRef.current[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, getFloatingProps } = useInteractions([listNav]);
+    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,
+                    setText,
+                    text: valueRef.current,
+                    setOpen: props.onChangeVisibility,
+                }));
+        });
+        return combi.register();
+    }, [bindKey, commands, props, valueRef]);
+    const Icon = props.Icon ?? FunnelIcon;
+    return (<Fragment>
+            <Modal {...getFloatingProps()} 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 overflow-clip py-0 md:max-w-screen-sm lg:max-w-screen-md">
+                <header className="sticky top-0 isolate z-floating flex h-12 w-full items-center overflow-clip border-b border-floating-border bg-floating-background">
+                    <div className="flex size-10 items-center justify-center">
+                        {props.Icon ? <Icon Default={FunnelIcon} text={text} size={16}/> : <FunnelIcon size={16}/>}
+                    </div>
+                    <input {...getReferenceProps({
+        ref: root.refs.setReference,
+        onKeyDown: (e) => {
+            const item = Is.number(activeIndex) ? displayItems[activeIndex] : null;
+            const key = e.key;
+            if (key === "Enter") {
+                if (item) {
+                    if (item.type === "shortcut")
+                        item.action({ event: e, text: text, setOpen: props.onChangeVisibility, setText });
+                }
+                else {
+                    const item = findFirstClickable(fuzzy);
+                    if (item?.type === "shortcut")
+                        item.action({ event: e, text: text, setOpen: props.onChangeVisibility, setText });
+                }
+            }
+        },
+    })} autoFocus value={text} data-combikeysbypass="true" placeholder="Search for..." onChange={(e) => setText(e.target.value)} className="h-12 w-full items-center bg-transparent px-2 py-2 pb-2 text-left text-lg outline-none"/>
+                </header>
+                {props.loading ? (<ul role="listbox" data-component="command-palette-list" className="my-2 flex max-h-96 w-full origin-[top_center] flex-col gap-1 overflow-y-auto px-2">
+                        <div className="h-10 px-2 pb-1 pt-2">{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 min-w-full flex-row flex-nowrap" data-component="command-palette-container">
+                        <ul role="listbox" ref={scrollContainerRef} data-component="command-palette-list" className="my-2 flex h-fit max-h-96 w-full origin-[top_center] flex-col gap-1 overflow-y-auto px-2">
+                            {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: text, setOpen: props.onChangeVisibility, setText });
+                },
+            })} item={item} text={text} 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={text}/> : null}
+                    </div>)}
+                {props.footer ? (<footer className="flex h-8 items-center rounded-b-lg border-t border-floating-border p-2">{props.footer}</footer>) : null}
+            </Modal>
+        </Fragment>);
+};

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

@@ -0,0 +1,15 @@
+import React, { PropsWithChildren } from "react";
+type DropdownProps = {
+    open?: boolean;
+    arrow?: boolean;
+    hover?: boolean;
+    returnFocus?: boolean;
+    restoreFocus?: boolean;
+    buttonProps?: React.HTMLProps<"button">;
+    onChange?: (nextValue: boolean) => void;
+    trigger: React.ReactElement | React.ReactNode;
+    title?: React.ReactNode | React.ReactElement | string;
+};
+export declare const Dropdown: (props: PropsWithChildren<DropdownProps>) => React.JSX.Element;
+export {};
+//# sourceMappingURL=dropdown.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["../../../src/components/floating/dropdown.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAE,EAAY,iBAAiB,EAA+C,MAAM,OAAO,CAAC;AAExG,KAAK,aAAa,GAAG;IACjB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC;IACxC,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,OAAO,EAAE,KAAK,CAAC,YAAY,GAAG,KAAK,CAAC,SAAS,CAAC;IAC9C,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,YAAY,GAAG,MAAM,CAAC;CACzD,CAAC;AAEF,eAAO,MAAM,QAAQ,GAAI,OAAO,iBAAiB,CAAC,aAAa,CAAC,sBA4E/D,CAAC"}

package/dist/components/floating/dropdown.jsx

@@ -0,0 +1,56 @@
+"use client";
+import { arrow, autoUpdate, flip, FloatingArrow, FloatingFocusManager, FloatingPortal, offset, shift, useClick, useDismiss, useFloating, useHover, 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 hover = useHover(context, { enabled: props.hover ?? false });
+    const dismiss = useDismiss(context);
+    const role = useRole(context, { role: "dialog" });
+    const { getReferenceProps, getFloatingProps } = useInteractions([click, dismiss, role, hover]);
+    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 isolate z-floating rounded-lg border border-floating-border bg-floating-background p-4 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 id={headingId} className="text-left text-2xl font-medium leading-snug tracking-wide">
+                                    {props.title}
+                                </h3>
+                            </header>
+                            {props.children}
+                        </div>
+                    </FloatingFocusManager>
+                </FloatingPortal>)}
+        </Fragment>);
+};

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

@@ -0,0 +1,11 @@
+import { motion } from "motion/react";
+import { PropsWithChildren } from "react";
+import { Label, Override } from "../../types";
+import { ButtonProps } from "../core/button";
+export type ExpandProps = Override<ButtonProps<typeof motion.button>, {
+    trigger: Label;
+    open?: boolean;
+    disabled?: boolean;
+}>;
+export declare const Expand: (props: PropsWithChildren<ExpandProps>) => import("react").JSX.Element;
+//# sourceMappingURL=expand.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"expand.d.ts","sourceRoot":"","sources":["../../../src/components/floating/expand.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAmB,MAAM,EAAE,MAAM,cAAc,CAAC;AACvD,OAAO,EAAE,iBAAiB,EAAsC,MAAM,OAAO,CAAC;AAC9E,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,EAAU,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAErD,MAAM,MAAM,WAAW,GAAG,QAAQ,CAC9B,WAAW,CAAC,OAAO,MAAM,CAAC,MAAM,CAAC,EACjC;IACI,OAAO,EAAE,KAAK,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB,CACJ,CAAC;AAEF,eAAO,MAAM,MAAM,GAAI,OAAO,iBAAiB,CAAC,WAAW,CAAC,gCAmD3D,CAAC"}

package/dist/components/floating/expand.jsx

@@ -0,0 +1,44 @@
+"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 ?? false) });
+    const role = useRole(context, { role: "dialog" });
+    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>);
+};

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

@@ -0,0 +1,52 @@
+import { type Icon } from "@phosphor-icons/react";
+import React from "react";
+export type MenuProps = Partial<{
+    hover: boolean;
+    open?: boolean;
+    nested: boolean;
+    asChild: boolean;
+    isParent: boolean;
+    restoreFocus: boolean;
+    children: React.ReactNode;
+    floatingClassName: string;
+    FloatingComponent: React.ElementType;
+} & ({
+    label: string;
+} | {
+    label: React.ReactElement;
+    title: string;
+})>;
+type MenuItemProps = {
+    title: string;
+    disabled?: boolean;
+    Right?: Icon;
+};
+export declare const MenuItem: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, keyof MenuItemProps> & MenuItemProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const Menu: React.ForwardRefExoticComponent<(Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "label" | "children" | "hover" | "open" | "asChild" | "restoreFocus" | "nested" | "isParent" | "floatingClassName" | "FloatingComponent"> & Partial<{
+    hover: boolean;
+    open?: boolean;
+    nested: boolean;
+    asChild: boolean;
+    isParent: boolean;
+    restoreFocus: boolean;
+    children: React.ReactNode;
+    floatingClassName: string;
+    FloatingComponent: React.ElementType;
+} & {
+    label: string;
+}>, "ref"> | Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "label" | "children" | "hover" | "open" | "asChild" | "restoreFocus" | "nested" | "isParent" | "floatingClassName" | "FloatingComponent"> & Partial<{
+    hover: boolean;
+    open?: boolean;
+    nested: boolean;
+    asChild: boolean;
+    isParent: boolean;
+    restoreFocus: boolean;
+    children: React.ReactNode;
+    floatingClassName: string;
+    FloatingComponent: React.ElementType;
+} & {
+    label: React.ReactElement;
+    title: string;
+}>, "ref">) & React.RefAttributes<HTMLButtonElement>>;
+export {};
+//# sourceMappingURL=menu.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../../src/components/floating/menu.tsx"],"names":[],"mappings":"AA0BA,OAAO,EAAkB,KAAK,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAClE,OAAO,KAA2E,MAAM,OAAO,CAAC;AA6BhG,MAAM,MAAM,SAAS,GAAG,OAAO,CAC3B;IACI,KAAK,EAAE,OAAO,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,YAAY,EAAE,OAAO,CAAC;IACtB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,iBAAiB,EAAE,MAAM,CAAC;IAC1B,iBAAiB,EAAE,KAAK,CAAC,WAAW,CAAC;CACxC,GAAG,CAAC;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,GAAG;IAAE,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC,CACzE,CAAC;AA0KF,KAAK,aAAa,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,KAAK,CAAC,EAAE,IAAI,CAAA;CAAE,CAAC;AAEzE,eAAO,MAAM,QAAQ,oKAkCpB,CAAC;AAEF,eAAO,MAAM,IAAI;WA1NF,OAAO;WACP,OAAO;YACN,OAAO;aACN,OAAO;cACN,OAAO;kBACH,OAAO;cACX,KAAK,CAAC,SAAS;uBACN,MAAM;uBACN,KAAK,CAAC,WAAW;;WAC1B,MAAM;;WATT,OAAO;WACP,OAAO;YACN,OAAO;aACN,OAAO;cACN,OAAO;kBACH,OAAO;cACX,KAAK,CAAC,SAAS;uBACN,MAAM;uBACN,KAAK,CAAC,WAAW;;WACN,KAAK,CAAC,YAAY;WAAS,MAAM;qDA0NrE,CAAC"}

package/dist/components/floating/menu.jsx

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