@mortenbrudvik/waveui 0.14.1 → 0.16.0

package/dist/components/feedback/MessageBarGroup.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageBarGroup.cjs","names":["messageBarGroupClassNames","getFirstTabbable","usePresence","React","useMergedRefs","cn","messageBarGroupItemStructure","usePresenceGroup","useMotionClasses","messageBarGroupExitMotion","messageBarGroupEnterMotion","require_runtime","require_cn","require_dev","require_classNames","require_focus","require_useMergedRefs","require_usePresence","require_usePreserveFocus","require_motion","require_useMotion","require_usePresenceGroup","react","react_jsx_runtime","isRemainingItem","el","nextBarFocus","item","target","MessageBarGroupItem","entry","presenceRef","visible","onExited","key","itemRef","mergedRef","isMounted","presenceProps","motionClassName","element","MessageBarGroup","rest","children","animate","motion","hasSkipped","skipped","className","entries"],"sources":["../../../src/components/feedback/MessageBarGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { messageBarGroupClassNames } from '../../lib/classNames';\nimport { cn } from '../../lib/cn';\nimport { warnOnce } from '../../lib/dev';\nimport { getFirstTabbable } from '../../lib/focus';\nimport {\n  messageBarGroupEnterMotion,\n  messageBarGroupExitMotion,\n  messageBarGroupItemStructure,\n} from '../../lib/motion';\nimport type { MotionSlot } from '../../lib/types';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport { useMotionClasses } from '../../hooks/useMotion';\nimport { usePresence } from '../../hooks/usePresence';\nimport { usePresenceGroup, type PresenceGroupEntry } from '../../hooks/usePresenceGroup';\nimport { usePreserveFocus } from '../../hooks/usePreserveFocus';\n\n/** Properties for the MessageBarGroup component. */\nexport interface MessageBarGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Which changes animate: `'exit-only'` (a bar removed from the children fades and collapses\n   * out) or `'both'` (a bar added after mount also fades and slides in). Bars present at the\n   * group's first render never animate. Fluent's `animate`. The root renders it as\n   * `data-animate`.\n   * @default 'exit-only'\n   */\n  animate?: 'exit-only' | 'both';\n  /**\n   * Replaces the bars' motion (both directions); `null` turns it off. The motion is on the element\n   * around each bar (`className` stays on the root). By default a removed bar fades out while its\n   * row and its bottom margin close over 250 ms with the linear curve, so the bars after it glide\n   * up and nothing jumps when it unmounts (the margin makes up for the group's 8px gap, so a\n   * different gap in `className` needs a `motion` whose margin matches it); with\n   * `animate=\"both\"`, a bar added after mount opens its row and fades in the same way. Under\n   * reduced motion bars appear and disappear at once. `null` turns the motion off (the element\n   * still renders its `data-presence` phases, which then end at once); a class string or\n   * `{ className }` replaces the default classes with yours (see `MotionSlot`), also under a\n   * `WaveProvider` with `motion=\"none\"`, which otherwise turns the default off. A WaveUI addition:\n   * Fluent's MessageBarGroup has no motion slot (its bar only fades out).\n   * @default the collapse and fade above\n   */\n  motion?: MotionSlot | null;\n  /** MessageBar elements, each with a stable `key`. */\n  children?: React.ReactNode;\n  /** Ref to the root `<div>`. */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\ninterface MessageBarGroupItemProps {\n  entry: PresenceGroupEntry;\n  motionClassName: string;\n  onExited: (key: string) => void;\n}\n\n/** Whether `el` is the element around a bar that stays: an item that is not exiting. */\nfunction isRemainingItem(el: Element): boolean {\n  return (\n    el.classList.contains(messageBarGroupClassNames.item) &&\n    el.getAttribute('data-presence') !== 'exiting'\n  );\n}\n\n/**\n * Where focus goes when the bar of `item` leaves with focus inside it: the first tabbable element\n * of the nearest bar after it that stays and holds one, else of the nearest such bar before it.\n */\nfunction nextBarFocus(item: HTMLElement | null): HTMLElement | null {\n  if (!item) return null;\n  for (let el = item.nextElementSibling; el; el = el.nextElementSibling) {\n    const target = isRemainingItem(el) ? getFirstTabbable(el) : null;\n    if (target) return target;\n  }\n  for (let el = item.previousElementSibling; el; el = el.previousElementSibling) {\n    const target = isRemainingItem(el) ? getFirstTabbable(el) : null;\n    if (target) return target;\n  }\n  return null;\n}\n\n// The element around one bar: the presence element, whose motion ends the bar's phases.\nconst MessageBarGroupItem = ({ entry, motionClassName, onExited }: MessageBarGroupItemProps) => {\n  const { key, element, visible, appear } = entry;\n  // Destructured: react-hooks/refs treats an object whose member is passed to `ref` as a ref.\n  const {\n    isMounted,\n    ref: presenceRef,\n    presenceProps,\n  } = usePresence(visible, { appear, onExited: () => onExited(key) });\n  const itemRef = React.useRef<HTMLDivElement | null>(null);\n  const mergedRef = useMergedRefs<HTMLDivElement>(itemRef, presenceRef);\n  // Focus leaves a removed bar in its removing commit: `enabled` flipping to `false` moves it in\n  // the layout phase, while the exiting item is still there.\n  usePreserveFocus(itemRef, () => nextBarFocus(itemRef.current), { enabled: visible });\n  if (!isMounted) return null;\n  return (\n    <div\n      ref={mergedRef}\n      {...presenceProps}\n      className={cn(messageBarGroupClassNames.item, messageBarGroupItemStructure, motionClassName)}\n    >\n      {element}\n    </div>\n  );\n};\nMessageBarGroupItem.displayName = 'MessageBarGroupItem';\n\n/**\n * A stack of MessageBars that animates the bars it gains and loses, Fluent's MessageBarGroup with\n * its `animate` prop: a bar removed from the children fades out while its row closes, so the bars\n * below glide up instead of jumping (Fluent's bar only fades, and the bars below jump when it is\n * gone), and with `animate=\"both\"` a bar added after mount opens its row and fades in.\n *\n * - **Keys.** Give every bar a stable `key` (`key={message.id}`): the group follows its children\n *   by key, so it can keep a removed bar on screen during its exit, in its place, and move bars\n *   that are reordered without replacing them. A removed bar that comes back during its exit is\n *   shown again. A child without a key of its own, or text, renders after the bars as given,\n *   without motion, with a development warning. Any keyed element animates; MessageBar is the\n *   one the group is made for.\n * - **Motion.** Bars present at the group's first render (on the server too) never animate. Each\n *   bar sits in an element of its own, which renders no box while the bar is shown, so the bars\n *   are the stack's own items; while a bar enters or exits, that element clips it while its row\n *   opens or closes. An exiting bar is `inert`. See `motion` for the default and how to replace\n *   or turn it off; under `prefers-reduced-motion: reduce` a bar is added and removed at once.\n * - **Focus.** When a bar leaves with focus inside it (its Dismiss button was pressed), focus moves\n *   in the same commit to the first tabbable element of the nearest bar after it that stays and\n *   holds a tabbable element, else of the nearest such bar before it. When no such bar is left,\n *   the app decides where focus goes.\n * - **Markup.** A plain `<div>` without a role stacking the bars with an 8px gap; each MessageBar\n *   stays its own live region. MessageBarGroup is a component of its own rather than a part of\n *   MessageBar, so a page that imports only MessageBar does not load the group's motion.\n *\n * @example\n * <MessageBarGroup animate=\"both\">\n *   {messages.map((message) => (\n *     <MessageBar key={message.id} status={message.status} onDismiss={() => dismiss(message.id)}>\n *       {message.text}\n *     </MessageBar>\n *   ))}\n * </MessageBarGroup>\n */\nexport const MessageBarGroup = ({\n  animate = 'exit-only',\n  motion,\n  children,\n  className,\n  ref,\n  ...rest\n}: MessageBarGroupProps) => {\n  const { entries, skipped, onExited } = usePresenceGroup(children, {\n    appear: animate === 'both',\n  });\n  // The bars' motion: the exit, and the enter with `animate=\"both\"` (composed at run time).\n  const motionClassName = useMotionClasses(\n    motion,\n    animate === 'both'\n      ? `${messageBarGroupExitMotion} ${messageBarGroupEnterMotion}`\n      : messageBarGroupExitMotion,\n  );\n  const hasSkipped = skipped.length > 0;\n  React.useEffect(() => {\n    if (hasSkipped) {\n      warnOnce(\n        'MessageBarGroup:children',\n        'MessageBarGroup: every child should be an element with a key of its own (a MessageBar with `key={id}`); other children render after the bars, without motion.',\n      );\n    }\n  }, [hasSkipped]);\n\n  return (\n    <div\n      ref={ref}\n      data-animate={animate}\n      {...rest}\n      className={cn(messageBarGroupClassNames.root, 'flex flex-col gap-2', className)}\n    >\n      {entries.map((entry) => (\n        <MessageBarGroupItem\n          key={entry.key}\n          entry={entry}\n          motionClassName={motionClassName}\n          onExited={onExited}\n        />\n      ))}\n      {skipped}\n    </div>\n  );\n};\nMessageBarGroup.displayName = 'MessageBarGroup';\n"],"mappings":"6gBAuDA,SAASwB,EAAgB,EAAsB,CAC7C,OACEC,EAAG,UAAU,SAASzB,EAAAA,0BAA0B,IAAI,GACpDyB,EAAG,aAAa,eAAe,IAAM,SAEzC,CAMA,SAASC,EAAa,EAA8C,CAClE,GAAI,CAACC,EAAM,OAAO,KAClB,IAAK,IAAIF,EAAKE,EAAK,mBAAoBF,EAAI,EAAKA,EAAG,mBAAoB,CACrE,IAAMG,EAASJ,EAAgBC,CAAE,EAAIxB,EAAAA,iBAAiBwB,CAAE,EAAI,KAC5D,GAAIG,EAAQ,OAAOA,CACrB,CACA,IAAK,IAAIH,EAAKE,EAAK,uBAAwBF,EAAI,EAAKA,EAAG,uBAAwB,CAC7E,IAAMG,EAASJ,EAAgBC,CAAE,EAAIxB,EAAAA,iBAAiBwB,CAAE,EAAI,KAC5D,GAAIG,EAAQ,OAAOA,CACrB,CACA,OAAO,IACT,CAGA,IAAMC,GAAuB,CAAE,QAAO,kBAAiB,cAAyC,CAC9F,GAAM,CAAE,MAAK,UAAS,UAAS,UAAWC,EAEpC,CACJ,YACA,IAAKC,EACL,iBACE7B,EAAAA,YAAY8B,EAAS,CAAE,SAAQ,aAAgBC,EAASC,CAAG,CAAE,CAAC,EAC5DC,EAAUhC,EAAM,OAA8B,IAAI,EAClDiC,EAAYhC,EAAAA,cAA8B+B,EAASJ,CAAW,EAKpE,OAFAb,EAAA,iBAAiBiB,MAAeT,EAAaS,EAAQ,OAAO,EAAG,CAAE,QAASH,CAAQ,CAAC,EAC9EK,GAEH,EAAAd,EAAA,IAAA,CAAC,MAAD,CACE,IAAKa,EACL,GAAIE,EACJ,UAAWjC,EAAAA,GAAGL,EAAAA,0BAA0B,KAAMM,EAAAA,6BAA8BiC,CAAe,EAE1F,SAAAC,CACE,CAAA,EARgB,IAUzB,EACA,EAAoB,YAAc,sBAoClC,IAAaC,GAAmB,CAC9B,UAAU,YACV,SACA,WACA,YACA,MACA,GAAGC,KACuB,CAC1B,GAAM,CAAE,UAAS,UAAS,YAAanC,EAAAA,iBAAiBoC,EAAU,CAChE,OAAQC,IAAY,MACtB,CAAC,EAEKL,EAAkB/B,EAAAA,iBACtBqC,EACAD,IAAY,OACR,GAAGnC,EAAAA,0BAA0B,GAAGC,EAAAA,6BAChCD,EAAAA,yBACN,EACMqC,EAAaC,EAAQ,OAAS,EAUpC,OATAzB,EAAM,cAAgB,CAChBwB,GACFjC,EAAA,SACE,2BACA,+JACF,CAEJ,EAAG,CAACiC,CAAU,CAAC,GAGb,EAAAvB,EAAA,KAAA,CAAC,MAAD,CACO,MACL,eAAcqB,EACd,GAAIF,EACJ,UAAWrC,EAAAA,GAAGL,EAAAA,0BAA0B,KAAM,sBAAuBgD,CAAS,EAJhF,SAAA,CAMGC,EAAQ,IAAK,IACZ,EAAA1B,EAAA,IAAA,CAACM,EAAD,CAES,QACU,kBACP,UACX,EAJMC,EAAM,GAIZ,CACF,EACAiB,CACE,GAET,EACA,EAAgB,YAAc"}

package/dist/components/feedback/MessageBarGroup.mjs

@@ -0,0 +1,63 @@
+"use client";
+import { cn as e } from "../../lib/cn.mjs";
+import { warnOnce as t } from "../../lib/dev.mjs";
+import { messageBarGroupClassNames as n } from "../../lib/classNames.mjs";
+import { getFirstTabbable as r } from "../../lib/focus.mjs";
+import { useMergedRefs as i } from "../../hooks/useMergedRefs.mjs";
+import { usePresence as a } from "../../hooks/usePresence.mjs";
+import { usePreserveFocus as o } from "../../hooks/usePreserveFocus.mjs";
+import { messageBarGroupEnterMotion as s, messageBarGroupExitMotion as c, messageBarGroupItemStructure as l } from "../../lib/motion.mjs";
+import { useMotionClasses as u } from "../../hooks/useMotion.mjs";
+import { usePresenceGroup as d } from "../../hooks/usePresenceGroup.mjs";
+import * as f from "react";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+//#region src/components/feedback/MessageBarGroup.tsx
+function h(e) {
+	return e.classList.contains(n.item) && e.getAttribute("data-presence") !== "exiting";
+}
+function g(e) {
+	if (!e) return null;
+	for (let t = e.nextElementSibling; t; t = t.nextElementSibling) {
+		let e = h(t) ? r(t) : null;
+		if (e) return e;
+	}
+	for (let t = e.previousElementSibling; t; t = t.previousElementSibling) {
+		let e = h(t) ? r(t) : null;
+		if (e) return e;
+	}
+	return null;
+}
+var _ = ({ entry: t, motionClassName: r, onExited: s }) => {
+	let { key: c, element: u, visible: d, appear: m } = t, { isMounted: h, ref: _, presenceProps: v } = a(d, {
+		appear: m,
+		onExited: () => s(c)
+	}), y = f.useRef(null), b = i(y, _);
+	return o(y, () => g(y.current), { enabled: d }), h ? /* @__PURE__ */ p("div", {
+		ref: b,
+		...v,
+		className: e(n.item, l, r),
+		children: u
+	}) : null;
+};
+_.displayName = "MessageBarGroupItem";
+var v = ({ animate: r = "exit-only", motion: i, children: a, className: o, ref: l, ...h }) => {
+	let { entries: g, skipped: v, onExited: y } = d(a, { appear: r === "both" }), b = u(i, r === "both" ? `${c} ${s}` : c), x = v.length > 0;
+	return f.useEffect(() => {
+		x && t("MessageBarGroup:children", "MessageBarGroup: every child should be an element with a key of its own (a MessageBar with `key={id}`); other children render after the bars, without motion.");
+	}, [x]), /* @__PURE__ */ m("div", {
+		ref: l,
+		"data-animate": r,
+		...h,
+		className: e(n.root, "flex flex-col gap-2", o),
+		children: [g.map((e) => /* @__PURE__ */ p(_, {
+			entry: e,
+			motionClassName: b,
+			onExited: y
+		}, e.key)), v]
+	});
+};
+v.displayName = "MessageBarGroup";
+//#endregion
+export { v as MessageBarGroup };
+
+//# sourceMappingURL=MessageBarGroup.mjs.map

