@mortenbrudvik/waveui 0.4.0 → 0.7.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"MessageBar.cjs","names":["DismissIcon","Button","isElementOfType","BUTTON_OWN_PROP_KEYS","materialiseSlotContent","slotRendersContent","renderSlot","placeButtonIcon","hasTextLabel","resolveSlot","cn","slotWrapsDefaultContent","React","STATUS_ICON_COLOR","StatusIcon","observeTextLabel","hasRenderedTextLabel","useMergedRefs","mergeProps","focusRing","mergedAriaDisabledClasses","MERGED_DISABLED_FOCUSABLE_PROPS","STATUS_BORDER","StatusText","getStatusLabel","require_runtime","require_cn","require_children","require_dev","require_slot","require_useMergedRefs","require_styles","require_Button","require_icons","require_mergeProps","require_Button_slots","require_labelInName","require_MessageBar_status","react","react_jsx_runtime","tintClasses","DEFAULT_DISMISS_LABEL","BUTTON_ONLY_KEYS","NAMING_KEYS","HANDLER_KEY","dismissContentClassName","noop","defaultDismissContent","isButtonType","type","defaultDismiss","resolveDismiss","dismiss","element","buttonProps","key","value","isWaveButton","markup","children","icon","iconNode","resolved","asButton","Component","isButtonObject","props","contentProps","ContentTag","elementProps","inner","MessageBar","rest","iconClassName","status","renderedIcon","dismissParts","onDismiss","dismissWarning","slotRef","slotButtonProps","hasOwnName","checksContent","literalTextLabel","labelTarget","setLabelTarget","subscribeToContent","onChange","contentHasTextLabel","namedByContent","dismissRef","renderedDismiss","className","statusLabel"],"sources":["../../../src/components/feedback/MessageBar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { isElementOfType } from '../../lib/children';\nimport { cn } from '../../lib/cn';\nimport { warnOnce } from '../../lib/dev';\nimport { DismissIcon } from '../../lib/icons';\nimport { hasRenderedTextLabel, hasTextLabel, observeTextLabel } from '../../lib/labelInName';\nimport { mergeProps } from '../../lib/mergeProps';\nimport {\n  materialiseSlotContent,\n  renderSlot,\n  resolveSlot,\n  slotRendersContent,\n  slotWrapsDefaultContent,\n} from '../../lib/slot';\nimport { focusRing } from '../../lib/styles';\nimport type { Status, Slot, SlotObject } from '../../lib/types';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport { Button } from '../button/Button';\nimport {\n  BUTTON_OWN_PROP_KEYS,\n  MERGED_DISABLED_FOCUSABLE_PROPS,\n  mergedAriaDisabledClasses,\n  placeButtonIcon,\n} from '../button/Button.slots';\nimport {\n  STATUS_BORDER,\n  STATUS_ICON_COLOR,\n  StatusIcon,\n  StatusText,\n  getStatusLabel,\n} from './MessageBar.status';\n\n/** Properties for the MessageBar component. */\nexport interface MessageBarProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Status level controlling the color, icon, status text and role of the message bar.\n   * `warning` and `error` render `role=\"alert\"`, `info` and `success` `role=\"status\"` (a consumer\n   * `role` wins).\n   * @default 'info'\n   */\n  status?: Status;\n  /**\n   * Visually hidden text read before the message so screen-reader users hear the severity\n   * (`'Info:'`, `'Success:'`, `'Warning:'`, `'Error:'` by default). Pass a translation for other\n   * languages, or `''` when the message text already states the severity.\n   */\n  statusLabel?: string;\n  /**\n   * Called when the dismiss button is activated. Passing it renders the dismiss button (unless\n   * `dismiss` is `null`).\n   */\n  onDismiss?: () => void;\n  /**\n   * Custom status icon, rendered decoratively (`aria-hidden=\"true\"`, a slot object can override\n   * it) in the status color. `null` renders no icon.\n   */\n  icon?: Slot<'span'>;\n  /**\n   * Content of the dismiss button (replaces the default dismiss icon). It always renders **inside**\n   * the built-in `<button type=\"button\" aria-label=\"Dismiss\">`, which calls `onDismiss`; passing\n   * content shows the dismiss button even without `onDismiss`. `null` is the only value that hides\n   * the button. A boolean counts as no slot, so the conditional idiom\n   * `dismiss={useBrandIcon && <BrandCloseIcon />}` keeps the default button: the default icon with\n   * `onDismiss`, no button without it. Content that renders nothing (`''`, or an array or Fragment\n   * of only `null`, `false`, `true` and `''`, also as the children of a slot object or a merged\n   * button) keeps the default icon, so the button is never empty; a slot object that renders a\n   * component or a void element (`{ as: CloseIcon }`, `{ as: 'img', src, alt: '' }`) or sets\n   * `dangerouslySetInnerHTML` is the icon itself. The content is\n   * decorative (`aria-hidden`), so the button keeps the name \"Dismiss\": when the content is\n   * visible text, pass a slot object whose `aria-label` matches it\n   * (`{ children: 'Close', 'aria-label': 'Close' }`) so the name contains the visible label. An\n   * `aria-label`, `aria-labelledby` or `title` on a slot object names the button instead of\n   * \"Dismiss\".\n   *\n   * A `<button>` element or a Wave `Button` passed here is not nested: its props are merged into\n   * the built-in button (its `onClick` runs first and can call `preventDefault()` to cancel\n   * `onDismiss`; its `aria-label` and an explicit `type` win over the defaults) and its content\n   * (children, or `dangerouslySetInnerHTML` markup) is used as is, with a development warning.\n   * A Wave `Button`'s own props are not attributes: its `icon` becomes decorative content before\n   * its children (after them with `iconPosition=\"after\"`), `disabledFocusable` makes the dismiss\n   * button unavailable but focusable as on the Button (`onDismiss` is not called), and\n   * `appearance` and `size` are ignored.\n   * When the rendered content has a text label (at least two letters or digits:\n   * `<button>Close</button>`, or text rendered by a component such as a translation), that text\n   * names the button, as in 0.4. An icon, a lone character (`X`, `×`,\n   * `+`: a symbol, not a label) and text that is `aria-hidden` or `hidden` keep the name\n   * \"Dismiss\". Text hidden only with CSS still counts as the label: a responsive label such as\n   * `<span className=\"hidden sm:inline\">Close</span>` drops the default name, so the button has\n   * no name wherever that text is not displayed. Give such a button an explicit `aria-label`\n   * (`<button aria-label=\"Close\">…</button>`). An `aria-label`, `aria-labelledby` or `title` on\n   * the element names the button.\n   *\n   * The 0.4 button-object form (`{ as: 'button', onClick, … }`, `{ as: Button, … }` or an object\n   * with button props) is **deprecated**: its button props (`type` included), `className` and\n   * `style` are merged the same way, and a Wave Button's own props apply as for the element form.\n   * Pass icon content instead, e.g. `dismiss={<CloseIcon />}`.\n   */\n  dismiss?: Slot<'span'> | SlotObject<'button'>;\n  /** Message content to display. */\n  children: React.ReactNode;\n  /** Ref to the root `<div>`. */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\nconst tintClasses: Record<Status, string> = {\n  info: 'bg-info-tint',\n  success: 'bg-success-tint',\n  warning: 'bg-warning-tint',\n  error: 'bg-error-tint',\n};\n\ntype UnknownProps = Record<string, unknown>;\n\n/** Name of the dismiss button when nothing else names it. */\nconst DEFAULT_DISMISS_LABEL = 'Dismiss';\n\n/** Attributes that only make sense on the dismiss `<button>` itself. */\nconst BUTTON_ONLY_KEYS: ReadonlySet<string> = new Set([\n  'type',\n  'disabled',\n  'autoFocus',\n  'form',\n  'formAction',\n  'formEncType',\n  'formMethod',\n  'formNoValidate',\n  'formTarget',\n  'name',\n  'value',\n  'popoverTarget',\n  'popoverTargetAction',\n]);\n\n/**\n * Attributes that name the dismiss button. On a slot object they go to the button (its content is\n * decorative); on the merged button, any of them replaces the default `aria-label`.\n */\nconst NAMING_KEYS: ReadonlySet<string> = new Set(['aria-label', 'aria-labelledby', 'title']);\n\nconst HANDLER_KEY = /^on[A-Z]/;\n\nconst dismissContentClassName = 'inline-flex items-center justify-center';\n\ninterface DismissParts {\n  /** Props merged onto the wired dismiss button. */\n  buttonProps: UnknownProps;\n  /** What renders inside the dismiss button. */\n  content: React.ReactNode;\n  /**\n   * `true` when the content is rendered as is (a merged `<button>`/`Button`), so a text label in it\n   * names the button (C-SLOTS naming, WCAG 2.5.3 Label in Name); `false` when the content is\n   * decorative (`aria-hidden`).\n   */\n  contentMayName: boolean;\n  /**\n   * Whether the content's literal children contain a text label. Used for the server render and\n   * the first client render; after mount, the rendered button's text decides (see\n   * {@link hasRenderedTextLabel}).\n   */\n  literalTextLabel: boolean;\n  /**\n   * Whether a merged Wave `Button` set `disabledFocusable`: the dismiss button is then unavailable\n   * but focusable, as the Button would be.\n   */\n  disabledFocusable: boolean;\n  /** Which development warning the slot needs. */\n  warning: 'button-element' | 'button-object' | null;\n}\n\nconst noop = () => {};\n\n/** The decorative default dismiss glyph. */\nfunction defaultDismissContent(): React.ReactNode {\n  return <DismissIcon />;\n}\n\nfunction isButtonType(type: unknown): boolean {\n  return type === 'button' || type === Button;\n}\n\n/** The dismiss button without a slot: the default icon and name. */\nfunction defaultDismiss(): DismissParts {\n  return {\n    buttonProps: {},\n    content: defaultDismissContent(),\n    contentMayName: false,\n    literalTextLabel: false,\n    disabledFocusable: false,\n    warning: null,\n  };\n}\n\n/**\n * Splits the `dismiss` slot into props for the wired dismiss button and the content rendered\n * inside it (C-SLOTS dismiss semantics). `null` means: no dismiss button. A boolean is no slot\n * (the default dismiss button), and content that renders nothing keeps the default icon.\n */\nfunction resolveDismiss(dismiss: MessageBarProps['dismiss']): DismissParts | null {\n  if (dismiss === null) return null;\n  if (dismiss === undefined || typeof dismiss === 'boolean') return defaultDismiss();\n\n  // A merged `<button>`/`Button` keeps its content accessible (as in 0.4): a text label names the\n  // button, anything else (an icon, a lone character such as `X` or `×`) gets the default name.\n  // The type is compared through `isElementOfType`, so a Button written in a Server Component\n  // (a lazy client reference) is merged too.\n  const element = dismiss as React.ReactNode;\n  if (isElementOfType<UnknownProps>(element, 'button', Button)) {\n    const buttonProps: UnknownProps = {};\n    for (const [key, value] of Object.entries(element.props)) {\n      if (\n        key !== 'children' &&\n        key !== 'dangerouslySetInnerHTML' &&\n        !BUTTON_OWN_PROP_KEYS.has(key)\n      ) {\n        buttonProps[key] = value;\n      }\n    }\n    const isWaveButton = isElementOfType(element, Button);\n    // A generator is read once by the check; its items are what renders (and names the button).\n    // Markup of the merged button (`dangerouslySetInnerHTML`) is its content as well, rendered in\n    // a span inside the dismiss button (the button itself also holds the icon).\n    const markup = element.props.dangerouslySetInnerHTML as\n      React.HTMLAttributes<HTMLElement>['dangerouslySetInnerHTML'] | undefined;\n    const children =\n      markup != null ? (\n        <span className={dismissContentClassName} dangerouslySetInnerHTML={markup} />\n      ) : (\n        materialiseSlotContent(element.props.children)\n      );\n    // Wave Button's icon becomes decorative content before its children (after them with\n    // `iconPosition=\"after\"`).\n    const icon = element.props.icon as Slot<'span'>;\n    const iconNode =\n      isWaveButton && slotRendersContent(icon)\n        ? renderSlot(icon, 'span', dismissContentClassName, { 'aria-hidden': true })\n        : null;\n    const content =\n      iconNode || slotRendersContent(children)\n        ? placeButtonIcon(iconNode, children, element.props.iconPosition)\n        : defaultDismissContent();\n    return {\n      buttonProps,\n      content,\n      contentMayName: true,\n      literalTextLabel: hasTextLabel(children),\n      disabledFocusable: isWaveButton && Boolean(element.props.disabledFocusable),\n      warning: 'button-element',\n    };\n  }\n\n  // Everything else is classified by the slot system (F2): shorthand content resolves to the\n  // default `span` with no attributes; a slot object resolves to its element and attributes.\n  const resolved = resolveSlot(dismiss as Slot<'span'>, 'span');\n  if (!resolved) return defaultDismiss();\n  const { Component, props, children } = resolved;\n  const asButton = isButtonType(Component);\n  const isButtonObject =\n    asButton ||\n    Object.keys(props).some((key) => BUTTON_ONLY_KEYS.has(key) || HANDLER_KEY.test(key));\n  const buttonProps: UnknownProps = {};\n  const contentProps: UnknownProps = {};\n  let iconNode: React.ReactNode = null;\n  for (const [key, value] of Object.entries(props)) {\n    if (Component === Button && BUTTON_OWN_PROP_KEYS.has(key)) {\n      // Wave Button's own props are not attributes: `icon`, `iconPosition` and\n      // `disabledFocusable` are applied below, the others (`appearance`, `size`) are dropped.\n      if (key === 'icon' && slotRendersContent(value)) {\n        iconNode = renderSlot(value as Slot<'span'>, 'span', dismissContentClassName, {\n          'aria-hidden': true,\n        });\n      }\n    } else if (\n      BUTTON_ONLY_KEYS.has(key) ||\n      HANDLER_KEY.test(key) ||\n      NAMING_KEYS.has(key) ||\n      // 0.4 rendered the object as the button itself: its className, style and ref stay there.\n      (isButtonObject && (key === 'className' || key === 'style' || key === 'ref'))\n    ) {\n      buttonProps[key] = value;\n    } else {\n      contentProps[key] = value;\n    }\n  }\n\n  // The content element: the object's own element, or a span for the button-object form. An\n  // object whose children render nothing styles the default icon\n  // (e.g. `{ className: 'text-error' }`), unless its element is the icon itself.\n  const ContentTag: React.ElementType = asButton ? 'span' : Component;\n  const elementProps = {\n    'aria-hidden': true,\n    ...contentProps,\n    className: cn(dismissContentClassName, contentProps.className as string | undefined),\n  };\n  let inner: React.ReactNode = null;\n  if (iconNode || slotRendersContent(children)) {\n    inner = placeButtonIcon(iconNode, children, Component === Button && props.iconPosition);\n  } else if (slotWrapsDefaultContent(ContentTag, { ...contentProps, children })) {\n    inner = defaultDismissContent();\n  }\n  return {\n    buttonProps,\n    content:\n      inner === null\n        ? React.createElement(ContentTag, elementProps)\n        : React.createElement(ContentTag, elementProps, inner),\n    contentMayName: false,\n    literalTextLabel: false,\n    disabledFocusable: Component === Button && Boolean(props.disabledFocusable),\n    warning: isButtonObject ? 'button-object' : null,\n  };\n}\n\n/**\n * An inline message that tells the user about the state of a page or task: a status icon, a\n * visually hidden status label (\"Warning:\"), the message and an optional dismiss button.\n *\n * - The status sets the tint, the logical start border, the icon and the role (`alert` for\n *   `warning`/`error`, `status` otherwise). Screen readers hear the severity through `statusLabel`.\n * - The dismiss button is always the MessageBar's own `<button>` wired to `onDismiss`\n *   (`type=\"button\"` unless a merged button slot sets its own `type`); the `dismiss` slot only\n *   replaces its content (see {@link MessageBarProps.dismiss}).\n *\n * @example\n * <MessageBar status=\"warning\" onDismiss={() => setVisible(false)}>\n *   Your subscription expires in 3 days.\n * </MessageBar>\n */\nexport const MessageBar = ({\n  status = 'info',\n  statusLabel,\n  onDismiss,\n  icon,\n  dismiss,\n  children,\n  className,\n  ref,\n  ...rest\n}: MessageBarProps) => {\n  const iconClassName = cn('mt-0.5 inline-flex shrink-0', STATUS_ICON_COLOR[status]);\n  const renderedIcon =\n    icon !== undefined ? (\n      renderSlot(icon, 'span', iconClassName, { 'aria-hidden': true })\n    ) : (\n      <span aria-hidden=\"true\" className={iconClassName}>\n        <StatusIcon status={status} size={20} />\n      </span>\n    );\n\n  // A boolean `dismiss` is no slot (`dismiss={cond && <CloseIcon />}`): only `onDismiss` shows it.\n  const showDismiss =\n    onDismiss !== undefined || (dismiss !== undefined && typeof dismiss !== 'boolean');\n  const dismissParts = showDismiss ? resolveDismiss(dismiss) : null;\n  const dismissWarning = dismissParts?.warning ?? null;\n  React.useEffect(() => {\n    if (dismissWarning === 'button-element') {\n      warnOnce(\n        'MessageBar:dismiss-button-element',\n        'MessageBar: `dismiss` received a button element; its props were merged into the built-in dismiss button (buttons cannot be nested). Pass icon content instead, e.g. `dismiss={<CloseIcon />}`, and use `onDismiss`.',\n      );\n    } else if (dismissWarning === 'button-object') {\n      warnOnce(\n        'MessageBar:dismiss-button-object',\n        'MessageBar: the button-object form of `dismiss` is deprecated and will be removed in 1.0; its button props were merged into the built-in dismiss button. Pass icon content instead, e.g. `dismiss={<CloseIcon />}`, and use `onDismiss`.',\n      );\n    }\n  }, [dismissWarning]);\n\n  // The slot's ref joins ours through a stable merged ref (never a new callback per render).\n  const { ref: slotRef, ...slotButtonProps } = dismissParts?.buttonProps ?? {};\n  const hasOwnName = Object.keys(slotButtonProps).some(\n    (key) => NAMING_KEYS.has(key) && slotButtonProps[key] != null,\n  );\n\n  // C-SLOTS naming (WCAG 2.5.3 Label in Name): a merged button's content names it when it renders\n  // a text label (at least two letters or digits; a lone `X` or `×` is a glyph), and the default\n  // `aria-label` would hide that label. The literal children decide on the server and on the first\n  // render; after mount, the rendered button's text does (text from components, e.g. translations,\n  // and later changes).\n  const checksContent = dismissParts !== null && dismissParts.contentMayName && !hasOwnName;\n  const literalTextLabel = dismissParts?.literalTextLabel ?? false;\n  const [labelTarget, setLabelTarget] = React.useState<HTMLButtonElement | null>(null);\n  const subscribeToContent = React.useCallback(\n    (onChange: () => void) => (labelTarget ? observeTextLabel(labelTarget, onChange) : noop),\n    [labelTarget],\n  );\n  const contentHasTextLabel = React.useSyncExternalStore(\n    subscribeToContent,\n    () => (labelTarget ? hasRenderedTextLabel(labelTarget) : literalTextLabel),\n    () => literalTextLabel,\n  );\n  const namedByContent = checksContent && contentHasTextLabel;\n  const dismissRef = useMergedRefs<HTMLButtonElement>(\n    slotRef as React.Ref<HTMLButtonElement> | undefined,\n    checksContent ? setLabelTarget : undefined,\n  );\n\n  let renderedDismiss: React.ReactNode = null;\n  if (dismissParts) {\n    const buttonProps = mergeProps(\n      {\n        'aria-label': hasOwnName || namedByContent ? undefined : DEFAULT_DISMISS_LABEL,\n        onClick: () => onDismiss?.(),\n        className: cn(\n          'ms-auto inline-flex shrink-0 cursor-pointer items-center justify-center rounded border-none bg-transparent p-1 text-muted-foreground',\n          'not-disabled:not-aria-disabled:hover:bg-subtle-hover not-disabled:not-aria-disabled:hover:text-foreground',\n          'not-disabled:not-aria-disabled:active:bg-subtle-pressed',\n          focusRing,\n          'disabled:cursor-not-allowed disabled:opacity-50',\n          mergedAriaDisabledClasses,\n        ),\n      },\n      slotButtonProps,\n    ) as React.ComponentPropsWithoutRef<'button'>;\n    renderedDismiss = (\n      // `type` is \"button\" unless the slot sets one (`null`, from JavaScript callers, means the\n      // default too, so the button never submits an enclosing form by accident). A merged\n      // `disabledFocusable` Button makes it unavailable but focusable (spread last: it wins).\n      <button\n        {...buttonProps}\n        ref={dismissRef}\n        type={buttonProps.type ?? 'button'}\n        {...(dismissParts.disabledFocusable ? MERGED_DISABLED_FOCUSABLE_PROPS : undefined)}\n      >\n        {dismissParts.content}\n      </button>\n    );\n  }\n\n  return (\n    <div\n      ref={ref}\n      role={status === 'error' || status === 'warning' ? 'alert' : 'status'}\n      {...rest}\n      className={cn(\n        'flex items-start gap-3 rounded border-s-4 px-4 py-3 text-foreground',\n        tintClasses[status],\n        STATUS_BORDER[status],\n        className,\n      )}\n    >\n      {renderedIcon}\n      <div className=\"min-w-0 flex-1 text-body-1\">\n        <StatusText label={getStatusLabel(status, statusLabel)} />\n        {children}\n      </div>\n      {renderedDismiss}\n    </div>\n  );\n};\n\nMessageBar.displayName = 'MessageBar';\n"],"mappings":"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"}

