@mortenbrudvik/waveui 0.4.0 → 0.7.0

package/dist/components/data-display/List.registry.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"List.registry.mjs","names":["NO_VALUES","ListRegistrySnapshot","records","values","valueSet","duplicateSet","hasActions","record","ListRegistry","listener","previous","token","root","byElement","entry","element","ordered","current","moved","child","active","snapshot","value","loss"],"sources":["../../../src/components/data-display/List.registry.ts"],"sourcesContent":["/**\n * The item registry of the List component (internal module: not re-exported by the barrels).\n *\n * Items register their value in a layout effect; the List reads the registered set during render\n * (C-HOOKS: an external store instead of setState in an effect).\n */\n\nconst NO_VALUES: readonly string[] = [];\n\n/** What one mounted item registered. */\nexport interface ListItemRecord {\n  /** The item's explicit `value` (`undefined`: the item cannot be selected). */\n  value: string | undefined;\n  /** Whether the item has an action (a selectable list with actions renders a grid). */\n  hasAction: boolean;\n  /** The item element's ref, read after a commit to keep the records in DOM order. */\n  element: { readonly current: Element | null };\n}\n\n/** The data collected from the records, see {@link ListRegistrySnapshot}. */\nexport interface ListRegistryData {\n  values: readonly string[];\n  valueSet: ReadonlySet<string>;\n  /** Values that more than one item holds, each listed once. */\n  duplicates: readonly string[];\n  count: number;\n  hasActions: boolean;\n}\n\n/**\n * What the items of a List registered, published through `useSyncExternalStore`.\n *\n * Creating a snapshot is O(1): the data is collected from the records the first time it is read\n * (the List's next render), so a commit that mounts or unmounts n items costs O(n) in total\n * instead of one full rebuild per item (table-core#22). A newer snapshot replaces this one on every\n * change, and React always renders with the newest, so the lazily read records are the current\n * ones.\n */\nexport class ListRegistrySnapshot {\n  private data: ListRegistryData | null = null;\n\n  constructor(private readonly records: ReadonlyMap<object, ListItemRecord>) {}\n\n  /** Item values in DOM order (see {@link ListRegistry.syncOrder}), without duplicates. */\n  get values(): readonly string[] {\n    return this.read().values;\n  }\n\n  get valueSet(): ReadonlySet<string> {\n    return this.read().valueSet;\n  }\n\n  /** Values that more than one mounted item holds (each listed once). */\n  get duplicates(): readonly string[] {\n    return this.read().duplicates;\n  }\n\n  /** Number of mounted items (with or without a value). */\n  get count(): number {\n    return this.read().count;\n  }\n\n  /** Whether any item has an action. */\n  get hasActions(): boolean {\n    return this.read().hasActions;\n  }\n\n  /** Collects the data from the records: O(n), once per snapshot. Public for the cost test only. */\n  build(): ListRegistryData {\n    const values: string[] = [];\n    const valueSet = new Set<string>();\n    const duplicateSet = new Set<string>();\n    let hasActions = false;\n    for (const record of this.records.values()) {\n      if (record.hasAction) hasActions = true;\n      if (record.value === undefined) continue;\n      if (valueSet.has(record.value)) {\n        duplicateSet.add(record.value);\n      } else {\n        valueSet.add(record.value);\n        values.push(record.value);\n      }\n    }\n    const duplicates = duplicateSet.size > 0 ? Array.from(duplicateSet) : NO_VALUES;\n    return { values, valueSet, duplicates, count: this.records.size, hasActions };\n  }\n\n  private read(): ListRegistryData {\n    this.data ??= this.build();\n    return this.data;\n  }\n}\n\n/** The item that held focus when it was removed, recorded for the List's focus restore. */\nexport interface ListFocusLoss {\n  /** The item's explicit `value`, if it has one. */\n  value: string | undefined;\n  /** Its position among the list's items. */\n  index: number;\n}\n\n/**\n * The registry behind a List's snapshot.\n *\n * Only a selectable List publishes (`setActive(true)` in its layout effect): a plain list never\n * reads the registry, so its items' registrations cost O(1) and cause no renders. The snapshot is\n * `null` while inactive and until the List's first commit, so the server and the first client\n * render treat every selected value as present.\n */\nexport class ListRegistry {\n  private readonly records = new Map<object, ListItemRecord>();\n  private readonly listeners = new Set<() => void>();\n  private active = false;\n  private snapshot: ListRegistrySnapshot | null = null;\n  private focusLoss: ListFocusLoss | null = null;\n\n  subscribe = (listener: () => void): (() => void) => {\n    this.listeners.add(listener);\n    return () => {\n      this.listeners.delete(listener);\n    };\n  };\n\n  getSnapshot = (): ListRegistrySnapshot | null => this.snapshot;\n\n  getServerSnapshot = (): ListRegistrySnapshot | null => null;\n\n  /**\n   * Adds an item's record, or updates it in place: a `Map.set` on an existing token keeps its\n   * position, so an item whose value or action changes does not move to the end. Publishes only\n   * when the value or the action changed.\n   */\n  set(token: object, record: ListItemRecord): void {\n    const previous = this.records.get(token);\n    this.records.set(token, record);\n    if (previous && previous.value === record.value && previous.hasAction === record.hasAction) {\n      return;\n    }\n    this.publish();\n  }\n\n  /** Removes an item's record (on unmount only). */\n  delete(token: object): void {\n    if (this.records.delete(token)) this.publish();\n  }\n\n  /**\n   * Puts the records in DOM order, so `values` (and with it the List's Tab stop, the first selected\n   * item) follows the DOM. Items that mount between others register last, and keyed moves do not\n   * register again, so the List calls this after each of its commits. O(n); publishes only when\n   * the order changed. The records keep their registration order while an item is not a direct\n   * child of `root` (an element wrapped around an item) or has no element.\n   *\n   * The children are walked with `nextElementSibling`, never through the `root.children`\n   * collection: jsdom before 30.1 does not cache indexed `HTMLCollection` access, so an indexed\n   * loop (or `Array.from`) is O(n²) there and made every commit of a large list in a consumer's\n   * test suite cost seconds.\n   */\n  syncOrder(root: Element | null): void {\n    if (!this.active || !root || this.records.size < 2) return;\n    const byElement = new Map<Element, [object, ListItemRecord]>();\n    for (const entry of this.records) {\n      const element = entry[1].element.current;\n      if (!element || element.parentElement !== root) return;\n      byElement.set(element, entry);\n    }\n    const ordered: [object, ListItemRecord][] = [];\n    const current = this.records.keys();\n    let moved = false;\n    for (let child = root.firstElementChild; child; child = child.nextElementSibling) {\n      const entry = byElement.get(child);\n      if (!entry) continue;\n      ordered.push(entry);\n      if (!moved && current.next().value !== entry[0]) moved = true;\n    }\n    if (!moved || ordered.length !== this.records.size) return;\n    this.records.clear();\n    for (const [token, record] of ordered) this.records.set(token, record);\n    this.publish();\n  }\n\n  /** Called by the List after each commit that changes `selectable` (and on mount). */\n  setActive(active: boolean): void {\n    if (active === this.active) return;\n    this.active = active;\n    if (active) {\n      this.publish();\n    } else if (this.snapshot !== null) {\n      this.snapshot = null;\n      this.notify();\n    }\n  }\n\n  /** `values` without the ones no mounted item has (read at event time). */\n  prune(values: readonly string[]): string[] {\n    const snapshot = this.snapshot;\n    return snapshot ? values.filter((value) => snapshot.valueSet.has(value)) : [...values];\n  }\n\n  /**\n   * Records that a removed item (or action) held focus. Only the current commit can use it: the\n   * record is dropped in a microtask, so a later commit never moves focus because of an old removal.\n   */\n  recordFocusLoss(loss: ListFocusLoss): void {\n    this.focusLoss = loss;\n    queueMicrotask(() => {\n      if (this.focusLoss === loss) this.focusLoss = null;\n    });\n  }\n\n  takeFocusLoss(): ListFocusLoss | null {\n    const loss = this.focusLoss;\n    this.focusLoss = null;\n    return loss;\n  }\n\n  private publish(): void {\n    if (!this.active) return;\n    this.snapshot = new ListRegistrySnapshot(this.records);\n    this.notify();\n  }\n\n  private notify(): void {\n    for (const listener of this.listeners) listener();\n  }\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/slot.cjs"),r=require("./Avatar.cjs"),i=require("./PresenceBadge.cjs");let a=require("react");a=e.__toESM(a,1);let o=require("react/jsx-runtime");function s(e){return e===`extra-small`||e===`small`?`small`:`medium`}var c=({name:e,secondaryText:a,src:c,size:l=`medium`,status:u,avatar:d,badge:f,className:p,ref:m,...h})=>{let g=f&&n.slotRendersContent(f)?n.renderSlot(f,`span`):u?(0,o.jsx)(i.PresenceBadge,{status:u,size:s(l)}):null;return(0,o.jsxs)(`div`,{ref:m,className:t.cn(`inline-flex items-center gap-3`,p),...h,children:[(0,o.jsxs)(`div`,{className:`relative inline-flex shrink-0`,children:[d&&n.slotRendersContent(d)?n.renderSlot(d,`span`):(0,o.jsx)(r.Avatar,{src:c,name:e,size:l,decorative:!0}),g&&(0,o.jsx)(`span`,{className:`absolute bottom-0 end-0 inline-flex`,children:g})]}),(0,o.jsxs)(`div`,{className:`flex flex-col`,children:[(0,o.jsx)(`span`,{className:`font-semibold text-body-1`,children:e}),a&&(0,o.jsx)(`span`,{className:`text-caption-1 text-muted-foreground`,children:a})]})]})};c.displayName=`Persona`,exports.Persona=c;
+//# sourceMappingURL=Persona.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Persona.cjs","names":["slotRendersContent","renderSlot","PresenceBadge","cn","Avatar","require_runtime","require_cn","require_slot","require_Avatar","require_PresenceBadge","react","react_jsx_runtime","derivePresenceSize","size","Persona","props","badgeNode","badge","status","className","avatar","name","secondaryText"],"sources":["../../../src/components/data-display/Persona.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport type { PresenceStatus, Size, Slot } from '../../lib/types';\nimport { renderSlot, slotRendersContent } from '../../lib/slot';\nimport { Avatar } from './Avatar';\nimport { PresenceBadge } from './PresenceBadge';\n\n/** Properties for the Persona component. */\nexport interface PersonaProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Display name of the person. */\n  name: string;\n  /** Secondary text such as job title or email. */\n  secondaryText?: string;\n  /** URL of the person's avatar image. */\n  src?: string;\n  /** Size of the persona avatar.\n   * @default 'medium'\n   */\n  size?: Size;\n  /** Presence status shown as a badge on the avatar. Ignored when a `badge` is given. */\n  status?: PresenceStatus;\n  /**\n   * Slot for a custom avatar element, replacing the built-in one. The name is already visible\n   * next to it, so make a custom avatar decorative (e.g. `<Avatar decorative … />`). A value that\n   * renders nothing (`null`, `false`, `''`, `0`, `NaN`, or an array, `Set` or generator of only\n   * such items) counts as not given.\n   */\n  avatar?: Slot<'span'>;\n  /**\n   * Slot for a custom badge element. Takes precedence over `status`. A value that renders nothing\n   * (`null`, `false`, `''`, `0`, `NaN`, e.g. `badge={count && <CounterBadge count={count} />}`,\n   * or an array, `Set` or generator of only such items) counts as not given.\n   */\n  badge?: Slot<'span'>;\n  /** Ref to the root `<div>`. */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\nfunction derivePresenceSize(size: Size): Size {\n  return size === 'extra-small' || size === 'small' ? 'small' : 'medium';\n}\n\n/**\n * A person's avatar next to their name and optional secondary text (job title, email), with an\n * optional presence badge.\n *\n * The built-in avatar is decorative (`<Avatar decorative>`): the visible name is announced once,\n * not a second time as the avatar's image name. The presence badge stays exposed as a named image.\n *\n * @example\n * <Persona name=\"Jane Doe\" secondaryText=\"Designer\" status=\"available\" />\n */\nexport const Persona = ({\n  name,\n  secondaryText,\n  src,\n  size = 'medium',\n  status,\n  avatar,\n  badge,\n  className,\n  ref,\n  ...props\n}: PersonaProps) => {\n  // A slot that renders nothing (`badge={count && …}` with count 0, an empty `.map()` result) is\n  // not given (C-SLOTS), so the status badge and the built-in avatar apply.\n  const badgeNode =\n    badge && slotRendersContent(badge) ? (\n      renderSlot(badge, 'span')\n    ) : status ? (\n      <PresenceBadge status={status} size={derivePresenceSize(size)} />\n    ) : null;\n\n  return (\n    <div ref={ref} className={cn('inline-flex items-center gap-3', className)} {...props}>\n      <div className=\"relative inline-flex shrink-0\">\n        {avatar && slotRendersContent(avatar) ? (\n          renderSlot(avatar, 'span')\n        ) : (\n          <Avatar src={src} name={name} size={size} decorative />\n        )}\n        {badgeNode && <span className=\"absolute bottom-0 end-0 inline-flex\">{badgeNode}</span>}\n      </div>\n      <div className=\"flex flex-col\">\n        <span className=\"font-semibold text-body-1\">{name}</span>\n        {secondaryText && (\n          <span className=\"text-caption-1 text-muted-foreground\">{secondaryText}</span>\n        )}\n      </div>\n    </div>\n  );\n};\n\nPersona.displayName = 'Persona';\n"],"mappings":"yQAsCA,SAASY,EAAmB,EAAkB,CAC5C,OAAOC,IAAS,eAAiBA,IAAS,QAAU,QAAU,QAChE,CAYA,IAAaC,GAAW,CACtB,OACA,gBACA,MACA,OAAO,SACP,SACA,SACA,QACA,YACA,MACA,GAAGC,KACe,CAGlB,IAAMC,EACJC,GAASjB,EAAAA,mBAAmBiB,CAAK,EAC/BhB,EAAAA,WAAWgB,EAAO,MAAM,EACtBC,GACF,EAAAP,EAAA,IAAA,CAACT,EAAAA,cAAD,CAAuB,SAAQ,KAAMU,EAAmBC,CAAI,CAAI,CAAA,EAC9D,KAEN,OACE,EAAAF,EAAA,KAAA,CAAC,MAAD,CAAU,MAAK,UAAWR,EAAAA,GAAG,iCAAkCgB,CAAS,EAAG,GAAIJ,EAA/E,SAAA,EACE,EAAAJ,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,gCAAf,SAAA,CACGS,GAAUpB,EAAAA,mBAAmBoB,CAAM,EAClCnB,EAAAA,WAAWmB,EAAQ,MAAM,GAEzB,EAAAT,EAAA,IAAA,CAACP,EAAAA,OAAD,CAAa,MAAW,OAAY,OAAM,WAAA,EAAY,CAAA,EAEvDY,IAAa,EAAAL,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,sCAAuC,SAAAK,CAAgB,CAAA,CAClF,CACL,CAAA,GAAA,EAAAL,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,gBAAf,SAAA,EACE,EAAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,4BAA6B,SAAAU,CAAW,CAAA,EACvDC,IACC,EAAAX,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,uCAAwC,SAAAW,CAAoB,CAAA,CAE3E,CACF,CAAA,CAAA,GAET,EAEA,EAAQ,YAAc"}

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