package/dist/components/feedback/MessageBarGroup.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageBarGroup.mjs","names":["React","isRemainingItem","el","messageBarGroupClassNames","nextBarFocus","item","target","getFirstTabbable","MessageBarGroupItem","entry","presenceRef","usePresence","visible","onExited","key","itemRef","mergedRef","useMergedRefs","usePreserveFocus","isMounted","presenceProps","cn","messageBarGroupItemStructure","motionClassName","element","MessageBarGroup","rest","usePresenceGroup","children","animate","useMotionClasses","motion","messageBarGroupExitMotion","messageBarGroupEnterMotion","hasSkipped","skipped","warnOnce","className","entries"],"sources":["../../../src/components/feedback/MessageBarGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { messageBarGroupClassNames } from '../../lib/classNames';\nimport { cn } from '../../lib/cn';\nimport { warnOnce } from '../../lib/dev';\nimport { getFirstTabbable } from '../../lib/focus';\nimport {\n  messageBarGroupEnterMotion,\n  messageBarGroupExitMotion,\n  messageBarGroupItemStructure,\n} from '../../lib/motion';\nimport type { MotionSlot } from '../../lib/types';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport { useMotionClasses } from '../../hooks/useMotion';\nimport { usePresence } from '../../hooks/usePresence';\nimport { usePresenceGroup, type PresenceGroupEntry } from '../../hooks/usePresenceGroup';\nimport { usePreserveFocus } from '../../hooks/usePreserveFocus';\n\n/** Properties for the MessageBarGroup component. */\nexport interface MessageBarGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Which changes animate: `'exit-only'` (a bar removed from the children fades and collapses\n   * out) or `'both'` (a bar added after mount also fades and slides in). Bars present at the\n   * group's first render never animate. Fluent's `animate`. The root renders it as\n   * `data-animate`.\n   * @default 'exit-only'\n   */\n  animate?: 'exit-only' | 'both';\n  /**\n   * Replaces the bars' motion (both directions); `null` turns it off. The motion is on the element\n   * around each bar (`className` stays on the root). By default a removed bar fades out while its\n   * row and its bottom margin close over 250 ms with the linear curve, so the bars after it glide\n   * up and nothing jumps when it unmounts (the margin makes up for the group's 8px gap, so a\n   * different gap in `className` needs a `motion` whose margin matches it); with\n   * `animate=\"both\"`, a bar added after mount opens its row and fades in the same way. Under\n   * reduced motion bars appear and disappear at once. `null` turns the motion off (the element\n   * still renders its `data-presence` phases, which then end at once); a class string or\n   * `{ className }` replaces the default classes with yours (see `MotionSlot`), also under a\n   * `WaveProvider` with `motion=\"none\"`, which otherwise turns the default off. A WaveUI addition:\n   * Fluent's MessageBarGroup has no motion slot (its bar only fades out).\n   * @default the collapse and fade above\n   */\n  motion?: MotionSlot | null;\n  /** MessageBar elements, each with a stable `key`. */\n  children?: React.ReactNode;\n  /** Ref to the root `<div>`. */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\ninterface MessageBarGroupItemProps {\n  entry: PresenceGroupEntry;\n  motionClassName: string;\n  onExited: (key: string) => void;\n}\n\n/** Whether `el` is the element around a bar that stays: an item that is not exiting. */\nfunction isRemainingItem(el: Element): boolean {\n  return (\n    el.classList.contains(messageBarGroupClassNames.item) &&\n    el.getAttribute('data-presence') !== 'exiting'\n  );\n}\n\n/**\n * Where focus goes when the bar of `item` leaves with focus inside it: the first tabbable element\n * of the nearest bar after it that stays and holds one, else of the nearest such bar before it.\n */\nfunction nextBarFocus(item: HTMLElement | null): HTMLElement | null {\n  if (!item) return null;\n  for (let el = item.nextElementSibling; el; el = el.nextElementSibling) {\n    const target = isRemainingItem(el) ? getFirstTabbable(el) : null;\n    if (target) return target;\n  }\n  for (let el = item.previousElementSibling; el; el = el.previousElementSibling) {\n    const target = isRemainingItem(el) ? getFirstTabbable(el) : null;\n    if (target) return target;\n  }\n  return null;\n}\n\n// The element around one bar: the presence element, whose motion ends the bar's phases.\nconst MessageBarGroupItem = ({ entry, motionClassName, onExited }: MessageBarGroupItemProps) => {\n  const { key, element, visible, appear } = entry;\n  // Destructured: react-hooks/refs treats an object whose member is passed to `ref` as a ref.\n  const {\n    isMounted,\n    ref: presenceRef,\n    presenceProps,\n  } = usePresence(visible, { appear, onExited: () => onExited(key) });\n  const itemRef = React.useRef<HTMLDivElement | null>(null);\n  const mergedRef = useMergedRefs<HTMLDivElement>(itemRef, presenceRef);\n  // Focus leaves a removed bar in its removing commit: `enabled` flipping to `false` moves it in\n  // the layout phase, while the exiting item is still there.\n  usePreserveFocus(itemRef, () => nextBarFocus(itemRef.current), { enabled: visible });\n  if (!isMounted) return null;\n  return (\n    <div\n      ref={mergedRef}\n      {...presenceProps}\n      className={cn(messageBarGroupClassNames.item, messageBarGroupItemStructure, motionClassName)}\n    >\n      {element}\n    </div>\n  );\n};\nMessageBarGroupItem.displayName = 'MessageBarGroupItem';\n\n/**\n * A stack of MessageBars that animates the bars it gains and loses, Fluent's MessageBarGroup with\n * its `animate` prop: a bar removed from the children fades out while its row closes, so the bars\n * below glide up instead of jumping (Fluent's bar only fades, and the bars below jump when it is\n * gone), and with `animate=\"both\"` a bar added after mount opens its row and fades in.\n *\n * - **Keys.** Give every bar a stable `key` (`key={message.id}`): the group follows its children\n *   by key, so it can keep a removed bar on screen during its exit, in its place, and move bars\n *   that are reordered without replacing them. A removed bar that comes back during its exit is\n *   shown again. A child without a key of its own, or text, renders after the bars as given,\n *   without motion, with a development warning. Any keyed element animates; MessageBar is the\n *   one the group is made for.\n * - **Motion.** Bars present at the group's first render (on the server too) never animate. Each\n *   bar sits in an element of its own, which renders no box while the bar is shown, so the bars\n *   are the stack's own items; while a bar enters or exits, that element clips it while its row\n *   opens or closes. An exiting bar is `inert`. See `motion` for the default and how to replace\n *   or turn it off; under `prefers-reduced-motion: reduce` a bar is added and removed at once.\n * - **Focus.** When a bar leaves with focus inside it (its Dismiss button was pressed), focus moves\n *   in the same commit to the first tabbable element of the nearest bar after it that stays and\n *   holds a tabbable element, else of the nearest such bar before it. When no such bar is left,\n *   the app decides where focus goes.\n * - **Markup.** A plain `<div>` without a role stacking the bars with an 8px gap; each MessageBar\n *   stays its own live region. MessageBarGroup is a component of its own rather than a part of\n *   MessageBar, so a page that imports only MessageBar does not load the group's motion.\n *\n * @example\n * <MessageBarGroup animate=\"both\">\n *   {messages.map((message) => (\n *     <MessageBar key={message.id} status={message.status} onDismiss={() => dismiss(message.id)}>\n *       {message.text}\n *     </MessageBar>\n *   ))}\n * </MessageBarGroup>\n */\nexport const MessageBarGroup = ({\n  animate = 'exit-only',\n  motion,\n  children,\n  className,\n  ref,\n  ...rest\n}: MessageBarGroupProps) => {\n  const { entries, skipped, onExited } = usePresenceGroup(children, {\n    appear: animate === 'both',\n  });\n  // The bars' motion: the exit, and the enter with `animate=\"both\"` (composed at run time).\n  const motionClassName = useMotionClasses(\n    motion,\n    animate === 'both'\n      ? `${messageBarGroupExitMotion} ${messageBarGroupEnterMotion}`\n      : messageBarGroupExitMotion,\n  );\n  const hasSkipped = skipped.length > 0;\n  React.useEffect(() => {\n    if (hasSkipped) {\n      warnOnce(\n        'MessageBarGroup:children',\n        'MessageBarGroup: every child should be an element with a key of its own (a MessageBar with `key={id}`); other children render after the bars, without motion.',\n      );\n    }\n  }, [hasSkipped]);\n\n  return (\n    <div\n      ref={ref}\n      data-animate={animate}\n      {...rest}\n      className={cn(messageBarGroupClassNames.root, 'flex flex-col gap-2', className)}\n    >\n      {entries.map((entry) => (\n        <MessageBarGroupItem\n          key={entry.key}\n          entry={entry}\n          motionClassName={motionClassName}\n          onExited={onExited}\n        />\n      ))}\n      {skipped}\n    </div>\n  );\n};\nMessageBarGroup.displayName = 'MessageBarGroup';\n"],"mappings":";;;;;;;;;;;;;;AAuDA,SAASC,EAAgB,GAAsB;CAC7C,OACEC,EAAG,UAAU,SAASC,EAA0B,IAAI,KACpDD,EAAG,aAAa,eAAe,MAAM;AAEzC;AAMA,SAASE,EAAa,GAA8C;CAClE,IAAI,CAACC,GAAM,OAAO;CAClB,KAAK,IAAIH,IAAKG,EAAK,oBAAoBH,GAAI,IAAKA,EAAG,oBAAoB;EACrE,IAAMI,IAASL,EAAgBC,CAAE,IAAIK,EAAiBL,CAAE,IAAI;EAC5D,IAAII,GAAQ,OAAOA;CACrB;CACA,KAAK,IAAIJ,IAAKG,EAAK,wBAAwBH,GAAI,IAAKA,EAAG,wBAAwB;EAC7E,IAAMI,IAASL,EAAgBC,CAAE,IAAIK,EAAiBL,CAAE,IAAI;EAC5D,IAAII,GAAQ,OAAOA;CACrB;CACA,OAAO;AACT;AAGA,IAAME,KAAuB,EAAE,UAAO,oBAAiB,kBAAyC;CAC9F,IAAM,EAAE,QAAK,YAAS,YAAS,cAAWC,GAEpC,EACJ,cACA,KAAKC,GACL,qBACEC,EAAYC,GAAS;EAAE;EAAQ,gBAAgBC,EAASC,CAAG;CAAE,CAAC,GAC5DC,IAAUf,EAAM,OAA8B,IAAI,GAClDgB,IAAYC,EAA8BF,GAASL,CAAW;CAKpE,OAFAQ,EAAiBH,SAAeX,EAAaW,EAAQ,OAAO,GAAG,EAAE,SAASH,EAAQ,CAAC,GAC9EO,IAEH,kBAAC,OAAD;EACE,KAAKH;EACL,GAAII;EACJ,WAAWC,EAAGlB,EAA0B,MAAMmB,GAA8BC,CAAe;EAE1F,UAAAC;CACE,CAAA,IARgB;AAUzB;AACA,EAAoB,cAAc;AAoClC,IAAaC,KAAmB,EAC9B,aAAU,aACV,WACA,aACA,cACA,QACA,GAAGC,QACuB;CAC1B,IAAM,EAAE,YAAS,YAAS,gBAAaC,EAAiBC,GAAU,EAChE,QAAQC,MAAY,OACtB,CAAC,GAEKN,IAAkBO,EACtBC,GACAF,MAAY,SACR,GAAGG,EAA0B,GAAGC,MAChCD,CACN,GACME,IAAaC,EAAQ,SAAS;CAUpC,OATAnC,EAAM,gBAAgB;EACpB,AAAIkC,KACFE,EACE,4BACA,+JACF;CAEJ,GAAG,CAACF,CAAU,CAAC,GAGb,kBAAC,OAAD;EACO;EACL,gBAAcL;EACd,GAAIH;EACJ,WAAWL,EAAGlB,EAA0B,MAAM,uBAAuBkC,CAAS;EAJhF,UAAA,CAMGC,EAAQ,KAAK,MACZ,kBAAC9B,GAAD;GAES;GACU;GACP;EACX,GAJMC,EAAM,GAIZ,CACF,GACA0B,CACE;;AAET;AACA,EAAgB,cAAc"}

package/dist/components/feedback/ProgressBar.cjs

@@ -1,2 +1,2 @@
-"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/dev.cjs"),r=require("../../lib/classNames.cjs"),i=require("../../hooks/useId.cjs"),a=require("../../hooks/useFieldControl.cjs"),o=require("../../lib/styles.cjs");let s=require("react");s=e.__toESM(s,1);let c=require("react/jsx-runtime");var l={brand:`bg-primary`,success:`bg-success`,warning:`bg-severe`,error:`bg-error`},u={error:`error`,warning:`warning`,success:`success`};function d(e){return typeof e==`string`&&e.trim()!==``}var f=({value:e,max:f=100,label:p,showLabel:m,color:h,id:g,"aria-describedby":_,"aria-invalid":v,"aria-required":y,className:b,ref:x,...S})=>{let C=i.useId(`progress-label`),w=i.useId(`progress`),T=a.useFieldContext(),E=a.useFieldControl({id:g??(T?w:void 0),"aria-describedby":_},{labelable:!1}),D=T?T.validationState??(T.invalid?`error`:`none`):`none`,O=h??u[D]??`brand`,k=e===void 0,A=Number.isFinite(f)&&f>0,j=k||Number.isFinite(e),M=!k&&A&&j?Math.min(f,Math.max(0,e)):0,N=A?M/f*100:0,P=d(p),F=d(S[`aria-label`]),I=d(S[`aria-labelledby`]),L=E[`aria-labelledby`],R=!P&&!F&&!I&&d(L);s.useEffect(()=>{n.isDev&&(!P&&!F&&!I&&!R&&n.warnOnce(`ProgressBar:name`,"ProgressBar: a progress bar needs an accessible name. Pass `label` (add `showLabel` to show it), `aria-label` or `aria-labelledby`."),m&&!P&&n.warnOnce(`ProgressBar:show-label`,"ProgressBar: `showLabel` renders the `label` prop, which is empty."),A||n.warnOnce(`ProgressBar:max`,`ProgressBar: \`max\` must be a finite number greater than 0 (got ${String(f)}); the bar renders 0%.`),j||n.warnOnce(`ProgressBar:value`,`ProgressBar: \`value\` must be a finite number (got ${String(e)}); the bar renders 0%.`))},[P,F,I,R,m,A,j,f,e]);let z=!!(m&&P),B={role:`progressbar`,"aria-valuenow":k?void 0:M,"aria-valuemin":0,"aria-valuemax":A?f:100,"data-color":O};E.id!==void 0&&(B.id=E.id),E[`aria-describedby`]!==void 0&&(B[`aria-describedby`]=E[`aria-describedby`]),!F&&!I&&(z?B[`aria-labelledby`]=C:P?B[`aria-label`]=p:R&&(B[`aria-labelledby`]=L));for(let[e,t]of Object.entries(S))t!==void 0&&(e!==`aria-label`&&e!==`aria-labelledby`||d(t))&&(B[e]=t);let V=(0,c.jsx)(`div`,{...B,ref:x,className:t.cn(r.progressBarClassNames.root,`h-2 overflow-hidden rounded-full bg-track`,`forced-colors:border`,o.forcedColors.border,b),children:(0,c.jsx)(`div`,{className:t.cn(r.progressBarClassNames.bar,`h-full rounded-full`,l[O],o.forcedColors.selectedLeaf,k&&`w-2/5 animate-wave-indeterminate wave-rtl:animate-wave-indeterminate-rtl motion-reduce:w-full motion-reduce:translate-x-0 motion-reduce:animate-wave-pulse wave-rtl:motion-reduce:animate-wave-pulse`),style:k?void 0:{width:`${N}%`}})});return z?(0,c.jsxs)(`div`,{className:`flex flex-col gap-1`,children:[(0,c.jsx)(`span`,{id:C,className:t.cn(r.progressBarClassNames.label,`text-body-1 text-foreground`),children:p}),V]}):V};f.displayName=`ProgressBar`,exports.ProgressBar=f;
+"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/dev.cjs"),r=require("../../lib/classNames.cjs"),i=require("../../hooks/useId.cjs"),a=require("../../hooks/useFieldControl.cjs"),o=require("../../lib/styles.cjs"),s=require("../../lib/motion.cjs"),c=require("../../hooks/useMotion.cjs");let l=require("react");l=e.__toESM(l,1);let u=require("react/jsx-runtime");var d={brand:`bg-primary`,success:`bg-success`,warning:`bg-severe`,error:`bg-error`},f={error:`error`,warning:`warning`,success:`success`};function p(e){return typeof e==`string`&&e.trim()!==``}var m=({value:e,max:m=100,label:h,showLabel:g,color:_,indeterminateMotion:v,id:y,"aria-describedby":b,"aria-invalid":x,"aria-required":S,className:C,ref:w,...T})=>{let E=i.useId(`progress-label`),D=i.useId(`progress`),O=a.useFieldContext(),k=a.useFieldControl({id:y??(O?D:void 0),"aria-describedby":b},{labelable:!1}),A=O?O.validationState??(O.invalid?`error`:`none`):`none`,j=_??f[A]??`brand`,M=e===void 0,N=c.useMotionClasses(v,s.progressIndeterminateMotion),P=Number.isFinite(m)&&m>0,F=M||Number.isFinite(e),I=!M&&P&&F?Math.min(m,Math.max(0,e)):0,L=P?I/m*100:0,R=p(h),z=p(T[`aria-label`]),B=p(T[`aria-labelledby`]),V=k[`aria-labelledby`],H=!R&&!z&&!B&&p(V);l.useEffect(()=>{n.isDev&&(!R&&!z&&!B&&!H&&n.warnOnce(`ProgressBar:name`,"ProgressBar: a progress bar needs an accessible name. Pass `label` (add `showLabel` to show it), `aria-label` or `aria-labelledby`."),g&&!R&&n.warnOnce(`ProgressBar:show-label`,"ProgressBar: `showLabel` renders the `label` prop, which is empty."),P||n.warnOnce(`ProgressBar:max`,`ProgressBar: \`max\` must be a finite number greater than 0 (got ${String(m)}); the bar renders 0%.`),F||n.warnOnce(`ProgressBar:value`,`ProgressBar: \`value\` must be a finite number (got ${String(e)}); the bar renders 0%.`))},[R,z,B,H,g,P,F,m,e]);let U=!!(g&&R),W={role:`progressbar`,"aria-valuenow":M?void 0:I,"aria-valuemin":0,"aria-valuemax":P?m:100,"data-color":j};k.id!==void 0&&(W.id=k.id),k[`aria-describedby`]!==void 0&&(W[`aria-describedby`]=k[`aria-describedby`]),!z&&!B&&(U?W[`aria-labelledby`]=E:R?W[`aria-label`]=h:H&&(W[`aria-labelledby`]=V));for(let[e,t]of Object.entries(T))t!==void 0&&(e!==`aria-label`&&e!==`aria-labelledby`||p(t))&&(W[e]=t);let G=(0,u.jsx)(`div`,{...W,ref:w,className:t.cn(r.progressBarClassNames.root,`h-2 overflow-hidden rounded-full bg-track`,`forced-colors:border`,o.forcedColors.border,C),children:(0,u.jsx)(`div`,{className:t.cn(r.progressBarClassNames.bar,`h-full rounded-full`,d[j],o.forcedColors.selectedLeaf,M&&t.cn(`w-full`,N)),style:M?void 0:{width:`${L}%`}})});return U?(0,u.jsxs)(`div`,{className:`flex flex-col gap-1`,children:[(0,u.jsx)(`span`,{id:E,className:t.cn(r.progressBarClassNames.label,`text-body-1 text-foreground`),children:h}),G]}):G};m.displayName=`ProgressBar`,exports.ProgressBar=m;
 //# sourceMappingURL=ProgressBar.cjs.map