package/dist/components/feedback/MessageBar.mjs

@@ -0,0 +1,144 @@
+"use client";
+import { cn as e } from "../../lib/cn.mjs";
+import { isElementOfType as t } from "../../lib/children.mjs";
+import { warnOnce as n } from "../../lib/dev.mjs";
+import { materialiseSlotContent as r, renderSlot as i, resolveSlot as a, slotRendersContent as o, slotWrapsDefaultContent as s } from "../../lib/slot.mjs";
+import { useMergedRefs as c } from "../../hooks/useMergedRefs.mjs";
+import { focusRing as l } from "../../lib/styles.mjs";
+import { Button as u } from "../button/Button.mjs";
+import { DismissIcon as d } from "../../lib/icons.mjs";
+import { mergeProps as f } from "../../lib/mergeProps.mjs";
+import { BUTTON_OWN_PROP_KEYS as p, MERGED_DISABLED_FOCUSABLE_PROPS as m, mergedAriaDisabledClasses as h, placeButtonIcon as g } from "../button/Button.slots.mjs";
+import { hasRenderedTextLabel as _, hasTextLabel as v, observeTextLabel as y } from "../../lib/labelInName.mjs";
+import { STATUS_BORDER as b, STATUS_ICON_COLOR as x, StatusIcon as S, StatusText as C, getStatusLabel as w } from "./MessageBar.status.mjs";
+import * as T from "react";
+import { jsx as E, jsxs as D } from "react/jsx-runtime";
+//#region src/components/feedback/MessageBar.tsx
+var O = {
+	info: "bg-info-tint",
+	success: "bg-success-tint",
+	warning: "bg-warning-tint",
+	error: "bg-error-tint"
+}, k = "Dismiss", A = /* @__PURE__ */ new Set([
+	"type",
+	"disabled",
+	"autoFocus",
+	"form",
+	"formAction",
+	"formEncType",
+	"formMethod",
+	"formNoValidate",
+	"formTarget",
+	"name",
+	"value",
+	"popoverTarget",
+	"popoverTargetAction"
+]), j = /* @__PURE__ */ new Set([
+	"aria-label",
+	"aria-labelledby",
+	"title"
+]), M = /^on[A-Z]/, N = "inline-flex items-center justify-center", P = () => {};
+function F() {
+	return /* @__PURE__ */ E(d, {});
+}
+function I(e) {
+	return e === "button" || e === u;
+}
+function L() {
+	return {
+		buttonProps: {},
+		content: F(),
+		contentMayName: !1,
+		literalTextLabel: !1,
+		disabledFocusable: !1,
+		warning: null
+	};
+}
+function R(n) {
+	if (n === null) return null;
+	if (n === void 0 || typeof n == "boolean") return L();
+	let c = n;
+	if (t(c, "button", u)) {
+		let e = {};
+		for (let [t, n] of Object.entries(c.props)) t !== "children" && t !== "dangerouslySetInnerHTML" && !p.has(t) && (e[t] = n);
+		let n = t(c, u), a = c.props.dangerouslySetInnerHTML, s = a == null ? r(c.props.children) : /* @__PURE__ */ E("span", {
+			className: N,
+			dangerouslySetInnerHTML: a
+		}), l = c.props.icon, d = n && o(l) ? i(l, "span", N, { "aria-hidden": !0 }) : null;
+		return {
+			buttonProps: e,
+			content: d || o(s) ? g(d, s, c.props.iconPosition) : F(),
+			contentMayName: !0,
+			literalTextLabel: v(s),
+			disabledFocusable: n && !!c.props.disabledFocusable,
+			warning: "button-element"
+		};
+	}
+	let l = a(n, "span");
+	if (!l) return L();
+	let { Component: d, props: f, children: m } = l, h = I(d), _ = h || Object.keys(f).some((e) => A.has(e) || M.test(e)), y = {}, b = {}, x = null;
+	for (let [e, t] of Object.entries(f)) d === u && p.has(e) ? e === "icon" && o(t) && (x = i(t, "span", N, { "aria-hidden": !0 })) : A.has(e) || M.test(e) || j.has(e) || _ && (e === "className" || e === "style" || e === "ref") ? y[e] = t : b[e] = t;
+	let S = h ? "span" : d, C = {
+		"aria-hidden": !0,
+		...b,
+		className: e(N, b.className)
+	}, w = null;
+	return x || o(m) ? w = g(x, m, d === u && f.iconPosition) : s(S, {
+		...b,
+		children: m
+	}) && (w = F()), {
+		buttonProps: y,
+		content: w === null ? T.createElement(S, C) : T.createElement(S, C, w),
+		contentMayName: !1,
+		literalTextLabel: !1,
+		disabledFocusable: d === u && !!f.disabledFocusable,
+		warning: _ ? "button-object" : null
+	};
+}
+var z = ({ status: t = "info", statusLabel: r, onDismiss: a, icon: o, dismiss: s, children: u, className: d, ref: p, ...g }) => {
+	let v = e("mt-0.5 inline-flex shrink-0", x[t]), A = o === void 0 ? /* @__PURE__ */ E("span", {
+		"aria-hidden": "true",
+		className: v,
+		children: /* @__PURE__ */ E(S, {
+			status: t,
+			size: 20
+		})
+	}) : i(o, "span", v, { "aria-hidden": !0 }), M = a !== void 0 || s !== void 0 && typeof s != "boolean" ? R(s) : null, N = M?.warning ?? null;
+	T.useEffect(() => {
+		N === "button-element" ? n("MessageBar:dismiss-button-element", "MessageBar: `dismiss` received a button element; its props were merged into the built-in dismiss button (buttons cannot be nested). Pass icon content instead, e.g. `dismiss={<CloseIcon />}`, and use `onDismiss`.") : N === "button-object" && n("MessageBar:dismiss-button-object", "MessageBar: the button-object form of `dismiss` is deprecated and will be removed in 1.0; its button props were merged into the built-in dismiss button. Pass icon content instead, e.g. `dismiss={<CloseIcon />}`, and use `onDismiss`.");
+	}, [N]);
+	let { ref: F, ...I } = M?.buttonProps ?? {}, L = Object.keys(I).some((e) => j.has(e) && I[e] != null), z = M !== null && M.contentMayName && !L, B = M?.literalTextLabel ?? !1, [V, H] = T.useState(null), U = T.useCallback((e) => V ? y(V, e) : P, [V]), W = T.useSyncExternalStore(U, () => V ? _(V) : B, () => B), G = z && W, K = c(F, z ? H : void 0), q = null;
+	if (M) {
+		let t = f({
+			"aria-label": L || G ? void 0 : k,
+			onClick: () => a?.(),
+			className: e("ms-auto inline-flex shrink-0 cursor-pointer items-center justify-center rounded border-none bg-transparent p-1 text-muted-foreground", "not-disabled:not-aria-disabled:hover:bg-subtle-hover not-disabled:not-aria-disabled:hover:text-foreground", "not-disabled:not-aria-disabled:active:bg-subtle-pressed", l, "disabled:cursor-not-allowed disabled:opacity-50", h)
+		}, I);
+		q = /* @__PURE__ */ E("button", {
+			...t,
+			ref: K,
+			type: t.type ?? "button",
+			...M.disabledFocusable ? m : void 0,
+			children: M.content
+		});
+	}
+	return /* @__PURE__ */ D("div", {
+		ref: p,
+		role: t === "error" || t === "warning" ? "alert" : "status",
+		...g,
+		className: e("flex items-start gap-3 rounded border-s-4 px-4 py-3 text-foreground", O[t], b[t], d),
+		children: [
+			A,
+			/* @__PURE__ */ D("div", {
+				className: "min-w-0 flex-1 text-body-1",
+				children: [/* @__PURE__ */ E(C, { label: w(t, r) }), u]
+			}),
+			q
+		]
+	});
+};
+z.displayName = "MessageBar";
+//#endregion
+export { z as MessageBar };
+
+//# sourceMappingURL=MessageBar.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MessageBar.mjs","names":["React","tintClasses","DEFAULT_DISMISS_LABEL","BUTTON_ONLY_KEYS","NAMING_KEYS","HANDLER_KEY","dismissContentClassName","noop","defaultDismissContent","DismissIcon","isButtonType","type","Button","defaultDismiss","resolveDismiss","dismiss","element","isElementOfType","buttonProps","key","value","BUTTON_OWN_PROP_KEYS","isWaveButton","markup","children","materialiseSlotContent","icon","iconNode","slotRendersContent","renderSlot","placeButtonIcon","hasTextLabel","resolved","resolveSlot","asButton","Component","isButtonObject","props","contentProps","ContentTag","elementProps","cn","inner","slotWrapsDefaultContent","MessageBar","rest","iconClassName","STATUS_ICON_COLOR","status","renderedIcon","StatusIcon","dismissParts","onDismiss","dismissWarning","warnOnce","slotRef","slotButtonProps","hasOwnName","checksContent","literalTextLabel","labelTarget","setLabelTarget","subscribeToContent","observeTextLabel","onChange","contentHasTextLabel","hasRenderedTextLabel","namedByContent","dismissRef","useMergedRefs","renderedDismiss","mergeProps","focusRing","mergedAriaDisabledClasses","MERGED_DISABLED_FOCUSABLE_PROPS","STATUS_BORDER","className","StatusText","getStatusLabel","statusLabel"],"sources":["../../../src/components/feedback/MessageBar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { isElementOfType } from '../../lib/children';\nimport { cn } from '../../lib/cn';\nimport { warnOnce } from '../../lib/dev';\nimport { DismissIcon } from '../../lib/icons';\nimport { hasRenderedTextLabel, hasTextLabel, observeTextLabel } from '../../lib/labelInName';\nimport { mergeProps } from '../../lib/mergeProps';\nimport {\n  materialiseSlotContent,\n  renderSlot,\n  resolveSlot,\n  slotRendersContent,\n  slotWrapsDefaultContent,\n} from '../../lib/slot';\nimport { focusRing } from '../../lib/styles';\nimport type { Status, Slot, SlotObject } from '../../lib/types';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport { Button } from '../button/Button';\nimport {\n  BUTTON_OWN_PROP_KEYS,\n  MERGED_DISABLED_FOCUSABLE_PROPS,\n  mergedAriaDisabledClasses,\n  placeButtonIcon,\n} from '../button/Button.slots';\nimport {\n  STATUS_BORDER,\n  STATUS_ICON_COLOR,\n  StatusIcon,\n  StatusText,\n  getStatusLabel,\n} from './MessageBar.status';\n\n/** Properties for the MessageBar component. */\nexport interface MessageBarProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Status level controlling the color, icon, status text and role of the message bar.\n   * `warning` and `error` render `role=\"alert\"`, `info` and `success` `role=\"status\"` (a consumer\n   * `role` wins).\n   * @default 'info'\n   */\n  status?: Status;\n  /**\n   * Visually hidden text read before the message so screen-reader users hear the severity\n   * (`'Info:'`, `'Success:'`, `'Warning:'`, `'Error:'` by default). Pass a translation for other\n   * languages, or `''` when the message text already states the severity.\n   */\n  statusLabel?: string;\n  /**\n   * Called when the dismiss button is activated. Passing it renders the dismiss button (unless\n   * `dismiss` is `null`).\n   */\n  onDismiss?: () => void;\n  /**\n   * Custom status icon, rendered decoratively (`aria-hidden=\"true\"`, a slot object can override\n   * it) in the status color. `null` renders no icon.\n   */\n  icon?: Slot<'span'>;\n  /**\n   * Content of the dismiss button (replaces the default dismiss icon). It always renders **inside**\n   * the built-in `<button type=\"button\" aria-label=\"Dismiss\">`, which calls `onDismiss`; passing\n   * content shows the dismiss button even without `onDismiss`. `null` is the only value that hides\n   * the button. A boolean counts as no slot, so the conditional idiom\n   * `dismiss={useBrandIcon && <BrandCloseIcon />}` keeps the default button: the default icon with\n   * `onDismiss`, no button without it. Content that renders nothing (`''`, or an array or Fragment\n   * of only `null`, `false`, `true` and `''`, also as the children of a slot object or a merged\n   * button) keeps the default icon, so the button is never empty; a slot object that renders a\n   * component or a void element (`{ as: CloseIcon }`, `{ as: 'img', src, alt: '' }`) or sets\n   * `dangerouslySetInnerHTML` is the icon itself. The content is\n   * decorative (`aria-hidden`), so the button keeps the name \"Dismiss\": when the content is\n   * visible text, pass a slot object whose `aria-label` matches it\n   * (`{ children: 'Close', 'aria-label': 'Close' }`) so the name contains the visible label. An\n   * `aria-label`, `aria-labelledby` or `title` on a slot object names the button instead of\n   * \"Dismiss\".\n   *\n   * A `<button>` element or a Wave `Button` passed here is not nested: its props are merged into\n   * the built-in button (its `onClick` runs first and can call `preventDefault()` to cancel\n   * `onDismiss`; its `aria-label` and an explicit `type` win over the defaults) and its content\n   * (children, or `dangerouslySetInnerHTML` markup) is used as is, with a development warning.\n   * A Wave `Button`'s own props are not attributes: its `icon` becomes decorative content before\n   * its children (after them with `iconPosition=\"after\"`), `disabledFocusable` makes the dismiss\n   * button unavailable but focusable as on the Button (`onDismiss` is not called), and\n   * `appearance` and `size` are ignored.\n   * When the rendered content has a text label (at least two letters or digits:\n   * `<button>Close</button>`, or text rendered by a component such as a translation), that text\n   * names the button, as in 0.4. An icon, a lone character (`X`, `×`,\n   * `+`: a symbol, not a label) and text that is `aria-hidden` or `hidden` keep the name\n   * \"Dismiss\". Text hidden only with CSS still counts as the label: a responsive label such as\n   * `<span className=\"hidden sm:inline\">Close</span>` drops the default name, so the button has\n   * no name wherever that text is not displayed. Give such a button an explicit `aria-label`\n   * (`<button aria-label=\"Close\">…</button>`). An `aria-label`, `aria-labelledby` or `title` on\n   * the element names the button.\n   *\n   * The 0.4 button-object form (`{ as: 'button', onClick, … }`, `{ as: Button, … }` or an object\n   * with button props) is **deprecated**: its button props (`type` included), `className` and\n   * `style` are merged the same way, and a Wave Button's own props apply as for the element form.\n   * Pass icon content instead, e.g. `dismiss={<CloseIcon />}`.\n   */\n  dismiss?: Slot<'span'> | SlotObject<'button'>;\n  /** Message content to display. */\n  children: React.ReactNode;\n  /** Ref to the root `<div>`. */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\nconst tintClasses: Record<Status, string> = {\n  info: 'bg-info-tint',\n  success: 'bg-success-tint',\n  warning: 'bg-warning-tint',\n  error: 'bg-error-tint',\n};\n\ntype UnknownProps = Record<string, unknown>;\n\n/** Name of the dismiss button when nothing else names it. */\nconst DEFAULT_DISMISS_LABEL = 'Dismiss';\n\n/** Attributes that only make sense on the dismiss `<button>` itself. */\nconst BUTTON_ONLY_KEYS: ReadonlySet<string> = new Set([\n  'type',\n  'disabled',\n  'autoFocus',\n  'form',\n  'formAction',\n  'formEncType',\n  'formMethod',\n  'formNoValidate',\n  'formTarget',\n  'name',\n  'value',\n  'popoverTarget',\n  'popoverTargetAction',\n]);\n\n/**\n * Attributes that name the dismiss button. On a slot object they go to the button (its content is\n * decorative); on the merged button, any of them replaces the default `aria-label`.\n */\nconst NAMING_KEYS: ReadonlySet<string> = new Set(['aria-label', 'aria-labelledby', 'title']);\n\nconst HANDLER_KEY = /^on[A-Z]/;\n\nconst dismissContentClassName = 'inline-flex items-center justify-center';\n\ninterface DismissParts {\n  /** Props merged onto the wired dismiss button. */\n  buttonProps: UnknownProps;\n  /** What renders inside the dismiss button. */\n  content: React.ReactNode;\n  /**\n   * `true` when the content is rendered as is (a merged `<button>`/`Button`), so a text label in it\n   * names the button (C-SLOTS naming, WCAG 2.5.3 Label in Name); `false` when the content is\n   * decorative (`aria-hidden`).\n   */\n  contentMayName: boolean;\n  /**\n   * Whether the content's literal children contain a text label. Used for the server render and\n   * the first client render; after mount, the rendered button's text decides (see\n   * {@link hasRenderedTextLabel}).\n   */\n  literalTextLabel: boolean;\n  /**\n   * Whether a merged Wave `Button` set `disabledFocusable`: the dismiss button is then unavailable\n   * but focusable, as the Button would be.\n   */\n  disabledFocusable: boolean;\n  /** Which development warning the slot needs. */\n  warning: 'button-element' | 'button-object' | null;\n}\n\nconst noop = () => {};\n\n/** The decorative default dismiss glyph. */\nfunction defaultDismissContent(): React.ReactNode {\n  return <DismissIcon />;\n}\n\nfunction isButtonType(type: unknown): boolean {\n  return type === 'button' || type === Button;\n}\n\n/** The dismiss button without a slot: the default icon and name. */\nfunction defaultDismiss(): DismissParts {\n  return {\n    buttonProps: {},\n    content: defaultDismissContent(),\n    contentMayName: false,\n    literalTextLabel: false,\n    disabledFocusable: false,\n    warning: null,\n  };\n}\n\n/**\n * Splits the `dismiss` slot into props for the wired dismiss button and the content rendered\n * inside it (C-SLOTS dismiss semantics). `null` means: no dismiss button. A boolean is no slot\n * (the default dismiss button), and content that renders nothing keeps the default icon.\n */\nfunction resolveDismiss(dismiss: MessageBarProps['dismiss']): DismissParts | null {\n  if (dismiss === null) return null;\n  if (dismiss === undefined || typeof dismiss === 'boolean') return defaultDismiss();\n\n  // A merged `<button>`/`Button` keeps its content accessible (as in 0.4): a text label names the\n  // button, anything else (an icon, a lone character such as `X` or `×`) gets the default name.\n  // The type is compared through `isElementOfType`, so a Button written in a Server Component\n  // (a lazy client reference) is merged too.\n  const element = dismiss as React.ReactNode;\n  if (isElementOfType<UnknownProps>(element, 'button', Button)) {\n    const buttonProps: UnknownProps = {};\n    for (const [key, value] of Object.entries(element.props)) {\n      if (\n        key !== 'children' &&\n        key !== 'dangerouslySetInnerHTML' &&\n        !BUTTON_OWN_PROP_KEYS.has(key)\n      ) {\n        buttonProps[key] = value;\n      }\n    }\n    const isWaveButton = isElementOfType(element, Button);\n    // A generator is read once by the check; its items are what renders (and names the button).\n    // Markup of the merged button (`dangerouslySetInnerHTML`) is its content as well, rendered in\n    // a span inside the dismiss button (the button itself also holds the icon).\n    const markup = element.props.dangerouslySetInnerHTML as\n      React.HTMLAttributes<HTMLElement>['dangerouslySetInnerHTML'] | undefined;\n    const children =\n      markup != null ? (\n        <span className={dismissContentClassName} dangerouslySetInnerHTML={markup} />\n      ) : (\n        materialiseSlotContent(element.props.children)\n      );\n    // Wave Button's icon becomes decorative content before its children (after them with\n    // `iconPosition=\"after\"`).\n    const icon = element.props.icon as Slot<'span'>;\n    const iconNode =\n      isWaveButton && slotRendersContent(icon)\n        ? renderSlot(icon, 'span', dismissContentClassName, { 'aria-hidden': true })\n        : null;\n    const content =\n      iconNode || slotRendersContent(children)\n        ? placeButtonIcon(iconNode, children, element.props.iconPosition)\n        : defaultDismissContent();\n    return {\n      buttonProps,\n      content,\n      contentMayName: true,\n      literalTextLabel: hasTextLabel(children),\n      disabledFocusable: isWaveButton && Boolean(element.props.disabledFocusable),\n      warning: 'button-element',\n    };\n  }\n\n  // Everything else is classified by the slot system (F2): shorthand content resolves to the\n  // default `span` with no attributes; a slot object resolves to its element and attributes.\n  const resolved = resolveSlot(dismiss as Slot<'span'>, 'span');\n  if (!resolved) return defaultDismiss();\n  const { Component, props, children } = resolved;\n  const asButton = isButtonType(Component);\n  const isButtonObject =\n    asButton ||\n    Object.keys(props).some((key) => BUTTON_ONLY_KEYS.has(key) || HANDLER_KEY.test(key));\n  const buttonProps: UnknownProps = {};\n  const contentProps: UnknownProps = {};\n  let iconNode: React.ReactNode = null;\n  for (const [key, value] of Object.entries(props)) {\n    if (Component === Button && BUTTON_OWN_PROP_KEYS.has(key)) {\n      // Wave Button's own props are not attributes: `icon`, `iconPosition` and\n      // `disabledFocusable` are applied below, the others (`appearance`, `size`) are dropped.\n      if (key === 'icon' && slotRendersContent(value)) {\n        iconNode = renderSlot(value as Slot<'span'>, 'span', dismissContentClassName, {\n          'aria-hidden': true,\n        });\n      }\n    } else if (\n      BUTTON_ONLY_KEYS.has(key) ||\n      HANDLER_KEY.test(key) ||\n      NAMING_KEYS.has(key) ||\n      // 0.4 rendered the object as the button itself: its className, style and ref stay there.\n      (isButtonObject && (key === 'className' || key === 'style' || key === 'ref'))\n    ) {\n      buttonProps[key] = value;\n    } else {\n      contentProps[key] = value;\n    }\n  }\n\n  // The content element: the object's own element, or a span for the button-object form. An\n  // object whose children render nothing styles the default icon\n  // (e.g. `{ className: 'text-error' }`), unless its element is the icon itself.\n  const ContentTag: React.ElementType = asButton ? 'span' : Component;\n  const elementProps = {\n    'aria-hidden': true,\n    ...contentProps,\n    className: cn(dismissContentClassName, contentProps.className as string | undefined),\n  };\n  let inner: React.ReactNode = null;\n  if (iconNode || slotRendersContent(children)) {\n    inner = placeButtonIcon(iconNode, children, Component === Button && props.iconPosition);\n  } else if (slotWrapsDefaultContent(ContentTag, { ...contentProps, children })) {\n    inner = defaultDismissContent();\n  }\n  return {\n    buttonProps,\n    content:\n      inner === null\n        ? React.createElement(ContentTag, elementProps)\n        : React.createElement(ContentTag, elementProps, inner),\n    contentMayName: false,\n    literalTextLabel: false,\n    disabledFocusable: Component === Button && Boolean(props.disabledFocusable),\n    warning: isButtonObject ? 'button-object' : null,\n  };\n}\n\n/**\n * An inline message that tells the user about the state of a page or task: a status icon, a\n * visually hidden status label (\"Warning:\"), the message and an optional dismiss button.\n *\n * - The status sets the tint, the logical start border, the icon and the role (`alert` for\n *   `warning`/`error`, `status` otherwise). Screen readers hear the severity through `statusLabel`.\n * - The dismiss button is always the MessageBar's own `<button>` wired to `onDismiss`\n *   (`type=\"button\"` unless a merged button slot sets its own `type`); the `dismiss` slot only\n *   replaces its content (see {@link MessageBarProps.dismiss}).\n *\n * @example\n * <MessageBar status=\"warning\" onDismiss={() => setVisible(false)}>\n *   Your subscription expires in 3 days.\n * </MessageBar>\n */\nexport const MessageBar = ({\n  status = 'info',\n  statusLabel,\n  onDismiss,\n  icon,\n  dismiss,\n  children,\n  className,\n  ref,\n  ...rest\n}: MessageBarProps) => {\n  const iconClassName = cn('mt-0.5 inline-flex shrink-0', STATUS_ICON_COLOR[status]);\n  const renderedIcon =\n    icon !== undefined ? (\n      renderSlot(icon, 'span', iconClassName, { 'aria-hidden': true })\n    ) : (\n      <span aria-hidden=\"true\" className={iconClassName}>\n        <StatusIcon status={status} size={20} />\n      </span>\n    );\n\n  // A boolean `dismiss` is no slot (`dismiss={cond && <CloseIcon />}`): only `onDismiss` shows it.\n  const showDismiss =\n    onDismiss !== undefined || (dismiss !== undefined && typeof dismiss !== 'boolean');\n  const dismissParts = showDismiss ? resolveDismiss(dismiss) : null;\n  const dismissWarning = dismissParts?.warning ?? null;\n  React.useEffect(() => {\n    if (dismissWarning === 'button-element') {\n      warnOnce(\n        'MessageBar:dismiss-button-element',\n        'MessageBar: `dismiss` received a button element; its props were merged into the built-in dismiss button (buttons cannot be nested). Pass icon content instead, e.g. `dismiss={<CloseIcon />}`, and use `onDismiss`.',\n      );\n    } else if (dismissWarning === 'button-object') {\n      warnOnce(\n        'MessageBar:dismiss-button-object',\n        'MessageBar: the button-object form of `dismiss` is deprecated and will be removed in 1.0; its button props were merged into the built-in dismiss button. Pass icon content instead, e.g. `dismiss={<CloseIcon />}`, and use `onDismiss`.',\n      );\n    }\n  }, [dismissWarning]);\n\n  // The slot's ref joins ours through a stable merged ref (never a new callback per render).\n  const { ref: slotRef, ...slotButtonProps } = dismissParts?.buttonProps ?? {};\n  const hasOwnName = Object.keys(slotButtonProps).some(\n    (key) => NAMING_KEYS.has(key) && slotButtonProps[key] != null,\n  );\n\n  // C-SLOTS naming (WCAG 2.5.3 Label in Name): a merged button's content names it when it renders\n  // a text label (at least two letters or digits; a lone `X` or `×` is a glyph), and the default\n  // `aria-label` would hide that label. The literal children decide on the server and on the first\n  // render; after mount, the rendered button's text does (text from components, e.g. translations,\n  // and later changes).\n  const checksContent = dismissParts !== null && dismissParts.contentMayName && !hasOwnName;\n  const literalTextLabel = dismissParts?.literalTextLabel ?? false;\n  const [labelTarget, setLabelTarget] = React.useState<HTMLButtonElement | null>(null);\n  const subscribeToContent = React.useCallback(\n    (onChange: () => void) => (labelTarget ? observeTextLabel(labelTarget, onChange) : noop),\n    [labelTarget],\n  );\n  const contentHasTextLabel = React.useSyncExternalStore(\n    subscribeToContent,\n    () => (labelTarget ? hasRenderedTextLabel(labelTarget) : literalTextLabel),\n    () => literalTextLabel,\n  );\n  const namedByContent = checksContent && contentHasTextLabel;\n  const dismissRef = useMergedRefs<HTMLButtonElement>(\n    slotRef as React.Ref<HTMLButtonElement> | undefined,\n    checksContent ? setLabelTarget : undefined,\n  );\n\n  let renderedDismiss: React.ReactNode = null;\n  if (dismissParts) {\n    const buttonProps = mergeProps(\n      {\n        'aria-label': hasOwnName || namedByContent ? undefined : DEFAULT_DISMISS_LABEL,\n        onClick: () => onDismiss?.(),\n        className: cn(\n          'ms-auto inline-flex shrink-0 cursor-pointer items-center justify-center rounded border-none bg-transparent p-1 text-muted-foreground',\n          'not-disabled:not-aria-disabled:hover:bg-subtle-hover not-disabled:not-aria-disabled:hover:text-foreground',\n          'not-disabled:not-aria-disabled:active:bg-subtle-pressed',\n          focusRing,\n          'disabled:cursor-not-allowed disabled:opacity-50',\n          mergedAriaDisabledClasses,\n        ),\n      },\n      slotButtonProps,\n    ) as React.ComponentPropsWithoutRef<'button'>;\n    renderedDismiss = (\n      // `type` is \"button\" unless the slot sets one (`null`, from JavaScript callers, means the\n      // default too, so the button never submits an enclosing form by accident). A merged\n      // `disabledFocusable` Button makes it unavailable but focusable (spread last: it wins).\n      <button\n        {...buttonProps}\n        ref={dismissRef}\n        type={buttonProps.type ?? 'button'}\n        {...(dismissParts.disabledFocusable ? MERGED_DISABLED_FOCUSABLE_PROPS : undefined)}\n      >\n        {dismissParts.content}\n      </button>\n    );\n  }\n\n  return (\n    <div\n      ref={ref}\n      role={status === 'error' || status === 'warning' ? 'alert' : 'status'}\n      {...rest}\n      className={cn(\n        'flex items-start gap-3 rounded border-s-4 px-4 py-3 text-foreground',\n        tintClasses[status],\n        STATUS_BORDER[status],\n        className,\n      )}\n    >\n      {renderedIcon}\n      <div className=\"min-w-0 flex-1 text-body-1\">\n        <StatusText label={getStatusLabel(status, statusLabel)} />\n        {children}\n      </div>\n      {renderedDismiss}\n    </div>\n  );\n};\n\nMessageBar.displayName = 'MessageBar';\n"],"mappings":"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"}

