@namroodinc/liquid-editorial 0.0.0-stage → 0.1.1

package/dist/components/AssetGrid/index.js

@@ -0,0 +1,137 @@
+import { t as e } from "../../chunks/Icon-CGY1FNXT.js";
+import { Grid as t } from "../Grid/index.js";
+import { Skeleton as n } from "../Skeleton/index.js";
+import { forwardRef as r, useState as i } from "react";
+import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/components/AssetGrid/index.tsx
+function c(...e) {
+	return e.filter(Boolean).join(" ");
+}
+var l = r(function({ isLoading: e = !1, loadingCount: n = 8, className: r, children: i, ...a }, s) {
+	return /* @__PURE__ */ o(t, {
+		ref: s,
+		columns: "auto",
+		gap: "md",
+		minColumnWidth: "var(--asset-tile-min-width)",
+		className: c("ds-asset-grid", r),
+		"aria-busy": e || void 0,
+		...a,
+		children: e ? Array.from({ length: n }, (e, t) => /* @__PURE__ */ o(u, { index: t }, t)) : i
+	});
+});
+function u({ index: e = 0 }) {
+	let t = { animationDelay: `calc(var(--skeleton-stagger) * ${e})` };
+	return /* @__PURE__ */ s("div", {
+		className: "ds-asset-tile",
+		"data-loading": "true",
+		"aria-hidden": "true",
+		children: [/* @__PURE__ */ o(n, {
+			shape: "block",
+			className: "ds-asset-tile__thumb",
+			style: t
+		}), /* @__PURE__ */ s("div", {
+			className: "ds-asset-tile__text",
+			children: [/* @__PURE__ */ o(n, {
+				shape: "text",
+				width: "80%",
+				style: t
+			}), /* @__PURE__ */ o(n, {
+				shape: "text",
+				width: "45%",
+				style: t
+			})]
+		})]
+	});
+}
+var d = r(function({ name: t, src: r, icon: l = "image", meta: u, isSelected: d = !1, isPending: f = !1, onSelect: p, actions: m, className: h, ...g }, _) {
+	let [v, y] = i(!1), [b, x] = i(!1), S = !!r && !v;
+	return /* @__PURE__ */ s("div", {
+		ref: _,
+		className: c("ds-asset-tile", h),
+		"data-selected": d || void 0,
+		"data-pending": f || void 0,
+		...g,
+		children: [/* @__PURE__ */ s("div", {
+			className: "ds-asset-tile__thumb",
+			children: [
+				S ? /* @__PURE__ */ s(a, { children: [!b && /* @__PURE__ */ o(n, {
+					shape: "block",
+					className: "ds-asset-tile__thumb-skeleton"
+				}), /* @__PURE__ */ o("img", {
+					src: r,
+					alt: "",
+					loading: "lazy",
+					"data-loaded": b || void 0,
+					onLoad: () => x(!0),
+					onError: () => y(!0)
+				})] }) : /* @__PURE__ */ o("span", {
+					className: "ds-asset-tile__placeholder",
+					children: /* @__PURE__ */ o(e, {
+						name: v ? "alert-triangle" : l,
+						size: 24
+					})
+				}),
+				f && /* @__PURE__ */ s("span", {
+					className: "ds-asset-tile__pending",
+					role: "status",
+					children: [/* @__PURE__ */ o(e, {
+						name: "spinner",
+						size: 20,
+						className: "ds-asset-tile__spinner"
+					}), /* @__PURE__ */ o("span", {
+						className: "ds-asset-tile__pending-label",
+						children: "Uploading"
+					})]
+				}),
+				m && /* @__PURE__ */ o("div", {
+					className: "ds-asset-tile__actions",
+					children: m
+				}),
+				p && /* @__PURE__ */ o("button", {
+					type: "button",
+					className: "ds-asset-tile__hit",
+					"aria-pressed": d,
+					disabled: f,
+					onClick: p,
+					children: /* @__PURE__ */ o("span", {
+						className: "ds-asset-tile__hit-label",
+						children: t
+					})
+				})
+			]
+		}), /* @__PURE__ */ s("div", {
+			className: "ds-asset-tile__text",
+			children: [/* @__PURE__ */ o("span", {
+				className: "ds-asset-tile__name",
+				children: t
+			}), u && /* @__PURE__ */ o("span", {
+				className: "ds-asset-tile__meta",
+				children: u
+			})]
+		})]
+	});
+});
+function f({ title: t, description: n, action: r }) {
+	return /* @__PURE__ */ s("div", {
+		className: "ds-asset-empty",
+		children: [
+			/* @__PURE__ */ o(e, {
+				name: "image",
+				size: 24
+			}),
+			/* @__PURE__ */ o("span", {
+				className: "ds-asset-empty__title",
+				children: t
+			}),
+			n && /* @__PURE__ */ o("span", {
+				className: "ds-asset-empty__description",
+				children: n
+			}),
+			r
+		]
+	});
+}
+//#endregion
+export { l as AssetGrid, f as AssetGridEmpty, d as AssetTile, u as AssetTileSkeleton };
+
+//# sourceMappingURL=index.js.map

