@mortenbrudvik/waveui 0.7.0 → 0.9.0

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

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

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

@@ -1 +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"}
+{"version":3,"file":"Badge.cjs","names":["badgeColorClasses","cn","badgeClassNames","require_runtime","require_cn","require_classNames","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 { badgeClassNames } from '../../lib/classNames';\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        badgeClassNames.root,\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":"oPA8BA,SAASS,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,EAAId,EAAAA,kBAAkBe,GAEtBC,EACJC,IAAe,SACXH,EAAE,OACFG,IAAe,OACbH,EAAE,KACFb,EAAAA,GAAG,wCAAyCa,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,UAAWhB,EAAAA,GACTC,EAAAA,gBAAgB,KAChB,sDACAS,EAAYQ,GACZH,EACAI,CACF,EACA,GAAIP,EAEH,UACG,CAAA,CAEV,EAEA,EAAM,YAAc"}

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

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

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

@@ -1 +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"}
+{"version":3,"file":"Badge.mjs","names":["isName","value","sizeClasses","Badge","props","c","badgeColorClasses","color","appearanceClasses","appearance","cn","named","badgeClassNames","size","className"],"sources":["../../../src/components/data-display/Badge.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport { badgeClassNames } from '../../lib/classNames';\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        badgeClassNames.root,\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":";;;;;;;AA8BA,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,EACTE,EAAgB,MAChB,uDACAV,EAAYW,IACZL,GACAM,CACF;EACA,GAAIV;EAEH;CACG,CAAA;AAEV;AAEA,EAAM,cAAc"}

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

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

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

@@ -1 +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"}
+{"version":3,"file":"CounterBadge.cjs","names":["badgeColorClasses","cn","badgeClassNames","counterBadgeClassNames","require_runtime","require_cn","require_classNames","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 { badgeClassNames, counterBadgeClassNames } from '../../lib/classNames';\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        badgeClassNames.root,\n        counterBadgeClassNames.root,\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":"oPAgDA,SAASU,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,OAAOjB,EAAAA,kBAAmBkB,GAAS,EAAE,EAAIA,EAAQ,QACpFC,EAAInB,EAAAA,kBAAkBiB,GAGtBG,EAAoBN,EACtBO,IAAe,SACbF,EAAE,IACFlB,EAAAA,GAAG,wBAAyBkB,EAAE,SAAS,EACzCE,IAAe,SACbF,EAAE,OACFlB,EAAAA,GACE,wBACAkB,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,UAAWb,EAAAA,GACTC,EAAAA,gBAAgB,KAChBC,EAAAA,uBAAuB,KACvB,uDACAW,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

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

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

@@ -1 +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"}
+{"version":3,"file":"CounterBadge.mjs","names":["isName","value","CounterBadge","props","dot","count","showZero","resolvedColor","badgeColorClasses","color","c","appearanceClasses","appearance","cn","named","badgeClassNames","counterBadgeClassNames","className","overflowCount"],"sources":["../../../src/components/data-display/CounterBadge.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport { badgeClassNames, counterBadgeClassNames } from '../../lib/classNames';\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        badgeClassNames.root,\n        counterBadgeClassNames.root,\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":";;;;;;;AAgDA,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,EACTE,EAAgB,MAChBC,EAAuB,MACvB,wDACAZ,IAEI,iGACA,mDACJO,GACAM,CACF;EACA,GAAId;EAEH,UAAAC,IAAM,OAAOC,IAAQa,IAAgB,GAAGA,EAAc,KAAK,OAAOb,CAAK;CACpE,CAAA;AAEV;AAEA,EAAa,cAAc"}

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

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

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

@@ -1 +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"}
+{"version":3,"file":"Divider.cjs","names":["useId","slotRendersContent","joinIds","cn","dividerClassNames","renderSlot","require_runtime","require_cn","require_slot","require_classNames","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 { dividerClassNames } from '../../lib/classNames';\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 = cn(\n      dividerClassNames.line,\n      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    );\n    return (\n      <Wrapper\n        ref={ref}\n        role=\"separator\"\n        aria-orientation={vertical ? 'vertical' : undefined}\n        className={cn(\n          dividerClassNames.root,\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', cn(dividerClassNames.label, 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(dividerClassNames.root, '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(\n        dividerClassNames.root,\n        'm-0 h-0 w-full border-0 border-t border-solid border-border',\n        className,\n      )}\n      {...rest}\n    />\n  );\n};\n\nDivider.displayName = 'Divider';\n"],"mappings":"uTAqCA,IAAMc,EAAiB,gDAmBVC,EAAwD,GAAU,CAC7E,GAAM,CACJ,KACA,cAAc,aACd,YACA,WACA,MACA,kBAAmBC,EACnB,GAAGC,GACDC,EACEC,EAAUnB,EAAAA,MAAM,eAAe,EAC/BoB,EAAWC,IAAgB,WAIjC,GAAIpB,EAAAA,mBAAmBqB,CAAQ,EAAG,CAChC,IAAMC,EAA6BC,GAAM,MAEnCC,EAAaR,EAAK,cAAgBD,EAAiBd,EAAAA,QAAQc,EAAgBG,CAAO,EAClFO,EAAgBvB,EAAAA,GACpBC,EAAAA,kBAAkB,KAClBgB,EACI,4CACA,2CACN,EACA,OACE,EAAAP,EAAA,KAAA,CAACU,EAAD,CACO,MACL,KAAK,YACL,mBAAkBH,EAAW,WAAa,IAAA,GAC1C,UAAWjB,EAAAA,GACTC,EAAAA,kBAAkB,KAClBgB,EACI,gEACA,0BACJO,CACF,EACA,GAAIV,EACJ,kBAAiBQ,EAZnB,SAAA,EAcE,EAAAZ,EAAA,IAAA,CAAC,MAAD,CAAK,cAAY,OAAO,UAAWa,CAAgB,CAAA,EAGlDrB,EAAAA,WAAWiB,EAAU,OAAQnB,EAAAA,GAAGC,EAAAA,kBAAkB,MAAOU,CAAc,EAAG,CAAE,GAAIK,CAAQ,CAAC,GAC1F,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,UAAWb,EAAAA,GAAGC,EAAAA,kBAAkB,KAAM,0CAA2CuB,CAAS,EAC1F,GAAIV,CACL,CAAA,GAMH,EAAAJ,EAAA,IAAA,CAF8BW,GAAM,KAEpC,CACO,MACL,KAAK,YACL,kBAAiBR,EACjB,UAAWb,EAAAA,GACTC,EAAAA,kBAAkB,KAClB,8DACAuB,CACF,EACA,GAAIV,CACL,CAAA,CAEL,EAEA,EAAQ,YAAc"}

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

@@ -1,52 +1,53 @@
 "use client";
 import { cn as e } from "../../lib/cn.mjs";
 import { renderSlot as t, slotRendersContent as n } from "../../lib/slot.mjs";
-import { useId as r } from "../../hooks/useId.mjs";
-import { joinIds as i } from "../../lib/aria.mjs";
+import { dividerClassNames as r } from "../../lib/classNames.mjs";
+import { useId as i } from "../../hooks/useId.mjs";
+import { joinIds as a } from "../../lib/aria.mjs";
 import "react";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
 //#region src/components/data-display/Divider.tsx
-var s = "shrink-0 text-caption-1 text-muted-foreground", c = (c) => {
-	let { as: l, orientation: u = "horizontal", className: d, children: f, ref: p, "aria-labelledby": m, ...h } = c, g = r("divider-label"), _ = u === "vertical";
-	if (n(f)) {
-		let n = l ?? "div", r = h["aria-label"] ? m : i(m, g), c = _ ? "w-0 min-h-2 flex-1 border-s border-border" : "h-0 min-w-2 flex-1 border-t border-border";
-		return /* @__PURE__ */ o(n, {
-			ref: p,
+var c = "shrink-0 text-caption-1 text-muted-foreground", l = (l) => {
+	let { as: u, orientation: d = "horizontal", className: f, children: p, ref: m, "aria-labelledby": h, ...g } = l, _ = i("divider-label"), v = d === "vertical";
+	if (n(p)) {
+		let n = u ?? "div", i = g["aria-label"] ? h : a(h, _), l = e(r.line, v ? "w-0 min-h-2 flex-1 border-s border-border" : "h-0 min-w-2 flex-1 border-t border-border");
+		return /* @__PURE__ */ s(n, {
+			ref: m,
 			role: "separator",
-			"aria-orientation": _ ? "vertical" : void 0,
-			className: e(_ ? "inline-flex min-h-12 flex-col items-center gap-1 self-stretch" : "flex items-center gap-3", d),
-			...h,
-			"aria-labelledby": r,
+			"aria-orientation": v ? "vertical" : void 0,
+			className: e(r.root, v ? "inline-flex min-h-12 flex-col items-center gap-1 self-stretch" : "flex items-center gap-3", f),
+			...g,
+			"aria-labelledby": i,
 			children: [
-				/* @__PURE__ */ a("div", {
+				/* @__PURE__ */ o("div", {
 					"aria-hidden": "true",
-					className: c
+					className: l
 				}),
-				t(f, "span", s, { id: g }),
-				/* @__PURE__ */ a("div", {
+				t(p, "span", e(r.label, c), { id: _ }),
+				/* @__PURE__ */ o("div", {
 					"aria-hidden": "true",
-					className: c
+					className: l
 				})
 			]
 		});
 	}
-	return _ ? /* @__PURE__ */ a(l ?? "div", {
-		ref: p,
+	return v ? /* @__PURE__ */ o(u ?? "div", {
+		ref: m,
 		role: "separator",
 		"aria-orientation": "vertical",
-		"aria-labelledby": m,
-		className: e("inline-block h-6 border-s border-border", d),
-		...h
-	}) : /* @__PURE__ */ a(l ?? "hr", {
-		ref: p,
+		"aria-labelledby": h,
+		className: e(r.root, "inline-block h-6 border-s border-border", f),
+		...g
+	}) : /* @__PURE__ */ o(u ?? "hr", {
+		ref: m,
 		role: "separator",
-		"aria-labelledby": m,
-		className: e("m-0 h-0 w-full border-0 border-t border-solid border-border", d),
-		...h
+		"aria-labelledby": h,
+		className: e(r.root, "m-0 h-0 w-full border-0 border-t border-solid border-border", f),
+		...g
 	});
 };
-c.displayName = "Divider";
+l.displayName = "Divider";
 //#endregion
-export { c as Divider };
+export { l as Divider };
 
 //# sourceMappingURL=Divider.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Divider.mjs","names":["useId","useId$1","labelClassName","Divider","ariaLabelledBy","rest","props","labelId","vertical","orientation","slotRendersContent","children","Wrapper","as","labelledBy","joinIds","lineClassName","cn","className","renderSlot"],"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":";;;;;;;;AAoCA,IAAME,IAAiB,iDAmBVC,KAAwD,MAAU;CAC7E,IAAM,EACJ,OACA,iBAAc,cACd,cACA,aACA,QACA,mBAAmBC,GACnB,GAAGC,MACDC,GACEC,IAAUP,EAAM,eAAe,GAC/BQ,IAAWC,MAAgB;CAIjC,IAAIC,EAAmBC,CAAQ,GAAG;EAChC,IAAMC,IAA6BC,KAAM,OAEnCC,IAAaT,EAAK,gBAAgBD,IAAiBW,EAAQX,GAAgBG,CAAO,GAClFS,IAAgBR,IAClB,8CACA;EACJ,OACE,kBAACI,GAAD;GACO;GACL,MAAK;GACL,oBAAkBJ,IAAW,aAAa,KAAA;GAC1C,WAAWS,EACTT,IACI,kEACA,2BACJU,CACF;GACA,GAAIb;GACJ,mBAAiBS;GAXnB,UAAA;IAaE,kBAAC,OAAD;KAAK,eAAY;KAAO,WAAWE;IAAgB,CAAA;IAGlDG,EAAWR,GAAU,QAAQT,GAAgB,EAAE,IAAIK,EAAQ,CAAC;IAC7D,kBAAC,OAAD;KAAK,eAAY;KAAO,WAAWS;IAAgB,CAAA;GAC5C;;CAEb;CAiBA,OAfIR,IAGA,kBAF8BK,KAAM,OAEpC;EACO;EACL,MAAK;EACL,oBAAiB;EACjB,mBAAiBT;EACjB,WAAWa,EAAG,2CAA2CC,CAAS;EAClE,GAAIb;CACL,CAAA,IAMH,kBAF8BQ,KAAM,MAEpC;EACO;EACL,MAAK;EACL,mBAAiBT;EACjB,WAAWa,EAAG,+DAA+DC,CAAS;EACtF,GAAIb;CACL,CAAA;AAEL;AAEA,EAAQ,cAAc"}
+{"version":3,"file":"Divider.mjs","names":["useId","useId$1","labelClassName","Divider","ariaLabelledBy","rest","props","labelId","vertical","orientation","slotRendersContent","children","Wrapper","as","labelledBy","joinIds","lineClassName","cn","dividerClassNames","className","renderSlot"],"sources":["../../../src/components/data-display/Divider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport { dividerClassNames } from '../../lib/classNames';\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 = cn(\n      dividerClassNames.line,\n      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    );\n    return (\n      <Wrapper\n        ref={ref}\n        role=\"separator\"\n        aria-orientation={vertical ? 'vertical' : undefined}\n        className={cn(\n          dividerClassNames.root,\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', cn(dividerClassNames.label, 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(dividerClassNames.root, '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(\n        dividerClassNames.root,\n        'm-0 h-0 w-full border-0 border-t border-solid border-border',\n        className,\n      )}\n      {...rest}\n    />\n  );\n};\n\nDivider.displayName = 'Divider';\n"],"mappings":";;;;;;;;;AAqCA,IAAME,IAAiB,iDAmBVC,KAAwD,MAAU;CAC7E,IAAM,EACJ,OACA,iBAAc,cACd,cACA,aACA,QACA,mBAAmBC,GACnB,GAAGC,MACDC,GACEC,IAAUP,EAAM,eAAe,GAC/BQ,IAAWC,MAAgB;CAIjC,IAAIC,EAAmBC,CAAQ,GAAG;EAChC,IAAMC,IAA6BC,KAAM,OAEnCC,IAAaT,EAAK,gBAAgBD,IAAiBW,EAAQX,GAAgBG,CAAO,GAClFS,IAAgBC,EACpBC,EAAkB,MAClBV,IACI,8CACA,2CACN;EACA,OACE,kBAACI,GAAD;GACO;GACL,MAAK;GACL,oBAAkBJ,IAAW,aAAa,KAAA;GAC1C,WAAWS,EACTC,EAAkB,MAClBV,IACI,kEACA,2BACJW,CACF;GACA,GAAId;GACJ,mBAAiBS;GAZnB,UAAA;IAcE,kBAAC,OAAD;KAAK,eAAY;KAAO,WAAWE;IAAgB,CAAA;IAGlDI,EAAWT,GAAU,QAAQM,EAAGC,EAAkB,OAAOhB,CAAc,GAAG,EAAE,IAAIK,EAAQ,CAAC;IAC1F,kBAAC,OAAD;KAAK,eAAY;KAAO,WAAWS;IAAgB,CAAA;GAC5C;;CAEb;CAiBA,OAfIR,IAGA,kBAF8BK,KAAM,OAEpC;EACO;EACL,MAAK;EACL,oBAAiB;EACjB,mBAAiBT;EACjB,WAAWa,EAAGC,EAAkB,MAAM,2CAA2CC,CAAS;EAC1F,GAAId;CACL,CAAA,IAMH,kBAF8BQ,KAAM,MAEpC;EACO;EACL,MAAK;EACL,mBAAiBT;EACjB,WAAWa,EACTC,EAAkB,MAClB,+DACAC,CACF;EACA,GAAId;CACL,CAAA;AAEL;AAEA,EAAQ,cAAc"}

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

@@ -1,2 +1,2 @@
-"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/dev.cjs");let r=require("react");r=e.__toESM(r,1);let i=require("react/jsx-runtime");var a={none:`object-none object-left-top`,center:`object-none object-center`,contain:`object-contain`,cover:`object-cover`,default:``},o={circular:`rounded-full`,rounded:`rounded`,square:`rounded-none`},s=({fit:e=`default`,shape:s=`square`,shadow:c=!1,block:l=!1,bordered:u=!1,className:d,alt:f,ref:p,...m})=>{let h=f===void 0;return r.useEffect(()=>{h&&n.warnOnce(`Image:alt`,'Image: `alt` is missing. Describe the image, or pass alt="" when it is decorative.')},[h]),(0,i.jsx)(`img`,{ref:p,alt:f,className:t.cn(a[e],o[s],l?`block w-full`:`inline-block max-w-full`,e==="default"&&`h-auto`,c&&`shadow-4`,u&&`border border-border`,d),...m})};s.displayName=`Image`,exports.Image=s;
+"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/dev.cjs"),r=require("../../lib/classNames.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("react/jsx-runtime");var o={none:`object-none object-left-top`,center:`object-none object-center`,contain:`object-contain`,cover:`object-cover`,default:``},s={circular:`rounded-full`,rounded:`rounded`,square:`rounded-none`},c=({fit:e=`default`,shape:c=`square`,shadow:l=!1,block:u=!1,bordered:d=!1,className:f,alt:p,ref:m,...h})=>{let g=p===void 0;return i.useEffect(()=>{g&&n.warnOnce(`Image:alt`,'Image: `alt` is missing. Describe the image, or pass alt="" when it is decorative.')},[g]),(0,a.jsx)(`img`,{ref:m,alt:p,className:t.cn(r.imageClassNames.root,o[e],s[c],u?`block w-full`:`inline-block max-w-full`,e==="default"&&`h-auto`,l&&`shadow-4`,d&&`border border-border`,f),...h})};c.displayName=`Image`,exports.Image=c;
 //# sourceMappingURL=Image.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Image.cjs","names":["cn","require_runtime","require_cn","require_dev","react","react_jsx_runtime","fitMap","shapeMap","Image","rest","missingAlt","alt","fit","shape","block","shadow","bordered","className"],"sources":["../../../src/components/data-display/Image.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport { warnOnce } from '../../lib/dev';\nimport type { Shape } from '../../lib/types';\n\n/**\n * How an image fits its box (the `width`/`height` attributes, or a size set with `className`):\n *\n * - `'default'`: the image fills the box. Its height follows its width, so the aspect ratio is\n *   kept (the attributes only give the ratio before the image loads); a height set with\n *   `className` fixes the box, and the image then stretches to it.\n * - `'none'`: not scaled; the image's top-left corner stays in view and the rest is cropped.\n * - `'center'`: not scaled; the middle of the image stays in view and the edges are cropped.\n * - `'contain'`: scaled to fit inside the box, keeping its aspect ratio (the box may show empty\n *   bands).\n * - `'cover'`: scaled to fill the box, keeping its aspect ratio (the edges are cropped).\n */\nexport type ImageFit = 'none' | 'center' | 'contain' | 'cover' | 'default';\n/** Shape of the image corners (the shared {@link Shape} vocabulary). */\nexport type ImageShape = Shape;\n\n/** Properties for the Image component. */\nexport interface ImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {\n  /**\n   * Text alternative of the image. Describe what the image shows, or pass `alt=\"\"` when it is\n   * decorative (it then is hidden from assistive technology). Leaving it out logs a development\n   * warning; use {@link StrictImageProps} to require it at compile time (required in 1.0).\n   */\n  alt?: string;\n  /**\n   * How the image fits its box: `'default'` (fills it, keeping the aspect ratio through an\n   * automatic height), `'none'` (not scaled, top-left corner in view), `'center'` (not scaled,\n   * middle in view), `'contain'` or `'cover'`. See {@link ImageFit}.\n   * @default 'default'\n   */\n  fit?: ImageFit;\n  /** Shape of the image border radius.\n   * @default 'square'\n   */\n  shape?: ImageShape;\n  /** Whether to apply a shadow to the image.\n   * @default false\n   */\n  shadow?: boolean;\n  /**\n   * Whether the image is displayed as a block element filling the width of its parent. Otherwise\n   * it is inline and never wider than its parent. With the default `fit` the height follows the\n   * width (the aspect ratio is kept); with another `fit` the box keeps its `height`.\n   * @default false\n   */\n  block?: boolean;\n  /** Whether to show a border around the image.\n   * @default false\n   */\n  bordered?: boolean;\n  /** Ref to the `<img>` element. */\n  ref?: React.Ref<HTMLImageElement>;\n}\n\n/**\n * {@link ImageProps} with a required `alt`: the compile-time check that every image has a text\n * alternative (`alt=\"\"` for decorative images). `ImageProps.alt` becomes required in 1.0.\n *\n * @example\n * const Photo = (props: StrictImageProps) => <Image {...props} />;\n */\nexport interface StrictImageProps extends Omit<ImageProps, 'alt'> {\n  /** Text alternative of the image; `''` for a decorative image. */\n  alt: string;\n}\n\nconst fitMap: Record<ImageFit, string> = {\n  // wave-allow-physical: the anchor is the image's own corner; image pixels never mirror in RTL.\n  none: 'object-none object-left-top',\n  center: 'object-none object-center',\n  contain: 'object-contain',\n  cover: 'object-cover',\n  default: '',\n};\n\nconst shapeMap: Record<ImageShape, string> = {\n  circular: 'rounded-full',\n  rounded: 'rounded',\n  square: 'rounded-none',\n};\n\n/**\n * An `<img>` with Wave fit, shape, shadow and border options.\n *\n * Always pass `alt`: a description of the image, or `alt=\"\"` for a decorative image. Without it\n * screen readers may announce the file name; a development warning points this out.\n *\n * @example\n * <Image src=\"/team.jpg\" alt=\"The team at the 2026 offsite\" shape=\"rounded\" />\n */\nexport const Image = ({\n  fit = 'default',\n  shape = 'square',\n  shadow = false,\n  block = false,\n  bordered = false,\n  className,\n  alt,\n  ref,\n  ...rest\n}: ImageProps) => {\n  const missingAlt = alt === undefined;\n  React.useEffect(() => {\n    if (missingAlt) {\n      warnOnce(\n        'Image:alt',\n        'Image: `alt` is missing. Describe the image, or pass alt=\"\" when it is decorative.',\n      );\n    }\n  }, [missingAlt]);\n\n  return (\n    <img\n      ref={ref}\n      alt={alt}\n      className={cn(\n        fitMap[fit],\n        shapeMap[shape],\n        // Set here, not left to Preflight (C-NATIVE). The default fit fills the box, so an\n        // automatic height keeps the aspect ratio; the other fits fit the image into the box.\n        block ? 'block w-full' : 'inline-block max-w-full',\n        fit === 'default' && 'h-auto',\n        shadow && 'shadow-4',\n        bordered && 'border border-border',\n        className,\n      )}\n      {...rest}\n    />\n  );\n};\n\nImage.displayName = 'Image';\n"],"mappings":"6MAuEA,IAAMM,EAAmC,CAEvC,KAAM,8BACN,OAAQ,4BACR,QAAS,iBACT,MAAO,eACP,QAAS,EACX,EAEMC,EAAuC,CAC3C,SAAU,eACV,QAAS,UACT,OAAQ,cACV,EAWaC,GAAS,CACpB,MAAM,UACN,QAAQ,SACR,SAAS,GACT,QAAQ,GACR,WAAW,GACX,YACA,MACA,MACA,GAAGC,KACa,CAChB,IAAMC,EAAaC,IAAQ,IAAA,GAU3B,OATAP,EAAM,cAAgB,CAChBM,GACFP,EAAA,SACE,YACA,oFACF,CAEJ,EAAG,CAACO,CAAU,CAAC,GAGb,EAAAL,EAAA,IAAA,CAAC,MAAD,CACO,MACA,MACL,UAAWL,EAAAA,GACTM,EAAOM,GACPL,EAASM,GAGTC,EAAQ,eAAiB,0BACzBF,IAAQ,WAAa,SACrBG,GAAU,WACVC,GAAY,uBACZC,CACF,EACA,GAAIR,CACL,CAAA,CAEL,EAEA,EAAM,YAAc"}
+{"version":3,"file":"Image.cjs","names":["cn","imageClassNames","require_runtime","require_cn","require_dev","require_classNames","react","react_jsx_runtime","fitMap","shapeMap","Image","rest","missingAlt","alt","fit","shape","block","shadow","bordered","className"],"sources":["../../../src/components/data-display/Image.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport { imageClassNames } from '../../lib/classNames';\nimport { warnOnce } from '../../lib/dev';\nimport type { Shape } from '../../lib/types';\n\n/**\n * How an image fits its box (the `width`/`height` attributes, or a size set with `className`):\n *\n * - `'default'`: the image fills the box. Its height follows its width, so the aspect ratio is\n *   kept (the attributes only give the ratio before the image loads); a height set with\n *   `className` fixes the box, and the image then stretches to it.\n * - `'none'`: not scaled; the image's top-left corner stays in view and the rest is cropped.\n * - `'center'`: not scaled; the middle of the image stays in view and the edges are cropped.\n * - `'contain'`: scaled to fit inside the box, keeping its aspect ratio (the box may show empty\n *   bands).\n * - `'cover'`: scaled to fill the box, keeping its aspect ratio (the edges are cropped).\n */\nexport type ImageFit = 'none' | 'center' | 'contain' | 'cover' | 'default';\n/** Shape of the image corners (the shared {@link Shape} vocabulary). */\nexport type ImageShape = Shape;\n\n/** Properties for the Image component. */\nexport interface ImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {\n  /**\n   * Text alternative of the image. Describe what the image shows, or pass `alt=\"\"` when it is\n   * decorative (it then is hidden from assistive technology). Leaving it out logs a development\n   * warning; use {@link StrictImageProps} to require it at compile time (required in 1.0).\n   */\n  alt?: string;\n  /**\n   * How the image fits its box: `'default'` (fills it, keeping the aspect ratio through an\n   * automatic height), `'none'` (not scaled, top-left corner in view), `'center'` (not scaled,\n   * middle in view), `'contain'` or `'cover'`. See {@link ImageFit}.\n   * @default 'default'\n   */\n  fit?: ImageFit;\n  /** Shape of the image border radius.\n   * @default 'square'\n   */\n  shape?: ImageShape;\n  /** Whether to apply a shadow to the image.\n   * @default false\n   */\n  shadow?: boolean;\n  /**\n   * Whether the image is displayed as a block element filling the width of its parent. Otherwise\n   * it is inline and never wider than its parent. With the default `fit` the height follows the\n   * width (the aspect ratio is kept); with another `fit` the box keeps its `height`.\n   * @default false\n   */\n  block?: boolean;\n  /** Whether to show a border around the image.\n   * @default false\n   */\n  bordered?: boolean;\n  /** Ref to the `<img>` element. */\n  ref?: React.Ref<HTMLImageElement>;\n}\n\n/**\n * {@link ImageProps} with a required `alt`: the compile-time check that every image has a text\n * alternative (`alt=\"\"` for decorative images). `ImageProps.alt` becomes required in 1.0.\n *\n * @example\n * const Photo = (props: StrictImageProps) => <Image {...props} />;\n */\nexport interface StrictImageProps extends Omit<ImageProps, 'alt'> {\n  /** Text alternative of the image; `''` for a decorative image. */\n  alt: string;\n}\n\nconst fitMap: Record<ImageFit, string> = {\n  // wave-allow-physical: the anchor is the image's own corner; image pixels never mirror in RTL.\n  none: 'object-none object-left-top',\n  center: 'object-none object-center',\n  contain: 'object-contain',\n  cover: 'object-cover',\n  default: '',\n};\n\nconst shapeMap: Record<ImageShape, string> = {\n  circular: 'rounded-full',\n  rounded: 'rounded',\n  square: 'rounded-none',\n};\n\n/**\n * An `<img>` with Wave fit, shape, shadow and border options.\n *\n * Always pass `alt`: a description of the image, or `alt=\"\"` for a decorative image. Without it\n * screen readers may announce the file name; a development warning points this out.\n *\n * @example\n * <Image src=\"/team.jpg\" alt=\"The team at the 2026 offsite\" shape=\"rounded\" />\n */\nexport const Image = ({\n  fit = 'default',\n  shape = 'square',\n  shadow = false,\n  block = false,\n  bordered = false,\n  className,\n  alt,\n  ref,\n  ...rest\n}: ImageProps) => {\n  const missingAlt = alt === undefined;\n  React.useEffect(() => {\n    if (missingAlt) {\n      warnOnce(\n        'Image:alt',\n        'Image: `alt` is missing. Describe the image, or pass alt=\"\" when it is decorative.',\n      );\n    }\n  }, [missingAlt]);\n\n  return (\n    <img\n      ref={ref}\n      alt={alt}\n      className={cn(\n        imageClassNames.root,\n        fitMap[fit],\n        shapeMap[shape],\n        // Set here, not left to Preflight (C-NATIVE). The default fit fills the box, so an\n        // automatic height keeps the aspect ratio; the other fits fit the image into the box.\n        block ? 'block w-full' : 'inline-block max-w-full',\n        fit === 'default' && 'h-auto',\n        shadow && 'shadow-4',\n        bordered && 'border border-border',\n        className,\n      )}\n      {...rest}\n    />\n  );\n};\n\nImage.displayName = 'Image';\n"],"mappings":"mPAwEA,IAAMQ,EAAmC,CAEvC,KAAM,8BACN,OAAQ,4BACR,QAAS,iBACT,MAAO,eACP,QAAS,EACX,EAEMC,EAAuC,CAC3C,SAAU,eACV,QAAS,UACT,OAAQ,cACV,EAWaC,GAAS,CACpB,MAAM,UACN,QAAQ,SACR,SAAS,GACT,QAAQ,GACR,WAAW,GACX,YACA,MACA,MACA,GAAGC,KACa,CAChB,IAAMC,EAAaC,IAAQ,IAAA,GAU3B,OATAP,EAAM,cAAgB,CAChBM,GACFR,EAAA,SACE,YACA,oFACF,CAEJ,EAAG,CAACQ,CAAU,CAAC,GAGb,EAAAL,EAAA,IAAA,CAAC,MAAD,CACO,MACA,MACL,UAAWP,EAAAA,GACTC,EAAAA,gBAAgB,KAChBO,EAAOM,GACPL,EAASM,GAGTC,EAAQ,eAAiB,0BACzBF,IAAQ,WAAa,SACrBG,GAAU,WACVC,GAAY,uBACZC,CACF,EACA,GAAIR,CACL,CAAA,CAEL,EAEA,EAAM,YAAc"}

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

@@ -1,32 +1,33 @@
 "use client";
 import { cn as e } from "../../lib/cn.mjs";
 import { warnOnce as t } from "../../lib/dev.mjs";
-import * as n from "react";
-import { jsx as r } from "react/jsx-runtime";
+import { imageClassNames as n } from "../../lib/classNames.mjs";
+import * as r from "react";
+import { jsx as i } from "react/jsx-runtime";
 //#region src/components/data-display/Image.tsx
-var i = {
+var a = {
 	none: "object-none object-left-top",
 	center: "object-none object-center",
 	contain: "object-contain",
 	cover: "object-cover",
 	default: ""
-}, a = {
+}, o = {
 	circular: "rounded-full",
 	rounded: "rounded",
 	square: "rounded-none"
-}, o = ({ fit: o = "default", shape: s = "square", shadow: c = !1, block: l = !1, bordered: u = !1, className: d, alt: f, ref: p, ...m }) => {
-	let h = f === void 0;
-	return n.useEffect(() => {
-		h && t("Image:alt", "Image: `alt` is missing. Describe the image, or pass alt=\"\" when it is decorative.");
-	}, [h]), /* @__PURE__ */ r("img", {
-		ref: p,
-		alt: f,
-		className: e(i[o], a[s], l ? "block w-full" : "inline-block max-w-full", o === "default" && "h-auto", c && "shadow-4", u && "border border-border", d),
-		...m
+}, s = ({ fit: s = "default", shape: c = "square", shadow: l = !1, block: u = !1, bordered: d = !1, className: f, alt: p, ref: m, ...h }) => {
+	let g = p === void 0;
+	return r.useEffect(() => {
+		g && t("Image:alt", "Image: `alt` is missing. Describe the image, or pass alt=\"\" when it is decorative.");
+	}, [g]), /* @__PURE__ */ i("img", {
+		ref: m,
+		alt: p,
+		className: e(n.root, a[s], o[c], u ? "block w-full" : "inline-block max-w-full", s === "default" && "h-auto", l && "shadow-4", d && "border border-border", f),
+		...h
 	});
 };
-o.displayName = "Image";
+s.displayName = "Image";
 //#endregion
-export { o as Image };
+export { s as Image };
 
 //# sourceMappingURL=Image.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Image.mjs","names":["React","fitMap","shapeMap","Image","rest","missingAlt","alt","warnOnce","cn","fit","shape","block","shadow","bordered","className"],"sources":["../../../src/components/data-display/Image.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport { warnOnce } from '../../lib/dev';\nimport type { Shape } from '../../lib/types';\n\n/**\n * How an image fits its box (the `width`/`height` attributes, or a size set with `className`):\n *\n * - `'default'`: the image fills the box. Its height follows its width, so the aspect ratio is\n *   kept (the attributes only give the ratio before the image loads); a height set with\n *   `className` fixes the box, and the image then stretches to it.\n * - `'none'`: not scaled; the image's top-left corner stays in view and the rest is cropped.\n * - `'center'`: not scaled; the middle of the image stays in view and the edges are cropped.\n * - `'contain'`: scaled to fit inside the box, keeping its aspect ratio (the box may show empty\n *   bands).\n * - `'cover'`: scaled to fill the box, keeping its aspect ratio (the edges are cropped).\n */\nexport type ImageFit = 'none' | 'center' | 'contain' | 'cover' | 'default';\n/** Shape of the image corners (the shared {@link Shape} vocabulary). */\nexport type ImageShape = Shape;\n\n/** Properties for the Image component. */\nexport interface ImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {\n  /**\n   * Text alternative of the image. Describe what the image shows, or pass `alt=\"\"` when it is\n   * decorative (it then is hidden from assistive technology). Leaving it out logs a development\n   * warning; use {@link StrictImageProps} to require it at compile time (required in 1.0).\n   */\n  alt?: string;\n  /**\n   * How the image fits its box: `'default'` (fills it, keeping the aspect ratio through an\n   * automatic height), `'none'` (not scaled, top-left corner in view), `'center'` (not scaled,\n   * middle in view), `'contain'` or `'cover'`. See {@link ImageFit}.\n   * @default 'default'\n   */\n  fit?: ImageFit;\n  /** Shape of the image border radius.\n   * @default 'square'\n   */\n  shape?: ImageShape;\n  /** Whether to apply a shadow to the image.\n   * @default false\n   */\n  shadow?: boolean;\n  /**\n   * Whether the image is displayed as a block element filling the width of its parent. Otherwise\n   * it is inline and never wider than its parent. With the default `fit` the height follows the\n   * width (the aspect ratio is kept); with another `fit` the box keeps its `height`.\n   * @default false\n   */\n  block?: boolean;\n  /** Whether to show a border around the image.\n   * @default false\n   */\n  bordered?: boolean;\n  /** Ref to the `<img>` element. */\n  ref?: React.Ref<HTMLImageElement>;\n}\n\n/**\n * {@link ImageProps} with a required `alt`: the compile-time check that every image has a text\n * alternative (`alt=\"\"` for decorative images). `ImageProps.alt` becomes required in 1.0.\n *\n * @example\n * const Photo = (props: StrictImageProps) => <Image {...props} />;\n */\nexport interface StrictImageProps extends Omit<ImageProps, 'alt'> {\n  /** Text alternative of the image; `''` for a decorative image. */\n  alt: string;\n}\n\nconst fitMap: Record<ImageFit, string> = {\n  // wave-allow-physical: the anchor is the image's own corner; image pixels never mirror in RTL.\n  none: 'object-none object-left-top',\n  center: 'object-none object-center',\n  contain: 'object-contain',\n  cover: 'object-cover',\n  default: '',\n};\n\nconst shapeMap: Record<ImageShape, string> = {\n  circular: 'rounded-full',\n  rounded: 'rounded',\n  square: 'rounded-none',\n};\n\n/**\n * An `<img>` with Wave fit, shape, shadow and border options.\n *\n * Always pass `alt`: a description of the image, or `alt=\"\"` for a decorative image. Without it\n * screen readers may announce the file name; a development warning points this out.\n *\n * @example\n * <Image src=\"/team.jpg\" alt=\"The team at the 2026 offsite\" shape=\"rounded\" />\n */\nexport const Image = ({\n  fit = 'default',\n  shape = 'square',\n  shadow = false,\n  block = false,\n  bordered = false,\n  className,\n  alt,\n  ref,\n  ...rest\n}: ImageProps) => {\n  const missingAlt = alt === undefined;\n  React.useEffect(() => {\n    if (missingAlt) {\n      warnOnce(\n        'Image:alt',\n        'Image: `alt` is missing. Describe the image, or pass alt=\"\" when it is decorative.',\n      );\n    }\n  }, [missingAlt]);\n\n  return (\n    <img\n      ref={ref}\n      alt={alt}\n      className={cn(\n        fitMap[fit],\n        shapeMap[shape],\n        // Set here, not left to Preflight (C-NATIVE). The default fit fills the box, so an\n        // automatic height keeps the aspect ratio; the other fits fit the image into the box.\n        block ? 'block w-full' : 'inline-block max-w-full',\n        fit === 'default' && 'h-auto',\n        shadow && 'shadow-4',\n        bordered && 'border border-border',\n        className,\n      )}\n      {...rest}\n    />\n  );\n};\n\nImage.displayName = 'Image';\n"],"mappings":";;;;;;AAuEA,IAAMC,IAAmC;CAEvC,MAAM;CACN,QAAQ;CACR,SAAS;CACT,OAAO;CACP,SAAS;AACX,GAEMC,IAAuC;CAC3C,UAAU;CACV,SAAS;CACT,QAAQ;AACV,GAWaC,KAAS,EACpB,SAAM,WACN,WAAQ,UACR,YAAS,IACT,WAAQ,IACR,cAAW,IACX,cACA,QACA,QACA,GAAGC,QACa;CAChB,IAAMC,IAAaC,MAAQ,KAAA;CAU3B,OATAN,EAAM,gBAAgB;EACpB,AAAIK,KACFE,EACE,aACA,sFACF;CAEJ,GAAG,CAACF,CAAU,CAAC,GAGb,kBAAC,OAAD;EACO;EACA;EACL,WAAWG,EACTP,EAAOQ,IACPP,EAASQ,IAGTC,IAAQ,iBAAiB,2BACzBF,MAAQ,aAAa,UACrBG,KAAU,YACVC,KAAY,wBACZC,CACF;EACA,GAAIV;CACL,CAAA;AAEL;AAEA,EAAM,cAAc"}
+{"version":3,"file":"Image.mjs","names":["React","fitMap","shapeMap","Image","rest","missingAlt","alt","warnOnce","cn","imageClassNames","fit","shape","block","shadow","bordered","className"],"sources":["../../../src/components/data-display/Image.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport { imageClassNames } from '../../lib/classNames';\nimport { warnOnce } from '../../lib/dev';\nimport type { Shape } from '../../lib/types';\n\n/**\n * How an image fits its box (the `width`/`height` attributes, or a size set with `className`):\n *\n * - `'default'`: the image fills the box. Its height follows its width, so the aspect ratio is\n *   kept (the attributes only give the ratio before the image loads); a height set with\n *   `className` fixes the box, and the image then stretches to it.\n * - `'none'`: not scaled; the image's top-left corner stays in view and the rest is cropped.\n * - `'center'`: not scaled; the middle of the image stays in view and the edges are cropped.\n * - `'contain'`: scaled to fit inside the box, keeping its aspect ratio (the box may show empty\n *   bands).\n * - `'cover'`: scaled to fill the box, keeping its aspect ratio (the edges are cropped).\n */\nexport type ImageFit = 'none' | 'center' | 'contain' | 'cover' | 'default';\n/** Shape of the image corners (the shared {@link Shape} vocabulary). */\nexport type ImageShape = Shape;\n\n/** Properties for the Image component. */\nexport interface ImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {\n  /**\n   * Text alternative of the image. Describe what the image shows, or pass `alt=\"\"` when it is\n   * decorative (it then is hidden from assistive technology). Leaving it out logs a development\n   * warning; use {@link StrictImageProps} to require it at compile time (required in 1.0).\n   */\n  alt?: string;\n  /**\n   * How the image fits its box: `'default'` (fills it, keeping the aspect ratio through an\n   * automatic height), `'none'` (not scaled, top-left corner in view), `'center'` (not scaled,\n   * middle in view), `'contain'` or `'cover'`. See {@link ImageFit}.\n   * @default 'default'\n   */\n  fit?: ImageFit;\n  /** Shape of the image border radius.\n   * @default 'square'\n   */\n  shape?: ImageShape;\n  /** Whether to apply a shadow to the image.\n   * @default false\n   */\n  shadow?: boolean;\n  /**\n   * Whether the image is displayed as a block element filling the width of its parent. Otherwise\n   * it is inline and never wider than its parent. With the default `fit` the height follows the\n   * width (the aspect ratio is kept); with another `fit` the box keeps its `height`.\n   * @default false\n   */\n  block?: boolean;\n  /** Whether to show a border around the image.\n   * @default false\n   */\n  bordered?: boolean;\n  /** Ref to the `<img>` element. */\n  ref?: React.Ref<HTMLImageElement>;\n}\n\n/**\n * {@link ImageProps} with a required `alt`: the compile-time check that every image has a text\n * alternative (`alt=\"\"` for decorative images). `ImageProps.alt` becomes required in 1.0.\n *\n * @example\n * const Photo = (props: StrictImageProps) => <Image {...props} />;\n */\nexport interface StrictImageProps extends Omit<ImageProps, 'alt'> {\n  /** Text alternative of the image; `''` for a decorative image. */\n  alt: string;\n}\n\nconst fitMap: Record<ImageFit, string> = {\n  // wave-allow-physical: the anchor is the image's own corner; image pixels never mirror in RTL.\n  none: 'object-none object-left-top',\n  center: 'object-none object-center',\n  contain: 'object-contain',\n  cover: 'object-cover',\n  default: '',\n};\n\nconst shapeMap: Record<ImageShape, string> = {\n  circular: 'rounded-full',\n  rounded: 'rounded',\n  square: 'rounded-none',\n};\n\n/**\n * An `<img>` with Wave fit, shape, shadow and border options.\n *\n * Always pass `alt`: a description of the image, or `alt=\"\"` for a decorative image. Without it\n * screen readers may announce the file name; a development warning points this out.\n *\n * @example\n * <Image src=\"/team.jpg\" alt=\"The team at the 2026 offsite\" shape=\"rounded\" />\n */\nexport const Image = ({\n  fit = 'default',\n  shape = 'square',\n  shadow = false,\n  block = false,\n  bordered = false,\n  className,\n  alt,\n  ref,\n  ...rest\n}: ImageProps) => {\n  const missingAlt = alt === undefined;\n  React.useEffect(() => {\n    if (missingAlt) {\n      warnOnce(\n        'Image:alt',\n        'Image: `alt` is missing. Describe the image, or pass alt=\"\" when it is decorative.',\n      );\n    }\n  }, [missingAlt]);\n\n  return (\n    <img\n      ref={ref}\n      alt={alt}\n      className={cn(\n        imageClassNames.root,\n        fitMap[fit],\n        shapeMap[shape],\n        // Set here, not left to Preflight (C-NATIVE). The default fit fills the box, so an\n        // automatic height keeps the aspect ratio; the other fits fit the image into the box.\n        block ? 'block w-full' : 'inline-block max-w-full',\n        fit === 'default' && 'h-auto',\n        shadow && 'shadow-4',\n        bordered && 'border border-border',\n        className,\n      )}\n      {...rest}\n    />\n  );\n};\n\nImage.displayName = 'Image';\n"],"mappings":";;;;;;;AAwEA,IAAMC,IAAmC;CAEvC,MAAM;CACN,QAAQ;CACR,SAAS;CACT,OAAO;CACP,SAAS;AACX,GAEMC,IAAuC;CAC3C,UAAU;CACV,SAAS;CACT,QAAQ;AACV,GAWaC,KAAS,EACpB,SAAM,WACN,WAAQ,UACR,YAAS,IACT,WAAQ,IACR,cAAW,IACX,cACA,QACA,QACA,GAAGC,QACa;CAChB,IAAMC,IAAaC,MAAQ,KAAA;CAU3B,OATAN,EAAM,gBAAgB;EACpB,AAAIK,KACFE,EACE,aACA,sFACF;CAEJ,GAAG,CAACF,CAAU,CAAC,GAGb,kBAAC,OAAD;EACO;EACA;EACL,WAAWG,EACTC,EAAgB,MAChBR,EAAOS,IACPR,EAASS,IAGTC,IAAQ,iBAAiB,2BACzBF,MAAQ,aAAa,UACrBG,KAAU,YACVC,KAAY,wBACZC,CACF;EACA,GAAIX;CACL,CAAA;AAEL;AAEA,EAAM,cAAc"}

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

@@ -0,0 +1,2 @@
+"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/composeEventHandlers.cjs"),r=require("../../lib/classNames.cjs"),i=require("../../hooks/useEventCallback.cjs"),a=require("../../hooks/useId.cjs"),o=require("../../lib/focus.cjs"),s=require("../../hooks/useMergedRefs.cjs"),ee=require("../../lib/aria.cjs"),te=require("../../hooks/usePresence.cjs"),ne=require("../../hooks/useDismiss.cjs"),c=require("../portal/Portal.cjs"),l=require("../../lib/styles.cjs"),u=require("../../lib/icons.cjs"),d=require("../../hooks/usePopupPosition.cjs"),f=require("../../hooks/useRestoreFocus.cjs"),p=require("../../hooks/useHoverIntent.cjs"),m=require("../overlays/Popover.shared.cjs");let h=require("react");h=e.__toESM(h,1);let g=require("react/jsx-runtime");var _={small:{size:12,margin:`-my-1`},medium:{size:16,margin:`-my-0.5`},large:{size:20,margin:`-my-px`}},v=250,y=h.createContext(null);y.displayName=`InfoNoteClassContext`;var b=({info:e,size:b,openOnHover:x=!0,id:re,type:ie=`button`,"aria-label":ae,"aria-labelledby":S,"aria-describedby":C,className:w,disabled:T,onClick:oe,onFocus:se,onBlur:ce,onKeyDown:le,onPointerDown:ue,onMouseDown:de,onPointerEnter:fe,onPointerMove:pe,onPointerLeave:me,ref:he,...E})=>{let D=b===`small`||b===`large`?b:`medium`,O=a.useId(`info-button`),k=re||O,A=h.useContext(y),j=A?.buttonId===k?A.className:void 0,M=ae||`Information`,N=a.useId(`info-note`),P=a.useId(`info`),[F,I]=h.useState(null),L=F!==null,R=h.useRef(null),z=h.useRef(null),B=h.useRef(null),[ge,_e]=h.useState(null),[V,H]=h.useState(null),U=h.useRef(F);h.useLayoutEffect(()=>{U.current=F});let W=h.useRef(!1),G=h.useRef(!1),K=h.useRef(void 0),q=h.useRef(!1),{isMounted:J,ref:ve,presenceProps:ye}=te.usePresence(L),{setReference:be,setFloating:xe,floatingProps:Se,arrowStyles:Ce,side:we}=d.usePopupPosition({open:L,side:`top`,align:`center`,offset:8,arrowRef:B}),{layerId:Y}=ne.useDismiss({open:L,onDismiss:e=>{e!==`focus-outside`&&(W.current=!0),q.current=!1,Q(),I(null)},refs:[R,z],anchorRef:R,focusOutside:!0});f.useRestoreFocus({enabled:L,container:V,triggerRef:R,onlyIfFocusInside:!0,isHoverClose:()=>q.current});let{triggerHandlers:X,surfaceHandlers:Z,cancel:Q}=p.useHoverIntent({enabled:x&&!T,open:L,openDelay:v,closeDelay:v,trigger:ge,surface:V,onOpen:()=>{q.current=!1,I(e=>e??`hover`)},onClose:()=>{q.current=!0,I(e=>e===`hover`?null:e)},canClose:()=>U.current===`hover`&&!m.isFocusInSurfaceTree(V,Y)});h.useEffect(()=>()=>clearTimeout(K.current),[]),h.useEffect(()=>{if(!V)return;let e=e=>{let t=e.relatedTarget;!t||V.contains(t)||R.current?.contains(t)||(W.current=!1)};return V.addEventListener(`focusout`,e),()=>V.removeEventListener(`focusout`,e)},[V]);let Te=i.useEventCallback(()=>{Q(),q.current=!1;let e=F===`click`;e&&(W.current=!0),I(e?null:`click`)}),Ee=i.useEventCallback(()=>{!x||G.current||W.current&&!L||(q.current=!1,Q(),I(e=>e===`click`?e:`focus`))}),De=i.useEventCallback(e=>{let t=e.currentTarget,n=e.relatedTarget;n&&V?.contains(n)||(n||t.ownerDocument.activeElement!==t)&&(W.current=!1)}),$=i.useEventCallback(()=>{G.current=!0,clearTimeout(K.current),K.current=setTimeout(()=>{K.current=void 0,G.current=!1},0)}),Oe=e=>{if(e.key!==`Tab`||e.shiftKey||!L||!V)return;let t=o.getFirstTabbable(V);t&&(e.preventDefault(),t.focus())},ke=m.usePopoverTabOrder({enabled:L,surface:V,anchorRef:R,getPreviousStop:()=>R.current}),Ae=s.useMergedRefs(he,R,_e,be),je=s.useMergedRefs(z,H,xe,ve);return(0,g.jsxs)(g.Fragment,{children:[(0,g.jsx)(`button`,{type:ie,id:k,"data-size":D,...E,ref:Ae,disabled:T,"aria-label":M,"aria-labelledby":S,"aria-describedby":ee.joinIds(C,P),"aria-expanded":L,"aria-controls":L?N:void 0,className:t.cn(r.infoButtonClassNames.root,`inline-flex size-6 shrink-0 items-center justify-center rounded-full border-0 bg-transparent p-0 text-muted-foreground`,_[D].margin,`not-disabled:not-aria-disabled:hover:text-foreground`,l.focusRing,w),onClick:n.composeEventHandlers(oe,Te),onFocus:n.composeEventHandlers(se,Ee),onKeyDown:n.composeEventHandlers(le,Oe),onPointerEnter:n.composeEventHandlers(fe,X.onPointerEnter),onPointerMove:n.composeEventHandlers(pe,X.onPointerMove),onPointerLeave:n.composeEventHandlers(me,X.onPointerLeave),onBlur:n.composeEventHandlers(ce,De,{checkDefaultPrevented:!1}),onPointerDown:n.composeEventHandlers(ue,$,{checkDefaultPrevented:!1}),onMouseDown:n.composeEventHandlers(de,$,{checkDefaultPrevented:!1}),children:(0,g.jsx)(u.InfoIcon,{size:_[D].size})}),(0,g.jsx)(`span`,{id:J?void 0:P,hidden:!0,children:J?null:e}),J&&(0,g.jsx)(c.Portal,{layerId:Y,children:(0,g.jsxs)(`div`,{ref:je,id:N,role:`note`,"aria-labelledby":S||k,"data-wave-infolabel-surface":``,"data-state":L?`open`:`closed`,...ye,...Se,onKeyDown:ke,onPointerEnter:Z.onPointerEnter,onPointerLeave:Z.onPointerLeave,className:t.cn(r.infoButtonClassNames.info,j,`w-max max-w-[min(20rem,calc(100vw-1rem))] rounded-md border border-border bg-background px-3 py-2 text-caption-1 text-foreground shadow-16`),children:[(0,g.jsx)(m.PopoverBeak,{ref:B,side:we,style:Ce,"data-wave-popover-arrow":``,className:r.infoButtonClassNames.beak}),(0,g.jsx)(`div`,{id:P,children:e})]})})]})};b.displayName=`InfoButton`,exports.InfoButton=b,exports.InfoNoteClassContext=y;
+//# sourceMappingURL=InfoButton.cjs.map