@teamofsilicons/silicon-ui 0.0.0-stage → 0.2.0

package/components/morph-select/morph-select.d.ts

@@ -0,0 +1,50 @@
+import type { ReactNode } from "react";
+export interface MorphSelectOption {
+    value: string;
+    label: string;
+    /** A 20px mark shown before the label, in the list and in the trigger. An avatar or a plain icon. */
+    icon?: ReactNode;
+    /** Short trailing detail such as an offset or a count. Rendered with tabular numerals. */
+    meta?: string;
+    /** Extra words that match this option when searching. */
+    keywords?: string;
+    disabled?: boolean;
+}
+/** A labelled run of options. */
+export interface MorphSelectGroup {
+    label: string;
+    options: MorphSelectOption[];
+}
+export type MorphSelectItem = MorphSelectOption | MorphSelectGroup;
+/**
+ * A select whose trigger is the list. Opening grows the trigger itself into the options surface, a highlight glides between options,
+ * and the chosen option's label lifts out of the list and settles into the trigger while the trigger springs to its new width.
+ * Supports groups, type-ahead, search for long lists, and the full listbox keyboard model.
+ * Use it for compact property pickers and form fields with up to a few hundred options. Prefer a combobox when people mostly type free text.
+ */
+export interface MorphSelectProps {
+    /** Visible label, also the accessible name of the trigger and the list. */
+    label: string;
+    /** Keeps the label for assistive technology only. */
+    hideLabel?: boolean;
+    items: MorphSelectItem[];
+    value?: string | null;
+    defaultValue?: string | null;
+    onValueChange?: (value: string, option: MorphSelectOption) => void;
+    placeholder?: string;
+    /** Shows a search field in place of the trigger when open. "auto" turns it on above eight options. */
+    searchable?: boolean | "auto";
+    searchPlaceholder?: string;
+    /** Width of the open surface in px. It never gets narrower than the trigger. Defaults to 272. */
+    panelWidth?: number;
+    /** Tallest the option list gets before it scrolls, in px. Defaults to 296. */
+    maxListHeight?: number;
+    /** Which edge of the trigger stays put while the surface grows. */
+    align?: "start" | "end";
+    /** Adds a hidden input for native form submission. */
+    name?: string;
+    disabled?: boolean;
+    className?: string;
+}
+export declare function MorphSelect({ label, hideLabel, items, value, defaultValue, onValueChange, placeholder, searchable, searchPlaceholder, panelWidth, maxListHeight, align, name, disabled, className }: MorphSelectProps): import("react").JSX.Element;
+export default MorphSelect;

package/components/morph-select/morph-select.js