package/dist/components/AssetGrid/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["_Fragment","Icon","cx","parts","AssetGrid","forwardRef","rest","Grid","className","isLoading","loadingCount","AssetTileSkeleton","i","children","delay","index","Skeleton","AssetTile","hasFailed","setHasFailed","useState","isLoaded","setIsLoaded","showImage","src","isSelected","isPending","Fragment","icon","actions","onSelect","name","meta","AssetGridEmpty","title","description","action"],"sources":["../../../src/components/AssetGrid/index.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useState,\n  type HTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport { Grid } from \"../Grid\";\nimport { Icon } from \"../Icon\";\nimport type { IconName } from \"../Icon/icons\";\nimport { Skeleton } from \"../Skeleton\";\nimport \"./style.css\";\n\nfunction cx(...parts: (string | undefined | false)[]) {\n  return parts.filter(Boolean).join(\" \");\n}\n\nexport interface AssetGridProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Renders placeholder tiles instead of children. The grid keeps its\n   * geometry, so nothing moves when the real assets arrive.\n   */\n  isLoading?: boolean;\n  /** How many placeholder tiles to show while loading. */\n  loadingCount?: number;\n  children?: ReactNode;\n}\n\n/**\n * The media library surface: an auto-filling grid of asset tiles. Sits inside\n * a `TableFrame` when it is the page's collection, bare inside a drawer.\n */\nexport const AssetGrid = forwardRef<HTMLDivElement, AssetGridProps>(function AssetGrid(\n  { isLoading = false, loadingCount = 8, className, children, ...rest },\n  ref,\n) {\n  return (\n    <Grid\n      ref={ref}\n      columns=\"auto\"\n      gap=\"md\"\n      minColumnWidth=\"var(--asset-tile-min-width)\"\n      className={cx(\"ds-asset-grid\", className)}\n      aria-busy={isLoading || undefined}\n      {...rest}\n    >\n      {isLoading\n        ? Array.from({ length: loadingCount }, (_, i) => <AssetTileSkeleton key={i} index={i} />)\n        : children}\n    </Grid>\n  );\n});\n\nexport interface AssetTileSkeletonProps {\n  /** Position in the grid — drives the stagger, nothing else. */\n  index?: number;\n}\n\n/** One loading tile: thumbnail block, name line, meta line. */\nexport function AssetTileSkeleton({ index = 0 }: AssetTileSkeletonProps) {\n  const delay = { animationDelay: `calc(var(--skeleton-stagger) * ${index})` };\n  return (\n    <div className=\"ds-asset-tile\" data-loading=\"true\" aria-hidden=\"true\">\n      <Skeleton shape=\"block\" className=\"ds-asset-tile__thumb\" style={delay} />\n      <div className=\"ds-asset-tile__text\">\n        <Skeleton shape=\"text\" width=\"80%\" style={delay} />\n        <Skeleton shape=\"text\" width=\"45%\" style={delay} />\n      </div>\n    </div>\n  );\n}\n\nexport interface AssetTileProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onSelect\" | \"title\"> {\n  /** File name, shown in full — asset names are how people find things again. */\n  name: string;\n  /** Thumbnail source. Omit for a non-image asset and pass an `icon` instead. */\n  src?: string;\n  /** Glyph shown when there is no thumbnail, or while one fails to load. */\n  icon?: IconName;\n  /** Second line: dimensions, size, date — whatever the library sorts by. */\n  meta?: ReactNode;\n  /** Paints the soft fill and the solid rail. Never changes the tile's size. */\n  isSelected?: boolean;\n  /** The asset is still uploading or processing: dimmed, with a spinner. */\n  isPending?: boolean;\n  /** Makes the whole tile a selection target. */\n  onSelect?: () => void;\n  /** Badges or a menu, pinned to the top of the thumbnail. */\n  actions?: ReactNode;\n}\n\n/**\n * One asset in the library. Selection paints a fill and a rail exactly like a\n * table row, so a grid and a list read as the same collection in two shapes.\n */\nexport const AssetTile = forwardRef<HTMLDivElement, AssetTileProps>(function AssetTile(\n  {\n    name,\n    src,\n    icon = \"image\",\n    meta,\n    isSelected = false,\n    isPending = false,\n    onSelect,\n    actions,\n    className,\n    ...rest\n  },\n  ref,\n) {\n  const [hasFailed, setHasFailed] = useState(false);\n  const [isLoaded, setIsLoaded] = useState(false);\n  const showImage = Boolean(src) && !hasFailed;\n\n  return (\n    <div\n      ref={ref}\n      className={cx(\"ds-asset-tile\", className)}\n      data-selected={isSelected || undefined}\n      data-pending={isPending || undefined}\n      {...rest}\n    >\n      <div className=\"ds-asset-tile__thumb\">\n        {showImage ? (\n          <>\n            {!isLoaded && <Skeleton shape=\"block\" className=\"ds-asset-tile__thumb-skeleton\" />}\n            <img\n              src={src}\n              alt=\"\"\n              loading=\"lazy\"\n              data-loaded={isLoaded || undefined}\n              onLoad={() => setIsLoaded(true)}\n              onError={() => setHasFailed(true)}\n            />\n          </>\n        ) : (\n          <span className=\"ds-asset-tile__placeholder\">\n            <Icon name={hasFailed ? \"alert-triangle\" : icon} size={24} />\n          </span>\n        )}\n\n        {isPending && (\n          <span className=\"ds-asset-tile__pending\" role=\"status\">\n            <Icon name=\"spinner\" size={20} className=\"ds-asset-tile__spinner\" />\n            <span className=\"ds-asset-tile__pending-label\">Uploading</span>\n          </span>\n        )}\n\n        {actions && <div className=\"ds-asset-tile__actions\">{actions}</div>}\n\n        {onSelect && (\n          <button\n            type=\"button\"\n            className=\"ds-asset-tile__hit\"\n            aria-pressed={isSelected}\n            disabled={isPending}\n            onClick={onSelect}\n          >\n            <span className=\"ds-asset-tile__hit-label\">{name}</span>\n          </button>\n        )}\n      </div>\n\n      <div className=\"ds-asset-tile__text\">\n        <span className=\"ds-asset-tile__name\">{name}</span>\n        {meta && <span className=\"ds-asset-tile__meta\">{meta}</span>}\n      </div>\n    </div>\n  );\n});\n\nexport interface AssetGridEmptyProps {\n  title: string;\n  description?: ReactNode;\n  action?: ReactNode;\n}\n\n/** Nothing in the library yet — one action, the one that fills it. */\nexport function AssetGridEmpty({ title, description, action }: AssetGridEmptyProps) {\n  return (\n    <div className=\"ds-asset-empty\">\n      <Icon name=\"image\" size={24} />\n      <span className=\"ds-asset-empty__title\">{title}</span>\n      {description && <span className=\"ds-asset-empty__description\">{description}</span>}\n      {action}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/components/AssetGrid/style.css

@@ -0,0 +1,196 @@
+@layer components {
+  /* Columns and gap come from Grid; the grid only adds its own inset. */
+  .ds-asset-grid {
+    padding: var(--space-4);
+  }
+
+  .ds-asset-tile {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3);
+    padding: var(--space-3);
+    background: var(--color-surface);
+    border: var(--control-border-width) solid var(--control-border-color);
+    border-radius: var(--radius-md);
+    /* The rail exists on every tile, so selecting one never shifts the grid. */
+    box-shadow: inset var(--rail-width) 0 0 0 transparent;
+    transition:
+      background-color var(--duration-fast) var(--ease-standard),
+      box-shadow var(--duration-fast) var(--ease-standard);
+  }
+
+  .ds-asset-tile:hover:not([data-pending]) {
+    background: var(--field-hover);
+  }
+
+  .ds-asset-tile[data-selected] {
+    background: var(--color-primary-soft);
+    box-shadow: inset var(--rail-width) 0 0 0 var(--rail-color);
+  }
+
+  .ds-asset-tile[data-pending] {
+    opacity: 70%;
+  }
+
+  .ds-asset-tile[data-loading="true"] {
+    background: var(--color-surface);
+  }
+
+  .ds-asset-tile__thumb {
+    position: relative;
+    aspect-ratio: var(--asset-thumb-aspect);
+    overflow: hidden;
+    border-radius: var(--field-radius);
+    background: var(--field-rest);
+    display: grid;
+    place-content: center;
+  }
+
+  .ds-asset-tile__thumb img {
+    position: absolute;
+    inset: 0;
+    inline-size: 100%;
+    block-size: 100%;
+    object-fit: cover;
+    opacity: 0;
+    transition: opacity var(--duration-base) var(--ease-standard);
+  }
+
+  .ds-asset-tile__thumb img[data-loaded] {
+    opacity: 100%;
+  }
+
+  .ds-asset-tile__thumb-skeleton {
+    position: absolute;
+    inset: 0;
+    block-size: 100%;
+    border-radius: 0;
+  }
+
+  .ds-asset-tile__placeholder {
+    display: grid;
+    place-content: center;
+    color: var(--color-text-muted);
+  }
+
+  .ds-asset-tile__pending {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space-2);
+    background: color-mix(in srgb, var(--color-surface) 72%, transparent);
+    color: var(--color-text-muted);
+    font-size: var(--font-size-xs);
+    font-weight: var(--font-weight-bold);
+  }
+
+  .ds-asset-tile__spinner {
+    animation: ds-asset-spin 900ms linear infinite;
+  }
+
+  @keyframes ds-asset-spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  .ds-asset-tile__actions {
+    position: absolute;
+    inset-block-start: var(--space-2);
+    inset-inline: var(--space-2);
+    z-index: 1;
+    display: flex;
+    justify-content: space-between;
+    gap: var(--space-2);
+    pointer-events: none;
+  }
+
+  .ds-asset-tile__actions > * {
+    pointer-events: auto;
+  }
+
+  /* The whole thumbnail is the selection target; the name stays readable text
+   * underneath rather than being swallowed by the button. */
+  .ds-asset-tile__hit {
+    position: absolute;
+    inset: 0;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    cursor: pointer;
+  }
+
+  .ds-asset-tile__hit:focus-visible {
+    outline: var(--control-border-width) solid var(--color-focus);
+    outline-offset: -2px;
+  }
+
+  .ds-asset-tile__hit:disabled {
+    cursor: not-allowed;
+  }
+
+  .ds-asset-tile__hit-label {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+  }
+
+  .ds-asset-tile__text {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+    min-inline-size: 0;
+  }
+
+  .ds-asset-tile__name {
+    font-size: var(--font-size-sm);
+    font-weight: var(--font-weight-bold);
+    line-height: var(--line-height-body);
+    overflow-wrap: anywhere;
+  }
+
+  .ds-asset-tile__meta {
+    font-family: var(--font-mono);
+    font-size: var(--font-size-xs);
+    line-height: var(--line-height-body);
+    color: var(--color-text-muted);
+  }
+
+  .ds-asset-empty {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--space-3);
+    padding: var(--space-12) var(--space-6);
+    text-align: center;
+    color: var(--color-text-muted);
+  }
+
+  .ds-asset-empty__title {
+    font-size: var(--font-size-lead);
+    font-weight: var(--font-weight-bold);
+    color: var(--color-text);
+  }
+
+  .ds-asset-empty__description {
+    max-inline-size: 34rem;
+    line-height: var(--line-height-body);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ds-asset-tile,
+    .ds-asset-tile__thumb img {
+      transition: none;
+    }
+
+    .ds-asset-tile__spinner {
+      animation: none;
+    }
+  }
+}