@@ -0,0 +1,48 @@
+"use client";
+import { cn as e } from "../../lib/cn.mjs";
+import { renderSlot as t, slotRendersContent as n } from "../../lib/slot.mjs";
+import { Avatar as r } from "./Avatar.mjs";
+import { PresenceBadge as i } from "./PresenceBadge.mjs";
+import "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/components/data-display/Persona.tsx
+function s(e) {
+	return e === "extra-small" || e === "small" ? "small" : "medium";
+}
+var c = ({ name: c, secondaryText: l, src: u, size: d = "medium", status: f, avatar: p, badge: m, className: h, ref: g, ..._ }) => {
+	let v = m && n(m) ? t(m, "span") : f ? /* @__PURE__ */ a(i, {
+		status: f,
+		size: s(d)
+	}) : null;
+	return /* @__PURE__ */ o("div", {
+		ref: g,
+		className: e("inline-flex items-center gap-3", h),
+		..._,
+		children: [/* @__PURE__ */ o("div", {
+			className: "relative inline-flex shrink-0",
+			children: [p && n(p) ? t(p, "span") : /* @__PURE__ */ a(r, {
+				src: u,
+				name: c,
+				size: d,
+				decorative: !0
+			}), v && /* @__PURE__ */ a("span", {
+				className: "absolute bottom-0 end-0 inline-flex",
+				children: v
+			})]
+		}), /* @__PURE__ */ o("div", {
+			className: "flex flex-col",
+			children: [/* @__PURE__ */ a("span", {
+				className: "font-semibold text-body-1",
+				children: c
+			}), l && /* @__PURE__ */ a("span", {
+				className: "text-caption-1 text-muted-foreground",
+				children: l
+			})]
+		})]
+	});
+};
+c.displayName = "Persona";
+//#endregion
+export { c as Persona };
+
+//# sourceMappingURL=Persona.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Persona.mjs","names":["derivePresenceSize","size","Persona","props","badgeNode","badge","slotRendersContent","renderSlot","status","PresenceBadge","cn","className","avatar","Avatar","name","secondaryText"],"sources":["../../../src/components/data-display/Persona.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport type { PresenceStatus, Size, Slot } from '../../lib/types';\nimport { renderSlot, slotRendersContent } from '../../lib/slot';\nimport { Avatar } from './Avatar';\nimport { PresenceBadge } from './PresenceBadge';\n\n/** Properties for the Persona component. */\nexport interface PersonaProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Display name of the person. */\n  name: string;\n  /** Secondary text such as job title or email. */\n  secondaryText?: string;\n  /** URL of the person's avatar image. */\n  src?: string;\n  /** Size of the persona avatar.\n   * @default 'medium'\n   */\n  size?: Size;\n  /** Presence status shown as a badge on the avatar. Ignored when a `badge` is given. */\n  status?: PresenceStatus;\n  /**\n   * Slot for a custom avatar element, replacing the built-in one. The name is already visible\n   * next to it, so make a custom avatar decorative (e.g. `<Avatar decorative … />`). A value that\n   * renders nothing (`null`, `false`, `''`, `0`, `NaN`, or an array, `Set` or generator of only\n   * such items) counts as not given.\n   */\n  avatar?: Slot<'span'>;\n  /**\n   * Slot for a custom badge element. Takes precedence over `status`. A value that renders nothing\n   * (`null`, `false`, `''`, `0`, `NaN`, e.g. `badge={count && <CounterBadge count={count} />}`,\n   * or an array, `Set` or generator of only such items) counts as not given.\n   */\n  badge?: Slot<'span'>;\n  /** Ref to the root `<div>`. */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\nfunction derivePresenceSize(size: Size): Size {\n  return size === 'extra-small' || size === 'small' ? 'small' : 'medium';\n}\n\n/**\n * A person's avatar next to their name and optional secondary text (job title, email), with an\n * optional presence badge.\n *\n * The built-in avatar is decorative (`<Avatar decorative>`): the visible name is announced once,\n * not a second time as the avatar's image name. The presence badge stays exposed as a named image.\n *\n * @example\n * <Persona name=\"Jane Doe\" secondaryText=\"Designer\" status=\"available\" />\n */\nexport const Persona = ({\n  name,\n  secondaryText,\n  src,\n  size = 'medium',\n  status,\n  avatar,\n  badge,\n  className,\n  ref,\n  ...props\n}: PersonaProps) => {\n  // A slot that renders nothing (`badge={count && …}` with count 0, an empty `.map()` result) is\n  // not given (C-SLOTS), so the status badge and the built-in avatar apply.\n  const badgeNode =\n    badge && slotRendersContent(badge) ? (\n      renderSlot(badge, 'span')\n    ) : status ? (\n      <PresenceBadge status={status} size={derivePresenceSize(size)} />\n    ) : null;\n\n  return (\n    <div ref={ref} className={cn('inline-flex items-center gap-3', className)} {...props}>\n      <div className=\"relative inline-flex shrink-0\">\n        {avatar && slotRendersContent(avatar) ? (\n          renderSlot(avatar, 'span')\n        ) : (\n          <Avatar src={src} name={name} size={size} decorative />\n        )}\n        {badgeNode && <span className=\"absolute bottom-0 end-0 inline-flex\">{badgeNode}</span>}\n      </div>\n      <div className=\"flex flex-col\">\n        <span className=\"font-semibold text-body-1\">{name}</span>\n        {secondaryText && (\n          <span className=\"text-caption-1 text-muted-foreground\">{secondaryText}</span>\n        )}\n      </div>\n    </div>\n  );\n};\n\nPersona.displayName = 'Persona';\n"],"mappings":";;;;;;;;AAsCA,SAASA,EAAmB,GAAkB;CAC5C,OAAOC,MAAS,iBAAiBA,MAAS,UAAU,UAAU;AAChE;AAYA,IAAaC,KAAW,EACtB,SACA,kBACA,QACA,UAAO,UACP,WACA,WACA,UACA,cACA,QACA,GAAGC,QACe;CAGlB,IAAMC,IACJC,KAASC,EAAmBD,CAAK,IAC/BE,EAAWF,GAAO,MAAM,IACtBG,IACF,kBAACC,GAAD;EAAuB;EAAQ,MAAMT,EAAmBC,CAAI;CAAI,CAAA,IAC9D;CAEN,OACE,kBAAC,OAAD;EAAU;EAAK,WAAWS,EAAG,kCAAkCC,CAAS;EAAG,GAAIR;EAA/E,UAAA,CACE,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACGS,KAAUN,EAAmBM,CAAM,IAClCL,EAAWK,GAAQ,MAAM,IAEzB,kBAACC,GAAD;IAAa;IAAW;IAAY;IAAM,YAAA;GAAY,CAAA,GAEvDT,KAAa,kBAAC,QAAD;IAAM,WAAU;IAAuC,UAAAA;GAAgB,CAAA,CAClF;EACL,CAAA,GAAA,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,kBAAC,QAAD;IAAM,WAAU;IAA6B,UAAAU;GAAW,CAAA,GACvDC,KACC,kBAAC,QAAD;IAAM,WAAU;IAAwC,UAAAA;GAAoB,CAAA,CAE3E;EACF,CAAA,CAAA;;AAET;AAEA,EAAQ,cAAc"}

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

