@g4rcez/components 5.0.1 → 5.0.2

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-tabs-header-mb overflow-x-auto">
+                        <div className="absolute bottom-0 h-tabs-divider-h 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-tabs-item-px py-tabs-item-py 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.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;gBAUJ,iBAAiB,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC;SAc9C,CAAC,SAAS,WAAW,qBAAqB,iBAAiB,CAAC,gBAAgB,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;UAQtF,CAAC,SAAS,WAAW,oBAAoB,gBAAgB,CAAC,MAAM,EAAE,CAAC,CAAC;CAxBnH,CAAC;AAgCF,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-timeline-item-pb" role="listitem">
+        <span aria-hidden="true" className="absolute left-timeline-connector-left top-timeline-connector-top -ml-px h-full w-timeline-connector-w 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-timeline-icon-size items-center justify-center rounded-full bg-primary p-timeline-icon-p 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-timeline-right-gap self-stretch px-timeline-right-px 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;AAiDtE,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;AAmCF,eAAO,MAAM,cAAc,GAAI,OAAO,mBAAmB,sBAiNxD,CAAC"}

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

@@ -0,0 +1,223 @@
+"use client";
+import { autoUpdate, useFloating, useInteractions, useListNavigation, useRole } 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="text-typography-sm flex h-full items-center text-left 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-command-row-h px-command-group-px pb-command-group-pb pt-command-group-pt">
+                <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-command-row-h items-center justify-between rounded-command-radius p-command-item-p hover:bg-floating-hover", active ? "bg-floating-hover" : "")}>
+            <span className="flex items-center gap-command-item-gap">
+                {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 listRole = useRole(root.context, { role: "listbox" });
+    const { getItemProps, getReferenceProps, getFloatingProps } = useInteractions([listNav, listRole]);
+    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-command-header-h w-full items-center overflow-clip border-b border-floating-border bg-floating-background">
+                    <div className="flex size-command-icon-size 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,
+                        });
+                }
+            }
+        },
+    })} value={text} data-combikeysbypass="true" placeholder="Search for..." onChange={(e) => setText(e.target.value)} className="text-typography-lg h-command-header-h w-full items-center bg-transparent px-command-input-px py-command-input-py pb-command-input-py text-left outline-none"/>
+                </header>
+                {props.loading ? (<div data-component="command-palette-list" className="my-command-list-my flex max-h-command-list-max-h w-full origin-[top_center] flex-col gap-command-list-gap overflow-y-auto px-command-group-px">
+                        <div className="h-command-row-h px-command-group-px pb-command-group-pb pt-command-group-pt">
+                            {translations.commandPaletteLoading}
+                        </div>
+                        {loadingSkeleton.map((_, i) => (<div key={`${id}-${i}-skeleton-index`} className={css("flex h-command-row-h items-center justify-between rounded-command-radius p-command-item-p hover:bg-primary hover:text-primary-foreground")}>
+                                {SkeletonCell}
+                            </div>))}
+                    </div>) : (<div className="flex min-w-full flex-row flex-nowrap" data-component="command-palette-container">
+                        <div ref={scrollContainerRef} data-component="command-palette-list" className="my-command-list-my flex h-fit max-h-command-list-max-h w-full origin-[top_center] flex-col gap-command-list-gap overflow-y-auto px-command-list-px">
+                            {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-command-radius p-command-item-p text-secondary")}>
+                                    {translations.commandPaletteEmpty ?? props.emptyMessage}
+                                </div>) : null}
+                        </div>
+                        {props.Preview && Is.number(activeIndex) ? <props.Preview command={displayItems[activeIndex]} text={text}/> : null}
+                    </div>)}
+                {props.footer ? (<footer className="flex h-command-footer-h items-center rounded-b-command-radius border-t border-floating-border p-command-footer-p">
+                        {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,
+        }),
+    ], []);
+    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-dropdown-radius border border-floating-border bg-floating-background p-dropdown-p 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-dropdown-header-mb">
+                                <h3 id={headingId} className="text-left text-typography-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;AA6LF,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;WA7OF,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;qDA6OrE,CAAC"}