@mortenbrudvik/waveui 0.7.0 → 0.8.0

package/dist/components/data-display/InfoLabel.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"InfoLabel.cjs","names":["useId","React","usePopupPosition","useDismiss","useMergedRefs","cn","focusRing","InfoIcon","Portal","require_runtime","require_cn","require_useId","require_useMergedRefs","require_useDismiss","require_Portal","require_styles","require_icons","require_usePopupPosition","react","react_jsx_runtime","SHOW_DELAY","HIDE_DELAY","InfoLabel","props","descriptionId","openReason","setOpenReason","open","triggerRef","surfaceRef","pointerPressRef","pressTimerRef","showTimerRef","hideTimerRef","clearShowTimer","clearHideTimer","close","triggerRefs","setReference","surfaceRefs","setFloating","scheduleHide","reason","handlePointerEnter","event","handlePointerLeave","handlePointerDown","handleFocus","handleBlur","handleClick","className","label","infoButtonLabel","info","floatingProps"],"sources":["../../../src/components/data-display/InfoLabel.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport { focusRing } from '../../lib/styles';\nimport { InfoIcon } from '../../lib/icons';\nimport { useId } from '../../hooks/useId';\nimport { useDismiss } from '../../hooks/useDismiss';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport { usePopupPosition } from '../../hooks/usePopupPosition';\nimport { Portal } from '../portal/Portal';\n\n/** Properties for the InfoLabel component. */\nexport interface InfoLabelProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /** Primary label text to display. */\n  label: string;\n  /**\n   * Additional information about the label. It describes the info button\n   * (`aria-describedby`, available from the first render) and is shown in a popup on hover,\n   * keyboard focus or click.\n   */\n  info: string;\n  /**\n   * Accessible name of the info button. Localise it here.\n   * @default 'Information'\n   */\n  infoButtonLabel?: string;\n  /** Ref to the root `<span>`. */\n  ref?: React.Ref<HTMLSpanElement>;\n}\n\n/** Why the popup is open: a click pins it; hover and keyboard focus open it transiently. */\ntype OpenReason = 'hover' | 'focus' | 'click';\n\n/** Hover delay before the popup opens, and before it closes after the pointer leaves (ms). */\nconst SHOW_DELAY = 250;\nconst HIDE_DELAY = 250;\n\ntype Timer = ReturnType<typeof setTimeout>;\n\n/**\n * A label with an info button that reveals additional information (a \"toggletip\").\n *\n * - The info button is a `<button type=\"button\">` named `infoButtonLabel` (\"Information\"). The\n *   info text is rendered inline in a `hidden` element and linked with `aria-describedby`, so it is\n *   announced from the first render (also after server rendering), whether the popup is open or not.\n * - The visual popup is portaled only while open. It is `aria-hidden` because it duplicates the\n *   description, and it holds no focusable content, so focus stays on the button.\n * - Opens on keyboard focus (not on focus that comes from a pointer press), on hover after a\n *   short delay (the popup itself can be hovered) and on click. A click pins it: a click while it is\n *   open because of hover or focus keeps it open, a click on a pinned popup closes it.\n * - Closes on Escape, on a press outside, when focus moves elsewhere and — unless pinned — when\n *   the pointer leaves or the button loses focus (WCAG 1.4.13). A popup opened by hover that then\n *   receives keyboard focus stays open while the button keeps focus, even after the pointer leaves.\n *\n * @example\n * <InfoLabel label=\"Password\" info=\"Use at least 8 characters.\" />\n */\nexport const InfoLabel = ({\n  label,\n  info,\n  infoButtonLabel = 'Information',\n  className,\n  ref,\n  ...props\n}: InfoLabelProps) => {\n  const descriptionId = useId('info-label-description');\n  const [openReason, setOpenReason] = React.useState<OpenReason | null>(null);\n  const open = openReason !== null;\n\n  const triggerRef = React.useRef<HTMLButtonElement | null>(null);\n  const surfaceRef = React.useRef<HTMLDivElement | null>(null);\n  /**\n   * Set by a pointer press on the button, so the focus that follows does not open the popup. It\n   * lasts only for the event turn of the press (see `handlePointerDown`).\n   */\n  const pointerPressRef = React.useRef(false);\n  const pressTimerRef = React.useRef<Timer | null>(null);\n  const showTimerRef = React.useRef<Timer | null>(null);\n  const hideTimerRef = React.useRef<Timer | null>(null);\n\n  const clearShowTimer = () => {\n    if (showTimerRef.current !== null) clearTimeout(showTimerRef.current);\n    showTimerRef.current = null;\n  };\n  const clearHideTimer = () => {\n    if (hideTimerRef.current !== null) clearTimeout(hideTimerRef.current);\n    hideTimerRef.current = null;\n  };\n\n  React.useEffect(\n    () => () => {\n      if (pressTimerRef.current !== null) clearTimeout(pressTimerRef.current);\n      if (showTimerRef.current !== null) clearTimeout(showTimerRef.current);\n      if (hideTimerRef.current !== null) clearTimeout(hideTimerRef.current);\n    },\n    [],\n  );\n\n  const close = () => {\n    clearShowTimer();\n    clearHideTimer();\n    setOpenReason(null);\n  };\n\n  const { setReference, setFloating, floatingProps } = usePopupPosition({\n    open,\n    side: 'top',\n    align: 'center',\n    offset: 8,\n  });\n  const { layerId } = useDismiss({\n    open,\n    onDismiss: close,\n    refs: [triggerRef, surfaceRef],\n    anchorRef: triggerRef,\n    focusOutside: true,\n  });\n  const triggerRefs = useMergedRefs<HTMLButtonElement>(triggerRef, setReference);\n  const surfaceRefs = useMergedRefs<HTMLDivElement>(surfaceRef, setFloating);\n\n  /** Pointer left the button or the popup: a hover-opened popup closes after a delay. */\n  const scheduleHide = () => {\n    clearShowTimer();\n    clearHideTimer();\n    hideTimerRef.current = setTimeout(() => {\n      hideTimerRef.current = null;\n      setOpenReason((reason) => (reason === 'hover' ? null : reason));\n    }, HIDE_DELAY);\n  };\n\n  const handlePointerEnter = (event: React.PointerEvent) => {\n    if (event.pointerType === 'touch') return;\n    clearHideTimer();\n    if (open || showTimerRef.current !== null) return;\n    showTimerRef.current = setTimeout(() => {\n      showTimerRef.current = null;\n      setOpenReason((reason) => reason ?? 'hover');\n    }, SHOW_DELAY);\n  };\n\n  const handlePointerLeave = (event: React.PointerEvent) => {\n    if (event.pointerType === 'touch') return;\n    scheduleHide();\n  };\n\n  const handlePointerDown = () => {\n    pointerPressRef.current = true;\n    // A press focuses the button (where it does) as the default action of `mousedown`, in the same\n    // event turn. Forget the press after that turn: a press that does not focus the button (Safari\n    // and Firefox on macOS, iOS) and ends without a click (dragged off, or a touch that becomes a\n    // scroll) must not turn a later keyboard focus into pointer focus. A touch tap dispatches its\n    // compatibility `mousedown` (and the focus) after the touch ends; that `mousedown` sets the\n    // flag again.\n    if (pressTimerRef.current !== null) clearTimeout(pressTimerRef.current);\n    pressTimerRef.current = setTimeout(() => {\n      pressTimerRef.current = null;\n      pointerPressRef.current = false;\n    }, 0);\n  };\n\n  const handleFocus = () => {\n    // Keyboard focus opens; focus that comes from a pointer press waits for the click.\n    if (pointerPressRef.current) return;\n    // A popup opened by hover becomes focus-owned, so it stays while the button has focus even\n    // after the pointer leaves (WCAG 1.4.13 persistent). A pinned popup stays pinned.\n    setOpenReason((reason) => (reason === 'click' ? reason : 'focus'));\n  };\n\n  const handleBlur = () => {\n    setOpenReason((reason) => (reason === 'focus' ? null : reason));\n  };\n\n  const handleClick = () => {\n    clearShowTimer();\n    clearHideTimer();\n    // Closed → pinned; open because of hover or focus → pinned; pinned → closed.\n    setOpenReason((reason) => (reason === 'click' ? null : 'click'));\n  };\n\n  return (\n    <span\n      ref={ref}\n      className={cn('inline-flex items-center gap-1 text-body-1', className)}\n      {...props}\n    >\n      {label}\n      <button\n        ref={triggerRefs}\n        type=\"button\"\n        aria-label={infoButtonLabel}\n        aria-expanded={open}\n        aria-describedby={descriptionId}\n        className={cn(\n          'inline-flex size-4 shrink-0 items-center justify-center rounded-full border-0 bg-transparent p-0 text-muted-foreground',\n          'not-disabled:not-aria-disabled:hover:text-foreground',\n          focusRing,\n        )}\n        onPointerDown={handlePointerDown}\n        onMouseDown={handlePointerDown}\n        onPointerEnter={handlePointerEnter}\n        onPointerLeave={handlePointerLeave}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        onClick={handleClick}\n      >\n        <InfoIcon size={16} />\n      </button>\n      <span id={descriptionId} hidden>\n        {info}\n      </span>\n      {open && (\n        <Portal layerId={layerId}>\n          <div\n            ref={surfaceRefs}\n            aria-hidden=\"true\"\n            data-wave-infolabel-surface=\"\"\n            data-state=\"open\"\n            {...floatingProps}\n            className=\"w-max max-w-xs rounded-md border border-border bg-background px-3 py-2 text-caption-1 text-foreground shadow-16\"\n            onPointerEnter={handlePointerEnter}\n            onPointerLeave={handlePointerLeave}\n          >\n            {info}\n          </div>\n        </Portal>\n      )}\n    </span>\n  );\n};\n\nInfoLabel.displayName = 'InfoLabel';\n"],"mappings":"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"}
+{"version":3,"file":"InfoLabel.cjs","names":["useId","React","usePopupPosition","useDismiss","useMergedRefs","cn","infoLabelClassNames","focusRing","InfoIcon","Portal","require_runtime","require_cn","require_classNames","require_useId","require_useMergedRefs","require_useDismiss","require_Portal","require_styles","require_icons","require_usePopupPosition","react","react_jsx_runtime","SHOW_DELAY","HIDE_DELAY","InfoLabel","props","descriptionId","openReason","setOpenReason","open","triggerRef","surfaceRef","pointerPressRef","pressTimerRef","showTimerRef","hideTimerRef","clearShowTimer","clearHideTimer","close","triggerRefs","setReference","surfaceRefs","setFloating","scheduleHide","reason","handlePointerEnter","event","handlePointerLeave","handlePointerDown","handleFocus","handleBlur","handleClick","className","label","infoButtonLabel","info","floatingProps"],"sources":["../../../src/components/data-display/InfoLabel.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport { infoLabelClassNames } from '../../lib/classNames';\nimport { focusRing } from '../../lib/styles';\nimport { InfoIcon } from '../../lib/icons';\nimport { useId } from '../../hooks/useId';\nimport { useDismiss } from '../../hooks/useDismiss';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport { usePopupPosition } from '../../hooks/usePopupPosition';\nimport { Portal } from '../portal/Portal';\n\n/** Properties for the InfoLabel component. */\nexport interface InfoLabelProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /** Primary label text to display. */\n  label: string;\n  /**\n   * Additional information about the label. It describes the info button\n   * (`aria-describedby`, available from the first render) and is shown in a popup on hover,\n   * keyboard focus or click.\n   */\n  info: string;\n  /**\n   * Accessible name of the info button. Localise it here.\n   * @default 'Information'\n   */\n  infoButtonLabel?: string;\n  /** Ref to the root `<span>`. */\n  ref?: React.Ref<HTMLSpanElement>;\n}\n\n/** Why the popup is open: a click pins it; hover and keyboard focus open it transiently. */\ntype OpenReason = 'hover' | 'focus' | 'click';\n\n/** Hover delay before the popup opens, and before it closes after the pointer leaves (ms). */\nconst SHOW_DELAY = 250;\nconst HIDE_DELAY = 250;\n\ntype Timer = ReturnType<typeof setTimeout>;\n\n/**\n * A label with an info button that reveals additional information (a \"toggletip\").\n *\n * - The info button is a `<button type=\"button\">` named `infoButtonLabel` (\"Information\"). The\n *   info text is rendered inline in a `hidden` element and linked with `aria-describedby`, so it is\n *   announced from the first render (also after server rendering), whether the popup is open or not.\n * - The visual popup is portaled only while open. It is `aria-hidden` because it duplicates the\n *   description, and it holds no focusable content, so focus stays on the button.\n * - Opens on keyboard focus (not on focus that comes from a pointer press), on hover after a\n *   short delay (the popup itself can be hovered) and on click. A click pins it: a click while it is\n *   open because of hover or focus keeps it open, a click on a pinned popup closes it.\n * - Closes on Escape, on a press outside, when focus moves elsewhere and — unless pinned — when\n *   the pointer leaves or the button loses focus (WCAG 1.4.13). A popup opened by hover that then\n *   receives keyboard focus stays open while the button keeps focus, even after the pointer leaves.\n *\n * @example\n * <InfoLabel label=\"Password\" info=\"Use at least 8 characters.\" />\n */\nexport const InfoLabel = ({\n  label,\n  info,\n  infoButtonLabel = 'Information',\n  className,\n  ref,\n  ...props\n}: InfoLabelProps) => {\n  const descriptionId = useId('info-label-description');\n  const [openReason, setOpenReason] = React.useState<OpenReason | null>(null);\n  const open = openReason !== null;\n\n  const triggerRef = React.useRef<HTMLButtonElement | null>(null);\n  const surfaceRef = React.useRef<HTMLDivElement | null>(null);\n  /**\n   * Set by a pointer press on the button, so the focus that follows does not open the popup. It\n   * lasts only for the event turn of the press (see `handlePointerDown`).\n   */\n  const pointerPressRef = React.useRef(false);\n  const pressTimerRef = React.useRef<Timer | null>(null);\n  const showTimerRef = React.useRef<Timer | null>(null);\n  const hideTimerRef = React.useRef<Timer | null>(null);\n\n  const clearShowTimer = () => {\n    if (showTimerRef.current !== null) clearTimeout(showTimerRef.current);\n    showTimerRef.current = null;\n  };\n  const clearHideTimer = () => {\n    if (hideTimerRef.current !== null) clearTimeout(hideTimerRef.current);\n    hideTimerRef.current = null;\n  };\n\n  React.useEffect(\n    () => () => {\n      if (pressTimerRef.current !== null) clearTimeout(pressTimerRef.current);\n      if (showTimerRef.current !== null) clearTimeout(showTimerRef.current);\n      if (hideTimerRef.current !== null) clearTimeout(hideTimerRef.current);\n    },\n    [],\n  );\n\n  const close = () => {\n    clearShowTimer();\n    clearHideTimer();\n    setOpenReason(null);\n  };\n\n  const { setReference, setFloating, floatingProps } = usePopupPosition({\n    open,\n    side: 'top',\n    align: 'center',\n    offset: 8,\n  });\n  const { layerId } = useDismiss({\n    open,\n    onDismiss: close,\n    refs: [triggerRef, surfaceRef],\n    anchorRef: triggerRef,\n    focusOutside: true,\n  });\n  const triggerRefs = useMergedRefs<HTMLButtonElement>(triggerRef, setReference);\n  const surfaceRefs = useMergedRefs<HTMLDivElement>(surfaceRef, setFloating);\n\n  /** Pointer left the button or the popup: a hover-opened popup closes after a delay. */\n  const scheduleHide = () => {\n    clearShowTimer();\n    clearHideTimer();\n    hideTimerRef.current = setTimeout(() => {\n      hideTimerRef.current = null;\n      setOpenReason((reason) => (reason === 'hover' ? null : reason));\n    }, HIDE_DELAY);\n  };\n\n  const handlePointerEnter = (event: React.PointerEvent) => {\n    if (event.pointerType === 'touch') return;\n    clearHideTimer();\n    if (open || showTimerRef.current !== null) return;\n    showTimerRef.current = setTimeout(() => {\n      showTimerRef.current = null;\n      setOpenReason((reason) => reason ?? 'hover');\n    }, SHOW_DELAY);\n  };\n\n  const handlePointerLeave = (event: React.PointerEvent) => {\n    if (event.pointerType === 'touch') return;\n    scheduleHide();\n  };\n\n  const handlePointerDown = () => {\n    pointerPressRef.current = true;\n    // A press focuses the button (where it does) as the default action of `mousedown`, in the same\n    // event turn. Forget the press after that turn: a press that does not focus the button (Safari\n    // and Firefox on macOS, iOS) and ends without a click (dragged off, or a touch that becomes a\n    // scroll) must not turn a later keyboard focus into pointer focus. A touch tap dispatches its\n    // compatibility `mousedown` (and the focus) after the touch ends; that `mousedown` sets the\n    // flag again.\n    if (pressTimerRef.current !== null) clearTimeout(pressTimerRef.current);\n    pressTimerRef.current = setTimeout(() => {\n      pressTimerRef.current = null;\n      pointerPressRef.current = false;\n    }, 0);\n  };\n\n  const handleFocus = () => {\n    // Keyboard focus opens; focus that comes from a pointer press waits for the click.\n    if (pointerPressRef.current) return;\n    // A popup opened by hover becomes focus-owned, so it stays while the button has focus even\n    // after the pointer leaves (WCAG 1.4.13 persistent). A pinned popup stays pinned.\n    setOpenReason((reason) => (reason === 'click' ? reason : 'focus'));\n  };\n\n  const handleBlur = () => {\n    setOpenReason((reason) => (reason === 'focus' ? null : reason));\n  };\n\n  const handleClick = () => {\n    clearShowTimer();\n    clearHideTimer();\n    // Closed → pinned; open because of hover or focus → pinned; pinned → closed.\n    setOpenReason((reason) => (reason === 'click' ? null : 'click'));\n  };\n\n  return (\n    <span\n      ref={ref}\n      className={cn(\n        infoLabelClassNames.root,\n        'inline-flex items-center gap-1 text-body-1',\n        className,\n      )}\n      {...props}\n    >\n      {label}\n      <button\n        ref={triggerRefs}\n        type=\"button\"\n        aria-label={infoButtonLabel}\n        aria-expanded={open}\n        aria-describedby={descriptionId}\n        className={cn(\n          infoLabelClassNames.infoButton,\n          'inline-flex size-4 shrink-0 items-center justify-center rounded-full border-0 bg-transparent p-0 text-muted-foreground',\n          'not-disabled:not-aria-disabled:hover:text-foreground',\n          focusRing,\n        )}\n        onPointerDown={handlePointerDown}\n        onMouseDown={handlePointerDown}\n        onPointerEnter={handlePointerEnter}\n        onPointerLeave={handlePointerLeave}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        onClick={handleClick}\n      >\n        <InfoIcon size={16} />\n      </button>\n      <span id={descriptionId} hidden>\n        {info}\n      </span>\n      {open && (\n        <Portal layerId={layerId}>\n          <div\n            ref={surfaceRefs}\n            aria-hidden=\"true\"\n            data-wave-infolabel-surface=\"\"\n            data-state=\"open\"\n            {...floatingProps}\n            className={cn(\n              infoLabelClassNames.info,\n              'w-max max-w-xs rounded-md border border-border bg-background px-3 py-2 text-caption-1 text-foreground shadow-16',\n            )}\n            onPointerEnter={handlePointerEnter}\n            onPointerLeave={handlePointerLeave}\n          >\n            {info}\n          </div>\n        </Portal>\n      )}\n    </span>\n  );\n};\n\nInfoLabel.displayName = 'InfoLabel';\n"],"mappings":"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"}