package/dist/components/Avatar/index.cjs

@@ -0,0 +1,2 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require("react"),t=require("react/jsx-runtime");function n(e){let t=e.trim().split(/\s+/);return((t[0]?.[0]??``)+(t.length>1?t[t.length-1][0]:``)).toUpperCase()}var r=(0,e.forwardRef)(function({name:e,src:r,size:i=24,className:a,...o},s){return(0,t.jsx)(`span`,{ref:s,role:`img`,"aria-label":e,title:e,"data-size":i,className:[`ds-avatar`,a].filter(Boolean).join(` `),...o,children:r?(0,t.jsx)(`img`,{src:r,alt:``}):n(e)})}),i=(0,e.forwardRef)(function({people:e,size:n=24,className:i,...a},o){let s=e.slice(0,3),c=e.length-s.length;return(0,t.jsxs)(`span`,{ref:o,role:`group`,"aria-label":e.map(e=>e.name).join(`, `),className:[`ds-avatar-group`,i].filter(Boolean).join(` `),...a,children:[s.map(e=>(0,t.jsx)(r,{name:e.name,src:e.src,size:n},e.name)),c>0&&(0,t.jsxs)(`span`,{className:`ds-avatar-group__count`,children:[`+`,c]})]})});exports.Avatar=r,exports.AvatarGroup=i;
+//# sourceMappingURL=index.cjs.map