package/dist/components/feedback/MessageBar.status.cjs

@@ -0,0 +1,2 @@
+"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/icons.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("react/jsx-runtime");var i={info:`Info:`,success:`Success:`,warning:`Warning:`,error:`Error:`},a={info:t.InfoIcon,success:t.SuccessIcon,warning:t.WarningIcon,error:t.ErrorIcon},o={info:`text-info-tint-foreground`,success:`text-success-tint-foreground`,warning:`text-warning-tint-foreground`,error:`text-error-tint-foreground`},s={info:`border-s-info`,success:`border-s-success`,warning:`border-s-warning`,error:`border-s-error`};function c(e,t){return t??i[e]}function l({status:e,size:t}){let n=a[e];return(0,r.jsx)(n,{size:t})}l.displayName=`StatusIcon`;function u({label:e}){return e?(0,r.jsx)(`span`,{className:`sr-only`,children:`${e} `}):null}u.displayName=`StatusText`,exports.STATUS_BORDER=s,exports.STATUS_ICON_COLOR=o,exports.STATUS_LABELS=i,exports.StatusIcon=l,exports.StatusText=u,exports.getStatusLabel=c;
+//# sourceMappingURL=MessageBar.status.cjs.map

package/dist/components/feedback/MessageBar.status.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageBar.status.cjs","names":["InfoIcon","SuccessIcon","WarningIcon","ErrorIcon","require_runtime","require_icons","react","react_jsx_runtime","STATUS_LABELS","STATUS_ICONS","STATUS_ICON_COLOR","STATUS_BORDER","getStatusLabel","statusLabel","status","StatusIcon","Icon","StatusText","label"],"sources":["../../../src/components/feedback/MessageBar.status.tsx"],"sourcesContent":["/**\n * Internal status building blocks shared by MessageBar and Toast (spec §5.7): the status icons and\n * the visually hidden status text that tells screen-reader users the severity\n * (feedback-navigation#4). Not exported from the package.\n */\nimport * as React from 'react';\nimport { ErrorIcon, InfoIcon, SuccessIcon, WarningIcon } from '../../lib/icons';\nimport type { IconComponent } from '../../lib/icons';\nimport type { Status } from '../../lib/types';\n\n/** Default visually hidden status text, read before the message (\"Warning: Disk almost full\"). */\nexport const STATUS_LABELS: Readonly<Record<Status, string>> = {\n  info: 'Info:',\n  success: 'Success:',\n  warning: 'Warning:',\n  error: 'Error:',\n};\n\nconst STATUS_ICONS: Readonly<Record<Status, IconComponent>> = {\n  info: InfoIcon,\n  success: SuccessIcon,\n  warning: WarningIcon,\n  error: ErrorIcon,\n};\n\n/**\n * Icon color per status. The `*-tint-foreground` tokens keep ≥ 4.5:1 on both the status tints\n * (MessageBar) and the page background (Toast) in every theme, unlike the `warning` fill.\n */\nexport const STATUS_ICON_COLOR: Readonly<Record<Status, string>> = {\n  info: 'text-info-tint-foreground',\n  success: 'text-success-tint-foreground',\n  warning: 'text-warning-tint-foreground',\n  error: 'text-error-tint-foreground',\n};\n\n/** Logical start border color per status. */\nexport const STATUS_BORDER: Readonly<Record<Status, string>> = {\n  info: 'border-s-info',\n  success: 'border-s-success',\n  warning: 'border-s-warning',\n  error: 'border-s-error',\n};\n\n/** The resolved status text: `statusLabel` when given (`''` hides it), else the default. */\nexport function getStatusLabel(status: Status, statusLabel: string | undefined): string {\n  return statusLabel ?? STATUS_LABELS[status];\n}\n\n/** The default status glyph (decorative: `aria-hidden`, `currentColor`). */\nexport function StatusIcon({ status, size }: { status: Status; size?: number }) {\n  const Icon = STATUS_ICONS[status];\n  return <Icon size={size} />;\n}\nStatusIcon.displayName = 'StatusIcon';\n\n/** Visually hidden status text, followed by a space so it reads apart from the message. */\nexport function StatusText({ label }: { label: string }) {\n  if (!label) return null;\n  return <span className=\"sr-only\">{`${label} `}</span>;\n}\nStatusText.displayName = 'StatusText';\n"],"mappings":"iLAWA,IAAaQ,EAAkD,CAC7D,KAAM,QACN,QAAS,WACT,QAAS,WACT,MAAO,QACT,EAEMC,EAAwD,CAC5D,KAAMT,EAAAA,SACN,QAASC,EAAAA,YACT,QAASC,EAAAA,YACT,MAAOC,EAAAA,SACT,EAMaO,EAAsD,CACjE,KAAM,4BACN,QAAS,+BACT,QAAS,+BACT,MAAO,4BACT,EAGaC,EAAkD,CAC7D,KAAM,gBACN,QAAS,mBACT,QAAS,mBACT,MAAO,gBACT,EAGA,SAAgBC,EAAe,EAAgB,EAAyC,CACtF,OAAOC,GAAeL,EAAcM,EACtC,CAGA,SAAgBC,EAAW,CAAE,SAAQ,QAA2C,CAC9E,IAAMC,EAAOP,EAAaK,GAC1B,OAAO,EAAAP,EAAA,IAAA,CAACS,EAAD,CAAY,MAAO,CAAA,CAC5B,CACA,EAAW,YAAc,aAGzB,SAAgBC,EAAW,CAAE,SAA4B,CAEvD,OADKC,GACE,EAAAX,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,UAAW,SAAA,GAAGW,EAAM,EAAS,CAAA,EADjC,IAErB,CACA,EAAW,YAAc"}