package/dist/components/data-display/InfoLabel.mjs

@@ -1,104 +1,105 @@
 "use client";
 import { cn as e } from "../../lib/cn.mjs";
-import { useId as t } from "../../hooks/useId.mjs";
-import { useMergedRefs as n } from "../../hooks/useMergedRefs.mjs";
-import { useDismiss as r } from "../../hooks/useDismiss.mjs";
-import { Portal as i } from "../portal/Portal.mjs";
-import { focusRing as a } from "../../lib/styles.mjs";
-import { InfoIcon as o } from "../../lib/icons.mjs";
-import { usePopupPosition as s } from "../../hooks/usePopupPosition.mjs";
-import * as c from "react";
-import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { infoLabelClassNames as t } from "../../lib/classNames.mjs";
+import { useId as n } from "../../hooks/useId.mjs";
+import { useMergedRefs as r } from "../../hooks/useMergedRefs.mjs";
+import { useDismiss as i } from "../../hooks/useDismiss.mjs";
+import { Portal as a } from "../portal/Portal.mjs";
+import { focusRing as o } from "../../lib/styles.mjs";
+import { InfoIcon as s } from "../../lib/icons.mjs";
+import { usePopupPosition as c } from "../../hooks/usePopupPosition.mjs";
+import * as l from "react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
 //#region src/components/data-display/InfoLabel.tsx
