@mendylanda/ui 0.1.5 → 0.1.6

package/README.md

@@ -61,3 +61,20 @@ Chips enter with a short, staggered Motion spring. Reduced-motion preferences di
 Filter lists use the search anchor's width by default and shrink when the viewport cannot fit both columns. Override `--mendy-filter-list-width` or `--mendy-filter-menu-width` for a custom layout. In anchored mode, editors touch the list and move upward for lower rows so short editors stay within the list's height.
 
 `FilterList` uses the original SimCall Motion variants: a 60ms stagger on initial list entry and the default item transition from y=10/opacity=0 to y=0/opacity=1. New chips enter immediately, without a delay based on their list position. `FilterChipList` provides the same orchestration for custom compositions of `FilterChip`; standalone chips also animate.
+
+### Existing search state
+
+`useFilterSearch(value, onChange, delay?)` keeps a responsive input draft while debouncing writes to an existing URL or query hook. It ignores acknowledgements of earlier writes while the user is typing, accepts external navigation, clears immediately, and cancels pending writes on unmount. The default delay is 300ms.
+
+```tsx
+const search = useFilterSearch(params.search, (value) => setParams({ search: value }));
+return <input value={search.value} onChange={(event) => search.setValue(event.target.value)} />;
+```
+
+### Tailwind 3
+
+Import `@mendylanda/ui/styles.tailwind3.css` instead of `@mendylanda/ui/styles.css` in Tailwind 3 projects. It contains the same scoped rules with compatible CSS layers. No package-specific PostCSS plugin is needed. Tailwind 4 projects and projects without Tailwind should use `styles.css`.
+
+The package expects complete CSS color values. A host that stores HSL channels still needs to map them to colors, including inside portals and any custom editors that use host styles.
+
+Opening the menu shows the category list without choosing a filter. Focusing a category does not open it. Hover previews its editor; click, Enter, Space or the entry arrow opens it and moves focus into the editor.

package/dist/filters/filter-menu-panel.js

@@ -26,15 +26,14 @@ function subscribeViewport(listener) {
 }
 const isDesktop = () => window.innerWidth >= 40 * parseFloat(getComputedStyle(document.documentElement).fontSize);
 const serverDesktop = () => false;
