@mortenbrudvik/waveui 0.4.0 → 0.7.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.mjs","names":["React","avatarSizeClasses","IMAGE_CLASS","getInitials","parts","name","normaliseName","readSlotProps","slot","getImageKey","imageSlot","src","element","slotProps","isPlainObject","value","proto","sameKeyPart","a","b","keys","k","sameImageKey","part","i","Avatar","ariaLabel","ariaLabelledBy","ariaDescribedBy","ariaDescription","ariaDetails","rest","image","imageKey","failed","setFailed","prevImageKey","setPrevImageKey","visualRef","img","active","checkedSrc","checkedSrcSet","markFailed","rootVisualRef","useMergedRefs","ref","hasConsumerName","roleCarriesName","role","normalisedName","imageAlt","decorative","handleError","ownAlt","hasOwnAlt","renderedAlt","description","imageIsNamed","imageDescription","imageNode","overrides","composeEventHandlers","ownIds","joinIds","renderSlot","visualDescription","iconNode","icon","slotRendersContent","initials","content","colorClass","PersonIcon","imageName","slotAltName","label","a11yProps","badgeNode","badge","hasBadge","visualClassName","cn","size","className"],"sources":["../../../src/components/data-display/Avatar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { joinIds } from '../../lib/aria';\nimport { cn } from '../../lib/cn';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport { PersonIcon } from '../../lib/icons';\nimport type { Size, Slot } from '../../lib/types';\nimport { renderSlot, slotRendersContent } from '../../lib/slot';\n\n/** Properties for the Avatar component. */\nexport interface AvatarProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /**\n   * URL of the avatar image. When it fails to load (also before hydration, for server-rendered\n   * markup), the avatar falls back to its icon or initials; a new `src` is tried again.\n   */\n  src?: string;\n  /**\n   * Full name of the person. It names the avatar for assistive technology (the image `alt`; in\n   * initials and icon mode, or with a consumer `role`, the avatar's `aria-label`, with\n   * `role=\"img\"` unless `role` is given) and generates the initials shown when there is no image.\n   */\n  name?: string;\n  /** Size of the avatar.\n   * @default 'medium'\n   */\n  size?: Size;\n  /**\n   * Icon shown instead of the initials when there is no image. Rendered in an `aria-hidden`\n   * `<span>` (a slot object can override its attributes). A falsy value (`null`, `false`, `''`,\n   * `0`, `NaN`, e.g. `icon={count && <Icon />}`) counts as no icon, as in 0.4, and so does an\n   * array, `Set` or generator whose items render nothing. Without `icon` and without a usable\n   * `name`, a generic person glyph is shown.\n   */\n  icon?: Slot<'span'>;\n  /**\n   * Custom image. Accepts a URL string (treated like `src`), an element (rendered as the image\n   * itself, e.g. `<img>` or a framework image component) or an object of `<img>` attributes\n   * (`{ src, alt, … }`). Takes precedence over `src`; its `alt` defaults to `name` (an `alt` that\n   * is `undefined` counts as not given). When its alt names the avatar, the avatar's\n   * `aria-describedby` ids are joined with the slot's own, while the slot's own `aria-description`\n   * and `aria-details` win over the avatar's. When the image fails to load, an avatar without a\n   * `name` keeps the name of the slot's own `alt`. After a load failure, a new image is tried\n   * again: another `src` or `srcSet` of any type (an equal inline object is the same image), or\n   * for an element slot another component type or `key`.\n   */\n  image?: Slot<'img'>;\n  /**\n   * Badge shown at the bottom end corner, e.g. `<PresenceBadge status=\"busy\" />`. With a badge\n   * the avatar is wrapped in an outer `<span>` that receives `ref`, `className` and the other\n   * props; `role`, `aria-label`, `aria-labelledby`, `aria-describedby`, `aria-description` and\n   * `aria-details` stay on the avatar visual, so the badge keeps its own accessible name. A falsy\n   * value (`null`, `false`, `''`, `0`, `NaN`, e.g. `badge={count && <CounterBadge count={count} />}`)\n   * counts as no badge, as in 0.4, and so does an array, `Set` or generator whose items render\n   * nothing: the avatar then renders without the wrapper.\n   */\n  badge?: Slot<'span'>;\n  /**\n   * Hides the avatar visual from assistive technology (`aria-hidden`, empty image `alt`, no\n   * `role=\"img\"`). Use it when the name is already shown next to the avatar (Persona). A badge\n   * stays exposed.\n   * @default false\n   */\n  decorative?: boolean;\n  /** Ref to the root `<span>`: the avatar itself, or the badge wrapper when `badge` is set. */\n  ref?: React.Ref<HTMLSpanElement>;\n}\n\n/**\n * Width, height and text size classes of the avatar per `size`. Module-only (not in the barrel):\n * AvatarGroup sizes its overflow button with the same classes, so the two always match.\n */\nexport const avatarSizeClasses: Readonly<Record<Size, string>> = {\n  'extra-small': 'w-6 h-6 text-[10px]', // 24px\n  small: 'w-8 h-8 text-xs', // 32px\n  medium: 'w-10 h-10 text-sm', // 40px\n  large: 'w-12 h-12 text-base', // 48px\n  'extra-large': 'w-14 h-14 text-lg', // 56px\n};\n\nconst IMAGE_CLASS = 'w-full h-full object-cover';\n\n/** First letter of the first and last word, upper-cased; `''` for a blank name. */\nfunction getInitials(name: string): string {\n  const parts = name.trim().split(/\\s+/).filter(Boolean);\n  if (parts.length === 0) return '';\n  const first = Array.from(parts[0]!)[0] ?? '';\n  const last = parts.length > 1 ? (Array.from(parts[parts.length - 1]!)[0] ?? '') : '';\n  return (first + last).toUpperCase();\n}\n\n/** A name with its whitespace collapsed, or `undefined` when it is blank. */\nfunction normaliseName(name: string | undefined): string | undefined {\n  return name?.trim().replace(/\\s+/g, ' ') || undefined;\n}\n\ntype ImageErrorHandler = React.ReactEventHandler<HTMLImageElement>;\n\n/** Description props that go to the element carrying the avatar's name (data-display#19). */\ntype DescriptionProps = Pick<\n  React.HTMLAttributes<HTMLElement>,\n  'aria-describedby' | 'aria-description' | 'aria-details'\n>;\n\n/** Props the avatar sets on an element or object image slot, over the slot's own. */\ninterface SlotOverrides {\n  onError: ImageErrorHandler;\n  alt?: string;\n  'aria-describedby'?: string;\n}\n\n/** The props of an element or object image slot that the avatar reads. */\ninterface ImageSlotProps {\n  src?: unknown;\n  srcSet?: unknown;\n  alt?: unknown;\n  onError?: unknown;\n  'aria-describedby'?: unknown;\n}\n\n/** The props of an element or object image slot (to read its `src`, `alt` and handlers). */\nfunction readSlotProps(slot: unknown): ImageSlotProps | undefined {\n  if (React.isValidElement(slot)) return slot.props as ImageSlotProps;\n  if (typeof slot === 'object' && slot !== null && !(Symbol.iterator in slot)) {\n    return slot as ImageSlotProps;\n  }\n  return undefined;\n}\n\n/**\n * What identifies the image, so a load failure is kept for it and a new image is tried again\n * (data-display#4): the `src` and `srcSet`, of any type (a framework image component may take a\n * static-import object), and for an element slot also its type and `key`.\n */\ntype ImageKey = readonly [type: unknown, key: unknown, src: unknown, srcSet: unknown];\n\nfunction getImageKey(\n  imageSlot: unknown,\n  slotProps: ImageSlotProps | undefined,\n  src: string | undefined,\n): ImageKey {\n  if (imageSlot === undefined) return [undefined, undefined, src || undefined, undefined];\n  if (typeof imageSlot === 'string') return [undefined, undefined, imageSlot, undefined];\n  const element = React.isValidElement(imageSlot) ? imageSlot : undefined;\n  return [element?.type, element?.key, slotProps?.src, slotProps?.srcSet];\n}\n\nfunction isPlainObject(value: unknown): value is Record<string, unknown> {\n  if (typeof value !== 'object' || value === null) return false;\n  const proto: unknown = Object.getPrototypeOf(value);\n  return proto === Object.prototype || proto === null;\n}\n\n/** Same value, or plain objects with the same entries (an inline `src={{ … }}` on each render). */\nfunction sameKeyPart(a: unknown, b: unknown): boolean {\n  if (Object.is(a, b)) return true;\n  if (!isPlainObject(a) || !isPlainObject(b)) return false;\n  const keys = Object.keys(a);\n  return (\n    keys.length === Object.keys(b).length &&\n    keys.every((k) => Object.prototype.hasOwnProperty.call(b, k) && Object.is(a[k], b[k]))\n  );\n}\n\nfunction sameImageKey(a: ImageKey, b: ImageKey): boolean {\n  return a.every((part, i) => sameKeyPart(part, b[i]));\n}\n\n/**\n * A circular picture of a person: their image, an icon, or the initials of their `name`.\n *\n * - **Image**: `image` (URL string, element or `{ src, alt }` object) or `src`. If the image fails\n *   to load, the avatar falls back to `icon`, the initials or a person glyph, with their\n *   background; a new image is tried again. A server-rendered image that failed before hydration\n *   is detected after mount (settled without a natural size, confirmed by `decode()`).\n * - **Accessible name**: an image uses `name` (whitespace collapsed) as its `alt`, or `''` when the\n *   name is blank. Without an image (none given, or it failed to load) the avatar is `role=\"img\"`\n *   with `aria-label={name}` (without a name: the image slot's own `alt`) and the initials/icon\n *   are hidden; without either (and without `aria-label`/`aria-labelledby`) it is decorative\n *   (`aria-hidden`). A consumer `aria-label`, `aria-labelledby` or `role` (other than\n *   `presentation`/`none`) puts the name on the avatar visual, and an image inside it gets\n *   `alt=\"\"`. `decorative` hides it in every mode. `aria-describedby`, `aria-description` and\n *   `aria-details` go to the element that carries the name: the `<img>` when a non-blank `alt`\n *   names it, otherwise the avatar visual (never an `alt=\"\"` image).\n * - **Badge**: `badge` renders at the bottom end corner (logical, RTL-safe) as a sibling of the\n *   avatar visual, so a `PresenceBadge` keeps its own name. With a badge, `ref`, `className` and\n *   the rest props go to the outer wrapper.\n *\n * @example\n * <Avatar name=\"Jane Doe\" src=\"/jane.jpg\" badge={<PresenceBadge status=\"available\" />} />\n */\nexport const Avatar = ({\n  src,\n  name,\n  size = 'medium',\n  icon,\n  image,\n  badge,\n  decorative = false,\n  className,\n  ref,\n  role,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  'aria-describedby': ariaDescribedBy,\n  'aria-description': ariaDescription,\n  'aria-details': ariaDetails,\n  ...rest\n}: AvatarProps) => {\n  const imageSlot =\n    image === null || image === undefined || typeof image === 'boolean' || image === ''\n      ? undefined\n      : image;\n  const slotProps = readSlotProps(imageSlot);\n  const imageKey = getImageKey(imageSlot, slotProps, src);\n\n  // Load failure of the current image; a new image is tried again (C-HOOKS: adjust state during\n  // render on prop change).\n  const [failed, setFailed] = React.useState(false);\n  const [prevImageKey, setPrevImageKey] = React.useState(imageKey);\n  if (!sameImageKey(prevImageKey, imageKey)) {\n    setPrevImageKey(imageKey);\n    setFailed(false);\n  }\n\n  // An image that failed before hydration (a fast 404 of server-rendered markup) never reaches\n  // `onError`: React attaches the listener while hydrating and does not replay the event. After\n  // mount, a settled image without a natural size is broken, unless it is an SVG without one, so\n  // `decode()` (which rejects for a broken image) confirms it where the browser supports it. Later\n  // images, rendered by the client, report their errors through `onError`.\n  const visualRef = React.useRef<HTMLSpanElement>(null);\n  React.useLayoutEffect(() => {\n    const img = visualRef.current?.querySelector('img');\n    if (!img || !img.complete || img.naturalWidth !== 0) return;\n    let active = true;\n    const checkedSrc = img.getAttribute('src');\n    const checkedSrcSet = img.getAttribute('srcset');\n    const markFailed = () => {\n      // Deferred (C-HOOKS); skipped if the image was replaced or got another source meanwhile.\n      if (\n        active &&\n        img.isConnected &&\n        img.getAttribute('src') === checkedSrc &&\n        img.getAttribute('srcset') === checkedSrcSet\n      ) {\n        setFailed(true);\n      }\n    };\n    if (typeof img.decode === 'function') img.decode().then(undefined, markFailed);\n    else queueMicrotask(markFailed);\n    return () => {\n      active = false;\n    };\n  }, []);\n  const rootVisualRef = useMergedRefs(ref, visualRef);\n\n  const hasConsumerName = ariaLabel !== undefined || ariaLabelledBy !== undefined;\n  // A consumer role goes to the visual span together with the name (data-display#19), so the\n  // image inside it is presentational (`alt=\"\"`), as with a consumer `aria-label`: the children\n  // of `role=\"img\"` are not exposed. A presentational role (`presentation`, `none`) cannot carry\n  // a name, so the image keeps it.\n  const roleCarriesName = role !== undefined && role !== 'presentation' && role !== 'none';\n  const normalisedName = normaliseName(name);\n  const imageAlt = decorative || hasConsumerName || roleCarriesName ? '' : (normalisedName ?? '');\n  const handleError: ImageErrorHandler = () => setFailed(true);\n\n  // The alt text the image renders with: an element or object slot's own `alt` wins over ours. An\n  // `alt` that is `undefined` (an optional `alt: user.photoAlt`, a wrapper forwarding `alt={alt}`)\n  // or `null` is not given, so ours applies (the slot's own value would otherwise override it).\n  const ownAlt = slotProps?.alt;\n  const hasOwnAlt = ownAlt !== undefined && ownAlt !== null;\n  const renderedAlt: unknown = hasOwnAlt ? ownAlt : imageAlt;\n\n  // The description goes to the element that carries the name: the image itself when a non-blank\n  // `alt` names it (the visual span then has no role, or a presentational one), otherwise the\n  // visual span. An image with an empty `alt` is presentational, and a description on it would\n  // conflict with that role.\n  const description: DescriptionProps = {\n    'aria-describedby': ariaDescribedBy,\n    'aria-description': ariaDescription,\n    'aria-details': ariaDetails,\n  };\n  const imageIsNamed =\n    !decorative &&\n    !hasConsumerName &&\n    !roleCarriesName &&\n    typeof renderedAlt === 'string' &&\n    renderedAlt.trim() !== '';\n  const imageDescription: DescriptionProps = imageIsNamed ? description : {};\n\n  let imageNode: React.ReactNode = null;\n  if (!failed) {\n    if (typeof imageSlot === 'string') {\n      imageNode = (\n        <img\n          src={imageSlot}\n          alt={imageAlt}\n          {...imageDescription}\n          className={IMAGE_CLASS}\n          onError={handleError}\n        />\n      );\n    } else if (imageSlot !== undefined) {\n      // The slot's own props win over renderSlot's defaults, so the composed `onError`, the\n      // default `alt` (when the slot gives none) and the joined `aria-describedby` (the avatar's\n      // ids, then the slot's) are set on the slot itself. A slot's own `aria-description` and\n      // `aria-details` win over the avatar's.\n      const overrides: SlotOverrides = {\n        onError: composeEventHandlers(\n          slotProps?.onError as ImageErrorHandler | undefined,\n          handleError,\n        ),\n      };\n      if (!hasOwnAlt) overrides.alt = imageAlt;\n      if (imageIsNamed) {\n        const ownIds = slotProps?.['aria-describedby'];\n        overrides['aria-describedby'] = joinIds(\n          ariaDescribedBy,\n          typeof ownIds === 'string' ? ownIds : undefined,\n        );\n      }\n      const slot = React.isValidElement(imageSlot)\n        ? React.cloneElement(imageSlot as React.ReactElement<SlotOverrides>, overrides)\n        : slotProps\n          ? { ...(imageSlot as object), ...overrides }\n          : imageSlot;\n      imageNode = renderSlot(slot as Slot<'img'>, 'img', IMAGE_CLASS, {\n        alt: imageAlt,\n        ...imageDescription,\n      });\n    } else if (src) {\n      imageNode = (\n        <img\n          src={src}\n          alt={imageAlt}\n          {...imageDescription}\n          className={IMAGE_CLASS}\n          onError={handleError}\n        />\n      );\n    }\n  }\n  const visualDescription = imageNode !== null && imageIsNamed ? {} : description;\n\n  // A falsy icon (`icon={count && <Icon />}` with count 0) is no icon, as in 0.4, and so is a\n  // collection whose items render nothing (`icon={items.map(…)}` mapping to nothing). The check\n  // does not consume a generator: renderSlot still renders its items.\n  const iconNode =\n    imageNode === null && icon && slotRendersContent(icon)\n      ? renderSlot(icon, 'span', 'inline-flex', { 'aria-hidden': true })\n      : null;\n  const initials = imageNode === null && iconNode === null && name ? getInitials(name) : '';\n\n  let content: React.ReactNode;\n  let colorClass: string | undefined;\n  if (imageNode !== null) {\n    content = imageNode;\n  } else if (iconNode !== null) {\n    content = iconNode;\n    colorClass = 'bg-muted text-muted-foreground';\n  } else if (initials) {\n    content = <span aria-hidden=\"true\">{initials}</span>;\n    colorClass = 'bg-primary text-primary-foreground';\n  } else {\n    content = <PersonIcon size=\"60%\" />;\n    colorClass = 'bg-muted text-muted-foreground';\n  }\n\n  // Accessible name of the avatar visual (data-display#19, #27). With a consumer role and an\n  // image it is the name the image would carry: an element or object slot's own alt, else `name`.\n  // Without an image (none given, or it failed to load) it is `name`, else the slot's own alt: an\n  // avatar named only by its image alt keeps that name when the image fails.\n  const imageName =\n    imageNode !== null && roleCarriesName && typeof renderedAlt === 'string'\n      ? normaliseName(renderedAlt)\n      : undefined;\n  const slotAltName = typeof ownAlt === 'string' ? normaliseName(ownAlt) : undefined;\n  const label =\n    ariaLabel ??\n    (imageNode === null\n      ? (normalisedName ?? slotAltName)\n      : roleCarriesName\n        ? (imageName ?? normalisedName)\n        : undefined);\n  let a11yProps: React.HTMLAttributes<HTMLSpanElement>;\n  if (decorative) {\n    a11yProps = { 'aria-hidden': true, ...visualDescription };\n  } else if (label !== undefined || ariaLabelledBy !== undefined) {\n    a11yProps = {\n      role: role ?? 'img',\n      'aria-label': label,\n      'aria-labelledby': ariaLabelledBy,\n      ...visualDescription,\n    };\n  } else if (imageNode !== null || role !== undefined) {\n    a11yProps = { role, ...visualDescription };\n  } else {\n    a11yProps = { 'aria-hidden': true, ...visualDescription };\n  }\n\n  // A falsy or empty badge (`badge={count && <CounterBadge … />}` with count 0) is no badge, as in\n  // 0.4 and like `icon`: no stray \"0\" in the corner, and no wrapper taking the root props.\n  const badgeNode =\n    badge && slotRendersContent(badge)\n      ? renderSlot(badge, 'span', 'absolute bottom-0 end-0 inline-flex')\n      : null;\n  const hasBadge = badgeNode !== null;\n\n  const visualClassName = cn(\n    'inline-flex items-center justify-center rounded-full overflow-hidden shrink-0 font-bold',\n    avatarSizeClasses[size],\n    colorClass,\n  );\n\n  if (!hasBadge) {\n    return (\n      <span ref={rootVisualRef} {...a11yProps} {...rest} className={cn(visualClassName, className)}>\n        {content}\n      </span>\n    );\n  }\n\n  return (\n    <span ref={ref} {...rest} className={cn('relative inline-flex shrink-0', className)}>\n      <span ref={visualRef} {...a11yProps} className={visualClassName}>\n        {content}\n      </span>\n      {badgeNode}\n    </span>\n  );\n};\n\nAvatar.displayName = 'Avatar';\n"],"mappings":";;;;;;;;;;AAuEA,IAAaC,IAAoD;CAC/D,eAAe;CACf,OAAO;CACP,QAAQ;CACR,OAAO;CACP,eAAe;AACjB,GAEMC,IAAc;AAGpB,SAASC,GAAY,GAAsB;CACzC,IAAMC,IAAQC,EAAK,KAAK,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC,OAAO,OAAO;CAIrD,OAHID,EAAM,WAAW,IAAU,OACjB,MAAM,KAAKA,EAAM,EAAG,CAAC,CAAC,MAAM,OAC7BA,EAAM,SAAS,IAAK,MAAM,KAAKA,EAAMA,EAAM,SAAS,EAAG,CAAC,CAAC,MAAM,KAAM,IAAA,CAC5D,YAAY;AACpC;AAGA,SAASE,EAAc,GAA8C;CACnE,OAAOD,GAAM,KAAK,CAAC,CAAC,QAAQ,QAAQ,GAAG,KAAK,KAAA;AAC9C;AA2BA,SAASE,EAAc,GAA2C;CAChE,IAAIP,EAAM,eAAeQ,CAAI,GAAG,OAAOA,EAAK;CAC5C,IAAI,OAAOA,KAAS,YAAYA,KAAiB,EAAE,OAAO,YAAYA,IACpE,OAAOA;AAGX;AASA,SAASC,GACP,GACA,GACA,GACU;CACV,IAAIC,MAAc,KAAA,GAAW,OAAO;EAAC,KAAA;EAAW,KAAA;EAAWC,KAAO,KAAA;EAAW,KAAA;CAAS;CACtF,IAAI,OAAOD,KAAc,UAAU,OAAO;EAAC,KAAA;EAAW,KAAA;EAAWA;EAAW,KAAA;CAAS;CACrF,IAAME,IAAUZ,EAAM,eAAeU,CAAS,IAAIA,IAAY,KAAA;CAC9D,OAAO;EAACE,GAAS;EAAMA,GAAS;EAAKC,GAAW;EAAKA,GAAW;CAAM;AACxE;AAEA,SAASC,EAAc,GAAkD;CACvE,IAAI,OAAOC,KAAU,aAAYA,GAAgB,OAAO;CACxD,IAAMC,IAAiB,OAAO,eAAeD,CAAK;CAClD,OAAOC,MAAU,OAAO,aAAaA,MAAU;AACjD;AAGA,SAASC,EAAY,GAAY,GAAqB;CACpD,IAAI,OAAO,GAAGC,GAAGC,CAAC,GAAG,OAAO;CAC5B,IAAI,CAACL,EAAcI,CAAC,KAAK,CAACJ,EAAcK,CAAC,GAAG,OAAO;CACnD,IAAMC,IAAO,OAAO,KAAKF,CAAC;CAC1B,OACEE,EAAK,WAAW,OAAO,KAAKD,CAAC,CAAC,CAAC,UAC/BC,EAAK,OAAO,MAAM,OAAO,UAAU,eAAe,KAAKD,GAAGE,CAAC,KAAK,OAAO,GAAGH,EAAEG,IAAIF,EAAEE,EAAE,CAAC;AAEzF;AAEA,SAASC,GAAa,GAAa,GAAsB;CACvD,OAAOJ,EAAE,OAAO,GAAM,MAAMD,EAAYM,GAAMJ,EAAEK,EAAE,CAAC;AACrD;AAyBA,IAAaC,KAAU,EACrB,QACA,SACA,UAAO,UACP,SACA,UACA,UACA,gBAAa,IACb,cACA,QACA,SACA,cAAcC,GACd,mBAAmBC,GACnB,oBAAoBC,GACpB,oBAAoBC,IACpB,gBAAgBC,IAChB,GAAGC,QACc;CACjB,IAAMrB,IACJsB,KAAU,QAA+B,OAAOA,KAAU,aAAaA,MAAU,KAC7E,KAAA,IACAA,GACAnB,IAAYN,EAAcG,CAAS,GACnCuB,IAAWxB,GAAYC,GAAWG,GAAWF,CAAG,GAIhD,CAACuB,IAAQC,KAAanC,EAAM,SAAS,EAAK,GAC1C,CAACoC,GAAcC,KAAmBrC,EAAM,SAASiC,CAAQ;CAC/D,AAAKX,GAAac,GAAcH,CAAQ,MACtCI,EAAgBJ,CAAQ,GACxBE,EAAU,EAAK;CAQjB,IAAMG,IAAYtC,EAAM,OAAwB,IAAI;CACpD,EAAM,sBAAsB;EAC1B,IAAMuC,IAAMD,EAAU,SAAS,cAAc,KAAK;EAClD,IAAI,CAACC,KAAO,CAACA,EAAI,YAAYA,EAAI,iBAAiB,GAAG;EACrD,IAAIC,IAAS,IACPC,IAAaF,EAAI,aAAa,KAAK,GACnCG,IAAgBH,EAAI,aAAa,QAAQ,GACzCI,UAAmB;GAEvB,AACEH,KACAD,EAAI,eACJA,EAAI,aAAa,KAAK,MAAME,KAC5BF,EAAI,aAAa,QAAQ,MAAMG,KAE/BP,EAAU,EAAI;EAElB;EAGA,OAFI,OAAOI,EAAI,UAAW,aAAYA,EAAI,OAAO,CAAC,CAAC,KAAK,KAAA,GAAWI,CAAU,IACxE,eAAeA,CAAU,SACjB;GACX,IAAS;EACX;CACF,GAAG,CAAC,CAAC;CACL,IAAMC,IAAgBC,EAAcC,GAAKR,CAAS,GAE5CS,IAAkBrB,MAAc,KAAA,KAAaC,MAAmB,KAAA,GAKhEqB,IAAkBC,MAAS,KAAA,KAAaA,MAAS,kBAAkBA,MAAS,QAC5EC,IAAiB5C,EAAcD,CAAI,GACnC8C,IAAWC,KAAcL,KAAmBC,IAAkB,KAAME,KAAkB,IACtFG,UAAuClB,EAAU,EAAI,GAKrDmB,IAASzC,GAAW,KACpB0C,IAAYD,KAAmC,MAC/CE,IAAuBD,IAAYD,IAASH,GAM5CM,IAAgC;EACpC,oBAAoB7B;EACpB,oBAAoBC;EACpB,gBAAgBC;CAClB,GACM4B,IACJ,CAACN,KACD,CAACL,KACD,CAACC,KACD,OAAOQ,KAAgB,YACvBA,EAAY,KAAK,MAAM,IACnBG,IAAqCD,IAAeD,IAAc,CAAC,GAErEG,IAA6B;CACjC,IAAI,CAAC1B,IAAQ;EACX,IAAI,OAAOxB,KAAc,UACvB,IACE,kBAAC,OAAD;GACE,KAAKA;GACL,KAAKyC;GACL,GAAIQ;GACJ,WAAWzD;GACX,SAASmD;EACV,CAAA;OAEE,IAAI3C,MAAc,KAAA,GAAW;GAKlC,IAAMmD,IAA2B,EAC/B,SAASC,EACPjD,GAAW,SACXwC,CACF,EACF;GAEA,IADKE,MAAW,EAAU,MAAMJ,IAC5BO,GAAc;IAChB,IAAMK,IAASlD,IAAY;IAC3B,EAAU,sBAAsBmD,GAC9BpC,GACA,OAAOmC,KAAW,WAAWA,IAAS,KAAA,CACxC;GACF;GACA,IAAMvD,IAAOR,EAAM,eAAeU,CAAS,IACvCV,EAAM,aAAaU,GAAgDmD,CAAS,IAC5EhD,IACE;IAAE,GAAIH;IAAsB,GAAGmD;GAAU,IACzCnD;GACN,IAAYuD,EAAWzD,GAAqB,OAAON,GAAa;IAC9D,KAAKiD;IACL,GAAGQ;GACL,CAAC;EACH,OAAO,AAAIhD,MACT,IACE,kBAAC,OAAD;GACO;GACL,KAAKwC;GACL,GAAIQ;GACJ,WAAWzD;GACX,SAASmD;EACV,CAAA;CAGP;CACA,IAAMa,IAAoBN,MAAc,QAAQF,IAAe,CAAC,IAAID,GAK9DU,IACJP,MAAc,QAAQQ,KAAQC,EAAmBD,CAAI,IACjDH,EAAWG,GAAM,QAAQ,eAAe,EAAE,eAAe,GAAK,CAAC,IAC/D,MACAE,IAAWV,MAAc,QAAQO,MAAa,QAAQ9D,IAAOF,GAAYE,CAAI,IAAI,IAEnFkE,GACAC;CACJ,AAAIZ,MAAc,OAEPO,MAAa,OAGbG,KACT,IAAU,kBAAC,QAAD;EAAM,eAAY;EAAQ,UAAAA;CAAe,CAAA,GACnD,IAAa,yCAEb,IAAU,kBAACG,IAAD,EAAY,MAAK,MAAO,CAAA,GAClC,IAAa,qCAPb,IAAUN,GACV,IAAa,oCAHb,IAAUP;CAgBZ,IAAMc,KACJd,MAAc,QAAQZ,KAAmB,OAAOQ,KAAgB,WAC5DlD,EAAckD,CAAW,IACzB,KAAA,GACAmB,KAAc,OAAOrB,KAAW,WAAWhD,EAAcgD,CAAM,IAAI,KAAA,GACnEsB,IACJlD,MACCkC,MAAc,OACVV,KAAkByB,KACnB3B,IACG0B,MAAaxB,IACd,KAAA,IACJ2B;CACJ,AAYEA,IAZEzB,IACU;EAAE,eAAe;EAAM,GAAGc;CAAkB,IAC/CU,MAAU,KAAA,KAAajD,MAAmB,KAAA,IACvC;EACV,MAAMsB,KAAQ;EACd,cAAc2B;EACd,mBAAmBjD;EACnB,GAAGuC;CACL,IACSN,MAAc,QAAQX,MAAS,KAAA,IAC5B;EAAE;EAAM,GAAGiB;CAAkB,IAE7B;EAAE,eAAe;EAAM,GAAGA;CAAkB;CAK1D,IAAMY,IACJC,KAASV,EAAmBU,CAAK,IAC7Bd,EAAWc,GAAO,QAAQ,qCAAqC,IAC/D,MACAC,KAAWF,MAAc,MAEzBG,IAAkBC,EACtB,2FACAjF,EAAkBkF,IAClBX,CACF;CAUA,OARKQ,KASH,mBAAC,QAAD;EAAW;EAAK,GAAIjD;EAAM,WAAWmD,EAAG,iCAAiCE,CAAS;EAAlF,UAAA,CACE,kBAAC,QAAD;GAAM,KAAK9C;GAAW,GAAIuC;GAAW,WAAWI;GAC7C,UAAAV;EACG,CAAA,GACLO,CACG;MAZJ,kBAAC,QAAD;EAAM,KAAKlC;EAAe,GAAIiC;EAAW,GAAI9C;EAAM,WAAWmD,EAAGD,GAAiBG,CAAS;EACxF,UAAAb;CACG,CAAA;AAYZ;AAEA,EAAO,cAAc"}

package/dist/components/data-display/AvatarGroup.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("../../hooks/useId.cjs"),a=require("../../lib/focus.cjs"),o=require("../../hooks/useMergedRefs.cjs"),s=require("../../lib/layers.cjs"),c=require("../../hooks/useDismiss.cjs"),l=require("../portal/Portal.cjs");require("../../lib/styles.cjs");const u=require("../../hooks/usePopupPosition.cjs"),d=require("../../hooks/useRestoreFocus.cjs"),f=require("./Avatar.cjs");let p=require("react");p=e.__toESM(p,1);let m=require("react/jsx-runtime");var h=`Unnamed member`,g=e=>typeof e==`string`&&e.trim()!==``;function _(e){if(typeof e==`string`||typeof e==`number`)return String(e).trim()||void 0;if(!n.isElementOfType(e,f.Avatar))return;let{decorative:t,name:r,"aria-label":i,"aria-labelledby":a}=e.props;if(t||!g(a)){for(let e of[i,r])if(g(e))return e.trim()}}function v(e){if(typeof e==`string`||typeof e==`number`)return!0;if(!n.isElementOfType(e,f.Avatar))return!1;let{decorative:t,image:r,"aria-labelledby":i}=e.props;if(t)return!0;if(g(i))return!1;let a=p.isValidElement(r)?r.props:r;return!g(typeof a==`object`&&a&&`alt`in a?a.alt:void 0)}var y=({max:e,size:g=`medium`,overflowLabel:y,unnamedMemberLabel:b=h,className:x,children:S,ref:C,"aria-label":w,"aria-labelledby":T,...E})=>{let D=n.flattenChildren(S),O=e===void 0||Number.isNaN(e)?1/0:Math.max(0,Math.floor(e)),k=D.slice(0,O),A=D.slice(k.length),j=A.length,M=w===void 0&&T===void 0;p.useEffect(()=>{M&&r.warnOnce(`AvatarGroup:unnamed`,"AvatarGroup: the group has no accessible name. Pass `aria-label` (or `aria-labelledby`) describing the people it shows.")},[M]);let N=i.useId(`avatar-group-overflow`),[P,F]=p.useState(!1);P&&j===0&&F(!1);let I=P&&j>0,L=typeof y==`function`?y(j):y??`${j} more`,R=p.useContext(c.DismissLayerContext),z=p.useRef(null),B=p.useRef(null),[V,H]=p.useState(null),{setReference:U,setFloating:W,floatingProps:G}=u.usePopupPosition({open:I,side:`bottom`,align:`start`}),{layerId:K}=c.useDismiss({open:I,onDismiss:()=>F(!1),refs:[z,B],anchorRef:z,focusOutside:!0});d.useRestoreFocus({enabled:I,container:V,triggerRef:z,onlyIfFocusInside:!0});let q=o.useMergedRefs(z,U),J=o.useMergedRefs(B,W,H);p.useEffect(()=>{I&&V&&V.focus({preventScroll:!0})},[I,V]);let Y=e=>{let t=z.current;if(e.key!==`Tab`||e.defaultPrevented||!t)return;let n=e.currentTarget,r=e.target;if(!r||typeof r.nodeType!=`number`||!n.contains(r))return;let i=a.getTabbableElements(n),o=i.findIndex(e=>e.contains(r))+(e.shiftKey?-1:1);if(o>=0&&o<i.length){e.preventDefault(),i[o].focus();return}let c=t;if(!e.shiftKey){let e=a.getTabbableElements(t.ownerDocument.body).filter(e=>!n.contains(e)),r=e.indexOf(t);c=r===-1?t:e[r+1],c&&R!==null&&!s.isInsideLayerTree(R,c)&&(c=void 0)}F(!1),c&&(e.preventDefault(),c.focus())},X=I&&A.some(({node:e})=>_(e)===void 0&&v(e));return p.useEffect(()=>{X&&r.warnOnce(`AvatarGroup:unnamed-member`,`AvatarGroup: a hidden member has no accessible name and is listed as "${b}". Give each member a \`name\` or \`aria-label\`.`)},[X,b]),(0,m.jsxs)(`div`,{ref:C,role:`group`,"aria-label":w,"aria-labelledby":T,...E,className:t.cn(`inline-flex items-center`,x),children:[k.map(({key:e,node:n},r)=>(0,m.jsx)(`span`,{className:t.cn(`inline-flex rounded-full ring-2 ring-background`,r>0&&`-ms-2`),children:n},e)),j>0&&(0,m.jsxs)(`button`,{ref:q,type:`button`,"aria-label":L,"aria-haspopup":`dialog`,"aria-expanded":I,"aria-controls":I?N:void 0,className:t.cn(`inline-flex shrink-0 cursor-pointer items-center justify-center rounded-full border-0 p-0 font-semibold`,`bg-muted text-muted-foreground ring-2 ring-background`,`not-disabled:not-aria-disabled:hover:bg-subtle-pressed`,`focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring`,k.length>0&&`-ms-2`,f.avatarSizeClasses[g]),onClick:()=>F(e=>!e),children:[`+`,j]}),I&&(0,m.jsx)(l.Portal,{layerId:K,children:(0,m.jsx)(`div`,{ref:J,id:N,role:`dialog`,"aria-label":L,tabIndex:-1,"data-state":`open`,...G,className:t.cn(`min-w-32 max-w-xs rounded-md border border-border bg-background p-2 text-body-1 text-foreground shadow-16`,`focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring`),onKeyDown:Y,children:(0,m.jsx)(`ul`,{className:`m-0 flex list-none flex-col gap-1 p-0`,children:A.map(({key:e,node:t})=>(0,m.jsx)(`li`,{className:`px-1 py-0.5`,children:_(t)??(v(t)?b:t)},e))})})})]})};y.displayName=`AvatarGroup`,exports.AvatarGroup=y;
+//# sourceMappingURL=AvatarGroup.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarGroup.cjs","names":["isElementOfType","Avatar","React","flattenChildren","useId","DismissLayerContext","usePopupPosition","useDismiss","useMergedRefs","getTabbableElements","isInsideLayerTree","cn","avatarSizeClasses","Portal","require_runtime","require_cn","require_children","require_dev","require_useId","require_focus","require_useMergedRefs","require_layers","require_useDismiss","require_Portal","require_usePopupPosition","require_useRestoreFocus","require_Avatar","react","react_jsx_runtime","DEFAULT_UNNAMED_MEMBER_LABEL","nonBlank","value","getMemberName","member","label","labelledBy","decorative","name","rendersUnnamed","imageProps","image","AvatarGroup","ariaLabel","ariaLabelledBy","props","items","children","limit","max","visible","hidden","overflow","unnamed","popupId","open","setOpen","isOpen","overflowLabel","parentLayerId","triggerRef","surfaceRef","surface","setSurface","triggerRefs","setReference","surfaceRefs","setFloating","handleSurfaceKeyDown","trigger","event","popup","origin","inner","next","el","target","order","index","hasUnnamedMember","node","unnamedMemberLabel","className","i","key","size","floatingProps"],"sources":["../../../src/components/data-display/AvatarGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { flattenChildren, isElementOfType } from '../../lib/children';\nimport { cn } from '../../lib/cn';\nimport { warnOnce } from '../../lib/dev';\nimport { getTabbableElements } from '../../lib/focus';\nimport { isInsideLayerTree } from '../../lib/layers';\nimport { focusRing } from '../../lib/styles';\nimport type { Size } from '../../lib/types';\nimport { useId } from '../../hooks/useId';\nimport { DismissLayerContext, useDismiss } from '../../hooks/useDismiss';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport { usePopupPosition } from '../../hooks/usePopupPosition';\nimport { useRestoreFocus } from '../../hooks/useRestoreFocus';\nimport { Portal } from '../portal/Portal';\nimport { Avatar, avatarSizeClasses } from './Avatar';\nimport type { AvatarProps } from './Avatar';\n\n/** Properties for the AvatarGroup component. */\nexport interface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Maximum number of avatars to display. The others are replaced by an overflow button that\n   * lists their names. `0` or a negative value shows only the overflow button, a fraction is\n   * rounded down, and `NaN` shows every member (as without `max`). The members of a Fragment\n   * count one by one.\n   */\n  max?: number;\n  /** Size of the overflow button (match it to the avatars).\n   * @default 'medium'\n   */\n  size?: Size;\n  /**\n   * Accessible name of the overflow button (and its popup). A function receives the number of\n   * hidden members. Localise it here.\n   * @default (count) => `${count} more`\n   */\n  overflowLabel?: string | ((count: number) => string);\n  /**\n   * Text listed in the overflow popup for a hidden member that has no accessible name (an\n   * `Avatar` without `name`, `aria-label`, `aria-labelledby` or image `alt`, or blank text).\n   * Localise it here; better still, give every member a name (a development warning asks for it).\n   * @default 'Unnamed member'\n   */\n  unnamedMemberLabel?: string;\n  /** Ref to the root `<div>`. */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n/** Default text listed for a hidden member that would render with no accessible name. */\nconst DEFAULT_UNNAMED_MEMBER_LABEL = 'Unnamed member';\n\nconst nonBlank = (value: unknown): value is string =>\n  typeof value === 'string' && value.trim() !== '';\n\n/**\n * The text name of a member for the overflow list: the text of a text member, or the accessible\n * name of an `Avatar` given by its props (`aria-label` before `name`). An `Avatar` labelled by\n * `aria-labelledby` (unless `decorative`) and every other element have none: they are rendered as\n * they are, so a link keeps working and keeps its own label.\n */\nfunction getMemberName(member: React.ReactNode): string | undefined {\n  if (typeof member === 'string' || typeof member === 'number') {\n    return String(member).trim() || undefined;\n  }\n  if (!isElementOfType<AvatarProps>(member, Avatar)) return undefined;\n  const { decorative, name, 'aria-label': label, 'aria-labelledby': labelledBy } = member.props;\n  if (!decorative && nonBlank(labelledBy)) return undefined;\n  for (const value of [label, name]) {\n    if (nonBlank(value)) return value.trim();\n  }\n  return undefined;\n}\n\n/**\n * Whether a member without a {@link getMemberName} name would render with no accessible name,\n * so its list item would be empty for assistive technology: blank text, or an `Avatar` that is\n * neither labelled by `aria-labelledby` nor named by its image's `alt` (or is `decorative`).\n * Other elements are rendered as they are, since their content is unknown here.\n */\nfunction rendersUnnamed(member: React.ReactNode): boolean {\n  if (typeof member === 'string' || typeof member === 'number') return true;\n  if (!isElementOfType<AvatarProps>(member, Avatar)) return false;\n  const { decorative, image, 'aria-labelledby': labelledBy } = member.props;\n  if (decorative) return true;\n  if (nonBlank(labelledBy)) return false;\n  const imageProps: unknown = React.isValidElement(image) ? image.props : image;\n  const alt =\n    typeof imageProps === 'object' && imageProps !== null && 'alt' in imageProps\n      ? imageProps.alt\n      : undefined;\n  return !nonBlank(alt);\n}\n\n/**\n * A row of overlapping avatars (`role=\"group\"`; name it with `aria-label`).\n *\n * With `max`, the avatars beyond the limit are replaced by an overflow `<button>` (\"+3\", named\n * \"3 more\", see `overflowLabel`). It toggles a popup that lists the hidden members' names: an\n * `Avatar` by its `aria-label` or `name` prop, text as it is. Other members, such as an `Avatar`\n * inside a link or one labelled by `aria-labelledby`, are rendered as they are, and an `Avatar` or\n * text with no accessible name is listed as `unnamedMemberLabel` with a development warning.\n * Focus moves into the popup; Escape, a press outside or the button close it and focus returns to\n * the button. Tab and Shift+Tab move through the popup's own tab stops (links in rendered\n * members); Tab from the last one closes the popup and moves on to the element after the button,\n * Shift+Tab from the first one closes it and returns to the button. When the button is the last\n * tab stop (of the page, or of the Wave layer the group is in, such as a dialog), Tab is left to\n * the browser or the enclosing focus trap.\n *\n * @example\n * <AvatarGroup aria-label=\"Project team\" max={3}>\n *   <Avatar name=\"Ada Lovelace\" />\n *   <Avatar name=\"Alan Turing\" />\n * </AvatarGroup>\n */\nexport const AvatarGroup = ({\n  max,\n  size = 'medium',\n  overflowLabel,\n  unnamedMemberLabel = DEFAULT_UNNAMED_MEMBER_LABEL,\n  className,\n  children,\n  ref,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  ...props\n}: AvatarGroupProps) => {\n  // Fragments are flattened, so each member counts, overlaps and is listed on its own (C-COMPOUND).\n  const items = flattenChildren(children);\n  const limit = max === undefined || Number.isNaN(max) ? Infinity : Math.max(0, Math.floor(max));\n  const visible = items.slice(0, limit);\n  const hidden = items.slice(visible.length);\n  const overflow = hidden.length;\n\n  const unnamed = ariaLabel === undefined && ariaLabelledBy === undefined;\n  React.useEffect(() => {\n    if (unnamed) {\n      warnOnce(\n        'AvatarGroup:unnamed',\n        'AvatarGroup: the group has no accessible name. Pass `aria-label` (or `aria-labelledby`) describing the people it shows.',\n      );\n    }\n  }, [unnamed]);\n\n  const popupId = useId('avatar-group-overflow');\n  const [open, setOpen] = React.useState(false);\n  // Nothing is hidden any more: close, so the popup does not reappear when members overflow again.\n  if (open && overflow === 0) setOpen(false);\n  const isOpen = open && overflow > 0;\n  const label =\n    typeof overflowLabel === 'function'\n      ? overflowLabel(overflow)\n      : (overflowLabel ?? `${overflow} more`);\n\n  // The layer the group is rendered in (a dialog or popover), if any: the popup's parent layer.\n  const parentLayerId = React.useContext(DismissLayerContext);\n  const triggerRef = React.useRef<HTMLButtonElement | null>(null);\n  const surfaceRef = React.useRef<HTMLDivElement | null>(null);\n  const [surface, setSurface] = React.useState<HTMLDivElement | null>(null);\n\n  const { setReference, setFloating, floatingProps } = usePopupPosition({\n    open: isOpen,\n    side: 'bottom',\n    align: 'start',\n  });\n  const { layerId } = useDismiss({\n    open: isOpen,\n    onDismiss: () => setOpen(false),\n    refs: [triggerRef, surfaceRef],\n    anchorRef: triggerRef,\n    focusOutside: true,\n  });\n  useRestoreFocus({ enabled: isOpen, container: surface, triggerRef, onlyIfFocusInside: true });\n  const triggerRefs = useMergedRefs<HTMLButtonElement>(triggerRef, setReference);\n  const surfaceRefs = useMergedRefs<HTMLDivElement>(surfaceRef, setFloating, setSurface);\n\n  // Move focus into the popup once it is mounted, so its list is read next.\n  React.useEffect(() => {\n    if (isOpen && surface) surface.focus({ preventScroll: true });\n  }, [isOpen, surface]);\n\n  // The popup is portaled, so native tabbing would leave it for the end of the page. Tab moves\n  // through the popup's own tab stops (a rendered member can be a link); leaving the last one\n  // closes the popup and moves on from the button instead (Shift+Tab before the first one: back to\n  // the button), like a focus trap does for a popup anchored in a dialog. When nothing tabbable\n  // follows the button, Tab is not prevented: focus returns to the button as the popup closes and\n  // the browser (leaving the page) or an enclosing focus trap (wrapping) takes it from there.\n  // Inside a parent layer (a dialog, a popover), a tab stop after the button that lies outside that\n  // layer is treated the same way: a focus trap that leaves the page outside it interactive would\n  // pull focus back from there, while its descendant-layer rule (§2.4) wraps from the button.\n  // Tab stops are computed at keydown time, never cached (§2.2 focus utilities). A key that\n  // bubbles through React from a portal a member opened is not the popup's: it is ignored.\n  const handleSurfaceKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    const trigger = triggerRef.current;\n    if (event.key !== 'Tab' || event.defaultPrevented || !trigger) return;\n    const popup = event.currentTarget;\n    // Duck typed (`nodeType`), not `instanceof Node`: a popup portaled into another document (an\n    // iframe, a popout window) holds nodes of that realm.\n    const origin = event.target as Partial<Node> | null;\n    if (!origin || typeof origin.nodeType !== 'number' || !popup.contains(origin as Node)) return;\n    const inner = getTabbableElements(popup);\n    // -1 while focus is on the popup itself (or on something that is not a tab stop).\n    const current = inner.findIndex((el) => el.contains(origin as Node));\n    const next = current + (event.shiftKey ? -1 : 1);\n    if (next >= 0 && next < inner.length) {\n      event.preventDefault();\n      inner[next]!.focus();\n      return;\n    }\n    let target: HTMLElement | undefined = trigger;\n    if (!event.shiftKey) {\n      const order = getTabbableElements(trigger.ownerDocument.body).filter(\n        (el) => !popup.contains(el),\n      );\n      const index = order.indexOf(trigger);\n      target = index === -1 ? trigger : order[index + 1];\n      if (target && parentLayerId !== null && !isInsideLayerTree(parentLayerId, target)) {\n        target = undefined;\n      }\n    }\n    setOpen(false);\n    if (!target) return;\n    event.preventDefault();\n    target.focus();\n  };\n\n  const hasUnnamedMember =\n    isOpen && hidden.some(({ node }) => getMemberName(node) === undefined && rendersUnnamed(node));\n  React.useEffect(() => {\n    if (hasUnnamedMember) {\n      warnOnce(\n        'AvatarGroup:unnamed-member',\n        `AvatarGroup: a hidden member has no accessible name and is listed as \"${unnamedMemberLabel}\". Give each member a \\`name\\` or \\`aria-label\\`.`,\n      );\n    }\n  }, [hasUnnamedMember, unnamedMemberLabel]);\n\n  return (\n    <div\n      ref={ref}\n      role=\"group\"\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n      {...props}\n      className={cn('inline-flex items-center', className)}\n    >\n      {visible.map(({ key, node }, i) => (\n        <span\n          key={key}\n          className={cn('inline-flex rounded-full ring-2 ring-background', i > 0 && '-ms-2')}\n        >\n          {node}\n        </span>\n      ))}\n      {overflow > 0 && (\n        <button\n          ref={triggerRefs}\n          type=\"button\"\n          aria-label={label}\n          aria-haspopup=\"dialog\"\n          aria-expanded={isOpen}\n          aria-controls={isOpen ? popupId : undefined}\n          className={cn(\n            'inline-flex shrink-0 cursor-pointer items-center justify-center rounded-full border-0 p-0 font-semibold',\n            'bg-muted text-muted-foreground ring-2 ring-background',\n            'not-disabled:not-aria-disabled:hover:bg-subtle-pressed',\n            focusRing,\n            visible.length > 0 && '-ms-2',\n            avatarSizeClasses[size],\n          )}\n          onClick={() => setOpen((value) => !value)}\n        >\n          +{overflow}\n        </button>\n      )}\n      {isOpen && (\n        <Portal layerId={layerId}>\n          <div\n            ref={surfaceRefs}\n            id={popupId}\n            role=\"dialog\"\n            aria-label={label}\n            tabIndex={-1}\n            data-state=\"open\"\n            {...floatingProps}\n            className={cn(\n              'min-w-32 max-w-xs rounded-md border border-border bg-background p-2 text-body-1 text-foreground shadow-16',\n              focusRing,\n            )}\n            onKeyDown={handleSurfaceKeyDown}\n          >\n            <ul className=\"m-0 flex list-none flex-col gap-1 p-0\">\n              {hidden.map(({ key, node }) => (\n                <li key={key} className=\"px-1 py-0.5\">\n                  {getMemberName(node) ?? (rendersUnnamed(node) ? unnamedMemberLabel : node)}\n                </li>\n              ))}\n            </ul>\n          </div>\n        </Portal>\n      )}\n    </div>\n  );\n};\n\nAvatarGroup.displayName = 'AvatarGroup';\n"],"mappings":"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"}

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

@@ -0,0 +1,134 @@
+"use client";
+import { cn as e } from "../../lib/cn.mjs";
+import { flattenChildren as t, isElementOfType as n } from "../../lib/children.mjs";
+import { warnOnce as r } from "../../lib/dev.mjs";
+import { useId as i } from "../../hooks/useId.mjs";
+import { getTabbableElements as a } from "../../lib/focus.mjs";
+import { useMergedRefs as o } from "../../hooks/useMergedRefs.mjs";
+import { isInsideLayerTree as s } from "../../lib/layers.mjs";
+import { DismissLayerContext as c, useDismiss as l } from "../../hooks/useDismiss.mjs";
+import { Portal as u } from "../portal/Portal.mjs";
+import "../../lib/styles.mjs";
+import { usePopupPosition as d } from "../../hooks/usePopupPosition.mjs";
+import { useRestoreFocus as f } from "../../hooks/useRestoreFocus.mjs";
+import { Avatar as p, avatarSizeClasses as m } from "./Avatar.mjs";
+import * as h from "react";
+import { jsx as g, jsxs as _ } from "react/jsx-runtime";
+//#region src/components/data-display/AvatarGroup.tsx
+var v = "Unnamed member", y = (e) => typeof e == "string" && e.trim() !== "";
+function b(e) {
+	if (typeof e == "string" || typeof e == "number") return String(e).trim() || void 0;
+	if (!n(e, p)) return;
+	let { decorative: t, name: r, "aria-label": i, "aria-labelledby": a } = e.props;
+	if (t || !y(a)) {
+		for (let e of [i, r]) if (y(e)) return e.trim();
+	}
+}
+function x(e) {
+	if (typeof e == "string" || typeof e == "number") return !0;
+	if (!n(e, p)) return !1;
+	let { decorative: t, image: r, "aria-labelledby": i } = e.props;
+	if (t) return !0;
+	if (y(i)) return !1;
+	let a = h.isValidElement(r) ? r.props : r;
+	return !y(typeof a == "object" && a && "alt" in a ? a.alt : void 0);
+}
+var S = ({ max: n, size: p = "medium", overflowLabel: y, unnamedMemberLabel: S = v, className: C, children: w, ref: T, "aria-label": E, "aria-labelledby": D, ...O }) => {
+	let k = t(w), A = n === void 0 || Number.isNaN(n) ? Infinity : Math.max(0, Math.floor(n)), j = k.slice(0, A), M = k.slice(j.length), N = M.length, P = E === void 0 && D === void 0;
+	h.useEffect(() => {
+		P && r("AvatarGroup:unnamed", "AvatarGroup: the group has no accessible name. Pass `aria-label` (or `aria-labelledby`) describing the people it shows.");
+	}, [P]);
+	let F = i("avatar-group-overflow"), [I, L] = h.useState(!1);
+	I && N === 0 && L(!1);
+	let R = I && N > 0, z = typeof y == "function" ? y(N) : y ?? `${N} more`, B = h.useContext(c), V = h.useRef(null), H = h.useRef(null), [U, W] = h.useState(null), { setReference: G, setFloating: K, floatingProps: q } = d({
+		open: R,
+		side: "bottom",
+		align: "start"
+	}), { layerId: J } = l({
+		open: R,
+		onDismiss: () => L(!1),
+		refs: [V, H],
+		anchorRef: V,
+		focusOutside: !0
+	});
+	f({
+		enabled: R,
+		container: U,
+		triggerRef: V,
+		onlyIfFocusInside: !0
+	});
+	let Y = o(V, G), X = o(H, K, W);
+	h.useEffect(() => {
+		R && U && U.focus({ preventScroll: !0 });
+	}, [R, U]);
+	let Z = (e) => {
+		let t = V.current;
+		if (e.key !== "Tab" || e.defaultPrevented || !t) return;
+		let n = e.currentTarget, r = e.target;
+		if (!r || typeof r.nodeType != "number" || !n.contains(r)) return;
+		let i = a(n), o = i.findIndex((e) => e.contains(r)) + (e.shiftKey ? -1 : 1);
+		if (o >= 0 && o < i.length) {
+			e.preventDefault(), i[o].focus();
+			return;
+		}
+		let c = t;
+		if (!e.shiftKey) {
+			let e = a(t.ownerDocument.body).filter((e) => !n.contains(e)), r = e.indexOf(t);
+			c = r === -1 ? t : e[r + 1], c && B !== null && !s(B, c) && (c = void 0);
+		}
+		L(!1), c && (e.preventDefault(), c.focus());
+	}, Q = R && M.some(({ node: e }) => b(e) === void 0 && x(e));
+	return h.useEffect(() => {
+		Q && r("AvatarGroup:unnamed-member", `AvatarGroup: a hidden member has no accessible name and is listed as "${S}". Give each member a \`name\` or \`aria-label\`.`);
+	}, [Q, S]), /* @__PURE__ */ _("div", {
+		ref: T,
+		role: "group",
+		"aria-label": E,
+		"aria-labelledby": D,
+		...O,
+		className: e("inline-flex items-center", C),
+		children: [
+			j.map(({ key: t, node: n }, r) => /* @__PURE__ */ g("span", {
+				className: e("inline-flex rounded-full ring-2 ring-background", r > 0 && "-ms-2"),
+				children: n
+			}, t)),
+			N > 0 && /* @__PURE__ */ _("button", {
+				ref: Y,
+				type: "button",
+				"aria-label": z,
+				"aria-haspopup": "dialog",
+				"aria-expanded": R,
+				"aria-controls": R ? F : void 0,
+				className: e("inline-flex shrink-0 cursor-pointer items-center justify-center rounded-full border-0 p-0 font-semibold", "bg-muted text-muted-foreground ring-2 ring-background", "not-disabled:not-aria-disabled:hover:bg-subtle-pressed", "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring", j.length > 0 && "-ms-2", m[p]),
+				onClick: () => L((e) => !e),
+				children: ["+", N]
+			}),
+			R && /* @__PURE__ */ g(u, {
+				layerId: J,
+				children: /* @__PURE__ */ g("div", {
+					ref: X,
+					id: F,
+					role: "dialog",
+					"aria-label": z,
+					tabIndex: -1,
+					"data-state": "open",
+					...q,
+					className: e("min-w-32 max-w-xs rounded-md border border-border bg-background p-2 text-body-1 text-foreground shadow-16", "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"),
+					onKeyDown: Z,
+					children: /* @__PURE__ */ g("ul", {
+						className: "m-0 flex list-none flex-col gap-1 p-0",
+						children: M.map(({ key: e, node: t }) => /* @__PURE__ */ g("li", {
+							className: "px-1 py-0.5",
+							children: b(t) ?? (x(t) ? S : t)
+						}, e))
+					})
+				})
+			})
+		]
+	});
+};
+S.displayName = "AvatarGroup";
+//#endregion
+export { S as AvatarGroup };
+
+//# sourceMappingURL=AvatarGroup.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarGroup.mjs","names":["useId","useId$1","React","DEFAULT_UNNAMED_MEMBER_LABEL","nonBlank","value","getMemberName","member","isElementOfType","Avatar","label","labelledBy","decorative","name","rendersUnnamed","imageProps","image","AvatarGroup","ariaLabel","ariaLabelledBy","props","items","flattenChildren","children","limit","max","visible","hidden","overflow","unnamed","warnOnce","popupId","open","setOpen","isOpen","overflowLabel","parentLayerId","DismissLayerContext","triggerRef","surfaceRef","surface","setSurface","usePopupPosition","useDismiss","triggerRefs","useMergedRefs","setReference","surfaceRefs","setFloating","handleSurfaceKeyDown","trigger","event","popup","origin","inner","getTabbableElements","next","el","target","order","index","isInsideLayerTree","hasUnnamedMember","node","unnamedMemberLabel","cn","className","i","key","avatarSizeClasses","size","Portal","floatingProps"],"sources":["../../../src/components/data-display/AvatarGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { flattenChildren, isElementOfType } from '../../lib/children';\nimport { cn } from '../../lib/cn';\nimport { warnOnce } from '../../lib/dev';\nimport { getTabbableElements } from '../../lib/focus';\nimport { isInsideLayerTree } from '../../lib/layers';\nimport { focusRing } from '../../lib/styles';\nimport type { Size } from '../../lib/types';\nimport { useId } from '../../hooks/useId';\nimport { DismissLayerContext, useDismiss } from '../../hooks/useDismiss';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport { usePopupPosition } from '../../hooks/usePopupPosition';\nimport { useRestoreFocus } from '../../hooks/useRestoreFocus';\nimport { Portal } from '../portal/Portal';\nimport { Avatar, avatarSizeClasses } from './Avatar';\nimport type { AvatarProps } from './Avatar';\n\n/** Properties for the AvatarGroup component. */\nexport interface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Maximum number of avatars to display. The others are replaced by an overflow button that\n   * lists their names. `0` or a negative value shows only the overflow button, a fraction is\n   * rounded down, and `NaN` shows every member (as without `max`). The members of a Fragment\n   * count one by one.\n   */\n  max?: number;\n  /** Size of the overflow button (match it to the avatars).\n   * @default 'medium'\n   */\n  size?: Size;\n  /**\n   * Accessible name of the overflow button (and its popup). A function receives the number of\n   * hidden members. Localise it here.\n   * @default (count) => `${count} more`\n   */\n  overflowLabel?: string | ((count: number) => string);\n  /**\n   * Text listed in the overflow popup for a hidden member that has no accessible name (an\n   * `Avatar` without `name`, `aria-label`, `aria-labelledby` or image `alt`, or blank text).\n   * Localise it here; better still, give every member a name (a development warning asks for it).\n   * @default 'Unnamed member'\n   */\n  unnamedMemberLabel?: string;\n  /** Ref to the root `<div>`. */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n/** Default text listed for a hidden member that would render with no accessible name. */\nconst DEFAULT_UNNAMED_MEMBER_LABEL = 'Unnamed member';\n\nconst nonBlank = (value: unknown): value is string =>\n  typeof value === 'string' && value.trim() !== '';\n\n/**\n * The text name of a member for the overflow list: the text of a text member, or the accessible\n * name of an `Avatar` given by its props (`aria-label` before `name`). An `Avatar` labelled by\n * `aria-labelledby` (unless `decorative`) and every other element have none: they are rendered as\n * they are, so a link keeps working and keeps its own label.\n */\nfunction getMemberName(member: React.ReactNode): string | undefined {\n  if (typeof member === 'string' || typeof member === 'number') {\n    return String(member).trim() || undefined;\n  }\n  if (!isElementOfType<AvatarProps>(member, Avatar)) return undefined;\n  const { decorative, name, 'aria-label': label, 'aria-labelledby': labelledBy } = member.props;\n  if (!decorative && nonBlank(labelledBy)) return undefined;\n  for (const value of [label, name]) {\n    if (nonBlank(value)) return value.trim();\n  }\n  return undefined;\n}\n\n/**\n * Whether a member without a {@link getMemberName} name would render with no accessible name,\n * so its list item would be empty for assistive technology: blank text, or an `Avatar` that is\n * neither labelled by `aria-labelledby` nor named by its image's `alt` (or is `decorative`).\n * Other elements are rendered as they are, since their content is unknown here.\n */\nfunction rendersUnnamed(member: React.ReactNode): boolean {\n  if (typeof member === 'string' || typeof member === 'number') return true;\n  if (!isElementOfType<AvatarProps>(member, Avatar)) return false;\n  const { decorative, image, 'aria-labelledby': labelledBy } = member.props;\n  if (decorative) return true;\n  if (nonBlank(labelledBy)) return false;\n  const imageProps: unknown = React.isValidElement(image) ? image.props : image;\n  const alt =\n    typeof imageProps === 'object' && imageProps !== null && 'alt' in imageProps\n      ? imageProps.alt\n      : undefined;\n  return !nonBlank(alt);\n}\n\n/**\n * A row of overlapping avatars (`role=\"group\"`; name it with `aria-label`).\n *\n * With `max`, the avatars beyond the limit are replaced by an overflow `<button>` (\"+3\", named\n * \"3 more\", see `overflowLabel`). It toggles a popup that lists the hidden members' names: an\n * `Avatar` by its `aria-label` or `name` prop, text as it is. Other members, such as an `Avatar`\n * inside a link or one labelled by `aria-labelledby`, are rendered as they are, and an `Avatar` or\n * text with no accessible name is listed as `unnamedMemberLabel` with a development warning.\n * Focus moves into the popup; Escape, a press outside or the button close it and focus returns to\n * the button. Tab and Shift+Tab move through the popup's own tab stops (links in rendered\n * members); Tab from the last one closes the popup and moves on to the element after the button,\n * Shift+Tab from the first one closes it and returns to the button. When the button is the last\n * tab stop (of the page, or of the Wave layer the group is in, such as a dialog), Tab is left to\n * the browser or the enclosing focus trap.\n *\n * @example\n * <AvatarGroup aria-label=\"Project team\" max={3}>\n *   <Avatar name=\"Ada Lovelace\" />\n *   <Avatar name=\"Alan Turing\" />\n * </AvatarGroup>\n */\nexport const AvatarGroup = ({\n  max,\n  size = 'medium',\n  overflowLabel,\n  unnamedMemberLabel = DEFAULT_UNNAMED_MEMBER_LABEL,\n  className,\n  children,\n  ref,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  ...props\n}: AvatarGroupProps) => {\n  // Fragments are flattened, so each member counts, overlaps and is listed on its own (C-COMPOUND).\n  const items = flattenChildren(children);\n  const limit = max === undefined || Number.isNaN(max) ? Infinity : Math.max(0, Math.floor(max));\n  const visible = items.slice(0, limit);\n  const hidden = items.slice(visible.length);\n  const overflow = hidden.length;\n\n  const unnamed = ariaLabel === undefined && ariaLabelledBy === undefined;\n  React.useEffect(() => {\n    if (unnamed) {\n      warnOnce(\n        'AvatarGroup:unnamed',\n        'AvatarGroup: the group has no accessible name. Pass `aria-label` (or `aria-labelledby`) describing the people it shows.',\n      );\n    }\n  }, [unnamed]);\n\n  const popupId = useId('avatar-group-overflow');\n  const [open, setOpen] = React.useState(false);\n  // Nothing is hidden any more: close, so the popup does not reappear when members overflow again.\n  if (open && overflow === 0) setOpen(false);\n  const isOpen = open && overflow > 0;\n  const label =\n    typeof overflowLabel === 'function'\n      ? overflowLabel(overflow)\n      : (overflowLabel ?? `${overflow} more`);\n\n  // The layer the group is rendered in (a dialog or popover), if any: the popup's parent layer.\n  const parentLayerId = React.useContext(DismissLayerContext);\n  const triggerRef = React.useRef<HTMLButtonElement | null>(null);\n  const surfaceRef = React.useRef<HTMLDivElement | null>(null);\n  const [surface, setSurface] = React.useState<HTMLDivElement | null>(null);\n\n  const { setReference, setFloating, floatingProps } = usePopupPosition({\n    open: isOpen,\n    side: 'bottom',\n    align: 'start',\n  });\n  const { layerId } = useDismiss({\n    open: isOpen,\n    onDismiss: () => setOpen(false),\n    refs: [triggerRef, surfaceRef],\n    anchorRef: triggerRef,\n    focusOutside: true,\n  });\n  useRestoreFocus({ enabled: isOpen, container: surface, triggerRef, onlyIfFocusInside: true });\n  const triggerRefs = useMergedRefs<HTMLButtonElement>(triggerRef, setReference);\n  const surfaceRefs = useMergedRefs<HTMLDivElement>(surfaceRef, setFloating, setSurface);\n\n  // Move focus into the popup once it is mounted, so its list is read next.\n  React.useEffect(() => {\n    if (isOpen && surface) surface.focus({ preventScroll: true });\n  }, [isOpen, surface]);\n\n  // The popup is portaled, so native tabbing would leave it for the end of the page. Tab moves\n  // through the popup's own tab stops (a rendered member can be a link); leaving the last one\n  // closes the popup and moves on from the button instead (Shift+Tab before the first one: back to\n  // the button), like a focus trap does for a popup anchored in a dialog. When nothing tabbable\n  // follows the button, Tab is not prevented: focus returns to the button as the popup closes and\n  // the browser (leaving the page) or an enclosing focus trap (wrapping) takes it from there.\n  // Inside a parent layer (a dialog, a popover), a tab stop after the button that lies outside that\n  // layer is treated the same way: a focus trap that leaves the page outside it interactive would\n  // pull focus back from there, while its descendant-layer rule (§2.4) wraps from the button.\n  // Tab stops are computed at keydown time, never cached (§2.2 focus utilities). A key that\n  // bubbles through React from a portal a member opened is not the popup's: it is ignored.\n  const handleSurfaceKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    const trigger = triggerRef.current;\n    if (event.key !== 'Tab' || event.defaultPrevented || !trigger) return;\n    const popup = event.currentTarget;\n    // Duck typed (`nodeType`), not `instanceof Node`: a popup portaled into another document (an\n    // iframe, a popout window) holds nodes of that realm.\n    const origin = event.target as Partial<Node> | null;\n    if (!origin || typeof origin.nodeType !== 'number' || !popup.contains(origin as Node)) return;\n    const inner = getTabbableElements(popup);\n    // -1 while focus is on the popup itself (or on something that is not a tab stop).\n    const current = inner.findIndex((el) => el.contains(origin as Node));\n    const next = current + (event.shiftKey ? -1 : 1);\n    if (next >= 0 && next < inner.length) {\n      event.preventDefault();\n      inner[next]!.focus();\n      return;\n    }\n    let target: HTMLElement | undefined = trigger;\n    if (!event.shiftKey) {\n      const order = getTabbableElements(trigger.ownerDocument.body).filter(\n        (el) => !popup.contains(el),\n      );\n      const index = order.indexOf(trigger);\n      target = index === -1 ? trigger : order[index + 1];\n      if (target && parentLayerId !== null && !isInsideLayerTree(parentLayerId, target)) {\n        target = undefined;\n      }\n    }\n    setOpen(false);\n    if (!target) return;\n    event.preventDefault();\n    target.focus();\n  };\n\n  const hasUnnamedMember =\n    isOpen && hidden.some(({ node }) => getMemberName(node) === undefined && rendersUnnamed(node));\n  React.useEffect(() => {\n    if (hasUnnamedMember) {\n      warnOnce(\n        'AvatarGroup:unnamed-member',\n        `AvatarGroup: a hidden member has no accessible name and is listed as \"${unnamedMemberLabel}\". Give each member a \\`name\\` or \\`aria-label\\`.`,\n      );\n    }\n  }, [hasUnnamedMember, unnamedMemberLabel]);\n\n  return (\n    <div\n      ref={ref}\n      role=\"group\"\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n      {...props}\n      className={cn('inline-flex items-center', className)}\n    >\n      {visible.map(({ key, node }, i) => (\n        <span\n          key={key}\n          className={cn('inline-flex rounded-full ring-2 ring-background', i > 0 && '-ms-2')}\n        >\n          {node}\n        </span>\n      ))}\n      {overflow > 0 && (\n        <button\n          ref={triggerRefs}\n          type=\"button\"\n          aria-label={label}\n          aria-haspopup=\"dialog\"\n          aria-expanded={isOpen}\n          aria-controls={isOpen ? popupId : undefined}\n          className={cn(\n            'inline-flex shrink-0 cursor-pointer items-center justify-center rounded-full border-0 p-0 font-semibold',\n            'bg-muted text-muted-foreground ring-2 ring-background',\n            'not-disabled:not-aria-disabled:hover:bg-subtle-pressed',\n            focusRing,\n            visible.length > 0 && '-ms-2',\n            avatarSizeClasses[size],\n          )}\n          onClick={() => setOpen((value) => !value)}\n        >\n          +{overflow}\n        </button>\n      )}\n      {isOpen && (\n        <Portal layerId={layerId}>\n          <div\n            ref={surfaceRefs}\n            id={popupId}\n            role=\"dialog\"\n            aria-label={label}\n            tabIndex={-1}\n            data-state=\"open\"\n            {...floatingProps}\n            className={cn(\n              'min-w-32 max-w-xs rounded-md border border-border bg-background p-2 text-body-1 text-foreground shadow-16',\n              focusRing,\n            )}\n            onKeyDown={handleSurfaceKeyDown}\n          >\n            <ul className=\"m-0 flex list-none flex-col gap-1 p-0\">\n              {hidden.map(({ key, node }) => (\n                <li key={key} className=\"px-1 py-0.5\">\n                  {getMemberName(node) ?? (rendersUnnamed(node) ? unnamedMemberLabel : node)}\n                </li>\n              ))}\n            </ul>\n          </div>\n        </Portal>\n      )}\n    </div>\n  );\n};\n\nAvatarGroup.displayName = 'AvatarGroup';\n"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("./Badge.colors.cjs");let r=require("react");r=e.__toESM(r,1);let i=require("react/jsx-runtime");function a(e){return typeof e==`string`&&e.trim()!==``}var o={"extra-small":`text-[10px] leading-[14px] px-1`,small:`text-[10px] leading-[14px] px-1`,medium:`text-caption-1 px-2 py-0.5`,large:`text-body-2 px-2.5 py-0.5`,"extra-large":`text-body-2 px-2.5 py-0.5`},s=({appearance:e=`filled`,color:r=`brand`,size:s=`medium`,className:c,children:l,ref:u,...d})=>{let f=n.badgeColorClasses[r],p=e===`filled`?f.filled:e===`tint`?f.tint:t.cn(`bg-transparent border text-foreground`,f.border),m=a(d[`aria-label`])||a(d[`aria-labelledby`]);return(0,i.jsx)(`span`,{ref:u,role:m?`img`:void 0,"data-color":r,"data-appearance":e,className:t.cn(`rounded-full inline-flex items-center font-semibold`,o[s],p,c),...d,children:l})};s.displayName=`Badge`,exports.Badge=s;
+//# sourceMappingURL=Badge.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.cjs","names":["badgeColorClasses","cn","require_runtime","require_cn","require_Badge_colors","react","react_jsx_runtime","isName","value","sizeClasses","Badge","props","c","color","appearanceClasses","appearance","named","size","className"],"sources":["../../../src/components/data-display/Badge.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport type { BadgeAppearance, BadgeColor, Size } from '../../lib/types';\nimport { badgeColorClasses } from './Badge.colors';\n\n/** Properties for the Badge component. */\nexport interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /** Visual style of the badge.\n   * @default 'filled'\n   */\n  appearance?: BadgeAppearance;\n  /**\n   * Semantic color: `brand`, `danger`, `important`, `informative`, `severe`, `subtle`, `success`,\n   * `warning`. `severe` is dark orange. `subtle` is the page background with foreground text, for\n   * colored surfaces. `important` renders the severe (orange) colors in 0.x, as in 0.5; in 1.0 it\n   * becomes Fluent's neutral high-emphasis color (near black in the light theme) — use `severe` to\n   * keep the orange look.\n   * @default 'brand'\n   */\n  color?: BadgeColor;\n  /** Size of the badge.\n   * @default 'medium'\n   */\n  size?: Size;\n  /** Ref to the root `<span>`. */\n  ref?: React.Ref<HTMLSpanElement>;\n}\n\n/** Whether a naming attribute holds more than whitespace (an empty one names nothing). */\nfunction isName(value: unknown): value is string {\n  return typeof value === 'string' && value.trim() !== '';\n}\n\nconst sizeClasses: Record<Size, string> = {\n  'extra-small': 'text-[10px] leading-[14px] px-1',\n  small: 'text-[10px] leading-[14px] px-1',\n  medium: 'text-caption-1 px-2 py-0.5',\n  large: 'text-body-2 px-2.5 py-0.5',\n  'extra-large': 'text-body-2 px-2.5 py-0.5',\n};\n\n/**\n * A short, non-interactive label that highlights a status or category (\"New\", \"Beta\", \"3\").\n * `appearance` picks a solid fill, a light tint or an outline; `color` the semantic color. Colors\n * come from the theme tokens, so the text keeps its contrast in the light, dark and high-contrast\n * themes. The root carries `data-color` and `data-appearance` with the resolved values.\n *\n * A badge whose text alone does not say what it means (\"3\") can be named with `aria-label` or\n * `aria-labelledby`: it then gets `role=\"img\"` (unless you pass a `role`), so the name is\n * announced. An empty or whitespace-only name counts as absent and adds no role.\n *\n * @example\n * <Badge appearance=\"tint\" color=\"success\">Passed</Badge>\n * <Badge aria-label=\"3 unread messages\">3</Badge>\n */\nexport const Badge = ({\n  appearance = 'filled',\n  color = 'brand',\n  size = 'medium',\n  className,\n  children,\n  ref,\n  ...props\n}: BadgeProps) => {\n  const c = badgeColorClasses[color];\n\n  const appearanceClasses =\n    appearance === 'filled'\n      ? c.filled\n      : appearance === 'tint'\n        ? c.tint\n        : cn('bg-transparent border text-foreground', c.border);\n\n  // A name on a role-less <span> is not announced by screen readers: name it as an image. An empty\n  // or whitespace-only name adds no role (an unnamed role=\"img\" fails axe).\n  const named = isName(props['aria-label']) || isName(props['aria-labelledby']);\n\n  return (\n    <span\n      ref={ref}\n      role={named ? 'img' : undefined}\n      data-color={color}\n      data-appearance={appearance}\n      className={cn(\n        'rounded-full inline-flex items-center font-semibold',\n        sizeClasses[size],\n        appearanceClasses,\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </span>\n  );\n};\n\nBadge.displayName = 'Badge';\n"],"mappings":"8MA6BA,SAASO,EAAO,EAAiC,CAC/C,OAAO,OAAOC,GAAU,UAAYA,EAAM,KAAK,IAAM,EACvD,CAEA,IAAMC,EAAoC,CACxC,cAAe,kCACf,MAAO,kCACP,OAAQ,6BACR,MAAO,4BACP,cAAe,2BACjB,EAgBaC,GAAS,CACpB,aAAa,SACb,QAAQ,QACR,OAAO,SACP,YACA,WACA,MACA,GAAGC,KACa,CAChB,IAAMC,EAAIZ,EAAAA,kBAAkBa,GAEtBC,EACJC,IAAe,SACXH,EAAE,OACFG,IAAe,OACbH,EAAE,KACFX,EAAAA,GAAG,wCAAyCW,EAAE,MAAM,EAItDI,EAAQT,EAAOI,EAAM,aAAa,GAAKJ,EAAOI,EAAM,kBAAkB,EAE5E,OACE,EAAAL,EAAA,IAAA,CAAC,OAAD,CACO,MACL,KAAMU,EAAQ,MAAQ,IAAA,GACtB,aAAYH,EACZ,kBAAiBE,EACjB,UAAWd,EAAAA,GACT,sDACAQ,EAAYQ,GACZH,EACAI,CACF,EACA,GAAIP,EAEH,UACG,CAAA,CAEV,EAEA,EAAM,YAAc"}

package/dist/components/data-display/Badge.colors.cjs

@@ -0,0 +1,2 @@
+"use client";var e={filled:`bg-severe text-severe-foreground`,tint:`bg-severe-tint text-severe-tint-foreground`,border:`border-severe`,dot:`bg-severe`,dotBorder:`border-severe`},t={brand:{filled:`bg-primary text-primary-foreground`,tint:`bg-info-tint text-info-tint-foreground`,border:`border-primary`,dot:`bg-primary`,dotBorder:`border-primary`},success:{filled:`bg-success text-success-foreground`,tint:`bg-success-tint text-success-tint-foreground`,border:`border-success`,dot:`bg-success`,dotBorder:`border-success`},warning:{filled:`bg-warning text-warning-foreground`,tint:`bg-warning-tint text-warning-tint-foreground`,border:`border-warning`,dot:`bg-warning-tint-foreground`,dotBorder:`border-warning-tint-foreground`},danger:{filled:`bg-destructive text-destructive-foreground`,tint:`bg-error-tint text-error-tint-foreground`,border:`border-destructive`,dot:`bg-destructive`,dotBorder:`border-destructive`},important:e,informative:{filled:`bg-muted text-foreground`,tint:`bg-muted text-foreground`,border:`border-border`,dot:`bg-muted-foreground`,dotBorder:`border-muted-foreground`},severe:e,subtle:{filled:`bg-background text-foreground`,tint:`bg-background text-muted-foreground border border-border`,border:`border-border`,dot:`bg-background`,dotBorder:`border-border`}};exports.badgeColorClasses=t;
+//# sourceMappingURL=Badge.colors.cjs.map

package/dist/components/data-display/Badge.colors.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.colors.cjs","names":["severeClasses","badgeColorClasses"],"sources":["../../../src/components/data-display/Badge.colors.ts"],"sourcesContent":["import type { BadgeColor } from '../../lib/types';\n\n/** Theme-token classes of one Badge color. */\nexport interface BadgeColorClasses {\n  /** `appearance=\"filled\"`: background and text. */\n  filled: string;\n  /** `appearance=\"tint\"`: background and text (plus a border for `subtle`). */\n  tint: string;\n  /** `appearance=\"outline\"`: the border color (the outline's background and text are the component's). */\n  border: string;\n  /**\n   * CounterBadge `dot` with `appearance=\"filled\"`: the fill. A dot has no text, so its own color\n   * must stand out from the page (3:1): `informative` and `warning` use darker tokens than their\n   * filled badges, whose text carries the contrast.\n   */\n  dot: string;\n  /** CounterBadge `dot` with `appearance=\"outline\"`: the ring color, chosen like `dot`. */\n  dotBorder: string;\n}\n\n/** The dark orange `severe` colors, which `important` also renders through 0.x. */\nconst severeClasses: BadgeColorClasses = {\n  filled: 'bg-severe text-severe-foreground',\n  tint: 'bg-severe-tint text-severe-tint-foreground',\n  border: 'border-severe',\n  dot: 'bg-severe',\n  dotBorder: 'border-severe',\n};\n\n/**\n * Theme-token classes per color, shared by Badge and CounterBadge so a color means the same in\n * both. The foreground tokens keep text readable in every theme, and every dot color keeps 3:1\n * against the page background except `subtle` (the page color, for colored surfaces); each pair is\n * asserted in `src/styles/__tests__/tokens.test.ts`. `important` renders the severe colors\n * through 0.x.\n */\nexport const badgeColorClasses: Record<BadgeColor, BadgeColorClasses> = {\n  brand: {\n    filled: 'bg-primary text-primary-foreground',\n    tint: 'bg-info-tint text-info-tint-foreground',\n    border: 'border-primary',\n    dot: 'bg-primary',\n    dotBorder: 'border-primary',\n  },\n  success: {\n    filled: 'bg-success text-success-foreground',\n    tint: 'bg-success-tint text-success-tint-foreground',\n    border: 'border-success',\n    dot: 'bg-success',\n    dotBorder: 'border-success',\n  },\n  warning: {\n    filled: 'bg-warning text-warning-foreground',\n    tint: 'bg-warning-tint text-warning-tint-foreground',\n    border: 'border-warning',\n    // The warning fill is 1.30:1 on the light page; warning's text token keeps 4.5:1 everywhere.\n    dot: 'bg-warning-tint-foreground',\n    dotBorder: 'border-warning-tint-foreground',\n  },\n  danger: {\n    filled: 'bg-destructive text-destructive-foreground',\n    tint: 'bg-error-tint text-error-tint-foreground',\n    border: 'border-destructive',\n    dot: 'bg-destructive',\n    dotBorder: 'border-destructive',\n  },\n  // `important` gets its own (neutral) entry in 1.0; until then it is the severe look.\n  important: severeClasses,\n  informative: {\n    filled: 'bg-muted text-foreground',\n    tint: 'bg-muted text-foreground',\n    border: 'border-border',\n    // The muted fill and the border are about 1.2:1 on the page in every theme.\n    dot: 'bg-muted-foreground',\n    dotBorder: 'border-muted-foreground',\n  },\n  severe: severeClasses,\n  subtle: {\n    filled: 'bg-background text-foreground',\n    tint: 'bg-background text-muted-foreground border border-border',\n    border: 'border-border',\n    dot: 'bg-background',\n    dotBorder: 'border-border',\n  },\n};\n"],"mappings":"aAqBA,IAAMA,EAAmC,CACvC,OAAQ,mCACR,KAAM,6CACN,OAAQ,gBACR,IAAK,YACL,UAAW,eACb,EASaC,EAA2D,CACtE,MAAO,CACL,OAAQ,qCACR,KAAM,yCACN,OAAQ,iBACR,IAAK,aACL,UAAW,gBACb,EACA,QAAS,CACP,OAAQ,qCACR,KAAM,+CACN,OAAQ,iBACR,IAAK,aACL,UAAW,gBACb,EACA,QAAS,CACP,OAAQ,qCACR,KAAM,+CACN,OAAQ,iBAER,IAAK,6BACL,UAAW,gCACb,EACA,OAAQ,CACN,OAAQ,6CACR,KAAM,2CACN,OAAQ,qBACR,IAAK,iBACL,UAAW,oBACb,EAEA,UAAWD,EACX,YAAa,CACX,OAAQ,2BACR,KAAM,2BACN,OAAQ,gBAER,IAAK,sBACL,UAAW,yBACb,EACA,OAAQA,EACR,OAAQ,CACN,OAAQ,gCACR,KAAM,2DACN,OAAQ,gBACR,IAAK,gBACL,UAAW,eACb,CACF"}

package/dist/components/data-display/Badge.colors.mjs

@@ -0,0 +1,58 @@
+"use client";
+//#region src/components/data-display/Badge.colors.ts
+var e = {
+	filled: "bg-severe text-severe-foreground",
+	tint: "bg-severe-tint text-severe-tint-foreground",
+	border: "border-severe",
+	dot: "bg-severe",
+	dotBorder: "border-severe"
+}, t = {
+	brand: {
+		filled: "bg-primary text-primary-foreground",
+		tint: "bg-info-tint text-info-tint-foreground",
+		border: "border-primary",
+		dot: "bg-primary",
+		dotBorder: "border-primary"
+	},
+	success: {
+		filled: "bg-success text-success-foreground",
+		tint: "bg-success-tint text-success-tint-foreground",
+		border: "border-success",
+		dot: "bg-success",
+		dotBorder: "border-success"
+	},
+	warning: {
+		filled: "bg-warning text-warning-foreground",
+		tint: "bg-warning-tint text-warning-tint-foreground",
+		border: "border-warning",
+		dot: "bg-warning-tint-foreground",
+		dotBorder: "border-warning-tint-foreground"
+	},
+	danger: {
+		filled: "bg-destructive text-destructive-foreground",
+		tint: "bg-error-tint text-error-tint-foreground",
+		border: "border-destructive",
+		dot: "bg-destructive",
+		dotBorder: "border-destructive"
+	},
+	important: e,
+	informative: {
+		filled: "bg-muted text-foreground",
+		tint: "bg-muted text-foreground",
+		border: "border-border",
+		dot: "bg-muted-foreground",
+		dotBorder: "border-muted-foreground"
+	},
+	severe: e,
+	subtle: {
+		filled: "bg-background text-foreground",
+		tint: "bg-background text-muted-foreground border border-border",
+		border: "border-border",
+		dot: "bg-background",
+		dotBorder: "border-border"
+	}
+};
+//#endregion
+export { t as badgeColorClasses };
+
+//# sourceMappingURL=Badge.colors.mjs.map

package/dist/components/data-display/Badge.colors.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.colors.mjs","names":["severeClasses","badgeColorClasses"],"sources":["../../../src/components/data-display/Badge.colors.ts"],"sourcesContent":["import type { BadgeColor } from '../../lib/types';\n\n/** Theme-token classes of one Badge color. */\nexport interface BadgeColorClasses {\n  /** `appearance=\"filled\"`: background and text. */\n  filled: string;\n  /** `appearance=\"tint\"`: background and text (plus a border for `subtle`). */\n  tint: string;\n  /** `appearance=\"outline\"`: the border color (the outline's background and text are the component's). */\n  border: string;\n  /**\n   * CounterBadge `dot` with `appearance=\"filled\"`: the fill. A dot has no text, so its own color\n   * must stand out from the page (3:1): `informative` and `warning` use darker tokens than their\n   * filled badges, whose text carries the contrast.\n   */\n  dot: string;\n  /** CounterBadge `dot` with `appearance=\"outline\"`: the ring color, chosen like `dot`. */\n  dotBorder: string;\n}\n\n/** The dark orange `severe` colors, which `important` also renders through 0.x. */\nconst severeClasses: BadgeColorClasses = {\n  filled: 'bg-severe text-severe-foreground',\n  tint: 'bg-severe-tint text-severe-tint-foreground',\n  border: 'border-severe',\n  dot: 'bg-severe',\n  dotBorder: 'border-severe',\n};\n\n/**\n * Theme-token classes per color, shared by Badge and CounterBadge so a color means the same in\n * both. The foreground tokens keep text readable in every theme, and every dot color keeps 3:1\n * against the page background except `subtle` (the page color, for colored surfaces); each pair is\n * asserted in `src/styles/__tests__/tokens.test.ts`. `important` renders the severe colors\n * through 0.x.\n */\nexport const badgeColorClasses: Record<BadgeColor, BadgeColorClasses> = {\n  brand: {\n    filled: 'bg-primary text-primary-foreground',\n    tint: 'bg-info-tint text-info-tint-foreground',\n    border: 'border-primary',\n    dot: 'bg-primary',\n    dotBorder: 'border-primary',\n  },\n  success: {\n    filled: 'bg-success text-success-foreground',\n    tint: 'bg-success-tint text-success-tint-foreground',\n    border: 'border-success',\n    dot: 'bg-success',\n    dotBorder: 'border-success',\n  },\n  warning: {\n    filled: 'bg-warning text-warning-foreground',\n    tint: 'bg-warning-tint text-warning-tint-foreground',\n    border: 'border-warning',\n    // The warning fill is 1.30:1 on the light page; warning's text token keeps 4.5:1 everywhere.\n    dot: 'bg-warning-tint-foreground',\n    dotBorder: 'border-warning-tint-foreground',\n  },\n  danger: {\n    filled: 'bg-destructive text-destructive-foreground',\n    tint: 'bg-error-tint text-error-tint-foreground',\n    border: 'border-destructive',\n    dot: 'bg-destructive',\n    dotBorder: 'border-destructive',\n  },\n  // `important` gets its own (neutral) entry in 1.0; until then it is the severe look.\n  important: severeClasses,\n  informative: {\n    filled: 'bg-muted text-foreground',\n    tint: 'bg-muted text-foreground',\n    border: 'border-border',\n    // The muted fill and the border are about 1.2:1 on the page in every theme.\n    dot: 'bg-muted-foreground',\n    dotBorder: 'border-muted-foreground',\n  },\n  severe: severeClasses,\n  subtle: {\n    filled: 'bg-background text-foreground',\n    tint: 'bg-background text-muted-foreground border border-border',\n    border: 'border-border',\n    dot: 'bg-background',\n    dotBorder: 'border-border',\n  },\n};\n"],"mappings":";;AAqBA,IAAMA,IAAmC;CACvC,QAAQ;CACR,MAAM;CACN,QAAQ;CACR,KAAK;CACL,WAAW;AACb,GASaC,IAA2D;CACtE,OAAO;EACL,QAAQ;EACR,MAAM;EACN,QAAQ;EACR,KAAK;EACL,WAAW;CACb;CACA,SAAS;EACP,QAAQ;EACR,MAAM;EACN,QAAQ;EACR,KAAK;EACL,WAAW;CACb;CACA,SAAS;EACP,QAAQ;EACR,MAAM;EACN,QAAQ;EAER,KAAK;EACL,WAAW;CACb;CACA,QAAQ;EACN,QAAQ;EACR,MAAM;EACN,QAAQ;EACR,KAAK;EACL,WAAW;CACb;CAEA,WAAWD;CACX,aAAa;EACX,QAAQ;EACR,MAAM;EACN,QAAQ;EAER,KAAK;EACL,WAAW;CACb;CACA,QAAQA;CACR,QAAQ;EACN,QAAQ;EACR,MAAM;EACN,QAAQ;EACR,KAAK;EACL,WAAW;CACb;AACF"}

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

@@ -0,0 +1,32 @@
+"use client";
+import { cn as e } from "../../lib/cn.mjs";
+import { badgeColorClasses as t } from "./Badge.colors.mjs";
+import "react";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/data-display/Badge.tsx
+function r(e) {
+	return typeof e == "string" && e.trim() !== "";
+}
+var i = {
+	"extra-small": "text-[10px] leading-[14px] px-1",
+	small: "text-[10px] leading-[14px] px-1",
+	medium: "text-caption-1 px-2 py-0.5",
+	large: "text-body-2 px-2.5 py-0.5",
+	"extra-large": "text-body-2 px-2.5 py-0.5"
+}, a = ({ appearance: a = "filled", color: o = "brand", size: s = "medium", className: c, children: l, ref: u, ...d }) => {
+	let f = t[o], p = a === "filled" ? f.filled : a === "tint" ? f.tint : e("bg-transparent border text-foreground", f.border), m = r(d["aria-label"]) || r(d["aria-labelledby"]);
+	return /* @__PURE__ */ n("span", {
+		ref: u,
+		role: m ? "img" : void 0,
+		"data-color": o,
+		"data-appearance": a,
+		className: e("rounded-full inline-flex items-center font-semibold", i[s], p, c),
+		...d,
+		children: l
+	});
+};
+a.displayName = "Badge";
+//#endregion
+export { a as Badge };
+
+//# sourceMappingURL=Badge.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.mjs","names":["isName","value","sizeClasses","Badge","props","c","badgeColorClasses","color","appearanceClasses","appearance","cn","named","size","className"],"sources":["../../../src/components/data-display/Badge.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport type { BadgeAppearance, BadgeColor, Size } from '../../lib/types';\nimport { badgeColorClasses } from './Badge.colors';\n\n/** Properties for the Badge component. */\nexport interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /** Visual style of the badge.\n   * @default 'filled'\n   */\n  appearance?: BadgeAppearance;\n  /**\n   * Semantic color: `brand`, `danger`, `important`, `informative`, `severe`, `subtle`, `success`,\n   * `warning`. `severe` is dark orange. `subtle` is the page background with foreground text, for\n   * colored surfaces. `important` renders the severe (orange) colors in 0.x, as in 0.5; in 1.0 it\n   * becomes Fluent's neutral high-emphasis color (near black in the light theme) — use `severe` to\n   * keep the orange look.\n   * @default 'brand'\n   */\n  color?: BadgeColor;\n  /** Size of the badge.\n   * @default 'medium'\n   */\n  size?: Size;\n  /** Ref to the root `<span>`. */\n  ref?: React.Ref<HTMLSpanElement>;\n}\n\n/** Whether a naming attribute holds more than whitespace (an empty one names nothing). */\nfunction isName(value: unknown): value is string {\n  return typeof value === 'string' && value.trim() !== '';\n}\n\nconst sizeClasses: Record<Size, string> = {\n  'extra-small': 'text-[10px] leading-[14px] px-1',\n  small: 'text-[10px] leading-[14px] px-1',\n  medium: 'text-caption-1 px-2 py-0.5',\n  large: 'text-body-2 px-2.5 py-0.5',\n  'extra-large': 'text-body-2 px-2.5 py-0.5',\n};\n\n/**\n * A short, non-interactive label that highlights a status or category (\"New\", \"Beta\", \"3\").\n * `appearance` picks a solid fill, a light tint or an outline; `color` the semantic color. Colors\n * come from the theme tokens, so the text keeps its contrast in the light, dark and high-contrast\n * themes. The root carries `data-color` and `data-appearance` with the resolved values.\n *\n * A badge whose text alone does not say what it means (\"3\") can be named with `aria-label` or\n * `aria-labelledby`: it then gets `role=\"img\"` (unless you pass a `role`), so the name is\n * announced. An empty or whitespace-only name counts as absent and adds no role.\n *\n * @example\n * <Badge appearance=\"tint\" color=\"success\">Passed</Badge>\n * <Badge aria-label=\"3 unread messages\">3</Badge>\n */\nexport const Badge = ({\n  appearance = 'filled',\n  color = 'brand',\n  size = 'medium',\n  className,\n  children,\n  ref,\n  ...props\n}: BadgeProps) => {\n  const c = badgeColorClasses[color];\n\n  const appearanceClasses =\n    appearance === 'filled'\n      ? c.filled\n      : appearance === 'tint'\n        ? c.tint\n        : cn('bg-transparent border text-foreground', c.border);\n\n  // A name on a role-less <span> is not announced by screen readers: name it as an image. An empty\n  // or whitespace-only name adds no role (an unnamed role=\"img\" fails axe).\n  const named = isName(props['aria-label']) || isName(props['aria-labelledby']);\n\n  return (\n    <span\n      ref={ref}\n      role={named ? 'img' : undefined}\n      data-color={color}\n      data-appearance={appearance}\n      className={cn(\n        'rounded-full inline-flex items-center font-semibold',\n        sizeClasses[size],\n        appearanceClasses,\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </span>\n  );\n};\n\nBadge.displayName = 'Badge';\n"],"mappings":";;;;;;AA6BA,SAASA,EAAO,GAAiC;CAC/C,OAAO,OAAOC,KAAU,YAAYA,EAAM,KAAK,MAAM;AACvD;AAEA,IAAMC,IAAoC;CACxC,eAAe;CACf,OAAO;CACP,QAAQ;CACR,OAAO;CACP,eAAe;AACjB,GAgBaC,KAAS,EACpB,gBAAa,UACb,WAAQ,SACR,UAAO,UACP,cACA,aACA,QACA,GAAGC,QACa;CAChB,IAAMC,IAAIC,EAAkBC,IAEtBC,IACJC,MAAe,WACXJ,EAAE,SACFI,MAAe,SACbJ,EAAE,OACFK,EAAG,yCAAyCL,EAAE,MAAM,GAItDM,IAAQX,EAAOI,EAAM,aAAa,KAAKJ,EAAOI,EAAM,kBAAkB;CAE5E,OACE,kBAAC,QAAD;EACO;EACL,MAAMO,IAAQ,QAAQ,KAAA;EACtB,cAAYJ;EACZ,mBAAiBE;EACjB,WAAWC,EACT,uDACAR,EAAYU,IACZJ,GACAK,CACF;EACA,GAAIT;EAEH;CACG,CAAA;AAEV;AAEA,EAAM,cAAc"}

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

@@ -0,0 +1,2 @@
+"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("./Badge.colors.cjs");let r=require("react");r=e.__toESM(r,1);let i=require("react/jsx-runtime");function a(e){return typeof e==`string`&&e.trim()!==``}var o=({count:e=0,overflowCount:r=99,appearance:o=`filled`,color:s=`brand`,dot:c=!1,showZero:l=!1,className:u,ref:d,...f})=>{if(!c&&(e<0||e===0&&!l))return null;let p=Object.hasOwn(n.badgeColorClasses,s??``)?s:`brand`,m=n.badgeColorClasses[p],h=c?o===`filled`?m.dot:t.cn(`bg-transparent border`,m.dotBorder):o===`filled`?m.filled:t.cn(`bg-transparent border`,m.border,p===`brand`?`text-primary`:`text-foreground`),g=a(f[`aria-label`])||a(f[`aria-labelledby`]);return(0,i.jsx)(`span`,{ref:d,role:g?`img`:void 0,"data-color":p,"data-appearance":o,"data-dot":c?``:void 0,className:t.cn(`inline-flex items-center justify-center rounded-full`,c?`h-1.5 w-1.5 min-w-0 p-0 forced-colors:forced-color-adjust-none forced-colors:bg-[CanvasText]`:`h-5 min-w-5 px-1.5 text-caption-1 font-semibold`,h,u),...f,children:c?null:e>r?`${r}+`:String(e)})};o.displayName=`CounterBadge`,exports.CounterBadge=o;
+//# sourceMappingURL=CounterBadge.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CounterBadge.cjs","names":["badgeColorClasses","cn","require_runtime","require_cn","require_Badge_colors","react","react_jsx_runtime","isName","value","CounterBadge","props","dot","count","showZero","resolvedColor","color","c","appearanceClasses","appearance","named","className","overflowCount"],"sources":["../../../src/components/data-display/CounterBadge.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport type { BadgeColor } from '../../lib/types';\nimport { badgeColorClasses } from './Badge.colors';\n\n/** Properties for the CounterBadge component. */\nexport interface CounterBadgeProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /**\n   * Number to show. Nothing renders for 0 (unless `showZero`) or less; above `overflowCount` the\n   * badge shows `overflowCount+`.\n   * @default 0\n   */\n  count?: number;\n  /** Maximum count before displaying overflow indicator (e.g. \"99+\").\n   * @default 99\n   */\n  overflowCount?: number;\n  /** Visual style of the counter badge.\n   * @default 'filled'\n   */\n  appearance?: 'filled' | 'outline';\n  /**\n   * Semantic color, from Badge's palette: `brand`, `danger`, `important`, `informative`, `severe`,\n   * `subtle`, `success`, `warning`. `important` follows Badge (see `BadgeProps.color`): it renders\n   * the severe (orange) colors in 0.x and becomes a neutral high-emphasis color in 1.0. A value\n   * outside the palette (from untyped code) renders as `brand`.\n   * @default 'brand'\n   */\n  color?: BadgeColor;\n  /**\n   * A 6px dot without a number (an \"unread\" indicator); `count`, `overflowCount` and `showZero`\n   * are ignored. Name it with `aria-label` when nothing else conveys its meaning. Its color keeps\n   * 3:1 against the page background in every theme, so `informative` (gray) and `warning` (dark\n   * yellow in the light theme) dots are darker than those counts; `subtle` is the page color, for\n   * dots on colored surfaces.\n   * @default false\n   */\n  dot?: boolean;\n  /** Shows \"0\" for a count of 0; negative counts still render nothing.\n   * @default false\n   */\n  showZero?: boolean;\n  /** Ref to the root `<span>`. */\n  ref?: React.Ref<HTMLSpanElement>;\n}\n\n/** Whether a naming attribute holds more than whitespace (an empty one names nothing). */\nfunction isName(value: unknown): value is string {\n  return typeof value === 'string' && value.trim() !== '';\n}\n\n/**\n * A small pill showing a count (unread messages, notifications), or with `dot` a small dot\n * without a number. Renders nothing for a count of 0 (unless `showZero`) or less, and\n * `overflowCount+` above `overflowCount`. `color` takes Badge's palette, so a color means the\n * same in both. The root carries `data-color` and `data-appearance` with the resolved values,\n * and `data-dot` when it is a dot.\n *\n * A count or dot whose meaning is not in the surrounding text can be named with `aria-label` or\n * `aria-labelledby`: it then gets `role=\"img\"` (unless you pass a `role`), so the name is\n * announced. An empty or whitespace-only name counts as absent and adds no role.\n *\n * @example\n * <CounterBadge count={12} />\n * <CounterBadge count={3} color=\"danger\" aria-label=\"3 failed checks\" />\n * <CounterBadge dot aria-label=\"Unread messages\" />\n */\nexport const CounterBadge = ({\n  count = 0,\n  overflowCount = 99,\n  appearance = 'filled',\n  color = 'brand',\n  dot = false,\n  showZero = false,\n  className,\n  ref,\n  ...props\n}: CounterBadgeProps) => {\n  if (!dot && (count < 0 || (count === 0 && !showZero))) return null;\n\n  // Before 0.6 `color` was the span's HTML attribute (any string): a value outside the palette\n  // (untyped code, a wrapper forwarding span attributes) renders as brand instead of throwing.\n  const resolvedColor: BadgeColor = Object.hasOwn(badgeColorClasses, color ?? '') ? color : 'brand';\n  const c = badgeColorClasses[resolvedColor];\n  // A dot has no text to carry the contrast: it takes the dot colors, which stand out from the\n  // page on their own.\n  const appearanceClasses = dot\n    ? appearance === 'filled'\n      ? c.dot\n      : cn('bg-transparent border', c.dotBorder)\n    : appearance === 'filled'\n      ? c.filled\n      : cn(\n          'bg-transparent border',\n          c.border,\n          resolvedColor === 'brand' ? 'text-primary' : 'text-foreground',\n        );\n\n  // A name on a role-less <span> is not announced by screen readers: name it as an image. An empty\n  // or whitespace-only name adds no role (an unnamed role=\"img\" fails axe).\n  const named = isName(props['aria-label']) || isName(props['aria-labelledby']);\n\n  return (\n    <span\n      ref={ref}\n      role={named ? 'img' : undefined}\n      data-color={resolvedColor}\n      data-appearance={appearance}\n      data-dot={dot ? '' : undefined}\n      className={cn(\n        'inline-flex items-center justify-center rounded-full',\n        dot\n          ? // In forced colors the background would become Canvas and hide the dot.\n            'h-1.5 w-1.5 min-w-0 p-0 forced-colors:forced-color-adjust-none forced-colors:bg-[CanvasText]'\n          : 'h-5 min-w-5 px-1.5 text-caption-1 font-semibold',\n        appearanceClasses,\n        className,\n      )}\n      {...props}\n    >\n      {dot ? null : count > overflowCount ? `${overflowCount}+` : String(count)}\n    </span>\n  );\n};\n\nCounterBadge.displayName = 'CounterBadge';\n"],"mappings":"8MA+CA,SAASO,EAAO,EAAiC,CAC/C,OAAO,OAAOC,GAAU,UAAYA,EAAM,KAAK,IAAM,EACvD,CAkBA,IAAaC,GAAgB,CAC3B,QAAQ,EACR,gBAAgB,GAChB,aAAa,SACb,QAAQ,QACR,MAAM,GACN,WAAW,GACX,YACA,MACA,GAAGC,KACoB,CACvB,GAAI,CAACC,IAAQC,EAAQ,GAAMA,IAAU,GAAK,CAACC,GAAY,OAAO,KAI9D,IAAMC,EAA4B,OAAO,OAAOd,EAAAA,kBAAmBe,GAAS,EAAE,EAAIA,EAAQ,QACpFC,EAAIhB,EAAAA,kBAAkBc,GAGtBG,EAAoBN,EACtBO,IAAe,SACbF,EAAE,IACFf,EAAAA,GAAG,wBAAyBe,EAAE,SAAS,EACzCE,IAAe,SACbF,EAAE,OACFf,EAAAA,GACE,wBACAe,EAAE,OACFF,IAAkB,QAAU,eAAiB,iBAC/C,EAIAK,EAAQZ,EAAOG,EAAM,aAAa,GAAKH,EAAOG,EAAM,kBAAkB,EAE5E,OACE,EAAAJ,EAAA,IAAA,CAAC,OAAD,CACO,MACL,KAAMa,EAAQ,MAAQ,IAAA,GACtB,aAAYL,EACZ,kBAAiBI,EACjB,WAAUP,EAAM,GAAK,IAAA,GACrB,UAAWV,EAAAA,GACT,uDACAU,EAEI,+FACA,kDACJM,EACAG,CACF,EACA,GAAIV,EAEH,SAAAC,EAAM,KAAOC,EAAQS,EAAgB,GAAGA,EAAc,GAAK,OAAOT,CAAK,CACpE,CAAA,CAEV,EAEA,EAAa,YAAc"}

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

@@ -0,0 +1,28 @@
+"use client";
+import { cn as e } from "../../lib/cn.mjs";
+import { badgeColorClasses as t } from "./Badge.colors.mjs";
+import "react";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/data-display/CounterBadge.tsx
+function r(e) {
+	return typeof e == "string" && e.trim() !== "";
+}
+var i = ({ count: i = 0, overflowCount: a = 99, appearance: o = "filled", color: s = "brand", dot: c = !1, showZero: l = !1, className: u, ref: d, ...f }) => {
+	if (!c && (i < 0 || i === 0 && !l)) return null;
+	let p = Object.hasOwn(t, s ?? "") ? s : "brand", m = t[p], h = c ? o === "filled" ? m.dot : e("bg-transparent border", m.dotBorder) : o === "filled" ? m.filled : e("bg-transparent border", m.border, p === "brand" ? "text-primary" : "text-foreground"), g = r(f["aria-label"]) || r(f["aria-labelledby"]);
+	return /* @__PURE__ */ n("span", {
+		ref: d,
+		role: g ? "img" : void 0,
+		"data-color": p,
+		"data-appearance": o,
+		"data-dot": c ? "" : void 0,
+		className: e("inline-flex items-center justify-center rounded-full", c ? "h-1.5 w-1.5 min-w-0 p-0 forced-colors:forced-color-adjust-none forced-colors:bg-[CanvasText]" : "h-5 min-w-5 px-1.5 text-caption-1 font-semibold", h, u),
+		...f,
+		children: c ? null : i > a ? `${a}+` : String(i)
+	});
+};
+i.displayName = "CounterBadge";
+//#endregion
+export { i as CounterBadge };
+
+//# sourceMappingURL=CounterBadge.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CounterBadge.mjs","names":["isName","value","CounterBadge","props","dot","count","showZero","resolvedColor","badgeColorClasses","color","c","appearanceClasses","appearance","cn","named","className","overflowCount"],"sources":["../../../src/components/data-display/CounterBadge.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport type { BadgeColor } from '../../lib/types';\nimport { badgeColorClasses } from './Badge.colors';\n\n/** Properties for the CounterBadge component. */\nexport interface CounterBadgeProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /**\n   * Number to show. Nothing renders for 0 (unless `showZero`) or less; above `overflowCount` the\n   * badge shows `overflowCount+`.\n   * @default 0\n   */\n  count?: number;\n  /** Maximum count before displaying overflow indicator (e.g. \"99+\").\n   * @default 99\n   */\n  overflowCount?: number;\n  /** Visual style of the counter badge.\n   * @default 'filled'\n   */\n  appearance?: 'filled' | 'outline';\n  /**\n   * Semantic color, from Badge's palette: `brand`, `danger`, `important`, `informative`, `severe`,\n   * `subtle`, `success`, `warning`. `important` follows Badge (see `BadgeProps.color`): it renders\n   * the severe (orange) colors in 0.x and becomes a neutral high-emphasis color in 1.0. A value\n   * outside the palette (from untyped code) renders as `brand`.\n   * @default 'brand'\n   */\n  color?: BadgeColor;\n  /**\n   * A 6px dot without a number (an \"unread\" indicator); `count`, `overflowCount` and `showZero`\n   * are ignored. Name it with `aria-label` when nothing else conveys its meaning. Its color keeps\n   * 3:1 against the page background in every theme, so `informative` (gray) and `warning` (dark\n   * yellow in the light theme) dots are darker than those counts; `subtle` is the page color, for\n   * dots on colored surfaces.\n   * @default false\n   */\n  dot?: boolean;\n  /** Shows \"0\" for a count of 0; negative counts still render nothing.\n   * @default false\n   */\n  showZero?: boolean;\n  /** Ref to the root `<span>`. */\n  ref?: React.Ref<HTMLSpanElement>;\n}\n\n/** Whether a naming attribute holds more than whitespace (an empty one names nothing). */\nfunction isName(value: unknown): value is string {\n  return typeof value === 'string' && value.trim() !== '';\n}\n\n/**\n * A small pill showing a count (unread messages, notifications), or with `dot` a small dot\n * without a number. Renders nothing for a count of 0 (unless `showZero`) or less, and\n * `overflowCount+` above `overflowCount`. `color` takes Badge's palette, so a color means the\n * same in both. The root carries `data-color` and `data-appearance` with the resolved values,\n * and `data-dot` when it is a dot.\n *\n * A count or dot whose meaning is not in the surrounding text can be named with `aria-label` or\n * `aria-labelledby`: it then gets `role=\"img\"` (unless you pass a `role`), so the name is\n * announced. An empty or whitespace-only name counts as absent and adds no role.\n *\n * @example\n * <CounterBadge count={12} />\n * <CounterBadge count={3} color=\"danger\" aria-label=\"3 failed checks\" />\n * <CounterBadge dot aria-label=\"Unread messages\" />\n */\nexport const CounterBadge = ({\n  count = 0,\n  overflowCount = 99,\n  appearance = 'filled',\n  color = 'brand',\n  dot = false,\n  showZero = false,\n  className,\n  ref,\n  ...props\n}: CounterBadgeProps) => {\n  if (!dot && (count < 0 || (count === 0 && !showZero))) return null;\n\n  // Before 0.6 `color` was the span's HTML attribute (any string): a value outside the palette\n  // (untyped code, a wrapper forwarding span attributes) renders as brand instead of throwing.\n  const resolvedColor: BadgeColor = Object.hasOwn(badgeColorClasses, color ?? '') ? color : 'brand';\n  const c = badgeColorClasses[resolvedColor];\n  // A dot has no text to carry the contrast: it takes the dot colors, which stand out from the\n  // page on their own.\n  const appearanceClasses = dot\n    ? appearance === 'filled'\n      ? c.dot\n      : cn('bg-transparent border', c.dotBorder)\n    : appearance === 'filled'\n      ? c.filled\n      : cn(\n          'bg-transparent border',\n          c.border,\n          resolvedColor === 'brand' ? 'text-primary' : 'text-foreground',\n        );\n\n  // A name on a role-less <span> is not announced by screen readers: name it as an image. An empty\n  // or whitespace-only name adds no role (an unnamed role=\"img\" fails axe).\n  const named = isName(props['aria-label']) || isName(props['aria-labelledby']);\n\n  return (\n    <span\n      ref={ref}\n      role={named ? 'img' : undefined}\n      data-color={resolvedColor}\n      data-appearance={appearance}\n      data-dot={dot ? '' : undefined}\n      className={cn(\n        'inline-flex items-center justify-center rounded-full',\n        dot\n          ? // In forced colors the background would become Canvas and hide the dot.\n            'h-1.5 w-1.5 min-w-0 p-0 forced-colors:forced-color-adjust-none forced-colors:bg-[CanvasText]'\n          : 'h-5 min-w-5 px-1.5 text-caption-1 font-semibold',\n        appearanceClasses,\n        className,\n      )}\n      {...props}\n    >\n      {dot ? null : count > overflowCount ? `${overflowCount}+` : String(count)}\n    </span>\n  );\n};\n\nCounterBadge.displayName = 'CounterBadge';\n"],"mappings":";;;;;;AA+CA,SAASA,EAAO,GAAiC;CAC/C,OAAO,OAAOC,KAAU,YAAYA,EAAM,KAAK,MAAM;AACvD;AAkBA,IAAaC,KAAgB,EAC3B,WAAQ,GACR,mBAAgB,IAChB,gBAAa,UACb,WAAQ,SACR,SAAM,IACN,cAAW,IACX,cACA,QACA,GAAGC,QACoB;CACvB,IAAI,CAACC,MAAQC,IAAQ,KAAMA,MAAU,KAAK,CAACC,IAAY,OAAO;CAI9D,IAAMC,IAA4B,OAAO,OAAOC,GAAmBC,KAAS,EAAE,IAAIA,IAAQ,SACpFC,IAAIF,EAAkBD,IAGtBI,IAAoBP,IACtBQ,MAAe,WACbF,EAAE,MACFG,EAAG,yBAAyBH,EAAE,SAAS,IACzCE,MAAe,WACbF,EAAE,SACFG,EACE,yBACAH,EAAE,QACFH,MAAkB,UAAU,iBAAiB,iBAC/C,GAIAO,IAAQd,EAAOG,EAAM,aAAa,KAAKH,EAAOG,EAAM,kBAAkB;CAE5E,OACE,kBAAC,QAAD;EACO;EACL,MAAMW,IAAQ,QAAQ,KAAA;EACtB,cAAYP;EACZ,mBAAiBK;EACjB,YAAUR,IAAM,KAAK,KAAA;EACrB,WAAWS,EACT,wDACAT,IAEI,iGACA,mDACJO,GACAI,CACF;EACA,GAAIZ;EAEH,UAAAC,IAAM,OAAOC,IAAQW,IAAgB,GAAGA,EAAc,KAAK,OAAOX,CAAK;CACpE,CAAA;AAEV;AAEA,EAAa,cAAc"}

package/dist/components/data-display/Divider.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("../../hooks/useId.cjs"),i=require("../../lib/aria.cjs");let a=require("react");a=e.__toESM(a,1);let o=require("react/jsx-runtime");var s=`shrink-0 text-caption-1 text-muted-foreground`,c=e=>{let{as:a,orientation:c=`horizontal`,className:l,children:u,ref:d,"aria-labelledby":f,...p}=e,m=r.useId(`divider-label`),h=c===`vertical`;if(n.slotRendersContent(u)){let e=a??`div`,r=p[`aria-label`]?f:i.joinIds(f,m),c=h?`w-0 min-h-2 flex-1 border-s border-border`:`h-0 min-w-2 flex-1 border-t border-border`;return(0,o.jsxs)(e,{ref:d,role:`separator`,"aria-orientation":h?`vertical`:void 0,className:t.cn(h?`inline-flex min-h-12 flex-col items-center gap-1 self-stretch`:`flex items-center gap-3`,l),...p,"aria-labelledby":r,children:[(0,o.jsx)(`div`,{"aria-hidden":`true`,className:c}),n.renderSlot(u,`span`,s,{id:m}),(0,o.jsx)(`div`,{"aria-hidden":`true`,className:c})]})}return h?(0,o.jsx)(a??`div`,{ref:d,role:`separator`,"aria-orientation":`vertical`,"aria-labelledby":f,className:t.cn(`inline-block h-6 border-s border-border`,l),...p}):(0,o.jsx)(a??`hr`,{ref:d,role:`separator`,"aria-labelledby":f,className:t.cn(`m-0 h-0 w-full border-0 border-t border-solid border-border`,l),...p})};c.displayName=`Divider`,exports.Divider=c;
+//# sourceMappingURL=Divider.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.cjs","names":["useId","slotRendersContent","joinIds","cn","renderSlot","require_runtime","require_cn","require_slot","require_useId","require_aria","react","react_jsx_runtime","labelClassName","Divider","ariaLabelledBy","rest","props","labelId","vertical","orientation","children","Wrapper","as","labelledBy","lineClassName","className"],"sources":["../../../src/components/data-display/Divider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport { joinIds } from '../../lib/aria';\nimport { renderSlot, slotRendersContent } from '../../lib/slot';\nimport { useId } from '../../hooks/useId';\nimport type { Orientation } from '../../lib/types';\nimport type { PolymorphicComponent, PolymorphicProps } from '../../lib/polymorphic';\n\n/**\n * The Divider's own props (the XOwnProps rule of `PolymorphicProps`: component-specific props\n * only). Every other prop comes from the rendered element (`as`).\n */\nexport interface DividerOwnProps {\n  /** Orientation of the divider line.\n   * @default 'horizontal'\n   */\n  orientation?: Orientation;\n  /**\n   * Ref to the rendered element. Typed `HTMLElement` for every `as`, because the default element\n   * depends on the props: an `<hr>` for a plain horizontal divider, a `<div>` otherwise.\n   */\n  ref?: React.Ref<HTMLElement>;\n}\n\n/**\n * Props of {@link Divider} rendered as `C` (default `'hr'`). `DividerProps` without a type argument\n * is the 0.4 name.\n */\nexport type DividerProps<C extends React.ElementType = 'hr'> = PolymorphicProps<C, DividerOwnProps>;\n\n/** The props the implementation reads, for any `as` (the public typing is `PolymorphicComponent`). */\ntype DividerImplProps = DividerOwnProps &\n  React.HTMLAttributes<HTMLElement> & {\n    as?: React.ElementType;\n  };\n\nconst labelClassName = 'shrink-0 text-caption-1 text-muted-foreground';\n\n/**\n * A line that separates content, horizontally or vertically, optionally with a label in the middle.\n *\n * - A plain horizontal divider renders an `<hr>`; a vertical or labelled divider renders a\n *   `<div role=\"separator\">` (`as` replaces the element in every case). `children` that render\n *   nothing (`''`, or an array, `Set` or generator of only empty items, such as an empty `.map()`\n *   result) are no label; `0` is one.\n * - A labelled divider is **one** separator named by its label (`aria-labelledby`); the two line\n *   segments around the label are presentational (`aria-hidden`). A consumer `aria-label` names it\n *   instead, and a consumer `aria-labelledby` is joined with the label.\n * - Vertical dividers set `aria-orientation=\"vertical\"` and use logical borders (RTL-safe).\n *\n * @example\n * <Divider />\n * <Divider>OR</Divider>\n * <Divider orientation=\"vertical\" />\n */\nexport const Divider: PolymorphicComponent<'hr', DividerOwnProps> = (props) => {\n  const {\n    as,\n    orientation = 'horizontal',\n    className,\n    children,\n    ref,\n    'aria-labelledby': ariaLabelledBy,\n    ...rest\n  } = props as DividerImplProps;\n  const labelId = useId('divider-label');\n  const vertical = orientation === 'vertical';\n\n  // The library's \"renders nothing\" rule: `0` is a label, while `''` or an array, Set or generator\n  // of only empty items (an empty `.map()` result) is none.\n  if (slotRendersContent(children)) {\n    const Wrapper: React.ElementType = as ?? 'div';\n    // A consumer aria-label names the separator; aria-labelledby would take precedence over it.\n    const labelledBy = rest['aria-label'] ? ariaLabelledBy : joinIds(ariaLabelledBy, labelId);\n    const lineClassName = vertical\n      ? 'w-0 min-h-2 flex-1 border-s border-border'\n      : 'h-0 min-w-2 flex-1 border-t border-border';\n    return (\n      <Wrapper\n        ref={ref}\n        role=\"separator\"\n        aria-orientation={vertical ? 'vertical' : undefined}\n        className={cn(\n          vertical\n            ? 'inline-flex min-h-12 flex-col items-center gap-1 self-stretch'\n            : 'flex items-center gap-3',\n          className,\n        )}\n        {...rest}\n        aria-labelledby={labelledBy}\n      >\n        <div aria-hidden=\"true\" className={lineClassName} />\n        {/* Rendered as a slot: a generator checked above was read once, and renderSlot renders\n            the items read then. */}\n        {renderSlot(children, 'span', labelClassName, { id: labelId })}\n        <div aria-hidden=\"true\" className={lineClassName} />\n      </Wrapper>\n    );\n  }\n\n  if (vertical) {\n    const Line: React.ElementType = as ?? 'div';\n    return (\n      <Line\n        ref={ref}\n        role=\"separator\"\n        aria-orientation=\"vertical\"\n        aria-labelledby={ariaLabelledBy}\n        className={cn('inline-block h-6 border-s border-border', className)}\n        {...rest}\n      />\n    );\n  }\n\n  const Rule: React.ElementType = as ?? 'hr';\n  return (\n    <Rule\n      ref={ref}\n      role=\"separator\"\n      aria-labelledby={ariaLabelledBy}\n      className={cn('m-0 h-0 w-full border-0 border-t border-solid border-border', className)}\n      {...rest}\n    />\n  );\n};\n\nDivider.displayName = 'Divider';\n"],"mappings":"iRAoCA,IAAMY,EAAiB,gDAmBVC,EAAwD,GAAU,CAC7E,GAAM,CACJ,KACA,cAAc,aACd,YACA,WACA,MACA,kBAAmBC,EACnB,GAAGC,GACDC,EACEC,EAAUjB,EAAAA,MAAM,eAAe,EAC/BkB,EAAWC,IAAgB,WAIjC,GAAIlB,EAAAA,mBAAmBmB,CAAQ,EAAG,CAChC,IAAMC,EAA6BC,GAAM,MAEnCC,EAAaR,EAAK,cAAgBD,EAAiBZ,EAAAA,QAAQY,EAAgBG,CAAO,EAClFO,EAAgBN,EAClB,4CACA,4CACJ,OACE,EAAAP,EAAA,KAAA,CAACU,EAAD,CACO,MACL,KAAK,YACL,mBAAkBH,EAAW,WAAa,IAAA,GAC1C,UAAWf,EAAAA,GACTe,EACI,gEACA,0BACJO,CACF,EACA,GAAIV,EACJ,kBAAiBQ,EAXnB,SAAA,EAaE,EAAAZ,EAAA,IAAA,CAAC,MAAD,CAAK,cAAY,OAAO,UAAWa,CAAgB,CAAA,EAGlDpB,EAAAA,WAAWgB,EAAU,OAAQR,EAAgB,CAAE,GAAIK,CAAQ,CAAC,GAC7D,EAAAN,EAAA,IAAA,CAAC,MAAD,CAAK,cAAY,OAAO,UAAWa,CAAgB,CAAA,CAC5C,GAEb,CAiBA,OAfIN,GAGA,EAAAP,EAAA,IAAA,CAF8BW,GAAM,MAEpC,CACO,MACL,KAAK,YACL,mBAAiB,WACjB,kBAAiBR,EACjB,UAAWX,EAAAA,GAAG,0CAA2CsB,CAAS,EAClE,GAAIV,CACL,CAAA,GAMH,EAAAJ,EAAA,IAAA,CAF8BW,GAAM,KAEpC,CACO,MACL,KAAK,YACL,kBAAiBR,EACjB,UAAWX,EAAAA,GAAG,8DAA+DsB,CAAS,EACtF,GAAIV,CACL,CAAA,CAEL,EAEA,EAAQ,YAAc"}