@@ -0,0 +1,395 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { AnimatePresence, animate, motion, useMotionValue, useReducedMotion } from "motion/react";
+import { Check, ChevronDown, Search, X } from "lucide-react";
+import { motionTokens } from "../../lib/motion-tokens.js";
+import styles from "./morph-select.module.css";
+const { blur } = motionTokens;
+const enter = [...motionTokens.ease.enter];
+const standard = [...motionTokens.ease.standard];
+/** Duration springs restated as stiffness and damping, so a retarget mid flight keeps the velocity it already has. */
+const physical = (visualDuration, bounce) => {
+    const root = 2 * Math.PI / (visualDuration * 1.2);
+    return { type: "spring", stiffness: root * root, damping: 2 * (1 - bounce) * root, mass: 1 };
+};
+const GROW = physical(.4, .12), SHRINK = physical(.34, 0), GLIDE = physical(.28, .08), WIDTH = physical(.42, .16);
+/** Width that narrows never overshoots: dipping even half a pixel under the closed width ellipsizes the label and nudges the chevron. */
+const NARROW = physical(.42, 0);
+/** The lifted label travels a touch faster than the surface folds, so the closing edge never catches it. */
+const FLY = physical(.3, .06);
+const OPEN_RADIUS = 22;
+const TYPEAHEAD_RESET = 600, PAGE = 8;
+const subscribe = () => () => { };
+function useReducedFlag() {
+    const hydrated = useSyncExternalStore(subscribe, () => true, () => false);
+    return !!useReducedMotion() && hydrated;
+}
+const isGroup = (item) => "options" in item;
+/** Loose options between groups gather into unlabelled sections, so the list keeps the order it was given. */
+function normalize(items) {
+    const out = [];
+    items.forEach((item, index) => {
+        if (isGroup(item)) {
+            out.push({ key: `group-${index}`, label: item.label, options: item.options });
+            return;
+        }
+        const last = out[out.length - 1];
+        if (last && !last.label)
+            last.options.push(item);
+        else
+            out.push({ key: `loose-${index}`, options: [item] });
+    });
+    return out;
+}
+function matches(option, needle) {
+    return `${option.label} ${option.meta ?? ""} ${option.keywords ?? ""}`.toLowerCase().includes(needle);
+}
+/** Lid values roll with the list: a later option rises from below, an earlier one drops from above. */
+const valueVariants = {
+    enter: (change) => change.fly ? { opacity: 1, x: change.fly.x, y: change.fly.y, filter: "blur(0px)" } : { opacity: 0, x: 0, y: `${change.dir * .5}em`, filter: `blur(${blur.soft}px)` },
+    rest: { opacity: 1, x: 0, y: 0, filter: "blur(0px)" },
+    exit: (change) => ({ opacity: 0, x: 0, y: change.fly ? "-0.3em" : `${change.dir * -.45}em`, filter: `blur(${blur.subtle}px)`, transition: { duration: .12, ease: standard } }),
+};
+const valueFade = { enter: { opacity: 0 }, rest: { opacity: 1, x: 0, y: 0, filter: "blur(0px)" }, exit: { opacity: 0, transition: { duration: .1 } } };
+/** The closed trigger's width, rounded up. offsetWidth rounds to the nearest pixel, and half a pixel short is enough to ellipsize the label. */
+const triggerWidth = (node) => {
+    const exact = node.getBoundingClientRect().width, rounded = node.offsetWidth;
+    // Under a scaled ancestor the rect is scaled too, so fall back to the layout width with a pixel of slack.
+    return Math.abs(exact - rounded) <= .5 ? Math.ceil(exact - .01) : rounded + 1;
+};
+export function MorphSelect({ label, hideLabel = false, items, value, defaultValue = null, onValueChange, placeholder = "Select", searchable = "auto", searchPlaceholder, panelWidth = 272, maxListHeight = 296, align = "start", name, disabled = false, className }) {
+    const reduced = useReducedFlag();
+    const uid = useId();
+    const labelId = `${uid}-label`, listId = `${uid}-list`, optionId = (index) => `${uid}-option-${index}`;
+    const rootRef = useRef(null);
+    const measureRef = useRef(null);
+    const listFaceRef = useRef(null);
+    const scrollRef = useRef(null);
+    const triggerRef = useRef(null);
+    const inputRef = useRef(null);
+    const slotRef = useRef(null);
+    const optionRefs = useRef(new Map());
+    const sections = useMemo(() => normalize(items), [items]);
+    const all = useMemo(() => sections.flatMap(section => section.options), [sections]);
+    const indexOf = useMemo(() => new Map(all.map((option, index) => [option.value, index])), [all]);
+    const canSearch = searchable === "auto" ? all.length > 8 : searchable;
+    const [inner, setInner] = useState(defaultValue);
+    const selected = value !== undefined ? value : inner;
+    const selectedOption = selected === null ? undefined : all.find(option => option.value === selected);
+    const [open, setOpen] = useState(false);
+    const [query, setQuery] = useState("");
+    const [active, setActive] = useState(null);
+    const [change, setChange] = useState({ key: 0, value: null, dir: 1, fly: null });
+    const needle = query.trim().toLowerCase();
+    const visibleSections = useMemo(() => needle
+        ? sections.map(section => ({ ...section, options: section.options.filter(option => matches(option, needle)) })).filter(section => section.options.length)
+        : sections, [needle, sections]);
+    const enabled = useMemo(() => visibleSections.flatMap(section => section.options).filter(option => !option.disabled), [visibleSections]);
+    const current = active !== null && enabled.some(option => option.value === active) ? active : enabled[0]?.value ?? null;
+    const resultCount = visibleSections.reduce((sum, section) => sum + section.options.length, 0);
+    /* The shape: one surface whose width, height, and corners spring between the trigger and the open list. */
+    const anchorW = useMotionValue("auto");
+    const shapeW = useMotionValue("100%"), shapeH = useMotionValue("100%"), radius = useMotionValue(22);
+    const sizes = useRef({ trigger: 0, lid: 0, listW: 0, listH: 0 });
+    const live = useRef({ open: false, reduced: false, measured: false });
+    useLayoutEffect(() => { live.current.reduced = reduced; }, [reduced]);
+    const place = useCallback((animated) => {
+        const { trigger, lid, listW, listH } = sizes.current;
+        if (!trigger || !lid)
+            return;
+        const isOpen = live.current.open;
+        const next = isOpen ? { w: Math.max(trigger, listW), h: lid + listH, r: OPEN_RADIUS } : { w: trigger, h: lid, r: lid / 2 };
+        if (!animated || live.current.reduced || !live.current.measured) {
+            anchorW.jump(trigger);
+            shapeW.jump(next.w);
+            shapeH.jump(next.h);
+            radius.jump(next.r);
+            live.current.measured = true;
+            return;
+        }
+        const lastW = typeof shapeW.get() === "number" ? shapeW.get() : next.w;
+        const lastH = typeof shapeH.get() === "number" ? shapeH.get() : next.h;
+        const lastAnchor = typeof anchorW.get() === "number" ? anchorW.get() : trigger;
+        const transition = next.w * next.h >= lastW * lastH ? GROW : SHRINK;
+        animate(anchorW, trigger, trigger < lastAnchor ? NARROW : WIDTH);
+        animate(shapeW, next.w, isOpen ? transition : next.w < lastW ? NARROW : WIDTH);
+        animate(shapeH, next.h, transition);
+        animate(radius, next.r, transition);
+    }, [anchorW, radius, shapeH, shapeW]);
+    useLayoutEffect(() => {
+        const measure = measureRef.current, face = listFaceRef.current, root = rootRef.current;
+        if (!measure || !face || !root)
+            return;
+        const read = () => {
+            const previous = sizes.current;
+            // The open list is never narrower than the trigger; the width goes to CSS directly so a new label never waits on a render.
+            root.style.setProperty("--ms-trigger-w", `${triggerWidth(measure)}px`);
+            const next = { trigger: triggerWidth(measure), lid: measure.offsetHeight, listW: face.offsetWidth, listH: face.offsetHeight };
+            const changed = next.trigger !== previous.trigger || next.lid !== previous.lid || (live.current.open && (next.listW !== previous.listW || next.listH !== previous.listH));
+            sizes.current = next;
+            if (changed)
+                place(live.current.measured);
+        };
+        read();
+        root.dataset.ready = "";
+        if (typeof ResizeObserver === "undefined")
+            return;
+        const observer = new ResizeObserver(read);
+        observer.observe(measure);
+        observer.observe(face);
+        return () => observer.disconnect();
+    }, [place]);
+    useLayoutEffect(() => {
+        if (live.current.open === open)
+            return;
+        live.current.open = open;
+        // A pick changes the label and closes in the same commit, so both faces are read fresh before the shape moves.
+        const face = listFaceRef.current, measure = measureRef.current;
+        if (face && measure) {
+            rootRef.current?.style.setProperty("--ms-trigger-w", `${triggerWidth(measure)}px`);
+            sizes.current = { trigger: triggerWidth(measure), lid: measure.offsetHeight, listW: face.offsetWidth, listH: face.offsetHeight };
+        }
+        place(true);
+    }, [open, place]);
+    /* The highlight glides between options on its own spring and fades when nothing is active. */
+    const hy = useMotionValue(0), hh = useMotionValue(0), ho = useMotionValue(0);
+    const scrollIntent = useRef(false);
+    useLayoutEffect(() => {
+        const node = open && current !== null ? optionRefs.current.get(current) : undefined;
+        if (!node) {
+            animate(ho, 0, { duration: reduced || !open ? 0 : .12, ease: standard });
+            return;
+        }
+        const top = node.offsetTop, height = node.offsetHeight;
+        if (ho.get() < .05 || reduced) {
+            hy.jump(top);
+            hh.jump(height);
+        }
+        else {
+            animate(hy, top, GLIDE);
+            animate(hh, height, GLIDE);
+        }
+        animate(ho, 1, { duration: reduced ? 0 : .12, ease: enter });
+        const scroller = scrollRef.current;
+        if (scroller && scrollIntent.current) {
+            scrollIntent.current = false;
+            const pad = 6;
+            if (top < scroller.scrollTop + pad)
+                scroller.scrollTop = top - pad;
+            else if (top + height > scroller.scrollTop + scroller.clientHeight - pad)
+                scroller.scrollTop = top + height - scroller.clientHeight + pad;
+        }
+    }, [current, hh, ho, hy, open, reduced, visibleSections]);
+    /* Focus lands in the lid: the search field when there is one, otherwise the trigger that keeps the active option. */
+    const pendingFocus = useRef(null);
+    useLayoutEffect(() => {
+        const target = pendingFocus.current;
+        pendingFocus.current = null;
+        if (target === "input")
+            inputRef.current?.focus({ preventScroll: true });
+        if (target === "trigger")
+            triggerRef.current?.focus({ preventScroll: true });
+    }, [open]);
+    const typeahead = useRef({ buffer: "", at: 0 });
+    /** Space opens and picks on keydown; the click a button fires on the matching keyup must not undo it. */
+    const suppressClick = useRef(false);
+    const [announcement, setAnnouncement] = useState("");
+    const openList = (focus, seed = "") => {
+        if (disabled || open)
+            return;
+        setQuery(seed);
+        setActive(focus !== undefined ? focus : selected);
+        scrollIntent.current = true;
+        pendingFocus.current = canSearch ? "input" : "trigger";
+        setAnnouncement("");
+        setOpen(true);
+    };
+    const close = useCallback((restoreFocus) => {
+        typeahead.current.buffer = "";
+        if (restoreFocus)
+            pendingFocus.current = "trigger";
+        setOpen(false);
+    }, []);
+    const commit = (option, source) => {
+        if (!option || option.disabled)
+            return;
+        if (option.value !== selected) {
+            let fly = null;
+            const slot = slotRef.current;
+            const part = source?.querySelector("[data-part='value']");
+            if (!reduced && part && slot) {
+                const from = part.getBoundingClientRect(), to = slot.getBoundingClientRect();
+                fly = { x: from.left - to.left, y: from.top + from.height / 2 - (to.top + to.height / 2) };
+            }
+            const from = selected === null ? -1 : indexOf.get(selected) ?? -1, to = indexOf.get(option.value) ?? 0;
+            setChange(last => ({ key: last.key + 1, value: option.value, dir: from < 0 ? 1 : Math.sign(to - from) || 1, fly }));
+            if (value === undefined)
+                setInner(option.value);
+            onValueChange?.(option.value, option);
+        }
+        close(true);
+    };
+    const typeTo = (char) => {
+        const now = performance.now(), state = typeahead.current;
+        state.buffer = now - state.at > TYPEAHEAD_RESET ? char : state.buffer + char;
+        state.at = now;
+        const buffer = state.buffer.toLowerCase();
+        const repeated = buffer.split("").every(letter => letter === buffer[0]);
+        const search = repeated ? buffer[0] : buffer;
+        const pool = all.filter(option => !option.disabled);
+        const from = open ? current : selected;
+        const at = pool.findIndex(option => option.value === from);
+        const offset = repeated || buffer.length === 1 ? 1 : 0;
+        const ordered = [...pool.slice(at + offset), ...pool.slice(0, at + offset)];
+        return ordered.find(option => option.label.toLowerCase().startsWith(search));
+    };
+    const move = (to) => {
+        if (to === undefined || to === null)
+            return;
+        scrollIntent.current = true;
+        setActive(to);
+    };
+    const onKey = (event, fromInput) => {
+        const { key } = event;
+        if (key === " " && !fromInput)
+            suppressClick.current = true;
+        const printable = key.length === 1 && !event.metaKey && !event.ctrlKey && !event.altKey;
+        const typing = performance.now() - typeahead.current.at < TYPEAHEAD_RESET && typeahead.current.buffer.length > 0;
+        if (!open) {
+            if (key === "ArrowDown" || key === "ArrowUp" || key === "Enter" || (key === " " && !typing)) {
+                event.preventDefault();
+                openList();
+                return;
+            }
+            if (key === "Home" || key === "End") {
+                event.preventDefault();
+                const pool = all.filter(option => !option.disabled);
+                openList((key === "Home" ? pool[0] : pool[pool.length - 1])?.value ?? null);
+                return;
+            }
+            if (printable) {
+                event.preventDefault();
+                if (canSearch)
+                    openList(undefined, key);
+                else {
+                    const hit = typeTo(key);
+                    openList(hit?.value ?? selected);
+                }
+            }
+            return;
+        }
+        const at = enabled.findIndex(option => option.value === current);
+        const caretKeys = fromInput && query.length > 0;
+        switch (key) {
+            case "ArrowDown":
+                event.preventDefault();
+                move(enabled[Math.min(enabled.length - 1, at + 1)]?.value);
+                return;
+            case "ArrowUp":
+                event.preventDefault();
+                if (event.altKey) {
+                    commit(enabled[at], optionRefs.current.get(current ?? ""));
+                    return;
+                }
+                move(enabled[Math.max(0, at - 1)]?.value);
+                return;
+            case "PageDown":
+                event.preventDefault();
+                move(enabled[Math.min(enabled.length - 1, at + PAGE)]?.value);
+                return;
+            case "PageUp":
+                event.preventDefault();
+                move(enabled[Math.max(0, at - PAGE)]?.value);
+                return;
+            case "Home":
+                if (caretKeys)
+                    return;
+                event.preventDefault();
+                move(enabled[0]?.value);
+                return;
+            case "End":
+                if (caretKeys)
+                    return;
+                event.preventDefault();
+                move(enabled[enabled.length - 1]?.value);
+                return;
+            case "Enter":
+                event.preventDefault();
+                commit(enabled[at], optionRefs.current.get(current ?? ""));
+                return;
+            case "Escape":
+                event.preventDefault();
+                event.stopPropagation();
+                close(true);
+                return;
+            case "Tab":
+                close(false);
+                return;
+        }
+        if (fromInput)
+            return;
+        if (key === " " && !typing) {
+            event.preventDefault();
+            commit(enabled[at], optionRefs.current.get(current ?? ""));
+            return;
+        }
+        if (printable) {
+            event.preventDefault();
+            move(typeTo(key)?.value);
+        }
+    };
+    // A press outside or focus leaving the control folds the list back into the trigger.
+    useEffect(() => {
+        if (!open)
+            return;
+        const down = (event) => { if (!rootRef.current?.contains(event.target))
+            close(false); };
+        document.addEventListener("pointerdown", down);
+        return () => document.removeEventListener("pointerdown", down);
+    }, [close, open]);
+    const onBlur = (event) => {
+        const next = event.relatedTarget;
+        if (open && next && !event.currentTarget.contains(next))
+            close(false);
+    };
+    const onQuery = (next) => {
+        setQuery(next);
+        setActive(null);
+        scrollIntent.current = true;
+        if (scrollRef.current)
+            scrollRef.current.scrollTop = 0;
+        const text = next.trim().toLowerCase();
+        const count = text ? all.filter(option => matches(option, text)).length : all.length;
+        setAnnouncement(text ? count ? `${count} ${count === 1 ? "option" : "options"}` : "No matches" : "");
+    };
+    const renderValue = (option) => option
+        ? _jsxs(_Fragment, { children: [option.icon && _jsx("span", { className: styles.icon, "aria-hidden": "true", children: option.icon }), _jsx("span", { className: styles.valueText, children: option.label })] })
+        : _jsx("span", { className: styles.placeholder, children: placeholder });
+    const showSearch = open && canSearch;
+    const layerKey = selected ?? "__empty";
+    const changeForLayer = change.value === selected ? change : { ...change, fly: null };
+    const rootStyle = { "--ms-panel-w": `${panelWidth}px`, "--ms-list-max": `${maxListHeight}px` };
+    return _jsxs("div", { ref: rootRef, className: [styles.root, className].filter(Boolean).join(" "), style: rootStyle, "data-open": open || undefined, "data-align": align, "data-disabled": disabled || undefined, onBlur: onBlur, children: [_jsx("span", { id: labelId, className: hideLabel ? styles.srOnly : styles.label, children: label }), _jsxs(motion.div, { className: styles.anchor, style: { width: anchorW }, children: [_jsx("span", { ref: measureRef, className: `${styles.trigger} ${styles.measure}`, "aria-hidden": "true", children: renderValue(selectedOption) }), _jsxs(motion.div, { className: styles.shape, style: { width: shapeW, height: shapeH, borderRadius: radius }, children: [_jsxs("div", { className: styles.lid, children: [_jsx("button", { ref: triggerRef, type: "button", className: styles.trigger, role: "combobox", "aria-labelledby": labelId, "aria-haspopup": "listbox", "aria-expanded": open, "aria-controls": listId, "aria-activedescendant": open && !canSearch && current !== null ? optionId(indexOf.get(current) ?? 0) : undefined, disabled: disabled, inert: showSearch || undefined, tabIndex: showSearch ? -1 : 0, onClick: () => { if (suppressClick.current) {
+                                            suppressClick.current = false;
+                                            return;
+                                        } if (open)
+                                            close(true);
+                                        else
+                                            openList(); }, onKeyDown: event => onKey(event, false), onKeyUp: event => { if (event.key === " ")
+                                            window.setTimeout(() => { suppressClick.current = false; }); }, children: _jsx("span", { ref: slotRef, className: styles.slot, "data-hidden": showSearch || undefined, children: _jsx(AnimatePresence, { initial: false, custom: changeForLayer, children: _jsx(motion.span, { className: styles.layer, custom: changeForLayer, variants: reduced ? valueFade : valueVariants, initial: "enter", animate: "rest", exit: "exit", transition: reduced ? { duration: .12 } : changeForLayer.fly ? { x: FLY, y: FLY, opacity: { duration: 0 } } : { y: GLIDE, opacity: { duration: .2, ease: enter }, filter: { duration: .22, ease: enter } }, children: renderValue(selectedOption) }, layerKey) }) }) }), canSearch && _jsxs(motion.div, { className: styles.searchRow, inert: !showSearch || undefined, initial: false, animate: showSearch ? { opacity: 1, filter: "blur(0px)" } : { opacity: 0, filter: reduced ? "blur(0px)" : `blur(${blur.subtle}px)` }, transition: showSearch ? { duration: .18, ease: enter, delay: reduced ? 0 : .04 } : { duration: .1, ease: standard }, children: [_jsx(Search, { className: styles.searchIcon, size: 16, strokeWidth: 1.75, "aria-hidden": "true" }), _jsx("input", { ref: inputRef, className: styles.input, type: "text", role: "combobox", "aria-label": `Search ${label.toLowerCase()}`, "aria-expanded": open, "aria-controls": listId, "aria-autocomplete": "list", "aria-activedescendant": open && current !== null ? optionId(indexOf.get(current) ?? 0) : undefined, placeholder: searchPlaceholder ?? selectedOption?.label ?? "Search", value: query, autoComplete: "off", spellCheck: false, onChange: event => onQuery(event.target.value), onKeyDown: event => onKey(event, true) }), _jsx(AnimatePresence, { initial: false, children: query && _jsx(motion.button, { type: "button", className: styles.clear, "aria-label": "Clear search", onPointerDown: event => event.preventDefault(), onClick: () => { onQuery(""); inputRef.current?.focus(); }, initial: { opacity: 0, scale: .6 }, animate: { opacity: 1, scale: 1 }, exit: { opacity: 0, scale: .6, transition: { duration: .1 } }, transition: reduced ? { duration: 0 } : GLIDE, children: _jsx(X, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }) }, "clear") }), _jsx("button", { type: "button", className: styles.closeHit, "aria-label": `Close ${label.toLowerCase()}`, onClick: () => close(true) })] }), _jsx(motion.span, { className: styles.chevron, "aria-hidden": "true", initial: false, animate: { rotate: open ? 180 : 0 }, transition: reduced ? { duration: 0 } : GLIDE, children: _jsx(ChevronDown, { size: 16, strokeWidth: 1.75 }) })] }), _jsx(motion.div, { ref: listFaceRef, className: styles.listFace, inert: !open || undefined, "aria-hidden": !open || undefined, initial: false, animate: open ? { opacity: 1, y: 0, filter: "blur(0px)" } : { opacity: 0, y: reduced ? 0 : -6, filter: reduced ? "blur(0px)" : `blur(${blur.subtle}px)` }, transition: open ? { y: GROW, opacity: { duration: .2, ease: enter, delay: reduced ? 0 : .04 }, filter: { duration: .22, ease: enter, delay: .04 } } : { duration: .1, ease: standard }, children: _jsx("div", { ref: scrollRef, className: styles.scroll, children: _jsxs("div", { id: listId, className: styles.options, role: "listbox", "aria-labelledby": labelId, children: [_jsx(motion.span, { className: styles.highlight, style: { y: hy, height: hh, opacity: ho }, "aria-hidden": "true" }), visibleSections.map(section => {
+                                                const rows = section.options.map(option => {
+                                                    const index = indexOf.get(option.value) ?? 0;
+                                                    const isSelected = option.value === selected, isActive = option.value === current;
+                                                    return _jsxs("div", { id: optionId(index), role: "option", "aria-selected": isSelected, "aria-disabled": option.disabled || undefined, className: styles.option, "data-active": isActive || undefined, ref: node => { if (node)
+                                                            optionRefs.current.set(option.value, node);
+                                                        else
+                                                            optionRefs.current.delete(option.value); }, onPointerMove: event => { if (event.pointerType === "mouse" && !option.disabled && option.value !== current)
+                                                            setActive(option.value); }, onPointerDown: event => event.preventDefault(), onClick: event => commit(option, event.currentTarget), children: [_jsxs("span", { className: styles.optionValue, "data-part": "value", children: [option.icon && _jsx("span", { className: styles.icon, "aria-hidden": "true", children: option.icon }), _jsx("span", { className: styles.valueText, children: option.label })] }), option.meta && _jsx("span", { className: styles.meta, children: option.meta }), _jsx("span", { className: styles.check, "data-on": isSelected || undefined, "aria-hidden": "true", children: _jsx(Check, { size: 16, strokeWidth: 1.75 }) })] }, option.value);
+                                                });
+                                                return section.label
+                                                    ? _jsxs("div", { role: "group", "aria-labelledby": `${uid}-${section.key}`, className: styles.group, children: [_jsx("div", { id: `${uid}-${section.key}`, className: styles.groupLabel, role: "presentation", children: section.label }), rows] }, section.key)
+                                                    : _jsx("div", { role: "presentation", className: styles.group, children: rows }, section.key);
+                                            }), resultCount === 0 && _jsxs("p", { className: styles.empty, children: ["No matches for \u201C", query.trim(), "\u201D"] })] }) }) })] })] }), name && _jsx("input", { type: "hidden", name: name, value: selected ?? "" }), _jsx("span", { className: styles.srOnly, role: "status", "aria-live": "polite", children: announcement })] });
+}
+export default MorphSelect;