package/dist/components/Avatar/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["forwardRef","react","react_jsx_runtime","initialsOf","words","name","Avatar","rest","size","className","src","AvatarGroup","shown","people","overflow","p","person"],"sources":["../../../src/components/Avatar/index.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes } from \"react\";\nimport \"./style.css\";\n\nexport type AvatarSize = 24 | 32 | 40;\n\nexport interface AvatarProps extends HTMLAttributes<HTMLSpanElement> {\n  /** Required — drives the initials and the accessible name. */\n  name: string;\n  src?: string;\n  size?: AvatarSize;\n}\n\nfunction initialsOf(name: string) {\n  const words = name.trim().split(/\\s+/);\n  const first = words[0]?.[0] ?? \"\";\n  const last = words.length > 1 ? words[words.length - 1][0] : \"\";\n  return (first + last).toUpperCase();\n}\n\n/**\n * Identifies a person at a glance in a dense surface. An identifier, not a\n * control — never colour-generated, never carrying a status dot.\n */\nexport const Avatar = forwardRef<HTMLSpanElement, AvatarProps>(function Avatar(\n  { name, src, size = 24, className, ...rest },\n  ref,\n) {\n  return (\n    <span\n      ref={ref}\n      role=\"img\"\n      aria-label={name}\n      title={name}\n      data-size={size}\n      className={[\"ds-avatar\", className].filter(Boolean).join(\" \")}\n      {...rest}\n    >\n      {src ? <img src={src} alt=\"\" /> : initialsOf(name)}\n    </span>\n  );\n});\n\nexport interface AvatarGroupProps extends HTMLAttributes<HTMLSpanElement> {\n  /** Up to three render; the rest become a `+n` count. */\n  people: { name: string; src?: string }[];\n  size?: AvatarSize;\n}\n\n/** Overlapping stack of at most three avatars, then a `+n` chip. */\nexport const AvatarGroup = forwardRef<HTMLSpanElement, AvatarGroupProps>(\n  function AvatarGroup({ people, size = 24, className, ...rest }, ref) {\n    const shown = people.slice(0, 3);\n    const overflow = people.length - shown.length;\n    return (\n      <span\n        ref={ref}\n        role=\"group\"\n        aria-label={people.map((p) => p.name).join(\", \")}\n        className={[\"ds-avatar-group\", className].filter(Boolean).join(\" \")}\n        {...rest}\n      >\n        {shown.map((person) => (\n          <Avatar key={person.name} name={person.name} src={person.src} size={size} />\n        ))}\n        {overflow > 0 && <span className=\"ds-avatar-group__count\">+{overflow}</span>}\n      </span>\n    );\n  },\n);\n"],"mappings":"A,yHAYA,SAASG,EAAW,EAAc,CAChC,IAAMC,EAAQC,EAAK,KAAK,CAAC,CAAC,MAAM,KAAK,EAGrC,QAFcD,EAAM,EAAE,GAAG,IAAM,KAClBA,EAAM,OAAS,EAAIA,EAAMA,EAAM,OAAS,EAAE,CAAC,GAAK,IAAA,CACvC,YAAY,CACpC,CAMA,IAAaE,GAAA,EAASN,EAAAA,WAAAA,CAAyC,SAC7D,CAAE,OAAM,MAAK,OAAO,GAAI,YAAW,GAAGO,GACtC,EACA,CACA,OACE,EAAAL,EAAA,IAAA,CAAC,OAAD,CACO,MACL,KAAK,MACL,aAAYG,EACZ,MAAOA,EACP,YAAWG,EACX,UAAW,CAAC,YAAaC,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,EAC5D,GAAIF,EAEH,SAAAG,GAAM,EAAAR,EAAA,IAAA,CAAC,MAAD,CAAU,MAAK,IAAI,EAAI,CAAA,EAAIC,EAAWE,CAAI,CAC7C,CAAA,CAEV,CAAC,EASYM,GAAA,EAAcX,EAAAA,WAAAA,CACzB,SAAqB,CAAE,SAAQ,OAAO,GAAI,YAAW,GAAGO,GAAQ,EAAK,CACnE,IAAMK,EAAQC,EAAO,MAAM,EAAG,CAAC,EACzBC,EAAWD,EAAO,OAASD,EAAM,OACvC,OACE,EAAAV,EAAA,KAAA,CAAC,OAAD,CACO,MACL,KAAK,QACL,aAAYW,EAAO,IAAK,GAAME,EAAE,IAAI,CAAC,CAAC,KAAK,IAAI,EAC/C,UAAW,CAAC,kBAAmBN,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,EAClE,GAAIF,EALN,SAAA,CAOGK,EAAM,IAAK,IACV,EAAAV,EAAA,IAAA,CAACI,EAAD,CAA0B,KAAMU,EAAO,KAAM,IAAKA,EAAO,IAAW,MAAO,EAA9DA,EAAO,IAAuD,CAC5E,EACAF,EAAW,IAAK,EAAAZ,EAAA,KAAA,CAAC,OAAD,CAAM,UAAU,yBAAhB,SAAA,CAAyC,IAAEY,CAAe,CACvE,CAAA,CAAA,C,EAEV,CACF,E"}