@@ -0,0 +1,2 @@
+"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/styles.cjs"),r=require("../../lib/icons.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("react/jsx-runtime");var o={available:{glyph:`check`,Icon:r.PresenceAvailableIcon,className:`bg-presence-available text-presence-glyph`},busy:{glyph:`solid`,Icon:r.PresenceBusyIcon,className:`bg-presence-busy text-presence-busy`},away:{glyph:`clock`,Icon:r.PresenceAwayIcon,className:`bg-presence-away text-presence-glyph`},offline:{glyph:`ring-x`,Icon:r.PresenceOfflineIcon,className:`bg-background text-presence-offline`},dnd:{glyph:`bar`,Icon:r.PresenceDndIcon,className:`bg-presence-busy text-presence-glyph`},oof:{glyph:`arrow`,Icon:r.PresenceOofIcon,className:`bg-presence-oof text-presence-glyph`}},s={available:`Available`,busy:`Busy`,away:`Away`,offline:`Offline`,dnd:`Do not disturb`,oof:`Out of office`},c={"extra-small":`size-2`,small:`size-2.5`,medium:`size-3`,large:`size-4`,"extra-large":`size-5`},l=({status:e,size:r=`medium`,className:i,ref:l,...u})=>{let{glyph:d,Icon:f,className:p}=o[e];return(0,a.jsx)(`span`,{ref:l,role:`img`,"aria-label":s[e],"data-glyph":d,...u,className:t.cn(`inline-flex shrink-0 items-center justify-center rounded-full ring-2 ring-background`,`forced-colors:border`,n.forcedColors.border,c[r],p,i),children:(0,a.jsx)(f,{size:`100%`,className:t.cn(`size-full`,d===`arrow`&&`wave-rtl:-scale-x-100`)})})};l.displayName=`PresenceBadge`,exports.PresenceBadge=l;
+//# sourceMappingURL=PresenceBadge.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PresenceBadge.cjs","names":["PresenceAvailableIcon","PresenceBusyIcon","PresenceAwayIcon","PresenceOfflineIcon","PresenceDndIcon","PresenceOofIcon","cn","forcedColors","require_runtime","require_cn","require_styles","require_icons","react","react_jsx_runtime","statusStyles","statusLabels","sizeClasses","PresenceBadge","props","statusClassName","status","glyph","size","className","Icon"],"sources":["../../../src/components/data-display/PresenceBadge.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport {\n  PresenceAvailableIcon,\n  PresenceAwayIcon,\n  PresenceBusyIcon,\n  PresenceDndIcon,\n  PresenceOfflineIcon,\n  PresenceOofIcon,\n} from '../../lib/icons';\nimport type { IconComponent } from '../../lib/icons';\nimport { forcedColors } from '../../lib/styles';\nimport type { PresenceStatus, Size } from '../../lib/types';\n\n/** Properties for the PresenceBadge component. */\nexport interface PresenceBadgeProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /** Presence status to display. */\n  status: PresenceStatus;\n  /** Size of the presence indicator.\n   * @default 'medium'\n   */\n  size?: Size;\n  /** Ref to the root `<span>`. */\n  ref?: React.Ref<HTMLSpanElement>;\n}\n\n/** The shape drawn for a status, exposed as `data-glyph` (styling hook and test contract). */\ntype PresenceGlyph = 'check' | 'solid' | 'clock' | 'ring-x' | 'bar' | 'arrow';\n\n/**\n * Per status: the glyph name, its shared icon (src/lib/icons.tsx, drawn in a 16×16 box that the\n * badge circle fills) and the colors. Busy is a full disc in `currentColor`: forced-colors mode\n * replaces the background with Canvas but forces `color` to CanvasText, so busy stays a solid dot\n * instead of an empty ring.\n */\nconst statusStyles: Record<\n  PresenceStatus,\n  { glyph: PresenceGlyph; Icon: IconComponent; className: string }\n> = {\n  available: {\n    glyph: 'check',\n    Icon: PresenceAvailableIcon,\n    className: 'bg-presence-available text-presence-glyph',\n  },\n  busy: {\n    glyph: 'solid',\n    Icon: PresenceBusyIcon,\n    className: 'bg-presence-busy text-presence-busy',\n  },\n  away: {\n    glyph: 'clock',\n    Icon: PresenceAwayIcon,\n    className: 'bg-presence-away text-presence-glyph',\n  },\n  offline: {\n    glyph: 'ring-x',\n    Icon: PresenceOfflineIcon,\n    className: 'bg-background text-presence-offline',\n  },\n  dnd: { glyph: 'bar', Icon: PresenceDndIcon, className: 'bg-presence-busy text-presence-glyph' },\n  oof: { glyph: 'arrow', Icon: PresenceOofIcon, className: 'bg-presence-oof text-presence-glyph' },\n};\n\nconst statusLabels: Record<PresenceStatus, string> = {\n  available: 'Available',\n  busy: 'Busy',\n  away: 'Away',\n  offline: 'Offline',\n  dnd: 'Do not disturb',\n  oof: 'Out of office',\n};\n\nconst sizeClasses: Record<Size, string> = {\n  'extra-small': 'size-2', // 8px\n  small: 'size-2.5', // 10px\n  medium: 'size-3', // 12px\n  large: 'size-4', // 16px\n  'extra-large': 'size-5', // 20px\n};\n\n/**\n * A person's availability as a small badge, usually placed on an `Avatar` (`badge` prop).\n *\n * Every status has its own shape, so it is not conveyed by color alone: available (check),\n * busy (solid), away (clock), offline (hollow ring with an X), do not disturb (bar), out of office\n * (arrow, mirrored in right-to-left layouts). A background-colored ring separates it from the\n * avatar. It is a named image (`role=\"img\"`, `aria-label` = the status name; pass `aria-label` to\n * localise or extend it) and never a live region.\n *\n * @example\n * <PresenceBadge status=\"busy\" />\n */\nexport const PresenceBadge = ({\n  status,\n  size = 'medium',\n  className,\n  ref,\n  ...props\n}: PresenceBadgeProps) => {\n  const { glyph, Icon, className: statusClassName } = statusStyles[status];\n\n  return (\n    <span\n      ref={ref}\n      role=\"img\"\n      aria-label={statusLabels[status]}\n      data-glyph={glyph}\n      {...props}\n      className={cn(\n        'inline-flex shrink-0 items-center justify-center rounded-full ring-2 ring-background',\n        'forced-colors:border',\n        forcedColors.border,\n        sizeClasses[size],\n        statusClassName,\n        className,\n      )}\n    >\n      <Icon size=\"100%\" className={cn('size-full', glyph === 'arrow' && 'wave-rtl:-scale-x-100')} />\n    </span>\n  );\n};\n\nPresenceBadge.displayName = 'PresenceBadge';\n"],"mappings":"iPAmCA,IAAMc,EAGF,CACF,UAAW,CACT,MAAO,QACP,KAAMd,EAAAA,sBACN,UAAW,2CACb,EACA,KAAM,CACJ,MAAO,QACP,KAAMC,EAAAA,iBACN,UAAW,qCACb,EACA,KAAM,CACJ,MAAO,QACP,KAAMC,EAAAA,iBACN,UAAW,sCACb,EACA,QAAS,CACP,MAAO,SACP,KAAMC,EAAAA,oBACN,UAAW,qCACb,EACA,IAAK,CAAE,MAAO,MAAO,KAAMC,EAAAA,gBAAiB,UAAW,sCAAuC,EAC9F,IAAK,CAAE,MAAO,QAAS,KAAMC,EAAAA,gBAAiB,UAAW,qCAAsC,CACjG,EAEMU,EAA+C,CACnD,UAAW,YACX,KAAM,OACN,KAAM,OACN,QAAS,UACT,IAAK,iBACL,IAAK,eACP,EAEMC,EAAoC,CACxC,cAAe,SACf,MAAO,WACP,OAAQ,SACR,MAAO,SACP,cAAe,QACjB,EAcaC,GAAiB,CAC5B,SACA,OAAO,SACP,YACA,MACA,GAAGC,KACqB,CACxB,GAAM,CAAE,QAAO,OAAM,UAAWC,GAAoBL,EAAaM,GAEjE,OACE,EAAAP,EAAA,IAAA,CAAC,OAAD,CACO,MACL,KAAK,MACL,aAAYE,EAAaK,GACzB,aAAYC,EACZ,GAAIH,EACJ,UAAWZ,EAAAA,GACT,uFACA,uBACAC,EAAAA,aAAa,OACbS,EAAYM,GACZH,EACAI,CACF,EAEA,UAAA,EAAAV,EAAA,IAAA,CAACW,EAAD,CAAM,KAAK,OAAO,UAAWlB,EAAAA,GAAG,YAAae,IAAU,SAAW,uBAAuB,CAAI,CAAA,CACzF,CAAA,CAEV,EAEA,EAAc,YAAc"}

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

@@ -0,0 +1,71 @@
+"use client";
+import { cn as e } from "../../lib/cn.mjs";
+import { forcedColors as t } from "../../lib/styles.mjs";
+import { PresenceAvailableIcon as n, PresenceAwayIcon as r, PresenceBusyIcon as i, PresenceDndIcon as a, PresenceOfflineIcon as o, PresenceOofIcon as s } from "../../lib/icons.mjs";
+import "react";
+import { jsx as c } from "react/jsx-runtime";
+//#region src/components/data-display/PresenceBadge.tsx
+var l = {
+	available: {
+		glyph: "check",
+		Icon: n,
+		className: "bg-presence-available text-presence-glyph"
+	},
+	busy: {
+		glyph: "solid",
+		Icon: i,
+		className: "bg-presence-busy text-presence-busy"
+	},
+	away: {
+		glyph: "clock",
+		Icon: r,
+		className: "bg-presence-away text-presence-glyph"
+	},
+	offline: {
+		glyph: "ring-x",
+		Icon: o,
+		className: "bg-background text-presence-offline"
+	},
+	dnd: {
+		glyph: "bar",
+		Icon: a,
+		className: "bg-presence-busy text-presence-glyph"
+	},
+	oof: {
+		glyph: "arrow",
+		Icon: s,
+		className: "bg-presence-oof text-presence-glyph"
+	}
+}, u = {
+	available: "Available",
+	busy: "Busy",
+	away: "Away",
+	offline: "Offline",
+	dnd: "Do not disturb",
+	oof: "Out of office"
+}, d = {
+	"extra-small": "size-2",
+	small: "size-2.5",
+	medium: "size-3",
+	large: "size-4",
+	"extra-large": "size-5"
+}, f = ({ status: n, size: r = "medium", className: i, ref: a, ...o }) => {
+	let { glyph: s, Icon: f, className: p } = l[n];
+	return /* @__PURE__ */ c("span", {
+		ref: a,
+		role: "img",
+		"aria-label": u[n],
+		"data-glyph": s,
+		...o,
+		className: e("inline-flex shrink-0 items-center justify-center rounded-full ring-2 ring-background", "forced-colors:border", t.border, d[r], p, i),
+		children: /* @__PURE__ */ c(f, {
+			size: "100%",
+			className: e("size-full", s === "arrow" && "wave-rtl:-scale-x-100")
+		})
+	});
+};
+f.displayName = "PresenceBadge";
+//#endregion
+export { f as PresenceBadge };
+
+//# sourceMappingURL=PresenceBadge.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PresenceBadge.mjs","names":["statusStyles","PresenceAvailableIcon","PresenceBusyIcon","PresenceAwayIcon","PresenceOfflineIcon","PresenceDndIcon","PresenceOofIcon","statusLabels","sizeClasses","PresenceBadge","props","statusClassName","status","glyph","cn","forcedColors","size","className","Icon"],"sources":["../../../src/components/data-display/PresenceBadge.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport {\n  PresenceAvailableIcon,\n  PresenceAwayIcon,\n  PresenceBusyIcon,\n  PresenceDndIcon,\n  PresenceOfflineIcon,\n  PresenceOofIcon,\n} from '../../lib/icons';\nimport type { IconComponent } from '../../lib/icons';\nimport { forcedColors } from '../../lib/styles';\nimport type { PresenceStatus, Size } from '../../lib/types';\n\n/** Properties for the PresenceBadge component. */\nexport interface PresenceBadgeProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /** Presence status to display. */\n  status: PresenceStatus;\n  /** Size of the presence indicator.\n   * @default 'medium'\n   */\n  size?: Size;\n  /** Ref to the root `<span>`. */\n  ref?: React.Ref<HTMLSpanElement>;\n}\n\n/** The shape drawn for a status, exposed as `data-glyph` (styling hook and test contract). */\ntype PresenceGlyph = 'check' | 'solid' | 'clock' | 'ring-x' | 'bar' | 'arrow';\n\n/**\n * Per status: the glyph name, its shared icon (src/lib/icons.tsx, drawn in a 16×16 box that the\n * badge circle fills) and the colors. Busy is a full disc in `currentColor`: forced-colors mode\n * replaces the background with Canvas but forces `color` to CanvasText, so busy stays a solid dot\n * instead of an empty ring.\n */\nconst statusStyles: Record<\n  PresenceStatus,\n  { glyph: PresenceGlyph; Icon: IconComponent; className: string }\n> = {\n  available: {\n    glyph: 'check',\n    Icon: PresenceAvailableIcon,\n    className: 'bg-presence-available text-presence-glyph',\n  },\n  busy: {\n    glyph: 'solid',\n    Icon: PresenceBusyIcon,\n    className: 'bg-presence-busy text-presence-busy',\n  },\n  away: {\n    glyph: 'clock',\n    Icon: PresenceAwayIcon,\n    className: 'bg-presence-away text-presence-glyph',\n  },\n  offline: {\n    glyph: 'ring-x',\n    Icon: PresenceOfflineIcon,\n    className: 'bg-background text-presence-offline',\n  },\n  dnd: { glyph: 'bar', Icon: PresenceDndIcon, className: 'bg-presence-busy text-presence-glyph' },\n  oof: { glyph: 'arrow', Icon: PresenceOofIcon, className: 'bg-presence-oof text-presence-glyph' },\n};\n\nconst statusLabels: Record<PresenceStatus, string> = {\n  available: 'Available',\n  busy: 'Busy',\n  away: 'Away',\n  offline: 'Offline',\n  dnd: 'Do not disturb',\n  oof: 'Out of office',\n};\n\nconst sizeClasses: Record<Size, string> = {\n  'extra-small': 'size-2', // 8px\n  small: 'size-2.5', // 10px\n  medium: 'size-3', // 12px\n  large: 'size-4', // 16px\n  'extra-large': 'size-5', // 20px\n};\n\n/**\n * A person's availability as a small badge, usually placed on an `Avatar` (`badge` prop).\n *\n * Every status has its own shape, so it is not conveyed by color alone: available (check),\n * busy (solid), away (clock), offline (hollow ring with an X), do not disturb (bar), out of office\n * (arrow, mirrored in right-to-left layouts). A background-colored ring separates it from the\n * avatar. It is a named image (`role=\"img\"`, `aria-label` = the status name; pass `aria-label` to\n * localise or extend it) and never a live region.\n *\n * @example\n * <PresenceBadge status=\"busy\" />\n */\nexport const PresenceBadge = ({\n  status,\n  size = 'medium',\n  className,\n  ref,\n  ...props\n}: PresenceBadgeProps) => {\n  const { glyph, Icon, className: statusClassName } = statusStyles[status];\n\n  return (\n    <span\n      ref={ref}\n      role=\"img\"\n      aria-label={statusLabels[status]}\n      data-glyph={glyph}\n      {...props}\n      className={cn(\n        'inline-flex shrink-0 items-center justify-center rounded-full ring-2 ring-background',\n        'forced-colors:border',\n        forcedColors.border,\n        sizeClasses[size],\n        statusClassName,\n        className,\n      )}\n    >\n      <Icon size=\"100%\" className={cn('size-full', glyph === 'arrow' && 'wave-rtl:-scale-x-100')} />\n    </span>\n  );\n};\n\nPresenceBadge.displayName = 'PresenceBadge';\n"],"mappings":";;;;;;;AAmCA,IAAMA,IAGF;CACF,WAAW;EACT,OAAO;EACP,MAAMC;EACN,WAAW;CACb;CACA,MAAM;EACJ,OAAO;EACP,MAAMC;EACN,WAAW;CACb;CACA,MAAM;EACJ,OAAO;EACP,MAAMC;EACN,WAAW;CACb;CACA,SAAS;EACP,OAAO;EACP,MAAMC;EACN,WAAW;CACb;CACA,KAAK;EAAE,OAAO;EAAO,MAAMC;EAAiB,WAAW;CAAuC;CAC9F,KAAK;EAAE,OAAO;EAAS,MAAMC;EAAiB,WAAW;CAAsC;AACjG,GAEMC,IAA+C;CACnD,WAAW;CACX,MAAM;CACN,MAAM;CACN,SAAS;CACT,KAAK;CACL,KAAK;AACP,GAEMC,IAAoC;CACxC,eAAe;CACf,OAAO;CACP,QAAQ;CACR,OAAO;CACP,eAAe;AACjB,GAcaC,KAAiB,EAC5B,WACA,UAAO,UACP,cACA,QACA,GAAGC,QACqB;CACxB,IAAM,EAAE,UAAO,SAAM,WAAWC,MAAoBX,EAAaY;CAEjE,OACE,kBAAC,QAAD;EACO;EACL,MAAK;EACL,cAAYL,EAAaK;EACzB,cAAYC;EACZ,GAAIH;EACJ,WAAWI,EACT,wFACA,wBACAC,EAAa,QACbP,EAAYQ,IACZL,GACAM,CACF;EAEA,UAAA,kBAACC,GAAD;GAAM,MAAK;GAAO,WAAWJ,EAAG,aAAaD,MAAU,WAAW,uBAAuB;EAAI,CAAA;CACzF,CAAA;AAEV;AAEA,EAAc,cAAc"}

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

@@ -0,0 +1,2 @@
+"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/children.cjs"),r=require("../../lib/dev.cjs"),i=require("../../lib/slot.cjs"),a=require("../../hooks/useId.cjs"),o=require("../../lib/styles.cjs"),s=require("../button/Button.cjs"),c=require("../../lib/icons.cjs"),l=require("../../lib/mergeProps.cjs"),u=require("../button/Button.slots.cjs"),d=require("../../lib/labelInName.cjs");let f=require("react");f=e.__toESM(f,1);let p=require("react/jsx-runtime");var m=new Set([`type`,`disabled`,`autoFocus`,`form`,`formAction`,`formEncType`,`formMethod`,`formNoValidate`,`formTarget`,`name`,`value`]),h=/^on[A-Z]/,g=new Set([`aria-label`,`aria-labelledby`]),_=()=>{};function v(e){let t={},n=!1;for(let[r,i]of Object.entries(e))g.has(r)?i!==void 0&&(n=!0):t[r]=i;return{props:t,ignoredName:n}}var y=`inline-flex items-center justify-center`;function b(e){if(typeof e!=`object`||!e||f.isValidElement(e)||Symbol.iterator in e)return!1;let t=Object.getPrototypeOf(e);return t===null||t===Object.prototype}function x(){return(0,p.jsx)(c.DismissIcon,{size:12})}function S(e){if(!i.slotRendersContent(e))return{buttonProps:null,content:x(),warning:null,ignoredName:!1,contentMayName:!1,literalTextLabel:!1,disabledFocusable:!1};let t=n.getElementType(e);if(f.isValidElement(e)&&(t===`button`||t===s.Button)){let{children:n,dangerouslySetInnerHTML:r,...a}=e.props,o=t===s.Button,c=a;if(o){c={};for(let[e,t]of Object.entries(a))u.BUTTON_OWN_PROP_KEYS.has(e)||(c[e]=t)}let l=o?a.icon:void 0,{props:f,ignoredName:m}=v(c),h=i.slotRendersContent(l)?i.renderSlot(l,`span`,y,{"aria-hidden":!0}):null,g=r==null?i.materialiseSlotContent(n):(0,p.jsx)(`span`,{className:y,dangerouslySetInnerHTML:r});return{buttonProps:f,content:h||i.slotRendersContent(g)?u.placeButtonIcon(h,g,o&&a.iconPosition):x(),warning:`button-element`,ignoredName:m,contentMayName:!0,literalTextLabel:d.hasTextLabel(g),disabledFocusable:o&&!!a.disabledFocusable}}if(b(e)){let t=e.as===s.Button,n=e.as===`button`||t||Object.keys(e).some(e=>m.has(e)||h.test(e)),r={},a={},o={},c=!1;for(let[i,s]of Object.entries(e))i===`as`?s!==`button`&&!t&&(a.as=s):t&&u.BUTTON_OWN_PROP_KEYS.has(i)?o[i]=s:g.has(i)?s!==void 0&&(c=!0):i===`children`||i===`dangerouslySetInnerHTML`?a[i]=s:n||i.startsWith(`aria-`)&&i!==`aria-hidden`?r[i]=s:a[i]=s;return i.slotRendersContent(o.icon)?a.children=u.placeButtonIcon(i.renderSlot(o.icon,`span`,y),i.materialiseSlotContent(a.children),o.iconPosition):i.slotWrapsDefaultContent(a.as??`span`,a)&&(a.children=x()),{buttonProps:n||Object.keys(r).length>0?r:null,content:i.renderSlot(a,`span`,y,{"aria-hidden":!0}),warning:n?`button-object`:null,ignoredName:c,contentMayName:!1,literalTextLabel:!1,disabledFocusable:!!o.disabledFocusable}}return{buttonProps:null,content:i.renderSlot(e,`span`,y,{"aria-hidden":!0}),warning:null,ignoredName:!1,contentMayName:!1,literalTextLabel:!1,disabledFocusable:!1}}var C=e=>{let{as:n,dismissible:i,onDismiss:s,dismissIcon:c,dismissLabel:m=`Dismiss`,className:h,children:g,ref:v,...y}=e,b=n??`span`,x=a.useId(`tag-content`),C=a.useId(`tag-dismiss`),w=a.useId(`tag-dismiss-text`),{buttonProps:T,content:E,warning:D,ignoredName:O,contentMayName:k,literalTextLabel:A,disabledFocusable:j}=S(i?c:void 0),[M,N]=f.useState(null),P=f.useCallback(e=>M?d.observeTextLabel(M,e):_,[M]),F=f.useSyncExternalStore(P,()=>M?d.hasRenderedTextLabel(M):A,()=>A),I=k&&F;f.useEffect(()=>{D===`button-element`?r.warnOnce(`Tag:dismissIcon-button`,"Tag: `dismissIcon` received a button. Its props were merged into the built-in dismiss button (a button cannot contain another button), which is named by its text label (or `dismissLabel`) and the tag content. Pass icon content instead, e.g. `dismissIcon={<CloseIcon />}`, and handle the dismissal in `onDismiss`."):D===`button-object`&&r.warnDeprecated(`Tag`,`dismissIcon={{ onClick, type, disabled, … }} (button props on the slot object)`,`onDismiss and icon content in dismissIcon`,"Its props are merged onto the built-in dismiss button, which is named by `dismissLabel` and the tag content.")},[D]);let L=i===void 0&&(s!==void 0||c!==void 0);f.useEffect(()=>{L&&r.warnOnce(`Tag:dismiss-without-dismissible`,"Tag: `onDismiss` and `dismissIcon` take effect only with `dismissible`; no dismiss button was rendered. Add `dismissible` to render it.")},[L]),f.useEffect(()=>{O&&r.warnOnce(`Tag:dismissIcon-name`,'Tag: `aria-label`/`aria-labelledby` on `dismissIcon` are ignored. The dismiss button is named by `dismissLabel` (default "Dismiss") and the tag content, e.g. "Dismiss Cherry"; set `dismissLabel` to change or localise it.')},[O]);let R={type:`button`,className:t.cn(`inline-flex size-5 shrink-0 items-center justify-center rounded-full border-0 bg-transparent p-0 text-foreground`,`not-disabled:not-aria-disabled:hover:bg-subtle-pressed`,`disabled:cursor-not-allowed disabled:opacity-50`,u.mergedAriaDisabledClasses,o.focusRing),"aria-labelledby":`${I?w:C} ${x}`};s&&(R.onClick=s);let z=T?l.mergeProps(R,T):R;return(0,p.jsxs)(b,{ref:v,className:t.cn(`inline-flex items-center gap-1 rounded-full bg-muted py-1 ps-3 text-body-1 text-foreground`,i?`pe-1.5`:`pe-3`,h),...y,children:[(0,p.jsx)(`span`,{id:x,className:`inline-flex items-center gap-1`,children:g}),i&&(0,p.jsxs)(`button`,{...z,type:z.type??`button`,...j?u.MERGED_DISABLED_FOCUSABLE_PROPS:void 0,children:[(0,p.jsx)(`span`,{id:C,className:`sr-only`,children:m}),k?(0,p.jsx)(`span`,{id:w,ref:N,className:`inline-flex items-center justify-center gap-[inherit]`,children:E}):E]})]})};C.displayName=`Tag`,exports.Tag=C;
+//# sourceMappingURL=Tag.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tag.cjs","names":["React","DismissIcon","slotRendersContent","getElementType","Button","BUTTON_OWN_PROP_KEYS","renderSlot","materialiseSlotContent","placeButtonIcon","hasTextLabel","slotWrapsDefaultContent","useId","observeTextLabel","hasRenderedTextLabel","cn","mergedAriaDisabledClasses","focusRing","mergeProps","MERGED_DISABLED_FOCUSABLE_PROPS","require_runtime","require_cn","require_children","require_dev","require_slot","require_useId","require_styles","require_Button","require_icons","require_mergeProps","require_Button_slots","require_labelInName","react","react_jsx_runtime","BUTTON_ONLY_KEYS","HANDLER_KEY","NAME_KEYS","noop","withoutName","result","ignoredName","key","value","props","iconClassName","isPlainObject","proto","defaultDismissContent","resolveDismissSlot","slot","elementType","markup","elementProps","isWaveButton","slotProps","icon","buttonProps","iconNode","ownContent","children","asWaveButton","isButtonObject","contentProps","ownProps","Tag","rest","Component","as","contentId","dismissLabelId","dismissTextId","slotButtonProps","dismissible","dismissIcon","labelTarget","setLabelTarget","subscribeToContent","onChange","contentHasTextLabel","literalTextLabel","namedByContent","contentMayName","warning","dismissPropsIgnored","onDismiss","ownButtonProps","dismissButtonProps","className","disabledFocusable","dismissLabel","content"],"sources":["../../../src/components/data-display/Tag.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport { warnDeprecated, warnOnce } from '../../lib/dev';\nimport { mergeProps } from '../../lib/mergeProps';\nimport { getElementType } from '../../lib/children';\nimport {\n  materialiseSlotContent,\n  renderSlot,\n  slotRendersContent,\n  slotWrapsDefaultContent,\n} from '../../lib/slot';\nimport { focusRing } from '../../lib/styles';\nimport { DismissIcon } from '../../lib/icons';\nimport { hasRenderedTextLabel, hasTextLabel, observeTextLabel } from '../../lib/labelInName';\nimport type { Slot, SlotObject } from '../../lib/slot';\nimport type { PolymorphicComponent, PolymorphicProps } from '../../lib/polymorphic';\nimport { useId } from '../../hooks/useId';\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';\n\n/**\n * The Tag's own props (the XOwnProps rule of `PolymorphicProps`: component-specific props only).\n * Every other prop comes from the rendered element (`as`, default `span`).\n */\nexport interface TagOwnProps {\n  /**\n   * Whether the tag renders a dismiss button. `onDismiss` and `dismissIcon` take effect only with\n   * it (a development warning says so when they are passed without it).\n   */\n  dismissible?: boolean;\n  /**\n   * Called when the dismiss button is activated (click, Enter or Space). Passing it does not render\n   * the dismiss button: set `dismissible` too. When it removes the tag, move focus yourself (see\n   * \"Focus after dismissal\" on {@link Tag}).\n   */\n  onDismiss?: () => void;\n  /**\n   * Content of the dismiss button (an icon). The Tag always renders its own dismiss\n   * `<button type=\"button\">`, wired to `onDismiss` and named by `dismissLabel` plus the tag\n   * content; this slot only replaces the icon inside it.\n   *\n   * A `<button>` element or a Wave `Button` passed here is not nested (a button cannot contain a\n   * button): its props are merged into the dismiss button (its `onClick` runs first and can call\n   * `preventDefault()` to skip `onDismiss`) and a development warning recommends icon content.\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   * A slot object with button props (`type`, `disabled`, event handlers, `as: 'button'` or\n   * `as: Button`) is the deprecated 0.4 button-object form: its props (`className`, `id`,\n   * `aria-*`, handlers, …) are merged onto the dismiss button, except its content (`children`,\n   * `dangerouslySetInnerHTML`, rendered inside the button) and the naming attributes (see below);\n   * for `as: Button`, the Button's own props apply as for a `Button` element — pass icon content\n   * and use `onDismiss` instead.\n   * The `aria-*` attributes of an icon slot object also go to the dismiss button, because the icon\n   * is `aria-hidden`.\n   *\n   * The dismiss button's name is `dismissLabel` plus the tag content (\"Dismiss Cherry\"):\n   * `aria-label` and `aria-labelledby` on the slot are ignored (development warning). Icon\n   * content is decorative (`aria-hidden`). The children of a merged `<button>`/`Button` (or its\n   * `dangerouslySetInnerHTML` markup) are rendered as is inside the dismiss button, next to the\n   * decorative `icon` of a Wave `Button`: when they render a text label (at least two letters or\n   * digits outside `aria-hidden`/`hidden` content, text from components such as translations\n   * included), that text replaces `dismissLabel` in the name, so the name contains the visible\n   * label (WCAG 2.5.3): `<button>Remove</button>` or\n   * `<Button icon={<CloseIcon />}>Remove</Button>` on \"Cherry\" is named \"Remove Cherry\". An icon or\n   * a lone character (`x`, `×`) keeps \"Dismiss Cherry\". Text hidden only with CSS still counts as\n   * the label.\n   *\n   * When the slot renders no content (`[]`, `<></>`, a childless merged button, a slot object\n   * without `children`), the default dismiss icon is shown; a slot object then styles it, e.g.\n   * `{ className: 'text-error' }`. A slot object that renders a component or a void element\n   * (`{ as: CloseIcon }`, `{ as: 'img', src, alt: '' }`) or sets `dangerouslySetInnerHTML` is the\n   * icon itself: no default icon is added. Only takes effect with `dismissible`.\n   */\n  dismissIcon?: Slot<'span'> | SlotObject<'button'>;\n  /**\n   * Visually hidden text that names the dismiss button together with the tag content\n   * (`aria-labelledby`), e.g. \"Dismiss Cherry\". Localise it here. A text label rendered by a\n   * merged `<button>` slot replaces it (see `dismissIcon`).\n   * @default 'Dismiss'\n   */\n  dismissLabel?: string;\n}\n\n/**\n * Props of {@link Tag} rendered as `C` (default `'span'`). `TagProps` without a type argument is\n * the 0.4 name.\n */\nexport type TagProps<C extends React.ElementType = 'span'> = PolymorphicProps<C, TagOwnProps>;\n\n/** The props the implementation reads, for any `as` (the public typing is `PolymorphicComponent`). */\ntype TagImplProps = TagOwnProps &\n  React.HTMLAttributes<HTMLElement> & {\n    as?: React.ElementType;\n    ref?: React.Ref<HTMLElement>;\n  };\n\ntype UnknownProps = Record<string, unknown>;\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]);\n\nconst HANDLER_KEY = /^on[A-Z]/;\n\n/**\n * Naming attributes a slot cannot set: the Tag names its dismiss button itself\n * (`aria-labelledby` = `dismissLabel` + tag content, data-display#10), so these are dropped.\n */\nconst NAME_KEYS: ReadonlySet<string> = new Set(['aria-label', 'aria-labelledby']);\n\n/** The props of a merged `<button>` or Wave `Button` that the Tag reads itself. */\ninterface WaveButtonSlotProps extends UnknownProps {\n  icon?: Slot<'span'>;\n  iconPosition?: unknown;\n  disabledFocusable?: unknown;\n  children?: React.ReactNode;\n  dangerouslySetInnerHTML?: React.HTMLAttributes<HTMLElement>['dangerouslySetInnerHTML'];\n}\n\ninterface ResolvedDismissSlot {\n  /** Props merged onto the wired dismiss button (`null`: none). */\n  buttonProps: UnknownProps | null;\n  /** What renders inside the dismiss button. */\n  content: React.ReactNode;\n  /** Which development warning the slot needs. */\n  warning: 'button-element' | 'button-object' | null;\n  /** Whether the slot passed `aria-label`/`aria-labelledby`, which the Tag ignores. */\n  ignoredName: boolean;\n  /**\n   * `true` when the content is rendered as is (a merged `<button>`/`Button`), so a text label in it\n   * replaces `dismissLabel` in the name (C-SLOTS naming, WCAG 2.5.3); `false` when the content is\n   * decorative (`aria-hidden`).\n   */\n  contentMayName: boolean;\n  /**\n   * Whether the literal content contains a text label: the name for the server render and the\n   * first client render. After mount the rendered content decides.\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}\n\nconst noop = () => {};\n\n/** `props` without the naming attributes, and whether any was set. */\nfunction withoutName(props: UnknownProps): { props: UnknownProps; ignoredName: boolean } {\n  const result: UnknownProps = {};\n  let ignoredName = false;\n  for (const [key, value] of Object.entries(props)) {\n    if (NAME_KEYS.has(key)) {\n      if (value !== undefined) ignoredName = true;\n    } else {\n      result[key] = value;\n    }\n  }\n  return { props: result, ignoredName };\n}\n\nconst iconClassName = 'inline-flex items-center justify-center';\n\nfunction isPlainObject(value: unknown): value is UnknownProps {\n  if (typeof value !== 'object' || value === null) return false;\n  if (React.isValidElement(value) || Symbol.iterator in value) return false;\n  const proto: unknown = Object.getPrototypeOf(value);\n  return proto === null || proto === Object.prototype;\n}\n\n/** The decorative default dismiss glyph. */\nfunction defaultDismissContent(): React.ReactNode {\n  return <DismissIcon size={12} />;\n}\n\n/**\n * Splits the dismissIcon slot into dismiss-button props and icon content (C-SLOTS). The icon\n * content is `aria-hidden`, so no attribute that means something to assistive technology stays on\n * it: button-form props go to the dismiss button, and so do the `aria-*` attributes of an icon slot\n * object; the naming attributes are dropped (see {@link NAME_KEYS}).\n *\n * Content that renders nothing (`[]`, `<></>`, a childless merged button, a slot object without\n * `children`) shows the default icon, so the dismiss button is never an empty, invisible Tab stop.\n */\nfunction resolveDismissSlot(slot: TagOwnProps['dismissIcon']): ResolvedDismissSlot {\n  if (!slotRendersContent(slot)) {\n    return {\n      buttonProps: null,\n      content: defaultDismissContent(),\n      warning: null,\n      ignoredName: false,\n      contentMayName: false,\n      literalTextLabel: false,\n      disabledFocusable: false,\n    };\n  }\n\n  // A `<button>` or a Wave `Button` (also one written in a Server Component, whose type arrives as\n  // a lazy reference) is merged into the dismiss button. Its content is rendered as is, after the\n  // Button's icon, which is decorative (as in MessageBar and SearchBox); its text label names it.\n  const elementType = getElementType(slot as React.ReactNode);\n  if (\n    React.isValidElement<WaveButtonSlotProps>(slot) &&\n    (elementType === 'button' || elementType === Button)\n  ) {\n    const { children, dangerouslySetInnerHTML: markup, ...elementProps } = slot.props;\n    const isWaveButton = elementType === Button;\n    let slotProps: UnknownProps = elementProps;\n    if (isWaveButton) {\n      // Wave Button's own props are not attributes: `icon`, `iconPosition` and\n      // `disabledFocusable` are applied here, the others (`appearance`, `size`) are dropped.\n      slotProps = {};\n      for (const [key, value] of Object.entries(elementProps)) {\n        if (!BUTTON_OWN_PROP_KEYS.has(key)) slotProps[key] = value;\n      }\n    }\n    const icon = isWaveButton ? elementProps.icon : undefined;\n    const { props: buttonProps, ignoredName } = withoutName(slotProps);\n    const iconNode = slotRendersContent(icon)\n      ? renderSlot(icon, 'span', iconClassName, { 'aria-hidden': true })\n      : null;\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: the dismiss\n    // button holds its own name text, so the markup renders in a span inside it.\n    const ownContent =\n      markup != null ? (\n        <span className={iconClassName} dangerouslySetInnerHTML={markup} />\n      ) : (\n        materialiseSlotContent(children)\n      );\n    return {\n      buttonProps,\n      content:\n        iconNode || slotRendersContent(ownContent)\n          ? placeButtonIcon(iconNode, ownContent, isWaveButton && elementProps.iconPosition)\n          : defaultDismissContent(),\n      warning: 'button-element',\n      ignoredName,\n      contentMayName: true,\n      literalTextLabel: hasTextLabel(ownContent),\n      disabledFocusable: isWaveButton && Boolean(elementProps.disabledFocusable),\n    };\n  }\n\n  if (isPlainObject(slot)) {\n    // 0.4 rendered the whole object as the dismiss element, so an object with button props\n    // describes the button: everything but its content goes to the dismiss button. `as: Button`\n    // is that form too (a button cannot contain a button); its icon becomes decorative content.\n    const asWaveButton = slot.as === Button;\n    const isButtonObject =\n      slot.as === 'button' ||\n      asWaveButton ||\n      Object.keys(slot).some((key) => BUTTON_ONLY_KEYS.has(key) || HANDLER_KEY.test(key));\n    const buttonProps: UnknownProps = {};\n    const contentProps: UnknownProps = {};\n    // Wave Button's own props are not attributes: `icon`, `iconPosition` and `disabledFocusable`\n    // are applied below, the others (`appearance`, `size`) are dropped.\n    const ownProps: UnknownProps = {};\n    let ignoredName = false;\n    for (const [key, value] of Object.entries(slot)) {\n      if (key === 'as') {\n        if (value !== 'button' && !asWaveButton) contentProps.as = value;\n      } else if (asWaveButton && BUTTON_OWN_PROP_KEYS.has(key)) {\n        ownProps[key] = value;\n      } else if (NAME_KEYS.has(key)) {\n        if (value !== undefined) ignoredName = true;\n      } else if (key === 'children' || key === 'dangerouslySetInnerHTML') {\n        // Content, also in the button-object form: the dismiss button holds its own name text.\n        contentProps[key] = value;\n      } else if (isButtonObject || (key.startsWith('aria-') && key !== 'aria-hidden')) {\n        buttonProps[key] = value;\n      } else {\n        contentProps[key] = value;\n      }\n    }\n    // An object without content styles the default icon, e.g. `{ className: 'text-error' }` (as in\n    // MessageBar and SearchBox); a Wave Button's icon comes before the content (after it with\n    // `iconPosition=\"after\"`).\n    if (slotRendersContent(ownProps.icon)) {\n      contentProps.children = placeButtonIcon(\n        renderSlot(ownProps.icon as Slot<'span'>, 'span', iconClassName),\n        materialiseSlotContent(contentProps.children),\n        ownProps.iconPosition,\n      );\n    } else if (slotWrapsDefaultContent(contentProps.as ?? 'span', contentProps)) {\n      contentProps.children = defaultDismissContent();\n    }\n    return {\n      buttonProps: isButtonObject || Object.keys(buttonProps).length > 0 ? buttonProps : null,\n      content: renderSlot(contentProps as SlotObject<'span'>, 'span', iconClassName, {\n        'aria-hidden': true,\n      }),\n      warning: isButtonObject ? 'button-object' : null,\n      ignoredName,\n      contentMayName: false,\n      literalTextLabel: false,\n      disabledFocusable: Boolean(ownProps.disabledFocusable),\n    };\n  }\n\n  return {\n    buttonProps: null,\n    content: renderSlot(slot as Slot<'span'>, 'span', iconClassName, { 'aria-hidden': true }),\n    warning: null,\n    ignoredName: false,\n    contentMayName: false,\n    literalTextLabel: false,\n    disabledFocusable: false,\n  };\n}\n\n/**\n * A compact label (a \"chip\") for a keyword, category or filter, optionally dismissible.\n *\n * - The dismiss button is a real `<button type=\"button\">` wired to `onDismiss`. Its accessible\n *   name is `dismissLabel` plus the tag content (\"Dismiss Cherry\"), so a row of tags has\n *   distinguishable dismiss buttons.\n * - `dismissIcon` replaces only the icon inside that button (see {@link TagOwnProps.dismissIcon}).\n * - Polymorphic: `as=\"a\"` renders a link chip with anchor props type-checked.\n *\n * **Focus after dismissal.** A tag cannot keep focus once you remove it. When `onDismiss` removes\n * the tag, move focus to the next tag's dismiss button (else the previous one, else a sensible\n * element nearby); TagGroup (planned) will do this for you. The neighbour stays mounted, so you\n * can focus it in `onDismiss` before removing the tag.\n *\n * @example\n * <Tag>React</Tag>\n * <Tag dismissible onDismiss={() => remove('cherry')}>Cherry</Tag>\n * <Tag dismissible dismissLabel=\"Remove\" dismissIcon={<CloseIcon />}>Cherry</Tag>\n */\nexport const Tag: PolymorphicComponent<'span', TagOwnProps> = (props) => {\n  const {\n    as,\n    dismissible,\n    onDismiss,\n    dismissIcon,\n    dismissLabel = 'Dismiss',\n    className,\n    children,\n    ref,\n    ...rest\n  } = props as TagImplProps;\n  const Component: React.ElementType = as ?? 'span';\n  const contentId = useId('tag-content');\n  const dismissLabelId = useId('tag-dismiss');\n  const dismissTextId = useId('tag-dismiss-text');\n\n  const {\n    buttonProps: slotButtonProps,\n    content,\n    warning,\n    ignoredName,\n    contentMayName,\n    literalTextLabel,\n    disabledFocusable,\n  } = resolveDismissSlot(dismissible ? dismissIcon : undefined);\n\n  // C-SLOTS naming (WCAG 2.5.3 Label in Name): the rendered text label of a merged button replaces\n  // `dismissLabel` in the name (\"Remove Cherry\"). The literal content decides on the server and on\n  // the first render; after mount, the rendered content does (text from components, later changes).\n  const [labelTarget, setLabelTarget] = React.useState<HTMLSpanElement | 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 = contentMayName && contentHasTextLabel;\n\n  React.useEffect(() => {\n    if (warning === 'button-element') {\n      warnOnce(\n        'Tag:dismissIcon-button',\n        'Tag: `dismissIcon` received a button. Its props were merged into the built-in dismiss button (a button cannot contain another button), which is named by its text label (or `dismissLabel`) and the tag content. Pass icon content instead, e.g. `dismissIcon={<CloseIcon />}`, and handle the dismissal in `onDismiss`.',\n      );\n    } else if (warning === 'button-object') {\n      warnDeprecated(\n        'Tag',\n        'dismissIcon={{ onClick, type, disabled, … }} (button props on the slot object)',\n        'onDismiss and icon content in dismissIcon',\n        'Its props are merged onto the built-in dismiss button, which is named by `dismissLabel` and the tag content.',\n      );\n    }\n  }, [warning]);\n\n  // `onDismiss`/`dismissIcon` alone render no dismiss button (unlike MessageBar's `onDismiss`).\n  // An explicit `dismissible={false}` is a deliberate state, so only a missing flag warns.\n  const dismissPropsIgnored =\n    dismissible === undefined && (onDismiss !== undefined || dismissIcon !== undefined);\n  React.useEffect(() => {\n    if (dismissPropsIgnored) {\n      warnOnce(\n        'Tag:dismiss-without-dismissible',\n        'Tag: `onDismiss` and `dismissIcon` take effect only with `dismissible`; no dismiss button was rendered. Add `dismissible` to render it.',\n      );\n    }\n  }, [dismissPropsIgnored]);\n\n  React.useEffect(() => {\n    if (ignoredName) {\n      warnOnce(\n        'Tag:dismissIcon-name',\n        'Tag: `aria-label`/`aria-labelledby` on `dismissIcon` are ignored. The dismiss button is named by `dismissLabel` (default \"Dismiss\") and the tag content, e.g. \"Dismiss Cherry\"; set `dismissLabel` to change or localise it.',\n      );\n    }\n  }, [ignoredName]);\n\n  const ownButtonProps: UnknownProps = {\n    type: 'button',\n    className: cn(\n      'inline-flex size-5 shrink-0 items-center justify-center rounded-full border-0 bg-transparent p-0 text-foreground',\n      'not-disabled:not-aria-disabled:hover:bg-subtle-pressed',\n      'disabled:cursor-not-allowed disabled:opacity-50',\n      mergedAriaDisabledClasses,\n      focusRing,\n    ),\n    'aria-labelledby': `${namedByContent ? dismissTextId : dismissLabelId} ${contentId}`,\n  };\n  if (onDismiss) ownButtonProps.onClick = onDismiss;\n  const dismissButtonProps = slotButtonProps\n    ? mergeProps(ownButtonProps, slotButtonProps)\n    : ownButtonProps;\n\n  return (\n    <Component\n      ref={ref}\n      className={cn(\n        'inline-flex items-center gap-1 rounded-full bg-muted py-1 ps-3 text-body-1 text-foreground',\n        dismissible ? 'pe-1.5' : 'pe-3',\n        className,\n      )}\n      {...rest}\n    >\n      <span id={contentId} className=\"inline-flex items-center gap-1\">\n        {children}\n      </span>\n      {dismissible && (\n        <button\n          {...dismissButtonProps}\n          type={(dismissButtonProps.type as 'button' | 'submit' | 'reset' | undefined) ?? 'button'}\n          // A merged `disabledFocusable` Button makes the dismiss button unavailable but focusable\n          // (spread last: it wins over `disabled` and `onDismiss`).\n          {...(disabledFocusable ? MERGED_DISABLED_FOCUSABLE_PROPS : undefined)}\n        >\n          <span id={dismissLabelId} className=\"sr-only\">\n            {dismissLabel}\n          </span>\n          {contentMayName ? (\n            // The merged button's own content, rendered as is: its text label can name the button.\n            // `gap-[inherit]` keeps a gap set on the button between the content items.\n            <span\n              id={dismissTextId}\n              ref={setLabelTarget}\n              className=\"inline-flex items-center justify-center gap-[inherit]\"\n            >\n              {content}\n            </span>\n          ) : (\n            content\n          )}\n        </button>\n      )}\n    </Component>\n  );\n};\n\nTag.displayName = 'Tag';\n"],"mappings":"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"}

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

