"use client"; import { useThemeContext, GlassPrimitive, useGlass, useLiquidLens, LENS_PRESETS } from '@liquidify/glass'; export { THEME_SCHEMES, Theme, useThemeContext } from '@liquidify/glass'; import { forwardRef, isValidElement, cloneElement, createContext, useRef, useId, useCallback, useEffect, useSyncExternalStore, useState, useLayoutEffect, Children, useMemo, useContext, Fragment as Fragment$1 } from 'react'; import { createPortal, flushSync } from 'react-dom'; import { autoUpdate, computePosition, offset, flip, shift, size } from '@floating-ui/dom'; import { jsx, jsxs, Fragment } from 'react/jsx-runtime'; import { useGlassMorphSurface, GlassMorphBoundary, GlassMorphGroup, GlassMorphItem } from '@liquidify/motion/react'; import '@liquidify/motion/morph.css'; // src/index.ts // src/shared/collection/collection.ts var resolveCollection = (items, componentName) => { const seen = /* @__PURE__ */ new Set(); const duplicates = /* @__PURE__ */ new Set(); const resolved = []; for (const item of items) { if (seen.has(item.id)) { duplicates.add(item.id); continue; } seen.add(item.id); resolved.push(item); } if (duplicates.size > 0 && process.env.NODE_ENV !== "production") { const { error: reportDuplicateIds } = console; reportDuplicateIds( `[${componentName}] duplicate collection id(s) detected: ${Array.from(duplicates).join(", ")}. Every item requires a stable, unique \`id\` supplied by the consumer \u2014 the first occurrence of each duplicate id is kept and the rest are dropped.` ); } return resolved; }; var resolveActiveId = (items, activeId) => { if (activeId === void 0 || items.length === 0) return void 0; const index = items.findIndex((item) => item.id === activeId); if (index === -1) return void 0; if (!items[index]?.disabled) return activeId; for (let i = index + 1; i < items.length; i++) { const item = items[i]; if (item !== void 0 && !item.disabled) return item.id; } for (let i = index - 1; i >= 0; i--) { const item = items[i]; if (item !== void 0 && !item.disabled) return item.id; } return void 0; }; // src/shared/list-navigation.ts var indexOf = (items, value) => items.findIndex((it) => it.value === value); var stepIndex = (items, from, dir) => { let i = from + dir; while (i >= 0 && i < items.length) { if (!items[i]?.disabled) return i; i += dir; } return from; }; var edgeIndex = (items, dir) => { const start = dir === 1 ? 0 : items.length - 1; for (let i = start; i >= 0 && i < items.length; i += dir) { if (!items[i]?.disabled) return i; } return -1; }; var indexForNavKey = (items, from, key2) => { if (key2 === "ArrowRight") return stepIndex(items, from, 1); if (key2 === "ArrowLeft") return stepIndex(items, from, -1); if (key2 === "Home") return edgeIndex(items, 1); if (key2 === "End") return edgeIndex(items, -1); return from; }; function assignRef(ref, node) { if (typeof ref === "function") ref(node); else if (ref !== null && ref !== void 0) ref.current = node; } function mergeRefs(...refs) { return (node) => { for (const ref of refs) assignRef(ref, node); }; } function useMergedRefs(...refs) { const cache = useRef(null); const prev = cache.current; if (prev === null || prev.refs.length !== refs.length || refs.some((ref, i) => ref !== prev.refs[i])) { cache.current = { refs, merged: mergeRefs(...refs) }; } return cache.current.merged; } function useForwardedRef(forwarded) { const local = useRef(null); const callback = useCallback( (node) => { local.current = node; assignRef(forwarded, node); }, [forwarded] ); return [local, callback]; } // src/shared/direction.ts var resolveDirection = (el) => { const dir = el?.closest("[dir]")?.getAttribute("dir") ?? (typeof document !== "undefined" ? document.documentElement.getAttribute("dir") : null); return dir?.toLowerCase() === "rtl" ? "rtl" : "ltr"; }; var isRtl = (el) => resolveDirection(el) === "rtl"; // src/shared/positioning.ts var ANCHOR_GAP_PX = 8; var COLLISION_PADDING_PX = 8; var resolveLogicalSide = (side, el) => { if (side !== "start" && side !== "end") return side; const isRtl2 = resolveDirection(el) === "rtl"; if (side === "start") return isRtl2 ? "right" : "left"; return isRtl2 ? "left" : "right"; }; var observeAnchoredPosition = (anchor, panel, { side, align = "center", gap = ANCHOR_GAP_PX, padding = COLLISION_PADDING_PX, onPosition }) => { let disposed = false; const placement = align === "center" ? side : `${side}-${align}`; const update = async () => { let availableWidth = 0; let availableHeight = 0; const { x, y, placement: resolved } = await computePosition(anchor, panel, { strategy: "fixed", placement, middleware: [ offset(gap), flip({ padding }), shift({ padding }), size({ padding, apply: ({ availableWidth: w, availableHeight: h }) => { availableWidth = w; availableHeight = h; } }) ] }); if (disposed) return; onPosition({ x, y, side: resolved.split("-")[0], availableWidth, availableHeight }); }; const stop = autoUpdate(anchor, panel, () => void update(), { elementResize: typeof ResizeObserver === "function", layoutShift: typeof IntersectionObserver === "function" }); return () => { disposed = true; stop(); }; }; function chain(ownHandler, childHandler) { if (ownHandler === void 0) return childHandler; if (childHandler === void 0) return ownHandler; return (event) => { ownHandler(event); if (event?.defaultPrevented === true) return; childHandler(event); }; } var FORM_DISABLED_TAGS = /* @__PURE__ */ new Set(["button", "fieldset", "input", "optgroup", "option", "select", "textarea"]); var Slot = forwardRef(function Slot2({ children, ...slotProps }, forwardedRef) { if (!isValidElement(children)) { throw new Error("Slot expects a single React element child when `asChild` is set."); } const child = children; const childProps = child.props; const mergedRef = useMergedRefs(forwardedRef, childProps.ref); const merged = { ...slotProps }; for (const key2 of Object.keys(childProps)) { const slotValue = slotProps[key2]; const childValue = childProps[key2]; if (/^on[A-Z]/.test(key2)) { merged[key2] = chain(slotValue, childValue); } else if (key2 === "className") { merged[key2] = [slotProps.className, childValue].filter(Boolean).join(" "); } else if (key2 === "style") { merged[key2] = { ...slotProps.style, ...childValue }; } else { merged[key2] = childValue; } } if ("disabled" in merged && !("disabled" in childProps) && typeof child.type === "string" && !FORM_DISABLED_TAGS.has(child.type)) { delete merged.disabled; } merged.ref = mergedRef; return cloneElement(child, merged); }); var useControllableState = ({ value, defaultValue, onChange, shouldNotify, componentName, propName }) => { const isControlled = value !== void 0; const [internalValue, setInternalValue] = useState(defaultValue); const state = isControlled ? value : internalValue; const modeRef = useRef(isControlled); if (process.env.NODE_ENV !== "production" && modeRef.current !== isControlled) { const { error: reportModeSwitch } = console; reportModeSwitch( `${componentName}: the \`${propName}\` prop is changing from ${modeRef.current ? "controlled to uncontrolled" : "uncontrolled to controlled"}. ${componentName} must stay ${modeRef.current ? "controlled" : "uncontrolled"} for its whole lifetime \u2014 decide the mode at mount.` ); modeRef.current = isControlled; } const stateRef = useRef(state); stateRef.current = state; const isControlledRef = useRef(isControlled); isControlledRef.current = isControlled; const onChangeRef = useRef(onChange); onChangeRef.current = onChange; const shouldNotifyRef = useRef(shouldNotify); shouldNotifyRef.current = shouldNotify; const setState = useCallback((updater) => { const previous = stateRef.current; const next = typeof updater === "function" ? updater(previous) : updater; const accepted = shouldNotifyRef.current === void 0 ? !Object.is(next, previous) : shouldNotifyRef.current(next, previous); if (!accepted) return; if (!isControlledRef.current) { stateRef.current = next; setInternalValue(next); } onChangeRef.current?.(next); }, []); return [state, setState]; }; var PopupContext = createContext(null); var subscribeNoop = () => () => { }; var getClientSnapshot = () => true; var getServerSnapshot = () => false; var usePopupContext = (part) => { const ctx = useContext(PopupContext); if (ctx === null) throw new Error(` must be rendered inside `); return ctx; }; var PopupRoot = ({ open, defaultOpen = false, onOpenChange, placement = "bottom", align = "center", hasPopup = "menu", ariaLinkage = "disclosure", anchorRef, children }) => { const [isOpen, setOpen] = useControllableState({ value: open, defaultValue: defaultOpen, onChange: onOpenChange, componentName: "Popup", propName: "open" }); const contentId = useId(); const triggerRef = useRef(null); const panelRef = useRef(null); const theme = useThemeContext(); const themeScheme = theme === null ? void 0 : theme.type === "system" ? "light dark" : theme.type; const close = useCallback(() => setOpen(false), [setOpen]); const toggle = useCallback(() => setOpen((current) => !current), [setOpen]); useEffect(() => { if (!isOpen) return; const onKeyDown = (e) => { if (e.key !== "Escape") return; e.preventDefault(); close(); const active = document.activeElement; const withinThisPopup = active === null || active === document.body || triggerRef.current?.contains(active) === true || panelRef.current?.contains(active) === true; if (withinThisPopup) triggerRef.current?.focus(); }; const onPointerDown = (e) => { const t = e.target; if (triggerRef.current?.contains(t) || panelRef.current?.contains(t)) return; close(); }; document.addEventListener("keydown", onKeyDown); document.addEventListener("pointerdown", onPointerDown); return () => { document.removeEventListener("keydown", onKeyDown); document.removeEventListener("pointerdown", onPointerDown); }; }, [isOpen, close]); const value = { isOpen, toggle, close, contentId, triggerRef, panelRef, placement, align, hasPopup, ariaLinkage, anchorRef, themeScheme }; return /* @__PURE__ */ jsx(PopupContext.Provider, { value, children }); }; var PopupTrigger = ({ children, asChild = false, disabled, className, onClick, toggleOnClick = true }) => { const ctx = usePopupContext("Trigger"); const ariaProps = ctx.ariaLinkage === "describedby" ? { "aria-describedby": ctx.isOpen ? ctx.contentId : void 0 } : { "aria-haspopup": ctx.hasPopup, "aria-expanded": ctx.isOpen, "aria-controls": ctx.isOpen ? ctx.contentId : void 0 }; const triggerProps = { ...ariaProps, "data-state": ctx.isOpen ? "open" : "closed", disabled, className: ["lq-popup-trigger", className].filter(Boolean).join(" "), onClick: (e) => { if (disabled) return; onClick?.(e); if (toggleOnClick) ctx.toggle(); } }; if (asChild) { return /* @__PURE__ */ jsx(Slot, { ref: ctx.triggerRef, ...triggerProps, children }); } return /* @__PURE__ */ jsx("button", { type: "button", ref: ctx.triggerRef, ...triggerProps, children }); }; var PopupContent = ({ children, ref: forwardedRef, role, closeOnFocusOut = false, focusOnOpen = false, stateVocab = { open: "open", closed: "closed" }, material, perf, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby }) => { const { isOpen, close, contentId, triggerRef, panelRef, placement, align, anchorRef, themeScheme } = usePopupContext("Content"); const mergedPanelRef = useMergedRefs(panelRef, forwardedRef); const isClient = useSyncExternalStore(subscribeNoop, getClientSnapshot, getServerSnapshot); const requestedSide = resolveLogicalSide(placement, triggerRef.current); const [resolvedSide, setResolvedSide] = useState(null); const side = resolvedSide ?? requestedSide; const [exiting, setExiting] = useState(false); const [prevOpen, setPrevOpen] = useState(isOpen); if (isOpen !== prevOpen) { setPrevOpen(isOpen); if (isOpen && resolvedSide !== null) setResolvedSide(null); const canAnimate2 = typeof window !== "undefined" && typeof window.matchMedia === "function" && !window.matchMedia("(prefers-reduced-motion: reduce)").matches; setExiting(!isOpen && canAnimate2); } const onAnimationEnd = (e) => { if (e.target === panelRef.current && !isOpen) setExiting(false); }; useEffect(() => { if (!exiting || isOpen) return; const panel2 = panelRef.current; if (panel2 === null) { setExiting(false); return; } if (typeof panel2.getAnimations !== "function") return; if (panel2.getAnimations({ subtree: true }).length === 0) setExiting(false); }, [exiting, isOpen]); useLayoutEffect(() => { if (!isOpen) return; const anchor = anchorRef?.current ?? triggerRef.current; const panel2 = panelRef.current; if (anchor === null || panel2 === null) return; return observeAnchoredPosition(anchor, panel2, { side: requestedSide, align, onPosition: ({ x, y, side: nextSide, availableWidth, availableHeight }) => { panel2.style.setProperty("--lq-popup-x", `${x}px`); panel2.style.setProperty("--lq-popup-y", `${y}px`); panel2.style.setProperty("--lq-popup-available-width", `${availableWidth}px`); panel2.style.setProperty("--lq-popup-available-height", `${availableHeight}px`); panel2.style.setProperty("--lq-popup-anchor-width", `${anchor.getBoundingClientRect().width}px`); panel2.style.setProperty("left", `${x}px`); panel2.style.setProperty("top", `${y}px`); panel2.style.setProperty("transform", "none"); setResolvedSide(nextSide); } }); }, [isOpen, requestedSide, align, triggerRef, panelRef, anchorRef]); useLayoutEffect(() => { const el = panelRef.current; if (el === null) return; if (themeScheme !== void 0) el.style.setProperty("color-scheme", themeScheme); else el.style.removeProperty("color-scheme"); }, [panelRef, themeScheme, isOpen]); useEffect(() => { if (!isOpen || !closeOnFocusOut) return; const panelEl = panelRef.current; if (panelEl === null) return; const restoreFocus = () => triggerRef.current?.focus(); const onFocusOut = (e) => { const next = e.relatedTarget; if (next === null) return; if (panelEl.contains(next) || triggerRef.current?.contains(next) === true) return; close(); restoreFocus(); requestAnimationFrame(restoreFocus); }; panelEl.addEventListener("focusout", onFocusOut); return () => panelEl.removeEventListener("focusout", onFocusOut); }, [isOpen, closeOnFocusOut, panelRef, triggerRef, close]); useEffect(() => { if (!isOpen || !focusOnOpen) return; const panelEl = panelRef.current; if (panelEl === null) return; if (panelEl.contains(document.activeElement)) return; const first = panelEl.querySelector( 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])' ); (first ?? panelEl).focus(); }, [isOpen, focusOnOpen, panelRef]); if (!isOpen && !exiting || !isClient) return null; const panel = /* @__PURE__ */ jsx( GlassPrimitive, { ref: mergedPanelRef, id: contentId, role, "data-state": isOpen ? stateVocab.open : stateVocab.closed, "data-placement": side, "data-align": align, material, perf, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, tabIndex: focusOnOpen ? -1 : void 0, className: ["lq-popup-content", className].filter(Boolean).join(" "), onAnimationEnd, children: /* @__PURE__ */ jsx("div", { className: "lq-popup-content-inner", children }) } ); return typeof document !== "undefined" ? createPortal(panel, document.body) : panel; }; var Popup = Object.assign(PopupRoot, { Trigger: PopupTrigger, Content: PopupContent }); // src/shared/native-attributes.ts function nativeAttributes(props) { const attributes = { ...props }; Reflect.deleteProperty(attributes, "style"); Reflect.deleteProperty(attributes, "dangerouslySetInnerHTML"); return attributes; } var Text = ({ children, variant = "body", weight, color = "primary", tint, italic = false, lineHeight, tracking, transform, wrap, as, className, ref: forwardedRef, ...nativeProps }) => { useGlass({ material: "clear", perf: "low" }); const Tag = as ?? "span"; return /* @__PURE__ */ jsx( Tag, { ...nativeAttributes(nativeProps), ref: forwardedRef, "data-variant": variant, "data-weight": weight, "data-color": tint === void 0 ? color : void 0, "data-tint": tint, "data-italic": italic || void 0, "data-leading": lineHeight, "data-tracking": tracking, "data-transform": transform, "data-wrap": wrap, className: ["lq-text", className].filter(Boolean).join(" "), children } ); }; var TextLabel = ({ children, ...textProps }) => { if (children == null || children === false || children === true) return null; if (typeof children === "string" || typeof children === "number") { return /* @__PURE__ */ jsx(Text, { ...textProps, children }); } return /* @__PURE__ */ jsx(Fragment, { children }); }; var ActionSheet = ({ trigger, actions, title, message, titleVisibility = "automatic", placement = "bottom", open, defaultOpen = false, onOpenChange, labelProps, messageProps, material, perf, className, ref }) => { const [resolvedOpen, setOpen] = useControllableState({ value: open, defaultValue: defaultOpen, onChange: onOpenChange, componentName: "ActionSheet", propName: "open" }); const resolvedActions = resolveCollection(actions, "ActionSheet"); const nav = resolvedActions.map((a) => ({ value: a.id, disabled: a.disabled })); const actionsRef = useRef(null); const [activeId, setActiveId] = useState(void 0); const opened = useRef(false); const rovingId = resolveActiveId(resolvedActions, activeId); useEffect(() => { if (!resolvedOpen) { opened.current = false; return; } if (opened.current) return; opened.current = true; setActiveId(resolvedActions.find((a) => a.disabled !== true)?.id); }, [resolvedOpen, resolvedActions]); useEffect(() => { if (!resolvedOpen) return; actionsRef.current?.querySelector('[tabindex="0"]')?.focus(); }, [resolvedOpen, rovingId]); const onMenuKeyDown = (e) => { const cur = indexOf(nav, rovingId ?? ""); if (e.key === "ArrowDown") { e.preventDefault(); setActiveId(nav[stepIndex(nav, cur, 1)]?.value); } else if (e.key === "ArrowUp") { e.preventDefault(); setActiveId(nav[stepIndex(nav, cur, -1)]?.value); } else if (e.key === "Home") { e.preventDefault(); const first = edgeIndex(nav, 1); if (first >= 0) setActiveId(nav[first]?.value); } else if (e.key === "End") { e.preventDefault(); const last = edgeIndex(nav, -1); if (last >= 0) setActiveId(nav[last]?.value); } }; const hasTitle = title !== void 0 && title !== ""; const hasMessage = message !== void 0 && message !== ""; const showHeader = titleVisibility === "visible" && (hasTitle || hasMessage); return /* @__PURE__ */ jsxs(Popup, { open: resolvedOpen, onOpenChange: setOpen, placement, hasPopup: "menu", children: [ /* @__PURE__ */ jsx(Popup.Trigger, { asChild: true, children: trigger }), /* @__PURE__ */ jsxs( Popup.Content, { ref, role: "menu", closeOnFocusOut: true, material: material ?? "frosted", perf, className: ["lq-action-sheet", className].filter(Boolean).join(" "), "aria-label": title ?? "Actions", children: [ showHeader ? /* @__PURE__ */ jsxs("div", { className: "lq-action-sheet-header", children: [ hasTitle ? ( // Mirror Alert's header type: a title carrying a message reads as // the bold dialog title (title3/bold); a title-only header takes // the softer body/secondary role. Routed through TextLabel and // overridable via labelProps (spread last, ADR-0028). hasMessage ? /* @__PURE__ */ jsx(TextLabel, { variant: "title3", weight: "bold", color: "primary", ...labelProps, children: title }) : /* @__PURE__ */ jsx(TextLabel, { variant: "body", color: "secondary", ...labelProps, children: title }) ) : null, hasMessage ? /* @__PURE__ */ jsx("div", { className: "lq-action-sheet-message", children: /* @__PURE__ */ jsx(TextLabel, { variant: "body", color: "secondary", ...messageProps, children: message }) }) : null ] }) : null, /* @__PURE__ */ jsx("div", { className: "lq-action-sheet-actions", ref: actionsRef, children: resolvedActions.map((action, index) => { const role = action.role ?? "default"; return /* @__PURE__ */ jsx( "button", { type: "button", role: "menuitem", "data-action-index": index, tabIndex: action.id === rovingId ? 0 : -1, "aria-disabled": action.disabled || void 0, "data-disabled": action.disabled || void 0, className: "lq-action-sheet-action", "data-role": role, onClick: () => { if (action.disabled === true) return; action.onPress?.(); setOpen(false); }, onKeyDown: onMenuKeyDown, children: /* @__PURE__ */ jsx(TextLabel, { variant: "body", color: "inherit", weight: "regular", children: action.label }) }, action.id ); }) }) ] } ) ] }); }; var PLACEHOLDER_GLYPH = /* @__PURE__ */ jsx("rect", { className: "lq-icon-glyph", x: "4", y: "4", width: "16", height: "16", rx: "4" }); var ICON_GLYPHS = { /** * volume — a speaker cone at low volume (no sound waves). * Self-drawn: cone body (trapezoid polygon) + rectangular driver body. */ volume: /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("path", { className: "lq-icon-glyph", d: "M3 9h3.5L11 4.5v15L6.5 15H3a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1z" }) }), /** * volume-high — a speaker with three outward sound-wave arcs at full volume. * Self-drawn: same cone as `volume` plus three concentric arcs to the right. */ "volume-high": /* @__PURE__ */ jsxs(Fragment, { children: [ /* @__PURE__ */ jsx("path", { className: "lq-icon-glyph", d: "M3 9h3.5L11 4.5v15L6.5 15H3a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1z" }), /* @__PURE__ */ jsx("path", { className: "lq-icon-wave", strokeWidth: "1.5", strokeLinecap: "round", d: "M14 9a3 3 0 0 1 0 6" }), /* @__PURE__ */ jsx("path", { className: "lq-icon-wave", strokeWidth: "1.5", strokeLinecap: "round", d: "M16 7a5.5 5.5 0 0 1 0 10" }), /* @__PURE__ */ jsx("path", { className: "lq-icon-wave", strokeWidth: "1.5", strokeLinecap: "round", d: "M18 5a8 8 0 0 1 0 14" }) ] }), /** * list-bullet — a three-row bullet list. * Self-drawn: three bullet dots (circles) + three horizontal bars. * Matches the visual weight of the SF Symbol `list.bullet`. */ "list-bullet": /* @__PURE__ */ jsxs(Fragment, { children: [ /* @__PURE__ */ jsx("circle", { className: "lq-icon-glyph", cx: "4.5", cy: "6", r: "1.5" }), /* @__PURE__ */ jsx("rect", { className: "lq-icon-glyph", x: "8", y: "5", width: "12", height: "2", rx: "1" }), /* @__PURE__ */ jsx("circle", { className: "lq-icon-glyph", cx: "4.5", cy: "12", r: "1.5" }), /* @__PURE__ */ jsx("rect", { className: "lq-icon-glyph", x: "8", y: "11", width: "12", height: "2", rx: "1" }), /* @__PURE__ */ jsx("circle", { className: "lq-icon-glyph", cx: "4.5", cy: "18", r: "1.5" }), /* @__PURE__ */ jsx("rect", { className: "lq-icon-glyph", x: "8", y: "17", width: "12", height: "2", rx: "1" }) ] }), /** * square-grid-2x2 — a 2×2 grid of rounded squares. * Self-drawn: four evenly-spaced squares with a shared 2px gap. * Matches the visual weight of the SF Symbol `square.grid.2x2`. */ "square-grid-2x2": /* @__PURE__ */ jsxs(Fragment, { children: [ /* @__PURE__ */ jsx("rect", { className: "lq-icon-glyph", x: "3", y: "3", width: "8", height: "8", rx: "1.5" }), /* @__PURE__ */ jsx("rect", { className: "lq-icon-glyph", x: "13", y: "3", width: "8", height: "8", rx: "1.5" }), /* @__PURE__ */ jsx("rect", { className: "lq-icon-glyph", x: "3", y: "13", width: "8", height: "8", rx: "1.5" }), /* @__PURE__ */ jsx("rect", { className: "lq-icon-glyph", x: "13", y: "13", width: "8", height: "8", rx: "1.5" }) ] }), /** route — a start point following a bent path toward a directional arrow. */ route: /* @__PURE__ */ jsxs(Fragment, { children: [ /* @__PURE__ */ jsx( "path", { className: "lq-icon-wave", d: "M4 18h3.5a3 3 0 0 0 3-3V9a3 3 0 0 1 3-3H20", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" } ), /* @__PURE__ */ jsx("circle", { className: "lq-icon-glyph", cx: "4", cy: "18", r: "1.8" }), /* @__PURE__ */ jsx("path", { className: "lq-icon-wave", d: "m17 3 3 3-3 3", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) ] }), /** module-map — four connected modules representing a package or system map. */ "module-map": /* @__PURE__ */ jsxs(Fragment, { children: [ /* @__PURE__ */ jsx( "path", { className: "lq-icon-wave", d: "M9 6.5h6M6.5 9v6M17.5 9v6M9 17.5h6", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" } ), /* @__PURE__ */ jsx("rect", { className: "lq-icon-wave", x: "3", y: "3", width: "7", height: "7", rx: "1.5", strokeWidth: "1.8" }), /* @__PURE__ */ jsx("rect", { className: "lq-icon-wave", x: "14", y: "3", width: "7", height: "7", rx: "1.5", strokeWidth: "1.8" }), /* @__PURE__ */ jsx("rect", { className: "lq-icon-wave", x: "3", y: "14", width: "7", height: "7", rx: "1.5", strokeWidth: "1.8" }), /* @__PURE__ */ jsx("rect", { className: "lq-icon-wave", x: "14", y: "14", width: "7", height: "7", rx: "1.5", strokeWidth: "1.8" }) ] }), /** * rectangle-grid-1x2 — two stacked full-width rectangles. * Self-drawn: two horizontal bars representing a single-column, two-row layout. * Matches the visual weight of the SF Symbol `rectangle.grid.1x2`. */ "rectangle-grid-1x2": /* @__PURE__ */ jsxs(Fragment, { children: [ /* @__PURE__ */ jsx("rect", { className: "lq-icon-glyph", x: "3", y: "4", width: "18", height: "7", rx: "1.5" }), /* @__PURE__ */ jsx("rect", { className: "lq-icon-glyph", x: "3", y: "13", width: "18", height: "7", rx: "1.5" }) ] }), /** ellipsis — three self-drawn horizontal dots for additional actions. */ ellipsis: /* @__PURE__ */ jsxs(Fragment, { children: [ /* @__PURE__ */ jsx("circle", { className: "lq-icon-glyph", cx: "5", cy: "12", r: "1.8" }), /* @__PURE__ */ jsx("circle", { className: "lq-icon-glyph", cx: "12", cy: "12", r: "1.8" }), /* @__PURE__ */ jsx("circle", { className: "lq-icon-glyph", cx: "19", cy: "12", r: "1.8" }) ] }), /** xmark — two self-drawn strokes for closing or dismissing. */ xmark: /* @__PURE__ */ jsx("path", { className: "lq-icon-wave", d: "m6 6 12 12M18 6 6 18", strokeWidth: "2", strokeLinecap: "round" }), /** testtube — a self-drawn laboratory tube with a liquid level. */ testtube: /* @__PURE__ */ jsx( "path", { className: "lq-icon-wave", d: "m14 3 7 7M15 4 4.5 14.5a4.24 4.24 0 0 0 6 6L21 10M8 11h9", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" } ), /** ellipsis.circle — three dots enclosed by a self-drawn circle. */ "ellipsis.circle": /* @__PURE__ */ jsxs(Fragment, { children: [ /* @__PURE__ */ jsx("circle", { className: "lq-icon-wave", cx: "12", cy: "12", r: "9", strokeWidth: "1.5" }), /* @__PURE__ */ jsx("circle", { className: "lq-icon-glyph", cx: "7", cy: "12", r: "1.2" }), /* @__PURE__ */ jsx("circle", { className: "lq-icon-glyph", cx: "12", cy: "12", r: "1.2" }), /* @__PURE__ */ jsx("circle", { className: "lq-icon-glyph", cx: "17", cy: "12", r: "1.2" }) ] }), /** * bold — a capital "B" with two bowls, the rich-text bold control. * LICENSING: path from Lucide (ISC) — a permissively licensed set explicitly * allowed by the registry note above; not an Apple SF Symbol. */ bold: /* @__PURE__ */ jsx( "path", { className: "lq-icon-wave", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", d: "M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8" } ), /** * italic — a slanted "I" (top serif, bottom serif, diagonal stem), the * rich-text italic control. LICENSING: Lucide (ISC); not an SF Symbol. */ italic: /* @__PURE__ */ jsxs(Fragment, { children: [ /* @__PURE__ */ jsx("path", { className: "lq-icon-wave", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", d: "M19 4h-9" }), /* @__PURE__ */ jsx("path", { className: "lq-icon-wave", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", d: "M14 20H5" }), /* @__PURE__ */ jsx("path", { className: "lq-icon-wave", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", d: "m15 4-6 16" }) ] }), /** * underline — a "U" letterform over an underline bar, the rich-text underline * control. LICENSING: Lucide (ISC); not an SF Symbol. */ underline: /* @__PURE__ */ jsxs(Fragment, { children: [ /* @__PURE__ */ jsx( "path", { className: "lq-icon-wave", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", d: "M6 4v6a6 6 0 0 0 12 0V4" } ), /* @__PURE__ */ jsx("path", { className: "lq-icon-wave", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", d: "M4 20h16" }) ] }), /** * strikethrough — an "S" letterform crossed by a horizontal bar, the * rich-text strikethrough control. LICENSING: Lucide (ISC); not an SF Symbol. */ strikethrough: /* @__PURE__ */ jsxs(Fragment, { children: [ /* @__PURE__ */ jsx( "path", { className: "lq-icon-wave", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", d: "M16 4H9a3 3 0 0 0-2.83 4" } ), /* @__PURE__ */ jsx( "path", { className: "lq-icon-wave", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", d: "M14 12a4 4 0 0 1 0 8H6" } ), /* @__PURE__ */ jsx("path", { className: "lq-icon-wave", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", d: "M4 12h16" }) ] }), /** * chevron-up-down — a stacked up-chevron over a down-chevron, the disclosure * affordance on a Picker's `menu` trigger (the value rises/falls on open). * Self-drawn: two open polylines on the 24×24 viewBox via `.lq-icon-wave`. * Generic web name (NOT the SF Symbol `chevron.up.chevron.down`); no Apple * vector paths (see registry note above). */ "chevron-up-down": /* @__PURE__ */ jsxs(Fragment, { children: [ /* @__PURE__ */ jsx("path", { className: "lq-icon-wave", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", d: "M8 9 12 5 16 9" }), /* @__PURE__ */ jsx( "path", { className: "lq-icon-wave", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", d: "M8 15 12 19 16 15" } ) ] }), /** * chevron-left — a single left-pointing chevron, the "previous" affordance * (e.g. a DatePicker's previous-month nav arrow). Self-drawn open polyline * via `.lq-icon-wave`. Generic web name (NOT the SF Symbol `chevron.left`); * no Apple vector paths (see registry note above). */ "chevron-left": /* @__PURE__ */ jsx( "path", { className: "lq-icon-wave", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", d: "M14.5 7 9.5 12 14.5 17" } ), /** * chevron-right — a single right-pointing chevron, the "next" / "disclose" * affordance (a DatePicker's next-month nav arrow and its month/year * disclosure glyph). Self-drawn open polyline via `.lq-icon-wave`. Generic * web name (NOT the SF Symbol `chevron.right`); no Apple vector paths (see * registry note above). */ "chevron-right": /* @__PURE__ */ jsx( "path", { className: "lq-icon-wave", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", d: "M9.5 7 14.5 12 9.5 17" } ), /** * checkmark — a tick, the selected-row marker in a Picker menu / listbox. * Self-drawn open polyline via `.lq-icon-wave`. Generic web name (NOT the SF * Symbol `checkmark`); no Apple vector paths (see registry note above). */ checkmark: /* @__PURE__ */ jsx( "path", { className: "lq-icon-wave", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", d: "M5 12.5 10 17.5 19 7" } ), /** * copy — two overlapping document rectangles, the "Copy" / "Duplicate" action. * Self-drawn: a front rounded rect + a back document outline. Generic web name * (NOT the SF Symbol `doc.on.doc`); no Apple vector paths. */ copy: /* @__PURE__ */ jsxs(Fragment, { children: [ /* @__PURE__ */ jsx("rect", { className: "lq-icon-wave", strokeWidth: "2", x: "9", y: "9", width: "11", height: "11", rx: "2" }), /* @__PURE__ */ jsx( "path", { className: "lq-icon-wave", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", d: "M5 15H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v1" } ) ] }), /** code — paired angle brackets divided by a slash, for source/API views. */ code: /* @__PURE__ */ jsxs(Fragment, { children: [ /* @__PURE__ */ jsx( "path", { className: "lq-icon-wave", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", d: "m18 8 4 4-4 4M6 8l-4 4 4 4" } ), /* @__PURE__ */ jsx("path", { className: "lq-icon-wave", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", d: "m14.5 4-5 16" }) ] }), /** keyboard — a compact keyboard outline with representative key rows. */ keyboard: /* @__PURE__ */ jsxs(Fragment, { children: [ /* @__PURE__ */ jsx("rect", { className: "lq-icon-wave", strokeWidth: "2", x: "3", y: "6", width: "18", height: "12", rx: "2" }), /* @__PURE__ */ jsx( "path", { className: "lq-icon-wave", strokeWidth: "2", strokeLinecap: "round", d: "M7 10h.01M10 10h.01M13 10h.01M16 10h.01M7 14h.01M10 14h4M17 14h.01" } ) ] }), /** accessibility — a person inside the universal accessibility ring. */ accessibility: /* @__PURE__ */ jsxs(Fragment, { children: [ /* @__PURE__ */ jsx("circle", { className: "lq-icon-wave", strokeWidth: "2", cx: "12", cy: "12", r: "10" }), /* @__PURE__ */ jsx("circle", { className: "lq-icon-wave", strokeWidth: "2", cx: "12", cy: "7", r: "1" }), /* @__PURE__ */ jsx( "path", { className: "lq-icon-wave", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", d: "M8 10h8M12 10v4M9 18l3-4 3 4" } ) ] }), /** water-drop — a single outlined droplet for liquid/material features. */ "water-drop": /* @__PURE__ */ jsx( "path", { className: "lq-icon-wave", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", d: "M12 22a7 7 0 0 0 7-7c0-2-1-3.9-3-5.5S12.5 5.5 12 3c-.5 2.5-2 4.9-4 6.5S5 13 5 15a7 7 0 0 0 7 7Z" } ), /** * share — a tray with an up-arrow rising out of it, the "Share" action. * Self-drawn: an up arrow over an open-topped box. Generic web name (NOT the * SF Symbol `square.and.arrow.up`); no Apple vector paths. */ share: /* @__PURE__ */ jsxs(Fragment, { children: [ /* @__PURE__ */ jsx("path", { className: "lq-icon-wave", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", d: "M12 15V4" }), /* @__PURE__ */ jsx("path", { className: "lq-icon-wave", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", d: "M8 8l4-4 4 4" }), /* @__PURE__ */ jsx( "path", { className: "lq-icon-wave", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", d: "M7 11H5a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-7a1 1 0 0 0-1-1h-2" } ) ] }), /** * trash — a waste bin with lid, handle, and two staves, the "Delete" action. * Self-drawn from basic strokes. Generic web name (NOT the SF Symbol `trash`); * no Apple vector paths. */ trash: /* @__PURE__ */ jsxs(Fragment, { children: [ /* @__PURE__ */ jsx("path", { className: "lq-icon-wave", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", d: "M4 7h16" }), /* @__PURE__ */ jsx( "path", { className: "lq-icon-wave", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", d: "M9 7V5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2" } ), /* @__PURE__ */ jsx( "path", { className: "lq-icon-wave", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", d: "M6 7l1 13a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1l1-13" } ), /* @__PURE__ */ jsx("path", { className: "lq-icon-wave", strokeWidth: "2", strokeLinecap: "round", d: "M10 11v6M14 11v6" }) ] }), /** * folder — a classic tabbed folder outline, the "Move to…" action. * Self-drawn from a single stroked path. Generic web name (NOT the SF Symbol * `folder`); no Apple vector paths. */ folder: /* @__PURE__ */ jsx( "path", { className: "lq-icon-wave", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", d: "M3 7a1 1 0 0 1 1-1h5l2 2h8a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1z" } ), /** * doc.text — a document page with a folded top-right corner, the "file" / * "Terms" glyph (the GroupBox "Label with icon" section). Dotted key mirrors * the `ellipsis.circle`/`dot.radiowaves.right` precedent. LICENSING: path from * Lucide (ISC), a permissive set allowed by the registry note above; not an * Apple SF Symbol vector. Stroked (`.lq-icon-wave`, `fill: none`). */ "doc.text": /* @__PURE__ */ jsxs(Fragment, { children: [ /* @__PURE__ */ jsx( "path", { className: "lq-icon-wave", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7z" } ), /* @__PURE__ */ jsx( "path", { className: "lq-icon-wave", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", d: "M14 2v4a2 2 0 0 0 2 2h4" } ) ] }), /** * gear — a cog with eight rounded lobes and a centre bore, the "Settings" * glyph (the Label gallery's `titleAndIcon` pairing). LICENSING: path from * Lucide (ISC), a permissive set allowed by the registry note above; not an * Apple SF Symbol. Generic web name (`gear`, NOT the SF Symbol `gearshape`). * Stroked (`.lq-icon-wave`, `fill: none`) like the other Lucide glyphs here. */ gear: /* @__PURE__ */ jsxs(Fragment, { children: [ /* @__PURE__ */ jsx( "path", { className: "lq-icon-wave", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", d: "M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z" } ), /* @__PURE__ */ jsx("circle", { className: "lq-icon-wave", strokeWidth: "2", cx: "12", cy: "12", r: "3" }) ] }), /** * image — a framed picture: rounded rect frame, a sun disc, and a mountain * ridge, the generic "photo" glyph. LICENSING: path from Lucide (ISC), a * permissive set allowed by the registry note above; not an SF Symbol. */ image: /* @__PURE__ */ jsxs(Fragment, { children: [ /* @__PURE__ */ jsx("rect", { className: "lq-icon-wave", strokeWidth: "2", x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }), /* @__PURE__ */ jsx("circle", { className: "lq-icon-glyph", cx: "9", cy: "9", r: "2" }), /* @__PURE__ */ jsx( "path", { className: "lq-icon-wave", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", d: "m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" } ) ] }), /** * dot.radiowaves.right — a source dot with three arcs radiating rightward, * the "signal emitting" glyph flanking the LabeledContent "Bluetooth" row. * Self-drawn: a filled source dot + three concentric right-opening arcs (same * `.lq-icon-wave` treatment as `volume-high`). Dotted key mirrors the existing * `ellipsis.circle` precedent; no Apple SF Symbol vector paths (see registry * note above) — the arcs are basic elliptical arcs, not Apple's glyph. */ "dot.radiowaves.right": /* @__PURE__ */ jsxs(Fragment, { children: [ /* @__PURE__ */ jsx("circle", { className: "lq-icon-glyph", cx: "6", cy: "12", r: "2" }), /* @__PURE__ */ jsx("path", { className: "lq-icon-wave", strokeWidth: "1.5", strokeLinecap: "round", d: "M10 9a4 4 0 0 1 0 6" }), /* @__PURE__ */ jsx("path", { className: "lq-icon-wave", strokeWidth: "1.5", strokeLinecap: "round", d: "M13 7a6.5 6.5 0 0 1 0 10" }), /* @__PURE__ */ jsx("path", { className: "lq-icon-wave", strokeWidth: "1.5", strokeLinecap: "round", d: "M16 5a8.5 8.5 0 0 1 0 14" }) ] }), /** * bookmark — a ribbon bookmark with a notched foot, the "saved item" glyph * (EmptyState "No Bookmarks"). LICENSING: path from Lucide (ISC), a permissive * set allowed by the registry note above; not an Apple SF Symbol. */ bookmark: /* @__PURE__ */ jsx( "path", { className: "lq-icon-wave", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", d: "M6 4a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v17l-6-4-6 4z" } ), /** * search — a magnifying glass: a ring plus a diagonal handle, the "no results" * glyph (EmptyState search). LICENSING: path from Lucide (ISC); not an SF Symbol. */ search: /* @__PURE__ */ jsxs(Fragment, { children: [ /* @__PURE__ */ jsx("circle", { className: "lq-icon-wave", strokeWidth: "2", cx: "10.5", cy: "10.5", r: "6.5" }), /* @__PURE__ */ jsx("path", { className: "lq-icon-wave", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", d: "m20 20-4.8-4.8" }) ] }), /** * house — a gabled roof over a body with a door, the "Home" tab glyph (the * demo-app Tab Bar's first tab, SF Symbol `house`). LICENSING: path from * Lucide (ISC); not an Apple SF Symbol vector. */ house: /* @__PURE__ */ jsxs(Fragment, { children: [ /* @__PURE__ */ jsx( "path", { className: "lq-icon-wave", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", d: "M3 10.5 12 3l9 7.5" } ), /* @__PURE__ */ jsx( "path", { className: "lq-icon-wave", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", d: "M5.5 9.5V20h13V9.5" } ), /* @__PURE__ */ jsx("path", { className: "lq-icon-wave", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", d: "M9.5 20v-6h5v6" }) ] }), /** * person — a head above rounded shoulders, the "Profile" tab glyph (SF Symbol * `person`). LICENSING: path from Lucide (ISC); not an Apple SF Symbol vector. */ person: /* @__PURE__ */ jsxs(Fragment, { children: [ /* @__PURE__ */ jsx("circle", { className: "lq-icon-wave", strokeWidth: "2", cx: "12", cy: "8", r: "4" }), /* @__PURE__ */ jsx( "path", { className: "lq-icon-wave", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", d: "M4.5 20a7.5 7.5 0 0 1 15 0" } ) ] }), /** person.2 — two people with overlapping shoulders, for groups and community. */ "person.2": /* @__PURE__ */ jsxs(Fragment, { children: [ /* @__PURE__ */ jsx("circle", { className: "lq-icon-wave", strokeWidth: "1.8", cx: "9", cy: "8", r: "3" }), /* @__PURE__ */ jsx("circle", { className: "lq-icon-wave", strokeWidth: "1.8", cx: "16.5", cy: "9", r: "2.5" }), /* @__PURE__ */ jsx( "path", { className: "lq-icon-wave", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", d: "M3.5 20a5.5 5.5 0 0 1 11 0" } ), /* @__PURE__ */ jsx( "path", { className: "lq-icon-wave", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", d: "M14 14.5a5 5 0 0 1 6.5 5.5" } ) ] }), /** shippingbox — a closed parcel with an isometric lid and sealed centre seam. */ shippingbox: /* @__PURE__ */ jsxs(Fragment, { children: [ /* @__PURE__ */ jsx( "path", { className: "lq-icon-wave", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", d: "m3.5 7.5 8.5-4 8.5 4v9L12 21l-8.5-4.5z" } ), /* @__PURE__ */ jsx( "path", { className: "lq-icon-wave", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", d: "m3.5 7.5 8.5 4 8.5-4M12 11.5V21M8 5.4l8.5 4" } ) ] }), /** slider.horizontal.3 — three adjustable tracks for design-system values. */ "slider.horizontal.3": /* @__PURE__ */ jsxs(Fragment, { children: [ /* @__PURE__ */ jsx( "path", { className: "lq-icon-wave", strokeWidth: "1.8", strokeLinecap: "round", d: "M3 6h5M12 6h9M3 12h10M17 12h4M3 18h3M10 18h11" } ), /* @__PURE__ */ jsx("circle", { className: "lq-icon-wave", strokeWidth: "1.8", cx: "10", cy: "6", r: "2" }), /* @__PURE__ */ jsx("circle", { className: "lq-icon-wave", strokeWidth: "1.8", cx: "15", cy: "12", r: "2" }), /* @__PURE__ */ jsx("circle", { className: "lq-icon-wave", strokeWidth: "1.8", cx: "8", cy: "18", r: "2" }) ] }), /** sparkles — one large and two small four-point stars for AI-assisted resources. */ sparkles: /* @__PURE__ */ jsxs(Fragment, { children: [ /* @__PURE__ */ jsx( "path", { className: "lq-icon-wave", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", d: "M12 3c.7 4 2 5.3 6 6-4 .7-5.3 2-6 6-.7-4-2-5.3-6-6 4-.7 5.3-2 6-6Z" } ), /* @__PURE__ */ jsx( "path", { className: "lq-icon-wave", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", d: "M19 15c.3 1.8.9 2.4 2.7 2.7-1.8.3-2.4.9-2.7 2.7-.3-1.8-.9-2.4-2.7-2.7 1.8-.3 2.4-.9 2.7-2.7ZM5 15c.2 1.2.6 1.6 1.8 1.8-1.2.2-1.6.6-1.8 1.8-.2-1.2-.6-1.6-1.8-1.8 1.2-.2 1.6-.6 1.8-1.8Z" } ) ] }), /** clock.arrow.circlepath — a clock face wrapped by a return arrow for version history. */ "clock.arrow.circlepath": /* @__PURE__ */ jsxs(Fragment, { children: [ /* @__PURE__ */ jsx( "path", { className: "lq-icon-wave", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", d: "M20.5 8A9 9 0 1 0 21 15M20.5 3v5h-5" } ), /* @__PURE__ */ jsx("path", { className: "lq-icon-wave", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", d: "M12 7v5l3 2" }) ] }), /** * tray — an open inbox tray: a box whose top edge dips into a shallow chute, * the "Inbox" tab glyph (SF Symbol `tray`). LICENSING: path from Lucide (ISC); * not an Apple SF Symbol vector. */ tray: /* @__PURE__ */ jsxs(Fragment, { children: [ /* @__PURE__ */ jsx( "path", { className: "lq-icon-wave", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", d: "M3 13.5 5.5 5h13L21 13.5V19a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1z" } ), /* @__PURE__ */ jsx( "path", { className: "lq-icon-wave", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", d: "M3 13.5h5l1.5 2.5h5l1.5-2.5h5" } ) ] }), /** * paperplane — a folded paper plane pointing up-right with its centre crease, * the "Sent" tab glyph (SF Symbol `paperplane`). LICENSING: path from Lucide * (ISC); not an Apple SF Symbol vector. */ paperplane: /* @__PURE__ */ jsxs(Fragment, { children: [ /* @__PURE__ */ jsx( "path", { className: "lq-icon-wave", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", d: "M21 3 3 10.5l7.5 3 3 7.5z" } ), /* @__PURE__ */ jsx("path", { className: "lq-icon-wave", strokeWidth: "2", strokeLinecap: "round", d: "M21 3 10.5 13.5" }) ] }), /** * bell — a notification bell: a domed body on a flared skirt with a clapper, * the "Alerts" tab glyph (SF Symbol `bell`). LICENSING: path from Lucide (ISC); * not an Apple SF Symbol vector. */ bell: /* @__PURE__ */ jsxs(Fragment, { children: [ /* @__PURE__ */ jsx( "path", { className: "lq-icon-wave", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", d: "M18 16V10a6 6 0 1 0-12 0v6l-1.5 2.5h15z" } ), /* @__PURE__ */ jsx("path", { className: "lq-icon-wave", strokeWidth: "2", strokeLinecap: "round", d: "M10 19.5a2.2 2.2 0 0 0 4 0" }) ] }), /** * wifi.slash — three signal arcs and a source dot crossed by a diagonal slash, * the "no network connection" glyph (EmptyState offline). Self-drawn: same arc * family as `dot.radiowaves.right`, upward-opening, plus a slash stroke. Dotted * key mirrors the `ellipsis.circle` precedent; no Apple SF Symbol vector paths. */ "wifi.slash": /* @__PURE__ */ jsxs(Fragment, { children: [ /* @__PURE__ */ jsx("path", { className: "lq-icon-wave", strokeWidth: "1.5", strokeLinecap: "round", d: "M2 8.5a15 15 0 0 1 20 0" }), /* @__PURE__ */ jsx("path", { className: "lq-icon-wave", strokeWidth: "1.5", strokeLinecap: "round", d: "M5 12a10 10 0 0 1 14 0" }), /* @__PURE__ */ jsx("path", { className: "lq-icon-wave", strokeWidth: "1.5", strokeLinecap: "round", d: "M8.5 15.5a5 5 0 0 1 7 0" }), /* @__PURE__ */ jsx("circle", { className: "lq-icon-glyph", cx: "12", cy: "19", r: "1.2" }), /* @__PURE__ */ jsx("path", { className: "lq-icon-wave", strokeWidth: "2", strokeLinecap: "round", d: "M3 3 21 21" }) ] }), "signpost.right": /* @__PURE__ */ jsxs(Fragment, { children: [ /* @__PURE__ */ jsx("path", { className: "lq-icon-wave", d: "M8 21V3", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ jsx( "path", { className: "lq-icon-wave", d: "M8 5h8.5L20 8l-3.5 3H8M8 13H4.5L2 16l2.5 3H8", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" } ) ] }), "square.stack.3d.down.right": /* @__PURE__ */ jsxs(Fragment, { children: [ /* @__PURE__ */ jsx( "path", { className: "lq-icon-wave", d: "m3 5 6-3 6 3-6 3-6-3ZM3 9l6 3 6-3M3 13l6 3 3-1.5", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" } ), /* @__PURE__ */ jsx( "path", { className: "lq-icon-wave", d: "m13 13 8 8m0-5v5h-5", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" } ) ] }), "checkmark.circle": /* @__PURE__ */ jsxs(Fragment, { children: [ /* @__PURE__ */ jsx("circle", { className: "lq-icon-wave", cx: "12", cy: "12", r: "9", strokeWidth: "1.8" }), /* @__PURE__ */ jsx( "path", { className: "lq-icon-wave", d: "m7.75 12.25 2.75 2.75 5.75-6", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" } ) ] }), "arrow.down.right.and.arrow.up.left": /* @__PURE__ */ jsx( "path", { className: "lq-icon-wave", d: "m4 4 6.5 6.5M10.5 6v4.5H6M20 20l-6.5-6.5M13.5 18v-4.5H18", strokeWidth: "1.9", strokeLinecap: "round", strokeLinejoin: "round" } ), "arrow.right.circle": /* @__PURE__ */ jsxs(Fragment, { children: [ /* @__PURE__ */ jsx("circle", { className: "lq-icon-wave", cx: "12", cy: "12", r: "9", strokeWidth: "1.8" }), /* @__PURE__ */ jsx( "path", { className: "lq-icon-wave", d: "M7.5 12h9m-3.5-3.5 3.5 3.5-3.5 3.5", strokeWidth: "1.9", strokeLinecap: "round", strokeLinejoin: "round" } ) ] }), "play.circle": /* @__PURE__ */ jsxs(Fragment, { children: [ /* @__PURE__ */ jsx("circle", { className: "lq-icon-wave", cx: "12", cy: "12", r: "9", strokeWidth: "1.8" }), /* @__PURE__ */ jsx( "path", { className: "lq-icon-wave", d: "m10.5 8.5 6 3.5-6 3.5Z", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" } ) ] }), "square.grid.2x2": /* @__PURE__ */ jsxs(Fragment, { children: [ /* @__PURE__ */ jsx("rect", { className: "lq-icon-wave", x: "3.5", y: "3.5", width: "7", height: "7", rx: "1.5", strokeWidth: "1.8" }), /* @__PURE__ */ jsx("rect", { className: "lq-icon-wave", x: "13.5", y: "3.5", width: "7", height: "7", rx: "1.5", strokeWidth: "1.8" }), /* @__PURE__ */ jsx("rect", { className: "lq-icon-wave", x: "3.5", y: "13.5", width: "7", height: "7", rx: "1.5", strokeWidth: "1.8" }), /* @__PURE__ */ jsx("rect", { className: "lq-icon-wave", x: "13.5", y: "13.5", width: "7", height: "7", rx: "1.5", strokeWidth: "1.8" }) ] }), paintbrush: /* @__PURE__ */ jsxs(Fragment, { children: [ /* @__PURE__ */ jsx( "path", { className: "lq-icon-wave", d: "m12.8 10.2 5.7-5.7a2.1 2.1 0 0 1 3 3l-5.7 5.7", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" } ), /* @__PURE__ */ jsx( "path", { className: "lq-icon-wave", d: "m10.2 8.2 5.6 5.6-3.2 3.2L7 11.4Z", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" } ), /* @__PURE__ */ jsx( "path", { className: "lq-icon-wave", d: "M7 11.4c-2 2-.4 4.3-4 7.6 3.3.8 6.8-.1 9.6-2", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" } ) ] }), "rectangle.split.2x1": /* @__PURE__ */ jsxs(Fragment, { children: [ /* @__PURE__ */ jsx("rect", { className: "lq-icon-wave", x: "3", y: "5", width: "18", height: "14", rx: "2.25", strokeWidth: "1.8" }), /* @__PURE__ */ jsx("path", { className: "lq-icon-wave", d: "M12 5v14", strokeWidth: "1.8", strokeLinecap: "round" }) ] }), "point.topleft.down.to.point.bottomright.curvepath": /* @__PURE__ */ jsxs(Fragment, { children: [ /* @__PURE__ */ jsx("circle", { className: "lq-icon-glyph", cx: "5", cy: "5", r: "2" }), /* @__PURE__ */ jsx("circle", { className: "lq-icon-glyph", cx: "19", cy: "19", r: "2" }), /* @__PURE__ */ jsx( "path", { className: "lq-icon-wave", d: "M5 7v2.5a4 4 0 0 0 4 4h6a4 4 0 0 1 4 4V17", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" } ) ] }), puzzlepiece: /* @__PURE__ */ jsx( "path", { className: "lq-icon-wave", d: "M9 4h2a2.5 2.5 0 1 1 5 0h2a2 2 0 0 1 2 2v3h-2a2.5 2.5 0 1 0 0 5h2v4a2 2 0 0 1-2 2h-4v-2a2.5 2.5 0 1 0-5 0v2H6a2 2 0 0 1-2-2v-3a2.5 2.5 0 1 0 0-5V6a2 2 0 0 1 2-2Z", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" } ), "circle.hexagongrid": /* @__PURE__ */ jsxs(Fragment, { children: [ /* @__PURE__ */ jsx("circle", { className: "lq-icon-wave", cx: "12", cy: "12", r: "9", strokeWidth: "1.8" }), /* @__PURE__ */ jsx("circle", { className: "lq-icon-glyph", cx: "12", cy: "12", r: "1.5" }), /* @__PURE__ */ jsx("circle", { className: "lq-icon-glyph", cx: "12", cy: "7.5", r: "1.25" }), /* @__PURE__ */ jsx("circle", { className: "lq-icon-glyph", cx: "15.9", cy: "9.75", r: "1.25" }), /* @__PURE__ */ jsx("circle", { className: "lq-icon-glyph", cx: "15.9", cy: "14.25", r: "1.25" }), /* @__PURE__ */ jsx("circle", { className: "lq-icon-glyph", cx: "12", cy: "16.5", r: "1.25" }), /* @__PURE__ */ jsx("circle", { className: "lq-icon-glyph", cx: "8.1", cy: "14.25", r: "1.25" }), /* @__PURE__ */ jsx("circle", { className: "lq-icon-glyph", cx: "8.1", cy: "9.75", r: "1.25" }) ] }), "bolt.horizontal.circle": /* @__PURE__ */ jsxs(Fragment, { children: [ /* @__PURE__ */ jsx("circle", { className: "lq-icon-wave", cx: "12", cy: "12", r: "9", strokeWidth: "1.8" }), /* @__PURE__ */ jsx( "path", { className: "lq-icon-wave", d: "M6.5 13.25h4l-1 3.5 8-6h-4l1-3.5-8 6Z", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" } ) ] }), /** checklist — three completed tasks with aligned text rows. */ checklist: /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx( "path", { className: "lq-icon-wave", d: "m3.5 6 1.6 1.6L8 4.7M10.5 6H21M3.5 12l1.6 1.6 2.9-2.9M10.5 12H21M3.5 18l1.6 1.6 2.9-2.9M10.5 18H21", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" } ) }), /** square.on.square — two offset rounded surfaces layered together. */ "square.on.square": /* @__PURE__ */ jsxs(Fragment, { children: [ /* @__PURE__ */ jsx("rect", { className: "lq-icon-wave", x: "7", y: "3", width: "14", height: "14", rx: "2.5", strokeWidth: "1.8" }), /* @__PURE__ */ jsx( "path", { className: "lq-icon-wave", d: "M17 17v1.5a2.5 2.5 0 0 1-2.5 2.5h-9A2.5 2.5 0 0 1 3 18.5v-9A2.5 2.5 0 0 1 5.5 7H7", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" } ) ] }), /** scope — a centered target with four open sight marks. */ scope: /* @__PURE__ */ jsxs(Fragment, { children: [ /* @__PURE__ */ jsx("circle", { className: "lq-icon-wave", cx: "12", cy: "12", r: "6", strokeWidth: "1.8" }), /* @__PURE__ */ jsx("circle", { className: "lq-icon-glyph", cx: "12", cy: "12", r: "1.75" }), /* @__PURE__ */ jsx("path", { className: "lq-icon-wave", d: "M12 2v4M12 18v4M2 12h4M18 12h4", strokeWidth: "1.8", strokeLinecap: "round" }) ] }), /** textformat — a typographic capital A with a baseline. */ textformat: /* @__PURE__ */ jsxs(Fragment, { children: [ /* @__PURE__ */ jsx( "path", { className: "lq-icon-wave", d: "M5 17 10.6 4.5a1.55 1.55 0 0 1 2.8 0L19 17M7.5 11.5h9", strokeWidth: "1.9", strokeLinecap: "round", strokeLinejoin: "round" } ), /* @__PURE__ */ jsx("path", { className: "lq-icon-wave", d: "M3.5 21h17", strokeWidth: "1.9", strokeLinecap: "round" }) ] }), /** hand.tap — an extended finger pressing a control, with tap rays. */ "hand.tap": /* @__PURE__ */ jsxs(Fragment, { children: [ /* @__PURE__ */ jsx( "path", { className: "lq-icon-wave", d: "M9.5 10V5.5a2 2 0 0 1 4 0V12m0-2.5a2 2 0 0 1 4 0V12m0-1a2 2 0 0 1 3.5 1.3v3.2c0 3.6-2.9 6.5-6.5 6.5h-1.2a6 6 0 0 1-4.7-2.3l-3.2-4.1a2.05 2.05 0 0 1 3-2.8l1.1 1", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" } ), /* @__PURE__ */ jsx( "path", { className: "lq-icon-wave", d: "M6.5 7.5 4.8 6.3M8 4.2 7.4 2M15.5 4.3 17 2.7", strokeWidth: "1.8", strokeLinecap: "round" } ) ] }), /** square.stack.3d.up — layered diamond surfaces rising into an arrow. */ "square.stack.3d.up": /* @__PURE__ */ jsxs(Fragment, { children: [ /* @__PURE__ */ jsx( "path", { className: "lq-icon-wave", d: "m3 14.5 9 5 9-5M3 10.5l9 5 9-5M3 6.5l9 5 9-5L12 2 3 6.5Z", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" } ), /* @__PURE__ */ jsx( "path", { className: "lq-icon-wave", d: "M12 11.5V5m-2.3 2.3L12 5l2.3 2.3", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" } ) ] }), /** book.closed — a closed volume with a visible spine and page edge. */ "book.closed": /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx( "path", { className: "lq-icon-wave", d: "M6 3h12a2 2 0 0 1 2 2v16H6a3 3 0 0 1-3-3V6a3 3 0 0 1 3-3Zm0 0v18M6 17h14", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" } ) }), /** checkmark.seal — a verified circular seal with a centered check. */ "checkmark.seal": /* @__PURE__ */ jsxs(Fragment, { children: [ /* @__PURE__ */ jsx( "path", { className: "lq-icon-wave", d: "M12 2.5 14.4 4l2.8-.3 1.1 2.6 2.5 1.3-.5 2.8 1.2 2.6-2 2 .1 2.8-2.7.8-1.5 2.4-2.8-.7-2.6 1.2-2-2-2.8.1-.8-2.7-2.4-1.5.7-2.8-1.2-2.6 2-2-.1-2.8 2.7-.8L8.6 4l2.8.7L12 2.5Z", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round" } ), /* @__PURE__ */ jsx( "path", { className: "lq-icon-wave", d: "m8.2 12.1 2.5 2.5 5.2-5.3", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" } ) ] }), /** gauge.with.dots.needle.50percent — a dotted half gauge with a centered needle. */ "gauge.with.dots.needle.50percent": /* @__PURE__ */ jsxs(Fragment, { children: [ /* @__PURE__ */ jsx("path", { className: "lq-icon-wave", d: "M3 18a9 9 0 0 1 18 0", strokeWidth: "1.8", strokeLinecap: "round" }), /* @__PURE__ */ jsx("circle", { className: "lq-icon-glyph", cx: "6.3", cy: "13.1", r: "1" }), /* @__PURE__ */ jsx("circle", { className: "lq-icon-glyph", cx: "8.3", cy: "9.6", r: "1" }), /* @__PURE__ */ jsx("circle", { className: "lq-icon-glyph", cx: "15.7", cy: "9.6", r: "1" }), /* @__PURE__ */ jsx("circle", { className: "lq-icon-glyph", cx: "17.7", cy: "13.1", r: "1" }), /* @__PURE__ */ jsx("path", { className: "lq-icon-wave", d: "m12 17 1.8-7.5", strokeWidth: "2", strokeLinecap: "round" }), /* @__PURE__ */ jsx("circle", { className: "lq-icon-glyph", cx: "12", cy: "17", r: "1.5" }) ] }), /** arrow.triangle.merge — two branch paths converging into one upward arrow. */ "arrow.triangle.merge": /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx( "path", { className: "lq-icon-wave", d: "M6 20v-3.5a4.5 4.5 0 0 1 4.5-4.5H12m6 8v-3.5a4.5 4.5 0 0 0-4.5-4.5H12m0 0V3m-3 3 3-3 3 3", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" } ) }), /** rectangle.3.group — three evenly grouped vertical content cards. */ "rectangle.3.group": /* @__PURE__ */ jsxs(Fragment, { children: [ /* @__PURE__ */ jsx("rect", { className: "lq-icon-wave", x: "2.5", y: "5", width: "5", height: "14", rx: "1.5", strokeWidth: "1.8" }), /* @__PURE__ */ jsx("rect", { className: "lq-icon-wave", x: "9.5", y: "3", width: "5", height: "18", rx: "1.5", strokeWidth: "1.8" }), /* @__PURE__ */ jsx("rect", { className: "lq-icon-wave", x: "16.5", y: "5", width: "5", height: "14", rx: "1.5", strokeWidth: "1.8" }) ] }), /** drop — a single liquid droplet with a calm rounded base. */ drop: /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx( "path", { className: "lq-icon-wave", d: "M12 2.5S5.5 9.9 5.5 14.5a6.5 6.5 0 0 0 13 0C18.5 9.9 12 2.5 12 2.5Z", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" } ) }), /** arrow.triangle.2.circlepath — two arrows exchanging around a circular route. */ "arrow.triangle.2.circlepath": /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx( "path", { className: "lq-icon-wave", d: "M20 8a8.2 8.2 0 0 0-13.8-2L4 8.2M4 8.2V4m0 4.2h4.2M4 16a8.2 8.2 0 0 0 13.8 2l2.2-2.2M20 15.8V20m0-4.2h-4.2", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" } ) }), /** rectangle.portrait.on.rectangle.portrait — two overlapping portrait windows. */ "rectangle.portrait.on.rectangle.portrait": /* @__PURE__ */ jsxs(Fragment, { children: [ /* @__PURE__ */ jsx("rect", { className: "lq-icon-wave", x: "8", y: "3", width: "11", height: "16", rx: "2.2", strokeWidth: "1.8" }), /* @__PURE__ */ jsx( "path", { className: "lq-icon-wave", d: "M15 19v.5A2.5 2.5 0 0 1 12.5 22h-6A2.5 2.5 0 0 1 4 19.5v-11A2.5 2.5 0 0 1 6.5 6H8", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" } ) ] }), /** globe — a world sphere with latitude and longitude guides. */ globe: /* @__PURE__ */ jsxs(Fragment, { children: [ /* @__PURE__ */ jsx("circle", { className: "lq-icon-wave", cx: "12", cy: "12", r: "9", strokeWidth: "1.8" }), /* @__PURE__ */ jsx( "path", { className: "lq-icon-wave", d: "M3.4 9h17.2M3.4 15h17.2M12 3c2.4 2.5 3.6 5.5 3.6 9S14.4 18.5 12 21M12 3c-2.4 2.5-3.6 5.5-3.6 9S9.6 18.5 12 21", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round" } ) ] }), "arrow.up.right.square": /* @__PURE__ */ jsxs(Fragment, { children: [ /* @__PURE__ */ jsx("rect", { className: "lq-icon-wave", x: "3", y: "3", width: "18", height: "18", rx: "3", strokeWidth: "1.8" }), /* @__PURE__ */ jsx( "path", { className: "lq-icon-wave", d: "M9 15 17 7M11 7h6v6", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" } ) ] }), link: /* @__PURE__ */ jsxs(Fragment, { children: [ /* @__PURE__ */ jsx( "path", { className: "lq-icon-wave", d: "m9.5 14.5-1.8 1.8a3.25 3.25 0 0 1-4.6-4.6l3.2-3.2a3.25 3.25 0 0 1 4.6 0", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" } ), /* @__PURE__ */ jsx( "path", { className: "lq-icon-wave", d: "m14.5 9.5 1.8-1.8a3.25 3.25 0 1 1 4.6 4.6l-3.2 3.2a3.25 3.25 0 0 1-4.6 0", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" } ), /* @__PURE__ */ jsx("path", { className: "lq-icon-wave", d: "m8.5 15.5 7-7", strokeWidth: "1.8", strokeLinecap: "round" }) ] }), "square.3.layers.3d": /* @__PURE__ */ jsxs(Fragment, { children: [ /* @__PURE__ */ jsx("path", { className: "lq-icon-wave", d: "m12 3 8 4-8 4-8-4 8-4Z", strokeWidth: "1.8", strokeLinejoin: "round" }), /* @__PURE__ */ jsx("path", { className: "lq-icon-wave", d: "m4 11 8 4 8-4", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ jsx("path", { className: "lq-icon-wave", d: "m4 15 8 4 8-4", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) ] }), "shippingbox.and.arrow.up": /* @__PURE__ */ jsxs(Fragment, { children: [ /* @__PURE__ */ jsx( "path", { className: "lq-icon-wave", d: "m3.5 8 8.5 4 8.5-4M12 12v9M3.5 8v9l8.5 4 8.5-4v-6", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" } ), /* @__PURE__ */ jsx( "path", { className: "lq-icon-wave", d: "m3.5 8 8.5-4 4 1.9", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" } ), /* @__PURE__ */ jsx( "path", { className: "lq-icon-wave", d: "M18.5 9V3.5m0 0L16 6m2.5-2.5L21 6", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" } ) ] }), tag: /* @__PURE__ */ jsxs(Fragment, { children: [ /* @__PURE__ */ jsx( "path", { className: "lq-icon-wave", d: "M3 5.5V11l8.7 8.7a2.25 2.25 0 0 0 3.2 0l4.8-4.8a2.25 2.25 0 0 0 0-3.2L11 3H5.5A2.5 2.5 0 0 0 3 5.5Z", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" } ), /* @__PURE__ */ jsx("circle", { className: "lq-icon-glyph", cx: "7.25", cy: "7.25", r: "1.35" }) ] }), "doc.on.doc": /* @__PURE__ */ jsxs(Fragment, { children: [ /* @__PURE__ */ jsx( "path", { className: "lq-icon-wave", d: "M8 4.5A1.5 1.5 0 0 1 9.5 3H16l4 4v10.5A1.5 1.5 0 0 1 18.5 19H18", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" } ), /* @__PURE__ */ jsx( "path", { className: "lq-icon-wave", d: "M16 3v4h4M5.5 7H12l4 4v8.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 4 19.5v-11A1.5 1.5 0 0 1 5.5 7Z", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" } ), /* @__PURE__ */ jsx("path", { className: "lq-icon-wave", d: "M12 7v4h4", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) ] }), "chart.bar": /* @__PURE__ */ jsxs(Fragment, { children: [ /* @__PURE__ */ jsx("path", { className: "lq-icon-wave", d: "M4 3v17h17", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ jsx("rect", { className: "lq-icon-wave", x: "7", y: "13", width: "3", height: "4", rx: "0.8", strokeWidth: "1.8" }), /* @__PURE__ */ jsx("rect", { className: "lq-icon-wave", x: "12", y: "9", width: "3", height: "8", rx: "0.8", strokeWidth: "1.8" }), /* @__PURE__ */ jsx("rect", { className: "lq-icon-wave", x: "17", y: "5", width: "3", height: "12", rx: "0.8", strokeWidth: "1.8" }) ] }), "curlybraces.square": /* @__PURE__ */ jsxs(Fragment, { children: [ /* @__PURE__ */ jsx("rect", { className: "lq-icon-wave", x: "3", y: "3", width: "18", height: "18", rx: "3", strokeWidth: "1.8" }), /* @__PURE__ */ jsx( "path", { className: "lq-icon-wave", d: "M10 7.5H9a1.5 1.5 0 0 0-1.5 1.5v1.2A1.8 1.8 0 0 1 6 12a1.8 1.8 0 0 1 1.5 1.8V15A1.5 1.5 0 0 0 9 16.5h1M14 7.5h1A1.5 1.5 0 0 1 16.5 9v1.2A1.8 1.8 0 0 0 18 12a1.8 1.8 0 0 0-1.5 1.8V15a1.5 1.5 0 0 1-1.5 1.5h-1", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" } ) ] }), "server.rack": /* @__PURE__ */ jsxs(Fragment, { children: [ /* @__PURE__ */ jsx("rect", { className: "lq-icon-wave", x: "3", y: "4", width: "18", height: "6.5", rx: "2", strokeWidth: "1.8" }), /* @__PURE__ */ jsx("rect", { className: "lq-icon-wave", x: "3", y: "13.5", width: "18", height: "6.5", rx: "2", strokeWidth: "1.8" }), /* @__PURE__ */ jsx("circle", { className: "lq-icon-glyph", cx: "7", cy: "7.25", r: "1.15" }), /* @__PURE__ */ jsx("circle", { className: "lq-icon-glyph", cx: "7", cy: "16.75", r: "1.15" }), /* @__PURE__ */ jsx("path", { className: "lq-icon-wave", d: "M11 7.25h6M11 16.75h6", strokeWidth: "1.8", strokeLinecap: "round" }) ] }), "text.bubble": /* @__PURE__ */ jsxs(Fragment, { children: [ /* @__PURE__ */ jsx( "path", { className: "lq-icon-wave", d: "M5.5 4h13A2.5 2.5 0 0 1 21 6.5v9a2.5 2.5 0 0 1-2.5 2.5H11l-5.5 3v-3A2.5 2.5 0 0 1 3 15.5v-9A2.5 2.5 0 0 1 5.5 4Z", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" } ), /* @__PURE__ */ jsx("path", { className: "lq-icon-wave", d: "M7 9h10M7 13h7", strokeWidth: "1.8", strokeLinecap: "round" }) ] }), "info.circle": /* @__PURE__ */ jsxs(Fragment, { children: [ /* @__PURE__ */ jsx("circle", { className: "lq-icon-wave", cx: "12", cy: "12", r: "9", strokeWidth: "1.8" }), /* @__PURE__ */ jsx("circle", { className: "lq-icon-glyph", cx: "12", cy: "8", r: "1.2" }), /* @__PURE__ */ jsx("path", { className: "lq-icon-wave", d: "M12 11.5V17", strokeWidth: "2", strokeLinecap: "round" }) ] }), "link.badge": /* @__PURE__ */ jsxs(Fragment, { children: [ /* @__PURE__ */ jsx( "path", { className: "lq-icon-wave", d: "m9 15-1.7 1.7a3 3 0 0 1-4.25-4.25l3-3A3 3 0 0 1 10.3 9M14.2 15a3 3 0 0 0 4.25 0l2.5-2.5a3 3 0 0 0-.35-4.55", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" } ), /* @__PURE__ */ jsx("path", { className: "lq-icon-wave", d: "m8.5 15.5 6-6", strokeWidth: "1.8", strokeLinecap: "round" }), /* @__PURE__ */ jsx("circle", { className: "lq-icon-wave", cx: "17.5", cy: "5.5", r: "3", strokeWidth: "1.6" }), /* @__PURE__ */ jsx( "path", { className: "lq-icon-wave", d: "m16.2 5.5.8.8 1.8-1.8", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" } ) ] }), hammer: /* @__PURE__ */ jsxs(Fragment, { children: [ /* @__PURE__ */ jsx( "path", { className: "lq-icon-wave", d: "m13.5 7.5 7 7-3 3-7-7M12 9 5.2 15.8a2.15 2.15 0 1 0 3 3L15 12", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" } ), /* @__PURE__ */ jsx("path", { className: "lq-icon-wave", d: "m11.5 2.5 4 4-3 3-4-4 3-3Z", strokeWidth: "1.8", strokeLinejoin: "round" }) ] }), "arrow.triangle.pull": /* @__PURE__ */ jsxs(Fragment, { children: [ /* @__PURE__ */ jsx("circle", { className: "lq-icon-wave", cx: "6", cy: "5", r: "2", strokeWidth: "1.8" }), /* @__PURE__ */ jsx("circle", { className: "lq-icon-wave", cx: "6", cy: "19", r: "2", strokeWidth: "1.8" }), /* @__PURE__ */ jsx( "path", { className: "lq-icon-wave", d: "M6 7v10M12 5h2a4 4 0 0 1 4 4v8", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" } ), /* @__PURE__ */ jsx( "path", { className: "lq-icon-wave", d: "m15 14 3 3 3-3", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" } ), /* @__PURE__ */ jsx("path", { className: "lq-icon-wave", d: "m12 2-3 3 3 3", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) ] }), "person.badge.checkmark": /* @__PURE__ */ jsxs(Fragment, { children: [ /* @__PURE__ */ jsx("circle", { className: "lq-icon-wave", cx: "9", cy: "7", r: "3.5", strokeWidth: "1.8" }), /* @__PURE__ */ jsx("path", { className: "lq-icon-wave", d: "M2.8 19a6.2 6.2 0 0 1 9.7-5.1", strokeWidth: "1.8", strokeLinecap: "round" }), /* @__PURE__ */ jsx("circle", { className: "lq-icon-wave", cx: "17", cy: "16.5", r: "4.5", strokeWidth: "1.8" }), /* @__PURE__ */ jsx( "path", { className: "lq-icon-wave", d: "m14.8 16.5 1.4 1.4 3-3", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" } ) ] }), "exclamationmark.triangle": /* @__PURE__ */ jsxs(Fragment, { children: [ /* @__PURE__ */ jsx( "path", { className: "lq-icon-wave", d: "M10.1 4.6 2.8 17.2A2.5 2.5 0 0 0 5 21h14a2.5 2.5 0 0 0 2.2-3.8L13.9 4.6a2.2 2.2 0 0 0-3.8 0Z", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" } ), /* @__PURE__ */ jsx("path", { className: "lq-icon-wave", d: "M12 9v5", strokeWidth: "2", strokeLinecap: "round" }), /* @__PURE__ */ jsx("circle", { className: "lq-icon-glyph", cx: "12", cy: "17.5", r: "1.15" }) ] }), /** calendar — a bound month page with a header rule and date marks. */ calendar: /* @__PURE__ */ jsxs(Fragment, { children: [ /* @__PURE__ */ jsx("rect", { className: "lq-icon-wave", x: "3.5", y: "4.5", width: "17", height: "16", rx: "2.5", strokeWidth: "1.8" }), /* @__PURE__ */ jsx("path", { className: "lq-icon-wave", d: "M7.5 2.5v4M16.5 2.5v4M3.5 9h17", strokeWidth: "1.8", strokeLinecap: "round" }), /* @__PURE__ */ jsx( "path", { className: "lq-icon-wave", d: "M7 13h.01M12 13h.01M17 13h.01M7 17h.01M12 17h.01M17 17h.01", strokeWidth: "2.4", strokeLinecap: "round" } ) ] }), /** circles.row — a page indicator with one selected and three idle dots. */ "circles.row": /* @__PURE__ */ jsxs(Fragment, { children: [ /* @__PURE__ */ jsx("circle", { className: "lq-icon-glyph", cx: "3.75", cy: "12", r: "1.75" }), /* @__PURE__ */ jsx("circle", { className: "lq-icon-wave", cx: "9.25", cy: "12", r: "1.75", strokeWidth: "1.6" }), /* @__PURE__ */ jsx("circle", { className: "lq-icon-wave", cx: "14.75", cy: "12", r: "1.75", strokeWidth: "1.6" }), /* @__PURE__ */ jsx("circle", { className: "lq-icon-wave", cx: "20.25", cy: "12", r: "1.75", strokeWidth: "1.6" }) ] }), /** slider.horizontal.1 — one value track with a single draggable thumb. */ "slider.horizontal.1": /* @__PURE__ */ jsxs(Fragment, { children: [ /* @__PURE__ */ jsx("path", { className: "lq-icon-wave", d: "M3 12h8M17 12h4", strokeWidth: "2", strokeLinecap: "round" }), /* @__PURE__ */ jsx("circle", { className: "lq-icon-wave", cx: "14", cy: "12", r: "3", strokeWidth: "2" }) ] }), /** plus-minus — paired decrement and increment marks for a Stepper. */ "plus-minus": /* @__PURE__ */ jsx("path", { className: "lq-icon-wave", d: "M3.5 12h7M13.5 12h7M17 8.5v7", strokeWidth: "2.2", strokeLinecap: "round" }), /** folder.tabs — one simple tabbed folder for a multi-view tab group. */ "folder.tabs": /* @__PURE__ */ jsx( "path", { className: "lq-icon-wave", d: "M3 8a2 2 0 0 1 2-2h5l2 2h7a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" } ), /** text.t — a plain capital T with a typographic foot. */ "text.t": /* @__PURE__ */ jsx("path", { className: "lq-icon-wave", d: "M5 5h14M12 5v14", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), /** text.editor — a multiline writing surface with distinct text rows. */ "text.editor": /* @__PURE__ */ jsxs(Fragment, { children: [ /* @__PURE__ */ jsx("rect", { className: "lq-icon-wave", x: "3", y: "3", width: "18", height: "18", rx: "3", strokeWidth: "1.8" }), /* @__PURE__ */ jsx("path", { className: "lq-icon-wave", d: "M7 8h10M7 12h10M7 16h6", strokeWidth: "1.8", strokeLinecap: "round" }) ] }), /** password.field — a secure text field represented by masked characters. */ "password.field": /* @__PURE__ */ jsxs(Fragment, { children: [ /* @__PURE__ */ jsx("rect", { className: "lq-icon-wave", x: "3", y: "7", width: "18", height: "10", rx: "2.25", strokeWidth: "1.4" }), /* @__PURE__ */ jsx( "path", { className: "lq-icon-wave", d: "M6.5 10.7v2.6M5.35 11.25l2.3 1.5M7.65 11.25l-2.3 1.5M12 10.7v2.6M10.85 11.25l2.3 1.5M13.15 11.25l-2.3 1.5M17.5 10.7v2.6M16.35 11.25l2.3 1.5M18.65 11.25l-2.3 1.5", strokeWidth: "1.15", strokeLinecap: "square" } ) ] }), /** toggle — a binary switch with its thumb in the on position. */ toggle: /* @__PURE__ */ jsxs(Fragment, { children: [ /* @__PURE__ */ jsx("rect", { className: "lq-icon-wave", x: "3", y: "7", width: "18", height: "10", rx: "5", strokeWidth: "1.8" }), /* @__PURE__ */ jsx("circle", { className: "lq-icon-glyph", cx: "16", cy: "12", r: "3.25" }) ] }), /** thought.bubble — a floating explanatory thought with a dotted tail. */ "thought.bubble": /* @__PURE__ */ jsxs(Fragment, { children: [ /* @__PURE__ */ jsx( "path", { className: "lq-icon-wave", d: "M7.25 16h9.6a3.65 3.65 0 0 0 .55-7.25A5.75 5.75 0 0 0 6.45 10.3 3 3 0 0 0 7.25 16Z", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" } ), /* @__PURE__ */ jsx("circle", { className: "lq-icon-wave", cx: "6", cy: "18.5", r: "1.5", strokeWidth: "1.6" }), /* @__PURE__ */ jsx("circle", { className: "lq-icon-glyph", cx: "3.75", cy: "21", r: "1.15" }) ] }), shield: /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx( "path", { className: "lq-icon-wave", d: "M12 3 20 6v5.8c0 4.7-3.2 7.7-8 9.2-4.8-1.5-8-4.5-8-9.2V6l8-3Z", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" } ) }) }; var ICON_NAMES = Object.keys(ICON_GLYPHS); var Icon = (props) => { const { name, glyph: customGlyph, tint, size: size2, className, ref: forwardedRef, role, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-hidden": ariaHidden } = props; const hasCustomGlyph = customGlyph !== void 0; const glyph = hasCustomGlyph ? customGlyph : ICON_GLYPHS[name] ?? PLACEHOLDER_GLYPH; const dataIcon = hasCustomGlyph ? name ?? "custom" : name; const labelled = ariaLabel !== void 0 || ariaLabelledby !== void 0; return /* @__PURE__ */ jsx( "svg", { ref: forwardedRef, role: role ?? (labelled ? "img" : void 0), "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-hidden": ariaHidden ?? (labelled ? void 0 : true), "data-size": size2, "data-icon": dataIcon, "data-tint": tint, viewBox: "0 0 24 24", className: ["lq-icon", className].filter(Boolean).join(" "), children: glyph } ); }; var key = /* @__PURE__ */ Symbol.for("@liquidify/react/adaptive-layout-context/v1"); var registry = globalThis; registry[key] ??= { layout: createContext(null), bar: createContext(null) }; var AdaptiveLayoutContext = registry[key].layout; var AdaptiveBarContext = registry[key].bar; function AdaptiveLayoutProvider({ controller, children }) { return /* @__PURE__ */ jsx(AdaptiveLayoutContext.Provider, { value: controller, children }); } function useAdaptiveLayoutContext() { return useContext(AdaptiveLayoutContext); } function useAdaptiveLayoutInteraction({ active, target }) { const controller = useAdaptiveLayoutContext(); const bar = useContext(AdaptiveBarContext); const register = controller?.registerInteraction; const resolved = target ?? bar ?? "both"; useEffect(() => { if (active) return register?.(resolved); }, [active, register, resolved]); } // src/shared/resolve-layout-slot.ts function resolveLayoutSlot(slot, layout = null) { return typeof slot === "function" ? slot(layout) : slot; } var placements = ["top", "bottom"]; var targets = (target) => target === "both" ? placements : [target]; function usePresentationState(value, defaultValue, onChange, propName) { const reason = useRef("programmatic"); const previous = useRef(value ?? defaultValue); const [state, setState] = useControllableState({ value, defaultValue, componentName: "AdaptiveAppLayout", propName, onChange: (next) => onChange?.(next, { previous: previous.current, current: next, reason: reason.current }) }); const stateRef = useRef(state); stateRef.current = state; const request = useCallback( (next, why = "programmatic") => { reason.current = why; previous.current = stateRef.current; setState(next); if (value === void 0) stateRef.current = next; }, [setState, value] ); const getState = useCallback(() => stateRef.current, []); return { state, request, getState }; } function useAdaptiveAppLayout(options) { const top = usePresentationState( options.topBar?.state, options.topBar?.defaultState ?? "expanded", options.topBar?.onStateChange, "topBar.state" ); const bottom = usePresentationState( options.bottomBar?.state, options.bottomBar?.defaultState ?? "expanded", options.bottomBar?.onStateChange, "bottomBar.state" ); const sidebar = usePresentationState( options.sidebarOpen, options.defaultSidebarOpen ?? true, options.onSidebarOpenChange, "sidebarOpen" ); const mounted = useRef(false); useLayoutEffect(() => { mounted.current = true; return () => { mounted.current = false; }; }, []); const [compactLayout, setCompactLayout] = useState(false); const compact = useRef(false); const bars = useRef({ top: null, bottom: null }); const sidebarElement = useRef(null); const focusWithin = useRef({ top: false, bottom: false, sidebar: false }); const regions = useRef({ top: /* @__PURE__ */ new Set(), bottom: /* @__PURE__ */ new Set() }); const interactions = useRef({ top: /* @__PURE__ */ new Set(), bottom: /* @__PURE__ */ new Set() }); const pointers = useRef({ top: /* @__PURE__ */ new Set(), bottom: /* @__PURE__ */ new Set() }); const composing = useRef({ top: false, bottom: false }); const travel = useRef({ top: 0, bottom: 0 }); const last = useRef(0); const latest = useRef({ options, top, bottom, sidebar }); latest.current = { options, top, bottom, sidebar }; const pending = useRef({}); const requestBarState = useCallback( (target, next, reason = "programmatic") => { travel.current[target] = 0; const channel2 = latest.current[target]; if (channel2.getState() === next) return; pending.current[target] = { value: next, reason }; channel2.request(next, reason); }, [] ); const setSidebarOpen = useCallback((open, reason = "programmatic") => { if (latest.current.sidebar.getState() === open) return; pending.current.sidebar = { value: open, reason }; latest.current.sidebar.request(open, reason); }, []); const expand = useCallback( (target = "both") => { for (const placement of targets(target)) requestBarState(placement, "expanded", "expand"); }, [requestBarState] ); const committed = useRef({ top: top.state, bottom: bottom.state, sidebar: sidebar.state }); useLayoutEffect(() => { for (const target of [...placements, "sidebar"]) { const current = target === "sidebar" ? sidebar.state : target === "top" ? top.state : bottom.state; const previous = committed.current[target]; if (previous === current) continue; const request = pending.current[target]; const isControlled = target === "sidebar" ? options.sidebarOpen !== void 0 : target === "top" ? options.topBar?.state !== void 0 : options.bottomBar?.state !== void 0; const reason = !isControlled && request?.value === current ? request.reason : "controlled"; delete pending.current[target]; const element = target === "sidebar" ? sidebarElement.current : bars.current[target]; if ((current === "hidden" || current === false) && (element?.contains(document.activeElement) || focusWithin.current[target] && document.activeElement === document.body)) { focusWithin.current[target] = false; options.scrollRef.current?.focus({ preventScroll: true }); } if (target === "sidebar") { committed.current.sidebar = current; options.onPresentationChange?.({ target, previous, current, reason }); } else { committed.current[target] = current; options.onPresentationChange?.({ target, previous, current, reason }); } } }, [ top.state, bottom.state, sidebar.state, options.scrollRef, options.onPresentationChange, options.sidebarOpen, options.topBar?.state, options.bottomBar?.state ]); const reset = useCallback( (target, reason) => { last.current = Math.max(0, latest.current.options.scrollRef.current?.scrollTop ?? 0); for (const placement of targets(target)) requestBarState(placement, "expanded", reason); }, [requestBarState] ); const registerInteraction = useCallback( (target) => { const token = /* @__PURE__ */ Symbol(); for (const placement of targets(target)) interactions.current[placement].add(token); reset(target, "configuration"); return () => { for (const placement of targets(target)) { interactions.current[placement].delete(token); travel.current[placement] = 0; } }; }, [reset] ); const registerRegion = useCallback( (target, element) => { regions.current[target].add(element); return () => { regions.current[target].delete(element); queueMicrotask(() => { if (mounted.current && !regions.current[target].size) requestBarState(target, "expanded", "configuration"); }); }; }, [requestBarState] ); const configuration = useRef({ top: options.topBar, bottom: options.bottomBar, behavior: options.scrollBehavior }); useLayoutEffect(() => { const old = configuration.current; for (const target of placements) { const next = options[target === "top" ? "topBar" : "bottomBar"]; const prev = old[target]; if (prev?.resetKey !== next?.resetKey) reset(target, "navigation"); else if (old.behavior !== options.scrollBehavior || prev?.scrollBehavior !== next?.scrollBehavior || prev?.wide !== next?.wide || prev?.suspended !== next?.suspended) reset(target, "configuration"); } configuration.current = { top: options.topBar, bottom: options.bottomBar, behavior: options.scrollBehavior }; }); useLayoutEffect(() => { const root = options.rootRef.current; const scroll = options.scrollRef.current; if (!root || !scroll) return; let measured = false; let wasScrollable = false; const measure = () => { const fontSize = Number.parseFloat(getComputedStyle(document.documentElement).fontSize) || 16; const next = root.getBoundingClientRect().width < 48 * fontSize; if (compact.current !== next) { const focused = document.activeElement; compact.current = next; setCompactLayout(next); if (measured) reset("both", "resize"); if (focused instanceof HTMLElement && root.contains(focused) && !focused.getClientRects().length) scroll.focus({ preventScroll: true }); } const scrollable = scroll.scrollHeight - scroll.clientHeight > 32; if (measured && wasScrollable && !scrollable) reset("both", "resize"); wasScrollable = scrollable; measured = true; }; const observer = new ResizeObserver(measure); observer.observe(root); observer.observe(scroll); let content = null; const observeContent = () => { if (content) observer.unobserve(content); content = scroll.firstElementChild; if (content) observer.observe(content); measure(); }; observeContent(); const mutation = new MutationObserver(observeContent); mutation.observe(scroll, { childList: true }); const release = (event) => { for (const target of placements) pointers.current[target].delete(event.pointerId); }; const cancel = () => { for (const target of placements) { pointers.current[target].clear(); composing.current[target] = false; travel.current[target] = 0; } }; document.addEventListener("pointerup", release, true); document.addEventListener("pointercancel", release, true); window.addEventListener("blur", cancel); return () => { observer.disconnect(); mutation.disconnect(); document.removeEventListener("pointerup", release, true); document.removeEventListener("pointercancel", release, true); window.removeEventListener("blur", cancel); }; }, [options.rootRef, options.scrollRef, reset]); const onScroll = useCallback( (event) => { if (event.target !== event.currentTarget) return; const element = event.currentTarget; const max = Math.max(0, element.scrollHeight - element.clientHeight); const y = Math.max(0, Math.min(element.scrollTop, max)); const delta = y - last.current; last.current = y; for (const target of placements) { const config = latest.current.options[target === "top" ? "topBar" : "bottomBar"]; const behavior = config?.scrollBehavior ?? latest.current.options.scrollBehavior ?? "pinned"; if (behavior === "pinned") continue; const engaged = config?.suspended || interactions.current[target].size || pointers.current[target].size || composing.current[target] || bars.current[target]?.contains(document.activeElement) || sidebarElement.current?.contains(document.activeElement); if (engaged) { travel.current[target] = 0; continue; } if (y < 32 || behavior === "hide" && max - y <= 1) { requestBarState(target, "expanded", "scroll"); continue; } if (behavior === "minimize" && !compact.current && !config?.wide) continue; if (!delta) continue; travel.current[target] = Math.sign(delta) === Math.sign(travel.current[target]) ? travel.current[target] + delta : delta; if (travel.current[target] > 48) { if (behavior === "minimize" && ![...regions.current[target]].some((node) => node.getClientRects().length > 0)) { travel.current[target] = 0; continue; } requestBarState(target, behavior === "hide" ? "hidden" : "minimized", "scroll"); } else if (travel.current[target] < -16) requestBarState(target, "expanded", "scroll"); } }, [requestBarState] ); function getRootProps(props = {}) { return { ...props, ref: mergeRefs((node) => { options.rootRef.current = node; }, props.ref), onKeyDownCapture: (event) => { props.onKeyDownCapture?.(event); if (event.key === "Tab" && !event.defaultPrevented) { for (const target of placements) { if (latest.current[target].state === "hidden") requestBarState(target, "expanded", "focus"); } } } }; } function getScrollProps(props = {}) { return { ...props, ref: mergeRefs(options.scrollRef, props.ref), tabIndex: props.tabIndex ?? 0, onScroll: (event) => { props.onScroll?.(event); if (!event.defaultPrevented) onScroll(event); } }; } function getBarProps(target, props = {}) { return { ...props, ref: mergeRefs((node) => { bars.current[target] = node; }, props.ref), inert: latest.current[target].state === "hidden" || props.inert, onFocus: (event) => { focusWithin.current[target] = true; props.onFocus?.(event); if (!event.defaultPrevented && !(latest.current[target].state === "minimized" && event.target.closest("[data-bar-expand]"))) requestBarState(target, "expanded", "focus"); }, onBlur: (event) => { props.onBlur?.(event); if (event.relatedTarget && !event.currentTarget.contains(event.relatedTarget)) focusWithin.current[target] = false; }, onPointerDownCapture: (event) => { props.onPointerDownCapture?.(event); if (!event.defaultPrevented) pointers.current[target].add(event.pointerId); }, onCompositionStartCapture: (event) => { props.onCompositionStartCapture?.(event); composing.current[target] = true; }, onCompositionEndCapture: (event) => { props.onCompositionEndCapture?.(event); composing.current[target] = false; travel.current[target] = 0; } }; } function getSidebarProps(props = {}) { return { ...props, inert: !sidebar.state || props.inert, ref: mergeRefs((node) => { sidebarElement.current = node; }, props.ref), onFocus: (event) => { focusWithin.current.sidebar = true; props.onFocus?.(event); if (!event.defaultPrevented) reset("both", "focus"); }, onBlur: (event) => { props.onBlur?.(event); if (event.relatedTarget && !event.currentTarget.contains(event.relatedTarget)) focusWithin.current.sidebar = false; } }; } return { topBarState: top.state, bottomBarState: bottom.state, sidebarOpen: sidebar.state, compactLayout, requestBarState, setSidebarOpen, expand, registerInteraction, registerRegion, getRootProps, getScrollProps, getBarProps, getSidebarProps }; } function BarLayout({ ref, start, center, end, sidebar, gap = "compact", shouldShrink = true, shouldGrow = false, visualDebug = false, className = "", ...props }) { const [root, rootRef] = useForwardedRef(ref); const layout = useAdaptiveLayoutContext(); const startRef = useRef(null); const endRef = useRef(null); const startContent = resolveLayoutSlot(start, layout); const centerContent = resolveLayoutSlot(center, layout); const endContent = resolveLayoutSlot(end, layout); const sidebarContent = resolveLayoutSlot(sidebar, layout); const hasStart = Children.toArray(startContent).length > 0; const hasCenter = Children.toArray(centerContent).length > 0; const hasEnd = Children.toArray(endContent).length > 0; const hasSidebar = Children.toArray(sidebarContent).length > 0; useLayoutEffect(() => { const node = root.current; if (!node) return; const measure = () => { node.style.setProperty("--bar-start-size", `${startRef.current?.getBoundingClientRect().width ?? 0}px`); node.style.setProperty("--bar-end-size", `${endRef.current?.getBoundingClientRect().width ?? 0}px`); }; measure(); const observer = new ResizeObserver(measure); if (hasStart && startRef.current) observer.observe(startRef.current); if (hasEnd && endRef.current) observer.observe(endRef.current); return () => observer.disconnect(); }, [root, hasStart, hasEnd]); return /* @__PURE__ */ jsxs( "div", { ...props, ref: rootRef, className: `lq-bar-layout ${className}`, "data-center": hasCenter, "data-gap": gap, "data-start": hasStart, "data-end": hasEnd, "data-shrink": shouldShrink, "data-grow": shouldGrow, "data-lq-visual-debug": visualDebug || void 0, children: [ hasStart && /* @__PURE__ */ jsx("div", { className: "lq-bar-layout-side lq-bar-layout-start", children: /* @__PURE__ */ jsx("div", { ref: startRef, className: "lq-bar-layout-items", children: startContent }) }), hasCenter && /* @__PURE__ */ jsx("div", { className: "lq-bar-layout-center", children: centerContent }), hasEnd && /* @__PURE__ */ jsx("div", { className: "lq-bar-layout-side lq-bar-layout-end", children: /* @__PURE__ */ jsx("div", { ref: endRef, className: "lq-bar-layout-items", children: endContent }) }), hasSidebar && /* @__PURE__ */ jsx("div", { className: "lq-bar-layout-sidebar", children: sidebarContent }) ] } ); } function AppBar({ placement, slots, gap = "compact", ref, className = "", ...props }) { const Element = placement === "top" ? "header" : "footer"; return /* @__PURE__ */ jsx(AdaptiveBarContext.Provider, { value: placement, children: /* @__PURE__ */ jsx(Element, { ...props, ref, className: `lq-adaptive-bar ${className}`, children: /* @__PURE__ */ jsx( BarLayout, { gap: slots.gap ?? gap, start: slots.start, center: slots.center, end: slots.end, sidebar: slots.sidebar, shouldShrink: slots.shouldShrink, shouldGrow: slots.shouldGrow ?? true, className: placement === "bottom" ? "lq-adaptive-bottom-bar" : void 0 } ) }) }); } var contextKey = /* @__PURE__ */ Symbol.for("@liquidify/react/control-group-context/v1"); var contextRegistry = globalThis; contextRegistry[contextKey] ??= createContext(null); var ControlGroupContext = contextRegistry[contextKey]; var useControlGroup = () => useContext(ControlGroupContext); var PressableContent = ({ className, leadingIcon, trailingIcon, children }) => /* @__PURE__ */ jsxs("span", { className: ["lq-pressable-content", className].filter(Boolean).join(" "), children: [ leadingIcon, children, trailingIcon ] }); var hasLabel = (children) => children !== void 0 && children !== null && children !== false && children !== ""; var PressableSurface = ({ as, asChild = false, className, contentClassName, leadingIcon, trailingIcon, prefix, children, ref, ...rest }) => { const mergedClassName = ["lq-pressable-surface", className].filter(Boolean).join(" "); if (asChild) { return /* @__PURE__ */ jsx(Slot, { ...rest, ref, className: mergedClassName, children }); } const iconOnly = !hasLabel(children) && (leadingIcon !== void 0 || trailingIcon !== void 0); const Root = as ?? "button"; return /* @__PURE__ */ jsxs(Root, { ...rest, ref, "data-icon-only": iconOnly || void 0, className: mergedClassName, children: [ prefix, /* @__PURE__ */ jsx(PressableContent, { className: contentClassName, leadingIcon, trailingIcon, children }) ] }); }; var Button = ({ children, variant: variantProp, role, size: sizeProp, tint: tintProp, disabled: disabledProp = false, loading = false, onClick, onPress, className, asChild = false, as = "button", href, target, ref: forwardedRef, leadingIcon, trailingIcon, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...rest }) => { const isNativeButton = !asChild && as === "button"; const group = useControlGroup(); const variant = variantProp ?? (group ? "plain" : "automatic"); const size2 = sizeProp ?? group?.size ?? "regular"; const tint = tintProp ?? group?.tint; const disabled = disabledProp || (group?.disabled ?? false); const morphRef = useGlassMorphSurface( forwardedRef, variant === "glassProminent" || variant === "borderedProminent" || variant === "translucent" ); const { props: { className: glassClassName, ...glassAttrs } } = useGlass({ className, // Idle interactive control → ground on the tighter "idle" elevation // (--lq-shadow-interactive-idle → ambient-1) instead of the engine default // (ambient-2). Overrides ONLY the elevation arm of the glass box-shadow // composite; the specular highlight and inset rim are untouched. The // value is a var() token, so the override stays ADR-0003 clean. style: { "--lq-glass-elevation": "var(--lq-shadow-interactive-idle)" } }); const handleClick = (event) => { if (disabled || loading) { event.preventDefault(); return; } onClick?.(event); if (event.defaultPrevented) return; if (variant === "glass" || variant === "glassProminent") { const el = event.currentTarget; el.removeAttribute("data-pop"); el.getBoundingClientRect(); el.setAttribute("data-pop", ""); } onPress?.(); }; const mergedClassName = ["lq-button", glassClassName].filter(Boolean).join(" "); return /* @__PURE__ */ jsx(GlassMorphBoundary, { children: /* @__PURE__ */ jsx( PressableSurface, { ...glassAttrs, ...nativeAttributes(rest), as, href: as === "a" ? href : void 0, target: as === "a" ? target : void 0, asChild, ref: morphRef, type: isNativeButton ? rest.type ?? "button" : void 0, "data-variant": variant, "data-role": role, "data-size": size2, "data-tint": tint, "data-disabled": disabled || void 0, disabled: isNativeButton ? disabled : void 0, "aria-disabled": !isNativeButton && disabled ? true : void 0, "aria-busy": loading || void 0, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, onClick: handleClick, className: mergedClassName, contentClassName: "lq-button-content", leadingIcon, trailingIcon, prefix: !asChild && loading ? /* @__PURE__ */ jsx("span", { "data-spinner": true, role: "status", "aria-label": "Loading" }) : void 0, children } ) }); }; function MinimizableBarRegion({ ref, mode = "layout", placement: placementProp, minimized: minimizedProp, defaultMinimized, onMinimizedChange, animated = true, trigger: renderTrigger, onExpandAutoFocus, items, expandLabel, compactLabel, compactIcon, className = "", grow = false }) { const layout = useAdaptiveLayoutContext(); const contextPlacement = useContext(AdaptiveBarContext); const placement = placementProp ?? contextPlacement ?? "bottom"; const followsLayout = mode === "layout" && layout !== null && minimizedProp === void 0 && defaultMinimized === void 0; const [localMinimized, setMinimized] = useControllableState({ value: minimizedProp, defaultValue: defaultMinimized ?? false, onChange: onMinimizedChange, componentName: "MinimizableBarRegion", propName: "minimized" }); const minimized = (followsLayout ? layout[placement === "top" ? "topBarState" : "bottomBarState"] === "minimized" : localMinimized) && items.length > 0; const expand = () => { if (followsLayout) { layout.expand(placement); } else setMinimized(false); }; const register = followsLayout ? layout.registerRegion : void 0; const id = useId(); const [root, rootRef] = useForwardedRef(ref); const trigger = useRef(null); const restoreFocus = useRef(false); const [spacing, setSpacing] = useState(0); const hasItems = items.length > 0; useLayoutEffect(() => { if (hasItems && root.current) return register?.(placement, root.current); }, [register, hasItems, placement, root]); useLayoutEffect(() => { const group = root.current; const expanded = group?.querySelector("[data-bar-expanded]"); if (!group || !expanded || minimized) return; const reserve = () => { const bounds = expanded.getBoundingClientRect(); if (!bounds.height || !bounds.width) return; setSpacing(Number.parseFloat(getComputedStyle(expanded).columnGap) || 0); group.style.minHeight = `${bounds.height}px`; if (!grow) group.style.minWidth = `${bounds.width}px`; }; reserve(); const observer = new ResizeObserver(reserve); observer.observe(expanded); return () => observer.disconnect(); }, [grow, minimized, root]); useLayoutEffect(() => { if (minimized || !restoreFocus.current) return; restoreFocus.current = false; const event = new Event("expandAutoFocus", { cancelable: true }); onExpandAutoFocus?.(event); if (event.defaultPrevented) return; const expanded = root.current?.querySelector("[data-bar-expanded]"); const candidates = expanded?.querySelectorAll( '[aria-current="page"], [aria-selected="true"], input:not(:disabled), button:not(:disabled), a[href], [tabindex="0"]' ); const visible = [...candidates ?? []].filter((node) => !node.closest("[inert], [hidden], [aria-hidden='true']")); const selected = visible.find((node) => node.matches('[aria-current="page"], [aria-selected="true"]')); (selected ?? visible[0])?.focus({ preventScroll: true }); }, [minimized, onExpandAutoFocus, root]); const triggerProps = { ref: trigger, variant: "glass", leadingIcon: compactIcon, "aria-label": expandLabel, "aria-expanded": false, "aria-controls": id, onPress: () => { restoreFocus.current = document.activeElement === trigger.current; expand(); }, children: compactLabel ?? (compactIcon ? void 0 : expandLabel) }; return /* @__PURE__ */ jsxs( GlassMorphGroup, { ref: rootRef, materialComponent: GlassPrimitive, animated, transitionKey: minimized, spacing, className: `lq-adaptive-morph ${className}`, "data-minimized": minimized, "data-grow": grow, "data-bar-minimizable": hasItems || void 0, children: [ /* @__PURE__ */ jsx("div", { id, "data-bar-expanded": true, className: "lq-adaptive-morph-expanded", children: items.map((item) => /* @__PURE__ */ jsx(GlassMorphItem, { morphId: `item:${item.id}`, sourceId: "compact", present: !minimized, keepMounted: true, children: item.content }, item.id)) }), /* @__PURE__ */ jsx( GlassMorphItem, { morphId: "compact", sourceId: items[0] ? `item:${items[0].id}` : void 0, present: minimized, keepMounted: true, children: /* @__PURE__ */ jsx("div", { "data-bar-expand": true, children: renderTrigger ? renderTrigger(triggerProps) : /* @__PURE__ */ jsx(Button, { ...triggerProps }) }) } ) ] } ); } function AdaptiveAppLayout({ appName, title, navigation, sidebar, showSidebar = sidebar != null || navigation != null, sidebarTitle, sidebarToggle, sidebarToggleLabels, sidebarProps, sidebarContentProps, contentProps, contentInset = "automatic", separation = "regular", gap = "compact", showCompactNavigation = true, compactNavigation, children, leading, actions, topBar, bottomBar, sidebarFooter, visualDebug = false, scrollBehavior = "pinned", sidebarOpen, defaultSidebarOpen, onSidebarOpenChange, onPresentationChange, skipLinkLabel = "Skip to content", ref, className = "", ...rootProps }) { const id = useId(); const [root, rootRef] = useForwardedRef(ref); const scrollRef = useRef(null); const layout = useAdaptiveAppLayout({ rootRef: root, scrollRef, scrollBehavior, topBar: topBar ?? void 0, bottomBar: bottomBar ?? void 0, sidebarOpen, defaultSidebarOpen, onSidebarOpenChange, onPresentationChange }); useLayoutEffect(() => { const element = root.current; if (!element) return; const top = element.querySelector(":scope > .lq-adaptive-toolbar"); const bottom = element.querySelector(":scope > .lq-adaptive-navigation"); const measure = () => { element.style.setProperty("--app-measured-top", `${top?.offsetHeight ?? 0}px`); element.style.setProperty("--app-measured-bottom", `${bottom?.offsetHeight ?? 0}px`); }; measure(); const observer = typeof ResizeObserver === "undefined" ? void 0 : new ResizeObserver(measure); observer?.observe(element); if (top) observer?.observe(top); if (bottom) observer?.observe(bottom); return () => observer?.disconnect(); }); const resolve = (slot) => resolveLayoutSlot(slot, layout); const sidebarContent = resolve(sidebar); const nav = resolve(navigation); const sidebarHidden = !layout.sidebarOpen; const mobileNavigation = nav == null ? null : /* @__PURE__ */ jsx(GlassPrimitive, { className: "lq-adaptive-mobile-surface", children: /* @__PURE__ */ jsx("div", { className: "lq-adaptive-mobile-navigation", children: nav }) }); const defaultToggle = /* @__PURE__ */ jsx( Button, { className: "lq-adaptive-sidebar-toggle", variant: "glass", leadingIcon: /* @__PURE__ */ jsx(Icon, { name: "rectangle.split.2x1" }), "aria-label": sidebarHidden ? sidebarToggleLabels?.show ?? "Show sidebar" : sidebarToggleLabels?.hide ?? "Hide sidebar", "aria-expanded": !sidebarHidden, "aria-controls": `${id}-primary`, onPress: () => layout.setSidebarOpen(sidebarHidden, "toggle") } ); const contentId = contentProps?.id ?? `${id}-content`; return /* @__PURE__ */ jsx(AdaptiveLayoutProvider, { controller: layout, children: /* @__PURE__ */ jsxs( "div", { ...layout.getRootProps(rootProps), ref: rootRef, className: `lq-adaptive-app ${className}`, "data-content-inset": contentInset, "data-separation": separation, "data-gap": gap, "data-top-gap": topBar?.gap ?? gap, "data-lq-visual-debug": visualDebug || void 0, "data-scroll-behavior": scrollBehavior, "data-top-state": layout.topBarState, "data-bottom-state": layout.bottomBarState, "data-collapsed": layout.topBarState === "hidden" && layout.bottomBarState === "hidden", "data-scroll-state": layout.bottomBarState, "data-scroll-layout": layout.compactLayout ? "compact" : "wide", "data-sidebar-hidden": sidebarHidden, "data-sidebar-enabled": showSidebar, "data-sidebar-title": !sidebarHidden && !!sidebarTitle || void 0, "data-compact-navigation": showCompactNavigation, "data-top-bar": topBar !== null, "data-bottom-bar": bottomBar !== null, children: [ /* @__PURE__ */ jsx("a", { className: "lq-adaptive-skip", href: `#${contentId}`, children: skipLinkLabel }), /* @__PURE__ */ jsx( "main", { ...layout.getScrollProps(contentProps), id: contentId, className: `lq-adaptive-content ${contentProps?.className ?? ""}`, "aria-label": contentProps?.["aria-label"] ?? title, children } ), topBar !== null && /* @__PURE__ */ jsx( AppBar, { ...layout.getBarProps("top", { "aria-label": "Top bar", ...topBar?.props }), placement: "top", className: `lq-adaptive-toolbar ${topBar?.props?.className ?? ""}`, gap, slots: { ...topBar, start: topBar?.start !== void 0 ? topBar.start : /* @__PURE__ */ jsxs("div", { className: "lq-adaptive-toolbar-leading", children: [ resolve(leading), /* @__PURE__ */ jsx("span", { className: "lq-adaptive-toolbar-title", children: title }) ] }), end: topBar?.end !== void 0 ? topBar.end : /* @__PURE__ */ jsx("div", { className: "lq-adaptive-actions", children: resolve(actions) }) } } ), bottomBar !== null && /* @__PURE__ */ jsx( AppBar, { ...layout.getBarProps("bottom", { "aria-label": "Bottom bar", ...bottomBar?.props }), placement: "bottom", id: bottomBar?.props?.id ?? `${id}-navigation`, className: `lq-adaptive-navigation ${bottomBar?.props?.className ?? ""}`, gap, "data-navigation-only": bottomBar?.center === void 0 && !bottomBar?.start && !bottomBar?.end && !bottomBar?.sidebar || void 0, slots: { ...bottomBar, center: bottomBar?.center !== void 0 ? bottomBar.center : showCompactNavigation && mobileNavigation ? /* @__PURE__ */ jsx( MinimizableBarRegion, { className: "lq-adaptive-mobile-region", grow: true, expandLabel: "Expand navigation", compactLabel: compactNavigation?.label ?? "Navigation", compactIcon: compactNavigation?.icon, items: [{ id: "navigation", content: mobileNavigation }] } ) : mobileNavigation } } ), showSidebar && /* @__PURE__ */ jsxs( "aside", { ...sidebarProps, className: `lq-adaptive-navigation-stack ${sidebarProps?.className ?? ""}`, "aria-label": sidebarProps?.["aria-label"] ?? "App sidebar", children: [ /* @__PURE__ */ jsxs( "div", { className: "lq-adaptive-sidebar-controls", onFocus: () => layout.requestBarState("top", "expanded", "focus"), children: [ sidebarToggle === void 0 ? defaultToggle : resolve(sidebarToggle), !sidebarHidden && sidebarTitle && /* @__PURE__ */ jsx(Text, { className: "lq-adaptive-sidebar-title", variant: "headline", wrap: "nowrap", children: sidebarTitle }) ] } ), /* @__PURE__ */ jsx( GlassPrimitive, { className: "lq-adaptive-navigation-surface", "data-custom-sidebar": sidebarContent != null && typeof sidebarContent !== "boolean" || void 0, children: /* @__PURE__ */ jsxs( "div", { ...layout.getSidebarProps(sidebarContentProps), id: `${id}-primary`, className: `lq-adaptive-primary ${sidebarContentProps?.className ?? ""}`, inert: sidebarHidden, children: [ sidebarContent != null && typeof sidebarContent !== "boolean" && /* @__PURE__ */ jsx("div", { className: "lq-adaptive-desktop-sidebar", inert: sidebarHidden, children: sidebarContent }), /* @__PURE__ */ jsxs("div", { className: "lq-adaptive-default-navigation", children: [ /* @__PURE__ */ jsx("div", { className: "lq-adaptive-sidebar-heading", children: appName }), nav, sidebarFooter && /* @__PURE__ */ jsx("div", { className: "lq-adaptive-sidebar-footer", children: resolve(sidebarFooter) }) ] }) ] } ) } ) ] } ) ] } ) }); } var ModalSlotContext = createContext(null); var Modal = ({ children, material, perf, className, ref, size: size2 = "dynamic", "aria-label": ariaLabel }) => { const headerId = useId(); const bodyId = useId(); let hasHeader = false; let hasBody = false; for (const child of Children.toArray(children)) { if (!isValidElement(child)) continue; if (child.type === ModalHeader) hasHeader = true; else if (child.type === ModalBody) hasBody = true; } return /* @__PURE__ */ jsx( GlassPrimitive, { ref, material, perf, className: ["lq-modal", className].filter(Boolean).join(" "), "data-size": size2, role: "dialog", "aria-modal": "true", "aria-label": ariaLabel, "aria-labelledby": hasHeader ? headerId : void 0, "aria-describedby": hasBody ? bodyId : void 0, tabIndex: -1, children: /* @__PURE__ */ jsx(ModalSlotContext.Provider, { value: { headerId, bodyId }, children }) } ); }; var ModalHeader = ({ className, children, ...rest }) => { const ids = useContext(ModalSlotContext); return /* @__PURE__ */ jsx("div", { id: ids?.headerId, className: ["lq-modal-header", className].filter(Boolean).join(" "), ...rest, children }); }; var ModalBody = ({ className, children, ...rest }) => { const ids = useContext(ModalSlotContext); return /* @__PURE__ */ jsx("div", { id: ids?.bodyId, className: ["lq-modal-body", className].filter(Boolean).join(" "), ...rest, children }); }; var ModalFooter = ({ className, children, ...rest }) => /* @__PURE__ */ jsx("div", { className: ["lq-modal-footer", className].filter(Boolean).join(" "), ...rest, children }); Modal.Header = ModalHeader; Modal.Body = ModalBody; Modal.Footer = ModalFooter; // src/shared/hide-others.ts var hiddenEntries = /* @__PURE__ */ new Map(); var liveOwners = /* @__PURE__ */ new Set(); var hideOthers = (except) => { const held = []; const owner = { except, held }; liveOwners.add(owner); const exemptRoots = /* @__PURE__ */ new Set(); for (const live of liveOwners) exemptRoots.add(live.except); const targets2 = []; const collect = (el) => { if (exemptRoots.has(el)) return; targets2.push(el); for (const child of Array.from(el.children)) collect(child); }; for (const el of Array.from(document.body.children)) collect(el); for (const el of targets2) { const entry = hiddenEntries.get(el); if (entry === void 0) { hiddenEntries.set(el, { count: 1, snapshot: { inert: el.hasAttribute("inert"), inertProp: el.inert === true, ariaHidden: el.getAttribute("aria-hidden") } }); el.setAttribute("inert", ""); el.inert = true; el.setAttribute("aria-hidden", "true"); } else { entry.count += 1; } held.push(el); } let released = false; return () => { if (released) return; released = true; liveOwners.delete(owner); for (const el of held) { const entry = hiddenEntries.get(el); if (entry === void 0) continue; entry.count -= 1; if (entry.count > 0) continue; hiddenEntries.delete(el); if (entry.snapshot.inert) el.setAttribute("inert", ""); else el.removeAttribute("inert"); el.inert = entry.snapshot.inertProp; if (entry.snapshot.ariaHidden === null) el.removeAttribute("aria-hidden"); else el.setAttribute("aria-hidden", entry.snapshot.ariaHidden); } }; }; var FOCUSABLE_SELECTOR = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'; var focusableWithin = (root) => Array.from(root.querySelectorAll(FOCUSABLE_SELECTOR)); var Overlay = ({ open, defaultOpen = false, onOpenChange, dismissible = true, className, children }) => { const isControlled = open !== void 0; const [internalOpen, setInternalOpen] = useState(defaultOpen); const resolvedOpen = isControlled ? open : internalOpen; const [exiting, setExiting] = useState(false); const [wasOpen, setWasOpen] = useState(resolvedOpen); if (wasOpen !== resolvedOpen) { const canAnimate2 = typeof window !== "undefined" && typeof window.matchMedia === "function" && !window.matchMedia("(prefers-reduced-motion: reduce)").matches; setExiting(!resolvedOpen && canAnimate2); setWasOpen(resolvedOpen); } const rootRef = useRef(null); const panelRef = useRef(null); const restoreRef = useRef(null); const isServer = useSyncExternalStore( () => () => { }, () => false, () => true ); const theme = useThemeContext(); const themeScheme = theme === null ? void 0 : theme.type === "system" ? "light dark" : theme.type; const setRoot = useCallback( (el) => { rootRef.current = el; if (el === null) return; if (themeScheme !== void 0) el.style.setProperty("color-scheme", themeScheme); else el.style.removeProperty("color-scheme"); }, [themeScheme] ); const setOpen = useCallback( (next) => { if (!isControlled) setInternalOpen(next); onOpenChange?.(next); }, [isControlled, onOpenChange] ); useEffect(() => { if (!resolvedOpen) return; restoreRef.current = document.activeElement; const root = rootRef.current; const release = root === null ? void 0 : hideOthers(root); const panel = panelRef.current; if (panel !== null) { const focusables = focusableWithin(panel); (focusables[0] ?? panel).focus(); } return () => { release?.(); restoreRef.current?.focus?.(); }; }, [resolvedOpen]); useEffect(() => { if (!resolvedOpen) return; const onPointerDown = (e) => { if (!dismissible) return; const panel = panelRef.current; if (panel?.contains(e.target)) return; setOpen(false); }; document.addEventListener("pointerdown", onPointerDown); return () => document.removeEventListener("pointerdown", onPointerDown); }, [resolvedOpen, dismissible, setOpen]); useEffect(() => { if (!resolvedOpen) return; const onKeyDown = (e) => { if (e.key === "Escape") { e.preventDefault(); if (dismissible) setOpen(false); return; } if (e.key !== "Tab") return; const panel = panelRef.current; if (panel === null) return; const f = focusableWithin(panel); const first = f[0]; if (first === void 0) { e.preventDefault(); return; } const last = f[f.length - 1] ?? first; const active = document.activeElement; if (e.shiftKey && active === first) { e.preventDefault(); last.focus(); } else if (!e.shiftKey && active === last) { e.preventDefault(); first.focus(); } }; document.addEventListener("keydown", onKeyDown); return () => document.removeEventListener("keydown", onKeyDown); }, [resolvedOpen, dismissible, setOpen]); const onPanelAnimationEnd = (e) => { if (e.target === panelRef.current && !resolvedOpen) setExiting(false); }; if (!resolvedOpen && !exiting) return null; const node = /* @__PURE__ */ jsxs( "div", { ref: setRoot, className: ["lq-overlay", className].filter(Boolean).join(" "), "data-state": resolvedOpen ? "open" : "closed", children: [ /* @__PURE__ */ jsx("div", { className: "lq-overlay-scrim", "aria-hidden": "true" }), /* @__PURE__ */ jsx("div", { ref: panelRef, className: "lq-overlay-panel", tabIndex: -1, onAnimationEnd: onPanelAnimationEnd, children }) ] } ); return !isServer && typeof document !== "undefined" ? createPortal(node, document.body) : node; }; var Alert = ({ title, message, actions, children, labelProps, messageProps, open, defaultOpen = false, onOpenChange, dismissible, material, perf, className, ref }) => { const [resolvedOpen, setOpen] = useControllableState({ value: open, defaultValue: defaultOpen, onChange: onOpenChange, componentName: "Alert", propName: "open" }); const resolvedActions = resolveCollection(actions, "Alert"); if (process.env.NODE_ENV !== "production") { if (resolvedActions.length === 0) { const { error: reportEmptyActions } = console; reportEmptyActions( "[Alert] `actions` is empty \u2014 an alert needs at least one action so it always has a dismiss path." ); } else if (dismissible === false && !resolvedActions.some((action) => !action.disabled)) { const { error: reportNoDismissPath } = console; reportNoDismissPath( "[Alert] `dismissible={false}` with no enabled action leaves no dismiss path \u2014 the modal would trap focus with no escape. Provide at least one enabled action." ); } } const layout = resolvedActions.length === 2 ? "row" : "stack"; return /* @__PURE__ */ jsx(Overlay, { open: resolvedOpen, onOpenChange: setOpen, dismissible, children: /* @__PURE__ */ jsxs( Modal, { ref, size: "small", material: material ?? "frosted", perf, className: ["lq-alert", className].filter(Boolean).join(" "), children: [ /* @__PURE__ */ jsx(Modal.Header, { className: "lq-alert-header", children: message !== void 0 ? /* @__PURE__ */ jsx(TextLabel, { variant: "title3", weight: "bold", color: "primary", ...labelProps, children: title }) : ( // Title-only alert: the title carries the message role, so it takes // the body style (body size, default weight, secondary colour). /* @__PURE__ */ jsx(TextLabel, { variant: "body", color: "secondary", ...labelProps, children: title }) ) }), message !== void 0 ? /* @__PURE__ */ jsx(Modal.Body, { className: "lq-alert-message", children: /* @__PURE__ */ jsx(TextLabel, { variant: "body", color: "secondary", ...messageProps, children: message }) }) : null, children !== void 0 ? /* @__PURE__ */ jsx("div", { className: "lq-alert-accessory", children }) : null, /* @__PURE__ */ jsx(Modal.Footer, { className: "lq-alert-actions", "data-layout": layout, children: resolvedActions.map((action) => { const role = action.role ?? "default"; return /* @__PURE__ */ jsx( Button, { variant: "plain", role: role === "default" ? void 0 : role, className: "lq-alert-action", disabled: action.disabled, onClick: () => { action.onPress?.(); setOpen(false); }, children: action.label }, action.id ); }) }) ] } ) }); }; var STATUS_GLYPH = { // info.circle.fill analogue — a solid disc with a knocked-out lowercase "i". info: /* @__PURE__ */ jsxs(Fragment, { children: [ /* @__PURE__ */ jsx("circle", { className: "lq-icon-glyph", cx: "12", cy: "12", r: "9" }), /* @__PURE__ */ jsx("circle", { className: "lq-banner-glyph-mark-dot", cx: "12", cy: "8", r: "1.2" }), /* @__PURE__ */ jsx("path", { className: "lq-banner-glyph-mark", strokeWidth: "2", strokeLinecap: "round", d: "M12 11.5v5" }) ] }), // checkmark.circle.fill analogue — a solid disc with a knocked-out tick. success: /* @__PURE__ */ jsxs(Fragment, { children: [ /* @__PURE__ */ jsx("circle", { className: "lq-icon-glyph", cx: "12", cy: "12", r: "9" }), /* @__PURE__ */ jsx( "path", { className: "lq-banner-glyph-mark", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", d: "M8 12.5 11 15.5 16 9" } ) ] }), // exclamationmark.triangle.fill analogue — a solid rounded triangle with a knocked-out bang. warning: /* @__PURE__ */ jsxs(Fragment, { children: [ /* @__PURE__ */ jsx("path", { className: "lq-icon-glyph", strokeLinejoin: "round", d: "M12 3.5 21 19a1 1 0 0 1-.87 1.5H3.87A1 1 0 0 1 3 19z" }), /* @__PURE__ */ jsx("path", { className: "lq-banner-glyph-mark", strokeWidth: "2", strokeLinecap: "round", d: "M12 9.5v4" }), /* @__PURE__ */ jsx("circle", { className: "lq-banner-glyph-mark-dot", cx: "12", cy: "17", r: "1.2" }) ] }), // xmark.octagon.fill analogue — a solid octagon with a knocked-out cross. error: /* @__PURE__ */ jsxs(Fragment, { children: [ /* @__PURE__ */ jsx("path", { className: "lq-icon-glyph", strokeLinejoin: "round", d: "M8.5 3.5h7L20.5 8.5v7L15.5 20.5h-7L3.5 15.5v-7z" }), /* @__PURE__ */ jsx( "path", { className: "lq-banner-glyph-mark", strokeWidth: "2", strokeLinecap: "round", d: "M9.5 9.5 14.5 14.5M14.5 9.5 9.5 14.5" } ) ] }), // neutral — a solid disc with a knocked-out dot (an unstyled "notice" marker). neutral: /* @__PURE__ */ jsxs(Fragment, { children: [ /* @__PURE__ */ jsx("circle", { className: "lq-icon-glyph", cx: "12", cy: "12", r: "9" }), /* @__PURE__ */ jsx("circle", { className: "lq-banner-glyph-mark-dot", cx: "12", cy: "12", r: "2.2" }) ] }) }; var DISMISS_GLYPH = /* @__PURE__ */ jsx("path", { className: "lq-icon-wave", strokeWidth: "2", strokeLinecap: "round", d: "M6 6 18 18M18 6 6 18" }); var Banner = ({ title, message, items, icon, status = "info", actions, dismissible = true, live = true, open, defaultOpen = true, onOpenChange, labelProps, messageProps, dismissLabel = "Dismiss", dismissIcon, id, className, material, perf, ref }) => { const [resolvedOpen, setOpen] = useControllableState({ value: open, defaultValue: defaultOpen, onChange: onOpenChange, componentName: "Banner", propName: "open" }); const titleId = useId(); const messageId = useId(); const { props: { className: glassClassName, ...glassAttrs } } = useGlass({ material, perf }); const resolvedActions = resolveCollection(actions ?? [], "Banner"); const hasMessage = message != null || (items?.length ?? 0) > 0; const role = !live ? "region" : status === "warning" || status === "error" ? "alert" : "status"; const glyph = icon != null ? icon : /* @__PURE__ */ jsx(Icon, { glyph: STATUS_GLYPH[status], name: `banner-${status}` }); const dismissGlyph = dismissIcon != null ? dismissIcon : /* @__PURE__ */ jsx(Icon, { glyph: DISMISS_GLYPH, name: "banner-dismiss" }); if (!resolvedOpen) return null; return ( // biome-ignore lint/a11y/useAriaPropsSupportedByRole: `role` is always a severity-derived live-region role ("alert" | "status" | "region"), each of which supports aria-labelledby / aria-describedby (spec ## Accessibility); Biome cannot resolve the dynamic value so it falls back to the generic