package/dist/components/feedback/MessageBar.status.mjs

@@ -0,0 +1,45 @@
+"use client";
+import { ErrorIcon as e, InfoIcon as t, SuccessIcon as n, WarningIcon as r } from "../../lib/icons.mjs";
+import "react";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/components/feedback/MessageBar.status.tsx
+var a = {
+	info: "Info:",
+	success: "Success:",
+	warning: "Warning:",
+	error: "Error:"
+}, o = {
+	info: t,
+	success: n,
+	warning: r,
+	error: e
+}, s = {
+	info: "text-info-tint-foreground",
+	success: "text-success-tint-foreground",
+	warning: "text-warning-tint-foreground",
+	error: "text-error-tint-foreground"
+}, c = {
+	info: "border-s-info",
+	success: "border-s-success",
+	warning: "border-s-warning",
+	error: "border-s-error"
+};
+function l(e, t) {
+	return t ?? a[e];
+}
+function u({ status: e, size: t }) {
+	let n = o[e];
+	return /* @__PURE__ */ i(n, { size: t });
+}
+u.displayName = "StatusIcon";
+function d({ label: e }) {
+	return e ? /* @__PURE__ */ i("span", {
+		className: "sr-only",
+		children: `${e} `
+	}) : null;
+}
+d.displayName = "StatusText";
+//#endregion
+export { c as STATUS_BORDER, s as STATUS_ICON_COLOR, a as STATUS_LABELS, u as StatusIcon, d as StatusText, l as getStatusLabel };
+
+//# sourceMappingURL=MessageBar.status.mjs.map