package/dist/components/Avatar/index.d.cts

@@ -0,0 +1,24 @@
+import { type HTMLAttributes } from "react";
+export type AvatarSize = 24 | 32 | 40;
+export interface AvatarProps extends HTMLAttributes<HTMLSpanElement> {
+    /** Required — drives the initials and the accessible name. */
+    name: string;
+    src?: string;
+    size?: AvatarSize;
+}
+/**
+ * Identifies a person at a glance in a dense surface. An identifier, not a
+ * control — never colour-generated, never carrying a status dot.
+ */
+export declare const Avatar: import("react").ForwardRefExoticComponent<AvatarProps & import("react").RefAttributes<HTMLSpanElement>>;
+export interface AvatarGroupProps extends HTMLAttributes<HTMLSpanElement> {
+    /** Up to three render; the rest become a `+n` count. */
+    people: {
+        name: string;
+        src?: string;
+    }[];
+    size?: AvatarSize;
+}
+/** Overlapping stack of at most three avatars, then a `+n` chip. */
+export declare const AvatarGroup: import("react").ForwardRefExoticComponent<AvatarGroupProps & import("react").RefAttributes<HTMLSpanElement>>;
+//# sourceMappingURL=index.d.cts.map

package/dist/components/Avatar/index.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/Avatar/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AACxD,OAAO,aAAa,CAAC;AAErB,MAAM,MAAM,UAAU,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAEtC,MAAM,WAAW,WAAY,SAAQ,cAAc,CAAC,eAAe,CAAC;IAClE,8DAA8D;IAC9D,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB;AASD;;;GAGG;AACH,eAAO,MAAM,MAAM,yGAiBjB,CAAC;AAEH,MAAM,WAAW,gBAAiB,SAAQ,cAAc,CAAC,eAAe,CAAC;IACvE,wDAAwD;IACxD,MAAM,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,GAAG,CAAC,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IACzC,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB;AAED,oEAAoE;AACpE,eAAO,MAAM,WAAW,8GAmBvB,CAAC"}

package/dist/components/Avatar/index.d.ts

@@ -0,0 +1,24 @@
+import { type HTMLAttributes } from "react";
+export type AvatarSize = 24 | 32 | 40;
+export interface AvatarProps extends HTMLAttributes<HTMLSpanElement> {
+    /** Required — drives the initials and the accessible name. */
+    name: string;
+    src?: string;
+    size?: AvatarSize;
+}
+/**
+ * Identifies a person at a glance in a dense surface. An identifier, not a
+ * control — never colour-generated, never carrying a status dot.
+ */
+export declare const Avatar: import("react").ForwardRefExoticComponent<AvatarProps & import("react").RefAttributes<HTMLSpanElement>>;
+export interface AvatarGroupProps extends HTMLAttributes<HTMLSpanElement> {
+    /** Up to three render; the rest become a `+n` count. */
+    people: {
+        name: string;
+        src?: string;
+    }[];
+    size?: AvatarSize;
+}
+/** Overlapping stack of at most three avatars, then a `+n` chip. */
+export declare const AvatarGroup: import("react").ForwardRefExoticComponent<AvatarGroupProps & import("react").RefAttributes<HTMLSpanElement>>;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Avatar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AACxD,OAAO,aAAa,CAAC;AAErB,MAAM,MAAM,UAAU,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAEtC,MAAM,WAAW,WAAY,SAAQ,cAAc,CAAC,eAAe,CAAC;IAClE,8DAA8D;IAC9D,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB;AASD;;;GAGG;AACH,eAAO,MAAM,MAAM,yGAiBjB,CAAC;AAEH,MAAM,WAAW,gBAAiB,SAAQ,cAAc,CAAC,eAAe,CAAC;IACvE,wDAAwD;IACxD,MAAM,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,GAAG,CAAC,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IACzC,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB;AAED,oEAAoE;AACpE,eAAO,MAAM,WAAW,8GAmBvB,CAAC"}

package/dist/components/Avatar/index.js

@@ -0,0 +1,43 @@
+import { forwardRef as e } from "react";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/components/Avatar/index.tsx
+function r(e) {
+	let t = e.trim().split(/\s+/);
+	return ((t[0]?.[0] ?? "") + (t.length > 1 ? t[t.length - 1][0] : "")).toUpperCase();
+}
+var i = e(function({ name: e, src: n, size: i = 24, className: a, ...o }, s) {
+	return /* @__PURE__ */ t("span", {
+		ref: s,
+		role: "img",
+		"aria-label": e,
+		title: e,
+		"data-size": i,
+		className: ["ds-avatar", a].filter(Boolean).join(" "),
+		...o,
+		children: n ? /* @__PURE__ */ t("img", {
+			src: n,
+			alt: ""
+		}) : r(e)
+	});
+}), a = e(function({ people: e, size: r = 24, className: a, ...o }, s) {
+	let c = e.slice(0, 3), l = e.length - c.length;
+	return /* @__PURE__ */ n("span", {
+		ref: s,
+		role: "group",
+		"aria-label": e.map((e) => e.name).join(", "),
+		className: ["ds-avatar-group", a].filter(Boolean).join(" "),
+		...o,
+		children: [c.map((e) => /* @__PURE__ */ t(i, {
+			name: e.name,
+			src: e.src,
+			size: r
+		}, e.name)), l > 0 && /* @__PURE__ */ n("span", {
+			className: "ds-avatar-group__count",
+			children: ["+", l]
+		})]
+	});
+});
+//#endregion
+export { i as Avatar, a as AvatarGroup };
+
+//# sourceMappingURL=index.js.map