package/dist/components/feedback/ProgressBar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar.cjs","names":["useId","useFieldContext","useFieldControl","isDev","cn","progressBarClassNames","forcedColors","require_runtime","require_cn","require_dev","require_classNames","require_useId","require_useFieldControl","require_styles","react","react_jsx_runtime","fillColorClasses","fieldColors","isName","value","ProgressBar","ariaDescribedBy","_ariaInvalid","_ariaRequired","rest","labelId","ownId","field","fieldProps","id","fieldState","resolvedColor","color","isIndeterminate","validMax","max","validValue","clamped","percentage","hasLabel","label","hasAriaLabel","hasAriaLabelledBy","fieldLabelledBy","hasFieldName","showLabel","visibleLabel","barProps","key","propValue","bar","className"],"sources":["../../../src/components/feedback/ProgressBar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { progressBarClassNames } from '../../lib/classNames';\nimport { cn } from '../../lib/cn';\nimport { isDev, warnOnce } from '../../lib/dev';\nimport { forcedColors } from '../../lib/styles';\nimport type { ValidationState } from '../../lib/types';\nimport { useFieldContext, useFieldControl } from '../../hooks/useFieldControl';\nimport { useId } from '../../hooks/useId';\n\n/** Color of a {@link ProgressBar}'s fill. */\nexport type ProgressBarColor = 'brand' | 'success' | 'warning' | 'error';\n\n/** Properties for the ProgressBar component. */\nexport interface ProgressBarProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Current progress value, clamped to `0…max` for both the fill and `aria-valuenow`. Omit for\n   * indeterminate mode. A non-finite value renders 0% (development warning).\n   */\n  value?: number;\n  /**\n   * Maximum progress value. A `max` of 0 or less, or a non-finite `max`, renders 0% (development\n   * warning) and is reported to assistive technology as 0 of 100.\n   * @default 100\n   */\n  max?: number;\n  /**\n   * Accessible name of the progress bar: `aria-label` by default, or a visible label with\n   * `showLabel`. A progress bar needs a name (`label`, `aria-label` or `aria-labelledby`); a\n   * development warning fires without one. A consumer `aria-label` or `aria-labelledby` takes\n   * precedence over `label`; an empty or whitespace-only one counts as absent (it is not rendered).\n   * Inside a `Field`, the Field's label names the bar when neither `label` nor a consumer name is\n   * given.\n   */\n  label?: string;\n  /**\n   * Renders `label` as visible text above the bar and names the bar with it (`aria-labelledby`)\n   * instead of `aria-label`, unless a consumer `aria-label` or `aria-labelledby` names the bar\n   * (keep the visible text in that name, WCAG 2.5.3). The label and the bar are then wrapped in a\n   * `div`; `ref`, `className`, `style` and the other props stay on the progress bar element.\n   */\n  showLabel?: boolean;\n  /**\n   * Color of the fill. Inside a `Field` it follows the Field's validation state (error, warning,\n   * success) unless you set it. `warning` fills with the dark orange of the `severe` color, which\n   * keeps 3:1 against the track in every theme. The bar carries `data-color` with the resolved\n   * color.\n   * @default 'brand'\n   */\n  color?: ProgressBarColor;\n  ref?: React.Ref<HTMLDivElement>;\n}\n\nconst fillColorClasses: Record<ProgressBarColor, string> = {\n  brand: 'bg-primary',\n  success: 'bg-success',\n  // The warning token (a light yellow) is 1.02:1 on the light track: the severe orange passes 3:1.\n  warning: 'bg-severe',\n  error: 'bg-error',\n};\n\n/** The fill color a Field's validation state gives the bar (`none` keeps the default). */\nconst fieldColors: Partial<Record<ValidationState, ProgressBarColor>> = {\n  error: 'error',\n  warning: 'warning',\n  success: 'success',\n};\n\n/** Whether a name prop (`label`, `aria-label`, `aria-labelledby`) holds more than whitespace. */\nfunction isName(value: unknown): value is string {\n  return typeof value === 'string' && value.trim() !== '';\n}\n\n/**\n * Shows the progress of a task, or that a task is running (indeterminate, `value` omitted).\n *\n * - Name it with `label` (or `aria-label` / `aria-labelledby`); `showLabel` shows the label above\n *   the bar.\n * - `value` is clamped to `0…max`; invalid numbers render an empty bar and warn in development.\n * - `color` picks the fill (`brand`, `success`, `warning`, `error`).\n * - Inside a `Field`, the Field's label names a bar that has no name of its own, its validation\n *   message and hint describe the bar, and its validation state (error, warning, success) colors\n *   the fill unless `color` is set. A progress bar is never invalid or required: the\n *   `aria-invalid` and `aria-required` a Field adds are not rendered. Next to another control in\n *   a Field's wrapper element, the bar gets an id of its own and leaves the Field's\n *   `<label htmlFor>` to that control.\n * - The indeterminate animation follows the writing direction and becomes a full-width pulse for\n *   reduced motion. In forced-colors mode the fill uses `Highlight` and the track gets a border.\n *\n * @example\n * <ProgressBar value={uploaded} max={total} label=\"Uploading photos\" showLabel />\n *\n * @example\n * <Field label=\"Upload\" validationState=\"warning\" validationMessage=\"The connection is slow.\">\n *   <ProgressBar value={uploaded} max={total} />\n * </Field>\n */\nexport const ProgressBar = ({\n  value,\n  max = 100,\n  label,\n  showLabel,\n  color,\n  id,\n  'aria-describedby': ariaDescribedBy,\n  // Field merges both into its first child; neither is allowed on role=\"progressbar\".\n  'aria-invalid': _ariaInvalid,\n  'aria-required': _ariaRequired,\n  className,\n  ref,\n  ...rest\n}: ProgressBarProps) => {\n  const labelId = useId('progress-label');\n  const ownId = useId('progress');\n  const field = useFieldContext();\n  // A <label htmlFor> cannot name a progress bar, so inside a Field a bar without an id (Field\n  // passes its control id to a first child as `id`) takes its own instead of claiming the\n  // control id: that stays with the control the label names (an Input next to the bar in a\n  // wrapper). No name props are passed, so with `labelable: false` the merged `aria-labelledby`\n  // is exactly the Field's label id (or absent); it is used only when the bar has no name of its\n  // own.\n  const fieldProps = useFieldControl(\n    { id: id ?? (field ? ownId : undefined), 'aria-describedby': ariaDescribedBy },\n    { labelable: false },\n  );\n  // A context built before 0.6 has no validation state: read it from `invalid`.\n  const fieldState = field ? (field.validationState ?? (field.invalid ? 'error' : 'none')) : 'none';\n  const resolvedColor = color ?? fieldColors[fieldState] ?? 'brand';\n  const isIndeterminate = value === undefined;\n  const validMax = Number.isFinite(max) && max > 0;\n  const validValue = isIndeterminate || Number.isFinite(value);\n  /** Clamped once, used for both the fill width and `aria-valuenow`. */\n  const clamped =\n    !isIndeterminate && validMax && validValue ? Math.min(max, Math.max(0, value)) : 0;\n  const percentage = validMax ? (clamped / max) * 100 : 0;\n\n  // An empty or whitespace-only `label`, `aria-label` or `aria-labelledby` names nothing: it is\n  // treated like `undefined` by the precedence, the rendered attributes and the warning alike.\n  const hasLabel = isName(label);\n  const hasAriaLabel = isName(rest['aria-label']);\n  const hasAriaLabelledBy = isName(rest['aria-labelledby']);\n  const fieldLabelledBy = fieldProps['aria-labelledby'];\n  const hasFieldName = !hasLabel && !hasAriaLabel && !hasAriaLabelledBy && isName(fieldLabelledBy);\n\n  // Development diagnostics (C-DEV): emitted from an effect, once per page.\n  React.useEffect(() => {\n    if (!isDev) return;\n    if (!hasLabel && !hasAriaLabel && !hasAriaLabelledBy && !hasFieldName) {\n      warnOnce(\n        'ProgressBar:name',\n        'ProgressBar: a progress bar needs an accessible name. Pass `label` (add `showLabel` to show it), `aria-label` or `aria-labelledby`.',\n      );\n    }\n    if (showLabel && !hasLabel) {\n      warnOnce(\n        'ProgressBar:show-label',\n        'ProgressBar: `showLabel` renders the `label` prop, which is empty.',\n      );\n    }\n    if (!validMax) {\n      warnOnce(\n        'ProgressBar:max',\n        `ProgressBar: \\`max\\` must be a finite number greater than 0 (got ${String(max)}); the bar renders 0%.`,\n      );\n    }\n    if (!validValue) {\n      warnOnce(\n        'ProgressBar:value',\n        `ProgressBar: \\`value\\` must be a finite number (got ${String(value)}); the bar renders 0%.`,\n      );\n    }\n  }, [\n    hasLabel,\n    hasAriaLabel,\n    hasAriaLabelledBy,\n    hasFieldName,\n    showLabel,\n    validMax,\n    validValue,\n    max,\n    value,\n  ]);\n\n  const visibleLabel = Boolean(showLabel && hasLabel);\n\n  /**\n   * The bar's attributes. Defaults the consumer may override (C-COMPOSE) apply wherever the\n   * consumer's value is `undefined` — also when the key is present, e.g. a wrapper that forwards\n   * `aria-label={props['aria-label']}` — so a forwarded `undefined` never strips the role, the\n   * values or the name derived from `label`. An empty `aria-label`/`aria-labelledby` is dropped\n   * the same way instead of rendering a nameless attribute.\n   */\n  const barProps: Record<string, unknown> = {\n    role: 'progressbar',\n    'aria-valuenow': isIndeterminate ? undefined : clamped,\n    'aria-valuemin': 0,\n    'aria-valuemax': validMax ? max : 100,\n    'data-color': resolvedColor,\n  };\n  // The consumer's id (or the control id Field passes to its first child), else its own id inside\n  // a Field; the consumer's description, then the Field's validation message and hint.\n  if (fieldProps.id !== undefined) barProps.id = fieldProps.id;\n  if (fieldProps['aria-describedby'] !== undefined) {\n    barProps['aria-describedby'] = fieldProps['aria-describedby'];\n  }\n  // A consumer `aria-label` or `aria-labelledby` wins over the name derived from `label`, also\n  // with `showLabel` (the visible label then stays unreferenced text). The Field's label names\n  // only a bar without a name of its own.\n  if (!hasAriaLabel && !hasAriaLabelledBy) {\n    if (visibleLabel) barProps['aria-labelledby'] = labelId;\n    else if (hasLabel) barProps['aria-label'] = label;\n    else if (hasFieldName) barProps['aria-labelledby'] = fieldLabelledBy;\n  }\n  for (const [key, propValue] of Object.entries(rest)) {\n    if (propValue === undefined) continue;\n    if ((key === 'aria-label' || key === 'aria-labelledby') && !isName(propValue)) continue;\n    barProps[key] = propValue;\n  }\n\n  const bar = (\n    <div\n      {...barProps}\n      ref={ref}\n      className={cn(\n        progressBarClassNames.root,\n        'h-2 overflow-hidden rounded-full bg-track',\n        'forced-colors:border',\n        forcedColors.border,\n        className,\n      )}\n    >\n      <div\n        className={cn(\n          progressBarClassNames.bar,\n          'h-full rounded-full',\n          fillColorClasses[resolvedColor],\n          forcedColors.selectedLeaf,\n          isIndeterminate &&\n            'w-2/5 animate-wave-indeterminate wave-rtl:animate-wave-indeterminate-rtl motion-reduce:w-full motion-reduce:translate-x-0 motion-reduce:animate-wave-pulse wave-rtl:motion-reduce:animate-wave-pulse',\n        )}\n        style={isIndeterminate ? undefined : { width: `${percentage}%` }}\n      />\n    </div>\n  );\n\n  if (!visibleLabel) return bar;\n\n  return (\n    <div className=\"flex flex-col gap-1\">\n      <span id={labelId} className={cn(progressBarClassNames.label, 'text-body-1 text-foreground')}>\n        {label}\n      </span>\n      {bar}\n    </div>\n  );\n};\n\nProgressBar.displayName = 'ProgressBar';\n"],"mappings":"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"}
+{"version":3,"file":"ProgressBar.cjs","names":["useId","useFieldContext","useFieldControl","useMotionClasses","progressIndeterminateMotion","isDev","cn","progressBarClassNames","forcedColors","require_runtime","require_cn","require_dev","require_classNames","require_useId","require_useFieldControl","require_styles","require_motion","require_useMotion","react","react_jsx_runtime","fillColorClasses","fieldColors","isName","value","ProgressBar","ariaDescribedBy","_ariaInvalid","_ariaRequired","rest","labelId","ownId","field","fieldProps","id","fieldState","resolvedColor","color","isIndeterminate","indeterminateClasses","indeterminateMotion","validMax","max","validValue","clamped","percentage","hasLabel","label","hasAriaLabel","hasAriaLabelledBy","fieldLabelledBy","hasFieldName","showLabel","visibleLabel","barProps","key","propValue","bar","className"],"sources":["../../../src/components/feedback/ProgressBar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { progressBarClassNames } from '../../lib/classNames';\nimport { cn } from '../../lib/cn';\nimport { isDev, warnOnce } from '../../lib/dev';\nimport { progressIndeterminateMotion } from '../../lib/motion';\nimport { forcedColors } from '../../lib/styles';\nimport type { MotionSlot, ValidationState } from '../../lib/types';\nimport { useFieldContext, useFieldControl } from '../../hooks/useFieldControl';\nimport { useId } from '../../hooks/useId';\nimport { useMotionClasses } from '../../hooks/useMotion';\n\n/** Color of a {@link ProgressBar}'s fill. */\nexport type ProgressBarColor = 'brand' | 'success' | 'warning' | 'error';\n\n/** Properties for the ProgressBar component. */\nexport interface ProgressBarProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Current progress value, clamped to `0…max` for both the fill and `aria-valuenow`. Omit for\n   * indeterminate mode. A non-finite value renders 0% (development warning).\n   */\n  value?: number;\n  /**\n   * Maximum progress value. A `max` of 0 or less, or a non-finite `max`, renders 0% (development\n   * warning) and is reported to assistive technology as 0 of 100.\n   * @default 100\n   */\n  max?: number;\n  /**\n   * Accessible name of the progress bar: `aria-label` by default, or a visible label with\n   * `showLabel`. A progress bar needs a name (`label`, `aria-label` or `aria-labelledby`); a\n   * development warning fires without one. A consumer `aria-label` or `aria-labelledby` takes\n   * precedence over `label`; an empty or whitespace-only one counts as absent (it is not rendered).\n   * Inside a `Field`, the Field's label names the bar when neither `label` nor a consumer name is\n   * given.\n   */\n  label?: string;\n  /**\n   * Renders `label` as visible text above the bar and names the bar with it (`aria-labelledby`)\n   * instead of `aria-label`, unless a consumer `aria-label` or `aria-labelledby` names the bar\n   * (keep the visible text in that name, WCAG 2.5.3). The label and the bar are then wrapped in a\n   * `div`; `ref`, `className`, `style` and the other props stay on the progress bar element.\n   */\n  showLabel?: boolean;\n  /**\n   * Color of the fill. Inside a `Field` it follows the Field's validation state (error, warning,\n   * success) unless you set it. `warning` fills with the dark orange of the `severe` color, which\n   * keeps 3:1 against the track in every theme. The bar carries `data-color` with the resolved\n   * color.\n   * @default 'brand'\n   */\n  color?: ProgressBarColor;\n  /**\n   * Replaces the motion of the indeterminate fill (no `value`): by default a fill two fifths of\n   * the track wide sweeps across it, mirrored in right-to-left, and becomes a full-width pulse\n   * for reduced motion. The classes go on the fill and replace the whole default, its width and\n   * its reduced-motion counterparts included. `null` draws a static full-width fill; a class\n   * string or `{ className }` replaces the classes with plain animation classes (and a width) and\n   * their reduced-motion counterparts (the fill has no presence phases). A\n   * `WaveProvider` with `motion=\"none\"` turns the default off (a static full-width fill), and a\n   * value here still applies under it. A determinate bar has no motion and ignores it. Fluent's\n   * ProgressBar `indeterminateMotion` takes a motion slot the same way.\n   * @default the sweep described above\n   */\n  indeterminateMotion?: MotionSlot | null;\n  ref?: React.Ref<HTMLDivElement>;\n}\n\nconst fillColorClasses: Record<ProgressBarColor, string> = {\n  brand: 'bg-primary',\n  success: 'bg-success',\n  // The warning token (a light yellow) is 1.02:1 on the light track: the severe orange passes 3:1.\n  warning: 'bg-severe',\n  error: 'bg-error',\n};\n\n/** The fill color a Field's validation state gives the bar (`none` keeps the default). */\nconst fieldColors: Partial<Record<ValidationState, ProgressBarColor>> = {\n  error: 'error',\n  warning: 'warning',\n  success: 'success',\n};\n\n/** Whether a name prop (`label`, `aria-label`, `aria-labelledby`) holds more than whitespace. */\nfunction isName(value: unknown): value is string {\n  return typeof value === 'string' && value.trim() !== '';\n}\n\n/**\n * Shows the progress of a task, or that a task is running (indeterminate, `value` omitted).\n *\n * - Name it with `label` (or `aria-label` / `aria-labelledby`); `showLabel` shows the label above\n *   the bar.\n * - `value` is clamped to `0…max`; invalid numbers render an empty bar and warn in development.\n * - `color` picks the fill (`brand`, `success`, `warning`, `error`).\n * - Inside a `Field`, the Field's label names a bar that has no name of its own, its validation\n *   message and hint describe the bar, and its validation state (error, warning, success) colors\n *   the fill unless `color` is set. A progress bar is never invalid or required: the\n *   `aria-invalid` and `aria-required` a Field adds are not rendered. Next to another control in\n *   a Field's wrapper element, the bar gets an id of its own and leaves the Field's\n *   `<label htmlFor>` to that control.\n * - The indeterminate animation follows the writing direction and becomes a full-width pulse for\n *   reduced motion; `indeterminateMotion` replaces or removes it. In forced-colors mode the fill\n *   uses `Highlight` and the track gets a border.\n *\n * @example\n * <ProgressBar value={uploaded} max={total} label=\"Uploading photos\" showLabel />\n *\n * @example\n * <Field label=\"Upload\" validationState=\"warning\" validationMessage=\"The connection is slow.\">\n *   <ProgressBar value={uploaded} max={total} />\n * </Field>\n */\nexport const ProgressBar = ({\n  value,\n  max = 100,\n  label,\n  showLabel,\n  color,\n  indeterminateMotion,\n  id,\n  'aria-describedby': ariaDescribedBy,\n  // Field merges both into its first child; neither is allowed on role=\"progressbar\".\n  'aria-invalid': _ariaInvalid,\n  'aria-required': _ariaRequired,\n  className,\n  ref,\n  ...rest\n}: ProgressBarProps) => {\n  const labelId = useId('progress-label');\n  const ownId = useId('progress');\n  const field = useFieldContext();\n  // A <label htmlFor> cannot name a progress bar, so inside a Field a bar without an id (Field\n  // passes its control id to a first child as `id`) takes its own instead of claiming the\n  // control id: that stays with the control the label names (an Input next to the bar in a\n  // wrapper). No name props are passed, so with `labelable: false` the merged `aria-labelledby`\n  // is exactly the Field's label id (or absent); it is used only when the bar has no name of its\n  // own.\n  const fieldProps = useFieldControl(\n    { id: id ?? (field ? ownId : undefined), 'aria-describedby': ariaDescribedBy },\n    { labelable: false },\n  );\n  // A context built before 0.6 has no validation state: read it from `invalid`.\n  const fieldState = field ? (field.validationState ?? (field.invalid ? 'error' : 'none')) : 'none';\n  const resolvedColor = color ?? fieldColors[fieldState] ?? 'brand';\n  const isIndeterminate = value === undefined;\n  // Called whatever the mode, so the hook order never changes when `value` appears.\n  const indeterminateClasses = useMotionClasses(indeterminateMotion, progressIndeterminateMotion);\n  const validMax = Number.isFinite(max) && max > 0;\n  const validValue = isIndeterminate || Number.isFinite(value);\n  /** Clamped once, used for both the fill width and `aria-valuenow`. */\n  const clamped =\n    !isIndeterminate && validMax && validValue ? Math.min(max, Math.max(0, value)) : 0;\n  const percentage = validMax ? (clamped / max) * 100 : 0;\n\n  // An empty or whitespace-only `label`, `aria-label` or `aria-labelledby` names nothing: it is\n  // treated like `undefined` by the precedence, the rendered attributes and the warning alike.\n  const hasLabel = isName(label);\n  const hasAriaLabel = isName(rest['aria-label']);\n  const hasAriaLabelledBy = isName(rest['aria-labelledby']);\n  const fieldLabelledBy = fieldProps['aria-labelledby'];\n  const hasFieldName = !hasLabel && !hasAriaLabel && !hasAriaLabelledBy && isName(fieldLabelledBy);\n\n  // Development diagnostics (C-DEV): emitted from an effect, once per page.\n  React.useEffect(() => {\n    if (!isDev) return;\n    if (!hasLabel && !hasAriaLabel && !hasAriaLabelledBy && !hasFieldName) {\n      warnOnce(\n        'ProgressBar:name',\n        'ProgressBar: a progress bar needs an accessible name. Pass `label` (add `showLabel` to show it), `aria-label` or `aria-labelledby`.',\n      );\n    }\n    if (showLabel && !hasLabel) {\n      warnOnce(\n        'ProgressBar:show-label',\n        'ProgressBar: `showLabel` renders the `label` prop, which is empty.',\n      );\n    }\n    if (!validMax) {\n      warnOnce(\n        'ProgressBar:max',\n        `ProgressBar: \\`max\\` must be a finite number greater than 0 (got ${String(max)}); the bar renders 0%.`,\n      );\n    }\n    if (!validValue) {\n      warnOnce(\n        'ProgressBar:value',\n        `ProgressBar: \\`value\\` must be a finite number (got ${String(value)}); the bar renders 0%.`,\n      );\n    }\n  }, [\n    hasLabel,\n    hasAriaLabel,\n    hasAriaLabelledBy,\n    hasFieldName,\n    showLabel,\n    validMax,\n    validValue,\n    max,\n    value,\n  ]);\n\n  const visibleLabel = Boolean(showLabel && hasLabel);\n\n  /**\n   * The bar's attributes. Defaults the consumer may override (C-COMPOSE) apply wherever the\n   * consumer's value is `undefined` — also when the key is present, e.g. a wrapper that forwards\n   * `aria-label={props['aria-label']}` — so a forwarded `undefined` never strips the role, the\n   * values or the name derived from `label`. An empty `aria-label`/`aria-labelledby` is dropped\n   * the same way instead of rendering a nameless attribute.\n   */\n  const barProps: Record<string, unknown> = {\n    role: 'progressbar',\n    'aria-valuenow': isIndeterminate ? undefined : clamped,\n    'aria-valuemin': 0,\n    'aria-valuemax': validMax ? max : 100,\n    'data-color': resolvedColor,\n  };\n  // The consumer's id (or the control id Field passes to its first child), else its own id inside\n  // a Field; the consumer's description, then the Field's validation message and hint.\n  if (fieldProps.id !== undefined) barProps.id = fieldProps.id;\n  if (fieldProps['aria-describedby'] !== undefined) {\n    barProps['aria-describedby'] = fieldProps['aria-describedby'];\n  }\n  // A consumer `aria-label` or `aria-labelledby` wins over the name derived from `label`, also\n  // with `showLabel` (the visible label then stays unreferenced text). The Field's label names\n  // only a bar without a name of its own.\n  if (!hasAriaLabel && !hasAriaLabelledBy) {\n    if (visibleLabel) barProps['aria-labelledby'] = labelId;\n    else if (hasLabel) barProps['aria-label'] = label;\n    else if (hasFieldName) barProps['aria-labelledby'] = fieldLabelledBy;\n  }\n  for (const [key, propValue] of Object.entries(rest)) {\n    if (propValue === undefined) continue;\n    if ((key === 'aria-label' || key === 'aria-labelledby') && !isName(propValue)) continue;\n    barProps[key] = propValue;\n  }\n\n  const bar = (\n    <div\n      {...barProps}\n      ref={ref}\n      className={cn(\n        progressBarClassNames.root,\n        'h-2 overflow-hidden rounded-full bg-track',\n        'forced-colors:border',\n        forcedColors.border,\n        className,\n      )}\n    >\n      <div\n        className={cn(\n          progressBarClassNames.bar,\n          'h-full rounded-full',\n          fillColorClasses[resolvedColor],\n          forcedColors.selectedLeaf,\n          isIndeterminate && cn('w-full', indeterminateClasses),\n        )}\n        style={isIndeterminate ? undefined : { width: `${percentage}%` }}\n      />\n    </div>\n  );\n\n  if (!visibleLabel) return bar;\n\n  return (\n    <div className=\"flex flex-col gap-1\">\n      <span id={labelId} className={cn(progressBarClassNames.label, 'text-body-1 text-foreground')}>\n        {label}\n      </span>\n      {bar}\n    </div>\n  );\n};\n\nProgressBar.displayName = 'ProgressBar';\n"],"mappings":"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"}

package/dist/components/feedback/ProgressBar.mjs

@@ -5,69 +5,71 @@ import { progressBarClassNames as r } from "../../lib/classNames.mjs";
 import { useId as i } from "../../hooks/useId.mjs";
 import { useFieldContext as a, useFieldControl as o } from "../../hooks/useFieldControl.mjs";
 import { forcedColors as s } from "../../lib/styles.mjs";
-import * as c from "react";
-import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { progressIndeterminateMotion as c } from "../../lib/motion.mjs";
+import { useMotionClasses as l } from "../../hooks/useMotion.mjs";
+import * as u from "react";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
 //#region src/components/feedback/ProgressBar.tsx
-var d = {
+var p = {
 	brand: "bg-primary",
 	success: "bg-success",
 	warning: "bg-severe",
 	error: "bg-error"
-}, f = {
+}, m = {
 	error: "error",
 	warning: "warning",
 	success: "success"
 };
-function p(e) {
+function h(e) {
 	return typeof e == "string" && e.trim() !== "";
 }
-var m = ({ value: m, max: h = 100, label: g, showLabel: _, color: v, id: y, "aria-describedby": b, "aria-invalid": x, "aria-required": S, className: C, ref: w, ...T }) => {
-	let E = i("progress-label"), D = i("progress"), O = a(), k = o({
-		id: y ?? (O ? D : void 0),
-		"aria-describedby": b
-	}, { labelable: !1 }), A = O ? O.validationState ?? (O.invalid ? "error" : "none") : "none", j = v ?? f[A] ?? "brand", M = m === void 0, N = Number.isFinite(h) && h > 0, P = M || Number.isFinite(m), F = !M && N && P ? Math.min(h, Math.max(0, m)) : 0, I = N ? F / h * 100 : 0, L = p(g), R = p(T["aria-label"]), z = p(T["aria-labelledby"]), B = k["aria-labelledby"], V = !L && !R && !z && p(B);
-	c.useEffect(() => {
-		t && (!L && !R && !z && !V && n("ProgressBar:name", "ProgressBar: a progress bar needs an accessible name. Pass `label` (add `showLabel` to show it), `aria-label` or `aria-labelledby`."), _ && !L && n("ProgressBar:show-label", "ProgressBar: `showLabel` renders the `label` prop, which is empty."), N || n("ProgressBar:max", `ProgressBar: \`max\` must be a finite number greater than 0 (got ${String(h)}); the bar renders 0%.`), P || n("ProgressBar:value", `ProgressBar: \`value\` must be a finite number (got ${String(m)}); the bar renders 0%.`));
+var g = ({ value: g, max: _ = 100, label: v, showLabel: y, color: b, indeterminateMotion: x, id: S, "aria-describedby": C, "aria-invalid": w, "aria-required": T, className: E, ref: D, ...O }) => {
+	let k = i("progress-label"), A = i("progress"), j = a(), M = o({
+		id: S ?? (j ? A : void 0),
+		"aria-describedby": C
+	}, { labelable: !1 }), N = j ? j.validationState ?? (j.invalid ? "error" : "none") : "none", P = b ?? m[N] ?? "brand", F = g === void 0, I = l(x, c), L = Number.isFinite(_) && _ > 0, R = F || Number.isFinite(g), z = !F && L && R ? Math.min(_, Math.max(0, g)) : 0, B = L ? z / _ * 100 : 0, V = h(v), H = h(O["aria-label"]), U = h(O["aria-labelledby"]), W = M["aria-labelledby"], G = !V && !H && !U && h(W);
+	u.useEffect(() => {
+		t && (!V && !H && !U && !G && n("ProgressBar:name", "ProgressBar: a progress bar needs an accessible name. Pass `label` (add `showLabel` to show it), `aria-label` or `aria-labelledby`."), y && !V && n("ProgressBar:show-label", "ProgressBar: `showLabel` renders the `label` prop, which is empty."), L || n("ProgressBar:max", `ProgressBar: \`max\` must be a finite number greater than 0 (got ${String(_)}); the bar renders 0%.`), R || n("ProgressBar:value", `ProgressBar: \`value\` must be a finite number (got ${String(g)}); the bar renders 0%.`));
 	}, [
+		V,
+		H,
+		U,
+		G,
+		y,
 		L,
 		R,
-		z,
-		V,
 		_,
-		N,
-		P,
-		h,
-		m
+		g
 	]);
-	let H = !!(_ && L), U = {
+	let K = !!(y && V), q = {
 		role: "progressbar",
-		"aria-valuenow": M ? void 0 : F,
+		"aria-valuenow": F ? void 0 : z,
 		"aria-valuemin": 0,
-		"aria-valuemax": N ? h : 100,
-		"data-color": j
+		"aria-valuemax": L ? _ : 100,
+		"data-color": P
 	};
-	k.id !== void 0 && (U.id = k.id), k["aria-describedby"] !== void 0 && (U["aria-describedby"] = k["aria-describedby"]), !R && !z && (H ? U["aria-labelledby"] = E : L ? U["aria-label"] = g : V && (U["aria-labelledby"] = B));
-	for (let [e, t] of Object.entries(T)) t !== void 0 && (e !== "aria-label" && e !== "aria-labelledby" || p(t)) && (U[e] = t);
-	let W = /* @__PURE__ */ l("div", {
-		...U,
-		ref: w,
-		className: e(r.root, "h-2 overflow-hidden rounded-full bg-track", "forced-colors:border", s.border, C),
-		children: /* @__PURE__ */ l("div", {
-			className: e(r.bar, "h-full rounded-full", d[j], s.selectedLeaf, M && "w-2/5 animate-wave-indeterminate wave-rtl:animate-wave-indeterminate-rtl motion-reduce:w-full motion-reduce:translate-x-0 motion-reduce:animate-wave-pulse wave-rtl:motion-reduce:animate-wave-pulse"),
-			style: M ? void 0 : { width: `${I}%` }
+	M.id !== void 0 && (q.id = M.id), M["aria-describedby"] !== void 0 && (q["aria-describedby"] = M["aria-describedby"]), !H && !U && (K ? q["aria-labelledby"] = k : V ? q["aria-label"] = v : G && (q["aria-labelledby"] = W));
+	for (let [e, t] of Object.entries(O)) t !== void 0 && (e !== "aria-label" && e !== "aria-labelledby" || h(t)) && (q[e] = t);
+	let J = /* @__PURE__ */ d("div", {
+		...q,
+		ref: D,
+		className: e(r.root, "h-2 overflow-hidden rounded-full bg-track", "forced-colors:border", s.border, E),
+		children: /* @__PURE__ */ d("div", {
+			className: e(r.bar, "h-full rounded-full", p[P], s.selectedLeaf, F && e("w-full", I)),
+			style: F ? void 0 : { width: `${B}%` }
 		})
 	});
-	return H ? /* @__PURE__ */ u("div", {
+	return K ? /* @__PURE__ */ f("div", {
 		className: "flex flex-col gap-1",
-		children: [/* @__PURE__ */ l("span", {
-			id: E,
+		children: [/* @__PURE__ */ d("span", {
+			id: k,
 			className: e(r.label, "text-body-1 text-foreground"),
-			children: g
-		}), W]
-	}) : W;
+			children: v
+		}), J]
+	}) : J;
 };
-m.displayName = "ProgressBar";
+g.displayName = "ProgressBar";
 //#endregion
-export { m as ProgressBar };
+export { g as ProgressBar };
 
 //# sourceMappingURL=ProgressBar.mjs.map

package/dist/components/feedback/ProgressBar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar.mjs","names":["useId","useId$1","React","fillColorClasses","fieldColors","isName","value","ProgressBar","ariaDescribedBy","_ariaInvalid","_ariaRequired","rest","labelId","ownId","field","useFieldContext","fieldProps","useFieldControl","id","fieldState","resolvedColor","color","isIndeterminate","validMax","max","validValue","clamped","percentage","hasLabel","label","hasAriaLabel","hasAriaLabelledBy","fieldLabelledBy","hasFieldName","isDev","warnOnce","showLabel","visibleLabel","barProps","key","propValue","bar","cn","progressBarClassNames","forcedColors","className"],"sources":["../../../src/components/feedback/ProgressBar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { progressBarClassNames } from '../../lib/classNames';\nimport { cn } from '../../lib/cn';\nimport { isDev, warnOnce } from '../../lib/dev';\nimport { forcedColors } from '../../lib/styles';\nimport type { ValidationState } from '../../lib/types';\nimport { useFieldContext, useFieldControl } from '../../hooks/useFieldControl';\nimport { useId } from '../../hooks/useId';\n\n/** Color of a {@link ProgressBar}'s fill. */\nexport type ProgressBarColor = 'brand' | 'success' | 'warning' | 'error';\n\n/** Properties for the ProgressBar component. */\nexport interface ProgressBarProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Current progress value, clamped to `0…max` for both the fill and `aria-valuenow`. Omit for\n   * indeterminate mode. A non-finite value renders 0% (development warning).\n   */\n  value?: number;\n  /**\n   * Maximum progress value. A `max` of 0 or less, or a non-finite `max`, renders 0% (development\n   * warning) and is reported to assistive technology as 0 of 100.\n   * @default 100\n   */\n  max?: number;\n  /**\n   * Accessible name of the progress bar: `aria-label` by default, or a visible label with\n   * `showLabel`. A progress bar needs a name (`label`, `aria-label` or `aria-labelledby`); a\n   * development warning fires without one. A consumer `aria-label` or `aria-labelledby` takes\n   * precedence over `label`; an empty or whitespace-only one counts as absent (it is not rendered).\n   * Inside a `Field`, the Field's label names the bar when neither `label` nor a consumer name is\n   * given.\n   */\n  label?: string;\n  /**\n   * Renders `label` as visible text above the bar and names the bar with it (`aria-labelledby`)\n   * instead of `aria-label`, unless a consumer `aria-label` or `aria-labelledby` names the bar\n   * (keep the visible text in that name, WCAG 2.5.3). The label and the bar are then wrapped in a\n   * `div`; `ref`, `className`, `style` and the other props stay on the progress bar element.\n   */\n  showLabel?: boolean;\n  /**\n   * Color of the fill. Inside a `Field` it follows the Field's validation state (error, warning,\n   * success) unless you set it. `warning` fills with the dark orange of the `severe` color, which\n   * keeps 3:1 against the track in every theme. The bar carries `data-color` with the resolved\n   * color.\n   * @default 'brand'\n   */\n  color?: ProgressBarColor;\n  ref?: React.Ref<HTMLDivElement>;\n}\n\nconst fillColorClasses: Record<ProgressBarColor, string> = {\n  brand: 'bg-primary',\n  success: 'bg-success',\n  // The warning token (a light yellow) is 1.02:1 on the light track: the severe orange passes 3:1.\n  warning: 'bg-severe',\n  error: 'bg-error',\n};\n\n/** The fill color a Field's validation state gives the bar (`none` keeps the default). */\nconst fieldColors: Partial<Record<ValidationState, ProgressBarColor>> = {\n  error: 'error',\n  warning: 'warning',\n  success: 'success',\n};\n\n/** Whether a name prop (`label`, `aria-label`, `aria-labelledby`) holds more than whitespace. */\nfunction isName(value: unknown): value is string {\n  return typeof value === 'string' && value.trim() !== '';\n}\n\n/**\n * Shows the progress of a task, or that a task is running (indeterminate, `value` omitted).\n *\n * - Name it with `label` (or `aria-label` / `aria-labelledby`); `showLabel` shows the label above\n *   the bar.\n * - `value` is clamped to `0…max`; invalid numbers render an empty bar and warn in development.\n * - `color` picks the fill (`brand`, `success`, `warning`, `error`).\n * - Inside a `Field`, the Field's label names a bar that has no name of its own, its validation\n *   message and hint describe the bar, and its validation state (error, warning, success) colors\n *   the fill unless `color` is set. A progress bar is never invalid or required: the\n *   `aria-invalid` and `aria-required` a Field adds are not rendered. Next to another control in\n *   a Field's wrapper element, the bar gets an id of its own and leaves the Field's\n *   `<label htmlFor>` to that control.\n * - The indeterminate animation follows the writing direction and becomes a full-width pulse for\n *   reduced motion. In forced-colors mode the fill uses `Highlight` and the track gets a border.\n *\n * @example\n * <ProgressBar value={uploaded} max={total} label=\"Uploading photos\" showLabel />\n *\n * @example\n * <Field label=\"Upload\" validationState=\"warning\" validationMessage=\"The connection is slow.\">\n *   <ProgressBar value={uploaded} max={total} />\n * </Field>\n */\nexport const ProgressBar = ({\n  value,\n  max = 100,\n  label,\n  showLabel,\n  color,\n  id,\n  'aria-describedby': ariaDescribedBy,\n  // Field merges both into its first child; neither is allowed on role=\"progressbar\".\n  'aria-invalid': _ariaInvalid,\n  'aria-required': _ariaRequired,\n  className,\n  ref,\n  ...rest\n}: ProgressBarProps) => {\n  const labelId = useId('progress-label');\n  const ownId = useId('progress');\n  const field = useFieldContext();\n  // A <label htmlFor> cannot name a progress bar, so inside a Field a bar without an id (Field\n  // passes its control id to a first child as `id`) takes its own instead of claiming the\n  // control id: that stays with the control the label names (an Input next to the bar in a\n  // wrapper). No name props are passed, so with `labelable: false` the merged `aria-labelledby`\n  // is exactly the Field's label id (or absent); it is used only when the bar has no name of its\n  // own.\n  const fieldProps = useFieldControl(\n    { id: id ?? (field ? ownId : undefined), 'aria-describedby': ariaDescribedBy },\n    { labelable: false },\n  );\n  // A context built before 0.6 has no validation state: read it from `invalid`.\n  const fieldState = field ? (field.validationState ?? (field.invalid ? 'error' : 'none')) : 'none';\n  const resolvedColor = color ?? fieldColors[fieldState] ?? 'brand';\n  const isIndeterminate = value === undefined;\n  const validMax = Number.isFinite(max) && max > 0;\n  const validValue = isIndeterminate || Number.isFinite(value);\n  /** Clamped once, used for both the fill width and `aria-valuenow`. */\n  const clamped =\n    !isIndeterminate && validMax && validValue ? Math.min(max, Math.max(0, value)) : 0;\n  const percentage = validMax ? (clamped / max) * 100 : 0;\n\n  // An empty or whitespace-only `label`, `aria-label` or `aria-labelledby` names nothing: it is\n  // treated like `undefined` by the precedence, the rendered attributes and the warning alike.\n  const hasLabel = isName(label);\n  const hasAriaLabel = isName(rest['aria-label']);\n  const hasAriaLabelledBy = isName(rest['aria-labelledby']);\n  const fieldLabelledBy = fieldProps['aria-labelledby'];\n  const hasFieldName = !hasLabel && !hasAriaLabel && !hasAriaLabelledBy && isName(fieldLabelledBy);\n\n  // Development diagnostics (C-DEV): emitted from an effect, once per page.\n  React.useEffect(() => {\n    if (!isDev) return;\n    if (!hasLabel && !hasAriaLabel && !hasAriaLabelledBy && !hasFieldName) {\n      warnOnce(\n        'ProgressBar:name',\n        'ProgressBar: a progress bar needs an accessible name. Pass `label` (add `showLabel` to show it), `aria-label` or `aria-labelledby`.',\n      );\n    }\n    if (showLabel && !hasLabel) {\n      warnOnce(\n        'ProgressBar:show-label',\n        'ProgressBar: `showLabel` renders the `label` prop, which is empty.',\n      );\n    }\n    if (!validMax) {\n      warnOnce(\n        'ProgressBar:max',\n        `ProgressBar: \\`max\\` must be a finite number greater than 0 (got ${String(max)}); the bar renders 0%.`,\n      );\n    }\n    if (!validValue) {\n      warnOnce(\n        'ProgressBar:value',\n        `ProgressBar: \\`value\\` must be a finite number (got ${String(value)}); the bar renders 0%.`,\n      );\n    }\n  }, [\n    hasLabel,\n    hasAriaLabel,\n    hasAriaLabelledBy,\n    hasFieldName,\n    showLabel,\n    validMax,\n    validValue,\n    max,\n    value,\n  ]);\n\n  const visibleLabel = Boolean(showLabel && hasLabel);\n\n  /**\n   * The bar's attributes. Defaults the consumer may override (C-COMPOSE) apply wherever the\n   * consumer's value is `undefined` — also when the key is present, e.g. a wrapper that forwards\n   * `aria-label={props['aria-label']}` — so a forwarded `undefined` never strips the role, the\n   * values or the name derived from `label`. An empty `aria-label`/`aria-labelledby` is dropped\n   * the same way instead of rendering a nameless attribute.\n   */\n  const barProps: Record<string, unknown> = {\n    role: 'progressbar',\n    'aria-valuenow': isIndeterminate ? undefined : clamped,\n    'aria-valuemin': 0,\n    'aria-valuemax': validMax ? max : 100,\n    'data-color': resolvedColor,\n  };\n  // The consumer's id (or the control id Field passes to its first child), else its own id inside\n  // a Field; the consumer's description, then the Field's validation message and hint.\n  if (fieldProps.id !== undefined) barProps.id = fieldProps.id;\n  if (fieldProps['aria-describedby'] !== undefined) {\n    barProps['aria-describedby'] = fieldProps['aria-describedby'];\n  }\n  // A consumer `aria-label` or `aria-labelledby` wins over the name derived from `label`, also\n  // with `showLabel` (the visible label then stays unreferenced text). The Field's label names\n  // only a bar without a name of its own.\n  if (!hasAriaLabel && !hasAriaLabelledBy) {\n    if (visibleLabel) barProps['aria-labelledby'] = labelId;\n    else if (hasLabel) barProps['aria-label'] = label;\n    else if (hasFieldName) barProps['aria-labelledby'] = fieldLabelledBy;\n  }\n  for (const [key, propValue] of Object.entries(rest)) {\n    if (propValue === undefined) continue;\n    if ((key === 'aria-label' || key === 'aria-labelledby') && !isName(propValue)) continue;\n    barProps[key] = propValue;\n  }\n\n  const bar = (\n    <div\n      {...barProps}\n      ref={ref}\n      className={cn(\n        progressBarClassNames.root,\n        'h-2 overflow-hidden rounded-full bg-track',\n        'forced-colors:border',\n        forcedColors.border,\n        className,\n      )}\n    >\n      <div\n        className={cn(\n          progressBarClassNames.bar,\n          'h-full rounded-full',\n          fillColorClasses[resolvedColor],\n          forcedColors.selectedLeaf,\n          isIndeterminate &&\n            'w-2/5 animate-wave-indeterminate wave-rtl:animate-wave-indeterminate-rtl motion-reduce:w-full motion-reduce:translate-x-0 motion-reduce:animate-wave-pulse wave-rtl:motion-reduce:animate-wave-pulse',\n        )}\n        style={isIndeterminate ? undefined : { width: `${percentage}%` }}\n      />\n    </div>\n  );\n\n  if (!visibleLabel) return bar;\n\n  return (\n    <div className=\"flex flex-col gap-1\">\n      <span id={labelId} className={cn(progressBarClassNames.label, 'text-body-1 text-foreground')}>\n        {label}\n      </span>\n      {bar}\n    </div>\n  );\n};\n\nProgressBar.displayName = 'ProgressBar';\n"],"mappings":"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"}
+{"version":3,"file":"ProgressBar.mjs","names":["useId","useId$1","React","fillColorClasses","fieldColors","isName","value","ProgressBar","ariaDescribedBy","_ariaInvalid","_ariaRequired","rest","labelId","ownId","field","useFieldContext","fieldProps","useFieldControl","id","fieldState","resolvedColor","color","isIndeterminate","indeterminateClasses","useMotionClasses","indeterminateMotion","progressIndeterminateMotion","validMax","max","validValue","clamped","percentage","hasLabel","label","hasAriaLabel","hasAriaLabelledBy","fieldLabelledBy","hasFieldName","isDev","warnOnce","showLabel","visibleLabel","barProps","key","propValue","bar","cn","progressBarClassNames","forcedColors","className"],"sources":["../../../src/components/feedback/ProgressBar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { progressBarClassNames } from '../../lib/classNames';\nimport { cn } from '../../lib/cn';\nimport { isDev, warnOnce } from '../../lib/dev';\nimport { progressIndeterminateMotion } from '../../lib/motion';\nimport { forcedColors } from '../../lib/styles';\nimport type { MotionSlot, ValidationState } from '../../lib/types';\nimport { useFieldContext, useFieldControl } from '../../hooks/useFieldControl';\nimport { useId } from '../../hooks/useId';\nimport { useMotionClasses } from '../../hooks/useMotion';\n\n/** Color of a {@link ProgressBar}'s fill. */\nexport type ProgressBarColor = 'brand' | 'success' | 'warning' | 'error';\n\n/** Properties for the ProgressBar component. */\nexport interface ProgressBarProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Current progress value, clamped to `0…max` for both the fill and `aria-valuenow`. Omit for\n   * indeterminate mode. A non-finite value renders 0% (development warning).\n   */\n  value?: number;\n  /**\n   * Maximum progress value. A `max` of 0 or less, or a non-finite `max`, renders 0% (development\n   * warning) and is reported to assistive technology as 0 of 100.\n   * @default 100\n   */\n  max?: number;\n  /**\n   * Accessible name of the progress bar: `aria-label` by default, or a visible label with\n   * `showLabel`. A progress bar needs a name (`label`, `aria-label` or `aria-labelledby`); a\n   * development warning fires without one. A consumer `aria-label` or `aria-labelledby` takes\n   * precedence over `label`; an empty or whitespace-only one counts as absent (it is not rendered).\n   * Inside a `Field`, the Field's label names the bar when neither `label` nor a consumer name is\n   * given.\n   */\n  label?: string;\n  /**\n   * Renders `label` as visible text above the bar and names the bar with it (`aria-labelledby`)\n   * instead of `aria-label`, unless a consumer `aria-label` or `aria-labelledby` names the bar\n   * (keep the visible text in that name, WCAG 2.5.3). The label and the bar are then wrapped in a\n   * `div`; `ref`, `className`, `style` and the other props stay on the progress bar element.\n   */\n  showLabel?: boolean;\n  /**\n   * Color of the fill. Inside a `Field` it follows the Field's validation state (error, warning,\n   * success) unless you set it. `warning` fills with the dark orange of the `severe` color, which\n   * keeps 3:1 against the track in every theme. The bar carries `data-color` with the resolved\n   * color.\n   * @default 'brand'\n   */\n  color?: ProgressBarColor;\n  /**\n   * Replaces the motion of the indeterminate fill (no `value`): by default a fill two fifths of\n   * the track wide sweeps across it, mirrored in right-to-left, and becomes a full-width pulse\n   * for reduced motion. The classes go on the fill and replace the whole default, its width and\n   * its reduced-motion counterparts included. `null` draws a static full-width fill; a class\n   * string or `{ className }` replaces the classes with plain animation classes (and a width) and\n   * their reduced-motion counterparts (the fill has no presence phases). A\n   * `WaveProvider` with `motion=\"none\"` turns the default off (a static full-width fill), and a\n   * value here still applies under it. A determinate bar has no motion and ignores it. Fluent's\n   * ProgressBar `indeterminateMotion` takes a motion slot the same way.\n   * @default the sweep described above\n   */\n  indeterminateMotion?: MotionSlot | null;\n  ref?: React.Ref<HTMLDivElement>;\n}\n\nconst fillColorClasses: Record<ProgressBarColor, string> = {\n  brand: 'bg-primary',\n  success: 'bg-success',\n  // The warning token (a light yellow) is 1.02:1 on the light track: the severe orange passes 3:1.\n  warning: 'bg-severe',\n  error: 'bg-error',\n};\n\n/** The fill color a Field's validation state gives the bar (`none` keeps the default). */\nconst fieldColors: Partial<Record<ValidationState, ProgressBarColor>> = {\n  error: 'error',\n  warning: 'warning',\n  success: 'success',\n};\n\n/** Whether a name prop (`label`, `aria-label`, `aria-labelledby`) holds more than whitespace. */\nfunction isName(value: unknown): value is string {\n  return typeof value === 'string' && value.trim() !== '';\n}\n\n/**\n * Shows the progress of a task, or that a task is running (indeterminate, `value` omitted).\n *\n * - Name it with `label` (or `aria-label` / `aria-labelledby`); `showLabel` shows the label above\n *   the bar.\n * - `value` is clamped to `0…max`; invalid numbers render an empty bar and warn in development.\n * - `color` picks the fill (`brand`, `success`, `warning`, `error`).\n * - Inside a `Field`, the Field's label names a bar that has no name of its own, its validation\n *   message and hint describe the bar, and its validation state (error, warning, success) colors\n *   the fill unless `color` is set. A progress bar is never invalid or required: the\n *   `aria-invalid` and `aria-required` a Field adds are not rendered. Next to another control in\n *   a Field's wrapper element, the bar gets an id of its own and leaves the Field's\n *   `<label htmlFor>` to that control.\n * - The indeterminate animation follows the writing direction and becomes a full-width pulse for\n *   reduced motion; `indeterminateMotion` replaces or removes it. In forced-colors mode the fill\n *   uses `Highlight` and the track gets a border.\n *\n * @example\n * <ProgressBar value={uploaded} max={total} label=\"Uploading photos\" showLabel />\n *\n * @example\n * <Field label=\"Upload\" validationState=\"warning\" validationMessage=\"The connection is slow.\">\n *   <ProgressBar value={uploaded} max={total} />\n * </Field>\n */\nexport const ProgressBar = ({\n  value,\n  max = 100,\n  label,\n  showLabel,\n  color,\n  indeterminateMotion,\n  id,\n  'aria-describedby': ariaDescribedBy,\n  // Field merges both into its first child; neither is allowed on role=\"progressbar\".\n  'aria-invalid': _ariaInvalid,\n  'aria-required': _ariaRequired,\n  className,\n  ref,\n  ...rest\n}: ProgressBarProps) => {\n  const labelId = useId('progress-label');\n  const ownId = useId('progress');\n  const field = useFieldContext();\n  // A <label htmlFor> cannot name a progress bar, so inside a Field a bar without an id (Field\n  // passes its control id to a first child as `id`) takes its own instead of claiming the\n  // control id: that stays with the control the label names (an Input next to the bar in a\n  // wrapper). No name props are passed, so with `labelable: false` the merged `aria-labelledby`\n  // is exactly the Field's label id (or absent); it is used only when the bar has no name of its\n  // own.\n  const fieldProps = useFieldControl(\n    { id: id ?? (field ? ownId : undefined), 'aria-describedby': ariaDescribedBy },\n    { labelable: false },\n  );\n  // A context built before 0.6 has no validation state: read it from `invalid`.\n  const fieldState = field ? (field.validationState ?? (field.invalid ? 'error' : 'none')) : 'none';\n  const resolvedColor = color ?? fieldColors[fieldState] ?? 'brand';\n  const isIndeterminate = value === undefined;\n  // Called whatever the mode, so the hook order never changes when `value` appears.\n  const indeterminateClasses = useMotionClasses(indeterminateMotion, progressIndeterminateMotion);\n  const validMax = Number.isFinite(max) && max > 0;\n  const validValue = isIndeterminate || Number.isFinite(value);\n  /** Clamped once, used for both the fill width and `aria-valuenow`. */\n  const clamped =\n    !isIndeterminate && validMax && validValue ? Math.min(max, Math.max(0, value)) : 0;\n  const percentage = validMax ? (clamped / max) * 100 : 0;\n\n  // An empty or whitespace-only `label`, `aria-label` or `aria-labelledby` names nothing: it is\n  // treated like `undefined` by the precedence, the rendered attributes and the warning alike.\n  const hasLabel = isName(label);\n  const hasAriaLabel = isName(rest['aria-label']);\n  const hasAriaLabelledBy = isName(rest['aria-labelledby']);\n  const fieldLabelledBy = fieldProps['aria-labelledby'];\n  const hasFieldName = !hasLabel && !hasAriaLabel && !hasAriaLabelledBy && isName(fieldLabelledBy);\n\n  // Development diagnostics (C-DEV): emitted from an effect, once per page.\n  React.useEffect(() => {\n    if (!isDev) return;\n    if (!hasLabel && !hasAriaLabel && !hasAriaLabelledBy && !hasFieldName) {\n      warnOnce(\n        'ProgressBar:name',\n        'ProgressBar: a progress bar needs an accessible name. Pass `label` (add `showLabel` to show it), `aria-label` or `aria-labelledby`.',\n      );\n    }\n    if (showLabel && !hasLabel) {\n      warnOnce(\n        'ProgressBar:show-label',\n        'ProgressBar: `showLabel` renders the `label` prop, which is empty.',\n      );\n    }\n    if (!validMax) {\n      warnOnce(\n        'ProgressBar:max',\n        `ProgressBar: \\`max\\` must be a finite number greater than 0 (got ${String(max)}); the bar renders 0%.`,\n      );\n    }\n    if (!validValue) {\n      warnOnce(\n        'ProgressBar:value',\n        `ProgressBar: \\`value\\` must be a finite number (got ${String(value)}); the bar renders 0%.`,\n      );\n    }\n  }, [\n    hasLabel,\n    hasAriaLabel,\n    hasAriaLabelledBy,\n    hasFieldName,\n    showLabel,\n    validMax,\n    validValue,\n    max,\n    value,\n  ]);\n\n  const visibleLabel = Boolean(showLabel && hasLabel);\n\n  /**\n   * The bar's attributes. Defaults the consumer may override (C-COMPOSE) apply wherever the\n   * consumer's value is `undefined` — also when the key is present, e.g. a wrapper that forwards\n   * `aria-label={props['aria-label']}` — so a forwarded `undefined` never strips the role, the\n   * values or the name derived from `label`. An empty `aria-label`/`aria-labelledby` is dropped\n   * the same way instead of rendering a nameless attribute.\n   */\n  const barProps: Record<string, unknown> = {\n    role: 'progressbar',\n    'aria-valuenow': isIndeterminate ? undefined : clamped,\n    'aria-valuemin': 0,\n    'aria-valuemax': validMax ? max : 100,\n    'data-color': resolvedColor,\n  };\n  // The consumer's id (or the control id Field passes to its first child), else its own id inside\n  // a Field; the consumer's description, then the Field's validation message and hint.\n  if (fieldProps.id !== undefined) barProps.id = fieldProps.id;\n  if (fieldProps['aria-describedby'] !== undefined) {\n    barProps['aria-describedby'] = fieldProps['aria-describedby'];\n  }\n  // A consumer `aria-label` or `aria-labelledby` wins over the name derived from `label`, also\n  // with `showLabel` (the visible label then stays unreferenced text). The Field's label names\n  // only a bar without a name of its own.\n  if (!hasAriaLabel && !hasAriaLabelledBy) {\n    if (visibleLabel) barProps['aria-labelledby'] = labelId;\n    else if (hasLabel) barProps['aria-label'] = label;\n    else if (hasFieldName) barProps['aria-labelledby'] = fieldLabelledBy;\n  }\n  for (const [key, propValue] of Object.entries(rest)) {\n    if (propValue === undefined) continue;\n    if ((key === 'aria-label' || key === 'aria-labelledby') && !isName(propValue)) continue;\n    barProps[key] = propValue;\n  }\n\n  const bar = (\n    <div\n      {...barProps}\n      ref={ref}\n      className={cn(\n        progressBarClassNames.root,\n        'h-2 overflow-hidden rounded-full bg-track',\n        'forced-colors:border',\n        forcedColors.border,\n        className,\n      )}\n    >\n      <div\n        className={cn(\n          progressBarClassNames.bar,\n          'h-full rounded-full',\n          fillColorClasses[resolvedColor],\n          forcedColors.selectedLeaf,\n          isIndeterminate && cn('w-full', indeterminateClasses),\n        )}\n        style={isIndeterminate ? undefined : { width: `${percentage}%` }}\n      />\n    </div>\n  );\n\n  if (!visibleLabel) return bar;\n\n  return (\n    <div className=\"flex flex-col gap-1\">\n      <span id={labelId} className={cn(progressBarClassNames.label, 'text-body-1 text-foreground')}>\n        {label}\n      </span>\n      {bar}\n    </div>\n  );\n};\n\nProgressBar.displayName = 'ProgressBar';\n"],"mappings":"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"}

package/dist/components/feedback/Toaster.cjs

@@ -1,2 +1,2 @@
-"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/dev.cjs"),r=require("../../lib/composeEventHandlers.cjs"),i=require("../../lib/classNames.cjs"),a=require("../../lib/toaster.cjs"),o=require("../../hooks/useEventCallback.cjs"),s=require("../../hooks/useId.cjs"),c=require("../../lib/direction.cjs"),l=require("../../lib/focus.cjs"),u=require("../../hooks/useMergedRefs.cjs"),d=require("../../lib/aria.cjs"),f=require("../../hooks/usePresence.cjs"),p=require("../../hooks/useDirection.cjs"),m=require("../../lib/layers.cjs"),ee=require("../../lib/styles.cjs"),h=require("../portal/Portal.cjs"),g=require("../../lib/events.cjs"),_=require("../../hooks/usePreserveFocus.cjs"),v=require("./MessageBar.status.cjs"),y=require("./Toast.context.cjs"),te=require("./Toast.root.cjs");let b=require("react");b=e.__toESM(b,1);let x=require("react/jsx-runtime");function S(e,t){let n=0,r=!1;for(let t of e)t.shown?t.dismissed||(n+=1):r=!0;return!r||n>=t?e:e.map(e=>e.shown||n>=t?e:(n+=1,{...e,shown:!0}))}function C(e,t){let n=e.findIndex(e=>e.id===t);if(n===-1)return e;let r=e[n];if(!r.shown)return[...e.slice(0,n),...e.slice(n+1)];if(r.dismissed)return e;let i=e.slice();return i[n]={...r,dismissed:!0},i}function ne(e){return e.every(e=>e.shown&&e.dismissed)?e:e.filter(e=>e.shown).map(e=>e.dismissed?e:{...e,dismissed:!0})}function re(e){let t;for(let n of e)n.shown&&!n.dismissed&&(!t||n.seq>t.seq)&&(t=n);return t}function w(e,t){return e.contains(t)?!0:m.getOpenLayers().some(n=>{let r=n.getAnchor();return r!==null&&e.contains(r)&&m.isInsideLayerTree(n.id,t)})}function ie(e,t){let n=t?.getDismissButton()??null;return l.getTabbableElements(e).some(e=>e!==n)}function T(e){return e===void 0?1/0:e>=1?Math.floor(e):1}var E={dispatchToast:(e,t)=>(a.isToastOptions(e)?e.toastId:t?.toastId)??``,dismissToast:()=>{},dismissAllToasts:()=>{}},D=`useToastController must be used within <Toaster>. Wrap your app (or the part of it that shows toasts) in <Toaster>: it provides the controller to its children.`;function O(){return b.useContext(y.ToasterContext)||(n.reportMissingContext(`useToastController`,`<Toaster>`,D),E)}var ae=5e3;function k(e){let t=new Map,n=new Set,r=new Map,i=!1,a=!1,o=o=>{let s=t.get(o);if(!s)return;let c=!a&&!i&&n.size===0;c&&s.handle===null?(s.startedAt=Date.now(),s.handle=setTimeout(()=>{t.delete(o),r.delete(o),e(o)},s.remaining)):!c&&s.handle!==null&&(clearTimeout(s.handle),s.handle=null,s.remaining=Math.max(0,s.remaining-(Date.now()-s.startedAt)))},s=()=>{for(let e of Array.from(t.keys()))o(e)},c=e=>{let n=t.get(e);n?.handle!=null&&clearTimeout(n.handle),t.delete(e)};return{start(e,n,i){r.get(e)!==n&&(r.set(e,n),c(e),i>0&&Number.isFinite(i)&&(t.set(e,{handle:null,remaining:i,startedAt:0}),o(e)))},remove(e){c(e),r.delete(e)},clear(){for(let e of Array.from(t.keys()))c(e);r.clear()},isPaused(e){return n.has(e)},setPaused(e,t){t?n.add(e):n.delete(e),s()},setInBackground(e){i=e,s()},setSuspended(e){a=e,s()}}}var A={"top-start":`top-4 start-4 ms-(--wave-toaster-offset) mt-(--wave-toaster-offset-block)`,"top-end":`top-4 end-4 me-(--wave-toaster-offset) mt-(--wave-toaster-offset-block)`,"bottom-start":`bottom-4 start-4 ms-(--wave-toaster-offset) mb-(--wave-toaster-offset-block)`,"bottom-end":`bottom-4 end-4 me-(--wave-toaster-offset) mb-(--wave-toaster-offset-block)`,"top-right":`top-4 right-4 mr-(--wave-toaster-offset) mt-(--wave-toaster-offset-block)`,"top-left":`top-4 left-4 ml-(--wave-toaster-offset) mt-(--wave-toaster-offset-block)`,"bottom-right":`bottom-4 right-4 mr-(--wave-toaster-offset) mb-(--wave-toaster-offset-block)`,"bottom-left":`bottom-4 left-4 ml-(--wave-toaster-offset) mb-(--wave-toaster-offset-block)`},j=16;function M(e,t){let n=e.slice(e.indexOf(`-`)+1);if(n===`right`||n===`left`)return n===`right`;let r=c.getDirection(t)===`rtl`;return n===`end`?!r:r}var N={inline:0,block:0};function P(){return m.getOpenLayers().filter(e=>e.kind===`modal`||e.kind===`dialog`)}function oe(){let e=new Set;for(let t of P())for(let n of t.getElements())n?.isConnected&&e.add(n);return e}function F(e,t){let n=P();if(n.length===0)return N;let r=e.ownerDocument,i=r.defaultView;if(!i)return N;let a=r.documentElement.clientWidth||i.innerWidth,o=r.documentElement.clientHeight||i.innerHeight,s=M(t,e),c=t.startsWith(`top`),l=t=>a-t>=e.offsetWidth+32,u=t=>o-t>=e.offsetHeight+32,d=0,f=0;for(let e of n)for(let t of e.getElements()){if(!t?.isConnected)continue;let e=t.getBoundingClientRect();if(e.width<=0||e.height<=0)continue;let n=s?e.right>=a-j:e.left<=j,r=c?e.top<=j:e.bottom>=o-j;if(!n||!r)continue;let i=s?a-e.left:e.right,p=c?e.bottom:o-e.top;l(i)?d=Math.max(d,i):u(p)&&(f=Math.max(f,p))}return{inline:d>0&&l(d)?Math.ceil(d):0,block:f>0&&u(f)?Math.ceil(f):0}}var I=2e3;function L({text:e}){let[t,n]=b.useState(!0);return b.useEffect(()=>{let e=setTimeout(()=>n(!1),I);return()=>clearTimeout(e)},[]),t?(0,x.jsx)(`div`,{children:e}):null}L.displayName=`LiveMessage`;function R(e){return e.kind===`title`}function z(e){return e.kind===`body`}function B(e){return e.kind===`footer`}var V=new Set(`a.abbr.b.bdi.bdo.cite.code.data.dfn.em.i.kbd.label.mark.q.s.samp.small.span.strong.sub.sup.time.u.var.wbr`.split(`.`)),H=new Set([`noscript`,`script`,`style`,`template`]),U=new Set([`button`,`img`,`input`,`select`,`textarea`]),W=new Set([`button`,`checkbox`,`combobox`,`img`,`link`,`option`,`radio`,`slider`,`spinbutton`,`switch`,`tab`,`textbox`]);function G(e){let t=e.getAttribute(`role`)?.trim().split(/\s+/)[0];return t?W.has(t)||t.startsWith(`menuitem`):e.localName===`a`?e.hasAttribute(`href`):U.has(e.localName)}function K(e){return e.getAttribute(`aria-hidden`)===`true`||e.hasAttribute(`hidden`)||H.has(e.localName)}function q(e,t){if(!e)return``;let n=[],r=(e,i)=>{if(e.nodeType===Node.TEXT_NODE){n.push(e.textContent??``);return}if(e.nodeType!==Node.ELEMENT_NODE)return;let a=e;if(!i&&t?.(a)||K(a))return;let o=a.getAttribute(`aria-label`);if(o&&G(a)){n.push(` ${o} `);return}if(a.localName===`img`){n.push(` ${a.getAttribute(`alt`)??``} `);return}let s=!V.has(a.localName);s&&n.push(` `);for(let e of Array.from(a.childNodes))r(e,!1);s&&n.push(` `)};return r(e,!0),n.join(``).replace(/\s+/g,` `).trim()}function J(e){return!e||K(e)?[]:Array.from(e.childNodes,e=>e.nodeType===Node.TEXT_NODE?(e.textContent??``).replace(/\s+/g,` `).trim():e.nodeType===Node.ELEMENT_NODE?q(e):``).filter(Boolean)}function Y(e,t,n,r){let i=t.find(R),a=t.find(z);if(!i&&!a){let t=n?.getDismissButton()??null;return q(e,e=>e===t||e.id!==``&&(e.id===r||e.id===n?.statusTextId))}let o=i?.getLabel()??null,s=i?.getRow()??null,c=s?Array.from(s.children).filter(e=>e!==o).flatMap(e=>J(e)):[];return[q(o),q(a?.getElement()??null),...c,...t.filter(B).flatMap(e=>J(e.getElement()))].filter(Boolean).join(` `)}function se({entry:e,timers:r,onDismiss:a,onExited:c,getFocusFallback:l,announce:p,registerContainer:m}){let{id:h,dismissed:S}=e,{isMounted:C,ref:ne,presenceProps:re}=f.usePresence(!S,{appear:!0,onExited:()=>c(h)}),w=b.useRef(null),T=b.useRef(null),E=b.useCallback(e=>{w.current=e,e&&(T.current=e),m(h,e)},[h,m]),D=u.useMergedRefs(E,ne);_.usePreserveFocus(w,()=>l(T.current),{enabled:!S});let O=s.useId(`wave-toast-title`),k=s.useId(`wave-toast-status`),[A,j]=b.useState([]),M=b.useRef([]),N=b.useCallback(e=>(M.current=[...M.current,e],j(M.current),()=>{M.current=M.current.filter(t=>t!==e),j(M.current)}),[]),[P,oe]=b.useState(null),F=b.useRef(null),I=b.useCallback(e=>(F.current=e,oe(e),()=>{F.current===e&&(F.current=null,oe(null))}),[]),L=o.useEventCallback(()=>{F.current?.onDismiss?.(),a(h)}),B=b.useMemo(()=>({titleId:O,dismiss:L,registerPart:N,registerToast:I}),[O,L,N,I]),V=A.find(R),H=A.find(z),U=e.form===`content`&&P===null?v.getStatusLabel(e.options.status??`info`,e.options.statusLabel):``,W=P?P.statusTextId:U?k:void 0;b.useLayoutEffect(()=>{let t=w.current;if(e.dismissed||!t)return;let n=e.options.timeout??(ie(t,F.current)?0:ae);r.start(e.id,e.seq,n)},[e,r]),b.useLayoutEffect(()=>{let t=w.current;if(e.dismissed||!t)return;let n=F.current,r=n?.status??e.options.status??`info`,i=n?n.statusLabel:v.getStatusLabel(r,e.options.statusLabel),a=e.form===`content`&&e.options.announcement!==void 0?e.options.announcement:Y(t,M.current,n,k);p(e.id,{seq:e.seq,text:[i,a].filter(Boolean).join(` `),assertive:r===`error`})},[e,p,k,P]);let G=e.form===`content`?e.options.status:void 0;b.useEffect(()=>{let e=F.current?.status;G!==void 0&&e!==void 0&&G!==e&&n.warnOnce(`Toaster:status-conflict`,`Toaster: the dispatched Toast has status "${e}" but the dispatch options pass "${G}"; the Toast's status is used. Remove \`status\` from the options.`)},[e,G,P]);let K=e=>{(e.key===`Delete`||e.key===`Backspace`)&&(e.defaultPrevented||!g.isOwnEvent(e)||g.isEditableTarget(e.target)||(e.preventDefault(),a(h)))};return C?(0,x.jsxs)(`div`,{ref:D,role:`group`,tabIndex:-1,"data-wave-toast":``,"aria-labelledby":d.joinIds(W,V?.id),"aria-describedby":H?.id,className:t.cn(i.toasterClassNames.toast,`rounded`,ee.focusRing),...re,onKeyDown:K,children:[U?(0,x.jsx)(v.StatusText,{label:U,id:k}):null,(0,x.jsx)(y.ToastContext.Provider,{value:B,children:e.form===`options`?(0,x.jsx)(te.ToastRoot,{status:e.options.status,statusLabel:e.options.statusLabel,title:e.options.title,dismissLabel:e.options.dismissLabel,children:e.options.body}):e.content})]}):null}se.displayName=`ToastContainer`;var X=({position:e=`bottom-end`,limit:c,shortcuts:d,toaster:f,className:ee,style:_,children:v,onFocus:te,onBlur:ie,onKeyDown:E,onPointerEnter:D,onPointerLeave:O,onPointerOver:ae,ref:j,...M})=>{let[P,I]=b.useState([]),[R,z]=b.useState(()=>new Map),B=b.useCallback((e,t)=>{z(n=>{let r=n.get(e);if(r&&r.seq===t.seq&&r.text===t.text&&r.assertive===t.assertive)return n;let i=new Map(n);return i.set(e,t),i})},[]),V=S(P,T(c));V!==P&&I(V);let H=V.filter(e=>e.shown);b.useEffect(()=>{c!==void 0&&!(c>=1)&&n.warnOnce(`Toaster:limit`,`Toaster: \`limit\` must be 1 or more (got ${String(c)}); it counts as 1.`)},[c]);let U=s.useId(`toast`),W=b.useRef(0),G=b.useRef(null),K=u.useMergedRefs(j,G),q=b.useRef(null),J=p.useDirection(),[Y,X]=b.useState(N);b.useLayoutEffect(()=>{let t=null,n=null,r=null,i=new Set,a=()=>{let e=oe();for(let n of i)e.has(n)||t?.unobserve(n);for(let n of e)i.has(n)||t?.observe(n);let r=e.size!==i.size||[...e].some(e=>!i.has(e));if(i=e,r&&n){n.disconnect();for(let t of e)n.observe(t,{attributes:!0,attributeFilter:[`class`,`style`]})}},o=()=>{let n=G.current;t&&n!==r&&(r&&t.unobserve(r),n&&t.observe(n),r=n),a();let i=n?F(n,e):N;X(e=>e.inline===i.inline&&e.block===i.block?e:i)};typeof ResizeObserver<`u`&&(t=new ResizeObserver(()=>o())),typeof MutationObserver<`u`&&(n=new MutationObserver(o)),o();let s=m.subscribeLayers(o);return window.addEventListener(`resize`,o),document.addEventListener(`transitionend`,o,!0),document.addEventListener(`animationend`,o,!0),()=>{s(),t?.disconnect(),n?.disconnect(),window.removeEventListener(`resize`,o),document.removeEventListener(`transitionend`,o,!0),document.removeEventListener(`animationend`,o,!0)}},[e,J]);let[Z]=b.useState(()=>k(e=>I(t=>C(t,e))));b.useEffect(()=>{let e=document,t=!1,n=()=>Z.setInBackground(t||e.visibilityState===`hidden`),r=e=>{e.target instanceof Node||(t=!0,n())},i=e=>{e.target instanceof Node||(t=!1,n())};return n(),Z.setSuspended(!1),window.addEventListener(`blur`,r),window.addEventListener(`focus`,i),e.addEventListener(`visibilitychange`,n),()=>{window.removeEventListener(`blur`,r),window.removeEventListener(`focus`,i),e.removeEventListener(`visibilitychange`,n),Z.setSuspended(!0)}},[Z]);let ce=b.useCallback((e,t)=>{W.current+=1;let n=W.current,r=a.isToastOptions(e)?{form:`options`,options:e}:{form:`content`,content:e,options:t??{}},i=r.options.toastId??`${U}-${n}`;return I(e=>{let t=e.findIndex(e=>e.id===i),a=t!==-1&&e[t].shown,o={...r,id:i,seq:n,shown:a,dismissed:!1};if(t===-1)return[...e,o];let s=e.slice();return s[t]=o,s}),i},[U]),Q=b.useCallback(e=>{Z.remove(e),I(t=>C(t,e))},[Z]),le=b.useCallback(()=>{Z.clear(),I(e=>ne(e))},[Z]),ue=b.useCallback(e=>{I(t=>t.some(t=>t.id===e&&t.dismissed)?t.filter(t=>!(t.id===e&&t.dismissed)):t),z(t=>{if(!t.has(e))return t;let n=new Map(t);return n.delete(e),n})},[]),de=b.useMemo(()=>({dispatchToast:ce,dismissToast:Q,dismissAllToasts:le}),[ce,Q,le]),[fe]=b.useState(()=>({}));b.useLayoutEffect(()=>{if(!f)return;let e=a.bindToasterHandle(f,fe,de);if(e.status===`bound`)return e.unbind;e.status===`taken`?n.warnOnce(`Toaster:handle-bound`,`Toaster: this handle is already bound to another Toaster; a handle binds one Toaster. Create one handle per Toaster.`):n.warnOnce(`Toaster:handle-unknown`,"Toaster: `toaster` is not a handle from createToaster(), so nothing is bound. Pass the value createToaster() returns.")},[f,fe,de]);let pe=b.useCallback(e=>{let t=G.current,n=t?Array.from(t.children).filter(e=>e instanceof HTMLElement&&e.hasAttribute(`data-wave-toast`)):[],r=!!e&&e.ownerDocument.activeElement===e,i=e?n.indexOf(e):-1,a=t=>t!==e&&t.isConnected&&t.getAttribute(`data-presence`)!==`exiting`,o=n.slice(i+1).find(a),s=i>0?n.slice(0,i).reverse().find(a):void 0;for(let e of[o,s]){if(!e)continue;let t=r?e:l.getFirstTabbable(e);if(t)return t}let c=q.current;return q.current=null,c?.isConnected?c:null},[]),$=o.useEventCallback(()=>{let e=G.current;if(!e)return;let t=e.ownerDocument;if(t.activeElement&&t.activeElement!==t.body)return;let n=Z.isPaused(`focus`);Z.setPaused(`focus`,!1);let r=q.current;q.current=null,n&&r&&l.isConnectedAndFocusable(r)&&r.focus({preventScroll:!0})});b.useLayoutEffect(()=>{$()},[V,$]),b.useLayoutEffect(()=>m.subscribeLayers(()=>queueMicrotask($)),[$]);let me=b.useRef(null);b.useEffect(()=>{let e=e=>{let t=me.current===e;if(me.current=null,t||!Z.isPaused(`hover`))return;let n=G.current;n&&e.target instanceof Node&&w(n,e.target)||Z.setPaused(`hover`,!1)};return document.addEventListener(`pointerover`,e),()=>document.removeEventListener(`pointerover`,e)},[Z]);let he=b.useRef(V);b.useLayoutEffect(()=>{he.current=V});let ge=b.useRef(new Map),_e=b.useCallback((e,t)=>{t?ge.current.set(e,t):ge.current.delete(e)},[]),ve=typeof d?.focus==`function`,ye=o.useEventCallback(e=>{if(e.defaultPrevented||e.isComposing||!d?.focus?.(e))return;let t=re(he.current),n=t?ge.current.get(t.id):void 0;if(!n?.isConnected)return;e.preventDefault();let r=G.current,i=n.ownerDocument.activeElement;i instanceof HTMLElement&&i!==n.ownerDocument.body&&!(r&&w(r,i))&&(q.current=i),n.focus({preventScroll:!1})});b.useEffect(()=>{if(!ve)return;let e=e=>ye(e);return document.addEventListener(`keydown`,e),()=>document.removeEventListener(`keydown`,e)},[ve,ye]);let be=e=>{let t=e.relatedTarget;t instanceof HTMLElement&&l.isConnectedAndFocusable(t)&&(w(e.currentTarget,t)||(q.current=t))},xe=e=>{let t=e.currentTarget,n=e.relatedTarget;if(!(n instanceof Node&&w(t,n))&&!e.target.closest(`[data-wave-toast][data-presence="exiting"]`)){if(n===null){let n=e.target;if(!n.isConnected)return;let r=n.ownerDocument.activeElement;if(r&&w(t,r))return}q.current=null}},Se=e=>{if(e.key!==`Escape`&&e.key!==`Esc`||e.defaultPrevented||e.nativeEvent.isComposing||!g.isOwnEvent(e))return;let t=e.currentTarget;if(m.getOpenLayers().some(e=>e.escape&&t.contains(e.getAnchor())))return;e.preventDefault();let n=q.current;q.current=null,n?.isConnected&&n.focus({preventScroll:!0}),le()},Ce=[],we=[];for(let e of H){if(e.dismissed)continue;let t=R.get(e.id);if(!t||t.seq!==e.seq||!t.text)continue;let n=(0,x.jsx)(L,{text:t.text},t.seq);(t.assertive?we:Ce).push(n)}let Te=Y.inline>0||Y.block>0?{..._,...Y.inline>0&&{"--wave-toaster-offset":`${Y.inline}px`},...Y.block>0&&{"--wave-toaster-offset-block":`${Y.block}px`}}:_;return(0,x.jsxs)(y.ToasterContext.Provider,{value:de,children:[v,(0,x.jsx)(h.Portal,{layer:`toast`,children:(0,x.jsxs)(`div`,{ref:K,role:`region`,"aria-label":`Notifications`,"data-wave-focus-trap-allow":``,"data-position":e,...M,style:Te,onFocus:e=>{te?.(e),be(e),Z.setPaused(`focus`,!0)},onBlur:e=>{ie?.(e),xe(e);let t=e.relatedTarget;t instanceof Node&&w(e.currentTarget,t)||Z.setPaused(`focus`,!1)},onPointerEnter:e=>{D?.(e),Z.setPaused(`hover`,!0)},onPointerLeave:e=>{O?.(e),Z.setPaused(`hover`,!1)},onPointerOver:e=>{ae?.(e),me.current=e.nativeEvent},onKeyDown:e=>r.composeEventHandlers(E,Se)(e),className:t.cn(i.toasterClassNames.root,`fixed flex w-80 max-w-[calc(100vw-2rem)] flex-col gap-2`,A[e],ee),children:[(0,x.jsx)(`div`,{role:`status`,"aria-live":`polite`,"aria-atomic":`false`,className:`sr-only`,children:Ce}),(0,x.jsx)(`div`,{"aria-live":`assertive`,"aria-atomic":`false`,className:`sr-only`,children:we}),H.map(e=>(0,x.jsx)(se,{entry:e,timers:Z,onDismiss:Q,onExited:ue,getFocusFallback:pe,announce:B,registerContainer:_e},e.id))]})})]})};X.displayName=`Toaster`,exports.Toaster=X,exports.useToastController=O;
+"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/dev.cjs"),r=require("../../lib/composeEventHandlers.cjs"),i=require("../../lib/classNames.cjs"),a=require("../../lib/toaster.cjs"),o=require("../../hooks/useEventCallback.cjs"),s=require("../../hooks/useId.cjs"),c=require("../../lib/direction.cjs"),l=require("../../lib/focus.cjs"),u=require("../../hooks/useMergedRefs.cjs"),d=require("../../lib/aria.cjs"),f=require("../../hooks/usePresence.cjs"),p=require("../../hooks/useDirection.cjs"),m=require("../../lib/layers.cjs"),ee=require("../../lib/styles.cjs"),te=require("../portal/Portal.cjs"),ne=require("../../lib/events.cjs"),re=require("../../hooks/usePreserveFocus.cjs"),ie=require("../../lib/motion.cjs"),h=require("../../hooks/useMotion.cjs"),g=require("./MessageBar.status.cjs"),_=require("./Toast.context.cjs"),ae=require("./Toast.root.cjs");let v=require("react");v=e.__toESM(v,1);let y=require("react/jsx-runtime");function b(e,t){let n=0,r=!1;for(let t of e)t.shown?t.dismissed||(n+=1):r=!0;return!r||n>=t?e:e.map(e=>e.shown||n>=t?e:(n+=1,{...e,shown:!0}))}function x(e,t){let n=e.findIndex(e=>e.id===t);if(n===-1)return e;let r=e[n];if(!r.shown)return[...e.slice(0,n),...e.slice(n+1)];if(r.dismissed)return e;let i=e.slice();return i[n]={...r,dismissed:!0},i}function oe(e){return e.every(e=>e.shown&&e.dismissed)?e:e.filter(e=>e.shown).map(e=>e.dismissed?e:{...e,dismissed:!0})}function se(e){let t;for(let n of e)n.shown&&!n.dismissed&&(!t||n.seq>t.seq)&&(t=n);return t}function S(e,t){return e.contains(t)?!0:m.getOpenLayers().some(n=>{let r=n.getAnchor();return r!==null&&e.contains(r)&&m.isInsideLayerTree(n.id,t)})}function ce(e,t){let n=t?.getDismissButton()??null;return l.getTabbableElements(e).some(e=>e!==n)}function C(e){return e===void 0?1/0:e>=1?Math.floor(e):1}var w={dispatchToast:(e,t)=>(a.isToastOptions(e)?e.toastId:t?.toastId)??``,dismissToast:()=>{},dismissAllToasts:()=>{}},T=`useToastController must be used within <Toaster>. Wrap your app (or the part of it that shows toasts) in <Toaster>: it provides the controller to its children.`;function E(){return v.useContext(_.ToasterContext)||(n.reportMissingContext(`useToastController`,`<Toaster>`,T),w)}var le=5e3;function D(e){let t=new Map,n=new Set,r=new Map,i=!1,a=!1,o=o=>{let s=t.get(o);if(!s)return;let c=!a&&!i&&n.size===0;c&&s.handle===null?(s.startedAt=Date.now(),s.handle=setTimeout(()=>{t.delete(o),r.delete(o),e(o)},s.remaining)):!c&&s.handle!==null&&(clearTimeout(s.handle),s.handle=null,s.remaining=Math.max(0,s.remaining-(Date.now()-s.startedAt)))},s=()=>{for(let e of Array.from(t.keys()))o(e)},c=e=>{let n=t.get(e);n?.handle!=null&&clearTimeout(n.handle),t.delete(e)};return{start(e,n,i){r.get(e)!==n&&(r.set(e,n),c(e),i>0&&Number.isFinite(i)&&(t.set(e,{handle:null,remaining:i,startedAt:0}),o(e)))},remove(e){c(e),r.delete(e)},clear(){for(let e of Array.from(t.keys()))c(e);r.clear()},isPaused(e){return n.has(e)},setPaused(e,t){t?n.add(e):n.delete(e),s()},setInBackground(e){i=e,s()},setSuspended(e){a=e,s()}}}var O={"top-start":`top-4 start-4 ms-(--wave-toaster-offset) mt-(--wave-toaster-offset-block)`,"top-end":`top-4 end-4 me-(--wave-toaster-offset) mt-(--wave-toaster-offset-block)`,"bottom-start":`bottom-4 start-4 ms-(--wave-toaster-offset) mb-(--wave-toaster-offset-block)`,"bottom-end":`bottom-4 end-4 me-(--wave-toaster-offset) mb-(--wave-toaster-offset-block)`,"top-right":`top-4 right-4 mr-(--wave-toaster-offset) mt-(--wave-toaster-offset-block)`,"top-left":`top-4 left-4 ml-(--wave-toaster-offset) mt-(--wave-toaster-offset-block)`,"bottom-right":`bottom-4 right-4 mr-(--wave-toaster-offset) mb-(--wave-toaster-offset-block)`,"bottom-left":`bottom-4 left-4 ml-(--wave-toaster-offset) mb-(--wave-toaster-offset-block)`},k=16;function A(e,t){let n=e.slice(e.indexOf(`-`)+1);if(n===`right`||n===`left`)return n===`right`;let r=c.getDirection(t)===`rtl`;return n===`end`?!r:r}var j={inline:0,block:0};function M(){return m.getOpenLayers().filter(e=>e.kind===`modal`||e.kind===`dialog`)}function ue(){let e=new Set;for(let t of M())for(let n of t.getElements())n?.isConnected&&e.add(n);return e}function N(e,t){let n=M();if(n.length===0)return j;let r=e.ownerDocument,i=r.defaultView;if(!i)return j;let a=r.documentElement.clientWidth||i.innerWidth,o=r.documentElement.clientHeight||i.innerHeight,s=A(t,e),c=t.startsWith(`top`),l=t=>a-t>=e.offsetWidth+32,u=t=>o-t>=e.offsetHeight+32,d=0,f=0;for(let e of n)for(let t of e.getElements()){if(!t?.isConnected)continue;let e=t.getBoundingClientRect();if(e.width<=0||e.height<=0)continue;let n=s?e.right>=a-k:e.left<=k,r=c?e.top<=k:e.bottom>=o-k;if(!n||!r)continue;let i=s?a-e.left:e.right,p=c?e.bottom:o-e.top;l(i)?d=Math.max(d,i):u(p)&&(f=Math.max(f,p))}return{inline:d>0&&l(d)?Math.ceil(d):0,block:f>0&&u(f)?Math.ceil(f):0}}var P=2e3;function F({text:e}){let[t,n]=v.useState(!0);return v.useEffect(()=>{let e=setTimeout(()=>n(!1),P);return()=>clearTimeout(e)},[]),t?(0,y.jsx)(`div`,{children:e}):null}F.displayName=`LiveMessage`;function I(e){return e.kind===`title`}function L(e){return e.kind===`body`}function R(e){return e.kind===`footer`}var z=new Set(`a.abbr.b.bdi.bdo.cite.code.data.dfn.em.i.kbd.label.mark.q.s.samp.small.span.strong.sub.sup.time.u.var.wbr`.split(`.`)),B=new Set([`noscript`,`script`,`style`,`template`]),V=new Set([`button`,`img`,`input`,`select`,`textarea`]),H=new Set([`button`,`checkbox`,`combobox`,`img`,`link`,`option`,`radio`,`slider`,`spinbutton`,`switch`,`tab`,`textbox`]);function U(e){let t=e.getAttribute(`role`)?.trim().split(/\s+/)[0];return t?H.has(t)||t.startsWith(`menuitem`):e.localName===`a`?e.hasAttribute(`href`):V.has(e.localName)}function W(e){return e.getAttribute(`aria-hidden`)===`true`||e.hasAttribute(`hidden`)||B.has(e.localName)}function G(e,t){if(!e)return``;let n=[],r=(e,i)=>{if(e.nodeType===Node.TEXT_NODE){n.push(e.textContent??``);return}if(e.nodeType!==Node.ELEMENT_NODE)return;let a=e;if(!i&&t?.(a)||W(a))return;let o=a.getAttribute(`aria-label`);if(o&&U(a)){n.push(` ${o} `);return}if(a.localName===`img`){n.push(` ${a.getAttribute(`alt`)??``} `);return}let s=!z.has(a.localName);s&&n.push(` `);for(let e of Array.from(a.childNodes))r(e,!1);s&&n.push(` `)};return r(e,!0),n.join(``).replace(/\s+/g,` `).trim()}function K(e){return!e||W(e)?[]:Array.from(e.childNodes,e=>e.nodeType===Node.TEXT_NODE?(e.textContent??``).replace(/\s+/g,` `).trim():e.nodeType===Node.ELEMENT_NODE?G(e):``).filter(Boolean)}function de(e,t,n,r){let i=t.find(I),a=t.find(L);if(!i&&!a){let t=n?.getDismissButton()??null;return G(e,e=>e===t||e.id!==``&&(e.id===r||e.id===n?.statusTextId))}let o=i?.getLabel()??null,s=i?.getRow()??null,c=s?Array.from(s.children).filter(e=>e!==o).flatMap(e=>K(e)):[];return[G(o),G(a?.getElement()??null),...c,...t.filter(R).flatMap(e=>K(e.getElement()))].filter(Boolean).join(` `)}function fe({entry:e,timers:r,onDismiss:a,onExited:c,getFocusFallback:l,announce:p,registerContainer:m,motionClassName:te}){let{id:h,dismissed:b}=e,{isMounted:x,ref:oe,presenceProps:se}=f.usePresence(!b,{appear:!0,onExited:()=>c(h)}),S=v.useRef(null),C=v.useRef(null),w=v.useCallback(e=>{S.current=e,e&&(C.current=e),m(h,e)},[h,m]),T=u.useMergedRefs(w,oe);re.usePreserveFocus(S,()=>l(C.current),{enabled:!b});let E=s.useId(`wave-toast-title`),D=s.useId(`wave-toast-status`),[O,k]=v.useState([]),A=v.useRef([]),j=v.useCallback(e=>(A.current=[...A.current,e],k(A.current),()=>{A.current=A.current.filter(t=>t!==e),k(A.current)}),[]),[M,ue]=v.useState(null),N=v.useRef(null),P=v.useCallback(e=>(N.current=e,ue(e),()=>{N.current===e&&(N.current=null,ue(null))}),[]),F=o.useEventCallback(()=>{N.current?.onDismiss?.(),a(h)}),R=v.useMemo(()=>({titleId:E,dismiss:F,registerPart:j,registerToast:P}),[E,F,j,P]),z=O.find(I),B=O.find(L),V=e.form===`content`&&M===null?g.getStatusLabel(e.options.status??`info`,e.options.statusLabel):``,H=M?M.statusTextId:V?D:void 0;v.useLayoutEffect(()=>{let t=S.current;if(e.dismissed||!t)return;let n=e.options.timeout??(ce(t,N.current)?0:le);r.start(e.id,e.seq,n)},[e,r]),v.useLayoutEffect(()=>{let t=S.current;if(e.dismissed||!t)return;let n=N.current,r=n?.status??e.options.status??`info`,i=n?n.statusLabel:g.getStatusLabel(r,e.options.statusLabel),a=e.form===`content`&&e.options.announcement!==void 0?e.options.announcement:de(t,A.current,n,D);p(e.id,{seq:e.seq,text:[i,a].filter(Boolean).join(` `),assertive:r===`error`})},[e,p,D,M]);let U=e.form===`content`?e.options.status:void 0;v.useEffect(()=>{let e=N.current?.status;U!==void 0&&e!==void 0&&U!==e&&n.warnOnce(`Toaster:status-conflict`,`Toaster: the dispatched Toast has status "${e}" but the dispatch options pass "${U}"; the Toast's status is used. Remove \`status\` from the options.`)},[e,U,M]);let W=e=>{(e.key===`Delete`||e.key===`Backspace`)&&(e.defaultPrevented||!ne.isOwnEvent(e)||ne.isEditableTarget(e.target)||(e.preventDefault(),a(h)))};return x?(0,y.jsx)(`div`,{ref:T,role:`group`,tabIndex:-1,"data-wave-toast":``,"aria-labelledby":d.joinIds(H,z?.id),"aria-describedby":B?.id,className:t.cn(i.toasterClassNames.toast,`rounded`,ee.focusRing,ie.toastStructure,te),...se,onKeyDown:W,children:(0,y.jsxs)(`div`,{className:i.toasterClassNames.toastContent,children:[V?(0,y.jsx)(g.StatusText,{label:V,id:D}):null,(0,y.jsx)(_.ToastContext.Provider,{value:R,children:e.form===`options`?(0,y.jsx)(ae.ToastRoot,{status:e.options.status,statusLabel:e.options.statusLabel,title:e.options.title,dismissLabel:e.options.dismissLabel,children:e.options.body}):e.content})]})}):null}fe.displayName=`ToastContainer`;var q=({position:e=`bottom-end`,limit:c,shortcuts:d,toaster:f,motion:ee,className:re,style:g,children:ae,onFocus:ce,onBlur:w,onKeyDown:T,onPointerEnter:E,onPointerLeave:le,onPointerOver:k,ref:A,...M})=>{let[P,I]=v.useState([]),[L,R]=v.useState(()=>new Map),z=v.useCallback((e,t)=>{R(n=>{let r=n.get(e);if(r&&r.seq===t.seq&&r.text===t.text&&r.assertive===t.assertive)return n;let i=new Map(n);return i.set(e,t),i})},[]),B=C(c),V=h.useMotionClasses(ee,ie.toastMotion[e.startsWith(`top`)?`top`:`bottom`]),H=b(P,B);H!==P&&I(H);let U=H.filter(e=>e.shown);v.useEffect(()=>{c!==void 0&&!(c>=1)&&n.warnOnce(`Toaster:limit`,`Toaster: \`limit\` must be 1 or more (got ${String(c)}); it counts as 1.`)},[c]);let W=s.useId(`toast`),G=v.useRef(0),K=v.useRef(null),de=u.useMergedRefs(A,K),q=v.useRef(null),pe=p.useDirection(),[J,me]=v.useState(j);v.useLayoutEffect(()=>{let t=null,n=null,r=null,i=new Set,a=()=>{let e=ue();for(let n of i)e.has(n)||t?.unobserve(n);for(let n of e)i.has(n)||t?.observe(n);let r=e.size!==i.size||[...e].some(e=>!i.has(e));if(i=e,r&&n){n.disconnect();for(let t of e)n.observe(t,{attributes:!0,attributeFilter:[`class`,`style`]})}},o=()=>{let n=K.current;t&&n!==r&&(r&&t.unobserve(r),n&&t.observe(n),r=n),a();let i=n?N(n,e):j;me(e=>e.inline===i.inline&&e.block===i.block?e:i)};typeof ResizeObserver<`u`&&(t=new ResizeObserver(()=>o())),typeof MutationObserver<`u`&&(n=new MutationObserver(o)),o();let s=m.subscribeLayers(o);return window.addEventListener(`resize`,o),document.addEventListener(`transitionend`,o,!0),document.addEventListener(`animationend`,o,!0),()=>{s(),t?.disconnect(),n?.disconnect(),window.removeEventListener(`resize`,o),document.removeEventListener(`transitionend`,o,!0),document.removeEventListener(`animationend`,o,!0)}},[e,pe]);let[Y]=v.useState(()=>D(e=>I(t=>x(t,e))));v.useEffect(()=>{let e=document,t=!1,n=()=>Y.setInBackground(t||e.visibilityState===`hidden`),r=e=>{e.target instanceof Node||(t=!0,n())},i=e=>{e.target instanceof Node||(t=!1,n())};return n(),Y.setSuspended(!1),window.addEventListener(`blur`,r),window.addEventListener(`focus`,i),e.addEventListener(`visibilitychange`,n),()=>{window.removeEventListener(`blur`,r),window.removeEventListener(`focus`,i),e.removeEventListener(`visibilitychange`,n),Y.setSuspended(!0)}},[Y]);let he=v.useCallback((e,t)=>{G.current+=1;let n=G.current,r=a.isToastOptions(e)?{form:`options`,options:e}:{form:`content`,content:e,options:t??{}},i=r.options.toastId??`${W}-${n}`;return I(e=>{let t=e.findIndex(e=>e.id===i),a=t!==-1&&e[t].shown,o={...r,id:i,seq:n,shown:a,dismissed:!1};if(t===-1)return[...e,o];let s=e.slice();return s[t]=o,s}),i},[W]),X=v.useCallback(e=>{Y.remove(e),I(t=>x(t,e))},[Y]),Z=v.useCallback(()=>{Y.clear(),I(e=>oe(e))},[Y]),ge=v.useCallback(e=>{I(t=>t.some(t=>t.id===e&&t.dismissed)?t.filter(t=>!(t.id===e&&t.dismissed)):t),R(t=>{if(!t.has(e))return t;let n=new Map(t);return n.delete(e),n})},[]),_e=v.useMemo(()=>({dispatchToast:he,dismissToast:X,dismissAllToasts:Z}),[he,X,Z]),[ve]=v.useState(()=>({}));v.useLayoutEffect(()=>{if(!f)return;let e=a.bindToasterHandle(f,ve,_e);if(e.status===`bound`)return e.unbind;e.status===`taken`?n.warnOnce(`Toaster:handle-bound`,`Toaster: this handle is already bound to another Toaster; a handle binds one Toaster. Create one handle per Toaster.`):n.warnOnce(`Toaster:handle-unknown`,"Toaster: `toaster` is not a handle from createToaster(), so nothing is bound. Pass the value createToaster() returns.")},[f,ve,_e]);let ye=v.useCallback(e=>{let t=K.current,n=t?Array.from(t.children).filter(e=>e instanceof HTMLElement&&e.hasAttribute(`data-wave-toast`)):[],r=!!e&&e.ownerDocument.activeElement===e,i=e?n.indexOf(e):-1,a=t=>t!==e&&t.isConnected&&t.getAttribute(`data-presence`)!==`exiting`,o=n.slice(i+1).find(a),s=i>0?n.slice(0,i).reverse().find(a):void 0;for(let e of[o,s]){if(!e)continue;let t=r?e:l.getFirstTabbable(e);if(t)return t}let c=q.current;return q.current=null,c?.isConnected?c:null},[]),Q=o.useEventCallback(()=>{let e=K.current;if(!e)return;let t=e.ownerDocument;if(t.activeElement&&t.activeElement!==t.body)return;let n=Y.isPaused(`focus`);Y.setPaused(`focus`,!1);let r=q.current;q.current=null,n&&r&&l.isConnectedAndFocusable(r)&&r.focus({preventScroll:!0})});v.useLayoutEffect(()=>{Q()},[H,Q]),v.useLayoutEffect(()=>m.subscribeLayers(()=>queueMicrotask(Q)),[Q]);let be=v.useRef(null);v.useEffect(()=>{let e=e=>{let t=be.current===e;if(be.current=null,t||!Y.isPaused(`hover`))return;let n=K.current;n&&e.target instanceof Node&&S(n,e.target)||Y.setPaused(`hover`,!1)};return document.addEventListener(`pointerover`,e),()=>document.removeEventListener(`pointerover`,e)},[Y]);let xe=v.useRef(H);v.useLayoutEffect(()=>{xe.current=H});let $=v.useRef(new Map),Se=v.useCallback((e,t)=>{t?$.current.set(e,t):$.current.delete(e)},[]),Ce=typeof d?.focus==`function`,we=o.useEventCallback(e=>{if(e.defaultPrevented||e.isComposing||!d?.focus?.(e))return;let t=se(xe.current),n=t?$.current.get(t.id):void 0;if(!n?.isConnected)return;e.preventDefault();let r=K.current,i=n.ownerDocument.activeElement;i instanceof HTMLElement&&i!==n.ownerDocument.body&&!(r&&S(r,i))&&(q.current=i),n.focus({preventScroll:!1})});v.useEffect(()=>{if(!Ce)return;let e=e=>we(e);return document.addEventListener(`keydown`,e),()=>document.removeEventListener(`keydown`,e)},[Ce,we]);let Te=e=>{let t=e.relatedTarget;t instanceof HTMLElement&&l.isConnectedAndFocusable(t)&&(S(e.currentTarget,t)||(q.current=t))},Ee=e=>{let t=e.currentTarget,n=e.relatedTarget;if(!(n instanceof Node&&S(t,n))&&!e.target.closest(`[data-wave-toast][data-presence="exiting"]`)){if(n===null){let n=e.target;if(!n.isConnected)return;let r=n.ownerDocument.activeElement;if(r&&S(t,r))return}q.current=null}},De=e=>{if(e.key!==`Escape`&&e.key!==`Esc`||e.defaultPrevented||e.nativeEvent.isComposing||!ne.isOwnEvent(e))return;let t=e.currentTarget;if(m.getOpenLayers().some(e=>e.escape&&t.contains(e.getAnchor())))return;e.preventDefault();let n=q.current;q.current=null,n?.isConnected&&n.focus({preventScroll:!0}),Z()},Oe=[],ke=[];for(let e of U){if(e.dismissed)continue;let t=L.get(e.id);if(!t||t.seq!==e.seq||!t.text)continue;let n=(0,y.jsx)(F,{text:t.text},t.seq);(t.assertive?ke:Oe).push(n)}let Ae=J.inline>0||J.block>0?{...g,...J.inline>0&&{"--wave-toaster-offset":`${J.inline}px`},...J.block>0&&{"--wave-toaster-offset-block":`${J.block}px`}}:g;return(0,y.jsxs)(_.ToasterContext.Provider,{value:_e,children:[ae,(0,y.jsx)(te.Portal,{layer:`toast`,children:(0,y.jsxs)(`div`,{ref:de,role:`region`,"aria-label":`Notifications`,"data-wave-focus-trap-allow":``,"data-position":e,...M,style:Ae,onFocus:e=>{ce?.(e),Te(e),Y.setPaused(`focus`,!0)},onBlur:e=>{w?.(e),Ee(e);let t=e.relatedTarget;t instanceof Node&&S(e.currentTarget,t)||Y.setPaused(`focus`,!1)},onPointerEnter:e=>{E?.(e),Y.setPaused(`hover`,!0)},onPointerLeave:e=>{le?.(e),Y.setPaused(`hover`,!1)},onPointerOver:e=>{k?.(e),be.current=e.nativeEvent},onKeyDown:e=>r.composeEventHandlers(T,De)(e),className:t.cn(i.toasterClassNames.root,`fixed flex w-80 max-w-[calc(100vw-2rem)] flex-col gap-2`,O[e],re),children:[(0,y.jsx)(`div`,{role:`status`,"aria-live":`polite`,"aria-atomic":`false`,className:`sr-only`,children:Oe}),(0,y.jsx)(`div`,{"aria-live":`assertive`,"aria-atomic":`false`,className:`sr-only`,children:ke}),U.map(e=>(0,y.jsx)(fe,{entry:e,timers:Y,onDismiss:X,onExited:ge,getFocusFallback:ye,announce:z,registerContainer:Se,motionClassName:V},e.id))]})})]})};q.displayName=`Toaster`,exports.Toaster=q,exports.useToastController=E;
 //# sourceMappingURL=Toaster.cjs.map