package/dist/components/feedback/MessageBar.status.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageBar.status.mjs","names":["STATUS_LABELS","STATUS_ICONS","InfoIcon","SuccessIcon","WarningIcon","ErrorIcon","STATUS_ICON_COLOR","STATUS_BORDER","getStatusLabel","statusLabel","status","StatusIcon","Icon","StatusText","label"],"sources":["../../../src/components/feedback/MessageBar.status.tsx"],"sourcesContent":["/**\n * Internal status building blocks shared by MessageBar and Toast (spec §5.7): the status icons and\n * the visually hidden status text that tells screen-reader users the severity\n * (feedback-navigation#4). Not exported from the package.\n */\nimport * as React from 'react';\nimport { ErrorIcon, InfoIcon, SuccessIcon, WarningIcon } from '../../lib/icons';\nimport type { IconComponent } from '../../lib/icons';\nimport type { Status } from '../../lib/types';\n\n/** Default visually hidden status text, read before the message (\"Warning: Disk almost full\"). */\nexport const STATUS_LABELS: Readonly<Record<Status, string>> = {\n  info: 'Info:',\n  success: 'Success:',\n  warning: 'Warning:',\n  error: 'Error:',\n};\n\nconst STATUS_ICONS: Readonly<Record<Status, IconComponent>> = {\n  info: InfoIcon,\n  success: SuccessIcon,\n  warning: WarningIcon,\n  error: ErrorIcon,\n};\n\n/**\n * Icon color per status. The `*-tint-foreground` tokens keep ≥ 4.5:1 on both the status tints\n * (MessageBar) and the page background (Toast) in every theme, unlike the `warning` fill.\n */\nexport const STATUS_ICON_COLOR: Readonly<Record<Status, string>> = {\n  info: 'text-info-tint-foreground',\n  success: 'text-success-tint-foreground',\n  warning: 'text-warning-tint-foreground',\n  error: 'text-error-tint-foreground',\n};\n\n/** Logical start border color per status. */\nexport const STATUS_BORDER: Readonly<Record<Status, string>> = {\n  info: 'border-s-info',\n  success: 'border-s-success',\n  warning: 'border-s-warning',\n  error: 'border-s-error',\n};\n\n/** The resolved status text: `statusLabel` when given (`''` hides it), else the default. */\nexport function getStatusLabel(status: Status, statusLabel: string | undefined): string {\n  return statusLabel ?? STATUS_LABELS[status];\n}\n\n/** The default status glyph (decorative: `aria-hidden`, `currentColor`). */\nexport function StatusIcon({ status, size }: { status: Status; size?: number }) {\n  const Icon = STATUS_ICONS[status];\n  return <Icon size={size} />;\n}\nStatusIcon.displayName = 'StatusIcon';\n\n/** Visually hidden status text, followed by a space so it reads apart from the message. */\nexport function StatusText({ label }: { label: string }) {\n  if (!label) return null;\n  return <span className=\"sr-only\">{`${label} `}</span>;\n}\nStatusText.displayName = 'StatusText';\n"],"mappings":";;;;;AAWA,IAAaA,IAAkD;CAC7D,MAAM;CACN,SAAS;CACT,SAAS;CACT,OAAO;AACT,GAEMC,IAAwD;CAC5D,MAAMC;CACN,SAASC;CACT,SAASC;CACT,OAAOC;AACT,GAMaC,IAAsD;CACjE,MAAM;CACN,SAAS;CACT,SAAS;CACT,OAAO;AACT,GAGaC,IAAkD;CAC7D,MAAM;CACN,SAAS;CACT,SAAS;CACT,OAAO;AACT;AAGA,SAAgBC,EAAe,GAAgB,GAAyC;CACtF,OAAOC,KAAeT,EAAcU;AACtC;AAGA,SAAgBC,EAAW,EAAE,WAAQ,WAA2C;CAC9E,IAAMC,IAAOX,EAAaS;CAC1B,OAAO,kBAACE,GAAD,EAAY,QAAO,CAAA;AAC5B;AACA,EAAW,cAAc;AAGzB,SAAgBC,EAAW,EAAE,YAA4B;CAEvD,OADKC,IACE,kBAAC,QAAD;EAAM,WAAU;EAAW,UAAA,GAAGA,EAAM;CAAS,CAAA,IADjC;AAErB;AACA,EAAW,cAAc"}