package/dist/components/Avatar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["initialsOf","words","name","Avatar","forwardRef","rest","size","className","src","AvatarGroup","shown","people","overflow","p","person"],"sources":["../../../src/components/Avatar/index.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes } from \"react\";\nimport \"./style.css\";\n\nexport type AvatarSize = 24 | 32 | 40;\n\nexport interface AvatarProps extends HTMLAttributes<HTMLSpanElement> {\n  /** Required — drives the initials and the accessible name. */\n  name: string;\n  src?: string;\n  size?: AvatarSize;\n}\n\nfunction initialsOf(name: string) {\n  const words = name.trim().split(/\\s+/);\n  const first = words[0]?.[0] ?? \"\";\n  const last = words.length > 1 ? words[words.length - 1][0] : \"\";\n  return (first + last).toUpperCase();\n}\n\n/**\n * Identifies a person at a glance in a dense surface. An identifier, not a\n * control — never colour-generated, never carrying a status dot.\n */\nexport const Avatar = forwardRef<HTMLSpanElement, AvatarProps>(function Avatar(\n  { name, src, size = 24, className, ...rest },\n  ref,\n) {\n  return (\n    <span\n      ref={ref}\n      role=\"img\"\n      aria-label={name}\n      title={name}\n      data-size={size}\n      className={[\"ds-avatar\", className].filter(Boolean).join(\" \")}\n      {...rest}\n    >\n      {src ? <img src={src} alt=\"\" /> : initialsOf(name)}\n    </span>\n  );\n});\n\nexport interface AvatarGroupProps extends HTMLAttributes<HTMLSpanElement> {\n  /** Up to three render; the rest become a `+n` count. */\n  people: { name: string; src?: string }[];\n  size?: AvatarSize;\n}\n\n/** Overlapping stack of at most three avatars, then a `+n` chip. */\nexport const AvatarGroup = forwardRef<HTMLSpanElement, AvatarGroupProps>(\n  function AvatarGroup({ people, size = 24, className, ...rest }, ref) {\n    const shown = people.slice(0, 3);\n    const overflow = people.length - shown.length;\n    return (\n      <span\n        ref={ref}\n        role=\"group\"\n        aria-label={people.map((p) => p.name).join(\", \")}\n        className={[\"ds-avatar-group\", className].filter(Boolean).join(\" \")}\n        {...rest}\n      >\n        {shown.map((person) => (\n          <Avatar key={person.name} name={person.name} src={person.src} size={size} />\n        ))}\n        {overflow > 0 && <span className=\"ds-avatar-group__count\">+{overflow}</span>}\n      </span>\n    );\n  },\n);\n"],"mappings":";;;AAYA,SAASA,EAAW,GAAc;CAChC,IAAMC,IAAQC,EAAK,KAAK,CAAC,CAAC,MAAM,KAAK;CAGrC,SAFcD,EAAM,EAAE,GAAG,MAAM,OAClBA,EAAM,SAAS,IAAIA,EAAMA,EAAM,SAAS,EAAE,CAAC,KAAK,IAAA,CACvC,YAAY;AACpC;AAMA,IAAaE,IAASC,EAAyC,SAC7D,EAAE,SAAM,QAAK,UAAO,IAAI,cAAW,GAAGC,KACtC,GACA;CACA,OACE,kBAAC,QAAD;EACO;EACL,MAAK;EACL,cAAYH;EACZ,OAAOA;EACP,aAAWI;EACX,WAAW,CAAC,aAAaC,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;EAC5D,GAAIF;EAEH,UAAAG,IAAM,kBAAC,OAAD;GAAU;GAAK,KAAI;EAAI,CAAA,IAAIR,EAAWE,CAAI;CAC7C,CAAA;AAEV,CAAC,GASYO,IAAcL,EACzB,SAAqB,EAAE,WAAQ,UAAO,IAAI,cAAW,GAAGC,KAAQ,GAAK;CACnE,IAAMK,IAAQC,EAAO,MAAM,GAAG,CAAC,GACzBC,IAAWD,EAAO,SAASD,EAAM;CACvC,OACE,kBAAC,QAAD;EACO;EACL,MAAK;EACL,cAAYC,EAAO,KAAK,MAAME,EAAE,IAAI,CAAC,CAAC,KAAK,IAAI;EAC/C,WAAW,CAAC,mBAAmBN,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;EAClE,GAAIF;EALN,UAAA,CAOGK,EAAM,KAAK,MACV,kBAACP,GAAD;GAA0B,MAAMW,EAAO;GAAM,KAAKA,EAAO;GAAW;EAAO,GAA9DA,EAAO,IAAuD,CAC5E,GACAF,IAAW,KAAK,kBAAC,QAAD;GAAM,WAAU;GAAhB,UAAA,CAAyC,KAAEA,CAAe;EACvE,CAAA,CAAA;;AAEV,CACF"}

package/dist/components/Avatar/style.css