@@ -0,0 +1,147 @@
+"use client";
+import { cn as e } from "../../lib/cn.mjs";
+import { getElementType as t } from "../../lib/children.mjs";
+import { warnDeprecated as n, warnOnce as r } from "../../lib/dev.mjs";
+import { materialiseSlotContent as i, renderSlot as a, slotRendersContent as o, slotWrapsDefaultContent as s } from "../../lib/slot.mjs";
+import { useId as c } from "../../hooks/useId.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 * as b from "react";
+import { jsx as x, jsxs as S } from "react/jsx-runtime";
+//#region src/components/data-display/Tag.tsx
+var C = /* @__PURE__ */ new Set([
+	"type",
+	"disabled",
+	"autoFocus",
+	"form",
+	"formAction",
+	"formEncType",
+	"formMethod",
+	"formNoValidate",
+	"formTarget",
+	"name",
+	"value"
+]), w = /^on[A-Z]/, T = /* @__PURE__ */ new Set(["aria-label", "aria-labelledby"]), E = () => {};
+function D(e) {
+	let t = {}, n = !1;
+	for (let [r, i] of Object.entries(e)) T.has(r) ? i !== void 0 && (n = !0) : t[r] = i;
+	return {
+		props: t,
+		ignoredName: n
+	};
+}
+var O = "inline-flex items-center justify-center";
+function k(e) {
+	if (typeof e != "object" || !e || b.isValidElement(e) || Symbol.iterator in e) return !1;
+	let t = Object.getPrototypeOf(e);
+	return t === null || t === Object.prototype;
+}
+function A() {
+	return /* @__PURE__ */ x(d, { size: 12 });
+}
+function j(e) {
+	if (!o(e)) return {
+		buttonProps: null,
+		content: A(),
+		warning: null,
+		ignoredName: !1,
+		contentMayName: !1,
+		literalTextLabel: !1,
+		disabledFocusable: !1
+	};
+	let n = t(e);
+	if (b.isValidElement(e) && (n === "button" || n === u)) {
+		let { children: t, dangerouslySetInnerHTML: r, ...s } = e.props, c = n === u, l = s;
+		if (c) {
+			l = {};
+			for (let [e, t] of Object.entries(s)) p.has(e) || (l[e] = t);
+		}
+		let d = c ? s.icon : void 0, { props: f, ignoredName: m } = D(l), h = o(d) ? a(d, "span", O, { "aria-hidden": !0 }) : null, _ = r == null ? i(t) : /* @__PURE__ */ x("span", {
+			className: O,
+			dangerouslySetInnerHTML: r
+		});
+		return {
+			buttonProps: f,
+			content: h || o(_) ? g(h, _, c && s.iconPosition) : A(),
+			warning: "button-element",
+			ignoredName: m,
+			contentMayName: !0,
+			literalTextLabel: v(_),
+			disabledFocusable: c && !!s.disabledFocusable
+		};
+	}
+	if (k(e)) {
+		let t = e.as === u, n = e.as === "button" || t || Object.keys(e).some((e) => C.has(e) || w.test(e)), r = {}, c = {}, l = {}, d = !1;
+		for (let [i, a] of Object.entries(e)) i === "as" ? a !== "button" && !t && (c.as = a) : t && p.has(i) ? l[i] = a : T.has(i) ? a !== void 0 && (d = !0) : i === "children" || i === "dangerouslySetInnerHTML" ? c[i] = a : n || i.startsWith("aria-") && i !== "aria-hidden" ? r[i] = a : c[i] = a;
+		return o(l.icon) ? c.children = g(a(l.icon, "span", O), i(c.children), l.iconPosition) : s(c.as ?? "span", c) && (c.children = A()), {
+			buttonProps: n || Object.keys(r).length > 0 ? r : null,
+			content: a(c, "span", O, { "aria-hidden": !0 }),
+			warning: n ? "button-object" : null,
+			ignoredName: d,
+			contentMayName: !1,
+			literalTextLabel: !1,
+			disabledFocusable: !!l.disabledFocusable
+		};
+	}
+	return {
+		buttonProps: null,
+		content: a(e, "span", O, { "aria-hidden": !0 }),
+		warning: null,
+		ignoredName: !1,
+		contentMayName: !1,
+		literalTextLabel: !1,
+		disabledFocusable: !1
+	};
+}
+var M = (t) => {
+	let { as: i, dismissible: a, onDismiss: o, dismissIcon: s, dismissLabel: u = "Dismiss", className: d, children: p, ref: g, ...v } = t, C = i ?? "span", w = c("tag-content"), T = c("tag-dismiss"), D = c("tag-dismiss-text"), { buttonProps: O, content: k, warning: A, ignoredName: M, contentMayName: N, literalTextLabel: P, disabledFocusable: F } = j(a ? s : void 0), [I, L] = b.useState(null), R = b.useCallback((e) => I ? y(I, e) : E, [I]), z = b.useSyncExternalStore(R, () => I ? _(I) : P, () => P), B = N && z;
+	b.useEffect(() => {
+		A === "button-element" ? r("Tag:dismissIcon-button", "Tag: `dismissIcon` received a button. Its props were merged into the built-in dismiss button (a button cannot contain another button), which is named by its text label (or `dismissLabel`) and the tag content. Pass icon content instead, e.g. `dismissIcon={<CloseIcon />}`, and handle the dismissal in `onDismiss`.") : A === "button-object" && n("Tag", "dismissIcon={{ onClick, type, disabled, … }} (button props on the slot object)", "onDismiss and icon content in dismissIcon", "Its props are merged onto the built-in dismiss button, which is named by `dismissLabel` and the tag content.");
+	}, [A]);
+	let V = a === void 0 && (o !== void 0 || s !== void 0);
+	b.useEffect(() => {
+		V && r("Tag:dismiss-without-dismissible", "Tag: `onDismiss` and `dismissIcon` take effect only with `dismissible`; no dismiss button was rendered. Add `dismissible` to render it.");
+	}, [V]), b.useEffect(() => {
+		M && r("Tag:dismissIcon-name", "Tag: `aria-label`/`aria-labelledby` on `dismissIcon` are ignored. The dismiss button is named by `dismissLabel` (default \"Dismiss\") and the tag content, e.g. \"Dismiss Cherry\"; set `dismissLabel` to change or localise it.");
+	}, [M]);
+	let H = {
+		type: "button",
+		className: e("inline-flex size-5 shrink-0 items-center justify-center rounded-full border-0 bg-transparent p-0 text-foreground", "not-disabled:not-aria-disabled:hover:bg-subtle-pressed", "disabled:cursor-not-allowed disabled:opacity-50", h, l),
+		"aria-labelledby": `${B ? D : T} ${w}`
+	};
+	o && (H.onClick = o);
+	let U = O ? f(H, O) : H;
+	return /* @__PURE__ */ S(C, {
+		ref: g,
+		className: e("inline-flex items-center gap-1 rounded-full bg-muted py-1 ps-3 text-body-1 text-foreground", a ? "pe-1.5" : "pe-3", d),
+		...v,
+		children: [/* @__PURE__ */ x("span", {
+			id: w,
+			className: "inline-flex items-center gap-1",
+			children: p
+		}), a && /* @__PURE__ */ S("button", {
+			...U,
+			type: U.type ?? "button",
+			...F ? m : void 0,
+			children: [/* @__PURE__ */ x("span", {
+				id: T,
+				className: "sr-only",
+				children: u
+			}), N ? /* @__PURE__ */ x("span", {
+				id: D,
+				ref: L,
+				className: "inline-flex items-center justify-center gap-[inherit]",
+				children: k
+			}) : k]
+		})]
+	});
+};
+M.displayName = "Tag";
+//#endregion
+export { M as Tag };
+
+//# sourceMappingURL=Tag.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tag.mjs","names":["useId","useId$1","React","BUTTON_ONLY_KEYS","HANDLER_KEY","NAME_KEYS","noop","withoutName","result","ignoredName","key","value","props","iconClassName","isPlainObject","proto","defaultDismissContent","DismissIcon","resolveDismissSlot","slotRendersContent","slot","elementType","getElementType","Button","markup","elementProps","isWaveButton","slotProps","BUTTON_OWN_PROP_KEYS","icon","buttonProps","iconNode","renderSlot","ownContent","materialiseSlotContent","children","placeButtonIcon","hasTextLabel","asWaveButton","isButtonObject","contentProps","ownProps","slotWrapsDefaultContent","Tag","rest","Component","as","contentId","dismissLabelId","dismissTextId","slotButtonProps","dismissible","dismissIcon","labelTarget","setLabelTarget","subscribeToContent","observeTextLabel","onChange","contentHasTextLabel","hasRenderedTextLabel","literalTextLabel","namedByContent","contentMayName","warning","warnOnce","warnDeprecated","dismissPropsIgnored","onDismiss","ownButtonProps","cn","mergedAriaDisabledClasses","focusRing","dismissButtonProps","mergeProps","className","disabledFocusable","MERGED_DISABLED_FOCUSABLE_PROPS","dismissLabel","content"],"sources":["../../../src/components/data-display/Tag.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport { warnDeprecated, warnOnce } from '../../lib/dev';\nimport { mergeProps } from '../../lib/mergeProps';\nimport { getElementType } from '../../lib/children';\nimport {\n  materialiseSlotContent,\n  renderSlot,\n  slotRendersContent,\n  slotWrapsDefaultContent,\n} from '../../lib/slot';\nimport { focusRing } from '../../lib/styles';\nimport { DismissIcon } from '../../lib/icons';\nimport { hasRenderedTextLabel, hasTextLabel, observeTextLabel } from '../../lib/labelInName';\nimport type { Slot, SlotObject } from '../../lib/slot';\nimport type { PolymorphicComponent, PolymorphicProps } from '../../lib/polymorphic';\nimport { useId } from '../../hooks/useId';\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';\n\n/**\n * The Tag's own props (the XOwnProps rule of `PolymorphicProps`: component-specific props only).\n * Every other prop comes from the rendered element (`as`, default `span`).\n */\nexport interface TagOwnProps {\n  /**\n   * Whether the tag renders a dismiss button. `onDismiss` and `dismissIcon` take effect only with\n   * it (a development warning says so when they are passed without it).\n   */\n  dismissible?: boolean;\n  /**\n   * Called when the dismiss button is activated (click, Enter or Space). Passing it does not render\n   * the dismiss button: set `dismissible` too. When it removes the tag, move focus yourself (see\n   * \"Focus after dismissal\" on {@link Tag}).\n   */\n  onDismiss?: () => void;\n  /**\n   * Content of the dismiss button (an icon). The Tag always renders its own dismiss\n   * `<button type=\"button\">`, wired to `onDismiss` and named by `dismissLabel` plus the tag\n   * content; this slot only replaces the icon inside it.\n   *\n   * A `<button>` element or a Wave `Button` passed here is not nested (a button cannot contain a\n   * button): its props are merged into the dismiss button (its `onClick` runs first and can call\n   * `preventDefault()` to skip `onDismiss`) and a development warning recommends icon content.\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   * A slot object with button props (`type`, `disabled`, event handlers, `as: 'button'` or\n   * `as: Button`) is the deprecated 0.4 button-object form: its props (`className`, `id`,\n   * `aria-*`, handlers, …) are merged onto the dismiss button, except its content (`children`,\n   * `dangerouslySetInnerHTML`, rendered inside the button) and the naming attributes (see below);\n   * for `as: Button`, the Button's own props apply as for a `Button` element — pass icon content\n   * and use `onDismiss` instead.\n   * The `aria-*` attributes of an icon slot object also go to the dismiss button, because the icon\n   * is `aria-hidden`.\n   *\n   * The dismiss button's name is `dismissLabel` plus the tag content (\"Dismiss Cherry\"):\n   * `aria-label` and `aria-labelledby` on the slot are ignored (development warning). Icon\n   * content is decorative (`aria-hidden`). The children of a merged `<button>`/`Button` (or its\n   * `dangerouslySetInnerHTML` markup) are rendered as is inside the dismiss button, next to the\n   * decorative `icon` of a Wave `Button`: when they render a text label (at least two letters or\n   * digits outside `aria-hidden`/`hidden` content, text from components such as translations\n   * included), that text replaces `dismissLabel` in the name, so the name contains the visible\n   * label (WCAG 2.5.3): `<button>Remove</button>` or\n   * `<Button icon={<CloseIcon />}>Remove</Button>` on \"Cherry\" is named \"Remove Cherry\". An icon or\n   * a lone character (`x`, `×`) keeps \"Dismiss Cherry\". Text hidden only with CSS still counts as\n   * the label.\n   *\n   * When the slot renders no content (`[]`, `<></>`, a childless merged button, a slot object\n   * without `children`), the default dismiss icon is shown; a slot object then styles it, e.g.\n   * `{ className: 'text-error' }`. A slot object that renders a component or a void element\n   * (`{ as: CloseIcon }`, `{ as: 'img', src, alt: '' }`) or sets `dangerouslySetInnerHTML` is the\n   * icon itself: no default icon is added. Only takes effect with `dismissible`.\n   */\n  dismissIcon?: Slot<'span'> | SlotObject<'button'>;\n  /**\n   * Visually hidden text that names the dismiss button together with the tag content\n   * (`aria-labelledby`), e.g. \"Dismiss Cherry\". Localise it here. A text label rendered by a\n   * merged `<button>` slot replaces it (see `dismissIcon`).\n   * @default 'Dismiss'\n   */\n  dismissLabel?: string;\n}\n\n/**\n * Props of {@link Tag} rendered as `C` (default `'span'`). `TagProps` without a type argument is\n * the 0.4 name.\n */\nexport type TagProps<C extends React.ElementType = 'span'> = PolymorphicProps<C, TagOwnProps>;\n\n/** The props the implementation reads, for any `as` (the public typing is `PolymorphicComponent`). */\ntype TagImplProps = TagOwnProps &\n  React.HTMLAttributes<HTMLElement> & {\n    as?: React.ElementType;\n    ref?: React.Ref<HTMLElement>;\n  };\n\ntype UnknownProps = Record<string, unknown>;\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]);\n\nconst HANDLER_KEY = /^on[A-Z]/;\n\n/**\n * Naming attributes a slot cannot set: the Tag names its dismiss button itself\n * (`aria-labelledby` = `dismissLabel` + tag content, data-display#10), so these are dropped.\n */\nconst NAME_KEYS: ReadonlySet<string> = new Set(['aria-label', 'aria-labelledby']);\n\n/** The props of a merged `<button>` or Wave `Button` that the Tag reads itself. */\ninterface WaveButtonSlotProps extends UnknownProps {\n  icon?: Slot<'span'>;\n  iconPosition?: unknown;\n  disabledFocusable?: unknown;\n  children?: React.ReactNode;\n  dangerouslySetInnerHTML?: React.HTMLAttributes<HTMLElement>['dangerouslySetInnerHTML'];\n}\n\ninterface ResolvedDismissSlot {\n  /** Props merged onto the wired dismiss button (`null`: none). */\n  buttonProps: UnknownProps | null;\n  /** What renders inside the dismiss button. */\n  content: React.ReactNode;\n  /** Which development warning the slot needs. */\n  warning: 'button-element' | 'button-object' | null;\n  /** Whether the slot passed `aria-label`/`aria-labelledby`, which the Tag ignores. */\n  ignoredName: boolean;\n  /**\n   * `true` when the content is rendered as is (a merged `<button>`/`Button`), so a text label in it\n   * replaces `dismissLabel` in the name (C-SLOTS naming, WCAG 2.5.3); `false` when the content is\n   * decorative (`aria-hidden`).\n   */\n  contentMayName: boolean;\n  /**\n   * Whether the literal content contains a text label: the name for the server render and the\n   * first client render. After mount the rendered content decides.\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}\n\nconst noop = () => {};\n\n/** `props` without the naming attributes, and whether any was set. */\nfunction withoutName(props: UnknownProps): { props: UnknownProps; ignoredName: boolean } {\n  const result: UnknownProps = {};\n  let ignoredName = false;\n  for (const [key, value] of Object.entries(props)) {\n    if (NAME_KEYS.has(key)) {\n      if (value !== undefined) ignoredName = true;\n    } else {\n      result[key] = value;\n    }\n  }\n  return { props: result, ignoredName };\n}\n\nconst iconClassName = 'inline-flex items-center justify-center';\n\nfunction isPlainObject(value: unknown): value is UnknownProps {\n  if (typeof value !== 'object' || value === null) return false;\n  if (React.isValidElement(value) || Symbol.iterator in value) return false;\n  const proto: unknown = Object.getPrototypeOf(value);\n  return proto === null || proto === Object.prototype;\n}\n\n/** The decorative default dismiss glyph. */\nfunction defaultDismissContent(): React.ReactNode {\n  return <DismissIcon size={12} />;\n}\n\n/**\n * Splits the dismissIcon slot into dismiss-button props and icon content (C-SLOTS). The icon\n * content is `aria-hidden`, so no attribute that means something to assistive technology stays on\n * it: button-form props go to the dismiss button, and so do the `aria-*` attributes of an icon slot\n * object; the naming attributes are dropped (see {@link NAME_KEYS}).\n *\n * Content that renders nothing (`[]`, `<></>`, a childless merged button, a slot object without\n * `children`) shows the default icon, so the dismiss button is never an empty, invisible Tab stop.\n */\nfunction resolveDismissSlot(slot: TagOwnProps['dismissIcon']): ResolvedDismissSlot {\n  if (!slotRendersContent(slot)) {\n    return {\n      buttonProps: null,\n      content: defaultDismissContent(),\n      warning: null,\n      ignoredName: false,\n      contentMayName: false,\n      literalTextLabel: false,\n      disabledFocusable: false,\n    };\n  }\n\n  // A `<button>` or a Wave `Button` (also one written in a Server Component, whose type arrives as\n  // a lazy reference) is merged into the dismiss button. Its content is rendered as is, after the\n  // Button's icon, which is decorative (as in MessageBar and SearchBox); its text label names it.\n  const elementType = getElementType(slot as React.ReactNode);\n  if (\n    React.isValidElement<WaveButtonSlotProps>(slot) &&\n    (elementType === 'button' || elementType === Button)\n  ) {\n    const { children, dangerouslySetInnerHTML: markup, ...elementProps } = slot.props;\n    const isWaveButton = elementType === Button;\n    let slotProps: UnknownProps = elementProps;\n    if (isWaveButton) {\n      // Wave Button's own props are not attributes: `icon`, `iconPosition` and\n      // `disabledFocusable` are applied here, the others (`appearance`, `size`) are dropped.\n      slotProps = {};\n      for (const [key, value] of Object.entries(elementProps)) {\n        if (!BUTTON_OWN_PROP_KEYS.has(key)) slotProps[key] = value;\n      }\n    }\n    const icon = isWaveButton ? elementProps.icon : undefined;\n    const { props: buttonProps, ignoredName } = withoutName(slotProps);\n    const iconNode = slotRendersContent(icon)\n      ? renderSlot(icon, 'span', iconClassName, { 'aria-hidden': true })\n      : null;\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: the dismiss\n    // button holds its own name text, so the markup renders in a span inside it.\n    const ownContent =\n      markup != null ? (\n        <span className={iconClassName} dangerouslySetInnerHTML={markup} />\n      ) : (\n        materialiseSlotContent(children)\n      );\n    return {\n      buttonProps,\n      content:\n        iconNode || slotRendersContent(ownContent)\n          ? placeButtonIcon(iconNode, ownContent, isWaveButton && elementProps.iconPosition)\n          : defaultDismissContent(),\n      warning: 'button-element',\n      ignoredName,\n      contentMayName: true,\n      literalTextLabel: hasTextLabel(ownContent),\n      disabledFocusable: isWaveButton && Boolean(elementProps.disabledFocusable),\n    };\n  }\n\n  if (isPlainObject(slot)) {\n    // 0.4 rendered the whole object as the dismiss element, so an object with button props\n    // describes the button: everything but its content goes to the dismiss button. `as: Button`\n    // is that form too (a button cannot contain a button); its icon becomes decorative content.\n    const asWaveButton = slot.as === Button;\n    const isButtonObject =\n      slot.as === 'button' ||\n      asWaveButton ||\n      Object.keys(slot).some((key) => BUTTON_ONLY_KEYS.has(key) || HANDLER_KEY.test(key));\n    const buttonProps: UnknownProps = {};\n    const contentProps: UnknownProps = {};\n    // Wave Button's own props are not attributes: `icon`, `iconPosition` and `disabledFocusable`\n    // are applied below, the others (`appearance`, `size`) are dropped.\n    const ownProps: UnknownProps = {};\n    let ignoredName = false;\n    for (const [key, value] of Object.entries(slot)) {\n      if (key === 'as') {\n        if (value !== 'button' && !asWaveButton) contentProps.as = value;\n      } else if (asWaveButton && BUTTON_OWN_PROP_KEYS.has(key)) {\n        ownProps[key] = value;\n      } else if (NAME_KEYS.has(key)) {\n        if (value !== undefined) ignoredName = true;\n      } else if (key === 'children' || key === 'dangerouslySetInnerHTML') {\n        // Content, also in the button-object form: the dismiss button holds its own name text.\n        contentProps[key] = value;\n      } else if (isButtonObject || (key.startsWith('aria-') && key !== 'aria-hidden')) {\n        buttonProps[key] = value;\n      } else {\n        contentProps[key] = value;\n      }\n    }\n    // An object without content styles the default icon, e.g. `{ className: 'text-error' }` (as in\n    // MessageBar and SearchBox); a Wave Button's icon comes before the content (after it with\n    // `iconPosition=\"after\"`).\n    if (slotRendersContent(ownProps.icon)) {\n      contentProps.children = placeButtonIcon(\n        renderSlot(ownProps.icon as Slot<'span'>, 'span', iconClassName),\n        materialiseSlotContent(contentProps.children),\n        ownProps.iconPosition,\n      );\n    } else if (slotWrapsDefaultContent(contentProps.as ?? 'span', contentProps)) {\n      contentProps.children = defaultDismissContent();\n    }\n    return {\n      buttonProps: isButtonObject || Object.keys(buttonProps).length > 0 ? buttonProps : null,\n      content: renderSlot(contentProps as SlotObject<'span'>, 'span', iconClassName, {\n        'aria-hidden': true,\n      }),\n      warning: isButtonObject ? 'button-object' : null,\n      ignoredName,\n      contentMayName: false,\n      literalTextLabel: false,\n      disabledFocusable: Boolean(ownProps.disabledFocusable),\n    };\n  }\n\n  return {\n    buttonProps: null,\n    content: renderSlot(slot as Slot<'span'>, 'span', iconClassName, { 'aria-hidden': true }),\n    warning: null,\n    ignoredName: false,\n    contentMayName: false,\n    literalTextLabel: false,\n    disabledFocusable: false,\n  };\n}\n\n/**\n * A compact label (a \"chip\") for a keyword, category or filter, optionally dismissible.\n *\n * - The dismiss button is a real `<button type=\"button\">` wired to `onDismiss`. Its accessible\n *   name is `dismissLabel` plus the tag content (\"Dismiss Cherry\"), so a row of tags has\n *   distinguishable dismiss buttons.\n * - `dismissIcon` replaces only the icon inside that button (see {@link TagOwnProps.dismissIcon}).\n * - Polymorphic: `as=\"a\"` renders a link chip with anchor props type-checked.\n *\n * **Focus after dismissal.** A tag cannot keep focus once you remove it. When `onDismiss` removes\n * the tag, move focus to the next tag's dismiss button (else the previous one, else a sensible\n * element nearby); TagGroup (planned) will do this for you. The neighbour stays mounted, so you\n * can focus it in `onDismiss` before removing the tag.\n *\n * @example\n * <Tag>React</Tag>\n * <Tag dismissible onDismiss={() => remove('cherry')}>Cherry</Tag>\n * <Tag dismissible dismissLabel=\"Remove\" dismissIcon={<CloseIcon />}>Cherry</Tag>\n */\nexport const Tag: PolymorphicComponent<'span', TagOwnProps> = (props) => {\n  const {\n    as,\n    dismissible,\n    onDismiss,\n    dismissIcon,\n    dismissLabel = 'Dismiss',\n    className,\n    children,\n    ref,\n    ...rest\n  } = props as TagImplProps;\n  const Component: React.ElementType = as ?? 'span';\n  const contentId = useId('tag-content');\n  const dismissLabelId = useId('tag-dismiss');\n  const dismissTextId = useId('tag-dismiss-text');\n\n  const {\n    buttonProps: slotButtonProps,\n    content,\n    warning,\n    ignoredName,\n    contentMayName,\n    literalTextLabel,\n    disabledFocusable,\n  } = resolveDismissSlot(dismissible ? dismissIcon : undefined);\n\n  // C-SLOTS naming (WCAG 2.5.3 Label in Name): the rendered text label of a merged button replaces\n  // `dismissLabel` in the name (\"Remove Cherry\"). The literal content decides on the server and on\n  // the first render; after mount, the rendered content does (text from components, later changes).\n  const [labelTarget, setLabelTarget] = React.useState<HTMLSpanElement | 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 = contentMayName && contentHasTextLabel;\n\n  React.useEffect(() => {\n    if (warning === 'button-element') {\n      warnOnce(\n        'Tag:dismissIcon-button',\n        'Tag: `dismissIcon` received a button. Its props were merged into the built-in dismiss button (a button cannot contain another button), which is named by its text label (or `dismissLabel`) and the tag content. Pass icon content instead, e.g. `dismissIcon={<CloseIcon />}`, and handle the dismissal in `onDismiss`.',\n      );\n    } else if (warning === 'button-object') {\n      warnDeprecated(\n        'Tag',\n        'dismissIcon={{ onClick, type, disabled, … }} (button props on the slot object)',\n        'onDismiss and icon content in dismissIcon',\n        'Its props are merged onto the built-in dismiss button, which is named by `dismissLabel` and the tag content.',\n      );\n    }\n  }, [warning]);\n\n  // `onDismiss`/`dismissIcon` alone render no dismiss button (unlike MessageBar's `onDismiss`).\n  // An explicit `dismissible={false}` is a deliberate state, so only a missing flag warns.\n  const dismissPropsIgnored =\n    dismissible === undefined && (onDismiss !== undefined || dismissIcon !== undefined);\n  React.useEffect(() => {\n    if (dismissPropsIgnored) {\n      warnOnce(\n        'Tag:dismiss-without-dismissible',\n        'Tag: `onDismiss` and `dismissIcon` take effect only with `dismissible`; no dismiss button was rendered. Add `dismissible` to render it.',\n      );\n    }\n  }, [dismissPropsIgnored]);\n\n  React.useEffect(() => {\n    if (ignoredName) {\n      warnOnce(\n        'Tag:dismissIcon-name',\n        'Tag: `aria-label`/`aria-labelledby` on `dismissIcon` are ignored. The dismiss button is named by `dismissLabel` (default \"Dismiss\") and the tag content, e.g. \"Dismiss Cherry\"; set `dismissLabel` to change or localise it.',\n      );\n    }\n  }, [ignoredName]);\n\n  const ownButtonProps: UnknownProps = {\n    type: 'button',\n    className: cn(\n      'inline-flex size-5 shrink-0 items-center justify-center rounded-full border-0 bg-transparent p-0 text-foreground',\n      'not-disabled:not-aria-disabled:hover:bg-subtle-pressed',\n      'disabled:cursor-not-allowed disabled:opacity-50',\n      mergedAriaDisabledClasses,\n      focusRing,\n    ),\n    'aria-labelledby': `${namedByContent ? dismissTextId : dismissLabelId} ${contentId}`,\n  };\n  if (onDismiss) ownButtonProps.onClick = onDismiss;\n  const dismissButtonProps = slotButtonProps\n    ? mergeProps(ownButtonProps, slotButtonProps)\n    : ownButtonProps;\n\n  return (\n    <Component\n      ref={ref}\n      className={cn(\n        'inline-flex items-center gap-1 rounded-full bg-muted py-1 ps-3 text-body-1 text-foreground',\n        dismissible ? 'pe-1.5' : 'pe-3',\n        className,\n      )}\n      {...rest}\n    >\n      <span id={contentId} className=\"inline-flex items-center gap-1\">\n        {children}\n      </span>\n      {dismissible && (\n        <button\n          {...dismissButtonProps}\n          type={(dismissButtonProps.type as 'button' | 'submit' | 'reset' | undefined) ?? 'button'}\n          // A merged `disabledFocusable` Button makes the dismiss button unavailable but focusable\n          // (spread last: it wins over `disabled` and `onDismiss`).\n          {...(disabledFocusable ? MERGED_DISABLED_FOCUSABLE_PROPS : undefined)}\n        >\n          <span id={dismissLabelId} className=\"sr-only\">\n            {dismissLabel}\n          </span>\n          {contentMayName ? (\n            // The merged button's own content, rendered as is: its text label can name the button.\n            // `gap-[inherit]` keeps a gap set on the button between the content items.\n            <span\n              id={dismissTextId}\n              ref={setLabelTarget}\n              className=\"inline-flex items-center justify-center gap-[inherit]\"\n            >\n              {content}\n            </span>\n          ) : (\n            content\n          )}\n        </button>\n      )}\n    </Component>\n  );\n};\n\nTag.displayName = 'Tag';\n"],"mappings":";;;;;;;;;;;;;;;AA0GA,IAAMG,oBAAwC,IAAI,IAAI;CACpD;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,CAAC,GAEKC,IAAc,YAMdC,oBAAiC,IAAI,IAAI,CAAC,cAAc,iBAAiB,CAAC,GAsC1EC,UAAa,CAAC;AAGpB,SAASC,EAAY,GAAoE;CACvF,IAAMC,IAAuB,CAAC,GAC1BC,IAAc;CAClB,KAAK,IAAM,CAACC,GAAKC,MAAU,OAAO,QAAQC,CAAK,GAC7C,AAAIP,EAAU,IAAIK,CAAG,IACfC,MAAU,KAAA,MAAW,IAAc,MAEvC,EAAOD,KAAOC;CAGlB,OAAO;EAAE,OAAOH;EAAQ;CAAY;AACtC;AAEA,IAAMK,IAAgB;AAEtB,SAASC,EAAc,GAAuC;CAE5D,IADI,OAAOH,KAAU,aAAYA,KAC7BT,EAAM,eAAeS,CAAK,KAAK,OAAO,YAAYA,GAAO,OAAO;CACpE,IAAMI,IAAiB,OAAO,eAAeJ,CAAK;CAClD,OAAOI,MAAU,QAAQA,MAAU,OAAO;AAC5C;AAGA,SAASC,IAAyC;CAChD,OAAO,kBAACC,GAAD,EAAa,MAAM,GAAK,CAAA;AACjC;AAWA,SAASC,EAAmB,GAAuD;CACjF,IAAI,CAACC,EAAmBC,CAAI,GAC1B,OAAO;EACL,aAAa;EACb,SAASJ,EAAsB;EAC/B,SAAS;EACT,aAAa;EACb,gBAAgB;EAChB,kBAAkB;EAClB,mBAAmB;CACrB;CAMF,IAAMK,IAAcC,EAAeF,CAAuB;CAC1D,IACElB,EAAM,eAAoCkB,CAAI,MAC7CC,MAAgB,YAAYA,MAAgBE,IAC7C;EACA,IAAM,EAAE,aAAU,yBAAyBC,GAAQ,GAAGC,MAAiBL,EAAK,OACtEM,IAAeL,MAAgBE,GACjCI,IAA0BF;EAC9B,IAAIC,GAAc;GAGhB,IAAY,CAAC;GACb,KAAK,IAAM,CAAChB,GAAKC,MAAU,OAAO,QAAQc,CAAY,GACpD,AAAKG,EAAqB,IAAIlB,CAAG,MAAG,EAAUA,KAAOC;EAEzD;EACA,IAAMkB,IAAOH,IAAeD,EAAa,OAAO,KAAA,GAC1C,EAAE,OAAOK,GAAa,mBAAgBvB,EAAYoB,CAAS,GAC3DI,IAAWZ,EAAmBU,CAAI,IACpCG,EAAWH,GAAM,QAAQhB,GAAe,EAAE,eAAe,GAAK,CAAC,IAC/D,MAIEoB,IACJT,KAAU,OAGRU,EAAuBC,CAAQ,IAF/B,kBAAC,QAAD;GAAM,WAAWtB;GAAe,yBAAyBW;EAAS,CAAA;EAItE,OAAO;GACL;GACA,SACEO,KAAYZ,EAAmBc,CAAU,IACrCG,EAAgBL,GAAUE,GAAYP,KAAgBD,EAAa,YAAY,IAC/ET,EAAsB;GAC5B,SAAS;GACT;GACA,gBAAgB;GAChB,kBAAkBqB,EAAaJ,CAAU;GACzC,mBAAmBP,KAAgB,EAAQD,EAAa;EAC1D;CACF;CAEA,IAAIX,EAAcM,CAAI,GAAG;EAIvB,IAAMkB,IAAelB,EAAK,OAAOG,GAC3BgB,IACJnB,EAAK,OAAO,YACZkB,KACA,OAAO,KAAKlB,CAAI,CAAC,CAAC,MAAM,MAAQjB,EAAiB,IAAIO,CAAG,KAAKN,EAAY,KAAKM,CAAG,CAAC,GAC9EoB,IAA4B,CAAC,GAC7BU,IAA6B,CAAC,GAG9BC,IAAyB,CAAC,GAC5BhC,IAAc;EAClB,KAAK,IAAM,CAACC,GAAKC,MAAU,OAAO,QAAQS,CAAI,GAC5C,AAAIV,MAAQ,OACNC,MAAU,YAAY,CAAC2B,MAAc,EAAa,KAAK3B,KAClD2B,KAAgBV,EAAqB,IAAIlB,CAAG,IACrD,EAASA,KAAOC,IACPN,EAAU,IAAIK,CAAG,IACtBC,MAAU,KAAA,MAAW,IAAc,MAC9BD,MAAQ,cAAcA,MAAQ,4BAEvC,EAAaA,KAAOC,IACX4B,KAAmB7B,EAAI,WAAW,OAAO,KAAKA,MAAQ,gBAC/D,EAAYA,KAAOC,IAEnB,EAAaD,KAAOC;EAexB,OATIQ,EAAmBsB,EAAS,IAAI,IAClC,EAAa,WAAWL,EACtBJ,EAAWS,EAAS,MAAsB,QAAQ5B,CAAa,GAC/DqB,EAAuBM,EAAa,QAAQ,GAC5CC,EAAS,YACX,IACSC,EAAwBF,EAAa,MAAM,QAAQA,CAAY,MACxE,EAAa,WAAWxB,EAAsB,IAEzC;GACL,aAAauB,KAAkB,OAAO,KAAKT,CAAW,CAAC,CAAC,SAAS,IAAIA,IAAc;GACnF,SAASE,EAAWQ,GAAoC,QAAQ3B,GAAe,EAC7E,eAAe,GACjB,CAAC;GACD,SAAS0B,IAAiB,kBAAkB;GAC5C;GACA,gBAAgB;GAChB,kBAAkB;GAClB,mBAAmB,EAAQE,EAAS;EACtC;CACF;CAEA,OAAO;EACL,aAAa;EACb,SAAST,EAAWZ,GAAsB,QAAQP,GAAe,EAAE,eAAe,GAAK,CAAC;EACxF,SAAS;EACT,aAAa;EACb,gBAAgB;EAChB,kBAAkB;EAClB,mBAAmB;CACrB;AACF;AAqBA,IAAa8B,KAAkD,MAAU;CACvE,IAAM,EACJ,OACA,gBACA,cACA,gBACA,kBAAe,WACf,cACA,aACA,QACA,GAAGC,MACDhC,GACEiC,IAA+BC,KAAM,QACrCC,IAAY/C,EAAM,aAAa,GAC/BgD,IAAiBhD,EAAM,aAAa,GACpCiD,IAAgBjD,EAAM,kBAAkB,GAExC,EACJ,aAAakD,GACb,YACA,YACA,gBACA,mBACA,qBACA,yBACEhC,EAAmBiC,IAAcC,IAAc,KAAA,CAAS,GAKtD,CAACC,GAAaC,KAAkBpD,EAAM,SAAiC,IAAI,GAC3EqD,IAAqBrD,EAAM,aAC9B,MAA0BmD,IAAcG,EAAiBH,GAAaI,CAAQ,IAAInD,GACnF,CAAC+C,CAAW,CACd,GACMK,IAAsBxD,EAAM,qBAChCqD,SACOF,IAAcM,EAAqBN,CAAW,IAAIO,SACnDA,CACR,GACMC,IAAiBC,KAAkBJ;CAEzC,EAAM,gBAAgB;EACpB,AAAIK,MAAY,mBACdC,EACE,0BACA,0TACF,IACSD,MAAY,mBACrBE,EACE,OACA,kFACA,6CACA,8GACF;CAEJ,GAAG,CAACF,CAAO,CAAC;CAIZ,IAAMG,IACJf,MAAgB,KAAA,MAAcgB,MAAc,KAAA,KAAaf,MAAgB,KAAA;CAU3E,AATAlD,EAAM,gBAAgB;EACpB,AAAIgE,KACFF,EACE,mCACA,yIACF;CAEJ,GAAG,CAACE,CAAmB,CAAC,GAExBhE,EAAM,gBAAgB;EACpB,AAAIO,KACFuD,EACE,wBACA,kOACF;CAEJ,GAAG,CAACvD,CAAW,CAAC;CAEhB,IAAM2D,IAA+B;EACnC,MAAM;EACN,WAAWC,EACT,oHACA,0DACA,mDACAC,GACAC,CACF;EACA,mBAAmB,GAAGV,IAAiBZ,IAAgBD,EAAe,GAAGD;CAC3E;CACA,AAAIoB,MAAW,EAAe,UAAUA;CACxC,IAAMK,IAAqBtB,IACvBuB,EAAWL,GAAgBlB,CAAe,IAC1CkB;CAEJ,OACE,kBAACvB,GAAD;EACO;EACL,WAAWwB,EACT,8FACAlB,IAAc,WAAW,QACzBuB,CACF;EACA,GAAI9B;EAPN,UAAA,CASE,kBAAC,QAAD;GAAM,IAAIG;GAAW,WAAU;GAC5B;EACG,CAAA,GACLI,KACC,kBAAC,UAAD;GACE,GAAIqB;GACJ,MAAOA,EAAmB,QAAsD;GAGhF,GAAKG,IAAoBC,IAAkC,KAAA;GAL7D,UAAA,CAOE,kBAAC,QAAD;IAAM,IAAI5B;IAAgB,WAAU;IACjC,UAAA6B;GACG,CAAA,GACLf,IAGC,kBAAC,QAAD;IACE,IAAIb;IACJ,KAAKK;IACL,WAAU;IAET,UAAAwB;GACG,CAAA,IAENA,CAEI;EAED,CAAA,CAAA;;AAEf;AAEA,EAAI,cAAc"}