-var d = 250, f = 250, p = ({ label: p, info: m, infoButtonLabel: h = "Information", className: g, ref: _, ...v }) => {
-	let y = t("info-label-description"), [b, x] = c.useState(null), S = b !== null, C = c.useRef(null), w = c.useRef(null), T = c.useRef(!1), E = c.useRef(null), D = c.useRef(null), O = c.useRef(null), k = () => {
-		D.current !== null && clearTimeout(D.current), D.current = null;
-	}, A = () => {
+var f = 250, p = 250, m = ({ label: m, info: h, infoButtonLabel: g = "Information", className: _, ref: v, ...y }) => {
+	let b = n("info-label-description"), [x, S] = l.useState(null), C = x !== null, w = l.useRef(null), T = l.useRef(null), E = l.useRef(!1), D = l.useRef(null), O = l.useRef(null), k = l.useRef(null), A = () => {
 		O.current !== null && clearTimeout(O.current), O.current = null;
+	}, j = () => {
+		k.current !== null && clearTimeout(k.current), k.current = null;
 	};
-	c.useEffect(() => () => {
-		E.current !== null && clearTimeout(E.current), D.current !== null && clearTimeout(D.current), O.current !== null && clearTimeout(O.current);
+	l.useEffect(() => () => {
+		D.current !== null && clearTimeout(D.current), O.current !== null && clearTimeout(O.current), k.current !== null && clearTimeout(k.current);
 	}, []);
-	let j = () => {
-		k(), A(), x(null);
-	}, { setReference: M, setFloating: N, floatingProps: P } = s({
-		open: S,
+	let M = () => {
+		A(), j(), S(null);
+	}, { setReference: N, setFloating: P, floatingProps: F } = c({
+		open: C,
 		side: "top",
 		align: "center",
 		offset: 8
-	}), { layerId: F } = r({
-		open: S,
-		onDismiss: j,
-		refs: [C, w],
-		anchorRef: C,
+	}), { layerId: I } = i({
+		open: C,
+		onDismiss: M,
+		refs: [w, T],
+		anchorRef: w,
 		focusOutside: !0
-	}), I = n(C, M), L = n(w, N), R = () => {
-		k(), A(), O.current = setTimeout(() => {
-			O.current = null, x((e) => e === "hover" ? null : e);
-		}, f);
-	}, z = (e) => {
-		e.pointerType !== "touch" && (A(), !(S || D.current !== null) && (D.current = setTimeout(() => {
-			D.current = null, x((e) => e ?? "hover");
-		}, d)));
+	}), L = r(w, N), R = r(T, P), z = () => {
+		A(), j(), k.current = setTimeout(() => {
+			k.current = null, S((e) => e === "hover" ? null : e);
+		}, p);
 	}, B = (e) => {
-		e.pointerType !== "touch" && R();
-	}, V = () => {
-		T.current = !0, E.current !== null && clearTimeout(E.current), E.current = setTimeout(() => {
-			E.current = null, T.current = !1;
-		}, 0);
+		e.pointerType !== "touch" && (j(), !(C || O.current !== null) && (O.current = setTimeout(() => {
+			O.current = null, S((e) => e ?? "hover");
+		}, f)));
+	}, V = (e) => {
+		e.pointerType !== "touch" && z();
 	}, H = () => {
-		T.current || x((e) => e === "click" ? e : "focus");
+		E.current = !0, D.current !== null && clearTimeout(D.current), D.current = setTimeout(() => {
+			D.current = null, E.current = !1;
+		}, 0);
 	}, U = () => {
-		x((e) => e === "focus" ? null : e);
+		E.current || S((e) => e === "click" ? e : "focus");
 	}, W = () => {
-		k(), A(), x((e) => e === "click" ? null : "click");
+		S((e) => e === "focus" ? null : e);
+	}, G = () => {
+		A(), j(), S((e) => e === "click" ? null : "click");
 	};
-	return /* @__PURE__ */ u("span", {
-		ref: _,
-		className: e("inline-flex items-center gap-1 text-body-1", g),
-		...v,
+	return /* @__PURE__ */ d("span", {
+		ref: v,
+		className: e(t.root, "inline-flex items-center gap-1 text-body-1", _),
+		...y,
 		children: [
-			p,
-			/* @__PURE__ */ l("button", {
-				ref: I,
+			m,
+			/* @__PURE__ */ u("button", {
+				ref: L,
 				type: "button",
-				"aria-label": h,
-				"aria-expanded": S,
-				"aria-describedby": y,
-				className: e("inline-flex size-4 shrink-0 items-center justify-center rounded-full border-0 bg-transparent p-0 text-muted-foreground", "not-disabled:not-aria-disabled:hover:text-foreground", a),
-				onPointerDown: V,
-				onMouseDown: V,
-				onPointerEnter: z,
-				onPointerLeave: B,
-				onFocus: H,
-				onBlur: U,
-				onClick: W,
-				children: /* @__PURE__ */ l(o, { size: 16 })
+				"aria-label": g,
+				"aria-expanded": C,
+				"aria-describedby": b,
+				className: e(t.infoButton, "inline-flex size-4 shrink-0 items-center justify-center rounded-full border-0 bg-transparent p-0 text-muted-foreground", "not-disabled:not-aria-disabled:hover:text-foreground", o),
+				onPointerDown: H,
+				onMouseDown: H,
+				onPointerEnter: B,
+				onPointerLeave: V,
+				onFocus: U,
+				onBlur: W,
+				onClick: G,
+				children: /* @__PURE__ */ u(s, { size: 16 })
 			}),
-			/* @__PURE__ */ l("span", {
-				id: y,
+			/* @__PURE__ */ u("span", {
+				id: b,
 				hidden: !0,
-				children: m
+				children: h
 			}),
-			S && /* @__PURE__ */ l(i, {
-				layerId: F,
-				children: /* @__PURE__ */ l("div", {
-					ref: L,
+			C && /* @__PURE__ */ u(a, {
+				layerId: I,
+				children: /* @__PURE__ */ u("div", {
+					ref: R,
 					"aria-hidden": "true",
 					"data-wave-infolabel-surface": "",
 					"data-state": "open",
-					...P,
-					className: "w-max max-w-xs rounded-md border border-border bg-background px-3 py-2 text-caption-1 text-foreground shadow-16",
-					onPointerEnter: z,
-					onPointerLeave: B,
-					children: m
+					...F,
+					className: e(t.info, "w-max max-w-xs rounded-md border border-border bg-background px-3 py-2 text-caption-1 text-foreground shadow-16"),
+					onPointerEnter: B,
+					onPointerLeave: V,
+					children: h
 				})
 			})
 		]
 	});
 };
-p.displayName = "InfoLabel";
+m.displayName = "InfoLabel";
 //#endregion
-export { p as InfoLabel };
+export { m as InfoLabel };
 
 //# sourceMappingURL=InfoLabel.mjs.map

package/dist/components/data-display/InfoLabel.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"InfoLabel.mjs","names":["useId","useId$1","React","SHOW_DELAY","HIDE_DELAY","InfoLabel","props","descriptionId","openReason","setOpenReason","open","triggerRef","surfaceRef","pointerPressRef","pressTimerRef","showTimerRef","hideTimerRef","clearShowTimer","clearHideTimer","close","usePopupPosition","useDismiss","triggerRefs","useMergedRefs","setReference","surfaceRefs","setFloating","scheduleHide","reason","handlePointerEnter","event","handlePointerLeave","handlePointerDown","handleFocus","handleBlur","handleClick","cn","className","label","infoButtonLabel","focusRing","InfoIcon","info","Portal","floatingProps"],"sources":["../../../src/components/data-display/InfoLabel.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport { focusRing } from '../../lib/styles';\nimport { InfoIcon } from '../../lib/icons';\nimport { useId } from '../../hooks/useId';\nimport { useDismiss } from '../../hooks/useDismiss';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport { usePopupPosition } from '../../hooks/usePopupPosition';\nimport { Portal } from '../portal/Portal';\n\n/** Properties for the InfoLabel component. */\nexport interface InfoLabelProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /** Primary label text to display. */\n  label: string;\n  /**\n   * Additional information about the label. It describes the info button\n   * (`aria-describedby`, available from the first render) and is shown in a popup on hover,\n   * keyboard focus or click.\n   */\n  info: string;\n  /**\n   * Accessible name of the info button. Localise it here.\n   * @default 'Information'\n   */\n  infoButtonLabel?: string;\n  /** Ref to the root `<span>`. */\n  ref?: React.Ref<HTMLSpanElement>;\n}\n\n/** Why the popup is open: a click pins it; hover and keyboard focus open it transiently. */\ntype OpenReason = 'hover' | 'focus' | 'click';\n\n/** Hover delay before the popup opens, and before it closes after the pointer leaves (ms). */\nconst SHOW_DELAY = 250;\nconst HIDE_DELAY = 250;\n\ntype Timer = ReturnType<typeof setTimeout>;\n\n/**\n * A label with an info button that reveals additional information (a \"toggletip\").\n *\n * - The info button is a `<button type=\"button\">` named `infoButtonLabel` (\"Information\"). The\n *   info text is rendered inline in a `hidden` element and linked with `aria-describedby`, so it is\n *   announced from the first render (also after server rendering), whether the popup is open or not.\n * - The visual popup is portaled only while open. It is `aria-hidden` because it duplicates the\n *   description, and it holds no focusable content, so focus stays on the button.\n * - Opens on keyboard focus (not on focus that comes from a pointer press), on hover after a\n *   short delay (the popup itself can be hovered) and on click. A click pins it: a click while it is\n *   open because of hover or focus keeps it open, a click on a pinned popup closes it.\n * - Closes on Escape, on a press outside, when focus moves elsewhere and — unless pinned — when\n *   the pointer leaves or the button loses focus (WCAG 1.4.13). A popup opened by hover that then\n *   receives keyboard focus stays open while the button keeps focus, even after the pointer leaves.\n *\n * @example\n * <InfoLabel label=\"Password\" info=\"Use at least 8 characters.\" />\n */\nexport const InfoLabel = ({\n  label,\n  info,\n  infoButtonLabel = 'Information',\n  className,\n  ref,\n  ...props\n}: InfoLabelProps) => {\n  const descriptionId = useId('info-label-description');\n  const [openReason, setOpenReason] = React.useState<OpenReason | null>(null);\n  const open = openReason !== null;\n\n  const triggerRef = React.useRef<HTMLButtonElement | null>(null);\n  const surfaceRef = React.useRef<HTMLDivElement | null>(null);\n  /**\n   * Set by a pointer press on the button, so the focus that follows does not open the popup. It\n   * lasts only for the event turn of the press (see `handlePointerDown`).\n   */\n  const pointerPressRef = React.useRef(false);\n  const pressTimerRef = React.useRef<Timer | null>(null);\n  const showTimerRef = React.useRef<Timer | null>(null);\n  const hideTimerRef = React.useRef<Timer | null>(null);\n\n  const clearShowTimer = () => {\n    if (showTimerRef.current !== null) clearTimeout(showTimerRef.current);\n    showTimerRef.current = null;\n  };\n  const clearHideTimer = () => {\n    if (hideTimerRef.current !== null) clearTimeout(hideTimerRef.current);\n    hideTimerRef.current = null;\n  };\n\n  React.useEffect(\n    () => () => {\n      if (pressTimerRef.current !== null) clearTimeout(pressTimerRef.current);\n      if (showTimerRef.current !== null) clearTimeout(showTimerRef.current);\n      if (hideTimerRef.current !== null) clearTimeout(hideTimerRef.current);\n    },\n    [],\n  );\n\n  const close = () => {\n    clearShowTimer();\n    clearHideTimer();\n    setOpenReason(null);\n  };\n\n  const { setReference, setFloating, floatingProps } = usePopupPosition({\n    open,\n    side: 'top',\n    align: 'center',\n    offset: 8,\n  });\n  const { layerId } = useDismiss({\n    open,\n    onDismiss: close,\n    refs: [triggerRef, surfaceRef],\n    anchorRef: triggerRef,\n    focusOutside: true,\n  });\n  const triggerRefs = useMergedRefs<HTMLButtonElement>(triggerRef, setReference);\n  const surfaceRefs = useMergedRefs<HTMLDivElement>(surfaceRef, setFloating);\n\n  /** Pointer left the button or the popup: a hover-opened popup closes after a delay. */\n  const scheduleHide = () => {\n    clearShowTimer();\n    clearHideTimer();\n    hideTimerRef.current = setTimeout(() => {\n      hideTimerRef.current = null;\n      setOpenReason((reason) => (reason === 'hover' ? null : reason));\n    }, HIDE_DELAY);\n  };\n\n  const handlePointerEnter = (event: React.PointerEvent) => {\n    if (event.pointerType === 'touch') return;\n    clearHideTimer();\n    if (open || showTimerRef.current !== null) return;\n    showTimerRef.current = setTimeout(() => {\n      showTimerRef.current = null;\n      setOpenReason((reason) => reason ?? 'hover');\n    }, SHOW_DELAY);\n  };\n\n  const handlePointerLeave = (event: React.PointerEvent) => {\n    if (event.pointerType === 'touch') return;\n    scheduleHide();\n  };\n\n  const handlePointerDown = () => {\n    pointerPressRef.current = true;\n    // A press focuses the button (where it does) as the default action of `mousedown`, in the same\n    // event turn. Forget the press after that turn: a press that does not focus the button (Safari\n    // and Firefox on macOS, iOS) and ends without a click (dragged off, or a touch that becomes a\n    // scroll) must not turn a later keyboard focus into pointer focus. A touch tap dispatches its\n    // compatibility `mousedown` (and the focus) after the touch ends; that `mousedown` sets the\n    // flag again.\n    if (pressTimerRef.current !== null) clearTimeout(pressTimerRef.current);\n    pressTimerRef.current = setTimeout(() => {\n      pressTimerRef.current = null;\n      pointerPressRef.current = false;\n    }, 0);\n  };\n\n  const handleFocus = () => {\n    // Keyboard focus opens; focus that comes from a pointer press waits for the click.\n    if (pointerPressRef.current) return;\n    // A popup opened by hover becomes focus-owned, so it stays while the button has focus even\n    // after the pointer leaves (WCAG 1.4.13 persistent). A pinned popup stays pinned.\n    setOpenReason((reason) => (reason === 'click' ? reason : 'focus'));\n  };\n\n  const handleBlur = () => {\n    setOpenReason((reason) => (reason === 'focus' ? null : reason));\n  };\n\n  const handleClick = () => {\n    clearShowTimer();\n    clearHideTimer();\n    // Closed → pinned; open because of hover or focus → pinned; pinned → closed.\n    setOpenReason((reason) => (reason === 'click' ? null : 'click'));\n  };\n\n  return (\n    <span\n      ref={ref}\n      className={cn('inline-flex items-center gap-1 text-body-1', className)}\n      {...props}\n    >\n      {label}\n      <button\n        ref={triggerRefs}\n        type=\"button\"\n        aria-label={infoButtonLabel}\n        aria-expanded={open}\n        aria-describedby={descriptionId}\n        className={cn(\n          'inline-flex size-4 shrink-0 items-center justify-center rounded-full border-0 bg-transparent p-0 text-muted-foreground',\n          'not-disabled:not-aria-disabled:hover:text-foreground',\n          focusRing,\n        )}\n        onPointerDown={handlePointerDown}\n        onMouseDown={handlePointerDown}\n        onPointerEnter={handlePointerEnter}\n        onPointerLeave={handlePointerLeave}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        onClick={handleClick}\n      >\n        <InfoIcon size={16} />\n      </button>\n      <span id={descriptionId} hidden>\n        {info}\n      </span>\n      {open && (\n        <Portal layerId={layerId}>\n          <div\n            ref={surfaceRefs}\n            aria-hidden=\"true\"\n            data-wave-infolabel-surface=\"\"\n            data-state=\"open\"\n            {...floatingProps}\n            className=\"w-max max-w-xs rounded-md border border-border bg-background px-3 py-2 text-caption-1 text-foreground shadow-16\"\n            onPointerEnter={handlePointerEnter}\n            onPointerLeave={handlePointerLeave}\n          >\n            {info}\n          </div>\n        </Portal>\n      )}\n    </span>\n  );\n};\n\nInfoLabel.displayName = 'InfoLabel';\n"],"mappings":"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"}
+{"version":3,"file":"InfoLabel.mjs","names":["useId","useId$1","React","SHOW_DELAY","HIDE_DELAY","InfoLabel","props","descriptionId","openReason","setOpenReason","open","triggerRef","surfaceRef","pointerPressRef","pressTimerRef","showTimerRef","hideTimerRef","clearShowTimer","clearHideTimer","close","usePopupPosition","useDismiss","triggerRefs","useMergedRefs","setReference","surfaceRefs","setFloating","scheduleHide","reason","handlePointerEnter","event","handlePointerLeave","handlePointerDown","handleFocus","handleBlur","handleClick","cn","infoLabelClassNames","className","label","infoButtonLabel","focusRing","InfoIcon","info","Portal","floatingProps"],"sources":["../../../src/components/data-display/InfoLabel.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport { infoLabelClassNames } from '../../lib/classNames';\nimport { focusRing } from '../../lib/styles';\nimport { InfoIcon } from '../../lib/icons';\nimport { useId } from '../../hooks/useId';\nimport { useDismiss } from '../../hooks/useDismiss';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport { usePopupPosition } from '../../hooks/usePopupPosition';\nimport { Portal } from '../portal/Portal';\n\n/** Properties for the InfoLabel component. */\nexport interface InfoLabelProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /** Primary label text to display. */\n  label: string;\n  /**\n   * Additional information about the label. It describes the info button\n   * (`aria-describedby`, available from the first render) and is shown in a popup on hover,\n   * keyboard focus or click.\n   */\n  info: string;\n  /**\n   * Accessible name of the info button. Localise it here.\n   * @default 'Information'\n   */\n  infoButtonLabel?: string;\n  /** Ref to the root `<span>`. */\n  ref?: React.Ref<HTMLSpanElement>;\n}\n\n/** Why the popup is open: a click pins it; hover and keyboard focus open it transiently. */\ntype OpenReason = 'hover' | 'focus' | 'click';\n\n/** Hover delay before the popup opens, and before it closes after the pointer leaves (ms). */\nconst SHOW_DELAY = 250;\nconst HIDE_DELAY = 250;\n\ntype Timer = ReturnType<typeof setTimeout>;\n\n/**\n * A label with an info button that reveals additional information (a \"toggletip\").\n *\n * - The info button is a `<button type=\"button\">` named `infoButtonLabel` (\"Information\"). The\n *   info text is rendered inline in a `hidden` element and linked with `aria-describedby`, so it is\n *   announced from the first render (also after server rendering), whether the popup is open or not.\n * - The visual popup is portaled only while open. It is `aria-hidden` because it duplicates the\n *   description, and it holds no focusable content, so focus stays on the button.\n * - Opens on keyboard focus (not on focus that comes from a pointer press), on hover after a\n *   short delay (the popup itself can be hovered) and on click. A click pins it: a click while it is\n *   open because of hover or focus keeps it open, a click on a pinned popup closes it.\n * - Closes on Escape, on a press outside, when focus moves elsewhere and — unless pinned — when\n *   the pointer leaves or the button loses focus (WCAG 1.4.13). A popup opened by hover that then\n *   receives keyboard focus stays open while the button keeps focus, even after the pointer leaves.\n *\n * @example\n * <InfoLabel label=\"Password\" info=\"Use at least 8 characters.\" />\n */\nexport const InfoLabel = ({\n  label,\n  info,\n  infoButtonLabel = 'Information',\n  className,\n  ref,\n  ...props\n}: InfoLabelProps) => {\n  const descriptionId = useId('info-label-description');\n  const [openReason, setOpenReason] = React.useState<OpenReason | null>(null);\n  const open = openReason !== null;\n\n  const triggerRef = React.useRef<HTMLButtonElement | null>(null);\n  const surfaceRef = React.useRef<HTMLDivElement | null>(null);\n  /**\n   * Set by a pointer press on the button, so the focus that follows does not open the popup. It\n   * lasts only for the event turn of the press (see `handlePointerDown`).\n   */\n  const pointerPressRef = React.useRef(false);\n  const pressTimerRef = React.useRef<Timer | null>(null);\n  const showTimerRef = React.useRef<Timer | null>(null);\n  const hideTimerRef = React.useRef<Timer | null>(null);\n\n  const clearShowTimer = () => {\n    if (showTimerRef.current !== null) clearTimeout(showTimerRef.current);\n    showTimerRef.current = null;\n  };\n  const clearHideTimer = () => {\n    if (hideTimerRef.current !== null) clearTimeout(hideTimerRef.current);\n    hideTimerRef.current = null;\n  };\n\n  React.useEffect(\n    () => () => {\n      if (pressTimerRef.current !== null) clearTimeout(pressTimerRef.current);\n      if (showTimerRef.current !== null) clearTimeout(showTimerRef.current);\n      if (hideTimerRef.current !== null) clearTimeout(hideTimerRef.current);\n    },\n    [],\n  );\n\n  const close = () => {\n    clearShowTimer();\n    clearHideTimer();\n    setOpenReason(null);\n  };\n\n  const { setReference, setFloating, floatingProps } = usePopupPosition({\n    open,\n    side: 'top',\n    align: 'center',\n    offset: 8,\n  });\n  const { layerId } = useDismiss({\n    open,\n    onDismiss: close,\n    refs: [triggerRef, surfaceRef],\n    anchorRef: triggerRef,\n    focusOutside: true,\n  });\n  const triggerRefs = useMergedRefs<HTMLButtonElement>(triggerRef, setReference);\n  const surfaceRefs = useMergedRefs<HTMLDivElement>(surfaceRef, setFloating);\n\n  /** Pointer left the button or the popup: a hover-opened popup closes after a delay. */\n  const scheduleHide = () => {\n    clearShowTimer();\n    clearHideTimer();\n    hideTimerRef.current = setTimeout(() => {\n      hideTimerRef.current = null;\n      setOpenReason((reason) => (reason === 'hover' ? null : reason));\n    }, HIDE_DELAY);\n  };\n\n  const handlePointerEnter = (event: React.PointerEvent) => {\n    if (event.pointerType === 'touch') return;\n    clearHideTimer();\n    if (open || showTimerRef.current !== null) return;\n    showTimerRef.current = setTimeout(() => {\n      showTimerRef.current = null;\n      setOpenReason((reason) => reason ?? 'hover');\n    }, SHOW_DELAY);\n  };\n\n  const handlePointerLeave = (event: React.PointerEvent) => {\n    if (event.pointerType === 'touch') return;\n    scheduleHide();\n  };\n\n  const handlePointerDown = () => {\n    pointerPressRef.current = true;\n    // A press focuses the button (where it does) as the default action of `mousedown`, in the same\n    // event turn. Forget the press after that turn: a press that does not focus the button (Safari\n    // and Firefox on macOS, iOS) and ends without a click (dragged off, or a touch that becomes a\n    // scroll) must not turn a later keyboard focus into pointer focus. A touch tap dispatches its\n    // compatibility `mousedown` (and the focus) after the touch ends; that `mousedown` sets the\n    // flag again.\n    if (pressTimerRef.current !== null) clearTimeout(pressTimerRef.current);\n    pressTimerRef.current = setTimeout(() => {\n      pressTimerRef.current = null;\n      pointerPressRef.current = false;\n    }, 0);\n  };\n\n  const handleFocus = () => {\n    // Keyboard focus opens; focus that comes from a pointer press waits for the click.\n    if (pointerPressRef.current) return;\n    // A popup opened by hover becomes focus-owned, so it stays while the button has focus even\n    // after the pointer leaves (WCAG 1.4.13 persistent). A pinned popup stays pinned.\n    setOpenReason((reason) => (reason === 'click' ? reason : 'focus'));\n  };\n\n  const handleBlur = () => {\n    setOpenReason((reason) => (reason === 'focus' ? null : reason));\n  };\n\n  const handleClick = () => {\n    clearShowTimer();\n    clearHideTimer();\n    // Closed → pinned; open because of hover or focus → pinned; pinned → closed.\n    setOpenReason((reason) => (reason === 'click' ? null : 'click'));\n  };\n\n  return (\n    <span\n      ref={ref}\n      className={cn(\n        infoLabelClassNames.root,\n        'inline-flex items-center gap-1 text-body-1',\n        className,\n      )}\n      {...props}\n    >\n      {label}\n      <button\n        ref={triggerRefs}\n        type=\"button\"\n        aria-label={infoButtonLabel}\n        aria-expanded={open}\n        aria-describedby={descriptionId}\n        className={cn(\n          infoLabelClassNames.infoButton,\n          'inline-flex size-4 shrink-0 items-center justify-center rounded-full border-0 bg-transparent p-0 text-muted-foreground',\n          'not-disabled:not-aria-disabled:hover:text-foreground',\n          focusRing,\n        )}\n        onPointerDown={handlePointerDown}\n        onMouseDown={handlePointerDown}\n        onPointerEnter={handlePointerEnter}\n        onPointerLeave={handlePointerLeave}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        onClick={handleClick}\n      >\n        <InfoIcon size={16} />\n      </button>\n      <span id={descriptionId} hidden>\n        {info}\n      </span>\n      {open && (\n        <Portal layerId={layerId}>\n          <div\n            ref={surfaceRefs}\n            aria-hidden=\"true\"\n            data-wave-infolabel-surface=\"\"\n            data-state=\"open\"\n            {...floatingProps}\n            className={cn(\n              infoLabelClassNames.info,\n              'w-max max-w-xs rounded-md border border-border bg-background px-3 py-2 text-caption-1 text-foreground shadow-16',\n            )}\n            onPointerEnter={handlePointerEnter}\n            onPointerLeave={handlePointerLeave}\n          >\n            {info}\n          </div>\n        </Portal>\n      )}\n    </span>\n  );\n};\n\nInfoLabel.displayName = 'InfoLabel';\n"],"mappings":"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"}

package/dist/components/data-display/List.cjs

@@ -1,2 +1,2 @@
-"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/children.cjs"),r=require("../../lib/dev.cjs"),i=require("../../lib/slot.cjs"),a=require("../../lib/composeEventHandlers.cjs"),o=require("../../hooks/useEventCallback.cjs"),s=require("../../hooks/useControllable.cjs"),c=require("../../hooks/useId.cjs"),l=require("../../lib/direction.cjs"),u=require("../../lib/focus.cjs"),d=require("../../hooks/useRovingTabIndex.cjs"),f=require("../../hooks/useMergedRefs.cjs"),p=require("../../lib/styles.cjs"),m=require("./List.registry.cjs");let h=require("react");h=e.__toESM(h,1);let g=require("react/jsx-runtime");var _=h.createContext(null);_.displayName=`ListContext`;var v=null;function y(){return v??={mode:`list`,selectedValues:new Set,toggleItem:()=>{},getTabIndex:()=>-1,registry:new m.ListRegistry},v}function b(e){return h.useContext(_)||(r.reportMissingContext(e,`a List`),y())}var x=[];function S(e){r.warnOnce(`List:duplicate:${e}`,`List: several items share the value "${e}". Item values must be unique within a List; items with the same value are selected (and tab stops) together.`)}function C(e){return n.flattenChildren(e).some(({node:e})=>n.isElementOfType(e,I)&&i.slotRendersContent(e.props.action))}var w=[u.FOCUSABLE_SELECTOR,`[data-list-action]`,`label`,`[role="button"]`,`[role="link"]`,`[role="checkbox"]`,`[role="switch"]`,`[role="radio"]`,`[role="menuitem"]`,`[role="textbox"]`,`[role="combobox"]`,`[role="slider"]`,`[role="spinbutton"]`].join(`, `);function T(e){let t=e.currentTarget,n=e.target;if(!n||typeof n.nodeType!=`number`||!t.contains(n))return!0;let r=n.nodeType===Node.ELEMENT_NODE?n:n.parentElement??null;for(;r&&r!==t;r=r.parentElement)if(r.matches(w))return!0;return!1}function E(e){return e.ctrlKey||e.altKey||e.metaKey?!1:e.key===`Enter`||e.key===` `}var D=new Set([`textbox`,`searchbox`,`combobox`,`spinbutton`,`slider`]),O=new Set([`button`,`checkbox`,`color`,`file`,`hidden`,`image`,`radio`,`reset`,`submit`]);function k(e){let t=e.getAttribute(`role`);if(t!==null&&D.has(t))return!0;let n=e.localName;return n===`textarea`||n===`select`?!0:n===`input`?!O.has(e.type):e.matches(`[contenteditable]:not([contenteditable="false"])`)}function A(e){return Array.from(e.querySelectorAll(u.FOCUSABLE_SELECTOR)).filter(e=>u.isFocusable(e))}function j(e){if(!e.parentElement)return-1;let t=0;for(let n=e.previousElementSibling;n;n=n.previousElementSibling)t++;return t}function M(e,t){let n=null,r=null,i=null,a=0;for(let o=e.firstElementChild;o;o=o.nextElementSibling,a++){if(t.value!==void 0&&o.getAttribute(`data-roving-value`)===t.value){n=o;break}a===t.index&&(r=o),i=o}let o=n??r??(t.index>=0?i:null);return o?o.hasAttribute(`tabindex`)?o:A(o)[0]??null:null}function N(e){for(let t=e.firstElementChild;t;t=t.nextElementSibling)if(t.hasAttribute(`data-list-action`))return t;return null}function P(e){let t=[];for(let n of A(e)){let r=k(n)?e:n;t.includes(r)||t.push(r)}return t}var F=e=>{let{selectable:n=!1,selectionMode:i,selectedItems:o,defaultSelectedItems:c,onSelectionChange:l,selectedItem:u,defaultSelectedItem:p,onSelectedItemChange:v,className:y,children:b,ref:w,onKeyDown:T,onKeyDownCapture:E,onFocus:D,...O}=e;i===`multi`&&r.warnDeprecated(`List`,`selectionMode="multi"`,`selectionMode="multiple"`);let k=i===`multiple`||i===`multi`,A=h.useMemo(()=>!k&&u!==void 0?u===null?x:[u]:o,[k,u,o]),j=h.useMemo(()=>!k&&p!=null?[p]:c??x,[k,p,c]),[N,P]=s.useControllable(A,j,e=>{let t=[...e];l?.(t),k||v?.(t[0]??null)}),[F]=h.useState(()=>new m.ListRegistry);h.useLayoutEffect(()=>{F.setActive(n)},[F,n]);let I=h.useSyncExternalStore(F.subscribe,F.getSnapshot,F.getServerSnapshot),L=h.useMemo(()=>I?N.filter(e=>I.valueSet.has(e)):N,[I,N]),R=h.useMemo(()=>new Set(L),[L]),z=n&&(I?I.hasActions:C(b)),B=n?z?`grid`:`listbox`:`list`,V=I?I.values.find(e=>R.has(e))??null:L[0]??null,{containerProps:H,getTabIndex:U}=d.useRovingTabIndex({activeValue:V,orientation:`vertical`,typeahead:(I?.count??0)>7,tabStop:`active`,itemSelector:`:scope > [data-roving-value]`}),{ref:W,onKeyDown:G,onKeyDownCapture:K,onFocus:q}=H,J=h.useRef(null),Y=f.useMergedRefs(w,n?W:null,J);h.useLayoutEffect(()=>{let e=F.takeFocusLoss(),t=J.current;if(!e||!t)return;let n=t.ownerDocument,r=n.activeElement;r&&r!==n.body&&r.isConnected||M(t,e)?.focus()},[B,F]),h.useLayoutEffect(()=>{F.syncOrder(J.current)});let X=h.useCallback(e=>{P(t=>{let n=F.prune(t),r=n.includes(e);return k?r?n.filter(t=>t!==e):[...n,e]:r?[]:[e]})},[k,F,P]),Z=I?.duplicates??x;h.useEffect(()=>{for(let e of Z)S(e)},[Z]);let Q=L.length;h.useEffect(()=>{n&&!k&&Q>1&&r.warnOnce(`List:single-several-selected`,`List: a single-selection list (selectionMode "single") received ${Q} selected items. Pass one value with \`selectedItem\`, or use selectionMode="multiple".`)},[n,k,Q]);let $=h.useMemo(()=>({mode:B,selectedValues:R,toggleItem:X,getTabIndex:U,registry:F}),[B,R,X,U,F]),ee=B===`grid`?`div`:`ul`,te=B===`grid`?`grid`:B===`listbox`?`listbox`:`list`;return(0,g.jsx)(_.Provider,{value:$,children:(0,g.jsx)(ee,{role:te,"aria-multiselectable":n&&k?!0:void 0,className:t.cn(`m-0 list-none p-0`,y),...O,ref:Y,"data-roving-container":n?``:void 0,onKeyDown:n?a.composeEventHandlers(T,G):T,onKeyDownCapture:n?a.composeEventHandlers(E,K):E,onFocus:n?a.composeEventHandlers(D,q,{checkDefaultPrevented:!1}):D,children:b})})};F.displayName=`List`;var I=({value:e,action:n,className:r,children:s,onClick:u,onKeyDown:d,ref:m,..._})=>{let{mode:v,selectedValues:y,toggleItem:x,getTabIndex:S,registry:C}=b(`ListItem`),w=c.useId(`list-item`),D=e||void 0,O=D??w,M=i.slotRendersContent(n),[F]=h.useState(()=>({})),I=h.useRef(null),L=f.useMergedRefs(m,I);h.useLayoutEffect(()=>{C.set(F,{value:D,hasAction:M,element:I})},[C,F,D,M]),h.useLayoutEffect(()=>()=>C.delete(F),[C,F]);let R=o.useEventCallback(e=>{let t=e.parentElement;C.recordFocusLoss({value:D,index:t?j(t):-1})});h.useLayoutEffect(()=>{let e=I.current;return()=>{if(!e)return;let t=e.ownerDocument.activeElement;t&&e.contains(t)&&C.recordFocusLoss({value:D,index:j(e)})}},[C,D]);let z=D!==void 0&&y.has(D),V=v!==`list`,H=()=>{D!==void 0&&x(D)},U=e=>{T(e)||H()},W=e=>{T(e)||E(e)&&(e.preventDefault(),H())},G=e=>{let t=e.currentTarget,n=e.target,r=N(t);if(!r||!r.contains(n)){if(n!==t)return;if(E(e)){e.preventDefault(),H();return}let i=l.getArrowIntent(e.key,{orientation:`horizontal`,dir:l.getDirection(t)})===`next`&&r?P(r)[0]:void 0;i&&(e.preventDefault(),i.focus());return}if(n!==r&&k(n)){e.key===`Escape`&&(e.preventDefault(),r.focus());return}if(n===r&&(e.key===`Enter`||e.key===`F2`)){let t=A(r).find(e=>k(e));t&&(e.preventDefault(),t.focus());return}let i=l.getArrowIntent(e.key,{orientation:`horizontal`,dir:l.getDirection(t)});if(!i)return;e.preventDefault();let a=P(r),o=a.indexOf(n);i===`next`?a[o+1]?.focus():o>0?a[o-1].focus():t.focus()},K=v===`grid`?`div`:`li`,q=v===`grid`?`div`:`span`,J=v===`grid`?`row`:v===`listbox`?`option`:`listitem`,Y=V?{"aria-selected":z,tabIndex:S(O),"data-roving-value":O,"data-selected":z?``:void 0,onClick:a.composeEventHandlers(u,U),onKeyDown:a.composeEventHandlers(d,v===`grid`?G:W)}:{onClick:u,onKeyDown:d};return(0,g.jsxs)(K,{role:J,className:t.cn(`flex items-center border-b border-border px-4 py-2 text-body-1`,V&&[`relative cursor-pointer`,`focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring`],V&&(z?[`bg-subtle-selected before:absolute before:inset-y-2 before:start-0 before:w-0.5 before:rounded-full before:bg-primary`,p.forcedColors.selectedContainer]:`hover:bg-subtle-hover`),r),..._,ref:L,...Y,children:[(0,g.jsx)(q,{role:v===`grid`?`gridcell`:void 0,className:`min-w-0 flex-1`,children:s}),M&&(0,g.jsx)(B,{grid:v===`grid`,onRemovedWithFocus:R,children:i.materialiseSlotContent(n)})]})};I.displayName=`ListItem`;var L=[`[data-roving-container]`,...[`toolbar`,`radiogroup`,`listbox`,`grid`,`treegrid`,`tablist`,`menu`,`menubar`,`tree`].map(e=>`[role="${e}"]`)].join(`, `),R=[`tabindex`,`href`,`contenteditable`,`controls`];function z(e){let t=new Map,n=new WeakSet,r=()=>{for(let n of t.keys())e.contains(n)||t.delete(n);for(let r of e.querySelectorAll(u.FOCUSABLE_SELECTOR)){let i=r.getAttribute(`tabindex`);if(i===`-1`||n.has(r))continue;let a=r.closest(L);a&&e.contains(a)||(t.set(r,i),r.setAttribute(`tabindex`,`-1`))}};if(r(),typeof MutationObserver>`u`)return()=>{};let i=new MutationObserver(e=>{let a=new Set;for(let n of e){let e=n.target;n.attributeName===`tabindex`&&t.has(e)&&a.add(e)}for(let e of a){let r=e.getAttribute(`tabindex`);r!==`-1`&&r===t.get(e)?(t.delete(e),n.add(e)):t.set(e,r)}r(),i.takeRecords()});return i.observe(e,{subtree:!0,childList:!0,attributes:!0,attributeFilter:R}),()=>{i.disconnect();for(let[e,n]of t)n===null?e.removeAttribute(`tabindex`):e.setAttribute(`tabindex`,n);t.clear()}}function B({grid:e,onRemovedWithFocus:n,children:r}){let i=h.useRef(null);return h.useLayoutEffect(()=>{let e=i.current;return()=>{if(!e)return;let t=e.ownerDocument.activeElement;t&&e.contains(t)&&n(e)}},[n,e]),h.useLayoutEffect(()=>{let t=i.current;return e&&t?z(t):void 0},[e]),(0,g.jsx)(e?`div`:`span`,{ref:i,role:e?`gridcell`:void 0,tabIndex:e?-1:void 0,"data-list-action":``,className:t.cn(`ms-2 shrink-0`,e&&`focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring`),children:r})}B.displayName=`ListActionCell`;var V=Object.assign(F,{Item:I});exports.List=V,exports.ListItem=I;
+"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/children.cjs"),r=require("../../lib/dev.cjs"),i=require("../../lib/slot.cjs"),a=require("../../lib/composeEventHandlers.cjs"),o=require("../../lib/classNames.cjs"),s=require("../../hooks/useEventCallback.cjs"),c=require("../../hooks/useControllable.cjs"),l=require("../../hooks/useId.cjs"),u=require("../../lib/direction.cjs"),d=require("../../lib/focus.cjs"),f=require("../../hooks/useRovingTabIndex.cjs"),p=require("../../hooks/useMergedRefs.cjs"),m=require("../../lib/styles.cjs"),h=require("./List.registry.cjs");let g=require("react");g=e.__toESM(g,1);let _=require("react/jsx-runtime");var v=g.createContext(null);v.displayName=`ListContext`;var y=null;function b(){return y??={mode:`list`,selectedValues:new Set,toggleItem:()=>{},getTabIndex:()=>-1,registry:new h.ListRegistry},y}function x(e){return g.useContext(v)||(r.reportMissingContext(e,`a List`),b())}var S=[];function C(e){r.warnOnce(`List:duplicate:${e}`,`List: several items share the value "${e}". Item values must be unique within a List; items with the same value are selected (and tab stops) together.`)}function w(e){return n.flattenChildren(e).some(({node:e})=>n.isElementOfType(e,L)&&i.slotRendersContent(e.props.action))}var T=[d.FOCUSABLE_SELECTOR,`[data-list-action]`,`label`,`[role="button"]`,`[role="link"]`,`[role="checkbox"]`,`[role="switch"]`,`[role="radio"]`,`[role="menuitem"]`,`[role="textbox"]`,`[role="combobox"]`,`[role="slider"]`,`[role="spinbutton"]`].join(`, `);function E(e){let t=e.currentTarget,n=e.target;if(!n||typeof n.nodeType!=`number`||!t.contains(n))return!0;let r=n.nodeType===Node.ELEMENT_NODE?n:n.parentElement??null;for(;r&&r!==t;r=r.parentElement)if(r.matches(T))return!0;return!1}function D(e){return e.ctrlKey||e.altKey||e.metaKey?!1:e.key===`Enter`||e.key===` `}var O=new Set([`textbox`,`searchbox`,`combobox`,`spinbutton`,`slider`]),k=new Set([`button`,`checkbox`,`color`,`file`,`hidden`,`image`,`radio`,`reset`,`submit`]);function A(e){let t=e.getAttribute(`role`);if(t!==null&&O.has(t))return!0;let n=e.localName;return n===`textarea`||n===`select`?!0:n===`input`?!k.has(e.type):e.matches(`[contenteditable]:not([contenteditable="false"])`)}function j(e){return Array.from(e.querySelectorAll(d.FOCUSABLE_SELECTOR)).filter(e=>d.isFocusable(e))}function M(e){if(!e.parentElement)return-1;let t=0;for(let n=e.previousElementSibling;n;n=n.previousElementSibling)t++;return t}function N(e,t){let n=null,r=null,i=null,a=0;for(let o=e.firstElementChild;o;o=o.nextElementSibling,a++){if(t.value!==void 0&&o.getAttribute(`data-roving-value`)===t.value){n=o;break}a===t.index&&(r=o),i=o}let o=n??r??(t.index>=0?i:null);return o?o.hasAttribute(`tabindex`)?o:j(o)[0]??null:null}function P(e){for(let t=e.firstElementChild;t;t=t.nextElementSibling)if(t.hasAttribute(`data-list-action`))return t;return null}function F(e){let t=[];for(let n of j(e)){let r=A(n)?e:n;t.includes(r)||t.push(r)}return t}var I=e=>{let{selectable:n=!1,selectionMode:i,selectedItems:s,defaultSelectedItems:l,onSelectionChange:u,selectedItem:d,defaultSelectedItem:m,onSelectedItemChange:y,className:b,children:x,ref:T,onKeyDown:E,onKeyDownCapture:D,onFocus:O,...k}=e;i===`multi`&&r.warnDeprecated(`List`,`selectionMode="multi"`,`selectionMode="multiple"`);let A=i===`multiple`||i===`multi`,j=g.useMemo(()=>!A&&d!==void 0?d===null?S:[d]:s,[A,d,s]),M=g.useMemo(()=>!A&&m!=null?[m]:l??S,[A,m,l]),[P,F]=c.useControllable(j,M,e=>{let t=[...e];u?.(t),A||y?.(t[0]??null)}),[I]=g.useState(()=>new h.ListRegistry);g.useLayoutEffect(()=>{I.setActive(n)},[I,n]);let L=g.useSyncExternalStore(I.subscribe,I.getSnapshot,I.getServerSnapshot),R=g.useMemo(()=>L?P.filter(e=>L.valueSet.has(e)):P,[L,P]),z=g.useMemo(()=>new Set(R),[R]),B=n&&(L?L.hasActions:w(x)),V=n?B?`grid`:`listbox`:`list`,H=L?L.values.find(e=>z.has(e))??null:R[0]??null,{containerProps:U,getTabIndex:W}=f.useRovingTabIndex({activeValue:H,orientation:`vertical`,typeahead:(L?.count??0)>7,tabStop:`active`,itemSelector:`:scope > [data-roving-value]`}),{ref:G,onKeyDown:K,onKeyDownCapture:q,onFocus:J}=U,Y=g.useRef(null),X=p.useMergedRefs(T,n?G:null,Y);g.useLayoutEffect(()=>{let e=I.takeFocusLoss(),t=Y.current;if(!e||!t)return;let n=t.ownerDocument,r=n.activeElement;r&&r!==n.body&&r.isConnected||N(t,e)?.focus()},[V,I]),g.useLayoutEffect(()=>{I.syncOrder(Y.current)});let Z=g.useCallback(e=>{F(t=>{let n=I.prune(t),r=n.includes(e);return A?r?n.filter(t=>t!==e):[...n,e]:r?[]:[e]})},[A,I,F]),Q=L?.duplicates??S;g.useEffect(()=>{for(let e of Q)C(e)},[Q]);let $=R.length;g.useEffect(()=>{n&&!A&&$>1&&r.warnOnce(`List:single-several-selected`,`List: a single-selection list (selectionMode "single") received ${$} selected items. Pass one value with \`selectedItem\`, or use selectionMode="multiple".`)},[n,A,$]);let ee=g.useMemo(()=>({mode:V,selectedValues:z,toggleItem:Z,getTabIndex:W,registry:I}),[V,z,Z,W,I]),te=V===`grid`?`div`:`ul`,ne=V===`grid`?`grid`:V===`listbox`?`listbox`:`list`;return(0,_.jsx)(v.Provider,{value:ee,children:(0,_.jsx)(te,{role:ne,"aria-multiselectable":n&&A?!0:void 0,className:t.cn(o.listClassNames.root,`m-0 list-none p-0`,b),...k,ref:X,"data-roving-container":n?``:void 0,onKeyDown:n?a.composeEventHandlers(E,K):E,onKeyDownCapture:n?a.composeEventHandlers(D,q):D,onFocus:n?a.composeEventHandlers(O,J,{checkDefaultPrevented:!1}):O,children:x})})};I.displayName=`List`;var L=({value:e,action:n,className:r,children:c,onClick:d,onKeyDown:f,ref:h,...v})=>{let{mode:y,selectedValues:b,toggleItem:S,getTabIndex:C,registry:w}=x(`ListItem`),T=l.useId(`list-item`),O=e||void 0,k=O??T,N=i.slotRendersContent(n),[I]=g.useState(()=>({})),L=g.useRef(null),R=p.useMergedRefs(h,L);g.useLayoutEffect(()=>{w.set(I,{value:O,hasAction:N,element:L})},[w,I,O,N]),g.useLayoutEffect(()=>()=>w.delete(I),[w,I]);let z=s.useEventCallback(e=>{let t=e.parentElement;w.recordFocusLoss({value:O,index:t?M(t):-1})});g.useLayoutEffect(()=>{let e=L.current;return()=>{if(!e)return;let t=e.ownerDocument.activeElement;t&&e.contains(t)&&w.recordFocusLoss({value:O,index:M(e)})}},[w,O]);let B=O!==void 0&&b.has(O),H=y!==`list`,U=()=>{O!==void 0&&S(O)},W=e=>{E(e)||U()},G=e=>{E(e)||D(e)&&(e.preventDefault(),U())},K=e=>{let t=e.currentTarget,n=e.target,r=P(t);if(!r||!r.contains(n)){if(n!==t)return;if(D(e)){e.preventDefault(),U();return}let i=u.getArrowIntent(e.key,{orientation:`horizontal`,dir:u.getDirection(t)})===`next`&&r?F(r)[0]:void 0;i&&(e.preventDefault(),i.focus());return}if(n!==r&&A(n)){e.key===`Escape`&&(e.preventDefault(),r.focus());return}if(n===r&&(e.key===`Enter`||e.key===`F2`)){let t=j(r).find(e=>A(e));t&&(e.preventDefault(),t.focus());return}let i=u.getArrowIntent(e.key,{orientation:`horizontal`,dir:u.getDirection(t)});if(!i)return;e.preventDefault();let a=F(r),o=a.indexOf(n);i===`next`?a[o+1]?.focus():o>0?a[o-1].focus():t.focus()},q=y===`grid`?`div`:`li`,J=y===`grid`?`div`:`span`,Y=y===`grid`?`row`:y===`listbox`?`option`:`listitem`,X=H?{"aria-selected":B,tabIndex:C(k),"data-roving-value":k,"data-selected":B?``:void 0,onClick:a.composeEventHandlers(d,W),onKeyDown:a.composeEventHandlers(f,y===`grid`?K:G)}:{onClick:d,onKeyDown:f};return(0,_.jsxs)(q,{role:Y,className:t.cn(o.listItemClassNames.root,`flex items-center border-b border-border px-4 py-2 text-body-1`,H&&[`relative cursor-pointer`,`focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring`],H&&(B?[`bg-subtle-selected before:absolute before:inset-y-2 before:start-0 before:w-0.5 before:rounded-full before:bg-primary`,m.forcedColors.selectedContainer]:`hover:bg-subtle-hover`),r),...v,ref:R,...X,children:[(0,_.jsx)(J,{role:y===`grid`?`gridcell`:void 0,className:t.cn(o.listItemClassNames.content,`min-w-0 flex-1`),children:c}),N&&(0,_.jsx)(V,{grid:y===`grid`,onRemovedWithFocus:z,children:i.materialiseSlotContent(n)})]})};L.displayName=`ListItem`;var R=[`[data-roving-container]`,...[`toolbar`,`radiogroup`,`listbox`,`grid`,`treegrid`,`tablist`,`menu`,`menubar`,`tree`].map(e=>`[role="${e}"]`)].join(`, `),z=[`tabindex`,`href`,`contenteditable`,`controls`];function B(e){let t=new Map,n=new WeakSet,r=()=>{for(let n of t.keys())e.contains(n)||t.delete(n);for(let r of e.querySelectorAll(d.FOCUSABLE_SELECTOR)){let i=r.getAttribute(`tabindex`);if(i===`-1`||n.has(r))continue;let a=r.closest(R);a&&e.contains(a)||(t.set(r,i),r.setAttribute(`tabindex`,`-1`))}};if(r(),typeof MutationObserver>`u`)return()=>{};let i=new MutationObserver(e=>{let a=new Set;for(let n of e){let e=n.target;n.attributeName===`tabindex`&&t.has(e)&&a.add(e)}for(let e of a){let r=e.getAttribute(`tabindex`);r!==`-1`&&r===t.get(e)?(t.delete(e),n.add(e)):t.set(e,r)}r(),i.takeRecords()});return i.observe(e,{subtree:!0,childList:!0,attributes:!0,attributeFilter:z}),()=>{i.disconnect();for(let[e,n]of t)n===null?e.removeAttribute(`tabindex`):e.setAttribute(`tabindex`,n);t.clear()}}function V({grid:e,onRemovedWithFocus:n,children:r}){let i=g.useRef(null);return g.useLayoutEffect(()=>{let e=i.current;return()=>{if(!e)return;let t=e.ownerDocument.activeElement;t&&e.contains(t)&&n(e)}},[n,e]),g.useLayoutEffect(()=>{let t=i.current;return e&&t?B(t):void 0},[e]),(0,_.jsx)(e?`div`:`span`,{ref:i,role:e?`gridcell`:void 0,tabIndex:e?-1:void 0,"data-list-action":``,className:t.cn(o.listItemClassNames.action,`ms-2 shrink-0`,e&&`focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring`),children:r})}V.displayName=`ListActionCell`;var H=Object.assign(I,{Item:L});exports.List=H,exports.ListItem=L;
 //# sourceMappingURL=List.cjs.map