-function selectedSection(sections, selectedId, desktop) {
-    return (sections.find((section) => section.id === selectedId && !section.disabled) ??
-        (desktop ? sections.find((section) => !section.disabled) : undefined));
+function selectedSection(sections, selectedId) {
+    return sections.find((section) => section.id === selectedId && !section.disabled);
 }
 /** One dialog contains the filter list and its editor, with a single-panel layout on phones. */
 export function FilterMenuPanel({ sections, selectedId, onSelect, onClose, anchor, trigger, }) {
     const { classNames, menuLayout } = useMendyUI();
     const desktop = useSyncExternalStore(subscribeViewport, isDesktop, serverDesktop);
-    const selected = selectedSection(sections, selectedId, desktop);
+    const selected = selectedSection(sections, selectedId);
     const content = useRef(null);
     const editor = useRef(null);
     const rows = useRef(new Map());
@@ -92,6 +91,7 @@ export function FilterMenuPanel({ sections, selectedId, onSelect, onClose, ancho
         requestAnimationFrame(() => previous && rows.current.get(previous)?.focus());
     }
     const showList = desktop || !selected;
+    const sideBySide = desktop && Boolean(selected);
     return (_jsx(DropdownMenuContent, { ref: content, "data-mendy-ui": "", "data-slot": "filter-menu-panel", role: "dialog", "aria-label": "Filters", "aria-labelledby": undefined, "aria-orientation": undefined, align: desktop ? "start" : "end", alignOffset: alignOffset, side: side, style: anchorStyle, sideOffset: 7, collisionPadding: 16, onEscapeKeyDown: (event) => {
             if (selected && !desktop) {
                 event.preventDefault();
@@ -117,9 +117,9 @@ export function FilterMenuPanel({ sections, selectedId, onSelect, onClose, ancho
                 rows.current.get(selected?.id ?? "")?.focus();
             else
                 back();
-        }), className: cn("mui-971625533e56 mui-571ea69568d3 mui-34055e6f8c1b mui-d5111d0e9f48 mui-04760bcd507f mui-94ea94fde25f mui-393df0d154e0 mui-548a450e8e53", "mui-d7d803c609c5", desktop && selected
-            ? "mui-bd8a502f98ae" : "mui-0b9c84552e40", detached && "mui-0fc84a692dad mui-dad556abfe15 mui-8fca9236d191 mui-89c3006b2722", classNames?.menu), children: _jsxs("div", { className: cn("mui-80baa5d03af7", desktop && selected
-                ? "mui-0f2a693e93e2 mui-b5985369ee35 mui-a3c6c8c31aed" : "mui-222f930b8752 mui-302c0d124a94", detached && "mui-b9677bd1cb66 mui-e0122edc668b"), children: [showList && (_jsx(FilterMenuList, { sections: sections, selectedId: selected?.id, initialKey: selected?.id ?? lastSelection.current, panelId: panelId, desktop: desktop, detached: detached, rows: rows, choose: choose, keyboardNavigation: keyboardNavigation, onPointerMove: (id, event) => {
+        }), className: cn("mui-971625533e56 mui-571ea69568d3 mui-34055e6f8c1b mui-d5111d0e9f48 mui-04760bcd507f mui-94ea94fde25f mui-393df0d154e0 mui-548a450e8e53", "mui-d7d803c609c5", sideBySide
+            ? "mui-bd8a502f98ae" : "mui-0b9c84552e40", detached && "mui-0fc84a692dad mui-dad556abfe15 mui-8fca9236d191 mui-89c3006b2722", classNames?.menu), children: _jsxs("div", { className: cn("mui-80baa5d03af7", sideBySide
+                ? "mui-0f2a693e93e2 mui-b5985369ee35 mui-a3c6c8c31aed" : "mui-222f930b8752 mui-302c0d124a94", detached && cn("mui-e0122edc668b", selected && "mui-b9677bd1cb66")), children: [showList && (_jsx(FilterMenuList, { sections: sections, selectedId: selected?.id, initialKey: selected?.id ?? lastSelection.current, panelId: panelId, desktop: desktop, detached: detached, rows: rows, choose: choose, keyboardNavigation: keyboardNavigation, onPointerMove: (id, event) => {
                         if (desktop && event.pointerType === "mouse") {
                             setKeyboardNavigation(false);
                             const focused = document.activeElement;
@@ -193,9 +193,6 @@ function FilterMenuList({ sections, selectedId, initialKey, panelId, desktop, de
                             : undefined, "aria-expanded": selectedId === section.id, "aria-controls": selectedId === section.id ? `${panelId}-${section.id}` : undefined, "data-navigation": keyboardNavigation ? "keyboard" : "pointer", "data-separator": section.separatorBefore && !query ? "true" : undefined, disabled: section.disabled, className: cn("mui-a66e9985b093 mui-8423dc94ee06 mui-58d0413dd93c mui-c62ec162662e mui-074569488cca mui-02e603944040 mui-e7e01cc7f4df mui-b5edc3ea7c91 mui-c74ab393b96d mui-52101fc7d8bb mui-aa0e3c036805 mui-41d1475cf71a mui-dfc89afd7885", selectedId === section.id && "mui-292affc1f780 mui-cc209238d847", classNames?.menuRow), onPointerMove: (event) => {
                         if (!section.disabled)
                             onPointerMove(section.id, event);
-                    }, onFocus: () => {
-                        if (desktop)
-                            choose(section.id);
                     }, onClick: () => choose(section.id, true), onKeyDown: (event) => {
                         if (event.nativeEvent.isComposing)
                             return;

package/dist/filters/index.d.ts

@@ -8,3 +8,4 @@ export * from "./filters.js";
 export * from "./filter-text-editor.js";
 export * from "./filter-select-editor.js";
 export * from "../customization.js";
+export * from "./use-filter-search.js";

package/dist/filters/index.js

@@ -8,3 +8,4 @@ export * from "./filters.js";
 export * from "./filter-text-editor.js";
 export * from "./filter-select-editor.js";
 export * from "../customization.js";
+export * from "./use-filter-search.js";

package/dist/filters/use-filter-search.d.ts

@@ -0,0 +1,5 @@
+/** Debounce URL-backed queries without replacing newer typing with an older URL acknowledgement. */
+export declare function useFilterSearch(value: string | null | undefined, onChange: (value: string | null) => void, delay?: number): {
+    value: string;
+    setValue: (next: string) => void;
+};

package/dist/filters/use-filter-search.js

@@ -0,0 +1,44 @@
+"use client";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+/** Debounce URL-backed queries without replacing newer typing with an older URL acknowledgement. */
+export function useFilterSearch(value, onChange, delay = 300) {
+    const committed = value ?? "";
+    const [state, setState] = useState({ committed, draft: committed });
+    const timer = useRef(null);
+    const pending = useRef([]);
+    const change = useRef(onChange);
+    useLayoutEffect(() => {
+        change.current = onChange;
+    });
+    if (state.committed !== committed) {
+        setState({
+            committed,
+            draft: pending.current.includes(committed) ? state.draft : committed,
+        });
+    }
+    useLayoutEffect(() => {
+        const acknowledgement = pending.current.includes(committed);
+        pending.current = pending.current.filter((request) => request !== committed);
+        if (!acknowledgement && timer.current)
+            clearTimeout(timer.current);
+    }, [committed]);
+    useEffect(() => () => {
+        if (timer.current)
+            clearTimeout(timer.current);
+    }, []);
+    function setValue(next) {
+        if (timer.current)
+            clearTimeout(timer.current);
+        setState((current) => ({ ...current, draft: next }));
+        function commit() {
+            if (next !== committed)
+                pending.current.push(next);
+            change.current(next || null);
+        }
+        if (!next)
+            commit();
+        else
+            timer.current = setTimeout(commit, delay);
+    }
+    return { value: state.draft, setValue };
+}

package/dist/primitives/button.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { cva } from "class-variance-authority";
 import { cn } from "../utils.js";
-import { Slot } from "radix-ui";
+import * as Slot from "@radix-ui/react-slot";
 const buttonVariants = cva("mui-123306850fe1 mui-27ead27a81df mui-71556df3b421 mui-a503dd374cca mui-074569488cca mui-3fa8c572949b mui-c74ab393b96d mui-daaac3fbf55e mui-963f6168b7d6 mui-eae178841c68 mui-b30fc56058b6 mui-39be5a15b766 mui-db549d38ff19 mui-8d3c1014b967 mui-4600b77303d6 mui-bcae9d37090c mui-040e748a3fa0 mui-eb5ef2dbc2d4", {
     variants: {
         variant: {

package/dist/primitives/checkbox.d.ts

@@ -1,4 +1,4 @@
 import * as React from "react";
-import { Checkbox as CheckboxPrimitive } from "radix-ui";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 declare function Checkbox({ className, ...props }: React.ComponentProps<typeof CheckboxPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
 export { Checkbox };

package/dist/primitives/checkbox.js

@@ -3,7 +3,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "../utils.js";
 import { CheckIcon } from "lucide-react";
-import { Checkbox as CheckboxPrimitive } from "radix-ui";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 function Checkbox({ className, ...props }) {
     return (_jsx(CheckboxPrimitive.Root, { "data-mendy-ui": "", "data-slot": "checkbox", className: cn("mui-2ffc1d06387e mui-100c22d5776b mui-27ead27a81df mui-02e603944040 mui-4f1a55de40bc mui-1267095cdeb7 mui-7de07d413c13 mui-2b48746f4314 mui-b30fc56058b6 mui-b906a32b31ee mui-365a4654f7b1 mui-392a26f4c1b0 mui-db567af109b7 mui-4600b77303d6 mui-1fac1d7d1df3 mui-5491fd0b4dc5 mui-20553d55d224 mui-57d6d6401a2f mui-7ca12016214f mui-9daa2369a41b mui-c88f65aa011e mui-bd73d819941e", className), ...props, children: _jsx(CheckboxPrimitive.Indicator, { "data-mendy-ui": "", "data-slot": "checkbox-indicator", className: "mui-0f2a693e93e2 mui-8fd2e2355cbc mui-5eafab9bbefc mui-b4b2fd95f324", children: _jsx(CheckIcon, { className: "mui-61c000c8a98a" }) }) }));
 }

package/dist/primitives/dropdown-menu.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 declare function DropdownMenu({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
 declare function DropdownMenuPortal({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>): import("react/jsx-runtime").JSX.Element;
 declare function DropdownMenuTrigger({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;

package/dist/primitives/dropdown-menu.js

@@ -4,7 +4,7 @@ import * as React from "react";
 import { useMendyUI } from "../customization.js";
 import { cn } from "../utils.js";
 import { CheckIcon, ChevronRightIcon } from "lucide-react";
-import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 function DropdownMenu({ ...props }) {
     return _jsx(DropdownMenuPrimitive.Root, { "data-mendy-ui": "", "data-slot": "dropdown-menu", ...props });
 }

package/dist/primitives/label.d.ts

@@ -1,4 +1,4 @@
 import * as React from "react";
-import { Label as LabelPrimitive } from "radix-ui";
+import * as LabelPrimitive from "@radix-ui/react-label";
 declare function Label({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
 export { Label };

package/dist/primitives/label.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "../utils.js";
-import { Label as LabelPrimitive } from "radix-ui";
+import * as LabelPrimitive from "@radix-ui/react-label";
 function Label({ className, ...props }) {
     return (_jsx(LabelPrimitive.Root, { "data-mendy-ui": "", "data-slot": "label", className: cn("mui-222f930b8752 mui-71556df3b421 mui-074569488cca mui-c74ab393b96d mui-761cdb81bddb mui-daaac3fbf55e mui-78905c9e865c mui-9af9a4182597 mui-272ef88d6a0c mui-f0ee83167878 mui-25d26df52a1d", className), ...props }));
 }