@@ -0,0 +1,70 @@
+@layer components {
+  .ds-avatar {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    border: var(--control-border-width) solid var(--control-border-color);
+    border-radius: var(--radius-pill);
+    background: var(--color-surface-subtle);
+    color: var(--color-text);
+    font-weight: var(--font-weight-bold);
+    line-height: 1;
+    user-select: none;
+  }
+
+  .ds-avatar img {
+    inline-size: 100%;
+    block-size: 100%;
+    object-fit: cover;
+  }
+
+  .ds-avatar[data-size="24"] {
+    inline-size: var(--icon-lg);
+    block-size: var(--icon-lg);
+    font-size: 10px;
+  }
+
+  .ds-avatar[data-size="32"] {
+    inline-size: var(--space-8);
+    block-size: var(--space-8);
+    font-size: var(--field-font-size-sm);
+  }
+
+  .ds-avatar[data-size="40"] {
+    inline-size: var(--space-10);
+    block-size: var(--space-10);
+    font-size: var(--font-size-md);
+  }
+
+  .ds-avatar-group {
+    display: inline-flex;
+    align-items: center;
+  }
+
+  .ds-avatar-group .ds-avatar + .ds-avatar {
+    margin-inline-start: calc(-1 * var(--space-2));
+  }
+
+  .ds-avatar-group .ds-avatar:nth-child(1) {
+    z-index: 3;
+  }
+
+  .ds-avatar-group .ds-avatar:nth-child(2) {
+    z-index: 2;
+  }
+
+  .ds-avatar-group .ds-avatar:nth-child(3) {
+    z-index: 1;
+  }
+
+  .ds-avatar-group__count {
+    margin-inline-start: var(--space-2);
+    padding: 2px var(--space-2);
+    border: var(--badge-border-width) solid var(--color-text-muted);
+    border-radius: var(--radius-pill);
+    color: var(--color-text-muted);
+    font-size: var(--font-size-xs);
+    font-weight: var(--font-weight-bold);
+  }
+}

package/dist/components/Badge/index.cjs

@@ -0,0 +1,2 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require("react"),t=require("react/jsx-runtime");var n=(0,e.forwardRef)(function({shape:e=`tag`,tone:n,appearance:r=`outline`,className:i,children:a,...o},s){if(e===`count`){let e=Number(a);if(!Number.isNaN(e)){if(e===0)return null;a=e>99?`99+`:String(e)}}return(0,t.jsxs)(`span`,{ref:s,"data-shape":e,"data-appearance":r,"data-tone":e===`status`?n:void 0,className:[`ds-badge`,i].filter(Boolean).join(` `),...o,children:[e===`status`&&(0,t.jsx)(`span`,{className:`ds-badge__dot`,"aria-hidden":`true`}),a]})});exports.Badge=n;
+//# sourceMappingURL=index.cjs.map

package/dist/components/Badge/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["forwardRef","react","react_jsx_runtime","Badge","rest","shape","value","children","appearance","tone","className"],"sources":["../../../src/components/Badge/index.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes, type ReactNode } from \"react\";\nimport \"./style.css\";\n\nexport type BadgeShape = \"status\" | \"tag\" | \"count\";\n\n/**\n * How much ink the badge spends.\n * - `outline` — the tone as a 2px stroke on the surface. The quiet default.\n * - `soft` — the tone's soft fill behind tone-coloured text. For dense tables.\n * - `solid` — the tone as a full fill. Reserve it for the one state a row is\n *   really about; a table of solid badges reads as noise.\n */\nexport type BadgeAppearance = \"outline\" | \"soft\" | \"solid\";\n\n/** Six publication states, and no seventh without a decision record. */\nexport type StatusTone =\n  | \"draft\"\n  | \"scheduled\"\n  | \"published\"\n  | \"changed\"\n  | \"unpublished\"\n  | \"archived\";\n\nexport interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {\n  shape?: BadgeShape;\n  /** Required on `status`, forbidden on `tag` and `count`. */\n  tone?: StatusTone;\n  appearance?: BadgeAppearance;\n  children?: ReactNode;\n}\n\n/**\n * A small, non-interactive label attached to something else. Never a button,\n * never a filter. Status tones are reserved for publication state.\n */\nexport const Badge = forwardRef<HTMLSpanElement, BadgeProps>(function Badge(\n  { shape = \"tag\", tone, appearance = \"outline\", className, children, ...rest },\n  ref,\n) {\n  if (shape === \"count\") {\n    const value = Number(children);\n    if (!Number.isNaN(value)) {\n      if (value === 0) return null;\n      children = value > 99 ? \"99+\" : String(value);\n    }\n  }\n\n  return (\n    <span\n      ref={ref}\n      data-shape={shape}\n      data-appearance={appearance}\n      data-tone={shape === \"status\" ? tone : undefined}\n      className={[\"ds-badge\", className].filter(Boolean).join(\" \")}\n      {...rest}\n    >\n      {shape === \"status\" && <span className=\"ds-badge__dot\" aria-hidden=\"true\" />}\n      {children}\n    </span>\n  );\n});\n"],"mappings":"A,yHAmCA,IAAaG,GAAA,EAAQH,EAAAA,WAAAA,CAAwC,SAC3D,CAAE,QAAQ,MAAO,OAAM,aAAa,UAAW,YAAW,WAAU,GAAGI,GACvE,EACA,CACA,GAAIC,IAAU,QAAS,CACrB,IAAMC,EAAQ,OAAOC,CAAQ,EAC7B,GAAI,CAAC,OAAO,MAAMD,CAAK,EAAG,CACxB,GAAIA,IAAU,EAAG,OAAO,KACxB,EAAWA,EAAQ,GAAK,MAAQ,OAAOA,CAAK,CAC9C,CACF,CAEA,OACE,EAAAJ,EAAA,KAAA,CAAC,OAAD,CACO,MACL,aAAYG,EACZ,kBAAiBG,EACjB,YAAWH,IAAU,SAAWI,EAAO,IAAA,GACvC,UAAW,CAAC,WAAYC,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,EAC3D,GAAIN,EANN,SAAA,CAQGC,IAAU,WAAY,EAAAH,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,gBAAgB,cAAY,MAAQ,CAAA,EAC1EK,CACG,C,EAEV,CAAC,E"}