package/dist/components/feedback/ProgressBar.cjs

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBar.cjs","names":["useId","useFieldContext","useFieldControl","isDev","cn","forcedColors","require_runtime","require_cn","require_dev","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 { 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        '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          '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=\"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

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

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

@@ -0,0 +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","forcedColors","className"],"sources":["../../../src/components/feedback/ProgressBar.tsx"],"sourcesContent":["import * as React from 'react';\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        '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          '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=\"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/Skeleton.cjs

@@ -0,0 +1,2 @@
+"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/dev.cjs");let r=require("react");r=e.__toESM(r,1);let i=require("react/jsx-runtime");var a={text:`rounded`,circular:`circular`,rectangular:`rounded`},o=`forced-colors:bg-[GrayText] forced-colors:forced-color-adjust-none`,s={rounded:`rounded`,circular:`rounded-full`,square:`rounded-none`},c=({width:e,height:r,shape:c,variant:l,className:u,style:d,ref:f,...p})=>{let m=n.resolveDeprecatedProp(`Skeleton`,c,l===void 0?void 0:a[l],`variant`,`shape`)??`rounded`;return(0,i.jsx)(`div`,{"aria-hidden":`true`,...p,ref:f,className:t.cn(`bg-skeleton animate-wave-pulse motion-reduce:animate-none`,o,s[m],u),style:{width:e,height:r,...d}})};c.displayName=`Skeleton`;var l=({label:e=`Loading`,"aria-busy":t=!0,children:n,ref:r,...a})=>{let o=t!==!1&&t!==`false`;return(0,i.jsxs)(`div`,{...a,"aria-busy":t,ref:r,children:[o&&(0,i.jsx)(`span`,{className:`sr-only`,children:e}),n]})};l.displayName=`SkeletonGroup`;var u=Object.assign(c,{Group:l});exports.Skeleton=u,exports.SkeletonGroup=l;
+//# sourceMappingURL=Skeleton.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.cjs","names":["resolveDeprecatedProp","cn","require_runtime","require_cn","require_dev","react","react_jsx_runtime","variantShapes","forcedColorsFill","shapeClasses","SkeletonRoot","shapeProp","rest","shape","variant","className","style","SkeletonGroup","busy","loading","label","children","Skeleton"],"sources":["../../../src/components/feedback/Skeleton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport { resolveDeprecatedProp } from '../../lib/dev';\nimport type { Shape } from '../../lib/types';\n\n/** The 0.4 `variant` values (deprecated; written out in {@link SkeletonProps}, not a public name). */\ntype SkeletonVariant = NonNullable<SkeletonProps['variant']>;\n\n/** `rectangular` rendered with the default 4px radius in 0.4, so it maps to `rounded`. */\nconst variantShapes: Record<SkeletonVariant, Shape> = {\n  text: 'rounded',\n  circular: 'circular',\n  rectangular: 'rounded',\n};\n\n/**\n * Forced colors replace the author fill with the page color, so the placeholder would vanish: it\n * is painted `GrayText` instead (a leaf element, so opting out of forced colors reaches nothing\n * else).\n */\nconst forcedColorsFill = 'forced-colors:bg-[GrayText] forced-colors:forced-color-adjust-none';\n\nconst shapeClasses: Record<Shape, string> = {\n  rounded: 'rounded',\n  circular: 'rounded-full',\n  square: 'rounded-none',\n};\n\n/** Properties for the Skeleton component. */\nexport interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Width of the skeleton placeholder. */\n  width?: string | number;\n  /** Height of the skeleton placeholder. */\n  height?: string | number;\n  /**\n   * Geometry of the placeholder: `rounded` (4px radius), `circular` (avatars) or `square`.\n   * @default 'rounded'\n   */\n  shape?: Shape;\n  /**\n   * @deprecated Use `shape`: `text` and `rectangular` → `rounded` (their 0.4 look), `circular` →\n   * `circular`. Still works, warns once in development, and `shape` wins when both are given.\n   */\n  variant?: 'text' | 'circular' | 'rectangular';\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n// The component-level JSDoc sits on the exported `Skeleton` below (it reaches index.d.ts).\nconst SkeletonRoot = ({\n  width,\n  height,\n  shape: shapeProp,\n  variant,\n  className,\n  style,\n  ref,\n  ...rest\n}: SkeletonProps) => {\n  const shape =\n    resolveDeprecatedProp(\n      'Skeleton',\n      shapeProp,\n      variant === undefined ? undefined : variantShapes[variant],\n      'variant',\n      'shape',\n    ) ?? 'rounded';\n\n  return (\n    <div\n      aria-hidden=\"true\"\n      {...rest}\n      ref={ref}\n      className={cn(\n        'bg-skeleton animate-wave-pulse motion-reduce:animate-none',\n        forcedColorsFill,\n        shapeClasses[shape],\n        className,\n      )}\n      style={{ width, height, ...style }}\n    />\n  );\n};\nSkeletonRoot.displayName = 'Skeleton';\n\n/** Properties for the Skeleton.Group component. */\nexport interface SkeletonGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Visually hidden text announced in place of the decorative placeholders. Localize it.\n   * @default 'Loading'\n   */\n  label?: string;\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n/**\n * Container for the Skeletons of a loading region: `aria-busy=\"true\"` plus a visually hidden\n * `label` (\"Loading\"), while the placeholders stay decorative. It uses no live-region role, so it\n * does not interrupt; announce completion separately if needed. When the content arrives, remove\n * the group or pass `aria-busy={false}`, which also drops the hidden label (no stale \"Loading\" is\n * read before the content). A forwarded `aria-busy={undefined}` keeps the busy default. Flat\n * export for React Server Components (`Skeleton.Group` in client files).\n */\nexport const SkeletonGroup = ({\n  label = 'Loading',\n  // Destructured with a default rather than set before `{...rest}`: a wrapper that forwards\n  // `aria-busy={props['aria-busy']}` passes `undefined`, which must not strip the busy state.\n  'aria-busy': busy = true,\n  children,\n  ref,\n  ...rest\n}: SkeletonGroupProps) => {\n  const loading = busy !== false && busy !== 'false';\n  return (\n    <div {...rest} aria-busy={busy} ref={ref}>\n      {loading && <span className=\"sr-only\">{label}</span>}\n      {children}\n    </div>\n  );\n};\nSkeletonGroup.displayName = 'SkeletonGroup';\n\n/**\n * A decorative loading placeholder. Each Skeleton is `aria-hidden` (a consumer `aria-hidden`\n * overrides it); wrap the placeholders of a loading region in {@link SkeletonGroup}\n * (`Skeleton.Group`), which marks it busy and gives it a visually hidden \"Loading\" label.\n * The pulse animation stops for reduced motion; in forced-colors mode the placeholders are\n * painted `GrayText`. In React Server Components use the flat export `SkeletonGroup` instead of\n * `Skeleton.Group`.\n *\n * @example\n * <Skeleton.Group label=\"Loading profile\">\n *   <Skeleton shape=\"circular\" width={32} height={32} />\n *   <Skeleton width={160} height={12} />\n * </Skeleton.Group>\n */\nexport const Skeleton = /* @__PURE__ */ Object.assign(SkeletonRoot, { Group: SkeletonGroup });\n"],"mappings":"6MASA,IAAMO,EAAgD,CACpD,KAAM,UACN,SAAU,WACV,YAAa,SACf,EAOMC,EAAmB,qEAEnBC,EAAsC,CAC1C,QAAS,UACT,SAAU,eACV,OAAQ,cACV,EAsBMC,GAAgB,CACpB,QACA,SACA,MAAOC,EACP,UACA,YACA,QACA,MACA,GAAGC,KACgB,CACnB,IAAMC,EACJb,EAAAA,sBACE,WACAW,EACAG,IAAY,IAAA,GAAY,IAAA,GAAYP,EAAcO,GAClD,UACA,OACF,GAAK,UAEP,OACE,EAAAR,EAAA,IAAA,CAAC,MAAD,CACE,cAAY,OACZ,GAAIM,EACC,MACL,UAAWX,EAAAA,GACT,4DACAO,EACAC,EAAaI,GACbE,CACF,EACA,MAAO,CAAE,QAAO,SAAQ,GAAGC,CAAM,CAClC,CAAA,CAEL,EACA,EAAa,YAAc,WAoB3B,IAAaC,GAAiB,CAC5B,QAAQ,UAGR,YAAaC,EAAO,GACpB,WACA,MACA,GAAGN,KACqB,CACxB,IAAMO,EAAUD,IAAS,IAASA,IAAS,QAC3C,OACE,EAAAZ,EAAA,KAAA,CAAC,MAAD,CAAK,GAAIM,EAAM,YAAWM,EAAW,MAArC,SAAA,CACGC,IAAW,EAAAb,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,UAAW,SAAAc,CAAY,CAAA,EAClDC,CACE,GAET,EACA,EAAc,YAAc,gBAgB5B,IAAaC,EAA2B,OAAO,OAAOZ,EAAc,CAAE,MAAOO,CAAc,CAAC"}

