@g4rcez/components 4.0.2 → 4.1.2

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

@@ -1 +1 @@
-{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../src/components/display/tabs.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAA2B,iBAAiB,EAAiC,MAAM,OAAO,CAAC;AAMzG,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEpC,OAAO,EAAQ,SAAS,EAAE,MAAM,QAAQ,CAAC;AAEzC,MAAM,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;IACzD,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC,CAAC;AA+BF,eAAO,MAAM,IAAI,GAAI,OAAO,iBAAiB,CAAC,SAAS,CAAC,sBAsFvD,CAAC;AAIF,KAAK,cAAc,GAAG;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAEzD,MAAM,MAAM,QAAQ,GAAG,cAAc,GACjC,CACM;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,SAAS,CAAA;CAAE,GACpC;IACI,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;CAC9B,CACN,CAAC;AAEN,eAAO,MAAM,GAAG,GAAI,OAAO,iBAAiB,CAAC,QAAQ,CAAC,sBAGrD,CAAC"}
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../src/components/display/tabs.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAiB,iBAAiB,EAAiC,MAAM,OAAO,CAAC;AAM/F,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEpC,OAAO,EAAQ,SAAS,EAAE,MAAM,QAAQ,CAAC;AAEzC,MAAM,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;IACzD,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC,CAAC;AA2CF,eAAO,MAAM,IAAI,GAAI,OAAO,iBAAiB,CAAC,SAAS,CAAC,sBAiGvD,CAAC;AAIF,KAAK,cAAc,GAAG;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAEzD,MAAM,MAAM,QAAQ,GAAG,cAAc,GACjC,CACM;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,SAAS,CAAA;CAAE,GACpC;IACI,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;CAC9B,CACN,CAAC;AAEN,eAAO,MAAM,GAAG,GAAI,OAAO,iBAAiB,CAAC,QAAQ,CAAC,6BAQrD,CAAC"}

package/dist/components/display/tabs.js

@@ -1,7 +1,7 @@
 import "react/jsx-runtime";
 import "react";
-import "../../dom-Dl8XH0CK.js";
-import { a as T, T as b } from "../../tabs-S00a8qq8.js";
+import "../../dom-CyQHY7ID.js";
+import { a as T, T as b } from "../../tabs-B0g7YtQv.js";
 import "../../use-stable-ref-CYh-YkID.js";
 import "../../polymorph-B5n9fs_K.js";
 import "./card.js";

package/dist/components/display/tabs.jsx

@@ -0,0 +1,125 @@
+"use client";
+import React, { createContext, 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 moveToEdge = (ul, edge) => {
+    const items = Array.from(ul.querySelectorAll("li"));
+    const ordered = edge === "first" ? items : [...items].reverse();
+    for (const item of ordered) {
+        if (!isElementDisabled(item)) {
+            item.querySelector("button")?.focus({ preventScroll: false });
+            return item.getAttribute("data-id") || "";
+        }
+    }
+    return null;
+};
+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);
+        }
+        else if (k === "Home") {
+            e.preventDefault();
+            const result = moveToEdge(ref.current, "first");
+            if (result)
+                setActive(result);
+        }
+        else if (k === "End") {
+            e.preventDefault();
+            const result = moveToEdge(ref.current, "last");
+            if (result)
+                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="relative mb-2 overflow-x-auto">
+                        <div className="absolute bottom-0 h-[1px] w-full bg-card-border"/>
+                        <nav className="min-w-0">
+                            <ul role="tablist" onKeyDown={onKeyDown} ref={ref} className="flex w-0 min-w-full flex-1 justify-start overflow-x-auto">
+                                {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}`} 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 role="tab" as="button" type="button" data-id={inner.id} id={`${inner.id}-tab`} aria-selected={current} disabled={inner.disabled} tabIndex={current ? 0 : -1} aria-controls={`${inner.id}-panel`} onClick={inner.disabled ? undefined : onClick} className="block w-full whitespace-nowrap px-10 py-4 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();
+    if (props.id !== active)
+        return null;
+    return (<div role="tabpanel" tabIndex={0} id={`${props.id}-panel`} aria-labelledby={`${props.id}-tab`}>
+            {props.children}
+        </div>);
+};

package/dist/components/display/timeline.js

@@ -1,5 +1,5 @@
 import { jsxs as a, jsx as i } from "react/jsx-runtime";
-import { c as n } from "../../dom-Dl8XH0CK.js";
+import { c as n } from "../../dom-CyQHY7ID.js";
 import { P as r } from "../../polymorph-B5n9fs_K.js";
 const l = (t) => /* @__PURE__ */ a("li", { "data-component": "timeline-item", className: "relative pb-12", role: "listitem", children: [
   /* @__PURE__ */ i("span", { "aria-hidden": "true", className: "absolute left-6 top-8 -ml-px h-full w-0.5 bg-card-border" }),

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.map

@@ -1 +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,sBA0LxD,CAAC"}
+{"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.map

@@ -1 +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,sBAsE/D,CAAC"}
+{"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.js

@@ -1,51 +1,59 @@
 import { jsxs as c, jsx as s } from "react/jsx-runtime";
-import { o as v, f as x, s as y, a as R, u as p, b as D, n as N, v as P, i as C, d as I, c as M, F as O, l as S, e as j } from "../../floating-ui.react-QNHG9W4N.js";
+import { o as v, f as x, s as y, a as R, u as D, b as N, n as P, v as j, j as p, d as C, c as I, F as M, m as O, e as S } from "../../floating-ui.react-M2PGXLDp.js";
 import { useId as A, useState as E, useEffect as H, useRef as T, useMemo as z, Fragment as U } from "react";
 const B = (e) => {
-  const r = A(), [a, n] = E(e.open);
+  const a = A(), [o, n] = E(e.open);
   H(() => n(e.open), [e.open]);
-  const l = T(null), u = z(
+  const i = T(null), u = z(
     () => [
       v(10),
       x({ fallbackAxisSideDirection: "end" }),
       y(),
       R({
         padding: 5,
-        element: l
+        element: i
       })
     ],
     [e.arrow]
-  ), { refs: i, floatingStyles: f, context: t } = p({
-    open: a,
+  ), { refs: l, floatingStyles: f, context: t } = D({
+    open: o,
     middleware: u,
     transform: !0,
-    whileElementsMounted: D,
-    onOpenChange: (o, k) => {
+    whileElementsMounted: N,
+    onOpenChange: (r, k) => {
       const d = k?.relatedTarget;
-      d && d.dataset.floating === "true" && !o || (n(o), e.onChange?.(o));
+      d && d.dataset.floating === "true" && !r || (n(r), e.onChange?.(r));
     }
-  }), g = N(t), m = P(t, { enabled: e.hover ?? !1 }), h = C(t), b = I(t, { role: "tooltip" }), { getReferenceProps: F, getFloatingProps: w } = M([g, h, b, m]);
+  }), g = P(t), m = j(t, { enabled: e.hover ?? !1 }), h = p(t), b = C(t, { role: "dialog" }), { getReferenceProps: F, getFloatingProps: w } = I([g, h, b, m]);
   return /* @__PURE__ */ c(U, { children: [
-    /* @__PURE__ */ s("button", { ref: i.setReference, ...F(e.buttonProps), type: "button", children: e.trigger }),
-    a && /* @__PURE__ */ s(O, { preserveTabOrder: !0, id: `${r}-portal`, children: /* @__PURE__ */ s(S, { guards: !0, restoreFocus: !0, returnFocus: !0, visuallyHiddenDismiss: !0, context: t, modal: !1, children: /* @__PURE__ */ c(
+    /* @__PURE__ */ s(
+      "button",
+      {
+        ref: l.setReference,
+        ...F(e.buttonProps),
+        type: "button",
+        children: e.trigger
+      }
+    ),
+    o && /* @__PURE__ */ s(M, { preserveTabOrder: !0, id: `${a}-portal`, children: /* @__PURE__ */ s(O, { guards: !0, restoreFocus: !0, returnFocus: !0, visuallyHiddenDismiss: !0, context: t, modal: !1, children: /* @__PURE__ */ c(
       "div",
       {
         className: "relative isolate z-floating rounded-lg border border-floating-border bg-floating-background p-4 shadow-shadow-floating",
-        ref: i.setFloating,
-        "aria-labelledby": r,
+        ref: l.setFloating,
+        "aria-labelledby": a,
         style: f,
         ...w(),
         children: [
           /* @__PURE__ */ s(
-            j,
+            S,
             {
-              ref: l,
+              ref: i,
               context: t,
               strokeWidth: 0.1,
               className: "fill-floating-background stroke-floating-border"
             }
           ),
-          /* @__PURE__ */ s("header", { className: "mb-2", children: /* @__PURE__ */ s("h3", { className: "text-left text-2xl font-medium leading-snug tracking-wide", children: e.title }) }),
+          /* @__PURE__ */ s("header", { className: "mb-2", children: /* @__PURE__ */ s("h3", { id: a, className: "text-left text-2xl font-medium leading-snug tracking-wide", children: e.title }) }),
           e.children
         ]
       }

package/dist/components/floating/dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown.js","sources":["../../../src/components/floating/dropdown.tsx"],"sourcesContent":["\"use client\";\nimport {\n    arrow,\n    autoUpdate,\n    flip,\n    FloatingArrow,\n    FloatingFocusManager,\n    FloatingPortal,\n    offset,\n    shift,\n    useClick,\n    useDismiss,\n    useFloating,\n    useHover,\n    useInteractions,\n    useRole,\n} from \"@floating-ui/react\";\nimport React, { Fragment, PropsWithChildren, useEffect, useId, useMemo, useRef, useState } from \"react\";\n\ntype DropdownProps = {\n    open?: boolean;\n    arrow?: boolean;\n    hover?: boolean;\n    returnFocus?: boolean;\n    restoreFocus?: boolean;\n    buttonProps?: React.HTMLProps<\"button\">;\n    onChange?: (nextValue: boolean) => void;\n    trigger: React.ReactElement | React.ReactNode;\n    title?: React.ReactNode | React.ReactElement | string;\n};\n\nexport const Dropdown = (props: PropsWithChildren<DropdownProps>) => {\n    const headingId = useId();\n    const [open, setOpen] = useState(props.open);\n    useEffect(() => setOpen(props.open), [props.open]);\n    const arrowRef = useRef(null);\n    const middleware = useMemo(\n        () => [\n            offset(10),\n            flip({ fallbackAxisSideDirection: \"end\" }),\n            shift(),\n            arrow({\n                padding: 5,\n                element: arrowRef,\n            }),\n        ],\n        [props.arrow]\n    );\n    const { refs, floatingStyles, context } = useFloating({\n        open,\n        middleware,\n        transform: true,\n        whileElementsMounted: autoUpdate,\n        onOpenChange: (nextValue, event) => {\n            const element = (event as any)?.relatedTarget as HTMLElement;\n            if (element) {\n                if (element.dataset.floating === \"true\" && !nextValue) return;\n            }\n            setOpen(nextValue);\n            props.onChange?.(nextValue);\n        },\n    });\n\n    const click = useClick(context);\n    const hover = useHover(context, { enabled: props.hover ?? false });\n    const dismiss = useDismiss(context);\n    const role = useRole(context, { role: \"tooltip\" });\n\n    const { getReferenceProps, getFloatingProps } = useInteractions([click, dismiss, role, hover]);\n\n    return (\n        <Fragment>\n            <button ref={refs.setReference} {...(getReferenceProps(props.buttonProps as any) as any)} type=\"button\">\n                {props.trigger}\n            </button>\n            {open && (\n                <FloatingPortal preserveTabOrder id={`${headingId}-portal`}>\n                    <FloatingFocusManager guards restoreFocus={true} returnFocus={true} visuallyHiddenDismiss context={context} modal={false}>\n                        <div\n                            className=\"relative isolate z-floating rounded-lg border border-floating-border bg-floating-background p-4 shadow-shadow-floating\"\n                            ref={refs.setFloating}\n                            aria-labelledby={headingId}\n                            style={floatingStyles as unknown as React.CSSProperties}\n                            {...getFloatingProps()}\n                        >\n                            <FloatingArrow\n                                ref={arrowRef}\n                                context={context}\n                                strokeWidth={0.1}\n                                className=\"fill-floating-background stroke-floating-border\"\n                            />\n                            <header className=\"mb-2\">\n                                <h3 className=\"text-left text-2xl font-medium leading-snug tracking-wide\">{props.title}</h3>\n                            </header>\n                            {props.children}\n                        </div>\n                    </FloatingFocusManager>\n                </FloatingPortal>\n            )}\n        </Fragment>\n    );\n};\n"],"names":["Dropdown","props","headingId","useId","open","setOpen","useState","useEffect","arrowRef","useRef","middleware","useMemo","offset","flip","shift","arrow","refs","floatingStyles","context","useFloating","autoUpdate","nextValue","event","element","click","useClick","hover","useHover","dismiss","useDismiss","role","useRole","getReferenceProps","getFloatingProps","useInteractions","Fragment","jsx","FloatingPortal","FloatingFocusManager","jsxs","FloatingArrow"],"mappings":";;;AA+BO,MAAMA,IAAW,CAACC,MAA4C;AACjE,QAAMC,IAAYC,EAAA,GACZ,CAACC,GAAMC,CAAO,IAAIC,EAASL,EAAM,IAAI;AAC3C,EAAAM,EAAU,MAAMF,EAAQJ,EAAM,IAAI,GAAG,CAACA,EAAM,IAAI,CAAC;AACjD,QAAMO,IAAWC,EAAO,IAAI,GACtBC,IAAaC;AAAA,IACf,MAAM;AAAA,MACFC,EAAO,EAAE;AAAA,MACTC,EAAK,EAAE,2BAA2B,OAAO;AAAA,MACzCC,EAAA;AAAA,MACAC,EAAM;AAAA,QACF,SAAS;AAAA,QACT,SAASP;AAAA,MAAA,CACZ;AAAA,IAAA;AAAA,IAEL,CAACP,EAAM,KAAK;AAAA,EAAA,GAEV,EAAE,MAAAe,GAAM,gBAAAC,GAAgB,SAAAC,EAAA,IAAYC,EAAY;AAAA,IAClD,MAAAf;AAAA,IACA,YAAAM;AAAA,IACA,WAAW;AAAA,IACX,sBAAsBU;AAAA,IACtB,cAAc,CAACC,GAAWC,MAAU;AAChC,YAAMC,IAAWD,GAAe;AAChC,MAAIC,KACIA,EAAQ,QAAQ,aAAa,UAAU,CAACF,MAEhDhB,EAAQgB,CAAS,GACjBpB,EAAM,WAAWoB,CAAS;AAAA,IAAA;AAAA,EAC9B,CACH,GAEKG,IAAQC,EAASP,CAAO,GACxBQ,IAAQC,EAAST,GAAS,EAAE,SAASjB,EAAM,SAAS,IAAO,GAC3D2B,IAAUC,EAAWX,CAAO,GAC5BY,IAAOC,EAAQb,GAAS,EAAE,MAAM,WAAW,GAE3C,EAAE,mBAAAc,GAAmB,kBAAAC,EAAA,IAAqBC,EAAgB,CAACV,GAAOI,GAASE,GAAMJ,CAAK,CAAC;AAE7F,2BACKS,GAAA,EACG,UAAA;AAAA,IAAA,gBAAAC,EAAC,UAAA,EAAO,KAAKpB,EAAK,cAAe,GAAIgB,EAAkB/B,EAAM,WAAkB,GAAW,MAAK,UAC1F,UAAAA,EAAM,SACX;AAAA,IACCG,uBACIiC,GAAA,EAAe,kBAAgB,IAAC,IAAI,GAAGnC,CAAS,WAC7C,UAAA,gBAAAkC,EAACE,KAAqB,QAAM,IAAC,cAAc,IAAM,aAAa,IAAM,uBAAqB,IAAC,SAAApB,GAAkB,OAAO,IAC/G,UAAA,gBAAAqB;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAU;AAAA,QACV,KAAKvB,EAAK;AAAA,QACV,mBAAiBd;AAAA,QACjB,OAAOe;AAAA,QACN,GAAGgB,EAAA;AAAA,QAEJ,UAAA;AAAA,UAAA,gBAAAG;AAAA,YAACI;AAAA,YAAA;AAAA,cACG,KAAKhC;AAAA,cACL,SAAAU;AAAA,cACA,aAAa;AAAA,cACb,WAAU;AAAA,YAAA;AAAA,UAAA;AAAA,UAEd,gBAAAkB,EAAC,UAAA,EAAO,WAAU,QACd,UAAA,gBAAAA,EAAC,QAAG,WAAU,6DAA6D,UAAAnC,EAAM,MAAA,CAAM,EAAA,CAC3F;AAAA,UACCA,EAAM;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,GAEf,EAAA,CACJ;AAAA,EAAA,GAER;AAER;"}
+{"version":3,"file":"dropdown.js","sources":["../../../src/components/floating/dropdown.tsx"],"sourcesContent":["\"use client\";\nimport {\n    arrow,\n    autoUpdate,\n    flip,\n    FloatingArrow,\n    FloatingFocusManager,\n    FloatingPortal,\n    offset,\n    shift,\n    useClick,\n    useDismiss,\n    useFloating,\n    useHover,\n    useInteractions,\n    useRole,\n} from \"@floating-ui/react\";\nimport React, { Fragment, PropsWithChildren, useEffect, useId, useMemo, useRef, useState } from \"react\";\n\ntype DropdownProps = {\n    open?: boolean;\n    arrow?: boolean;\n    hover?: boolean;\n    returnFocus?: boolean;\n    restoreFocus?: boolean;\n    buttonProps?: React.HTMLProps<\"button\">;\n    onChange?: (nextValue: boolean) => void;\n    trigger: React.ReactElement | React.ReactNode;\n    title?: React.ReactNode | React.ReactElement | string;\n};\n\nexport const Dropdown = (props: PropsWithChildren<DropdownProps>) => {\n    const headingId = useId();\n    const [open, setOpen] = useState(props.open);\n    useEffect(() => setOpen(props.open), [props.open]);\n    const arrowRef = useRef(null);\n    const middleware = useMemo(\n        () => [\n            offset(10),\n            flip({ fallbackAxisSideDirection: \"end\" }),\n            shift(),\n            arrow({\n                padding: 5,\n                element: arrowRef,\n            }),\n        ],\n        [props.arrow]\n    );\n    const { refs, floatingStyles, context } = useFloating({\n        open,\n        middleware,\n        transform: true,\n        whileElementsMounted: autoUpdate,\n        onOpenChange: (nextValue, event) => {\n            const element = (event as FocusEvent | undefined)?.relatedTarget as HTMLElement | null;\n            if (element) {\n                if (element.dataset.floating === \"true\" && !nextValue) return;\n            }\n            setOpen(nextValue);\n            props.onChange?.(nextValue);\n        },\n    });\n\n    const click = useClick(context);\n    const hover = useHover(context, { enabled: props.hover ?? false });\n    const dismiss = useDismiss(context);\n    const role = useRole(context, { role: \"dialog\" });\n\n    const { getReferenceProps, getFloatingProps } = useInteractions([click, dismiss, role, hover]);\n\n    return (\n        <Fragment>\n            <button\n                ref={refs.setReference}\n                {...(getReferenceProps(props.buttonProps as unknown as React.HTMLProps<Element>) as React.HTMLProps<HTMLButtonElement>)}\n                type=\"button\"\n            >\n                {props.trigger}\n            </button>\n            {open && (\n                <FloatingPortal preserveTabOrder id={`${headingId}-portal`}>\n                    <FloatingFocusManager guards restoreFocus={true} returnFocus={true} visuallyHiddenDismiss context={context} modal={false}>\n                        <div\n                            className=\"relative isolate z-floating rounded-lg border border-floating-border bg-floating-background p-4 shadow-shadow-floating\"\n                            ref={refs.setFloating}\n                            aria-labelledby={headingId}\n                            style={floatingStyles as unknown as React.CSSProperties}\n                            {...getFloatingProps()}\n                        >\n                            <FloatingArrow\n                                ref={arrowRef}\n                                context={context}\n                                strokeWidth={0.1}\n                                className=\"fill-floating-background stroke-floating-border\"\n                            />\n                            <header className=\"mb-2\">\n                                <h3 id={headingId} className=\"text-left text-2xl font-medium leading-snug tracking-wide\">\n                                    {props.title}\n                                </h3>\n                            </header>\n                            {props.children}\n                        </div>\n                    </FloatingFocusManager>\n                </FloatingPortal>\n            )}\n        </Fragment>\n    );\n};\n"],"names":["Dropdown","props","headingId","useId","open","setOpen","useState","useEffect","arrowRef","useRef","middleware","useMemo","offset","flip","shift","arrow","refs","floatingStyles","context","useFloating","autoUpdate","nextValue","event","element","click","useClick","hover","useHover","dismiss","useDismiss","role","useRole","getReferenceProps","getFloatingProps","useInteractions","Fragment","jsx","FloatingPortal","FloatingFocusManager","jsxs","FloatingArrow"],"mappings":";;;AA+BO,MAAMA,IAAW,CAACC,MAA4C;AACjE,QAAMC,IAAYC,EAAA,GACZ,CAACC,GAAMC,CAAO,IAAIC,EAASL,EAAM,IAAI;AAC3C,EAAAM,EAAU,MAAMF,EAAQJ,EAAM,IAAI,GAAG,CAACA,EAAM,IAAI,CAAC;AACjD,QAAMO,IAAWC,EAAO,IAAI,GACtBC,IAAaC;AAAA,IACf,MAAM;AAAA,MACFC,EAAO,EAAE;AAAA,MACTC,EAAK,EAAE,2BAA2B,OAAO;AAAA,MACzCC,EAAA;AAAA,MACAC,EAAM;AAAA,QACF,SAAS;AAAA,QACT,SAASP;AAAA,MAAA,CACZ;AAAA,IAAA;AAAA,IAEL,CAACP,EAAM,KAAK;AAAA,EAAA,GAEV,EAAE,MAAAe,GAAM,gBAAAC,GAAgB,SAAAC,EAAA,IAAYC,EAAY;AAAA,IAClD,MAAAf;AAAA,IACA,YAAAM;AAAA,IACA,WAAW;AAAA,IACX,sBAAsBU;AAAA,IACtB,cAAc,CAACC,GAAWC,MAAU;AAChC,YAAMC,IAAWD,GAAkC;AACnD,MAAIC,KACIA,EAAQ,QAAQ,aAAa,UAAU,CAACF,MAEhDhB,EAAQgB,CAAS,GACjBpB,EAAM,WAAWoB,CAAS;AAAA,IAAA;AAAA,EAC9B,CACH,GAEKG,IAAQC,EAASP,CAAO,GACxBQ,IAAQC,EAAST,GAAS,EAAE,SAASjB,EAAM,SAAS,IAAO,GAC3D2B,IAAUC,EAAWX,CAAO,GAC5BY,IAAOC,EAAQb,GAAS,EAAE,MAAM,UAAU,GAE1C,EAAE,mBAAAc,GAAmB,kBAAAC,EAAA,IAAqBC,EAAgB,CAACV,GAAOI,GAASE,GAAMJ,CAAK,CAAC;AAE7F,2BACKS,GAAA,EACG,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,KAAKpB,EAAK;AAAA,QACT,GAAIgB,EAAkB/B,EAAM,WAAkD;AAAA,QAC/E,MAAK;AAAA,QAEJ,UAAAA,EAAM;AAAA,MAAA;AAAA,IAAA;AAAA,IAEVG,uBACIiC,GAAA,EAAe,kBAAgB,IAAC,IAAI,GAAGnC,CAAS,WAC7C,UAAA,gBAAAkC,EAACE,KAAqB,QAAM,IAAC,cAAc,IAAM,aAAa,IAAM,uBAAqB,IAAC,SAAApB,GAAkB,OAAO,IAC/G,UAAA,gBAAAqB;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAU;AAAA,QACV,KAAKvB,EAAK;AAAA,QACV,mBAAiBd;AAAA,QACjB,OAAOe;AAAA,QACN,GAAGgB,EAAA;AAAA,QAEJ,UAAA;AAAA,UAAA,gBAAAG;AAAA,YAACI;AAAA,YAAA;AAAA,cACG,KAAKhC;AAAA,cACL,SAAAU;AAAA,cACA,aAAa;AAAA,cACb,WAAU;AAAA,YAAA;AAAA,UAAA;AAAA,UAEd,gBAAAkB,EAAC,UAAA,EAAO,WAAU,QACd,UAAA,gBAAAA,EAAC,MAAA,EAAG,IAAIlC,GAAW,WAAU,6DACxB,UAAAD,EAAM,MAAA,CACX,GACJ;AAAA,UACCA,EAAM;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,GAEf,EAAA,CACJ;AAAA,EAAA,GAER;AAER;"}

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.js

@@ -1,20 +1,20 @@
 import { jsxs as h, jsx as t } from "react/jsx-runtime";
-import { u as F, n as I, d as y, i as x, c as P, F as b, l as v } from "../../floating-ui.react-QNHG9W4N.js";
-import { useRef as O, useId as R, useState as j, useEffect as k } from "react";
+import { u as F, n as I, d as y, j as x, c as P, F as b, m as j } from "../../floating-ui.react-M2PGXLDp.js";
+import { useRef as v, useId as O, useState as R, useEffect as k } from "react";
 import { Button as C } from "../core/button.js";
 import { m as r, A as w } from "../../proxy-BZcQiBrp.js";
 const z = (e) => {
-  const l = O(null), n = R(), i = `${n}:wrapper`, u = `${n}:title`, [a, o] = j(e.open ?? !1);
+  const l = v(null), n = O(), a = `${n}:wrapper`, u = `${n}:title`, [i, o] = R(e.open ?? !1);
   k(() => {
     o(e.open ?? !1);
   }, [e.open]);
   const { context: s, refs: c } = F({
     transform: !0,
-    open: a !== null,
+    open: i !== null,
     nodeId: n,
     onOpenChange: o,
     strategy: "absolute"
-  }), d = I(s, { enabled: e.disabled ?? !0 }), m = y(s, { role: "tooltip" }), f = x(s, {
+  }), d = I(s, { enabled: !(e.disabled ?? !1) }), m = y(s, { role: "dialog" }), f = x(s, {
     escapeKey: !0,
     referencePress: !0,
     outsidePress: !0
@@ -25,14 +25,14 @@ const z = (e) => {
       {
         ...p(e),
         as: r.button,
-        layoutId: i,
+        layoutId: a,
         ref: c.setReference,
         size: "small",
         onClick: () => o(!0),
         children: /* @__PURE__ */ t(r.span, { layoutId: u, children: e.trigger })
       }
     ),
-    /* @__PURE__ */ t(w, { children: a ? /* @__PURE__ */ t(b, { root: l, children: /* @__PURE__ */ t(v, { visuallyHiddenDismiss: !0, modal: !0, closeOnFocusOut: !0, context: s, children: /* @__PURE__ */ t(r.div, { ...g(), ref: c.setFloating, layoutId: i, className: "absolute -left-1/4 -top-3/4", children: e.children }) }) }) : null })
+    /* @__PURE__ */ t(w, { children: i ? /* @__PURE__ */ t(b, { root: l, children: /* @__PURE__ */ t(j, { visuallyHiddenDismiss: !0, modal: !0, closeOnFocusOut: !0, context: s, children: /* @__PURE__ */ t(r.div, { ...g(), ref: c.setFloating, layoutId: a, className: "absolute -left-1/4 -top-3/4", children: e.children }) }) }) : null })
   ] });
 };
 export {

package/dist/components/floating/expand.js.map

@@ -1 +1 @@
-{"version":3,"file":"expand.js","sources":["../../../src/components/floating/expand.tsx"],"sourcesContent":["\"use client\";\nimport { FloatingFocusManager, FloatingPortal, useClick, useDismiss, useFloating, useInteractions, useRole } from \"@floating-ui/react\";\nimport { AnimatePresence, motion } from \"motion/react\";\nimport { PropsWithChildren, useEffect, useId, useRef, useState } from \"react\";\nimport { Label, Override } from \"../../types\";\nimport { Button, ButtonProps } from \"../core/button\";\n\nexport type ExpandProps = Override<\n    ButtonProps<typeof motion.button>,\n    {\n        trigger: Label;\n        open?: boolean;\n        disabled?: boolean;\n    }\n>;\n\nexport const Expand = (props: PropsWithChildren<ExpandProps>) => {\n    const root = useRef<HTMLDivElement | null>(null);\n    const id = useId();\n    const wrapperId = `${id}:wrapper`;\n    const titleId = `${id}:title`;\n\n    const [open, setOpen] = useState(props.open ?? false);\n    useEffect(() => {\n        setOpen(props.open ?? false);\n    }, [props.open]);\n    const { context, refs } = useFloating({\n        transform: true,\n        open: open !== null,\n        nodeId: id,\n        onOpenChange: setOpen,\n        strategy: \"absolute\",\n    });\n    const click = useClick(context, { enabled: props.disabled ?? true });\n    const role = useRole(context, { role: \"tooltip\" });\n    const dismiss = useDismiss(context, {\n        escapeKey: true,\n        referencePress: true,\n        outsidePress: true,\n    });\n    const { getFloatingProps, getReferenceProps } = useInteractions([click, role, dismiss]);\n\n    return (\n        <div className=\"relative inline-flex items-center justify-center\" ref={root}>\n            <Button\n                {...getReferenceProps(props as never)}\n                as={motion.button}\n                layoutId={wrapperId}\n                ref={refs.setReference}\n                size=\"small\"\n                onClick={() => setOpen(true)}\n            >\n                <motion.span layoutId={titleId}>{props.trigger}</motion.span>\n            </Button>\n            <AnimatePresence>\n                {open ? (\n                    <FloatingPortal root={root}>\n                        <FloatingFocusManager visuallyHiddenDismiss modal closeOnFocusOut context={context}>\n                            <motion.div {...getFloatingProps()} ref={refs.setFloating} layoutId={wrapperId} className=\"absolute -left-1/4 -top-3/4\">\n                                {props.children}\n                            </motion.div>\n                        </FloatingFocusManager>\n                    </FloatingPortal>\n                ) : null}\n            </AnimatePresence>\n        </div>\n    );\n};\n"],"names":["Expand","props","root","useRef","id","useId","wrapperId","titleId","open","setOpen","useState","useEffect","context","refs","useFloating","click","useClick","role","useRole","dismiss","useDismiss","getFloatingProps","getReferenceProps","useInteractions","jsxs","jsx","Button","motion","AnimatePresence","FloatingPortal","FloatingFocusManager"],"mappings":";;;;;AAgBO,MAAMA,IAAS,CAACC,MAA0C;AAC7D,QAAMC,IAAOC,EAA8B,IAAI,GACzCC,IAAKC,EAAA,GACLC,IAAY,GAAGF,CAAE,YACjBG,IAAU,GAAGH,CAAE,UAEf,CAACI,GAAMC,CAAO,IAAIC,EAAST,EAAM,QAAQ,EAAK;AACpD,EAAAU,EAAU,MAAM;AACZ,IAAAF,EAAQR,EAAM,QAAQ,EAAK;AAAA,EAAA,GAC5B,CAACA,EAAM,IAAI,CAAC;AACf,QAAM,EAAE,SAAAW,GAAS,MAAAC,EAAA,IAASC,EAAY;AAAA,IAClC,WAAW;AAAA,IACX,MAAMN,MAAS;AAAA,IACf,QAAQJ;AAAA,IACR,cAAcK;AAAA,IACd,UAAU;AAAA,EAAA,CACb,GACKM,IAAQC,EAASJ,GAAS,EAAE,SAASX,EAAM,YAAY,IAAM,GAC7DgB,IAAOC,EAAQN,GAAS,EAAE,MAAM,WAAW,GAC3CO,IAAUC,EAAWR,GAAS;AAAA,IAChC,WAAW;AAAA,IACX,gBAAgB;AAAA,IAChB,cAAc;AAAA,EAAA,CACjB,GACK,EAAE,kBAAAS,GAAkB,mBAAAC,MAAsBC,EAAgB,CAACR,GAAOE,GAAME,CAAO,CAAC;AAEtF,SACI,gBAAAK,EAAC,OAAA,EAAI,WAAU,oDAAmD,KAAKtB,GACnE,UAAA;AAAA,IAAA,gBAAAuB;AAAA,MAACC;AAAA,MAAA;AAAA,QACI,GAAGJ,EAAkBrB,CAAc;AAAA,QACpC,IAAI0B,EAAO;AAAA,QACX,UAAUrB;AAAA,QACV,KAAKO,EAAK;AAAA,QACV,MAAK;AAAA,QACL,SAAS,MAAMJ,EAAQ,EAAI;AAAA,QAE3B,4BAACkB,EAAO,MAAP,EAAY,UAAUpB,GAAU,YAAM,QAAA,CAAQ;AAAA,MAAA;AAAA,IAAA;AAAA,IAEnD,gBAAAkB,EAACG,GAAA,EACI,UAAApB,IACG,gBAAAiB,EAACI,KAAe,MAAA3B,GACZ,UAAA,gBAAAuB,EAACK,GAAA,EAAqB,uBAAqB,IAAC,OAAK,IAAC,iBAAe,IAAC,SAAAlB,GAC9D,UAAA,gBAAAa,EAACE,EAAO,KAAP,EAAY,GAAGN,EAAA,GAAoB,KAAKR,EAAK,aAAa,UAAUP,GAAW,WAAU,+BACrF,UAAAL,EAAM,SAAA,CACX,EAAA,CACJ,GACJ,IACA,KAAA,CACR;AAAA,EAAA,GACJ;AAER;"}
+{"version":3,"file":"expand.js","sources":["../../../src/components/floating/expand.tsx"],"sourcesContent":["\"use client\";\nimport { FloatingFocusManager, FloatingPortal, useClick, useDismiss, useFloating, useInteractions, useRole } from \"@floating-ui/react\";\nimport { AnimatePresence, motion } from \"motion/react\";\nimport { PropsWithChildren, useEffect, useId, useRef, useState } from \"react\";\nimport { Label, Override } from \"../../types\";\nimport { Button, ButtonProps } from \"../core/button\";\n\nexport type ExpandProps = Override<\n    ButtonProps<typeof motion.button>,\n    {\n        trigger: Label;\n        open?: boolean;\n        disabled?: boolean;\n    }\n>;\n\nexport const Expand = (props: PropsWithChildren<ExpandProps>) => {\n    const root = useRef<HTMLDivElement | null>(null);\n    const id = useId();\n    const wrapperId = `${id}:wrapper`;\n    const titleId = `${id}:title`;\n\n    const [open, setOpen] = useState(props.open ?? false);\n    useEffect(() => {\n        setOpen(props.open ?? false);\n    }, [props.open]);\n    const { context, refs } = useFloating({\n        transform: true,\n        open: open !== null,\n        nodeId: id,\n        onOpenChange: setOpen,\n        strategy: \"absolute\",\n    });\n    const click = useClick(context, { enabled: !(props.disabled ?? false) });\n    const role = useRole(context, { role: \"dialog\" });\n    const dismiss = useDismiss(context, {\n        escapeKey: true,\n        referencePress: true,\n        outsidePress: true,\n    });\n    const { getFloatingProps, getReferenceProps } = useInteractions([click, role, dismiss]);\n\n    return (\n        <div className=\"relative inline-flex items-center justify-center\" ref={root}>\n            <Button\n                {...getReferenceProps(props as never)}\n                as={motion.button}\n                layoutId={wrapperId}\n                ref={refs.setReference}\n                size=\"small\"\n                onClick={() => setOpen(true)}\n            >\n                <motion.span layoutId={titleId}>{props.trigger}</motion.span>\n            </Button>\n            <AnimatePresence>\n                {open ? (\n                    <FloatingPortal root={root}>\n                        <FloatingFocusManager visuallyHiddenDismiss modal closeOnFocusOut context={context}>\n                            <motion.div {...getFloatingProps()} ref={refs.setFloating} layoutId={wrapperId} className=\"absolute -left-1/4 -top-3/4\">\n                                {props.children}\n                            </motion.div>\n                        </FloatingFocusManager>\n                    </FloatingPortal>\n                ) : null}\n            </AnimatePresence>\n        </div>\n    );\n};\n"],"names":["Expand","props","root","useRef","id","useId","wrapperId","titleId","open","setOpen","useState","useEffect","context","refs","useFloating","click","useClick","role","useRole","dismiss","useDismiss","getFloatingProps","getReferenceProps","useInteractions","jsxs","jsx","Button","motion","AnimatePresence","FloatingPortal","FloatingFocusManager"],"mappings":";;;;;AAgBO,MAAMA,IAAS,CAACC,MAA0C;AAC7D,QAAMC,IAAOC,EAA8B,IAAI,GACzCC,IAAKC,EAAA,GACLC,IAAY,GAAGF,CAAE,YACjBG,IAAU,GAAGH,CAAE,UAEf,CAACI,GAAMC,CAAO,IAAIC,EAAST,EAAM,QAAQ,EAAK;AACpD,EAAAU,EAAU,MAAM;AACZ,IAAAF,EAAQR,EAAM,QAAQ,EAAK;AAAA,EAAA,GAC5B,CAACA,EAAM,IAAI,CAAC;AACf,QAAM,EAAE,SAAAW,GAAS,MAAAC,EAAA,IAASC,EAAY;AAAA,IAClC,WAAW;AAAA,IACX,MAAMN,MAAS;AAAA,IACf,QAAQJ;AAAA,IACR,cAAcK;AAAA,IACd,UAAU;AAAA,EAAA,CACb,GACKM,IAAQC,EAASJ,GAAS,EAAE,SAAS,EAAEX,EAAM,YAAY,KAAQ,GACjEgB,IAAOC,EAAQN,GAAS,EAAE,MAAM,UAAU,GAC1CO,IAAUC,EAAWR,GAAS;AAAA,IAChC,WAAW;AAAA,IACX,gBAAgB;AAAA,IAChB,cAAc;AAAA,EAAA,CACjB,GACK,EAAE,kBAAAS,GAAkB,mBAAAC,MAAsBC,EAAgB,CAACR,GAAOE,GAAME,CAAO,CAAC;AAEtF,SACI,gBAAAK,EAAC,OAAA,EAAI,WAAU,oDAAmD,KAAKtB,GACnE,UAAA;AAAA,IAAA,gBAAAuB;AAAA,MAACC;AAAA,MAAA;AAAA,QACI,GAAGJ,EAAkBrB,CAAc;AAAA,QACpC,IAAI0B,EAAO;AAAA,QACX,UAAUrB;AAAA,QACV,KAAKO,EAAK;AAAA,QACV,MAAK;AAAA,QACL,SAAS,MAAMJ,EAAQ,EAAI;AAAA,QAE3B,4BAACkB,EAAO,MAAP,EAAY,UAAUpB,GAAU,YAAM,QAAA,CAAQ;AAAA,MAAA;AAAA,IAAA;AAAA,IAEnD,gBAAAkB,EAACG,GAAA,EACI,UAAApB,IACG,gBAAAiB,EAACI,KAAe,MAAA3B,GACZ,UAAA,gBAAAuB,EAACK,GAAA,EAAqB,uBAAqB,IAAC,OAAK,IAAC,iBAAe,IAAC,SAAAlB,GAC9D,UAAA,gBAAAa,EAACE,EAAO,KAAP,EAAY,GAAGN,EAAA,GAAoB,KAAKR,EAAK,aAAa,UAAUP,GAAW,WAAU,+BACrF,UAAAL,EAAM,SAAA,CACX,EAAA,CACJ,GACJ,IACA,KAAA,CACR;AAAA,EAAA,GACJ;AAER;"}