package/dist/components/Badge/index.d.cts

@@ -0,0 +1,25 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+export type BadgeShape = "status" | "tag" | "count";
+/**
+ * How much ink the badge spends.
+ * - `outline` — the tone as a 2px stroke on the surface. The quiet default.
+ * - `soft` — the tone's soft fill behind tone-coloured text. For dense tables.
+ * - `solid` — the tone as a full fill. Reserve it for the one state a row is
+ *   really about; a table of solid badges reads as noise.
+ */
+export type BadgeAppearance = "outline" | "soft" | "solid";
+/** Six publication states, and no seventh without a decision record. */
+export type StatusTone = "draft" | "scheduled" | "published" | "changed" | "unpublished" | "archived";
+export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+    shape?: BadgeShape;
+    /** Required on `status`, forbidden on `tag` and `count`. */
+    tone?: StatusTone;
+    appearance?: BadgeAppearance;
+    children?: ReactNode;
+}
+/**
+ * A small, non-interactive label attached to something else. Never a button,
+ * never a filter. Status tones are reserved for publication state.
+ */
+export declare const Badge: import("react").ForwardRefExoticComponent<BadgeProps & import("react").RefAttributes<HTMLSpanElement>>;
+//# sourceMappingURL=index.d.cts.map

package/dist/components/Badge/index.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/Badge/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACxE,OAAO,aAAa,CAAC;AAErB,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,KAAK,GAAG,OAAO,CAAC;AAEpD;;;;;;GAMG;AACH,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,CAAC;AAE3D,wEAAwE;AACxE,MAAM,MAAM,UAAU,GAClB,OAAO,GACP,WAAW,GACX,WAAW,GACX,SAAS,GACT,aAAa,GACb,UAAU,CAAC;AAEf,MAAM,WAAW,UAAW,SAAQ,cAAc,CAAC,eAAe,CAAC;IACjE,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,4DAA4D;IAC5D,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,UAAU,CAAC,EAAE,eAAe,CAAC;IAC7B,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;GAGG;AACH,eAAO,MAAM,KAAK,wGAyBhB,CAAC"}

package/dist/components/Badge/index.d.ts

@@ -0,0 +1,25 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+export type BadgeShape = "status" | "tag" | "count";
+/**
+ * How much ink the badge spends.
+ * - `outline` — the tone as a 2px stroke on the surface. The quiet default.
+ * - `soft` — the tone's soft fill behind tone-coloured text. For dense tables.
+ * - `solid` — the tone as a full fill. Reserve it for the one state a row is
+ *   really about; a table of solid badges reads as noise.
+ */
+export type BadgeAppearance = "outline" | "soft" | "solid";
+/** Six publication states, and no seventh without a decision record. */
+export type StatusTone = "draft" | "scheduled" | "published" | "changed" | "unpublished" | "archived";
+export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+    shape?: BadgeShape;
+    /** Required on `status`, forbidden on `tag` and `count`. */
+    tone?: StatusTone;
+    appearance?: BadgeAppearance;
+    children?: ReactNode;
+}
+/**
+ * A small, non-interactive label attached to something else. Never a button,
+ * never a filter. Status tones are reserved for publication state.
+ */
+export declare const Badge: import("react").ForwardRefExoticComponent<BadgeProps & import("react").RefAttributes<HTMLSpanElement>>;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Badge/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACxE,OAAO,aAAa,CAAC;AAErB,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,KAAK,GAAG,OAAO,CAAC;AAEpD;;;;;;GAMG;AACH,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,CAAC;AAE3D,wEAAwE;AACxE,MAAM,MAAM,UAAU,GAClB,OAAO,GACP,WAAW,GACX,WAAW,GACX,SAAS,GACT,aAAa,GACb,UAAU,CAAC;AAEf,MAAM,WAAW,UAAW,SAAQ,cAAc,CAAC,eAAe,CAAC;IACjE,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,4DAA4D;IAC5D,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,UAAU,CAAC,EAAE,eAAe,CAAC;IAC7B,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;GAGG;AACH,eAAO,MAAM,KAAK,wGAyBhB,CAAC"}

package/dist/components/Badge/index.js

@@ -0,0 +1,28 @@
+import { forwardRef as e } from "react";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/components/Badge/index.tsx
+var r = e(function({ shape: e = "tag", tone: r, appearance: i = "outline", className: a, children: o, ...s }, c) {
+	if (e === "count") {
+		let e = Number(o);
+		if (!Number.isNaN(e)) {
+			if (e === 0) return null;
+			o = e > 99 ? "99+" : String(e);
+		}
+	}
+	return /* @__PURE__ */ n("span", {
+		ref: c,
+		"data-shape": e,
+		"data-appearance": i,
+		"data-tone": e === "status" ? r : void 0,
+		className: ["ds-badge", a].filter(Boolean).join(" "),
+		...s,
+		children: [e === "status" && /* @__PURE__ */ t("span", {
+			className: "ds-badge__dot",
+			"aria-hidden": "true"
+		}), o]
+	});
+});
+//#endregion
+export { r as Badge };
+
+//# sourceMappingURL=index.js.map