package/dist/components/feedback/MessageBar.cjs

@@ -0,0 +1,2 @@
+"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/children.cjs"),r=require("../../lib/dev.cjs"),i=require("../../lib/slot.cjs"),a=require("../../hooks/useMergedRefs.cjs"),o=require("../../lib/styles.cjs"),s=require("../button/Button.cjs"),c=require("../../lib/icons.cjs"),l=require("../../lib/mergeProps.cjs"),u=require("../button/Button.slots.cjs"),d=require("../../lib/labelInName.cjs"),f=require("./MessageBar.status.cjs");let p=require("react");p=e.__toESM(p,1);let m=require("react/jsx-runtime");var h={info:`bg-info-tint`,success:`bg-success-tint`,warning:`bg-warning-tint`,error:`bg-error-tint`},g=`Dismiss`,_=new Set([`type`,`disabled`,`autoFocus`,`form`,`formAction`,`formEncType`,`formMethod`,`formNoValidate`,`formTarget`,`name`,`value`,`popoverTarget`,`popoverTargetAction`]),v=new Set([`aria-label`,`aria-labelledby`,`title`]),y=/^on[A-Z]/,b=`inline-flex items-center justify-center`,x=()=>{};function S(){return(0,m.jsx)(c.DismissIcon,{})}function C(e){return e===`button`||e===s.Button}function w(){return{buttonProps:{},content:S(),contentMayName:!1,literalTextLabel:!1,disabledFocusable:!1,warning:null}}function T(e){if(e===null)return null;if(e===void 0||typeof e==`boolean`)return w();let r=e;if(n.isElementOfType(r,`button`,s.Button)){let e={};for(let[t,n]of Object.entries(r.props))t!==`children`&&t!==`dangerouslySetInnerHTML`&&!u.BUTTON_OWN_PROP_KEYS.has(t)&&(e[t]=n);let t=n.isElementOfType(r,s.Button),a=r.props.dangerouslySetInnerHTML,o=a==null?i.materialiseSlotContent(r.props.children):(0,m.jsx)(`span`,{className:b,dangerouslySetInnerHTML:a}),c=r.props.icon,l=t&&i.slotRendersContent(c)?i.renderSlot(c,`span`,b,{"aria-hidden":!0}):null;return{buttonProps:e,content:l||i.slotRendersContent(o)?u.placeButtonIcon(l,o,r.props.iconPosition):S(),contentMayName:!0,literalTextLabel:d.hasTextLabel(o),disabledFocusable:t&&!!r.props.disabledFocusable,warning:`button-element`}}let a=i.resolveSlot(e,`span`);if(!a)return w();let{Component:o,props:c,children:l}=a,f=C(o),h=f||Object.keys(c).some(e=>_.has(e)||y.test(e)),g={},x={},T=null;for(let[e,t]of Object.entries(c))o===s.Button&&u.BUTTON_OWN_PROP_KEYS.has(e)?e===`icon`&&i.slotRendersContent(t)&&(T=i.renderSlot(t,`span`,b,{"aria-hidden":!0})):_.has(e)||y.test(e)||v.has(e)||h&&(e===`className`||e===`style`||e===`ref`)?g[e]=t:x[e]=t;let E=f?`span`:o,D={"aria-hidden":!0,...x,className:t.cn(b,x.className)},O=null;return T||i.slotRendersContent(l)?O=u.placeButtonIcon(T,l,o===s.Button&&c.iconPosition):i.slotWrapsDefaultContent(E,{...x,children:l})&&(O=S()),{buttonProps:g,content:O===null?p.createElement(E,D):p.createElement(E,D,O),contentMayName:!1,literalTextLabel:!1,disabledFocusable:o===s.Button&&!!c.disabledFocusable,warning:h?`button-object`:null}}var E=({status:e=`info`,statusLabel:n,onDismiss:s,icon:c,dismiss:_,children:y,className:b,ref:S,...C})=>{let w=t.cn(`mt-0.5 inline-flex shrink-0`,f.STATUS_ICON_COLOR[e]),E=c===void 0?(0,m.jsx)(`span`,{"aria-hidden":`true`,className:w,children:(0,m.jsx)(f.StatusIcon,{status:e,size:20})}):i.renderSlot(c,`span`,w,{"aria-hidden":!0}),D=s!==void 0||_!==void 0&&typeof _!=`boolean`?T(_):null,O=D?.warning??null;p.useEffect(()=>{O===`button-element`?r.warnOnce(`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`."):O===`button-object`&&r.warnOnce(`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`.")},[O]);let{ref:k,...A}=D?.buttonProps??{},j=Object.keys(A).some(e=>v.has(e)&&A[e]!=null),M=D!==null&&D.contentMayName&&!j,N=D?.literalTextLabel??!1,[P,F]=p.useState(null),I=p.useCallback(e=>P?d.observeTextLabel(P,e):x,[P]),L=p.useSyncExternalStore(I,()=>P?d.hasRenderedTextLabel(P):N,()=>N),R=M&&L,z=a.useMergedRefs(k,M?F:void 0),B=null;if(D){let e=l.mergeProps({"aria-label":j||R?void 0:g,onClick:()=>s?.(),className:t.cn(`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`,o.focusRing,`disabled:cursor-not-allowed disabled:opacity-50`,u.mergedAriaDisabledClasses)},A);B=(0,m.jsx)(`button`,{...e,ref:z,type:e.type??`button`,...D.disabledFocusable?u.MERGED_DISABLED_FOCUSABLE_PROPS:void 0,children:D.content})}return(0,m.jsxs)(`div`,{ref:S,role:e===`error`||e===`warning`?`alert`:`status`,...C,className:t.cn(`flex items-start gap-3 rounded border-s-4 px-4 py-3 text-foreground`,h[e],f.STATUS_BORDER[e],b),children:[E,(0,m.jsxs)(`div`,{className:`min-w-0 flex-1 text-body-1`,children:[(0,m.jsx)(f.StatusText,{label:f.getStatusLabel(e,n)}),y]}),B]})};E.displayName=`MessageBar`,exports.MessageBar=E;
+//# sourceMappingURL=MessageBar.cjs.map