package/components/morph-select/morph-select.module.css

@@ -0,0 +1,88 @@
+/* The root lays out the label and the anchor. The anchor holds the closed trigger's place; the shape floats over it and grows past it when open. */
+.root { --ms-h: var(--control-height-md); --ms-trigger-w: 0px; position: relative; display: inline-grid; justify-items: start; gap: var(--space-related); min-width: 0; color: var(--foreground); font-family: var(--font-body); font-size: var(--text-sm); letter-spacing: var(--tracking-body); line-height: var(--leading-body); }
+.root[data-align="end"] { justify-items: end; }
+.root[data-open] { z-index: 30; }
+.label { color: var(--text-secondary); font-size: var(--text-sm); font-weight: 500; }
+
+.anchor { position: relative; height: var(--ms-h); max-width: 100%; }
+
+/* One material for both states. The border is an overlay so it never changes a measurement. */
+.shape { position: absolute; top: 0; left: 0; overflow: clip; background: var(--surface); box-shadow: var(--shadow-resting); transition: box-shadow var(--duration-considered) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard); }
+.shape::after { content: ""; position: absolute; inset: 0; z-index: 2; border: 1px solid var(--border); border-radius: inherit; corner-shape: inherit; pointer-events: none; transition: border-color var(--duration-fast) var(--ease-standard); }
+.root[data-align="end"] .shape { right: 0; left: auto; }
+.shape { corner-shape: round; }
+.root[data-open] .shape { corner-shape: var(--corner-shape); }
+.root[data-open] .shape { background: var(--surface-raised); box-shadow: var(--shadow-floating); }
+.root[data-disabled] .shape { opacity: .55; }
+@media (hover: hover) and (pointer: fine) {
+  .root:not([data-open], [data-disabled]) .shape:hover { background: var(--surface-muted); }
+  .root:not([data-open], [data-disabled]) .shape:hover::after { border-color: var(--border-strong); }
+}
+
+/* The lid is the trigger row. It stays at the top of the surface in both states and sits above the list, so a lifted label passes over it. */
+.lid { position: absolute; z-index: 1; top: 0; right: 0; left: 0; height: var(--ms-h); }
+
+.trigger { box-sizing: border-box; display: flex; height: var(--ms-h); align-items: center; gap: var(--space-related); padding: 0 36px 0 14px; font-size: var(--text-sm); font-weight: 500; white-space: nowrap; }
+.lid .trigger { position: absolute; inset: 0; width: 100%; margin: 0; border: 0; background: transparent; color: inherit; cursor: pointer; font-family: inherit; letter-spacing: inherit; text-align: left; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
+.lid .trigger:disabled { cursor: not-allowed; }
+/* An invisible copy that says how wide the closed trigger wants to be. It sits in flow until the first measurement lands, so the server render already has the right size. */
+.measure { position: static; visibility: hidden; pointer-events: none; width: max-content; max-width: min(20rem, calc(100vw - 2rem)); }
+.root[data-ready] .measure { position: absolute; top: 0; left: 0; }
+.root[data-align="end"][data-ready] .measure { right: 0; left: auto; }
+
+.slot { position: relative; display: block; min-width: 0; height: 100%; flex: 1; }
+.slot[data-hidden] { opacity: 0; transition: opacity var(--duration-instant) var(--ease-standard); }
+.layer { position: absolute; inset: 0; display: flex; align-items: center; gap: var(--space-related); min-width: 0; }
+.valueText { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.placeholder { color: var(--text-muted); font-weight: 400; }
+.icon { display: grid; width: 20px; height: 20px; flex: none; place-items: center; color: var(--text-secondary); }
+.icon > svg { width: 16px; height: 16px; }
+.icon > img { width: 20px; height: 20px; border-radius: 50%; corner-shape: round; object-fit: cover; }
+
+.chevron { position: absolute; top: 50%; right: 12px; display: grid; width: 16px; height: 16px; margin-top: -8px; place-items: center; color: var(--text-muted); pointer-events: none; }
+
+/* Search takes the lid's place when the list is long. */
+.searchRow { position: absolute; inset: 0; display: flex; align-items: center; gap: var(--space-related); padding: 0 2px 0 14px; }
+.searchRow[inert] { pointer-events: none; }
+.searchIcon { flex: none; color: var(--text-muted); }
+.input { min-width: 0; height: 100%; flex: 1; padding: 0; border: 0; background: transparent; color: var(--foreground); font: inherit; font-size: var(--text-sm); letter-spacing: var(--tracking-body); outline: none; }
+.input::placeholder { color: var(--text-muted); }
+.clear { display: grid; width: 24px; height: 24px; flex: none; place-items: center; padding: 0; border: 0; border-radius: var(--radius-full); corner-shape: round; background: color-mix(in oklab, var(--foreground) 8%, transparent); color: var(--text-secondary); cursor: pointer; -webkit-tap-highlight-color: transparent; }
+/* Sits exactly over the shared chevron, so the chevron closes the list in both lid states. */
+.closeHit { width: 36px; height: 36px; flex: none; padding: 0; border: 0; border-radius: var(--radius-full); corner-shape: round; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color var(--duration-fast) var(--ease-standard); }
+@media (hover: hover) and (pointer: fine) {
+  .closeHit:hover, .clear:hover { background: color-mix(in oklab, var(--foreground) 8%, transparent); }
+  .clear:hover { color: var(--foreground); }
+}
+
+/* The list hangs under the lid at its own width, so it measures the same whatever size the surface is mid spring. */
+.listFace { position: absolute; top: var(--ms-h); left: 0; box-sizing: border-box; width: max(var(--ms-trigger-w), min(var(--ms-panel-w), calc(100vw - 2rem))); padding: 0 6px 6px; }
+.root[data-align="end"] .listFace { right: 0; left: auto; }
+.listFace::before { content: ""; position: absolute; top: 0; right: 14px; left: 14px; height: 1px; background: var(--border-subtle); }
+.listFace[inert] { pointer-events: none; }
+.scroll { max-height: var(--ms-list-max); overflow-y: auto; overscroll-behavior: contain; padding-top: 6px; scrollbar-width: thin; }
+.options { position: relative; display: grid; gap: 2px; }
+.highlight { position: absolute; top: 0; right: 0; left: 0; border-radius: var(--radius-control); corner-shape: var(--corner-shape); background: color-mix(in oklab, var(--foreground) 6.5%, transparent); pointer-events: none; }
+
+.group { display: grid; gap: 2px; }
+.group + .group { margin-top: 4px; }
+.groupLabel { padding: 8px 10px 4px; color: var(--text-muted); font-size: var(--text-xs); font-weight: 400; }
+
+.option { position: relative; display: flex; min-height: 36px; box-sizing: border-box; align-items: center; gap: var(--space-related); padding: 0 10px 0 8px; border-radius: var(--radius-control); corner-shape: var(--corner-shape); color: var(--text-secondary); cursor: pointer; user-select: none; -webkit-user-select: none; transition: color var(--duration-fast) var(--ease-standard); }
+.option[data-active], .option[aria-selected="true"] { color: var(--foreground); }
+.option[aria-disabled="true"] { color: var(--text-muted); cursor: not-allowed; opacity: .6; }
+/* Lid padding minus list inset, so a lifted label starts exactly level with where it lands. */
+.optionValue { display: flex; min-width: 0; flex: 1; align-items: center; gap: var(--space-related); font-weight: 500; }
+.meta { flex: none; color: var(--text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
+.check { display: grid; width: 16px; height: 16px; flex: none; place-items: center; color: var(--foreground); opacity: 0; transform: scale(.6); transition: opacity var(--duration-fast) var(--ease-standard), transform var(--duration-spring) var(--ease-spring); }
+.check[data-on] { opacity: 1; transform: none; }
+.empty { margin: 0; padding: 12px 10px 14px; color: var(--text-muted); font-size: var(--text-sm); }
+
+.srOnly { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
+
+@media (prefers-reduced-motion: reduce) {
+  .shape, .check, .slot { transition-duration: 0ms; }
+}
+@media (prefers-contrast: more) {
+  .shape::after { border-color: var(--border-strong); }
+}

package/components/multi-select/multi-select.d.ts

@@ -0,0 +1,18 @@
+export interface MultiSelectOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+export interface MultiSelectProps {
+    label: string;
+    options: MultiSelectOption[];
+    value?: string[];
+    defaultValue?: string[];
+    onValueChange?: (value: string[]) => void;
+    placeholder?: string;
+    description?: string;
+    maxVisible?: number;
+    disabled?: boolean;
+    className?: string;
+}
+export declare function MultiSelect({ label, options, value, defaultValue, onValueChange, placeholder, description, maxVisible, disabled, className }: MultiSelectProps): import("react").JSX.Element;