package/dist/components/feedback/Skeleton.mjs

@@ -0,0 +1,47 @@
+"use client";
+import { cn as e } from "../../lib/cn.mjs";
+import { resolveDeprecatedProp as t } from "../../lib/dev.mjs";
+import "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/components/feedback/Skeleton.tsx
+var i = {
+	text: "rounded",
+	circular: "circular",
+	rectangular: "rounded"
+}, a = "forced-colors:bg-[GrayText] forced-colors:forced-color-adjust-none", o = {
+	rounded: "rounded",
+	circular: "rounded-full",
+	square: "rounded-none"
+}, s = ({ width: r, height: s, shape: c, variant: l, className: u, style: d, ref: f, ...p }) => {
+	let m = t("Skeleton", c, l === void 0 ? void 0 : i[l], "variant", "shape") ?? "rounded";
+	return /* @__PURE__ */ n("div", {
+		"aria-hidden": "true",
+		...p,
+		ref: f,
+		className: e("bg-skeleton animate-wave-pulse motion-reduce:animate-none", a, o[m], u),
+		style: {
+			width: r,
+			height: s,
+			...d
+		}
+	});
+};
+s.displayName = "Skeleton";
+var c = ({ label: e = "Loading", "aria-busy": t = !0, children: i, ref: a, ...o }) => {
+	let s = t !== !1 && t !== "false";
+	return /* @__PURE__ */ r("div", {
+		...o,
+		"aria-busy": t,
+		ref: a,
+		children: [s && /* @__PURE__ */ n("span", {
+			className: "sr-only",
+			children: e
+		}), i]
+	});
+};
+c.displayName = "SkeletonGroup";
+var l = /* @__PURE__ */ Object.assign(s, { Group: c });
+//#endregion
+export { l as Skeleton, c as SkeletonGroup };
+
+//# sourceMappingURL=Skeleton.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.mjs","names":["variantShapes","forcedColorsFill","shapeClasses","SkeletonRoot","shapeProp","rest","shape","resolveDeprecatedProp","variant","cn","className","style","SkeletonGroup","busy","loading","label","children","Skeleton"],"sources":["../../../src/components/feedback/Skeleton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport { resolveDeprecatedProp } from '../../lib/dev';\nimport type { Shape } from '../../lib/types';\n\n/** The 0.4 `variant` values (deprecated; written out in {@link SkeletonProps}, not a public name). */\ntype SkeletonVariant = NonNullable<SkeletonProps['variant']>;\n\n/** `rectangular` rendered with the default 4px radius in 0.4, so it maps to `rounded`. */\nconst variantShapes: Record<SkeletonVariant, Shape> = {\n  text: 'rounded',\n  circular: 'circular',\n  rectangular: 'rounded',\n};\n\n/**\n * Forced colors replace the author fill with the page color, so the placeholder would vanish: it\n * is painted `GrayText` instead (a leaf element, so opting out of forced colors reaches nothing\n * else).\n */\nconst forcedColorsFill = 'forced-colors:bg-[GrayText] forced-colors:forced-color-adjust-none';\n\nconst shapeClasses: Record<Shape, string> = {\n  rounded: 'rounded',\n  circular: 'rounded-full',\n  square: 'rounded-none',\n};\n\n/** Properties for the Skeleton component. */\nexport interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Width of the skeleton placeholder. */\n  width?: string | number;\n  /** Height of the skeleton placeholder. */\n  height?: string | number;\n  /**\n   * Geometry of the placeholder: `rounded` (4px radius), `circular` (avatars) or `square`.\n   * @default 'rounded'\n   */\n  shape?: Shape;\n  /**\n   * @deprecated Use `shape`: `text` and `rectangular` → `rounded` (their 0.4 look), `circular` →\n   * `circular`. Still works, warns once in development, and `shape` wins when both are given.\n   */\n  variant?: 'text' | 'circular' | 'rectangular';\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n// The component-level JSDoc sits on the exported `Skeleton` below (it reaches index.d.ts).\nconst SkeletonRoot = ({\n  width,\n  height,\n  shape: shapeProp,\n  variant,\n  className,\n  style,\n  ref,\n  ...rest\n}: SkeletonProps) => {\n  const shape =\n    resolveDeprecatedProp(\n      'Skeleton',\n      shapeProp,\n      variant === undefined ? undefined : variantShapes[variant],\n      'variant',\n      'shape',\n    ) ?? 'rounded';\n\n  return (\n    <div\n      aria-hidden=\"true\"\n      {...rest}\n      ref={ref}\n      className={cn(\n        'bg-skeleton animate-wave-pulse motion-reduce:animate-none',\n        forcedColorsFill,\n        shapeClasses[shape],\n        className,\n      )}\n      style={{ width, height, ...style }}\n    />\n  );\n};\nSkeletonRoot.displayName = 'Skeleton';\n\n/** Properties for the Skeleton.Group component. */\nexport interface SkeletonGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Visually hidden text announced in place of the decorative placeholders. Localize it.\n   * @default 'Loading'\n   */\n  label?: string;\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n/**\n * Container for the Skeletons of a loading region: `aria-busy=\"true\"` plus a visually hidden\n * `label` (\"Loading\"), while the placeholders stay decorative. It uses no live-region role, so it\n * does not interrupt; announce completion separately if needed. When the content arrives, remove\n * the group or pass `aria-busy={false}`, which also drops the hidden label (no stale \"Loading\" is\n * read before the content). A forwarded `aria-busy={undefined}` keeps the busy default. Flat\n * export for React Server Components (`Skeleton.Group` in client files).\n */\nexport const SkeletonGroup = ({\n  label = 'Loading',\n  // Destructured with a default rather than set before `{...rest}`: a wrapper that forwards\n  // `aria-busy={props['aria-busy']}` passes `undefined`, which must not strip the busy state.\n  'aria-busy': busy = true,\n  children,\n  ref,\n  ...rest\n}: SkeletonGroupProps) => {\n  const loading = busy !== false && busy !== 'false';\n  return (\n    <div {...rest} aria-busy={busy} ref={ref}>\n      {loading && <span className=\"sr-only\">{label}</span>}\n      {children}\n    </div>\n  );\n};\nSkeletonGroup.displayName = 'SkeletonGroup';\n\n/**\n * A decorative loading placeholder. Each Skeleton is `aria-hidden` (a consumer `aria-hidden`\n * overrides it); wrap the placeholders of a loading region in {@link SkeletonGroup}\n * (`Skeleton.Group`), which marks it busy and gives it a visually hidden \"Loading\" label.\n * The pulse animation stops for reduced motion; in forced-colors mode the placeholders are\n * painted `GrayText`. In React Server Components use the flat export `SkeletonGroup` instead of\n * `Skeleton.Group`.\n *\n * @example\n * <Skeleton.Group label=\"Loading profile\">\n *   <Skeleton shape=\"circular\" width={32} height={32} />\n *   <Skeleton width={160} height={12} />\n * </Skeleton.Group>\n */\nexport const Skeleton = /* @__PURE__ */ Object.assign(SkeletonRoot, { Group: SkeletonGroup });\n"],"mappings":";;;;;;AASA,IAAMA,IAAgD;CACpD,MAAM;CACN,UAAU;CACV,aAAa;AACf,GAOMC,IAAmB,sEAEnBC,IAAsC;CAC1C,SAAS;CACT,UAAU;CACV,QAAQ;AACV,GAsBMC,KAAgB,EACpB,UACA,WACA,OAAOC,GACP,YACA,cACA,UACA,QACA,GAAGC,QACgB;CACnB,IAAMC,IACJC,EACE,YACAH,GACAI,MAAY,KAAA,IAAY,KAAA,IAAYR,EAAcQ,IAClD,WACA,OACF,KAAK;CAEP,OACE,kBAAC,OAAD;EACE,eAAY;EACZ,GAAIH;EACC;EACL,WAAWI,EACT,6DACAR,GACAC,EAAaI,IACbI,CACF;EACA,OAAO;GAAE;GAAO;GAAQ,GAAGC;EAAM;CAClC,CAAA;AAEL;AACA,EAAa,cAAc;AAoB3B,IAAaC,KAAiB,EAC5B,WAAQ,WAGR,aAAaC,IAAO,IACpB,aACA,QACA,GAAGR,QACqB;CACxB,IAAMS,IAAUD,MAAS,MAASA,MAAS;CAC3C,OACE,kBAAC,OAAD;EAAK,GAAIR;EAAM,aAAWQ;EAAW;EAArC,UAAA,CACGC,KAAW,kBAAC,QAAD;GAAM,WAAU;GAAW,UAAAC;EAAY,CAAA,GAClDC,CACE;;AAET;AACA,EAAc,cAAc;AAgB5B,IAAaC,IAA2B,uBAAO,OAAOd,GAAc,EAAE,OAAOS,EAAc,CAAC"}