role. /* @__PURE__ */ jsxs( "div", { ref, ...glassAttrs, id, role, "aria-labelledby": titleId, "aria-describedby": hasMessage ? messageId : void 0, "data-status": status, className: ["lq-banner", glassClassName, className].filter(Boolean).join(" "), children: [ /* @__PURE__ */ jsxs("span", { className: "lq-banner-rail", "aria-hidden": "true", children: [ /* @__PURE__ */ jsx("span", { className: "lq-banner-rail-cap" }), /* @__PURE__ */ jsx("span", { className: "lq-banner-glyph", "data-status": status, children: glyph }), /* @__PURE__ */ jsx("span", { className: "lq-banner-rail-line" }) ] }), /* @__PURE__ */ jsxs("div", { className: "lq-banner-body", children: [ /* @__PURE__ */ jsxs("div", { className: "lq-banner-text", children: [ /* @__PURE__ */ jsx("span", { id: titleId, className: "lq-banner-title", children: /* @__PURE__ */ jsx(TextLabel, { variant: "body", weight: hasMessage ? "semibold" : void 0, color: "primary", ...labelProps, children: title }) }), message != null ? /* @__PURE__ */ jsx("span", { id: messageId, className: "lq-banner-message", children: /* @__PURE__ */ jsx(TextLabel, { variant: "footnote", color: "secondary", ...messageProps, children: message }) }) : null, (items?.length ?? 0) > 0 ? /* @__PURE__ */ jsx("ul", { id: message == null ? messageId : void 0, className: "lq-banner-items", children: Children.map(items, (item) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(TextLabel, { variant: "footnote", color: "secondary", ...messageProps, children: item }) })) }) : null ] }), resolvedActions.length > 0 ? /* @__PURE__ */ jsx("div", { className: "lq-banner-actions", children: resolvedActions.map((action) => { const actionRole = action.role ?? "default"; return /* @__PURE__ */ jsx( Button, { variant: "plain", role: actionRole === "default" ? void 0 : actionRole, className: "lq-banner-action", disabled: action.disabled, onClick: () => { action.onPress?.(); if (action.closesOnPress) setOpen(false); }, children: action.label }, action.id ); }) }) : null ] }), dismissible ? /* @__PURE__ */ jsx(Button, { variant: "plain", className: "lq-banner-dismiss", "aria-label": dismissLabel, onClick: () => setOpen(false), children: dismissGlyph }) : null ] } ) ); }; var SEED_DEFAULT = `#${"000000"}`; var RGB_HEX_LENGTH = "#rrggbb".length; var HEX_FORM = /^([0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/; var SRGB_FORM = /^color$srgb\s+(-?\d*\.?\d+)\s+(-?\d*\.?\d+)\s+(-?\d*\.?\d+)(?:\s*\/\s*(-?\d*\.?\d+))?$$/; var channel = (unit) => Math.round(Math.min(1, Math.max(0, unit)) * 255).toString(16).padStart(2, "0"); var normaliseColour = (raw) => { const trimmed = raw.trim().toLowerCase(); const hex = trimmed.replace(/^#/, ""); if (HEX_FORM.test(hex)) { return `#${hex.length > 4 ? hex : [...hex].map((digit) => digit.repeat(2)).join("")}`; } const srgb = SRGB_FORM.exec(trimmed); if (srgb === null) return null; const [, red, green, blue, opacity] = srgb; const alpha = opacity === void 0 ? 1 : Number(opacity); const opaque = `#${channel(Number(red))}${channel(Number(green))}${channel(Number(blue))}`; return alpha < 1 ? `${opaque}${channel(alpha)}` : opaque; }; var ALPHA_ATTR = { alpha: "" }; var ColorPicker = ({ label, labelProps, value, defaultValue, onChange, supportsOpacity = true, labelsHidden = false, disabled = false, className, ref }) => { useGlass({ material: "clear", perf: "low" }); const [resolvedValue, setValue] = useControllableState({ value, defaultValue: defaultValue ?? SEED_DEFAULT, onChange, componentName: "ColorPicker", propName: "value" }); const canonical = normaliseColour(resolvedValue) ?? SEED_DEFAULT; const colour = supportsOpacity ? canonical : canonical.slice(0, RGB_HEX_LENGTH); const labelId = useId(); const inputId = useId(); const wellRef = useRef(null); const inputRef = useRef(null); useLayoutEffect(() => { wellRef.current?.style.setProperty("--lq-color-picker-value", colour); const input = inputRef.current; if (input !== null && normaliseColour(input.value) !== colour) input.value = colour; }, [colour]); const onColourInput = (e) => { if (disabled) return; const next = normaliseColour(e.currentTarget.value); if (next === null) return; setValue(next); }; const stringLabel = typeof label === "string" || typeof label === "number" ? String(label) : void 0; return /* @__PURE__ */ jsxs( "div", { ref, className: ["lq-color-picker", className].filter(Boolean).join(" "), "data-disabled": disabled || void 0, "data-labels-hidden": labelsHidden || void 0, children: [ labelsHidden ? null : /* @__PURE__ */ jsx("label", { id: labelId, htmlFor: inputId, className: "lq-color-picker-label", children: /* @__PURE__ */ jsx(TextLabel, { color: "inherit", ...labelProps, children: label }) }), /* @__PURE__ */ jsx("span", { ref: wellRef, className: "lq-color-picker-well", "data-value": colour, children: /* @__PURE__ */ jsx( "input", { type: "color", id: inputId, ref: inputRef, className: "lq-color-picker-input", defaultValue: colour, disabled, "aria-labelledby": labelsHidden ? void 0 : labelId, "aria-label": labelsHidden ? stringLabel : void 0, onChange: onColourInput, ...supportsOpacity ? ALPHA_ATTR : {} } ) }) ] } ); }; var LONG_PRESS_DURATION_MS = 500; var LONG_PRESS_DEADZONE_PX = 10; var OPEN_KEYS = /* @__PURE__ */ new Set(["Enter", " ", "Spacebar", "ContextMenu"]); function useLongPress(onOpen) { const [armed, setArmed] = useState(false); const timerRef = useRef(null); const originRef = useRef(null); const pointerIdRef = useRef(null); const clearHold = useCallback(() => { if (timerRef.current !== null) { clearTimeout(timerRef.current); timerRef.current = null; } originRef.current = null; pointerIdRef.current = null; setArmed(false); }, []); useEffect(() => clearHold, [clearHold]); const onPointerDown = useCallback( (e) => { if (e.button != null && e.button !== 0) return; clearHold(); pointerIdRef.current = e.pointerId; originRef.current = { x: e.clientX, y: e.clientY }; setArmed(true); timerRef.current = setTimeout(() => { timerRef.current = null; originRef.current = null; pointerIdRef.current = null; setArmed(false); onOpen(); }, LONG_PRESS_DURATION_MS); }, [clearHold, onOpen] ); const onPointerMove = useCallback( (e) => { if (pointerIdRef.current !== e.pointerId) return; const origin = originRef.current; if (origin === null) return; const dx = e.clientX - origin.x; const dy = e.clientY - origin.y; if (Math.hypot(dx, dy) > LONG_PRESS_DEADZONE_PX) clearHold(); }, [clearHold] ); const onPointerUp = useCallback( (e) => { if (pointerIdRef.current !== e.pointerId) return; clearHold(); }, [clearHold] ); const onPointerCancel = useCallback( (e) => { if (pointerIdRef.current !== e.pointerId) return; clearHold(); }, [clearHold] ); const onContextMenu = useCallback( (e) => { e.preventDefault(); clearHold(); onOpen(); }, [clearHold, onOpen] ); const onKeyDown = useCallback( (e) => { if (e.repeat || !OPEN_KEYS.has(e.key)) return; e.preventDefault(); onOpen(); }, [onOpen] ); return { armed, handlers: { onPointerDown, onPointerMove, onPointerUp, onPointerCancel, onContextMenu, onKeyDown } }; } var MenuRow = ({ label, ariaRole = "menuitem", leading, selected, destructive = false, disabled = false, index, active, labelProps, onPress, onKeyDown, className }) => { const showLeading = leading !== void 0 || ariaRole === "option"; return ( // biome-ignore lint/a11y/noStaticElementInteractions: `role` is set dynamically to an interactive role (menuitem|option); biome can't resolve the identifier to see it is non-static (Picker's static role="option" row is the precedent). // biome-ignore lint/a11y/useAriaPropsSupportedByRole: aria-selected is only ever set when ariaRole==="option" (the ternary yields undefined for a menuitem), which biome can't see through the dynamic role. /* @__PURE__ */ jsxs( "div", { role: ariaRole, "data-menu-row-index": index, tabIndex: active ? 0 : -1, "aria-selected": ariaRole === "option" ? Boolean(selected) : void 0, "aria-disabled": disabled || void 0, "data-disabled": disabled || void 0, "data-role": destructive ? "destructive" : void 0, className: [ // Picker's option element AND styling verbatim, so every menu in the // library is the same surface; `.lq-menu-row` adds only the destructive // colour + leading-slot rules on top. "lq-picker-option", "lq-menu-row", disabled ? "lq-picker-option--disabled" : "", className ].filter(Boolean).join(" "), onClick: () => { if (disabled) return; onPress?.(); }, onKeyDown: (e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); if (!disabled) onPress?.(); return; } onKeyDown?.(e); }, children: [ showLeading ? /* @__PURE__ */ jsx("span", { className: "lq-menu-row-leading", "aria-hidden": "true", children: leading }) : null, /* @__PURE__ */ jsx(TextLabel, { variant: "body", color: "inherit", ...labelProps, children: label }) ] } ) ); }; var firstEnabledId = (rows) => rows.find((it) => it.disabled !== true)?.id; var ContextMenu = ({ children, items, preview, placement = "bottom", open, defaultOpen = false, onOpenChange, material, perf, className, labelProps, "aria-label": ariaLabel = "Context menu", ref }) => { const [resolvedOpen, setOpen] = useControllableState({ value: open, defaultValue: defaultOpen, onChange: onOpenChange, componentName: "ContextMenu", propName: "open" }); const openMenu = useCallback(() => setOpen(true), [setOpen]); const longPress = useLongPress(openMenu); const rows = resolveCollection(items, "ContextMenu"); const itemsRef = useRef(null); const [rawActiveId, setRawActiveId] = useState( () => resolvedOpen ? firstEnabledId(rows) : void 0 ); const activeId = resolvedOpen ? resolveActiveId(rows, rawActiveId) ?? firstEnabledId(rows) : void 0; const activeIndex = rows.findIndex((it) => it.id === activeId); useEffect(() => { if (!resolvedOpen) setRawActiveId(void 0); }, [resolvedOpen]); useEffect(() => { if (!resolvedOpen) return; itemsRef.current?.querySelector(`[data-menu-row-index="${activeIndex}"]`)?.focus(); }, [resolvedOpen, activeIndex]); const navItems = rows.map((it) => ({ value: it.id, disabled: it.disabled })); const setActiveByIndex = (index) => setRawActiveId(rows[index]?.id); const onMenuKeyDown = (e) => { const cur = rows.findIndex((it) => it.id === activeId); if (e.key === "ArrowDown") { e.preventDefault(); setActiveByIndex(stepIndex(navItems, cur, 1)); } else if (e.key === "ArrowUp") { e.preventDefault(); setActiveByIndex(stepIndex(navItems, cur, -1)); } else if (e.key === "Home") { e.preventDefault(); setActiveByIndex(edgeIndex(navItems, 1)); } else if (e.key === "End") { e.preventDefault(); setActiveByIndex(edgeIndex(navItems, -1)); } }; const sourceState = resolvedOpen ? "open" : longPress.armed ? "armed" : void 0; const sourceContent = resolvedOpen && preview !== void 0 ? preview() : children; return /* @__PURE__ */ jsxs(Popup, { open: resolvedOpen, onOpenChange: setOpen, placement, hasPopup: "menu", children: [ /* @__PURE__ */ jsx(Popup.Trigger, { asChild: true, disabled: true, children: /* @__PURE__ */ jsx("div", { className: "lq-context-menu-source", "data-state": sourceState, tabIndex: 0, ref, ...longPress.handlers, children: sourceContent }) }), /* @__PURE__ */ jsx( Popup.Content, { role: "menu", material: material ?? "frosted", perf, className: ["lq-context-menu-panel", className].filter(Boolean).join(" "), "aria-label": ariaLabel, children: /* @__PURE__ */ jsx("div", { className: "lq-context-menu-items", ref: itemsRef, children: rows.map((item, index) => /* @__PURE__ */ jsx( MenuRow, { ariaRole: "menuitem", label: item.label, leading: item.icon, destructive: item.role === "destructive", disabled: item.disabled, index, active: item.id === activeId, labelProps, onPress: () => { item.onPress?.(); setOpen(false); }, onKeyDown: onMenuKeyDown }, item.id )) }) } ) ] }); }; var ControlGroup = ({ children, label, labelProps, size: sizeProp, tint: tintProp, disabled: disabledProp = false, separators = true, prominent = false, className, ref, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby }) => { const parent = useControlGroup(); const size2 = sizeProp ?? parent?.size ?? "regular"; const tint = tintProp ?? parent?.tint; const disabled = disabledProp || (parent?.disabled ?? false); const environment = useMemo(() => ({ size: size2, tint, disabled }), [size2, tint, disabled]); const labelId = useId(); const hasLabel2 = label != null && label !== false && label !== true && label !== ""; const { props: glassProps } = useGlass({ shape: "pill" }); const morphRef = useGlassMorphSurface(void 0, prominent); const handleActivation = (event) => { if (!prominent || disabled || event.defaultPrevented) return; const action = event.target.closest(".lq-button"); const surface = event.currentTarget; if (!action || action.closest(".lq-control-group-surface") !== surface || action.matches(':disabled, [data-disabled], [aria-busy="true"]')) return; surface.removeAttribute("data-pop"); surface.getBoundingClientRect(); surface.setAttribute("data-pop", ""); }; return /* @__PURE__ */ jsx(ControlGroupContext.Provider, { value: environment, children: /* @__PURE__ */ jsxs( "fieldset", { ref, className: ["lq-control-group", className].filter(Boolean).join(" "), disabled, "data-size": size2, "data-tint": tint, "data-prominent": prominent || void 0, "data-separators": separators, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby ?? (hasLabel2 && ariaLabel === void 0 ? labelId : void 0), "aria-describedby": ariaDescribedby, children: [ hasLabel2 ? /* @__PURE__ */ jsx("div", { id: labelId, className: "lq-control-group-label", children: /* @__PURE__ */ jsx(TextLabel, { variant: "subheadline", color: "secondary", ...labelProps, children: label }) }) : null, /* @__PURE__ */ jsx( "div", { ...glassProps, ref: morphRef, onClick: handleActivation, className: ["lq-control-group-surface", glassProps.className].filter(Boolean).join(" "), children: /* @__PURE__ */ jsx(GlassMorphBoundary, { children }) } ) ] } ) }); }; ControlGroup.displayName = "ControlGroup"; // src/shared/calendar-format.ts var refWeekday = (weekday) => new Date(2021, 0, 3 + weekday); var deriveFirstDay = (locale) => { const loc = new Intl.Locale(locale); const info = loc.getWeekInfo?.() ?? loc.weekInfo; return info ? info.firstDay % 7 : 0; }; var deriveCalendar = (locale) => (locale === void 0 ? void 0 : new Intl.Locale(locale).calendar) ?? "gregory"; var resolveCalendarFormat = ({ locale, firstDayOfWeek, calendar }) => { const resolvedLocale = locale ?? "en-US"; const resolvedCalendar = calendar ?? deriveCalendar(locale); const resolvedFirstDay = firstDayOfWeek ?? (locale === void 0 ? 0 : deriveFirstDay(locale)); const monthYearFmt = new Intl.DateTimeFormat(resolvedLocale, { month: "long", year: "numeric", calendar: resolvedCalendar }); const monthFmt = new Intl.DateTimeFormat(resolvedLocale, { month: "long", calendar: resolvedCalendar }); const weekdayLongFmt = new Intl.DateTimeFormat(resolvedLocale, { weekday: "long", calendar: resolvedCalendar }); const weekdayShortFmt = new Intl.DateTimeFormat(resolvedLocale, { weekday: "short", calendar: resolvedCalendar }); const numberFmt = new Intl.NumberFormat(resolvedLocale, { useGrouping: false }); return { firstDayOfWeek: resolvedFirstDay, monthYearLabel: (year, month) => monthYearFmt.format(new Date(year, month, 1)), fullDateLabel: (d) => `${numberFmt.format(d.getDate())} ${monthFmt.format(d)} ${numberFmt.format(d.getFullYear())}`, weekdayLong: (weekday) => weekdayLongFmt.format(refWeekday(weekday)), weekdayAbbr: (weekday) => weekdayShortFmt.format(refWeekday(weekday)).toLocaleUpperCase(resolvedLocale), monthName: (month) => monthFmt.format(new Date(2021, month, 1)), formatNumber: (n) => numberFmt.format(n) }; }; // src/shared/date-math.ts function daysInMonth(year, month) { return new Date(year, month + 1, 0).getDate(); } function firstWeekday(year, month) { return new Date(year, month, 1).getDay(); } function buildMonthMatrix(year, month, firstDayOfWeek = 0) { const total = daysInMonth(year, month); const offset2 = (firstWeekday(year, month) - firstDayOfWeek + 7) % 7; const matrix = []; let day = 1; for (let week = 0; week < 6; week++) { const row = []; for (let col = 0; col < 7; col++) { const cellIndex = week * 7 + col; row.push(cellIndex < offset2 || day > total ? null : new Date(year, month, day++)); } matrix.push(row); } return matrix; } function isSameDay(a, b) { return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate(); } function isValidDate(d) { return !Number.isNaN(d.getTime()); } function dayOrdinal(d) { return new Date(d.getFullYear(), d.getMonth(), d.getDate()).getTime(); } function addDays(date, n) { return new Date(date.getFullYear(), date.getMonth(), date.getDate() + n); } function addMonths(date, n) { const targetYear = date.getFullYear(); const targetMonth = date.getMonth() + n; const anchor = new Date(targetYear, targetMonth, 1); const clampedDay = Math.min(date.getDate(), daysInMonth(anchor.getFullYear(), anchor.getMonth())); return new Date(anchor.getFullYear(), anchor.getMonth(), clampedDay); } // src/shared/calendar-keys.ts function resolveCalendarKey(key2, focusedDay) { switch (key2) { case "ArrowLeft": return { kind: "move", date: addDays(focusedDay, -1) }; case "ArrowRight": return { kind: "move", date: addDays(focusedDay, 1) }; case "ArrowUp": return { kind: "move", date: addDays(focusedDay, -7) }; case "ArrowDown": return { kind: "move", date: addDays(focusedDay, 7) }; case "Home": return { kind: "move", date: addDays(focusedDay, -focusedDay.getDay()) }; case "End": return { kind: "move", date: addDays(focusedDay, 6 - focusedDay.getDay()) }; case "PageUp": return { kind: "page", direction: -1 }; case "PageDown": return { kind: "page", direction: 1 }; case "Enter": case " ": return { kind: "select" }; default: return null; } } var WHEEL_SETTLE_MS = 120; var WHEEL_GLIDE_GUARD_MS = 420; var WHEEL_JUMP_GUARD_MS = 60; var MAX_COLUMNS = 3; function WheelColumn({ items, selectedValue, onSelect, ariaLabel, ariaLabelledby, labelProps, disabled, edge }) { const selectedIndex = indexOf(items, selectedValue); const optionIdBase = useId(); const viewportRef = useRef(null); const programmatic = useRef(false); const settleTimer = useRef(0); const guardTimer = useRef(0); const seeded = useRef(false); const geometry = useCallback(() => { const el = viewportRef.current; const first = el?.querySelector(".lq-picker-wheel-option"); if (el === null || first == null) return null; const optH = first.offsetHeight; if (optH === 0) return null; return { el, firstTop: first.offsetTop, optH, viewport: el.clientHeight }; }, []); const nearestEnabled = useCallback( (from) => { if (items[from]?.disabled !== true) return from; for (let d = 1; d < items.length; d++) { const lo = items[from - d]; if (lo !== void 0 && lo.disabled !== true) return from - d; const hi = items[from + d]; if (hi !== void 0 && hi.disabled !== true) return from + d; } return from; }, [items] ); const centerTo = useCallback( (index, smooth) => { const g = geometry(); if (g === null) return; const target = g.firstTop + index * g.optH - (g.viewport - g.optH) / 2; if (Math.abs(g.el.scrollTop - target) < 1) return; const reduce = typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches === true; const animate = smooth && !reduce; programmatic.current = true; window.clearTimeout(guardTimer.current); guardTimer.current = window.setTimeout( () => { programmatic.current = false; }, animate ? WHEEL_GLIDE_GUARD_MS : WHEEL_JUMP_GUARD_MS ); if (typeof g.el.scrollTo === "function") { g.el.scrollTo({ top: target, behavior: animate ? "smooth" : "auto" }); } else { g.el.scrollTop = target; } }, [geometry] ); useEffect(() => { if (selectedIndex >= 0) centerTo(selectedIndex, seeded.current); seeded.current = true; }, [selectedIndex, centerTo]); useEffect( () => () => { window.clearTimeout(settleTimer.current); window.clearTimeout(guardTimer.current); }, [] ); const handleScroll = () => { if (disabled || programmatic.current) return; const g = geometry(); if (g === null) return; window.clearTimeout(settleTimer.current); settleTimer.current = window.setTimeout(() => { const viewportCenter = g.el.scrollTop + g.viewport / 2; const raw = Math.round((viewportCenter - g.firstTop - g.optH / 2) / g.optH); const clamped = Math.max(0, Math.min(items.length - 1, raw)); const next = nearestEnabled(clamped); const nextItem = items[next]; if (nextItem !== void 0 && next !== selectedIndex) onSelect(nextItem.value); }, WHEEL_SETTLE_MS); }; return ( // The listbox IS the scroll drum — a scroll container is the one element the // browser already makes keyboard-focusable, so making it the listbox yields // a single, natural tab stop (no tabindex juggling). The mask lives here; the // shared band + focus ring live on the unmasked frame above. /* @__PURE__ */ jsxs( "div", { ref: viewportRef, role: "listbox", "data-variant": "wheel", "data-state": "idle", "data-edge": (edge === "both" ? "start end" : edge) || void 0, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-disabled": disabled || void 0, "aria-activedescendant": disabled || selectedIndex < 0 ? void 0 : `${optionIdBase}-${selectedIndex}`, tabIndex: disabled ? -1 : 0, className: "lq-picker-wheel-viewport", onScroll: handleScroll, onKeyDown: (e) => { if (disabled) return; let next = null; switch (e.key) { case "ArrowDown": next = stepIndex(items, selectedIndex, 1); break; case "ArrowUp": next = stepIndex(items, selectedIndex, -1); break; case "Home": next = edgeIndex(items, 1); break; case "End": next = edgeIndex(items, -1); break; default: return; } e.preventDefault(); if (next === null || next === selectedIndex) return; const nextItem = items[next]; if (nextItem !== void 0) onSelect(nextItem.value); }, children: [ /* @__PURE__ */ jsx("div", { className: "lq-picker-wheel-spacer", "aria-hidden": "true" }), items.map((item, i) => /* @__PURE__ */ jsx( "div", { id: `${optionIdBase}-${i}`, role: "option", "aria-selected": i === selectedIndex, "aria-disabled": item.disabled || void 0, tabIndex: -1, className: ["lq-picker-wheel-option", i === selectedIndex ? "lq-picker-wheel-option--selected" : ""].filter(Boolean).join(" "), onClick: () => { if (disabled || item.disabled) return; onSelect(item.value); }, onKeyDown: (e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); if (!disabled && !item.disabled) onSelect(item.value); } }, children: /* @__PURE__ */ jsx(TextLabel, { variant: "body", weight: "medium", color: "inherit", ...labelProps, children: item.label }) }, item.value )), /* @__PURE__ */ jsx("div", { className: "lq-picker-wheel-spacer", "aria-hidden": "true" }) ] } ) ); } function Wheel({ columns, labelProps, disabled = false, ariaLabel, ariaLabelledby, setRef, className }) { const cols = columns.slice(0, MAX_COLUMNS); const groupProps = cols.length > 1 ? { role: "group", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby } : {}; return ( // Presentational frame: NOT scrollable and NOT masked, so it can host the // focus ring (a CSS mask clips an element's own outline / box-shadow) and the // one shared band that spans every column. The ring is drawn on // :has(viewport:focus-visible) — see styles.css. /* @__PURE__ */ jsxs( "div", { ref: setRef, ...groupProps, "data-disabled": disabled || void 0, className: ["lq-picker", "lq-picker--wheel", className].filter(Boolean).join(" "), children: [ /* @__PURE__ */ jsx("div", { className: "lq-picker-wheel-band", "aria-hidden": "true" }), cols.map((c, i) => { const edge = cols.length === 1 ? "both" : i === 0 ? "start" : i === cols.length - 1 ? "end" : ""; return /* @__PURE__ */ jsx( WheelColumn, { ...c, labelProps, disabled, edge }, c.ariaLabel ?? c.ariaLabelledby ?? i ); }) ] } ) ); } var canAnimate = () => typeof window !== "undefined" && typeof window.matchMedia === "function" && !window.matchMedia("(prefers-reduced-motion: reduce)").matches; var Presence = ({ present, children }) => { const [state, setState] = useState( () => present ? canAnimate() ? "entering" : "mounted" : "unmounted" ); const [prevPresent, setPrevPresent] = useState(present); if (present !== prevPresent) { setPrevPresent(present); if (present) setState(canAnimate() ? "entering" : "mounted"); else setState(canAnimate() ? "exiting" : "unmounted"); } const onAnimationEnd = (event) => { children.props.onAnimationEnd?.(event); if (event.target !== event.currentTarget) return; setState((current) => current === "entering" ? "mounted" : current === "exiting" ? "unmounted" : current); }; const nodeRef = useRef(null); const onAnimationCancel = useCallback((event) => { const node = nodeRef.current; if (node === null || event.target !== node) return; const canceled = event.animationName; if (typeof canceled !== "string") return; const specified = window.getComputedStyle(node).animationName.split(","); if (!specified.some((name) => name.trim() === canceled)) return; flushSync(() => { setState((current) => current === "entering" ? "mounted" : current === "exiting" ? "unmounted" : current); }); }, []); const attachNode = useCallback( (node) => { nodeRef.current?.removeEventListener("animationcancel", onAnimationCancel); nodeRef.current = node; node?.addEventListener("animationcancel", onAnimationCancel); }, [onAnimationCancel] ); const ref = useMergedRefs(children.props.ref, attachNode); if (state === "unmounted") return null; return cloneElement(children, { "data-state": state, onAnimationEnd, ref }); }; var DisclosureGroup = ({ label, labelProps, icon, children, expanded, defaultExpanded = false, onExpandedChange, disabled = false, variant = "plain", animated = true, className, ref: forwardedRef }) => { const { props: glassProps } = useGlass({ material: "frosted", perf: "low" }); const [, setRef] = useForwardedRef(forwardedRef); const contentId = useId(); const [resolvedExpanded, setResolvedExpanded] = useControllableState({ value: expanded, defaultValue: defaultExpanded, onChange: onExpandedChange, componentName: "DisclosureGroup", propName: "expanded" }); const hasContent = children != null; const [hasToggled, setHasToggled] = useState(false); const setExpanded = useCallback( (next) => { setHasToggled(true); setResolvedExpanded(next); }, [setResolvedExpanded] ); const isTranslucent = variant === "translucent"; const { className: glassClassName, ...glassAttrs } = glassProps; const rootClassName = ["lq-disclosure-group", isTranslucent ? glassClassName : void 0, className].filter(Boolean).join(" "); const contentRegion = hasContent ? /* @__PURE__ */ jsx("div", { id: contentId, className: "lq-disclosure-group-content", children: /* @__PURE__ */ jsx("div", { className: "lq-disclosure-group-content-inner", children }) }) : null; return /* @__PURE__ */ jsxs( "div", { ref: setRef, "data-variant": variant, "data-expanded": resolvedExpanded, "data-animate": animated && hasToggled || void 0, ...isTranslucent ? glassAttrs : {}, className: rootClassName, children: [ /* @__PURE__ */ jsxs( "button", { type: "button", className: "lq-disclosure-group-header", "aria-expanded": resolvedExpanded, "aria-controls": contentId, disabled, "data-disabled": disabled || void 0, onClick: () => setExpanded(!resolvedExpanded), children: [ /* @__PURE__ */ jsx("span", { className: "lq-disclosure-group-label", children: /* @__PURE__ */ jsx(TextLabel, { variant: "headline", weight: "bold", color: "primary", ...labelProps, children: label }) }), /* @__PURE__ */ jsx("span", { className: "lq-disclosure-group-chevron", "aria-hidden": "true", children: icon ?? /* @__PURE__ */ jsx(Icon, { name: "chevron-right", tint: "accent" }) }) ] } ), contentRegion === null ? null : animated ? ( // The shared presence primitive (audit §6.2) owns the exit lifecycle: // the SAME content node stays mounted through the roll-out and // unmounts on its own animationend — no painted null frame, safe // under StrictMode / interrupted close-reopen. /* @__PURE__ */ jsx(Presence, { present: resolvedExpanded, children: contentRegion }) ) : resolvedExpanded ? ( // animated=false: bypass Presence entirely for an instant show/hide. contentRegion ) : null ] } ); }; DisclosureGroup.displayName = "DisclosureGroup"; var YEAR_RANGE_START = 1900; var YEAR_RANGE_END = 2100; var monthOf = (d) => ({ year: d.getFullYear(), month: d.getMonth() }); var pad2 = (n) => String(n).padStart(2, "0"); var isoDate = (d) => `${d.getFullYear()}-${pad2(d.getMonth() + 1)}-${pad2(d.getDate())}`; var sanitize = (d) => d !== void 0 && isValidDate(d) ? d : void 0; var DatePicker = ({ value, defaultValue, onChange, min: minProp, max: maxProp, locale, firstDayOfWeek, calendar, labelProps, disabled = false, variant = "graphical", className, ref: forwardedRef, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby }) => { const safeValue = sanitize(value); const safeDefault = sanitize(defaultValue); const min = sanitize(minProp); const max = sanitize(maxProp); const todayRef = useRef(null); if (todayRef.current === null) todayRef.current = /* @__PURE__ */ new Date(); const today = todayRef.current; const [selected, requestSelect] = useControllableState({ value: safeValue, defaultValue: safeDefault ?? today, onChange, shouldNotify: () => true, componentName: "DatePicker", propName: "value" }); const isControlled = safeValue !== void 0; const outOfRange = (d) => min !== void 0 && dayOrdinal(d) < dayOrdinal(min) || max !== void 0 && dayOrdinal(d) > dayOrdinal(max); const firstFocusableDay = (vm) => { const total = daysInMonth(vm.year, vm.month); for (let day = 1; day <= total; day++) { const date = new Date(vm.year, vm.month, day); if (!outOfRange(date)) return date; } return new Date(vm.year, vm.month, 1); }; const rovingDay = (vm, sel) => vm.year === sel.getFullYear() && vm.month === sel.getMonth() && !outOfRange(sel) ? sel : firstFocusableDay(vm); const [visible, setVisible] = useState(() => monthOf(selected)); const [focusedDay, setFocusedDay] = useState(() => rovingDay(monthOf(selected), selected)); const [gridFocused, setGridFocused] = useState(false); const [monthYearExpanded, setMonthYearExpanded] = useState(false); const [, setRootRef] = useForwardedRef(forwardedRef); const gridRef = useRef(null); const pendingFocusRef = useRef(null); const format = useMemo( () => resolveCalendarFormat({ locale, firstDayOfWeek, calendar }), [locale, firstDayOfWeek, calendar] ); const { props: { className: glassClassName, ...glassAttrs } } = useGlass({ className, material: "frosted" }); useEffect(() => { if (process.env.NODE_ENV === "production") return; for (const [name, raw] of [ ["value", value], ["defaultValue", defaultValue], ["min", minProp], ["max", maxProp] ]) { if (raw !== void 0 && !isValidDate(raw)) { const { error: reportInvalid } = console; reportInvalid(`DatePicker: the \`${name}\` prop is an invalid Date and was ignored.`); } } }, [value, defaultValue, minProp, maxProp]); const selectedKey = `${selected.getFullYear()}-${selected.getMonth()}-${selected.getDate()}`; const prevSelectedKeyRef = useRef(selectedKey); useEffect(() => { if (!isControlled) { prevSelectedKeyRef.current = selectedKey; return; } if (prevSelectedKeyRef.current === selectedKey) return; prevSelectedKeyRef.current = selectedKey; const vm = monthOf(selected); setVisible((cur) => cur.year === vm.year && cur.month === vm.month ? cur : vm); setFocusedDay(selected); }, [isControlled, selectedKey, selected]); useEffect(() => { const iso = pendingFocusRef.current; if (iso === null) return; pendingFocusRef.current = null; gridRef.current?.querySelector(`[data-date="${iso}"]`)?.focus(); }, [focusedDay]); const selectDay = (date) => { if (disabled || outOfRange(date)) return; requestSelect(date); setFocusedDay(date); pendingFocusRef.current = isoDate(date); }; const moveFocusTo = (next) => { const vm = monthOf(next); if (vm.year !== visible.year || vm.month !== visible.month) setVisible(vm); setFocusedDay(next); pendingFocusRef.current = isoDate(next); }; const navigateToMonth = (vm) => { setVisible(vm); setFocusedDay(rovingDay(vm, selected)); }; const goToAdjacentMonth = (dir) => { navigateToMonth(monthOf(addMonths(new Date(visible.year, visible.month, 1), dir))); }; const handleMonthChange = (next) => { navigateToMonth({ year: visible.year, month: Number(next) }); }; const handleYearChange = (next) => { navigateToMonth({ year: Number(next), month: visible.month }); }; const pageMonth = (dir) => { const day = focusedDay.getDate(); const vm = monthOf(addMonths(new Date(visible.year, visible.month, 1), dir)); const landed = new Date(vm.year, vm.month, Math.min(day, daysInMonth(vm.year, vm.month))); setVisible(vm); setFocusedDay(landed); pendingFocusRef.current = isoDate(landed); }; const handleGridKeyDown = (e) => { if (disabled) return; const action = resolveCalendarKey(e.key, focusedDay); if (action === null) return; e.preventDefault(); if (action.kind === "move") moveFocusTo(action.date); else if (action.kind === "page") pageMonth(action.direction); else selectDay(focusedDay); }; const monthItems = useMemo( () => Array.from({ length: 12 }, (_, i) => ({ value: String(i), label: format.monthName(i) })), [format] ); const yearItems = useMemo(() => { const start = min !== void 0 ? min.getFullYear() : YEAR_RANGE_START; const end = max !== void 0 ? max.getFullYear() : YEAR_RANGE_END; return Array.from({ length: Math.max(0, end - start) + 1 }, (_, i) => { const year = start + i; return { value: String(year), label: format.formatNumber(year) }; }); }, [format, min, max]); const weekdayOrder = Array.from({ length: 7 }, (_, i) => (format.firstDayOfWeek + i) % 7); const matrix = buildMonthMatrix(visible.year, visible.month, format.firstDayOfWeek); const headerLabel = format.monthYearLabel(visible.year, visible.month); return ( // biome-ignore lint/a11y/useSemanticElements: a labelled calendar card is a WAI-ARIA group, not a native landmark/form element. /* @__PURE__ */ jsxs( "div", { ...glassAttrs, ref: setRootRef, role: "group", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-disabled": disabled || void 0, "data-disabled": disabled || void 0, "data-variant": variant, "data-expanded": monthYearExpanded || void 0, "data-state": gridFocused ? "focused" : "idle", className: ["lq-date-picker", glassClassName].filter(Boolean).join(" "), children: [ /* @__PURE__ */ jsxs("div", { className: "lq-date-picker-header", children: [ /* @__PURE__ */ jsx( DisclosureGroup, { label: headerLabel, labelProps, expanded: monthYearExpanded, onExpandedChange: setMonthYearExpanded, disabled, animated: false, children: /* @__PURE__ */ jsx("div", { className: "lq-date-picker-monthyear", children: /* @__PURE__ */ jsx( Wheel, { ariaLabel: "Month and year", disabled, columns: [ { ariaLabel: "Month", items: monthItems, selectedValue: String(visible.month), onSelect: handleMonthChange }, { ariaLabel: "Year", items: yearItems, selectedValue: String(visible.year), onSelect: handleYearChange } ] } ) }) } ), monthYearExpanded ? null : /* @__PURE__ */ jsxs("div", { className: "lq-date-picker-nav", children: [ /* @__PURE__ */ jsx( "button", { type: "button", className: "lq-date-picker-chevron", "aria-label": "Previous month", disabled, onClick: () => goToAdjacentMonth(-1), children: /* @__PURE__ */ jsx(Icon, { name: "chevron-left" }) } ), /* @__PURE__ */ jsx( "button", { type: "button", className: "lq-date-picker-chevron", "aria-label": "Next month", disabled, onClick: () => goToAdjacentMonth(1), children: /* @__PURE__ */ jsx(Icon, { name: "chevron-right" }) } ) ] }) ] }), monthYearExpanded ? null : ( /* biome-ignore lint/a11y/useSemanticElements: the calendar is a CSS-grid layout, not tabular data — role="grid" on a plain

is the WAI-ARIA APG date-picker grid pattern (spec ## Accessibility), not a native (mirrors Card/Form/Gauge's role-on-

precedent). */ /* @__PURE__ */ jsxs( "div", { ref: gridRef, role: "grid", "aria-label": headerLabel, className: "lq-date-picker-grid", onKeyDown: handleGridKeyDown, onFocus: () => setGridFocused(true), onBlur: (e) => { if (!e.currentTarget.contains(e.relatedTarget)) setGridFocused(false); }, children: [ /* @__PURE__ */ jsx("div", { role: "row", className: "lq-date-picker-weekdays", children: weekdayOrder.map((weekday) => ( // biome-ignore lint/a11y/useFocusableInteractive lint/a11y/useSemanticElements: a column-header LABEL is never a roving-tabindex stop (only day gridcells are, spec ## Accessibility) — role="columnheader" on a plain

, not a native

. /* @__PURE__ / jsx( "div", { role: "columnheader", "aria-label": format.weekdayLong(weekday), className: "lq-date-picker-weekday", children: / @__PURE__ / jsx(Text, { variant: "caption", color: "secondary", transform: "uppercase", children: format.weekdayAbbr(weekday) }) }, weekday ) )) }), matrix.map((week, wi) => { const hasRealDay = week.some((d) => d !== null); return / @__PURE__ */ jsx( "div", { role: hasRealDay ? "row" : void 0, "aria-hidden": hasRealDay ? void 0 : true, className: "lq-date-picker-week", children: week.map((date, di) => { if (date === null) { return ( // biome-ignore lint/a11y/useFocusableInteractive lint/a11y/useSemanticElements lint/suspicious/noArrayIndexKey: an empty pad cell carries NO tabindex at all — never a roving-tabindex stop (spec ## Accessibility) — role="gridcell" on a plain , not a native	; its position in the fixed 6×7 grid is its stable identity. /* @__PURE__ */ jsx("div", { role: "gridcell", "aria-hidden": "true", className: "lq-date-picker-pad" }, di) ); } const isSelected = isSameDay(date, selected); const isRoving = isSameDay(date, focusedDay); const isOutOfRange = outOfRange(date); return ( // biome-ignore lint/a11y/useKeyWithClickEvents: Enter/Space activation is handled by the GRID's delegated onKeyDown (the roving-tabindex + onKeyDown idiom from segmented-control.tsx), not a per-cell handler. // biome-ignore lint/a11y/useSemanticElements: role="gridcell" on a plain , not a native	— mirrors the grid/row/columnheader div+role choices above. /* @__PURE__ / jsx( "div", { role: "gridcell", tabIndex: disabled \|\| isOutOfRange ? -1 : isRoving ? 0 : -1, "aria-selected": isSelected, "aria-disabled": isOutOfRange \|\| void 0, "aria-label": format.fullDateLabel(date), "data-date": isoDate(date), "data-selected": isSelected \|\| void 0, "data-disabled": isOutOfRange \|\| void 0, "data-today": isSameDay(date, today) \|\| void 0, className: "lq-date-picker-day", onClick: () => selectDay(date), children: / @__PURE__ / jsx(Text, { variant: "body", color: isOutOfRange ? "tertiary" : "primary", children: format.formatNumber(date.getDate()) }) }, isoDate(date) ) ); }) }, wi ); }) ] } ) ) ] } ) ); }; DatePicker.displayName = "DatePicker"; var Dialog = ({ title, description, children, actions, labelProps, descriptionProps, size: size2 = "regular", open, defaultOpen = false, onOpenChange, dismissible, material, perf, className, ref }) => { const [resolvedOpen, setOpen] = useControllableState({ value: open, defaultValue: defaultOpen, onChange: onOpenChange, componentName: "Dialog", propName: "open" }); const resolvedActions = resolveCollection(actions, "Dialog"); if (process.env.NODE_ENV !== "production") { if (resolvedActions.length === 0) { const { error: reportEmptyActions } = console; reportEmptyActions( "[Dialog] `actions` is empty \u2014 a dialog needs at least one action so it always has a dismiss path." ); } else if (dismissible === false && !resolvedActions.some((action) => !action.disabled)) { const { error: reportNoDismissPath } = console; reportNoDismissPath( "[Dialog] `dismissible={false}` with no enabled action leaves no dismiss path \u2014 the modal would trap focus with no escape. Provide at least one enabled action." ); } } const hasDescription = description !== void 0; const bodyIsChildren = !hasDescription && children !== void 0; const showBody = hasDescription \|\| bodyIsChildren; const showAccessory = hasDescription && children !== void 0; const layout = resolvedActions.length === 2 ? "row" : "stack"; return / @__PURE__ / jsx(Overlay, { open: resolvedOpen, onOpenChange: setOpen, dismissible, children: / @__PURE__ / jsxs( Modal, { ref, size: size2, material: material ?? "frosted", perf, className: ["lq-dialog", className].filter(Boolean).join(" "), children: [ / @__PURE__ / jsx(Modal.Header, { className: "lq-dialog-header", children: showBody ? / @__PURE__ / jsx(TextLabel, { variant: "title3", weight: "bold", color: "primary", ...labelProps, children: title }) : ( // Title-only dialog: the title carries the body role — body size, // default weight, secondary colour. / @__PURE__ / jsx(TextLabel, { variant: "body", color: "secondary", ...labelProps, children: title }) ) }), showBody ? / @__PURE__ / jsx(Modal.Body, { className: "lq-dialog-body", children: hasDescription ? / @__PURE__ / jsx(TextLabel, { variant: "body", color: "secondary", ...descriptionProps, children: description }) : children }) : null, showAccessory ? / @__PURE__ / jsx("div", { className: "lq-dialog-accessory", children }) : null, / @__PURE__ / jsx(Modal.Footer, { className: "lq-dialog-actions", "data-layout": layout, children: resolvedActions.map((action) => { const role = action.role ?? "default"; return / @__PURE__ / jsx( Button, { variant: "plain", role: role === "default" ? void 0 : role, className: "lq-dialog-action", disabled: action.disabled, onClick: () => { action.onPress?.(); setOpen(false); }, children: action.label }, action.id ); }) }) ] } ) }); }; var Divider = ({ orientation = "horizontal", className, ref: forwardedRef }) => { useGlass({ material: "clear", perf: "low" }); const [, setRef] = useForwardedRef(forwardedRef); return ( // biome-ignore lint/a11y/useFocusableInteractive: this is the static WAI-ARIA separator pattern (never focusable, no tabindex), not the focusable window-splitter variant — per spec ## Accessibility / ## Interaction, Divider is intentionally excluded from the tab order. / @__PURE__ / jsx( "div", { ref: setRef, role: "separator", "aria-orientation": orientation, "data-orientation": orientation, className: ["lq-divider", className].filter(Boolean).join(" ") } ) ); }; Divider.displayName = "Divider"; var EmptyState = ({ className, title, description, icon, children, ref: forwardedRef }) => { const titleId = useId(); const descriptionId = useId(); const rootClassName = ["lq-empty-state", className].filter(Boolean).join(" "); const hasDescription = description != null; return ( // A with an accessible name maps natively to role="region" (no // explicit `role` attribute needed — and biome's useSemanticElements // rejects one) whenever it carries aria-labelledby, which it always does // here since `title` is required. / @__PURE__ / jsxs( "section", { ref: forwardedRef, "aria-labelledby": titleId, "aria-describedby": hasDescription ? descriptionId : void 0, className: rootClassName, children: [ icon != null ? / @__PURE__ / jsx("span", { className: "lq-empty-state-icon", "aria-hidden": "true", children: icon }) : null, / @__PURE__ / jsxs("div", { className: "lq-empty-state-body", children: [ / @__PURE__ / jsx("h2", { id: titleId, className: "lq-empty-state-title", children: title }), hasDescription ? / @__PURE__ / jsx("div", { id: descriptionId, className: "lq-empty-state-description", children: description }) : null ] }), children != null ? / @__PURE__ / jsx("div", { className: "lq-empty-state-actions", children }) : null ] } ) ); }; EmptyState.displayName = "EmptyState"; function ExpandableBarRegion({ label, open: openProp, defaultOpen = false, onOpenChange, side = "bottom", arrangement = "stack", items, trigger: renderTrigger, closeOnEscape = true, onCloseAutoFocus, animated = true, ref, className = "", onKeyDown, ...props }) { const [open, setOpen] = useControllableState({ value: openProp, defaultValue: defaultOpen, onChange: onOpenChange, componentName: "ExpandableBarRegion", propName: "open" }); const [root, rootRef] = useForwardedRef(ref); const trigger = useRef(null); const contentId = useId(); const previous = useRef(open); const focusWasInside = useRef(false); useLayoutEffect(() => { if (previous.current && !open && focusWasInside.current) { const event = new Event("closeAutoFocus", { cancelable: true }); onCloseAutoFocus?.(event); if (!event.defaultPrevented) trigger.current?.focus({ preventScroll: true }); } previous.current = open; }, [open, onCloseAutoFocus]); const actions = { open, close: () => setOpen(false), toggle: () => setOpen((value) => !value) }; const triggerProps = { ref: trigger, variant: "glass", "aria-label": `${open ? "Close" : "Expand"} ${label.toLowerCase()}`, "aria-expanded": open, "aria-controls": contentId, onPress: actions.toggle, children: label }; const content = / @__PURE__ / jsx("div", { id: contentId, className: "lq-expandable-bar-content", inert: !open, children: items.map((item) => / @__PURE__ / jsx(GlassMorphItem, { morphId: `item:${item.id}`, sourceId: "trigger", present: open, keepMounted: true, children: typeof item.content === "function" ? item.content(actions) : item.content }, item.id)) }); return / @__PURE__ / jsxs( GlassMorphGroup, { ...props, ref: rootRef, materialComponent: GlassPrimitive, animated, className: `lq-expandable-bar-region ${className}`, "data-side": side, "data-arrangement": arrangement, "data-open": open, spacing: 16, role: props.role ?? "group", "aria-label": props["aria-label"] ?? label, onFocusCapture: (event) => { focusWasInside.current = true; props.onFocusCapture?.(event); }, onBlurCapture: (event) => { if (event.relatedTarget && !root.current?.contains(event.relatedTarget)) focusWasInside.current = false; props.onBlurCapture?.(event); }, onKeyDown: (event) => { onKeyDown?.(event); if (open && closeOnEscape && event.key === "Escape" && !event.defaultPrevented && !event.nativeEvent.isComposing) { event.preventDefault(); actions.close(); } }, children: [ side === "top" && content, / @__PURE__ / jsx(GlassMorphItem, { morphId: "trigger", children: renderTrigger ? renderTrigger(triggerProps, actions) : / @__PURE__ / jsx(Button, { ...triggerProps }) }), side === "bottom" && content ] } ); } function SolidPrimitive(props) { const { as, color, className, children, ref, ...rest } = props; const Tag = as ?? "div"; return / @__PURE__ / jsx( Tag, { ref, className: ["lq-solid", className].filter(Boolean).join(" "), "data-color": color, ...rest, children } ); } SolidPrimitive.displayName = "SolidPrimitive"; var Card = ({ children, className, separators = true, "aria-labelledby": labelledBy, "aria-describedby": describedBy, ref: forwardedRef }) => { const rows = separators ? Children.map( children, (row, index) => index > 0 ? / @__PURE__ / jsxs(Fragment, { children: [ / @__PURE__ / jsx(Divider, {}), row ] }) : row ) : children; return ( // The fill + radius come from SolidPrimitive's `.lq-solid` base surface; // Card rides the `.lq-card` scoping class alongside it for the inset + // separators, and forwards ref/aria/role through as native props. // role="group" is the correct WAI-ARIA primitive for a static row-group // card with no form-association semantics (mirrors GroupBox), never a // native . It rides a component here, so no a11y lint fires. / @__PURE__ / jsx( SolidPrimitive, { ref: forwardedRef, role: "group", "aria-labelledby": labelledBy, "aria-describedby": describedBy, className: ["lq-card", className].filter(Boolean).join(" "), children: rows } ) ); }; Card.displayName = "Card"; var mergeIdRefs = (caller, injected) => { if (!injected) return caller; if (!caller) return injected; const ids = caller.split(/\s+/).filter(Boolean); return ids.includes(injected) ? caller : `${caller} ${injected}`; }; var Section = ({ title, header, footer, labelProps, children, className, ref: forwardedRef }) => { useGlass({ material: "clear", perf: "low" }); const [, setRef] = useForwardedRef(forwardedRef); const headerId = useId(); const footerId = useId(); const resolvedHeader = header ?? title; const hasHeader = resolvedHeader !== void 0; const hasFooter = footer !== void 0; return / @__PURE__ / jsxs("div", { ref: setRef, className: ["lq-section", className].filter(Boolean).join(" "), children: [ hasHeader ? / @__PURE__ / jsx("div", { id: headerId, className: "lq-section-header", children: / @__PURE__ / jsx(TextLabel, { variant: "headline", color: "secondary", ...labelProps, children: resolvedHeader }) }) : null, / @__PURE__ / jsx( Card, { className: "lq-section-card", "aria-labelledby": hasHeader ? headerId : void 0, "aria-describedby": hasFooter ? footerId : void 0, children } ), hasFooter ? / @__PURE__ / jsx("div", { id: footerId, className: "lq-section-footer", children: / @__PURE__ / jsx(TextLabel, { variant: "caption", color: "secondary", children: footer }) }) : null ] }); }; Section.displayName = "Section"; var FormRoot = ({ children, className, ref: forwardedRef }) => { useGlass({ material: "clear", perf: "low" }); const [, setRef] = useForwardedRef(forwardedRef); const baseId = useId(); const items = Children.toArray(children); const typeOf = (node) => isValidElement(node) ? node.type : void 0; if (process.env.NODE_ENV !== "production") { const isFormSlot = (node) => { const kind = typeOf(node); return kind === Section \|\| kind === Body \|\| kind === Header \|\| kind === Footer; }; if (items.some((item) => !isFormSlot(item))) { const { error: reportNonSlotChild } = console; reportNonSlotChild( "[Form] `children` should be `Section` / `Form.Body` / `Form.Header` / `Form.Footer` elements only \u2014 other direct children still render, but are not part of the documented `items` contract." ); } } const idFor = (node, index) => typeOf(node) === Header ? `${baseId}-h${index}` : `${baseId}-f${index}`; const resolvedIds = items.map((node, index) => { const kind = typeOf(node); if (kind !== Header && kind !== Footer) return void 0; const callerId = node.props.id; return callerId ?? idFor(node, index); }); const wired = items.map((node, index) => { const kind = typeOf(node); if (kind === Header \|\| kind === Footer) { const element = node; return element.props.id ? node : cloneElement(element, { id: resolvedIds[index] }); } if (kind === Body) { const element = node; const injectedLabelledby = typeOf(items[index - 1]) === Header ? resolvedIds[index - 1] : void 0; const injectedDescribedby = typeOf(items[index + 1]) === Footer ? resolvedIds[index + 1] : void 0; const labelledby = mergeIdRefs(element.props["aria-labelledby"], injectedLabelledby); const describedby = mergeIdRefs(element.props["aria-describedby"], injectedDescribedby); const unchanged = labelledby === element.props["aria-labelledby"] && describedby === element.props["aria-describedby"]; if (unchanged) return node; return cloneElement(element, { "aria-labelledby": labelledby, "aria-describedby": describedby }); } return node; }); return ( // biome-ignore lint/a11y/useSemanticElements: SwiftUI Form is a settings-screen layout grouping, not an HTML submission form — rendering a native would incorrectly imply submit semantics this component never provides (spec ## Accessibility). role="group" on a plain is the correct WAI-ARIA primitive here. / @__PURE__ / jsx("div", { ref: setRef, role: "group", className: ["lq-form", className].filter(Boolean).join(" "), children: wired }) ); }; FormRoot.displayName = "Form"; var Body = ({ children, className, ref: forwardedRef, "aria-labelledby": labelledBy, "aria-describedby": describedBy }) => { useGlass({ material: "clear", perf: "low" }); return / @__PURE__ / jsx( Card, { ref: forwardedRef, className: ["lq-form-body", className].filter(Boolean).join(" "), "aria-labelledby": labelledBy, "aria-describedby": describedBy, children } ); }; Body.displayName = "Form.Body"; var Header = ({ children, labelProps, className, id, ref: forwardedRef }) => { const [, setRef] = useForwardedRef(forwardedRef); return / @__PURE__ / jsx("div", { ref: setRef, id, className: ["lq-form-header", className].filter(Boolean).join(" "), children: / @__PURE__ / jsx(TextLabel, { variant: "headline", color: "secondary", ...labelProps, children }) }); }; Header.displayName = "Form.Header"; var Footer = ({ children, labelProps, className, id, ref: forwardedRef }) => { const [, setRef] = useForwardedRef(forwardedRef); return / @__PURE__ / jsx("div", { ref: setRef, id, className: ["lq-form-footer", className].filter(Boolean).join(" "), children: / @__PURE__ / jsx(TextLabel, { variant: "caption", color: "secondary", ...labelProps, children }) }); }; Footer.displayName = "Form.Footer"; var Form = Object.assign(FormRoot, { Section, Body, Header, Footer }); // src/shared/finite.ts function coerceFinite(n, fallback) { return typeof n === "number" && Number.isFinite(n) ? n : fallback; } function clampFinite(n, lo, hi, fallback = lo) { return Number.isFinite(n) ? Math.max(lo, Math.min(hi, n)) : fallback; } var Track = ({ className, children, ref: forwardedRef }) => { const [, setRef] = useForwardedRef(forwardedRef); return / @__PURE__ / jsx("span", { ref: setRef, "aria-hidden": "true", className: ["lq-track", className].filter(Boolean).join(" "), children }); }; var clamp = (n, lo, hi) => Number.isFinite(n) ? Math.max(lo, Math.min(hi, n)) : lo; var StatusBar = ({ value, className, railClassName, fillClassName, children, ref: forwardedRef }) => { const [spanRef, setRef] = useForwardedRef(forwardedRef); useLayoutEffect(() => { const el = spanRef.current; if (el === null) return; if (value !== void 0 && Number.isFinite(value)) { el.style.setProperty("--lq-sb-fill-w", `${Math.round(clamp(value, 0, 1) 100)}%`); } else { el.style.removeProperty("--lq-sb-fill-w"); } }, [spanRef, value]); return /* @__PURE__ / jsxs(Track, { ref: setRef, className, children: [ / @__PURE__ / jsx("span", { "aria-hidden": "true", className: ["lq-track-rail", railClassName].filter(Boolean).join(" ") }), / @__PURE__ / jsx("span", { "aria-hidden": "true", className: ["lq-track-fill", fillClassName].filter(Boolean).join(" ") }), children ] }); }; var CAPACITY_STYLES = / @__PURE__ / new Set(["linearCapacity", "accessoryCircularCapacity"]); var Gauge = ({ value, min, max, label, labelProps, currentValueLabel, valueProps, minimumValueLabel, maximumValueLabel, variant = "linearCapacity", tint, className, ref: forwardedRef, "aria-label": ariaLabel }) => { useGlass({ material: "clear", perf: "low" }); const [rootRef, setRef] = useForwardedRef(forwardedRef); const rawLo = coerceFinite(min, 0); const rawHi = coerceFinite(max, 1); const lo = Math.min(rawLo, rawHi); const hi = Math.max(rawLo, rawHi); const rawValue = coerceFinite(value, lo); const clampedValue = clampFinite(rawValue, lo, hi); const span = hi - lo; const fraction = span !== 0 ? clampFinite((clampedValue - lo) / span, 0, 1) : 0; useLayoutEffect(() => { rootRef.current?.style.setProperty("--lq-gauge-fraction", String(fraction)); }, [rootRef, fraction]); const isCapacity = CAPACITY_STYLES.has(variant); const hasCurrentValue = currentValueLabel !== void 0; const hasMin = minimumValueLabel !== void 0; const hasMax = maximumValueLabel !== void 0; const currentValueText = typeof currentValueLabel === "string" \|\| typeof currentValueLabel === "number" ? String(currentValueLabel) : void 0; const labelId = useId(); const currentValueId = useId(); const labelledbyIds = isCapacity ? labelId : [labelId, hasCurrentValue ? currentValueId : void 0].filter((id) => id !== void 0).join(" "); const resolvedAriaLabelledby = ariaLabel === void 0 ? labelledbyIds : void 0; return ( // biome-ignore lint/a11y/useSemanticElements: a native renders a single horizontal bar and cannot express the ring/arc geometries three of the four variant values require (spec ## Anatomy) — one consistent role-bearing root is used across all four styles instead of switching HTML tags, mirroring Slider's role="slider" rationale. / @__PURE__ / jsxs( "div", { ref: setRef, role: "meter", "aria-valuenow": clampedValue, "aria-valuemin": lo, "aria-valuemax": hi, "aria-valuetext": currentValueText, "aria-label": ariaLabel, "aria-labelledby": resolvedAriaLabelledby, "data-gauge-style": variant, "data-tint": isCapacity ? tint : void 0, className: ["lq-gauge", className].filter(Boolean).join(" "), children: [ variant === "linearCapacity" ? / @__PURE__ / jsxs(Fragment, { children: [ / @__PURE__ / jsx("span", { id: labelId, className: "lq-gauge-label", children: / @__PURE__ / jsx(TextLabel, { variant: "body", color: "primary", ...labelProps, children: label }) }), / @__PURE__ / jsx( StatusBar, { value: fraction, className: "lq-gauge-track", railClassName: "lq-gauge-rail", fillClassName: "lq-gauge-fill" } ) ] }) : null, variant === "accessoryCircularCapacity" ? / @__PURE__ / jsxs("div", { className: "lq-gauge-ring", children: [ / @__PURE__ / jsx("span", { className: "lq-gauge-ring-track" }), / @__PURE__ / jsx("span", { className: "lq-gauge-ring-fill" }), / @__PURE__ / jsx("span", { id: labelId, className: "lq-gauge-ring-label", children: / @__PURE__ / jsx(TextLabel, { variant: "title2", weight: "regular", color: "primary", ...labelProps, children: label }) }) ] }) : null, variant === "accessoryLinear" ? / @__PURE__ / jsxs(Fragment, { children: [ / @__PURE__ / jsx("span", { id: labelId, className: "lq-gauge-visually-hidden", children: / @__PURE__ / jsx(TextLabel, { children: label }) }), hasCurrentValue ? / @__PURE__ / jsx("span", { id: currentValueId, className: "lq-gauge-current", children: / @__PURE__ / jsx(TextLabel, { variant: "body", color: "primary", ...valueProps, children: currentValueLabel }) }) : null, / @__PURE__ / jsx("div", { className: "lq-gauge-line-track", children: / @__PURE__ / jsx("span", { className: "lq-gauge-tick" }) }) ] }) : null, variant === "accessoryCircular" ? / @__PURE__ / jsxs(Fragment, { children: [ / @__PURE__ / jsx("span", { id: labelId, className: "lq-gauge-visually-hidden", children: / @__PURE__ / jsx(TextLabel, { children: label }) }), / @__PURE__ / jsxs("div", { className: "lq-gauge-arc", children: [ / @__PURE__ / jsx("span", { className: "lq-gauge-arc-notch", children: / @__PURE__ / jsx("span", { className: "lq-gauge-arc-track" }) }), / @__PURE__ / jsx("span", { className: "lq-gauge-arc-tick" }), hasCurrentValue ? / @__PURE__ / jsx("span", { id: currentValueId, className: "lq-gauge-arc-current", children: / @__PURE__ / jsx(TextLabel, { variant: "title2", weight: "regular", color: "primary", ...valueProps, children: currentValueLabel }) }) : null, hasMin ? / @__PURE__ / jsx("span", { className: "lq-gauge-arc-min", children: / @__PURE__ / jsx(TextLabel, { variant: "caption", color: "primary", children: minimumValueLabel }) }) : null, hasMax ? / @__PURE__ / jsx("span", { className: "lq-gauge-arc-max", children: / @__PURE__ / jsx(TextLabel, { variant: "caption", color: "primary", children: maximumValueLabel }) }) : null ] }) ] }) : null ] } ) ); }; var GroupBox = ({ label, labelProps, children, className, ref: forwardedRef }) => { useGlass({ material: "clear", perf: "low" }); const labelId = useId(); const hasLabel2 = label != null && label !== false && label !== true && label !== ""; return / @__PURE__ / jsxs( Card, { ref: forwardedRef, separators: false, "aria-labelledby": hasLabel2 ? labelId : void 0, className: ["lq-group-box", className].filter(Boolean).join(" "), children: [ hasLabel2 ? / @__PURE__ / jsx("div", { id: labelId, className: "lq-group-box-label", children: / @__PURE__ / jsx(TextLabel, { variant: "headline", weight: "semibold", color: "secondary", ...labelProps, children: label }) }) : null, / @__PURE__ / jsx("div", { className: "lq-group-box-content", children }) ] } ); }; GroupBox.displayName = "GroupBox"; var Label = ({ title, icon, variant = "titleAndIcon", as = "span", labelProps, className, ref: forwardedRef }) => { useGlass({ material: "clear", perf: "low" }); const [, setRef] = useForwardedRef(forwardedRef); const rootClassName = ["lq-label", className].filter(Boolean).join(" "); const showIcon = variant !== "titleOnly" && icon != null; const titleClassName = variant === "iconOnly" ? "lq-label-visually-hidden" : "lq-label-title"; return / @__PURE__ / jsxs("span", { ref: setRef, "data-variant": variant, className: rootClassName, children: [ showIcon ? / @__PURE__ / jsx("span", { "aria-hidden": "true", className: "lq-label-icon", children: icon }) : null, / @__PURE__ / jsx("span", { className: titleClassName, children: / @__PURE__ / jsx(TextLabel, { as, variant: "body", color: "primary", ...labelProps, children: title }) }) ] }); }; Label.displayName = "Label"; var LabeledContent = ({ label, value, children, align = "baseline", className, labelProps, valueProps, ref: forwardedRef }) => { useGlass({ material: "clear", perf: "low" }); const [, setRef] = useForwardedRef(forwardedRef); const labelId = useId(); const rootClassName = ["lq-labeled-content", className].filter(Boolean).join(" "); if (process.env.NODE_ENV !== "production" && value !== void 0 && children !== void 0) { const { error: reportBothValueAndChildren } = console; reportBothValueAndChildren( "[LabeledContent] both `value` and `children` were supplied \u2014 they are mutually exclusive. `value` wins; remove one of the two props." ); } const trailingContent = value !== void 0 ? value : children; return ( // biome-ignore lint/a11y/useSemanticElements: a native carries form-association semantics (a -named group of form controls) that have nothing to do with a static label/value display row (spec ## Accessibility) — role="group" on a plain is the correct WAI-ARIA primitive here, mirroring Gauge's role="meter" rationale. / @__PURE__ / jsxs("div", { ref: setRef, role: "group", "aria-labelledby": labelId, "data-align": align, className: rootClassName, children: [ / @__PURE__ / jsx("span", { id: labelId, className: "lq-labeled-content-label", children: / @__PURE__ / jsx(TextLabel, { color: "primary", ...labelProps, children: label }) }), / @__PURE__ / jsx("span", { className: "lq-labeled-content-value", children: / @__PURE__ / jsx(TextLabel, { color: "secondary", ...valueProps, children: trailingContent }) }) ] }) ); }; LabeledContent.displayName = "LabeledContent"; function makeHandleClick(disabled, onClick, onPress) { return (event) => { if (disabled) { event.preventDefault(); return; } onClick?.(event); if (event.defaultPrevented) return; onPress?.(); }; } var Link = ({ children, variant = "inline", size: size2, tint, disabled = false, leadingIcon, trailingIcon, onPress, className, ref: forwardedRef, "aria-label": ariaLabel, href, as: _as, target, onClick, ...rest }) => { const passthrough = nativeAttributes(rest); const isNewTab = target === "_blank"; const rel = isNewTab ? "noopener noreferrer" : void 0; const newTabSuffix = isNewTab ? ( // External-link semantics (WAI-ARIA APG): a visually-hidden suffix folds // into the computed accessible name without a visible change. The separating // space is a text node BEFORE the span, not the span's leading character: // the accessible-name algorithm trims each element's own leading/trailing // whitespace, so a space inside the span is dropped from the flattened name // ("Apple Developer(opens in new tab)"). As a sibling text node it survives // the concatenation, and because the span is `position:absolute` (out of // flow) the space collapses as trailing whitespace — no visible change. / @__PURE__ / jsxs(Fragment, { children: [ " ", / @__PURE__ / jsx("span", { className: "lq-link-visually-hidden", children: "(opens in new tab)" }) ] }) ) : null; if (variant === "inline" && href === void 0) { return / @__PURE__ / jsx( "button", { ...passthrough, type: passthrough.type ?? "button", className: ["lq-link", className].filter(Boolean).join(" "), "data-tint": tint, "data-disabled": disabled \|\| void 0, disabled, "aria-label": ariaLabel, ref: forwardedRef, onClick: makeHandleClick(disabled, onClick, onPress), children } ); } if (variant === "inline") { const navOnClick2 = onClick; const handleClick2 = makeHandleClick(disabled, navOnClick2, onPress); return / @__PURE__ / jsxs( "a", { ...passthrough, href, target, rel, className: ["lq-link", className].filter(Boolean).join(" "), "data-tint": tint, "data-disabled": disabled \|\| void 0, "aria-label": ariaLabel, "aria-disabled": disabled \|\| void 0, ref: forwardedRef, onClick: handleClick2, children: [ children, newTabSuffix ] } ); } if (href === void 0) { const actionOnClick = onClick; const handleClick2 = makeHandleClick(disabled, actionOnClick, onPress); return / @__PURE__ / jsx( Button, { ...passthrough, variant, size: size2, tint, disabled, className, ref: forwardedRef, onClick: handleClick2, leadingIcon, trailingIcon, "aria-label": ariaLabel, children } ); } const navOnClick = onClick; const handleClick = makeHandleClick(disabled, navOnClick, onPress); const hasLabel2 = children !== void 0 && children !== null && children !== ""; const iconOnly = !hasLabel2 && (leadingIcon !== void 0 \|\| trailingIcon !== void 0); return / @__PURE__ / jsx( Button, { asChild: true, variant, size: size2, tint, disabled, className, ref: forwardedRef, onClick: handleClick, children: / @__PURE__ / jsxs( "a", { ...passthrough, href, target, rel, "aria-label": ariaLabel, "aria-disabled": disabled \|\| void 0, "data-icon-only": iconOnly \|\| void 0, children: [ / @__PURE__ / jsx(PressableContent, { className: "lq-button-content", leadingIcon, trailingIcon, children }), newTabSuffix ] } ) } ); }; var flattenFocusable = (nodes) => { const out = []; for (const node of nodes) { if (node.kind === "section") out.push(...flattenFocusable(node.items)); else if (node.kind === "submenu") out.push({ id: node.id, disabled: false }); else out.push({ id: node.id, disabled: node.disabled === true }); } return out; }; var firstEnabledId2 = (rows) => rows.find((r) => !r.disabled)?.id; var lastEnabledId = (rows) => rows.filter((r) => !r.disabled).at(-1)?.id; var Menu = ({ label, icon, items = [], className, ref, style = "menu", size: size2 = "regular", disabled = false, open, defaultOpen = false, onOpenChange, placement, labelProps, "aria-label": ariaLabel }) => { const isButton = style === "button"; const { props: { className: glassClassName, ...glassAttrs } } = useGlass({ className, style: { "--lq-glass-elevation": "var(--lq-shadow-interactive-idle)" } }); const [resolvedOpen, setOpen] = useControllableState({ value: open, defaultValue: defaultOpen, onChange: onOpenChange, componentName: "Menu", propName: "open" }); const effectiveOpen = resolvedOpen && !disabled; const topNodes = useMemo(() => resolveCollection(items, "Menu"), [items]); const topRows = useMemo(() => flattenFocusable(topNodes), [topNodes]); const topIndexById = new Map(topRows.map((r, i) => [r.id, i])); const [submenuId, setSubmenuId] = useState(void 0); const atTop = submenuId === void 0; const openSubmenuNode = useMemo( () => submenuId === void 0 ? void 0 : topNodes.find((n) => n.kind === "submenu" && n.id === submenuId), [submenuId, topNodes] ); const childRows = useMemo(() => flattenFocusable(openSubmenuNode?.items ?? []), [openSubmenuNode]); const childIndexById = new Map(childRows.map((r, i) => [r.id, i])); const [rawTopActiveId, setRawTopActiveId] = useState( () => effectiveOpen ? firstEnabledId2(topRows) : void 0 ); const topActiveId = effectiveOpen && atTop ? resolveActiveId(topRows, rawTopActiveId) ?? firstEnabledId2(topRows) : void 0; const [subActiveId, setSubActiveId] = useState(void 0); const triggerElRef = useRef(null); const mergedTriggerRef = useMergedRefs(ref, triggerElRef); const topItemsRef = useRef(null); const submenuItemsRef = useRef(null); const panelRef = useRef(null); const [mounted, setMounted] = useState(false); useEffect(() => { setMounted(true); }, []); useEffect(() => { if (!effectiveOpen) { setRawTopActiveId(void 0); setSubmenuId(void 0); setSubActiveId(void 0); } }, [effectiveOpen]); useEffect(() => { if (disabled) triggerElRef.current?.blur(); }, [disabled]); useEffect(() => { if (disabled && resolvedOpen) setOpen(false); }, [disabled, resolvedOpen, setOpen]); useEffect(() => { if (!effectiveOpen) return; const rows = atTop ? topRows : childRows; const container = atTop ? topItemsRef.current : submenuItemsRef.current; const focusId = atTop ? topActiveId : subActiveId; const idx = rows.findIndex((r) => r.id === focusId); if (idx >= 0) { container?.querySelector(`[data-menu-row-index="${idx}"]`)?.focus(); } }, [effectiveOpen, mounted, submenuId, topActiveId, subActiveId]); useEffect(() => { if (!effectiveOpen) return; const panel = panelRef.current; if (panel === null) return; const onKeyDown = (e) => { const rows = atTop ? topRows : childRows; const activeNow = atTop ? topActiveId : subActiveId; const cur = rows.findIndex((r) => r.id === activeNow); const navItems = rows.map((r) => ({ value: r.id, disabled: r.disabled })); const setActive = atTop ? setRawTopActiveId : setSubActiveId; if (e.key === "ArrowDown" \|\| e.key === "ArrowUp") { e.preventDefault(); setActive(rows[stepIndex(navItems, cur, e.key === "ArrowDown" ? 1 : -1)]?.id); } else if (e.key === "Tab") { setOpen(false); } else if (e.key === "ArrowLeft" && !atTop) { e.preventDefault(); setSubmenuId(void 0); setRawTopActiveId(submenuId); } }; panel.addEventListener("keydown", onKeyDown); return () => panel.removeEventListener("keydown", onKeyDown); }, [effectiveOpen, mounted, atTop, topRows, childRows, topActiveId, subActiveId, submenuId, setOpen]); const openFrom = (toLast) => { setRawTopActiveId(toLast ? lastEnabledId(topRows) : firstEnabledId2(topRows)); setOpen(true); }; const onTriggerKeyDown = (e) => { if (disabled) return; if (e.key === "Enter" \|\| e.key === " " \|\| e.key === "ArrowDown") { e.preventDefault(); openFrom(false); } else if (e.key === "ArrowUp") { e.preventDefault(); openFrom(true); } }; const openSubmenu = (node) => { setSubmenuId(node.id); setSubActiveId(firstEnabledId2(flattenFocusable(node.items))); }; const collapseSubmenu = (parentId) => { setSubmenuId(void 0); setRawTopActiveId(parentId); }; const renderSubmenuParent = (node, opts) => / @__PURE__ / jsxs( "div", { role: "menuitem", "aria-haspopup": "menu", "aria-expanded": opts.expanded, "data-menu-row-index": opts.index, tabIndex: opts.tabIndex, className: `lq-picker-option lq-menu-row lq-menu-submenu-parent${opts.expanded ? " lq-menu-submenu-header" : ""}`, onClick: opts.expanded ? () => collapseSubmenu(node.id) : () => openSubmenu(node), onKeyDown: (e) => { if (!opts.expanded && e.key === "ArrowRight") { e.preventDefault(); openSubmenu(node); } }, children: [ node.icon !== void 0 ? / @__PURE__ / jsx("span", { className: "lq-menu-row-leading", "aria-hidden": "true", children: node.icon }) : null, / @__PURE__ / jsx(TextLabel, { variant: "body", color: "inherit", ...labelProps, children: node.label }), / @__PURE__ / jsx("span", { className: "lq-menu-chevron", "aria-hidden": "true", children: opts.expanded ? "\u2304" : "\u203A" }) ] }, opts.key ); const renderSubmenuLevel = (node) => [ renderSubmenuParent(node, { key: node.id, expanded: true, index: -1, tabIndex: -1 }), / @__PURE__ / jsx("hr", { className: "lq-menu-separator" }, `${node.id}--sep`), / @__PURE__ / jsx( "div", { role: "menu", "aria-label": node.label, className: "lq-menu-items lq-menu-submenu-items", ref: submenuItemsRef, children: node.items.map((child) => renderNode(child, childIndexById, subActiveId)) }, `${node.id}--items` ) ]; const renderNode = (node, indexById, activeId) => { if (node.kind === "section") { if (node.label !== void 0) { return ( // biome-ignore lint/a11y/useSemanticElements: `role="group"` is the APG menu-group semantic; no single HTML element carries it (a is form-only). / @__PURE__ / jsxs("div", { role: "group", "aria-label": node.label, className: "lq-menu-section", children: [ / @__PURE__ / jsx("div", { className: "lq-menu-section-label", "aria-hidden": "true", children: node.label }), node.items.map((child) => renderNode(child, indexById, activeId)) ] }, node.id) ); } return / @__PURE__ / jsxs(Fragment$1, { children: [ / @__PURE__ / jsx("hr", { className: "lq-menu-separator" }), node.items.map((child) => renderNode(child, indexById, activeId)) ] }, node.id); } if (node.kind === "submenu") { return renderSubmenuParent(node, { key: node.id, expanded: false, index: indexById.get(node.id) ?? -1, tabIndex: activeId === node.id ? 0 : -1 }); } return / @__PURE__ / jsx( MenuRow, { ariaRole: "menuitem", label: node.label, leading: node.icon, destructive: node.role === "destructive", disabled: node.disabled, index: indexById.get(node.id) ?? -1, active: activeId === node.id, labelProps, onPress: () => { node.onSelect?.(); setOpen(false); } }, node.id ); }; const panelLabel = ariaLabel ?? (typeof label === "string" ? label : void 0); return / @__PURE__ / jsxs(Popup, { open: effectiveOpen, onOpenChange: setOpen, placement, hasPopup: "menu", children: [ / @__PURE__ / jsx(Popup.Trigger, { asChild: true, disabled, children: / @__PURE__ / jsx( PressableSurface, { as: "button", type: "button", ref: mergedTriggerRef, ...isButton ? glassAttrs : {}, "aria-label": ariaLabel, "aria-disabled": disabled \|\| void 0, "data-style": style, "data-variant": isButton ? "glass" : void 0, "data-size": size2, "data-disabled": disabled \|\| void 0, tabIndex: disabled ? -1 : void 0, onKeyDown: onTriggerKeyDown, className: [ "lq-menu-trigger", isButton ? "lq-button lq-menu-trigger--button lq-menu-pill" : "lq-menu-trigger--menu", isButton ? glassClassName : className ].filter(Boolean).join(" "), contentClassName: "lq-menu-label", leadingIcon: icon !== void 0 ? / @__PURE__ / jsx("span", { className: "lq-menu-trigger-icon", "aria-hidden": "true", children: icon }) : void 0, children: label } ) }), mounted ? / @__PURE__ / jsx(Popup.Content, { role: "menu", ref: panelRef, material: "frosted", "aria-label": panelLabel, className: "lq-menu-panel", children: / @__PURE__ / jsx("div", { className: "lq-menu-items", ref: topItemsRef, children: openSubmenuNode !== void 0 ? renderSubmenuLevel(openSubmenuNode) : topNodes.map((node) => renderNode(node, topIndexById, topActiveId)) }) }) : null ] }); }; var SCRUB_SLOP_PX = 3; var PageControl = ({ count, size: size2 = "regular", value, defaultValue, onChange, indexDisplay = "automatic", backgroundDisplay = "automatic", hidesForSinglePage = true, allowsContinuousInteraction = true, disabled = false, id, className, ref: forwardedRef, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby }) => { const reactId = useId(); const baseId = id ?? reactId; const [rawIndex, requestIndex] = useControllableState({ value, defaultValue: defaultValue ?? 0, onChange, componentName: "PageControl", propName: "page" }); const maxIndex = count - 1; const resolvedIndex = Math.max(0, Math.min(rawIndex, maxIndex)); if (process.env.NODE_ENV !== "production" && rawIndex !== resolvedIndex) { const { error: warnOutOfRange } = console; warnOutOfRange( `PageControl: the page index ${rawIndex} is out of range for count=${count}; clamped into [0, ${maxIndex}].` ); } const lastRequestRef = useRef(null); const prevResolvedRef = useRef(resolvedIndex); if (prevResolvedRef.current !== resolvedIndex) { prevResolvedRef.current = resolvedIndex; lastRequestRef.current = null; } const [rootRef, setRootRef] = useForwardedRef(forwardedRef); const dotRefs = useRef([]); const [interacting, setInteracting] = useState(false); const pressOriginRef = useRef(null); const commit = (target) => { if (disabled) return; if (target === resolvedIndex) return; if (lastRequestRef.current === target) return; lastRequestRef.current = target; requestIndex(target); }; const indexAt = (clientX) => { let nearest = resolvedIndex; let nearestDistance = Number.POSITIVE_INFINITY; for (let i = 0; i < count; i++) { const rect = dotRefs.current[i]?.getBoundingClientRect(); if (rect === void 0) continue; const distance = Math.abs((rect.left + rect.right) / 2 - clientX); if (distance < nearestDistance) { nearestDistance = distance; nearest = i; } } return nearest; }; const endGesture = () => { pressOriginRef.current = null; setInteracting(false); }; useEffect(() => { if (rootRef.current?.contains(document.activeElement)) { dotRefs.current[resolvedIndex]?.focus(); } }, [resolvedIndex, rootRef]); useEffect(() => { if (!disabled) return; pressOriginRef.current = null; setInteracting(false); if (rootRef.current?.contains(document.activeElement)) { document.activeElement?.blur(); } }, [disabled, rootRef]); const rowVisible = indexDisplay === "never" ? false : indexDisplay === "always" ? true : count > 1 \|\| !hidesForSinglePage; const plateVisible = backgroundDisplay === "always" \|\| backgroundDisplay === "interacting" && interacting; const dots = []; if (rowVisible) { for (let i = 0; i < count; i++) { const active = i === resolvedIndex; dots.push( / @__PURE__ / jsx( "button", { ref: (node) => { dotRefs.current[i] = node; }, type: "button", role: "tab", id: `${baseId}-tab-${i}`, "aria-selected": active, "aria-label": `Page ${i + 1} of ${count}`, "data-state": active ? "active" : "inactive", tabIndex: !disabled && active ? 0 : -1, className: "lq-page-control-dot", onClick: () => commit(i), onKeyDown: (e) => { if (disabled) return; switch (e.key) { case "ArrowRight": e.preventDefault(); commit((i + 1) % count); break; case "ArrowLeft": e.preventDefault(); commit((i - 1 + count) % count); break; case "Home": e.preventDefault(); commit(0); break; case "End": e.preventDefault(); commit(count - 1); break; case "Enter": case " ": e.preventDefault(); commit(i); break; } } }, i ) ); } } return / @__PURE__ / jsxs( "div", { ref: setRootRef, role: "tablist", "aria-orientation": "horizontal", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-disabled": disabled \|\| void 0, "data-disabled": disabled \|\| void 0, "data-size": size2, "data-index-display": indexDisplay, "data-background-display": backgroundDisplay, "data-interacting": interacting \|\| void 0, className: ["lq-page-control", className].filter(Boolean).join(" "), onPointerDown: (e) => { if (disabled) return; if (!allowsContinuousInteraction) return; e.currentTarget.setPointerCapture?.(e.pointerId); pressOriginRef.current = e.clientX; commit(indexAt(e.clientX)); }, onPointerMove: (e) => { if (disabled \|\| !allowsContinuousInteraction) return; if (e.buttons === 0) return; const origin = pressOriginRef.current; if (origin !== null && Math.abs(e.clientX - origin) >= SCRUB_SLOP_PX) setInteracting(true); commit(indexAt(e.clientX)); }, onPointerUp: endGesture, onPointerCancel: endGesture, children: [ plateVisible ? / @__PURE__ / jsx( GlassPrimitive, { "aria-hidden": "true", material: "frosted", shape: "pill", className: "lq-page-control-plate" }, "plate" ) : null, dots ] } ); }; var Panel = ({ label, labelProps, children, className, material, perf, id, ref }) => { const morphRef = useGlassMorphSurface(ref); const { props: { className: glassClassName, ...glassAttrs } } = useGlass({ material, perf }); const labelId = useId(); const hasLabel2 = label != null && label !== false && label !== true && label !== ""; return ( // `lq-panel` leads the class list — Button's idiom — so the surface stays // targetable and the SSR marker (`class="lq-panel…`) is truthful. // biome-ignore lint/a11y/useSemanticElements: role="group" is the correct WAI-ARIA primitive for a static titled container with no form-association semantics — never a native (the same reasoning shared/card.tsx records for GroupBox). The root must stay a because it IS the glass surface: the engine's class/data-glass-/--lq-glass-* land here, and 's UA-rendered border and legend layout would fight the material. /* @__PURE__ / jsx( "div", { ref: morphRef, ...glassAttrs, id, role: "group", "aria-labelledby": hasLabel2 ? labelId : void 0, className: ["lq-panel", glassClassName, className].filter(Boolean).join(" "), children: / @__PURE__ / jsxs(GlassMorphBoundary, { children: [ hasLabel2 ? / @__PURE__ / jsx("div", { id: labelId, className: "lq-panel-label", children: / @__PURE__ / jsx(TextLabel, { variant: "headline", weight: "semibold", color: "secondary", ...labelProps, children: label }) }) : null, / @__PURE__ / jsx("div", { className: "lq-panel-content", children }) ] }) } ) ); }; Panel.displayName = "Panel"; var Thumb = ({ className, coatClassName, ref }) => / @__PURE__ / jsx( GlassPrimitive, { ref, as: "span", material: "clear", perf: "high", shape: "pill", className: ["lq-thumb", className].filter(Boolean).join(" "), children: / @__PURE__ / jsx("span", { "aria-hidden": "true", className: ["lq-thumb-coat", coatClassName].filter(Boolean).join(" ") }) } ); var DRAG_DEADZONE = 4; var GLIDE_DEFLATE_MS = 300; var Picker = ({ items, labelProps, value, defaultValue, onChange, disabled = false, variant = "menu", className, ref: forwardedRef, open, defaultOpen = false, onOpenChange, placement = "top-left", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby }) => { const [resolved, handleSelect] = useControllableState({ value, defaultValue: defaultValue ?? items[0]?.value ?? "", onChange, componentName: "Picker", propName: "value" }); useEffect(() => { if (process.env.NODE_ENV === "production") return; const seen = / @__PURE__ / new Set(); for (const item of items) { if (seen.has(item.value)) { const { error: reportDuplicate } = console; reportDuplicate( `Picker: duplicate item value ${JSON.stringify(item.value)} \u2014 item \`value\`s must be unique; the first match wins and later duplicates are unreachable.` ); break; } seen.add(item.value); } }, [items]); const rootRef = useRef(null); const setRef = (node) => { rootRef.current = node; if (typeof forwardedRef === "function") forwardedRef(node); else if (forwardedRef != null) { forwardedRef.current = node; } }; if (variant === "segmented") { return / @__PURE__ / jsx( PickerSegmentedImpl, { items, labelProps, selectedValue: resolved, disabled, ariaLabel, ariaLabelledby, onSelect: handleSelect, setRef, rootRef, className } ); } if (variant === "wheel") { return / @__PURE__ / jsx( Wheel, { columns: [{ items, selectedValue: resolved, onSelect: handleSelect, ariaLabel, ariaLabelledby }], labelProps, disabled, setRef, className } ); } if (variant === "radioGroup") { return / @__PURE__ / jsx( PickerRadioGroupImpl, { items, labelProps, selectedValue: resolved, disabled, ariaLabel, ariaLabelledby, onSelect: handleSelect, setRef, className } ); } return / @__PURE__ / jsx( PickerMenuImpl, { items, labelProps, selectedValue: resolved, disabled, ariaLabel, ariaLabelledby, onSelect: handleSelect, setRef, className, open, defaultOpen, onOpenChange, placement } ); }; var popupGeometryFor = (placement) => ({ side: placement === "bottom-left" \|\| placement === "bottom-right" ? "top" : "bottom", align: placement === "top-left" \|\| placement === "bottom-left" ? "start" : "end" }); function PickerMenuImpl({ items, labelProps, selectedValue, disabled, ariaLabel, ariaLabelledby, onSelect, setRef, className, open, defaultOpen = false, onOpenChange, placement }) { const [rawOpen, setRawOpen] = useControllableState({ value: open, defaultValue: defaultOpen, onChange: onOpenChange, componentName: "Picker", propName: "open" }); const isOpen = disabled ? false : rawOpen; const setOpen = useCallback( (next) => { if (disabled) return; setRawOpen(next); }, [disabled, setRawOpen] ); const [activeIndex, setActiveIndex] = useState(-1); const triggerRef = useRef(null); const panelRef = useRef(null); useEffect(() => { if (!isOpen) { setActiveIndex(-1); return; } const seedIndex = items.findIndex((it) => it.value === selectedValue); setActiveIndex( (prev) => prev >= 0 && prev < items.length && items[prev]?.disabled !== true ? prev : seedIndex >= 0 ? seedIndex : edgeIndex(items, 1) ); }, [isOpen, items, selectedValue]); useEffect(() => { if (!isOpen \|\| activeIndex < 0) return; panelRef.current?.querySelector(`[data-menu-row-index="${activeIndex}"]`)?.focus(); }, [isOpen, activeIndex]); const handleSelect = (item) => { if (item.disabled) return; onSelect(item.value); setOpen(false); triggerRef.current?.focus(); }; const onOptionKeyDown = (e) => { if (e.key === "ArrowDown") { e.preventDefault(); setActiveIndex((i) => stepIndex(items, i, 1)); } else if (e.key === "ArrowUp") { e.preventDefault(); setActiveIndex((i) => stepIndex(items, i, -1)); } else if (e.key === "Home") { e.preventDefault(); setActiveIndex(edgeIndex(items, 1)); } else if (e.key === "End") { e.preventDefault(); setActiveIndex(edgeIndex(items, -1)); } }; const selectedLabel = items.find((it) => it.value === selectedValue)?.label ?? ""; const { side: popupSide, align: popupAlign } = popupGeometryFor(placement); return / @__PURE__ / jsx( "div", { ref: setRef, "data-variant": "menu", "data-state": isOpen ? "open" : "idle", "data-disabled": disabled \|\| void 0, "aria-disabled": disabled \|\| void 0, className: ["lq-picker", className].filter(Boolean).join(" "), children: / @__PURE__ / jsxs(Popup, { open: isOpen, onOpenChange: setOpen, placement: popupSide, align: popupAlign, hasPopup: "listbox", children: [ / @__PURE__ / jsx(Popup.Trigger, { asChild: true, disabled, children: / @__PURE__ / jsx( PressableSurface, { as: "button", ref: triggerRef, type: "button", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, disabled, "data-value": selectedValue, className: "lq-picker-trigger", contentClassName: "lq-picker-trigger-content", tabIndex: disabled ? -1 : 0, onKeyDown: (e) => { if (disabled) return; if (e.key === "ArrowDown") { e.preventDefault(); setOpen(true); } }, trailingIcon: / @__PURE__ / jsx(Icon, { name: "chevron-up-down", className: "lq-picker-chevron" }), children: / @__PURE__ / jsx("span", { className: "lq-picker-trigger-label", children: / @__PURE__ / jsx(TextLabel, { variant: "body", color: "inherit", ...labelProps, children: selectedLabel }) }) } ) }), / @__PURE__ / jsx( Popup.Content, { ref: panelRef, role: "listbox", perf: "high", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, children: items.map((item, i) => ( // The listbox option IS a MenuRow (the shared row every menu renders): // ariaRole="option" + aria-selected, the checkmark reserved in the // leading slot (shown only on the selected row so all labels align), // and the label's per-instance typography (labelProps, ADR-0028). / @__PURE__ / jsx( MenuRow, { ariaRole: "option", index: i, active: isOpen && i === activeIndex && !item.disabled, selected: item.value === selectedValue, disabled: item.disabled, leading: item.value === selectedValue ? / @__PURE__ / jsx(Icon, { name: "checkmark" }) : void 0, labelProps, label: item.label, onPress: () => handleSelect(item), onKeyDown: onOptionKeyDown }, item.value ) )) } ) ] }) } ); } function PickerSegmentedImpl({ items, labelProps, selectedValue, disabled, ariaLabel, ariaLabelledby, onSelect, setRef, rootRef, className }) { const selectedIndex = indexOf(items, selectedValue); const groupName = useId(); const pillRef = useRef(null); const seeded = useRef(false); const [dragging, setDragging] = useState(false); const drag = useRef({ active: false, moved: false, startX: 0, x: 0 }); const keyGlide = useRef({ bursting: false, timer: 0 }); const pointerActive = useRef(false); const lens = useLiquidLens(pillRef, { shape: "pill", ...LENS_PRESETS.segmented }); const { props: { className: glassClassName, ...glassAttrs } } = useGlass({ className }); const segWidth = useCallback(() => { const rect = rootRef.current?.getBoundingClientRect(); if (rect === void 0 \|\| rect.width === 0 \|\| items.length === 0) return 1; return rect.width / items.length; }, [items.length, rootRef]); const indicatorX = (clientX) => { const rect = rootRef.current?.getBoundingClientRect(); const w = segWidth(); if (rect === void 0) return drag.current.x; return Math.max(0, Math.min((items.length - 1) w, clientX - rect.left - w / 2)); }; useEffect(() => { if (lens === null \|\| selectedIndex < 0) return; lens.moveTo(selectedIndex * segWidth(), { immediate: !seeded.current }); seeded.current = true; }, [lens, selectedIndex, segWidth]); const indexAtX2 = (clientX) => { const rect = rootRef.current?.getBoundingClientRect(); if (rect === void 0 \|\| rect.width === 0) return selectedIndex; const i = Math.floor((clientX - rect.left) / (rect.width / items.length)); return Math.max(0, Math.min(items.length - 1, i)); }; const select = (index, opts) => { const next = items[index]; if (next === void 0 \|\| next.disabled) return; if (next.value !== selectedValue) onSelect(next.value); lens?.moveTo(opts?.px ?? index * segWidth(), opts?.follow ? { follow: true } : void 0); }; const scheduleDeflate = () => { window.clearTimeout(keyGlide.current.timer); keyGlide.current.timer = window.setTimeout(() => { keyGlide.current.bursting = false; lens?.release(); }, GLIDE_DEFLATE_MS); }; const selectFromKey = (index) => { if (!keyGlide.current.bursting) { keyGlide.current.bursting = true; lens?.grab(); } select(index); scheduleDeflate(); }; useEffect(() => () => window.clearTimeout(keyGlide.current.timer), []); return /* @__PURE__ / jsxs( "div", { ...glassAttrs, ref: setRef, role: "radiogroup", "data-variant": "segmented", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-disabled": disabled \|\| void 0, "data-state": dragging ? "dragging" : "idle", "data-disabled": disabled \|\| void 0, "data-size": "regular", "data-count": items.length, "data-distribution": "fill", className: ["lq-segmented-control", glassClassName].filter(Boolean).join(" "), onKeyDown: (e) => { if (disabled) return; let next = null; switch (e.key) { case "ArrowRight": case "ArrowDown": next = stepIndex(items, selectedIndex, 1); break; case "ArrowLeft": case "ArrowUp": next = stepIndex(items, selectedIndex, -1); break; case "Home": next = edgeIndex(items, 1); break; case "End": next = edgeIndex(items, -1); break; default: return; } e.preventDefault(); if (next === selectedIndex) return; selectFromKey(next); const inputs = e.currentTarget.querySelectorAll(".lq-segmented-control-input"); inputs[next]?.focus(); }, onPointerDown: (e) => { if (disabled) return; const idx = indexAtX2(e.clientX); if (items[idx]?.disabled) return; window.clearTimeout(keyGlide.current.timer); keyGlide.current.bursting = true; e.currentTarget.setPointerCapture(e.pointerId); pointerActive.current = true; drag.current = { active: true, moved: false, startX: e.clientX, x: idx segWidth() }; lens?.grab(); select(idx); }, onPointerMove: (e) => { const d = drag.current; if (!d.active) return; if (!d.moved && Math.abs(e.clientX - d.startX) < DRAG_DEADZONE) return; d.moved = true; setDragging(true); d.x = indicatorX(e.clientX); select(Math.round(d.x / segWidth()), { follow: true, px: d.x }); }, onPointerUp: () => { const d = drag.current; if (!d.active) return; d.active = false; setDragging(false); if (d.moved) { select(Math.round(d.x / segWidth())); keyGlide.current.bursting = false; lens?.release(); } else { select(indexAtX2(d.startX)); scheduleDeflate(); } window.setTimeout(() => { pointerActive.current = false; }, 0); }, onPointerCancel: () => { drag.current.active = false; setDragging(false); pointerActive.current = false; keyGlide.current.bursting = false; window.clearTimeout(keyGlide.current.timer); lens?.release(); }, children: [ /* @__PURE__ / jsx(Track, { className: "lq-segmented-control-indicator-track", children: / @__PURE__ / jsx(Thumb, { ref: pillRef, className: "lq-segmented-control-indicator", coatClassName: "lq-toggle-coat" }) }), items.map((item, i) => ( // Each segment is a real (native semantics + keyboard) // visually hidden behind its ; the label carries the glass styling // and the focus ring. Roving tabindex: only the selected, enabled input is // tab-stoppable. / @__PURE__ / jsxs("label", { className: "lq-segmented-control-label", "data-selected": i === selectedIndex \|\| void 0, children: [ / @__PURE__ / jsx( "input", { type: "radio", name: groupName, value: item.value, checked: i === selectedIndex, disabled: disabled \|\| item.disabled, "aria-checked": i === selectedIndex, "aria-disabled": item.disabled \|\| void 0, tabIndex: disabled \|\| item.disabled \|\| i !== (selectedIndex < 0 ? edgeIndex(items, 1) : selectedIndex) ? -1 : 0, className: "lq-segmented-control-input", onChange: () => { if (pointerActive.current) return; selectFromKey(i); } } ), item.icon, / @__PURE__ / jsx(TextLabel, { variant: "body", color: "inherit", ...labelProps, children: item.label }) ] }, item.value) )) ] } ); } function PickerRadioGroupImpl({ items, labelProps, selectedValue, disabled, ariaLabel, ariaLabelledby, onSelect, setRef, className }) { const selectedIndex = indexOf(items, selectedValue); const groupName = useId(); const tabTarget = selectedIndex < 0 ? edgeIndex(items, 1) : selectedIndex; const select = (index) => { const next = items[index]; if (next === void 0 \|\| next.disabled) return; if (next.value !== selectedValue) onSelect(next.value); }; return / @__PURE__ / jsx( "div", { ref: setRef, role: "radiogroup", "data-variant": "radioGroup", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-disabled": disabled \|\| void 0, "data-state": "idle", "data-disabled": disabled \|\| void 0, className: ["lq-picker", "lq-picker-radio-group", className].filter(Boolean).join(" "), onKeyDown: (e) => { if (disabled) return; let next = null; switch (e.key) { case "ArrowDown": case "ArrowRight": next = stepIndex(items, selectedIndex, 1); break; case "ArrowUp": case "ArrowLeft": next = stepIndex(items, selectedIndex, -1); break; case "Home": next = edgeIndex(items, 1); break; case "End": next = edgeIndex(items, -1); break; default: return; } e.preventDefault(); if (next < 0 \|\| next === selectedIndex) return; select(next); const inputs = e.currentTarget.querySelectorAll(".lq-picker-radio-input"); inputs[next]?.focus(); }, children: items.map((item, i) => ( // Each row is a native (native semantics + keyboard) // visually hidden behind its ; the label carries the row styling, // the hairline divider, and the focus ring. Roving tabindex: only the // checked (or first-enabled) input is tab-stoppable. / @__PURE__ / jsxs( "label", { className: "lq-picker-radio-row", "data-selected": i === selectedIndex \|\| void 0, "data-disabled": item.disabled \|\| void 0, children: [ / @__PURE__ / jsx( "input", { type: "radio", name: groupName, value: item.value, checked: i === selectedIndex, disabled: disabled \|\| item.disabled, "aria-checked": i === selectedIndex, "aria-disabled": item.disabled \|\| void 0, tabIndex: disabled \|\| item.disabled \|\| i !== tabTarget ? -1 : 0, className: "lq-picker-radio-input", onChange: () => { if (disabled) return; select(i); } } ), / @__PURE__ / jsx(TextLabel, { variant: "body", color: "inherit", ...labelProps, children: item.label }), i === selectedIndex ? / @__PURE__ / jsx(Icon, { name: "checkmark", className: "lq-picker-radio-check" }) : null ] }, item.value ) )) } ); } var Popover = ({ trigger, children, placement = "bottom", align = "center", open, defaultOpen = false, onOpenChange, material, perf, className, ref, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby }) => { const [resolvedOpen, setOpen] = useControllableState({ value: open, defaultValue: defaultOpen, onChange: onOpenChange, componentName: "Popover", propName: "open" }); const resolvedAriaLabel = ariaLabelledby !== void 0 ? ariaLabel : ariaLabel ?? "Popover"; return / @__PURE__ / jsxs(Popup, { open: resolvedOpen, onOpenChange: setOpen, placement, align, hasPopup: "dialog", children: [ / @__PURE__ / jsx(Popup.Trigger, { asChild: true, children: trigger }), / @__PURE__ / jsx( Popup.Content, { ref, role: "dialog", closeOnFocusOut: true, focusOnOpen: true, material: material ?? "frosted", perf, className: ["lq-popover", className].filter(Boolean).join(" "), "aria-label": resolvedAriaLabel, "aria-labelledby": ariaLabelledby, children } ) ] }); }; var SPOKES = Array.from({ length: 12 }, (_, i) => { const t = (i + 1) / 12; return { deg: i 30, opacity: (t * t).toFixed(3) }; }); var ProgressIndicator = ({ variant, value, children, labelProps, size: size2 = "regular", tint = "blue", className, ref: forwardedRef, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby }) => { const resolvedVariant = variant ?? (value !== void 0 ? "linear" : "circular"); const isDeterminate = resolvedVariant === "linear" && value !== void 0 && Number.isFinite(value); const clamped = isDeterminate ? clampFinite(value, 0, 1) : 0; const ariaValueNow = isDeterminate ? Math.round(clamped * 100) : void 0; const setRef = (node) => { if (typeof forwardedRef === "function") forwardedRef(node); else if (forwardedRef !== null && forwardedRef !== void 0) { forwardedRef.current = node; } }; return /* @__PURE__ / jsxs( "div", { ref: setRef, role: "progressbar", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-valuenow": ariaValueNow, "aria-valuemin": isDeterminate ? 0 : void 0, "aria-valuemax": isDeterminate ? 100 : void 0, "data-state": isDeterminate ? "determinate" : "indeterminate", "data-variant": resolvedVariant, "data-size": size2, "data-tint": tint, className: ["lq-progress", className].filter(Boolean).join(" "), children: [ resolvedVariant === "circular" ? ( / SVG spoked spinner — 12 radial tick marks at 30° intervals, each with decreasing opacity from the "head" (spoke 0 = brightest) to the "tail" (spoke 11 = most transparent). CSS rotation animates the whole SVG so the bright head appears to sweep clockwise, matching the iOS CAReplicatorLayer spoke-fade pattern exactly. The SVG is sized by the --lq-progress-spinner-d CSS custom prop (resolved via [data-size] attribute selectors in styles.css). / / @__PURE__ / jsx("svg", { "aria-hidden": "true", className: "lq-progress-spinner", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: SPOKES.map(({ deg, opacity }) => / @__PURE__ / jsx( "rect", { x: "11", y: "3", width: "2", height: "5", rx: "1", fill: "currentColor", opacity, transform: `rotate(${deg} 12 12)` }, deg )) }) ) : null, / @__PURE__ / jsx( TextLabel, { className: "lq-progress-label", variant: "body", color: resolvedVariant === "linear" ? "primary" : "secondary", ...labelProps, children } ), resolvedVariant === "linear" ? ( / The bar delegates to StatusBar, which wraps Track (the Slider rail minus the thumb): a pill groove + a tinted fill whose width is driven by --lq-sb-fill-w (written by StatusBar on the .lq-track span via useLayoutEffect + setProperty). No knob — the bar is a status display, not an input. / / @__PURE__ / jsx( StatusBar, { value, className: "lq-progress-track", railClassName: "lq-progress-rail", fillClassName: "lq-progress-fill" } ) ) : null ] } ); }; var SegmentedControlItem = (_props) => null; SegmentedControlItem.displayName = "SegmentedControl.Item"; var DRAG_DEADZONE2 = 4; var GLIDE_DEFLATE_MS2 = 300; var SegmentedControlRoot = ({ children, labelProps, value, defaultValue, onChange, disabled = false, size: size2 = "regular", distribution = "fill", className, ref: forwardedRef, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby }) => { const childArray = Children.toArray(children); const itemElements = childArray.filter( (child) => isValidElement(child) && child.type === SegmentedControlItem ); if (process.env.NODE_ENV !== "production" && itemElements.length !== childArray.length) { const { error: reportNonItemChildren } = console; reportNonItemChildren( "[SegmentedControl] `children` must be `SegmentedControl.Item` elements only \u2014 fragments, wrapper components, and stray text are ignored. Pass `.Item` children directly." ); } const items = resolveCollection( itemElements.map((child) => ({ id: child.props.value, value: child.props.value, label: child.props.children, disabled: child.props.disabled })), "SegmentedControl" ); const [rawValue, setValue] = useControllableState({ value, defaultValue: defaultValue ?? items[0]?.value ?? "", onChange, componentName: "SegmentedControl", propName: "value" }); const activeValue = resolveActiveId(items, rawValue); const selectedIndex = activeValue === void 0 ? -1 : indexOf(items, activeValue); const firstEnabledIndex = edgeIndex(items, 1); const tabStopIndex = selectedIndex >= 0 ? selectedIndex : firstEnabledIndex; const lensIndex = selectedIndex < 0 ? 0 : selectedIndex; const groupName = useId(); const trackRef = useRef(null); const pillRef = useRef(null); const seeded = useRef(false); const [dragging, setDragging] = useState(false); const drag = useRef({ active: false, moved: false, startX: 0, x: 0 }); const keyGlide = useRef({ bursting: false, timer: 0 }); const pointerActive = useRef(false); const lens = useLiquidLens(pillRef, { shape: "pill", ...LENS_PRESETS.segmented }); const { props: { className: glassClassName, ...glassAttrs } } = useGlass({ className }); const setRef = (node) => { trackRef.current = node; if (typeof forwardedRef === "function") forwardedRef(node); else if (forwardedRef !== null && forwardedRef !== void 0) { forwardedRef.current = node; } }; const segWidth = useCallback(() => { const rect = trackRef.current?.getBoundingClientRect(); if (rect === void 0 \|\| rect.width === 0 \|\| items.length === 0) return 1; return rect.width / items.length; }, [items.length]); const indicatorX = (clientX) => { const rect = trackRef.current?.getBoundingClientRect(); const w = segWidth(); if (rect === void 0) return drag.current.x; return Math.max(0, Math.min((items.length - 1) w, clientX - rect.left - w / 2)); }; useEffect(() => { if (lens === null) return; lens.moveTo(lensIndex * segWidth(), { immediate: !seeded.current }); seeded.current = true; }, [lens, lensIndex, segWidth]); const indexAtX2 = (clientX) => { const rect = trackRef.current?.getBoundingClientRect(); if (rect === void 0 \|\| rect.width === 0) return lensIndex; const i = Math.floor((clientX - rect.left) / (rect.width / items.length)); return Math.max(0, Math.min(items.length - 1, i)); }; const select = (index, opts) => { const next = items[index]; if (next === void 0 \|\| next.disabled) return; setValue(next.value); lens?.moveTo(opts?.px ?? index * segWidth(), opts?.follow ? { follow: true } : void 0); }; const scheduleDeflate = () => { window.clearTimeout(keyGlide.current.timer); keyGlide.current.timer = window.setTimeout(() => { keyGlide.current.bursting = false; lens?.release(); }, GLIDE_DEFLATE_MS2); }; const selectFromKey = (index) => { if (!keyGlide.current.bursting) { keyGlide.current.bursting = true; lens?.grab(); } select(index); scheduleDeflate(); }; useEffect(() => () => window.clearTimeout(keyGlide.current.timer), []); return /* @__PURE__ / jsxs( "div", { ...glassAttrs, ref: setRef, role: "radiogroup", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-disabled": disabled \|\| void 0, "data-state": dragging ? "dragging" : "idle", "data-disabled": disabled \|\| void 0, "data-empty": selectedIndex < 0 \|\| void 0, "data-size": size2, "data-count": items.length, "data-distribution": distribution, className: ["lq-segmented-control", glassClassName].filter(Boolean).join(" "), onKeyDown: (e) => { if (disabled) return; const base = tabStopIndex; let next = null; switch (e.key) { case "ArrowRight": case "ArrowDown": next = stepIndex(items, base, 1); break; case "ArrowLeft": case "ArrowUp": next = stepIndex(items, base, -1); break; case "Home": next = edgeIndex(items, 1); break; case "End": next = edgeIndex(items, -1); break; default: return; } e.preventDefault(); if (next === null \|\| next < 0 \|\| next === base) return; selectFromKey(next); const inputs = e.currentTarget.querySelectorAll(".lq-segmented-control-input"); inputs[next]?.focus(); }, onPointerDown: (e) => { if (disabled) return; const idx = indexAtX2(e.clientX); if (items[idx]?.disabled) return; window.clearTimeout(keyGlide.current.timer); keyGlide.current.bursting = true; pointerActive.current = true; if (idx === selectedIndex) { e.currentTarget.setPointerCapture(e.pointerId); drag.current = { active: true, moved: false, startX: e.clientX, x: idx segWidth() }; } lens?.grab(); select(idx); }, onPointerMove: (e) => { const d = drag.current; if (!d.active) return; if (!d.moved && Math.abs(e.clientX - d.startX) < DRAG_DEADZONE2) return; d.moved = true; setDragging(true); d.x = indicatorX(e.clientX); select(Math.round(d.x / segWidth()), { follow: true, px: d.x }); }, onPointerUp: () => { const d = drag.current; if (!d.active && !pointerActive.current) return; if (d.active) { d.active = false; setDragging(false); if (d.moved) { const target = Math.round(d.x / segWidth()); if (items[target] === void 0 \|\| items[target].disabled) { lens?.moveTo(lensIndex * segWidth()); } else { select(target); } keyGlide.current.bursting = false; lens?.release(); } else { select(indexAtX2(d.startX)); scheduleDeflate(); } } else { scheduleDeflate(); } window.setTimeout(() => { pointerActive.current = false; }, 0); }, onPointerCancel: () => { drag.current.active = false; setDragging(false); pointerActive.current = false; keyGlide.current.bursting = false; window.clearTimeout(keyGlide.current.timer); lens?.release(); }, children: [ /* @__PURE__ / jsx(Track, { className: "lq-segmented-control-indicator-track", children: / @__PURE__ / jsx(Thumb, { ref: pillRef, className: "lq-segmented-control-indicator", coatClassName: "lq-toggle-coat" }) }), items.map((item, i) => ( // Each segment is a real (native semantics + // keyboard) visually hidden behind its ; the label carries the // glass styling and the focus ring (via :has(:focus-visible)). Roving // tabindex: exactly one enabled segment is tab-stoppable — the selected // one, or (with no selection) the first enabled segment for keyboard entry. / @__PURE__ / jsxs("label", { className: "lq-segmented-control-label", "data-selected": i === selectedIndex \|\| void 0, children: [ / @__PURE__ / jsx( "input", { type: "radio", name: groupName, value: item.value, checked: i === selectedIndex, disabled: disabled \|\| item.disabled, "aria-checked": i === selectedIndex, "aria-disabled": item.disabled \|\| void 0, tabIndex: disabled \|\| item.disabled \|\| i !== tabStopIndex ? -1 : 0, className: "lq-segmented-control-input", onChange: () => { if (pointerActive.current) return; selectFromKey(i); } } ), / @__PURE__ / jsx(TextLabel, { variant: "body", color: "inherit", ...labelProps, children: item.label }) ] }, item.value) )) ] } ); }; SegmentedControlRoot.displayName = "SegmentedControl"; var SegmentedControl = Object.assign(SegmentedControlRoot, { Item: SegmentedControlItem }); var isAbsoluteUrl = (value) => { try { new URL(value); return true; } catch { return false; } }; var ShareLink = ({ item, subject, message, children, leadingIcon, trailingIcon, onPress, onClick, onShare, onError, variant = "automatic", size: size2, tint, disabled = false, className, ref: forwardedRef, "aria-label": ariaLabel }) => { const mountedRef = useRef(true); useEffect(() => { mountedRef.current = true; return () => { mountedRef.current = false; }; }, []); const handleShare = () => { const payload = isAbsoluteUrl(item) ? { url: item, ...message !== void 0 ? { text: message } : {} } : { text: message !== void 0 ? `${message} ${item}` : item }; if (subject !== void 0) payload.title = subject; const nav = typeof navigator === "undefined" ? void 0 : navigator; if (nav?.share) { nav.share(payload).then(() => { if (mountedRef.current) onShare?.(item); }).catch((error) => { if (error instanceof DOMException && error.name === "AbortError") return; if (onError) { if (mountedRef.current) onError(error); return; } globalThis.reportError(error); }); return; } onShare?.(item); }; const useDefaultLabel = children === void 0 && leadingIcon === void 0 && trailingIcon === void 0; return / @__PURE__ / jsx( Link, { variant, size: size2, tint, disabled, className, ref: forwardedRef, onClick, onPress: () => { onPress?.(); handleShare(); }, "aria-label": ariaLabel, leadingIcon: useDefaultLabel ? / @__PURE__ / jsx(Icon, { name: "share" }) : leadingIcon, trailingIcon, children: children ?? (useDefaultLabel ? "Share" : void 0) } ); }; var DETENT_VH = { medium: 50, large: 100, full: 100 }; var clamp2 = (n, lo, hi) => Math.min(hi, Math.max(lo, n)); var detentVh = (detent) => typeof detent === "object" ? clamp2(detent.fraction 100, 0, 100) : DETENT_VH[detent]; var settleHeight = (card, vh) => { card.style.setProperty("--lq-sheet-height", `${vh}dvh`); }; var Sheet = ({ children, height = "detents", detents = ["large"], dragIndicator = "visible", cornerRadius = "22", open, defaultOpen = false, onOpenChange, dismissible, className, ref, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby }) => { const [resolvedOpen, setOpen] = useControllableState({ value: open, defaultValue: defaultOpen, onChange: onOpenChange, componentName: "Sheet", propName: "open" }); const stops = (detents.length > 0 ? detents : ["large"]).map(detentVh); const [activeIndex, setActiveIndex] = useState(0); const restingVh = stops[activeIndex] ?? DETENT_VH.large; const cardRef = useRef(null); const dismissVh = useRef(null); const prevOpen = useRef(resolvedOpen); if (resolvedOpen && !prevOpen.current) { dismissVh.current = null; if (activeIndex !== 0) setActiveIndex(0); } prevOpen.current = resolvedOpen; const setCard = useCallback( (el) => { cardRef.current = el; if (el === null) return; el.style.setProperty("--lq-sheet-height", dismissVh.current !== null ? `${dismissVh.current}dvh` : height === "content" ? "auto" : `${restingVh}dvh`); }, [restingVh, height] ); const cardRefs = useMergedRefs(setCard, ref); const dragRef = useRef(null); useEffect(() => { if (resolvedOpen) return; const drag = dragRef.current; if (drag === null) return; drag.teardown(); dragRef.current = null; cardRef.current?.removeAttribute("data-dragging"); }, [resolvedOpen]); useEffect( () => () => { dragRef.current?.teardown(); dragRef.current = null; }, [] ); const onHandlePointerDown = (event) => { const card = cardRef.current; if (card === null \|\| dragRef.current !== null) return; const handle = event.currentTarget; const { pointerId } = event; const startY = event.clientY; const startVh = height === "content" ? card.getBoundingClientRect().height / window.innerHeight * 100 : restingVh; const dragStops = height === "content" ? [startVh] : stops; const restoreHeight = () => { if (height === "content") card.style.setProperty("--lq-sheet-height", "auto"); else settleHeight(card, restingVh); }; card.setAttribute("data-dragging", ""); try { handle.setPointerCapture(pointerId); } catch { } const heightAt = (clientY) => clamp2(startVh - (clientY - startY) / window.innerHeight * 100, 0, 100); const end = () => { const drag = dragRef.current; if (drag === null) return; drag.teardown(); dragRef.current = null; card.removeAttribute("data-dragging"); }; const onMove = (moveEvent) => { if (moveEvent.pointerId !== pointerId) return; card.style.setProperty("--lq-sheet-height", `${heightAt(moveEvent.clientY)}dvh`); }; const onUp = (upEvent) => { if (upEvent.pointerId !== pointerId) return; end(); const current = heightAt(upEvent.clientY); const canDismiss = dismissible !== false; let nearest = canDismiss ? 0 : Math.min(...dragStops); for (const stop of dragStops) { if (Math.abs(stop - current) < Math.abs(nearest - current)) nearest = stop; } if (nearest === 0) { dismissVh.current = current; settleHeight(card, current); setOpen(false); return; } if (height === "content") { restoreHeight(); return; } settleHeight(card, nearest); const index = stops.indexOf(nearest); if (index !== activeIndex) setActiveIndex(index); }; const abort = (abortEvent) => { if ("pointerId" in abortEvent && abortEvent.pointerId !== pointerId) return; end(); restoreHeight(); }; const registrations = [ [window, "pointermove", onMove], [window, "pointerup", onUp], [window, "pointercancel", abort], [window, "blur", abort], [handle, "lostpointercapture", abort] ]; for (const [target, type, listener] of registrations) target.addEventListener(type, listener); dragRef.current = { pointerId, teardown: () => { for (const [target, type, listener] of registrations) target.removeEventListener(type, listener); try { handle.releasePointerCapture(pointerId); } catch { } } }; }; return /* @__PURE__ / jsx(Overlay, { open: resolvedOpen, onOpenChange: setOpen, dismissible, className: "lq-overlay-sheet", children: / @__PURE__ / jsxs( "div", { ref: cardRefs, className: ["lq-sheet", className].filter(Boolean).join(" "), "data-corner": cornerRadius, "data-height": height, role: "dialog", "aria-modal": "true", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, tabIndex: -1, children: [ / @__PURE__ / jsx("div", { className: "lq-sheet-handle", "aria-hidden": "true", onPointerDown: onHandlePointerDown, children: dragIndicator === "visible" ? / @__PURE__ / jsx("span", { className: "lq-sheet-grabber" }) : null }), / @__PURE__ / jsx("div", { className: "lq-sheet-content", children }) ] } ) }); }; // src/shared/passthrough.ts function ariaDataProps(rest) { const out = {}; for (const key2 of Object.keys(rest)) { if (key2.startsWith("aria-") \|\| key2.startsWith("data-")) { out[key2] = rest[key2]; } } return out; } var SidebarContext = createContext(null); var DepthContext = createContext(0); function useSidebar() { const context = useContext(SidebarContext); if (!context) throw new Error("Sidebar components must be rendered inside Sidebar."); return context; } var classes = (...values) => values.filter(Boolean).join(" "); function indentAttributes(depth) { const indent = depth === 0 ? "calc(var(--lq-space-12) - var(--lq-space-12))" : `calc(${Array.from({ length: depth }, () => "var(--lq-space-12)").join(" + ")})`; return { style: { "--lq-sidebar-indent": indent } }; } function SidebarHeader({ children, className, ref, ...rest }) { return / @__PURE__ / jsx("div", { ...ariaDataProps(rest), ref, className: classes("lq-sidebar-header", className), children }); } function SidebarFooter({ children, className, ref, ...rest }) { return / @__PURE__ / jsx("div", { ...ariaDataProps(rest), ref, className: classes("lq-sidebar-footer", className), children }); } function SidebarSection({ label, labelProps, children, className, ref, ...rest }) { useSidebar(); const labelId = useId(); return / @__PURE__ / jsxs( "section", { ...ariaDataProps(rest), ref, className: classes("lq-sidebar-section", className), "aria-labelledby": labelId, children: [ / @__PURE__ / jsx("div", { id: labelId, className: "lq-sidebar-section-label", children: / @__PURE__ / jsx(TextLabel, { variant: "caption", weight: "semibold", color: "secondary", ...labelProps, children: label }) }), / @__PURE__ / jsx("div", { className: "lq-sidebar-section-content", children }) ] } ); } function SidebarGroup({ label, icon, labelProps, children, expanded, defaultExpanded = false, onExpandedChange, className, ref, ...rest }) { useSidebar(); const depth = useContext(DepthContext); const contentId = useId(); const triggerRef = useRef(null); const contentRef = useRef(null); const [isExpanded, setExpanded] = useControllableState({ value: expanded, defaultValue: defaultExpanded, onChange: onExpandedChange, componentName: "Sidebar.Group", propName: "expanded" }); useLayoutEffect(() => { const content = contentRef.current; if (!isExpanded && content?.contains(content.ownerDocument.activeElement)) triggerRef.current?.focus(); }, [isExpanded]); return / @__PURE__ / jsxs( "div", { ...ariaDataProps(rest), ...indentAttributes(depth), ref, className: classes("lq-sidebar-group", className), "data-expanded": isExpanded, children: [ / @__PURE__ / jsxs( Button, { ref: triggerRef, variant: "plain", className: "lq-sidebar-row lq-sidebar-group-trigger", "data-nested": depth > 0, "aria-expanded": isExpanded, "aria-controls": contentId, onPress: () => setExpanded(!isExpanded), children: [ / @__PURE__ / jsx("span", { className: "lq-sidebar-disclosure", "aria-hidden": "true", children: / @__PURE__ / jsx(Icon, { name: "chevron-right" }) }), icon != null && / @__PURE__ / jsx("span", { className: "lq-sidebar-icon", "aria-hidden": "true", children: icon }), / @__PURE__ / jsx("span", { className: "lq-sidebar-label", children: / @__PURE__ / jsx(TextLabel, { variant: "body", color: "inherit", ...labelProps, children: label }) }) ] } ), / @__PURE__ / jsx("div", { id: contentId, ref: contentRef, className: "lq-sidebar-group-content", hidden: !isExpanded, children: / @__PURE__ / jsx(DepthContext, { value: depth + 1, children }) }) ] } ); } function SidebarItem(props) { const { value, children, icon, labelProps, disabled = false, className, ...rest } = props; const { value: selectedValue, select } = useSidebar(); const depth = useContext(DepthContext); const selected = selectedValue === value; const rowProps = { ...ariaDataProps(rest), className: classes("lq-sidebar-row", "lq-sidebar-item", className), "data-selected": selected, "data-disabled": disabled \|\| void 0, "data-nested": depth > 0 }; const content = / @__PURE__ / jsxs(Fragment, { children: [ / @__PURE__ / jsx("span", { className: "lq-sidebar-disclosure", "aria-hidden": "true" }), icon != null && / @__PURE__ / jsx("span", { className: "lq-sidebar-icon", "aria-hidden": "true", children: icon }), / @__PURE__ / jsx("span", { className: "lq-sidebar-label", children: / @__PURE__ / jsx(TextLabel, { variant: "body", color: "inherit", ...labelProps, children }) }) ] }); const onLinkClick = (event) => { if (disabled) { event.preventDefault(); return; } if (event.defaultPrevented \|\| event.button !== 0 \|\| event.metaKey \|\| event.ctrlKey \|\| event.shiftKey \|\| event.altKey \|\| props.target && props.target !== "_self") return; select(value); }; return / @__PURE__ / jsx("div", { className: "lq-sidebar-item-container", ...indentAttributes(depth), children: props.href !== void 0 ? / @__PURE__ / jsx( "a", { ...rowProps, ref: props.ref, href: props.href, target: props.target, rel: props.target === "_blank" ? `${props.rel ?? ""} noopener noreferrer`.trim() : props.rel, "aria-current": selected ? "page" : void 0, "aria-disabled": disabled \|\| void 0, onClick: onLinkClick, onAuxClick: (event) => { if (disabled) event.preventDefault(); }, children: content } ) : / @__PURE__ / jsx( Button, { ...rowProps, ref: props.ref, variant: "plain", disabled, "aria-current": selected ? "true" : void 0, onPress: () => select(value), children: content } ) }); } function partitionSlots(children) { const slots = { header: [], body: [], footer: [] }; const visit = (nodes, parentKey = "") => { for (const [index, node] of Children.toArray(nodes).entries()) { const key2 = `${parentKey}/${isValidElement(node) ? node.key : index}`; if (isValidElement(node) && node.type === Fragment$1) visit(node.props.children, key2); else { const child = / @__PURE__ / jsx(Fragment$1, { children: node }, key2); if (isValidElement(node) && node.type === SidebarHeader) slots.header.push(child); else if (isValidElement(node) && node.type === SidebarFooter) slots.footer.push(child); else slots.body.push(child); } } }; visit(children); return slots; } function SidebarRoot({ children, value, defaultValue = null, onChange, tint = "accent", className, ref, id, dir, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...rest }) { const [selection, select] = useControllableState({ value, defaultValue, onChange, componentName: "Sidebar", propName: "value" }); const context = useMemo(() => ({ value: selection, select }), [selection, select]); const { props: glassProps } = useGlass({ material: "regular", perf: "low" }); const { className: glassClassName, ...glassAttrs } = glassProps; const slots = partitionSlots(children); return / @__PURE__ / jsx(SidebarContext, { value: context, children: / @__PURE__ / jsx(DepthContext, { value: 0, children: / @__PURE__ / jsxs( "nav", { ...glassAttrs, ...ariaDataProps(rest), ref, id, dir, className: classes("lq-sidebar", glassClassName, className), "data-tint": tint, "aria-label": ariaLabel ?? (ariaLabelledby ? void 0 : "Navigation"), "aria-labelledby": ariaLabelledby, children: [ slots.header, / @__PURE__ / jsx("div", { className: "lq-sidebar-content", children: slots.body }), slots.footer ] } ) }) }); } var Sidebar = Object.assign(SidebarRoot, { Header: SidebarHeader, Footer: SidebarFooter, Section: SidebarSection, Group: SidebarGroup, Item: SidebarItem }); var CONTINUOUS_STEP_FRACTION = 0.01; var CONTINUOUS_PRECISION_DIGITS = 6; var roundToRange = (n, span) => { if (span <= 0) return n; const decimals = Math.max(0, Math.min(15, Math.ceil(-Math.log10(span)) + CONTINUOUS_PRECISION_DIGITS)); const factor = 10 * decimals; return Math.round(n * factor) / factor; }; var PAGE_STEP_FRACTION = 0.1; var KEY_GLIDE_IDLE_MS = 140; var Slider = ({ value, defaultValue, onChange, onEditingChanged, min = 0, max = 1, step = 0, variant = "plain", minLabel, maxLabel, labelProps, disabled = false, tint = "accent", className, ref: forwardedRef, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-valuetext": ariaValueText }) => { const rawMin = coerceFinite(min, 0); const rawMax = coerceFinite(max, 1); const loBound = Math.min(rawMin, rawMax); const hiBound = Math.max(rawMin, rawMax); const safeStep = Number.isFinite(step) && step > 0 ? step : 0; const quantise = useCallback( (raw) => { const bounded = clampFinite(raw, loBound, hiBound); if (safeStep <= 0) return roundToRange(bounded, hiBound - loBound); const snapped = loBound + Math.round((bounded - loBound) / safeStep) * safeStep; return clampFinite(snapped, loBound, hiBound); }, [loBound, hiBound, safeStep] ); const [sliderValue, setSliderValue] = useControllableState({ value, defaultValue: quantise(defaultValue ?? loBound), onChange, componentName: "Slider", propName: "value" }); const current = quantise(sliderValue); const rootRef = useRef(null); const trackRef = useRef(null); const thumbRef = useRef(null); const seeded = useRef(false); const lastEmitted = useRef(current); const [dragging, setDragging] = useState(false); const keyGlide = useRef({ bursting: false, timer: 0, lastPx: 0 }); const editingRef = useRef(false); const onEditingChangedRef = useRef(onEditingChanged); onEditingChangedRef.current = onEditingChanged; const emitEditing = (editing) => { editingRef.current = editing; onEditingChanged?.(editing); }; const lens = useLiquidLens(trackRef, { shape: "pill", ...LENS_PRESETS.thumb }); const setRef = (node) => { rootRef.current = node; if (typeof forwardedRef === "function") forwardedRef(node); else if (forwardedRef !== null && forwardedRef !== void 0) { forwardedRef.current = node; } }; const fractionOf = useCallback( (v) => hiBound > loBound ? (v - loBound) / (hiBound - loBound) : 0, [loBound, hiBound] ); const lensX = useCallback((fraction) => { const rect = trackRef.current?.getBoundingClientRect(); if (rect === void 0 \|\| rect.width === 0) return fraction; return fraction * rect.width; }, []); useEffect(() => { lastEmitted.current = current; if (lens === null) return; lens.moveTo(lensX(fractionOf(current)), { immediate: !seeded.current }); seeded.current = true; }, [lens, current, fractionOf, lensX]); useEffect(() => { if (value !== void 0) return; const clamped = quantise(sliderValue); if (!Object.is(clamped, sliderValue)) setSliderValue(clamped); }, [value, quantise, sliderValue, setSliderValue]); useEffect(() => { if (disabled) rootRef.current?.blur(); }, [disabled]); const commit = (raw) => { const next = quantise(raw); if (!Object.is(next, lastEmitted.current)) { lastEmitted.current = next; setSliderValue(next); } const snapping = safeStep > 0; lens?.moveTo(lensX(fractionOf(next)), snapping ? { immediate: dragging } : { follow: dragging }); }; const commitFromKey = (raw) => { const next = quantise(raw); if (!Object.is(next, lastEmitted.current)) { lastEmitted.current = next; setSliderValue(next); } const px = lensX(fractionOf(next)); keyGlide.current.lastPx = px; if (!keyGlide.current.bursting) { keyGlide.current.bursting = true; lens?.grab(); } lens?.moveTo(px, { follow: true }); window.clearTimeout(keyGlide.current.timer); keyGlide.current.timer = window.setTimeout(() => { keyGlide.current.bursting = false; lens?.release(); }, KEY_GLIDE_IDLE_MS); }; useEffect( () => () => { window.clearTimeout(keyGlide.current.timer); if (editingRef.current) { editingRef.current = false; onEditingChangedRef.current?.(false); } }, [] ); const valueAt = (clientX) => { const rect = trackRef.current?.getBoundingClientRect(); if (rect === void 0 \|\| rect.width === 0) return current; const raw = clampFinite((clientX - rect.left) / rect.width, 0, 1); const fraction = isRtl(trackRef.current) ? 1 - raw : raw; return loBound + fraction * (hiBound - loBound); }; const keyValue = (key2) => { const span = hiBound - loBound; const stepDelta = safeStep > 0 ? safeStep : span * CONTINUOUS_STEP_FRACTION; const pageDelta = span * PAGE_STEP_FRACTION; switch (key2) { case "ArrowRight": case "ArrowUp": return current + stepDelta; case "ArrowLeft": case "ArrowDown": return current - stepDelta; case "Home": return loBound; case "End": return hiBound; case "PageUp": return current + pageDelta; case "PageDown": return current - pageDelta; default: return null; } }; return /* @__PURE__ / jsxs( "div", { ref: setRef, role: "slider", tabIndex: disabled ? -1 : 0, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-orientation": "horizontal", "aria-valuenow": current, "aria-valuemin": loBound, "aria-valuemax": hiBound, "aria-valuetext": ariaValueText, "aria-disabled": disabled \|\| void 0, "data-state": dragging ? "dragging" : "idle", "data-disabled": disabled \|\| void 0, "data-variant": variant, "data-tint": tint, className: ["lq-slider", className].filter(Boolean).join(" "), onKeyDown: (e) => { if (disabled) return; const next = keyValue(e.key); if (next === null) return; e.preventDefault(); commitFromKey(next); }, onPointerDown: (e) => { if (disabled) return; lastEmitted.current = current; window.clearTimeout(keyGlide.current.timer); keyGlide.current.bursting = false; e.currentTarget.setPointerCapture(e.pointerId); setDragging(true); emitEditing(true); lens?.grab(); commit(valueAt(e.clientX)); }, onPointerMove: (e) => { if (disabled) return; if (e.buttons === 0) return; commit(valueAt(e.clientX)); }, onPointerUp: () => { setDragging(false); emitEditing(false); lens?.release(); }, onPointerCancel: () => { setDragging(false); emitEditing(false); lens?.release(); }, children: [ variant === "bounds" && minLabel !== void 0 ? / @__PURE__ / jsx("span", { "aria-hidden": "true", className: "lq-slider-bound lq-slider-bound-min", children: / @__PURE__ / jsx(TextLabel, { variant: "footnote", color: "secondary", ...labelProps, children: minLabel }) }) : null, / @__PURE__ / jsx( StatusBar, { ref: trackRef, className: "lq-slider-track", railClassName: "lq-slider-rail", fillClassName: "lq-slider-fill", children: / @__PURE__ / jsx(Thumb, { ref: thumbRef, className: "lq-slider-thumb", coatClassName: "lq-slider-coat" }) } ), variant === "bounds" && maxLabel !== void 0 ? / @__PURE__ / jsx("span", { "aria-hidden": "true", className: "lq-slider-bound lq-slider-bound-max", children: / @__PURE__ / jsx(TextLabel, { variant: "footnote", color: "secondary", ...labelProps, children: maxLabel }) }) : null ] } ); }; var Stepper = ({ value, defaultValue, onChange, min, max, step = 1, children, labelProps, onIncrement, onDecrement, onEditingChanged, disabled = false, className, ref: forwardedRef, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-valuetext": ariaValueText }) => { const isCallback = onIncrement !== void 0 \|\| onDecrement !== void 0; const safeStep = Number.isFinite(step) && step > 0 ? step : 1; const loRaw = coerceFinite(min, -Infinity); const hiRaw = coerceFinite(max, Infinity); const lo = Math.min(loRaw, hiRaw); const hi = Math.max(loRaw, hiRaw); const loFallback = lo === -Infinity ? 0 : lo; const seed = clampFinite(defaultValue !== void 0 ? coerceFinite(defaultValue, 0) : coerceFinite(min, 0), lo, hi); const [stepperValue, setStepperValue] = useControllableState({ value, defaultValue: seed, onChange, shouldNotify: (next, previous) => !Object.is(next, coerceFinite(previous, loFallback)), componentName: "Stepper", propName: "value" }); const current = isCallback ? 0 : clampFinite(coerceFinite(stepperValue, loFallback), lo, hi); const atMin = !isCallback && current <= lo && lo !== -Infinity; const atMax = !isCallback && current >= hi && hi !== Infinity; const setRef = (node) => { if (typeof forwardedRef === "function") forwardedRef(node); else if (forwardedRef !== null && forwardedRef !== void 0) { forwardedRef.current = node; } }; const commit = (rawNext) => { setStepperValue(clampFinite(rawNext, lo, hi)); }; const handleIncrement = () => { if (disabled) return; if (isCallback) { onIncrement?.(); return; } commit(current + safeStep); }; const handleDecrement = () => { if (disabled) return; if (isCallback) { onDecrement?.(); return; } commit(current - safeStep); }; const handleKeyDown = (e) => { if (disabled \|\| isCallback) return; let next = null; switch (e.key) { case "ArrowUp": next = current + safeStep; break; case "ArrowDown": next = current - safeStep; break; case "Home": if (lo !== -Infinity) next = lo; break; case "End": if (hi !== Infinity) next = hi; break; case "PageUp": next = current + safeStep 10; break; case "PageDown": next = current - safeStep * 10; break; default: return; } if (next === null) return; e.preventDefault(); commit(next); }; const valueAttrs = !isCallback ? { "aria-valuenow": current, "aria-valuemin": lo === -Infinity ? void 0 : lo, "aria-valuemax": hi === Infinity ? void 0 : hi, "aria-valuetext": ariaValueText } : {}; const reactId = useId(); const decSuffixId = `${reactId}-dec`; const incSuffixId = `${reactId}-inc`; const decLabelledby = ariaLabel === void 0 ? [ariaLabelledby, decSuffixId].filter((v) => v !== void 0).join(" ") : void 0; const incLabelledby = ariaLabel === void 0 ? [ariaLabelledby, incSuffixId].filter((v) => v !== void 0).join(" ") : void 0; return /* @__PURE__ / jsxs( "div", { ref: setRef, role: "spinbutton", tabIndex: disabled ? -1 : 0, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-disabled": disabled \|\| void 0, "data-state": "idle", "data-disabled": disabled \|\| void 0, "data-at-min": atMin \|\| void 0, "data-at-max": atMax \|\| void 0, className: ["lq-stepper", className].filter(Boolean).join(" "), onKeyDown: handleKeyDown, ...valueAttrs, children: [ / @__PURE__ / jsx(TextLabel, { className: "lq-stepper-label", variant: "body", color: "primary", ...labelProps, children }), / @__PURE__ / jsxs( GlassPrimitive, { as: "span", material: "regular", shape: "pill", className: "lq-stepper-capsule", style: { "--lq-glass-elevation": "var(--lq-shadow-interactive-idle)" }, children: [ / @__PURE__ / jsxs( "button", { type: "button", tabIndex: -1, "aria-label": ariaLabel !== void 0 ? `${ariaLabel}, Decrement` : void 0, "aria-labelledby": decLabelledby, "aria-disabled": atMin \|\| void 0, "data-at-min": atMin \|\| void 0, disabled: disabled \|\| void 0, className: "lq-stepper-segment lq-stepper-dec", onClick: handleDecrement, onPointerDown: () => onEditingChanged?.(true), onPointerUp: () => onEditingChanged?.(false), onPointerCancel: () => onEditingChanged?.(false), children: [ / @__PURE__ / jsx("span", { "aria-hidden": "true", className: "lq-stepper-glyph", children: "\u2212" }), / @__PURE__ / jsx("span", { id: decSuffixId, className: "lq-stepper-visually-hidden", children: "Decrement" }) ] } ), / @__PURE__ / jsx("div", { "aria-hidden": "true", className: "lq-stepper-divider" }), / @__PURE__ / jsxs( "button", { type: "button", tabIndex: -1, "aria-label": ariaLabel !== void 0 ? `${ariaLabel}, Increment` : void 0, "aria-labelledby": incLabelledby, "aria-disabled": atMax \|\| void 0, "data-at-max": atMax \|\| void 0, disabled: disabled \|\| void 0, className: "lq-stepper-segment lq-stepper-inc", onClick: handleIncrement, onPointerDown: () => onEditingChanged?.(true), onPointerUp: () => onEditingChanged?.(false), onPointerCancel: () => onEditingChanged?.(false), children: [ / @__PURE__ / jsx("span", { "aria-hidden": "true", className: "lq-stepper-glyph", children: "+" }), / @__PURE__ / jsx("span", { id: incSuffixId, className: "lq-stepper-visually-hidden", children: "Increment" }) ] } ) ] } ) ] } ); }; // src/shared/strip-geometry.ts var measureStrip = (bar, trackSelector, cellSelector) => { const track = bar?.querySelector(trackSelector); if (bar == null \|\| track == null) return null; const rects = Array.from(bar.querySelectorAll(cellSelector)).map((cell) => cell.getBoundingClientRect()); const first = rects[0]; if (first === void 0 \|\| first.width === 0) return null; return { trackLeft: track.getBoundingClientRect().left, rects }; }; var indexAtX = (clientX, m) => { const hit = m.rects.findIndex((rect) => clientX < rect.right); return hit === -1 ? m.rects.length - 1 : hit; }; var offsetOf = (index, m) => (m.rects[index]?.left ?? m.trackLeft) - m.trackLeft; var clampDragX = (clientX, m, fallback) => { const first = m.rects[0]; const last = m.rects[m.rects.length - 1]; if (first === void 0 \|\| last === void 0) return fallback; return Math.max(0, Math.min(last.left - m.trackLeft, clientX - m.trackLeft - first.width / 2)); }; var readItemChildren = (children, marker, componentName) => { const all = Children.toArray(children); const items = all.filter((child) => isValidElement(child) && child.type === marker); if (process.env.NODE_ENV !== "production" && items.length !== all.length) { const { error: reportNonItemChildren } = console; reportNonItemChildren( `[${componentName}] \`children\` must be \`${componentName}.Item\` elements only \u2014 fragments, wrapper components, and stray text are ignored. Pass \`.Item\` children directly.` ); } return items.map((child) => child.props); }; var TabsItem = (_props) => null; TabsItem.displayName = "Tabs.Item"; var identityOf = (item) => item.href === void 0 ? item.value : item.value ?? item.href; var resolveTabItems = (children, defaultValue, contentPlacementProp) => { const rawItems = readItemChildren(children, TabsItem, "Tabs"); const navMode = rawItems[0]?.href !== void 0; const conforming = rawItems.filter((item) => item.href !== void 0 === navMode); if (process.env.NODE_ENV !== "production" && conforming.length !== rawItems.length) { const { error: reportMixedItems } = console; reportMixedItems( "[Tabs] `Tabs.Item` children must be all-tab or all-link \u2014 mixing `href` and non-`href` items has no coherent ARIA. The bar follows its first item's mode; mismatched items are dropped." ); } if (process.env.NODE_ENV !== "production" && navMode) { const { error: reportNavMisuse } = console; if (conforming.some((item) => item.children != null)) { reportNavMisuse( "[Tabs] a `Tabs.Item` with `href` renders no panel \u2014 the destination page IS the content. Its `children` are ignored." ); } if (defaultValue !== void 0) { reportNavMisuse( "[Tabs] `defaultValue` is invalid in navigation mode \u2014 selection is route-derived; pass the current route as `value`. The prop is ignored." ); } if (contentPlacementProp !== void 0) { reportNavMisuse("[Tabs] `contentPlacement` is invalid in navigation mode \u2014 no panel exists. The prop is ignored."); } } const items = resolveCollection( conforming.map((item) => ({ id: identityOf(item), value: identityOf(item), label: item.label, icon: item.icon, badge: item.badge, disabled: item.disabled, content: navMode ? void 0 : item.children, href: item.href })), "Tabs" ); return { navMode, items }; }; var TabsCellContent = ({ item }) => / @__PURE__ / jsxs(Fragment, { children: [ / @__PURE__ / jsx(TextLabel, { variant: "caption", color: "inherit", className: "lq-tabs-label", children: item.label }), / @__PURE__ / jsxs("span", { className: "lq-tabs-icon-slot", children: [ / @__PURE__ / jsx("span", { "aria-hidden": "true", className: "lq-tabs-icon", children: item.icon }), item.badge != null && / @__PURE__ / jsx("span", { className: "lq-tabs-badge", children: item.badge }) ] }) ] }); var useGlideBurst = (lens, deflateMs) => { const burst = useRef({ open: false, timer: 0 }); const [gliding, setGliding] = useState(false); useEffect(() => () => window.clearTimeout(burst.current.timer), []); const close = () => { window.clearTimeout(burst.current.timer); burst.current.open = false; setGliding(false); lens?.release(); }; return { gliding, bloom: () => { if (burst.current.open) return; burst.current.open = true; setGliding(true); lens?.grab(); }, scheduleDeflate: () => { window.clearTimeout(burst.current.timer); burst.current.timer = window.setTimeout(close, deflateMs); }, endBurst: close }; }; var GLIDE_DEFLATE_MS3 = 300; var DRAG_DEADZONE3 = 4; var TRACK_SELECTOR = ".lq-tabs-indicator-track"; var TAB_SELECTOR = ".lq-tabs-tab"; var TabsRoot = ({ children, value, defaultValue, onChange, disabled = false, contentPlacement: contentPlacementProp, orientation = "horizontal", tint, className, ref, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby }) => { const idBase = useId(); const tabId = (itemValue) => `${idBase}-tab-${itemValue}`; const panelId = (itemValue) => `${idBase}-panel-${itemValue}`; const { navMode, items } = resolveTabItems(children, defaultValue, contentPlacementProp); const contentPlacement = navMode ? "top" : contentPlacementProp ?? "top"; const [rawValue, setSelectedValue] = useControllableState({ value, // Navigation mode has no uncontrolled seed: an unmatched route selects // nothing (chip hidden), never the first link. defaultValue: navMode ? void 0 : defaultValue ?? items[0]?.value, onChange, componentName: "Tabs", propName: "value" }); const activeValue = resolveActiveId(items, rawValue); const selectedIndex = activeValue === void 0 ? -1 : indexOf(items, activeValue); const selectedItem = selectedIndex >= 0 ? items[selectedIndex] : void 0; const rovingIndex = selectedIndex >= 0 ? selectedIndex : edgeIndex(items, 1); const barRef = useRef(null); const { props: { className: glassClassName, ...glassAttrs } } = useGlass({ material: "regular", perf: "high" }); const chipRef = useRef(null); const lens = useLiquidLens(chipRef, { shape: "pill", ...LENS_PRESETS.segmented }); const seeded = useRef(false); const measure = () => measureStrip(barRef.current, TRACK_SELECTOR, TAB_SELECTOR); const chipOffset = useCallback((index) => { const m = measureStrip(barRef.current, TRACK_SELECTOR, TAB_SELECTOR); return m === null ? 0 : offsetOf(index, m); }, []); const drag = useRef({ active: false, moved: false, startX: 0, x: 0 }); const pointerActive = useRef(false); useEffect(() => { if (lens === null \|\| selectedIndex < 0 \|\| drag.current.active) return; lens.moveTo(chipOffset(selectedIndex), { immediate: !seeded.current }); seeded.current = true; }, [lens, selectedIndex, chipOffset]); const { gliding, bloom, scheduleDeflate, endBurst } = useGlideBurst(lens, GLIDE_DEFLATE_MS3); const focusTab = (index) => { barRef.current?.querySelectorAll(TAB_SELECTOR)[index]?.focus(); }; const commit = (index) => { if (disabled) return; const item = items[index]; if (item === void 0 \|\| item.disabled) return; setSelectedValue(item.value); }; const activate = (index) => { if (disabled) return; bloom(); commit(index); scheduleDeflate(); }; const handleKeyDown = (event, index) => { if (disabled) return; if (event.key === "Enter" \|\| event.key === " ") { event.preventDefault(); activate(index); return; } const next = indexForNavKey(items, index, event.key); if (next === index \|\| next < 0) return; event.preventDefault(); activate(next); focusTab(next); }; const panel = !navMode && selectedItem !== void 0 && / @__PURE__ / jsx( "div", { role: "tabpanel", id: panelId(selectedItem.value), "aria-labelledby": tabId(selectedItem.value), tabIndex: 0, className: "lq-tabs-panel", children: selectedItem.content }, "panel" ); const navBar = / @__PURE__ / jsxs( "nav", { ...glassAttrs, ref: (node) => { barRef.current = node; }, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "data-state": disabled ? "disabled" : gliding ? "dragging" : "idle", "data-count": items.length, "data-has-selection": selectedIndex >= 0 \|\| void 0, className: ["lq-tabs-bar", glassClassName].filter(Boolean).join(" "), onPointerDown: (event) => { if (disabled) return; const cell = event.target?.closest?.(TAB_SELECTOR) ?? null; if (cell === null \|\| cell.getAttribute("aria-disabled") === "true") return; bloom(); scheduleDeflate(); }, children: [ / @__PURE__ / jsx(Track, { className: "lq-tabs-indicator-track", children: / @__PURE__ / jsx(Thumb, { ref: chipRef, className: "lq-tabs-chip", coatClassName: "lq-tabs-coat" }) }), items.map((item, index) => { const selected = index === selectedIndex; return / @__PURE__ / jsx( "a", { href: item.href, "aria-current": selected ? "page" : void 0, "aria-disabled": disabled \|\| item.disabled \|\| void 0, "data-tint": tint ?? "accent", "data-selected": selected \|\| void 0, tabIndex: disabled ? -1 : void 0, className: "lq-tabs-tab", onClick: (event) => { if (disabled \|\| item.disabled) { event.preventDefault(); return; } if (event.metaKey \|\| event.ctrlKey \|\| event.shiftKey \|\| event.altKey \|\| event.button !== 0) return; if (onChange === void 0 && value === void 0) return; event.preventDefault(); activate(index); }, children: / @__PURE__ / jsx(TabsCellContent, { item }) }, item.value ); }) ] }, "bar" ); const tabBar = / @__PURE__ / jsxs( "div", { ...glassAttrs, ref: (node) => { barRef.current = node; }, role: "tablist", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "data-state": disabled ? "disabled" : gliding ? "dragging" : "idle", "data-count": items.length, "data-has-selection": selectedIndex >= 0 \|\| void 0, className: ["lq-tabs-bar", glassClassName].filter(Boolean).join(" "), onPointerDown: (event) => { if (disabled) return; const tab = event.target?.closest?.(TAB_SELECTOR) ?? null; if (tab === null) return; const index = Array.from(event.currentTarget.querySelectorAll(TAB_SELECTOR)).indexOf(tab); if (index < 0 \|\| items[index]?.disabled) return; pointerActive.current = true; bloom(); const m = measure(); if (m !== null && index === selectedIndex) { event.currentTarget.setPointerCapture(event.pointerId); drag.current = { active: true, moved: false, startX: event.clientX, x: offsetOf(index, m) }; } commit(index); }, onPointerMove: (event) => { const gesture = drag.current; if (!gesture.active) return; if (!gesture.moved && Math.abs(event.clientX - gesture.startX) < DRAG_DEADZONE3) return; const m = measure(); if (m === null) return; gesture.moved = true; gesture.x = clampDragX(event.clientX, m, gesture.x); lens?.moveTo(gesture.x, { follow: true }); commit(indexAtX(event.clientX, m)); }, onPointerUp: (event) => { const gesture = drag.current; if (gesture.active) { gesture.active = false; const m = measure(); if (gesture.moved && m !== null) { const target = indexAtX(event.clientX, m); if (items[target]?.disabled === true) { if (selectedIndex >= 0) lens?.moveTo(offsetOf(selectedIndex, m)); } else { commit(target); lens?.moveTo(offsetOf(target, m)); } endBurst(); } else { scheduleDeflate(); } } else { scheduleDeflate(); } window.setTimeout(() => { pointerActive.current = false; }, 0); }, onPointerCancel: () => { drag.current.active = false; pointerActive.current = false; endBurst(); }, children: [ / @__PURE__ / jsx(Track, { className: "lq-tabs-indicator-track", children: / @__PURE__ / jsx(Thumb, { ref: chipRef, className: "lq-tabs-chip", coatClassName: "lq-tabs-coat" }) }), items.map((item, index) => { const selected = index === selectedIndex; return / @__PURE__ / jsx( "button", { type: "button", role: "tab", id: tabId(item.value), "aria-selected": selected, "aria-controls": selected ? panelId(item.value) : void 0, "aria-disabled": disabled \|\| item.disabled \|\| void 0, disabled: item.disabled \|\| void 0, "data-tint": tint ?? "accent", "data-selected": selected \|\| void 0, tabIndex: disabled ? -1 : index === rovingIndex ? 0 : -1, className: "lq-tabs-tab", onClick: () => { if (pointerActive.current) return; activate(index); }, onKeyDown: (event) => handleKeyDown(event, index), children: / @__PURE__ / jsx(TabsCellContent, { item }) }, item.value ); }) ] }, "bar" ); const bar = navMode ? navBar : tabBar; return / @__PURE__ / jsx( "div", { ref, "data-orientation": orientation, "data-content-placement": contentPlacement, "data-mode": navMode ? "navigation" : void 0, "data-disabled": disabled \|\| void 0, "aria-disabled": disabled \|\| void 0, className: ["lq-tabs", className].filter(Boolean).join(" "), children: contentPlacement === "top" ? [panel, bar] : [bar, panel] } ); }; TabsRoot.displayName = "Tabs"; var Tabs = Object.assign(TabsRoot, { Item: TabsItem }); // src/shared/line-limit.ts var sanitizeLineLimit = (input, fallback, componentName) => { const seed = input ?? fallback; const rawMin = coerceFinite(seed.min, fallback.min); const rawMax = coerceFinite(seed.max, fallback.max); const min = Math.max(1, Math.floor(rawMin)); let max = Math.max(1, Math.floor(rawMax)); if (min > max) { if (process.env.NODE_ENV !== "production") { const { warn: reportInvertedLineLimit } = console; reportInvertedLineLimit( `${componentName}: lineLimit.min (${min}) is greater than lineLimit.max (${max}); using max = min.` ); } max = min; } return { min, max }; }; var useTextSurface = ({ value, defaultValue = "", onChange, placeholder, disabled = false, id, name, required, invalid, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, "aria-invalid": ariaInvalidProp, "aria-errormessage": ariaErrorMessage, autoComplete, inputMode, readOnly, maxLength, minLength, onFocus, onBlur, ref, componentName, inputClassName }) => { const reactId = useId(); const surfaceId = id ?? reactId; const [resolvedValue, setValue] = useControllableState({ value, defaultValue, onChange, componentName, propName: "value" }); const [elementRef, setElementRef] = useForwardedRef(ref); const handleChange = (event) => { if (disabled \|\| readOnly) return; setValue(event.target.value); }; const ariaInvalid = ariaInvalidProp ?? (invalid \|\| void 0); return { value: resolvedValue, setValue, elementRef, nativeProps: { ref: setElementRef, id: surfaceId, name, required: required \|\| void 0, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, "aria-invalid": ariaInvalid, "aria-required": required \|\| void 0, "aria-errormessage": ariaErrorMessage, disabled, placeholder, autoComplete, inputMode, readOnly, maxLength, minLength, value: resolvedValue, onChange: handleChange, onFocus: disabled ? void 0 : onFocus, onBlur: disabled ? void 0 : onBlur, className: inputClassName } }; }; var useRowBounds = (rootRef, prefix, bounds) => { const min = bounds?.min ?? null; const max = bounds?.max ?? null; useLayoutEffect(() => { const el = rootRef.current; if (el === null) return; if (min === null \|\| max === null) { el.style.removeProperty(`${prefix}-min`); el.style.removeProperty(`${prefix}-max`); return; } el.style.setProperty(`${prefix}-min`, String(min)); el.style.setProperty(`${prefix}-max`, String(max)); }, [rootRef, prefix, min, max]); }; var DEFAULT_LINE_LIMIT = { min: 6, max: 12 }; var TextEditor = ({ sizing = "fixed", lineLimit, resizable = "none", disabled = false, tint = "blue", className, ...rest }) => { const surface = useTextSurface({ ...rest, disabled, componentName: "TextEditor", inputClassName: "lq-text-editor-input" }); const rootElRef = useRef(null); const bounds = sanitizeLineLimit(lineLimit, DEFAULT_LINE_LIMIT, "TextEditor"); useRowBounds(rootElRef, "--lq-text-editor-rows", bounds); return / @__PURE__ / jsx( "div", { ref: rootElRef, "data-component": "text-editor", "data-state": "idle", "data-sizing": sizing, "data-resizable": resizable, "data-disabled": disabled \|\| void 0, "data-tint": tint, className: ["lq-text-editor", className].filter(Boolean).join(" "), children: / @__PURE__ / jsx(GlassPrimitive, { as: "div", material: "regular", className: "lq-text-editor-shell", children: / @__PURE__ / jsx("textarea", { ...surface.nativeProps, rows: bounds.min }) }) } ); }; var DEFAULT_LINE_LIMIT2 = { min: 2, max: 4 }; var TextField = ({ variant = "rounded", distribution = "fill", icon, clearable = false, onClear, clearLabel = "Clear text", className, disabled = false, tint = "blue", readOnly, ...rest }) => { const surface = useTextSurface({ ...rest, disabled, readOnly, componentName: "TextField", inputClassName: "lq-text-field-input" }); const resolvedValue = surface.value; const rootElRef = useRef(null); const lineLimitBounds = rest.multiline ? sanitizeLineLimit(rest.lineLimit, DEFAULT_LINE_LIMIT2, "TextField") : null; useRowBounds(rootElRef, "--lq-text-field-rows", lineLimitBounds); const clear = () => { surface.setValue(""); onClear?.(); surface.elementRef.current?.focus(); }; const clearVisible = clearable && resolvedValue !== "" && !disabled && !readOnly; const handleKeyDown = (event) => { if (disabled) return; if (event.key !== "Enter" && event.key !== "Escape") return; if (event.defaultPrevented) return; if (event.key === "Escape") { if (!clearVisible) return; event.preventDefault(); clear(); return; } if (readOnly) return; if (rest.multiline !== true) rest.onSubmit?.(resolvedValue); }; const iconSlot = icon == null ? null : / @__PURE__ / jsx("span", { "aria-hidden": "true", className: "lq-text-field-icon", children: icon }); const clearMaskId = `${surface.nativeProps.id}-clear-mask`; const clearSlot = clearVisible ? / @__PURE__ / jsx("button", { type: "button", className: "lq-text-field-clear", "aria-label": clearLabel, onClick: clear, children: / @__PURE__ / jsxs("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", focusable: "false", children: [ / @__PURE__ / jsxs("mask", { id: clearMaskId, children: [ / @__PURE__ / jsx("rect", { width: "16", height: "16", fill: "white" }), / @__PURE__ / jsx("path", { d: "M5.5 5.5 10.5 10.5M10.5 5.5 5.5 10.5", stroke: "black", strokeWidth: "1.75", strokeLinecap: "round" }) ] }), / @__PURE__ / jsx("circle", { cx: "8", cy: "8", r: "8", fill: "currentColor", mask: `url(#${clearMaskId})` }) ] }) }) : null; const onKeyDown = disabled ? void 0 : (event) => { rest.onKeyDown?.(event); handleKeyDown(event); }; if (rest.multiline) { const { sizing = "relative" } = rest; return / @__PURE__ / jsx( "div", { ref: rootElRef, "data-component": "text-field", "data-variant": variant, "data-distribution": distribution, "data-sizing": sizing, "data-state": "idle", "data-disabled": disabled \|\| void 0, "data-multiline": true, "data-has-icon": icon == null ? void 0 : true, "data-clearable": clearable \|\| void 0, "data-tint": tint, className: ["lq-text-field", className].filter(Boolean).join(" "), children: / @__PURE__ / jsxs(GlassPrimitive, { as: "div", material: "regular", className: "lq-text-field-shell", children: [ iconSlot, / @__PURE__ / jsx("textarea", { ...surface.nativeProps, rows: lineLimitBounds?.min, onKeyDown }), clearSlot ] }) } ); } const { secure = false, pattern, type = "text" } = rest; return / @__PURE__ / jsx( "div", { ref: rootElRef, "data-component": "text-field", "data-variant": variant, "data-distribution": distribution, "data-state": "idle", "data-disabled": disabled \|\| void 0, "data-has-icon": icon == null ? void 0 : true, "data-clearable": clearable \|\| void 0, "data-tint": tint, className: ["lq-text-field", className].filter(Boolean).join(" "), children: / @__PURE__ / jsxs(GlassPrimitive, { as: "div", material: "regular", className: "lq-text-field-shell", children: [ iconSlot, / @__PURE__ / jsx( "input", { ...surface.nativeProps, type: secure ? "password" : type, pattern, onKeyDown } ), clearSlot ] }) } ); }; var GLYPH_PATHS = { check: "M5 12.5 10 17.5 19 7", dash: "M6 12 18 12" }; var Glyph = ({ kind }) => / @__PURE__ / jsx("svg", { "data-glyph": kind, "aria-hidden": "true", viewBox: "0 0 24 24", className: "lq-toggle-checkbox-glyph", children: / @__PURE__ / jsx( "path", { className: "lq-toggle-checkbox-glyph-path", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", d: GLYPH_PATHS[kind] } ) }); var CheckboxFace = ({ state, labelProps, children }) => / @__PURE__ / jsxs(Fragment, { children: [ / @__PURE__ / jsxs("span", { className: "lq-toggle-checkbox-box", children: [ state === "on" ? / @__PURE__ / jsx(Glyph, { kind: "check" }) : null, state === "mixed" ? / @__PURE__ / jsx(Glyph, { kind: "dash" }) : null ] }), / @__PURE__ / jsx("span", { className: "lq-toggle-checkbox-label", children: / @__PURE__ / jsx(TextLabel, { variant: "body", color: "inherit", ...labelProps, children }) }) ] }); var CENTER_OFF = 0; var CENTER_ON = 1; var CENTER_MID = 0.5; var DRAG_DEADZONE4 = 0.06; var FLIP_SLIDE_DELAY_MS = 130; var Toggle = ({ children, labelProps, checked, defaultChecked = false, onChange, disabled = false, tint, variant = "switch", indeterminate = false, size: size2 = "regular", className, ref: forwardedRef, onClick, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby }) => { const [on, setOn] = useControllableState({ value: checked, defaultValue: defaultChecked, onChange, componentName: "Toggle", propName: "checked" }); const trackRef = useRef(null); const thumbRef = useRef(null); const seeded = useRef(false); const pointerHandled = useRef(false); const tapPending = useRef(false); const flipTimer = useRef(0); const drag = useRef({ active: false, moved: false, startFraction: CENTER_OFF, fraction: CENTER_OFF }); const lens = useLiquidLens(thumbRef, { shape: "pill", ...LENS_PRESETS.thumb }); const { props: { className: glassClassName, ...glassAttrs } } = useGlass({ className, material: "clear", perf: "high" }); const setRef = (node) => { trackRef.current = node; if (typeof forwardedRef === "function") forwardedRef(node); else if (forwardedRef !== null && forwardedRef !== void 0) { forwardedRef.current = node; } }; const thumbCenterPx = useCallback((fraction) => { const track = trackRef.current?.getBoundingClientRect(); const thumb = thumbRef.current?.getBoundingClientRect(); if (track === void 0 \|\| thumb === void 0 \|\| track.width === 0) return fraction; const hPad = (track.height - thumb.height) / 2; const off = thumb.width / 2 + hPad; const on2 = track.width - off; return off + fraction (on2 - off); }, []); useEffect(() => { if (lens === null) return; lens.moveTo(thumbCenterPx(on ? CENTER_ON : CENTER_OFF), { immediate: !seeded.current }); seeded.current = true; }, [lens, on, thumbCenterPx]); const flip2 = (next) => { setOn(next); lens?.grab(); window.clearTimeout(flipTimer.current); flipTimer.current = window.setTimeout(() => { lens?.moveTo(thumbCenterPx(next ? CENTER_ON : CENTER_OFF)); lens?.release(); }, FLIP_SLIDE_DELAY_MS); }; useEffect(() => () => window.clearTimeout(flipTimer.current), []); const settle = (next) => { setOn(next); lens?.moveTo(thumbCenterPx(next ? CENTER_ON : CENTER_OFF)); lens?.release(); }; const thumbFraction = (clientX) => { const rect = trackRef.current?.getBoundingClientRect(); if (rect === void 0 \|\| rect.width === 0) return drag.current.fraction; return Math.max(0, Math.min(1, (clientX - rect.left) / rect.width)); }; const isCheckbox = variant === "checkbox"; const mixed = isCheckbox && indeterminate; const dataState = mixed ? "mixed" : on ? "on" : "off"; const resolvedTint = tint ?? (isCheckbox ? "accent" : "green"); const checkboxNamed = ariaLabel !== void 0 \|\| ariaLabelledby !== void 0 \|\| typeof children === "string" \|\| typeof children === "number"; const role = isCheckbox ? checkboxNamed ? "checkbox" : void 0 : "switch"; const roleProps = role === void 0 ? {} : { role, "aria-checked": mixed ? "mixed" : on }; return /* @__PURE__ / jsx( "button", { ...glassAttrs, ...roleProps, ref: setRef, type: "button", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, disabled, "data-state": dataState, "data-disabled": disabled \|\| void 0, "data-tint": resolvedTint, "data-variant": variant !== "switch" ? variant : void 0, "data-size": size2, className: ["lq-toggle", glassClassName].filter(Boolean).join(" "), onClick: (e) => { onClick?.(e); if (e.defaultPrevented) { if (tapPending.current) { tapPending.current = false; settle(on); } return; } tapPending.current = false; if (pointerHandled.current) return; if (isCheckbox) { setOn(mixed ? true : !on); return; } flip2(!on); }, onKeyDown: (e) => { if (e.key === "Enter") { e.preventDefault(); e.currentTarget.click(); } }, onPointerDown: (e) => { if (drag.current.active) return; e.currentTarget.setPointerCapture(e.pointerId); const startFraction = thumbFraction(e.clientX); drag.current = { active: true, moved: false, startFraction, fraction: on ? CENTER_ON : CENTER_OFF }; lens?.grab(); }, onPointerMove: (e) => { const d = drag.current; if (!d.active) return; const fraction = thumbFraction(e.clientX); if (!d.moved && Math.abs(fraction - d.startFraction) < DRAG_DEADZONE4) return; d.moved = true; d.fraction = fraction; lens?.moveTo(thumbCenterPx(fraction), { follow: true }); }, onPointerUp: () => { const d = drag.current; if (!d.active) return; d.active = false; if (d.moved) { pointerHandled.current = true; window.setTimeout(() => { pointerHandled.current = false; }, 0); settle(d.fraction > CENTER_MID); } else { tapPending.current = true; } }, onPointerCancel: () => { drag.current.active = false; settle(on); }, children: isCheckbox ? ( // Checkbox anatomy (spec ## Anatomy): leading box + state glyph, then the // trailing label. No thumb / no liquid-lens — the Track/Thumb are absent. / @__PURE__ / jsx(CheckboxFace, { state: dataState, labelProps, children }) ) : / @__PURE__ / jsxs(Fragment, { children: [ variant === "button" && children !== void 0 ? / @__PURE__ / jsx(PressableContent, { className: "lq-toggle-btn-label", children: / @__PURE__ / jsx(TextLabel, { variant: "body", color: "inherit", ...labelProps, children }) }) : null, / @__PURE__ / jsx(Track, { className: "lq-toggle-indicator-track", children: / @__PURE__ / jsx(Thumb, { ref: thumbRef, className: "lq-toggle-thumb", coatClassName: "lq-toggle-coat" }) }) ] }) } ); }; var DEFAULT_TOOLTIP_DELAY_MS = 500; var HOVER_GRACE_MS = 150; var FOCUSABLE_SELECTOR2 = 'a[href], button, input, select, textarea, [tabindex]:not([tabindex="-1"])'; var isCoarsePointer = () => typeof matchMedia !== "undefined" && (matchMedia("(pointer: coarse)").matches \|\| matchMedia("(hover: none)").matches); var Tooltip = ({ label, trigger, placement = "top", align = "center", delay = DEFAULT_TOOLTIP_DELAY_MS, open, defaultOpen = false, onOpenChange, material, perf, className, ref: forwardedRef, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby }) => { const [isOpen, setOpen] = useControllableState({ value: open, defaultValue: defaultOpen, onChange: onOpenChange, componentName: "Tooltip", propName: "open" }); const panelRef = useRef(null); const mergedPanelRef = useMergedRefs(panelRef, forwardedRef); const [triggerEl, setTriggerEl] = useState(null); const timerRef = useRef(null); const clearTimer = useCallback(() => { if (timerRef.current !== null) { clearTimeout(timerRef.current); timerRef.current = null; } }, []); useEffect(() => clearTimer, [clearTimer]); const show = useCallback(() => { clearTimer(); setOpen(true); }, [clearTimer, setOpen]); const hide = useCallback(() => { clearTimer(); setOpen(false); }, [clearTimer, setOpen]); const onTriggerPointerEnter = useCallback(() => { if (isCoarsePointer()) return; clearTimer(); timerRef.current = setTimeout(() => { timerRef.current = null; flushSync(() => setOpen(true)); }, delay); }, [clearTimer, delay, setOpen]); const onTriggerPointerLeave = useCallback(() => { clearTimer(); if (!isOpen) return; timerRef.current = setTimeout(() => { timerRef.current = null; flushSync(() => setOpen(false)); }, HOVER_GRACE_MS); }, [clearTimer, isOpen, setOpen]); useEffect(() => { if (triggerEl === null) return; const onFocus = () => show(); const onBlur = () => hide(); const onEnter = () => onTriggerPointerEnter(); const onLeave = () => onTriggerPointerLeave(); triggerEl.addEventListener("focus", onFocus); triggerEl.addEventListener("blur", onBlur); triggerEl.addEventListener("pointerenter", onEnter); triggerEl.addEventListener("pointerleave", onLeave); return () => { triggerEl.removeEventListener("focus", onFocus); triggerEl.removeEventListener("blur", onBlur); triggerEl.removeEventListener("pointerenter", onEnter); triggerEl.removeEventListener("pointerleave", onLeave); }; }, [triggerEl, show, hide, onTriggerPointerEnter, onTriggerPointerLeave]); useEffect(() => { if (triggerEl === null) return; const panelId = panelRef.current?.id; if (isOpen && panelId !== void 0) { triggerEl.setAttribute("aria-describedby", panelId); return () => triggerEl.removeAttribute("aria-describedby"); } triggerEl.removeAttribute("aria-describedby"); return void 0; }, [triggerEl, isOpen]); useEffect(() => { if (!isOpen) return; const panel = panelRef.current; if (panel === null) return; const onEnter = () => clearTimer(); const onLeave = () => hide(); panel.addEventListener("pointerenter", onEnter); panel.addEventListener("pointerleave", onLeave); return () => { panel.removeEventListener("pointerenter", onEnter); panel.removeEventListener("pointerleave", onLeave); }; }, [isOpen, clearTimer, hide]); useEffect(() => { if (process.env.NODE_ENV === "production") return; if (!isOpen) return; const panel = panelRef.current; if (panel === null) return; if (panel.querySelector(FOCUSABLE_SELECTOR2) !== null) { const { warn: reportInteractiveLabel } = console; reportInteractiveLabel( "[liquidify] Tooltip: `label` contains a focusable element. A tooltip is non-interactive (role=tooltip, never focusable) \u2014 move interactive content into a Popover instead." ); } }, [isOpen]); return / @__PURE__ / jsxs(Popup, { open: isOpen, onOpenChange: setOpen, placement, align, ariaLinkage: "describedby", children: [ / @__PURE__ / jsx(Popup.Trigger, { asChild: true, toggleOnClick: false, children: / @__PURE__ / jsx(Slot, { ref: setTriggerEl, children: trigger }) }), / @__PURE__ */ jsx( Popup.Content, { ref: mergedPanelRef, role: "tooltip", stateVocab: { open: "shown", closed: "hidden" }, material: material ?? "frosted", perf, className: ["lq-tooltip", className].filter(Boolean).join(" "), "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, children: label } ) ] }); }; // src/liquid-component-props.ts var LIQUID_TINTS = [ "accent", "blue", "brown", "gray", "green", "indigo", "mint", "orange", "pink", "purple", "red", "teal", "yellow" ]; var LIQUID_COLORS = [ "red", "orange", "yellow", "green", "mint", "teal", "cyan", "blue", "indigo", "purple", "pink", "brown", "gray" ]; var LIQUID_ACCENT = "accent"; // src/sizing.ts var SIZE_SCALE = ["mini", "small", "regular", "large", "xlarge"]; export { ActionSheet, AdaptiveAppLayout, AdaptiveLayoutProvider, Alert, AppBar, Banner, BarLayout, Button, ColorPicker, ContextMenu, ControlGroup, DEFAULT_TOOLTIP_DELAY_MS, DatePicker, Dialog, DisclosureGroup, Divider, EmptyState, ExpandableBarRegion, Form, Gauge, GroupBox, ICON_NAMES, Icon, LIQUID_ACCENT, LIQUID_COLORS, LIQUID_TINTS, Label, LabeledContent, Link, Menu, MinimizableBarRegion, PageControl, Panel, Picker, Popover, ProgressIndicator, SIZE_SCALE, Section, SegmentedControl, ShareLink, Sheet, Sidebar, SidebarFooter, SidebarGroup, SidebarHeader, SidebarItem, SidebarSection, Slider, Stepper, Tabs, Text, TextEditor, TextField, Toggle, Tooltip, useAdaptiveAppLayout, useAdaptiveLayoutContext, useAdaptiveLayoutInteraction }; //# sourceMappingURL=index.js.map //# sourceMappingURL=index.js.map