package/dist/components/feedback/Spinner.cjs

@@ -0,0 +1,2 @@
+"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/styles.cjs");let r=require("react");r=e.__toESM(r,1);let i=require("react/jsx-runtime");function a(e){return typeof e==`string`&&e.trim()!==``}var o={"extra-small":`w-3 h-3`,small:`w-4 h-4`,medium:`w-6 h-6`,large:`w-9 h-9`,"extra-large":`w-12 h-12`},s={primary:{ring:`border-track border-t-primary`,label:`text-muted-foreground`},inverted:{ring:`border-current/30 border-t-current`,label:`text-current`}},c=({size:e=`medium`,label:c=`Loading`,labelVisible:l,appearance:u=`primary`,delay:d=0,className:f,role:p=`status`,ref:m,...h})=>{let g=Number.isFinite(d)&&d>0?d:0,[_,v]=r.useState(g===0),[y,b]=r.useState(!1);r.useEffect(()=>{if(_)return;let e=setTimeout(()=>v(!0),g);return()=>clearTimeout(e)},[_,g]),r.useEffect(()=>{if(!_)return;let e=requestAnimationFrame(()=>b(!0));return()=>cancelAnimationFrame(e)},[_]);let x=p===`progressbar`&&!a(h[`aria-label`])&&!a(h[`aria-labelledby`]),S=Object.hasOwn(s,u??``)?u:`primary`,C=s[S];return(0,i.jsxs)(`span`,{"data-appearance":S,"data-state":_?`shown`:`delayed`,...h,role:p,"aria-label":x?c:h[`aria-label`],ref:m,className:t.cn(`inline-flex items-center gap-2`,f),children:[_?(0,i.jsx)(`span`,{"aria-hidden":`true`,"data-wave-spinner-ring":``,className:t.cn(`rounded-full border-2 animate-wave-spin motion-reduce:animate-wave-spin-slow`,C.ring,n.forcedColors.ringArc,o[e])}):null,(0,i.jsx)(`span`,{"data-wave-spinner-label":``,className:l?t.cn(`text-body-1`,C.label):`sr-only`,children:y?c:null})]})};c.displayName=`Spinner`,exports.Spinner=c;
+//# sourceMappingURL=Spinner.cjs.map