@ceebee/ui 0.6.0 → 1.0.0

package/dist/index.js

@@ -1,7 +1,4 @@
-import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
-import { Children, isValidElement, Fragment, cloneElement } from 'react';
-import { XCircle, AlertTriangle, CheckCircle2, Info, ChevronRight, Check } from 'lucide-react';
-import { encode } from 'uqr';
+import { jsx, jsxs } from 'react/jsx-runtime';
 
 // src/lib/cn.ts
 function cn(...parts) {
@@ -95,154 +92,18 @@ function Heading({ level = 2, size, className, children }) {
   const resolved = size ?? ["3xl", "2xl", "xl", "lg"][level - 1] ?? "lg";
   return /* @__PURE__ */ jsx(Tag, { className: cn("cb-heading", `cb-text--${resolved}`, className), children });
 }
-function box({ width = "100%", height = "1rem", radius = "md", className }) {
-  const style = { "--cb-skeleton-w": width, "--cb-skeleton-h": height };
-  return /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: cn("cb-skeleton", `cb-radius--${radius}`, className), style });
-}
-function text({ lines = 3, lastLineWidth = "62%", className }) {
-  return /* @__PURE__ */ jsx("span", { className: cn("cb-skeleton-text", className), children: Array.from({ length: lines }, (_, i) => /* @__PURE__ */ jsx(SkeletonBox, { height: "0.75rem", width: i === lines - 1 ? lastLineWidth : "100%" }, i)) });
-}
-function circle({ size = "2.5rem", className }) {
-  return /* @__PURE__ */ jsx(SkeletonBox, { width: size, height: size, radius: "full", className });
-}
-var SkeletonBox = box;
-var Skeleton = Object.assign(box, {
-  Text: text,
-  Circle: circle,
-  Rect: box
-});
-var sizeSteps = {
-  small: 2,
-  middle: 3,
-  large: 4
-};
-function stepFor(size) {
-  return typeof size === "number" ? size : sizeSteps[size];
-}
-function SpaceSkeleton({ items = 3, direction = "horizontal", size = "small", wrap = false, className }) {
-  const style = { "--cb-space-gap": `var(--cb-space-${stepFor(size)})` };
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cn(
-        "cb-space",
-        "cb-space--skeleton",
-        `cb-space--${direction}`,
-        "cb-space--align-center",
-        wrap && "cb-space--wrap",
-        className
-      ),
-      style,
-      "aria-hidden": "true",
-      children: Array.from({ length: items }, (_, index) => /* @__PURE__ */ jsx("span", { className: "cb-space__item", children: /* @__PURE__ */ jsx(Skeleton, { className: "cb-space__skeleton-item" }) }, index))
-    }
-  );
-}
-var sizeSteps2 = {
-  small: 2,
-  middle: 3,
-  large: 4
-};
-function stepFor2(size) {
-  return typeof size === "number" ? size : sizeSteps2[size];
-}
-function normalizeChildren(children) {
-  return Children.toArray(children).flatMap(
-    (child) => isValidElement(child) && child.type === Fragment ? normalizeChildren(child.props.children) : [child]
-  );
-}
-function SpaceRoot({
-  direction = "horizontal",
-  size = "small",
-  align = "center",
-  wrap = false,
-  split,
-  className,
-  children
-}) {
-  const style = { "--cb-space-gap": `var(--cb-space-${stepFor2(size)})` };
-  const items = normalizeChildren(children);
-  const renderedItems = items.map((child, index) => /* @__PURE__ */ jsx("span", { className: "cb-space__item", children: child }, `item-${index}`));
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cn(
-        "cb-space",
-        `cb-space--${direction}`,
-        `cb-space--align-${align}`,
-        wrap && "cb-space--wrap",
-        className
-      ),
-      style,
-      children: renderedItems.flatMap(
-        (item, index) => split != null && index < items.length - 1 ? [item, /* @__PURE__ */ jsx("span", { className: "cb-space__split", "aria-hidden": "true", children: split }, `split-${index}`)] : [item]
-      )
-    }
-  );
-}
-function SpaceCompact({ direction = "horizontal", className, children }) {
-  return /* @__PURE__ */ jsx("div", { className: cn("cb-space-compact", `cb-space-compact--${direction}`, className), children });
-}
-var Space = Object.assign(SpaceRoot, {
-  Compact: SpaceCompact,
-  Skeleton: SpaceSkeleton
-});
-function MasonrySkeleton({ items = 6, columns = 3, gap = 4, className }) {
-  const style = {
-    "--cb-masonry-columns": String(columns),
-    "--cb-masonry-gap": `var(--cb-space-${gap})`
-  };
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cn("cb-masonry", "cb-masonry--skeleton", className),
-      style,
-      "data-columns": columns,
-      "data-gap": gap,
-      "aria-hidden": "true",
-      children: Array.from({ length: items }, (_, index) => /* @__PURE__ */ jsx("div", { className: "cb-masonry__item", children: /* @__PURE__ */ jsx(Skeleton, { className: cn("cb-masonry__skeleton-item", `cb-masonry__skeleton-item--${index % 3}`) }) }, index))
-    }
-  );
-}
-function normalizeChildren2(children) {
-  return Children.toArray(children).flatMap(
-    (child) => isValidElement(child) && child.type === Fragment ? normalizeChildren2(child.props.children) : [child]
-  );
-}
-function MasonryRoot({ columns = 3, gap = 4, className, children }) {
-  const style = {
-    "--cb-masonry-columns": String(columns),
-    "--cb-masonry-gap": `var(--cb-space-${gap})`
-  };
-  const items = normalizeChildren2(children);
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cn("cb-masonry", className),
-      style,
-      "data-columns": columns,
-      "data-gap": gap,
-      children: items.map((child, index) => /* @__PURE__ */ jsx("div", { className: "cb-masonry__item", children: child }, `item-${index}`))
-    }
-  );
-}
-var Masonry = Object.assign(MasonryRoot, { Skeleton: MasonrySkeleton });
-function Affix({ edge = "top", offset = "md", children }) {
-  const style = { "--cb-affix-offset": `var(--cb-space-${offset === "sm" ? 2 : offset === "md" ? 4 : 6})` };
-  return /* @__PURE__ */ jsx("div", { className: cn("cb-affix", `cb-affix--${edge}`, `cb-affix--offset-${offset}`), style, "data-edge": edge, "data-offset": offset, children });
-}
 function PageContainerSkeleton({ breadcrumb = true, subtitle = true, extra = true, tabs = false, lines = 4, containerSize = "lg" }) {
   return /* @__PURE__ */ jsx(Container, { size: containerSize, children: /* @__PURE__ */ jsxs("section", { className: "cb-page-container cb-page-container--skeleton", "aria-hidden": "true", children: [
-    breadcrumb ? /* @__PURE__ */ jsx(Skeleton, { className: "cb-page-container__skeleton-breadcrumb" }) : null,
+    breadcrumb ? /* @__PURE__ */ jsx("span", { className: "cb-page-container__skeleton-breadcrumb" }) : null,
     /* @__PURE__ */ jsxs("header", { className: "cb-page-container__header", children: [
       /* @__PURE__ */ jsxs("div", { className: "cb-page-container__heading", children: [
-        /* @__PURE__ */ jsx(Skeleton, { className: "cb-page-container__skeleton-title" }),
-        subtitle ? /* @__PURE__ */ jsx(Skeleton, { className: "cb-page-container__skeleton-subtitle" }) : null
+        /* @__PURE__ */ jsx("span", { className: "cb-page-container__skeleton-title" }),
+        subtitle ? /* @__PURE__ */ jsx("span", { className: "cb-page-container__skeleton-subtitle" }) : null
       ] }),
-      extra ? /* @__PURE__ */ jsx(Skeleton, { className: "cb-page-container__skeleton-extra" }) : null
+      extra ? /* @__PURE__ */ jsx("span", { className: "cb-page-container__skeleton-extra" }) : null
     ] }),
-    tabs ? /* @__PURE__ */ jsx(Skeleton, { className: "cb-page-container__skeleton-tabs" }) : null,
-    /* @__PURE__ */ jsx(Skeleton.Text, { lines })
+    tabs ? /* @__PURE__ */ jsx("span", { className: "cb-page-container__skeleton-tabs" }) : null,
+    Array.from({ length: lines }, (_, index) => /* @__PURE__ */ jsx("span", { className: "cb-page-container__skeleton-line" }, index))
   ] }) });
 }
 function PageContainerRoot({ breadcrumb, title, subtitle, extra, tabs, children, containerSize = "lg" }) {
@@ -261,379 +122,6 @@ function PageContainerRoot({ breadcrumb, title, subtitle, extra, tabs, children,
   ] }) });
 }
 var PageContainer = Object.assign(PageContainerRoot, { Skeleton: PageContainerSkeleton });
-function LinkButton({
-  variant = "solid",
-  tone = "brand",
-  size = "md",
-  iconStart,
-  iconEnd,
-  className,
-  children,
-  render,
-  ...rest
-}) {
-  const iconOnly = children === void 0 || children === null || children === false || children === "";
-  const classes = cn(
-    "cb-button",
-    "cb-link-button",
-    `cb-button--${variant}`,
-    `cb-button--${size}`,
-    iconOnly && "cb-button--icon",
-    className
-  );
-  const body = /* @__PURE__ */ jsxs(Fragment$1, { children: [
-    iconStart,
-    iconOnly ? null : /* @__PURE__ */ jsx("span", { className: "cb-button__label", children }),
-    iconOnly ? null : iconEnd
-  ] });
-  if (render && isValidElement(render)) {
-    return cloneElement(render, {
-      className: cn(classes, render.props.className),
-      "data-tone": tone,
-      ...rest,
-      children: body
-    });
-  }
-  return /* @__PURE__ */ jsx(
-    "a",
-    {
-      className: cn(
-        "cb-button",
-        "cb-link-button",
-        `cb-button--${variant}`,
-        `cb-button--${size}`,
-        iconOnly && "cb-button--icon",
-        className
-      ),
-      "data-tone": tone,
-      ...rest,
-      children: body
-    }
-  );
-}
-function AnchorSkeleton({
-  items = 4,
-  orientation = "vertical",
-  size = "md",
-  tone = "brand",
-  "aria-label": ariaLabel = "Loading on this page navigation"
-}) {
-  return /* @__PURE__ */ jsx(
-    "nav",
-    {
-      "aria-label": ariaLabel,
-      "aria-hidden": "true",
-      className: cn("cb-anchor", `cb-anchor--${orientation}`, `cb-anchor--${size}`, `cb-anchor--${tone}`, "cb-anchor--skeleton"),
-      children: /* @__PURE__ */ jsx("ul", { className: "cb-anchor__list", children: Array.from({ length: items }, (_, index) => /* @__PURE__ */ jsx("li", { className: "cb-anchor__item", children: /* @__PURE__ */ jsx(Skeleton, { className: cn("cb-anchor__skeleton-link", index % 3 === 0 && "cb-anchor__skeleton-link--long") }) }, index)) })
-    }
-  );
-}
-function AnchorRoot({
-  items,
-  activeId,
-  orientation = "vertical",
-  size = "md",
-  tone = "brand",
-  motion = true,
-  "aria-label": ariaLabel = "On this page"
-}) {
-  return /* @__PURE__ */ jsx(
-    "nav",
-    {
-      "aria-label": ariaLabel,
-      className: cn(
-        "cb-anchor",
-        `cb-anchor--${orientation}`,
-        `cb-anchor--${size}`,
-        `cb-anchor--${tone}`,
-        !motion && "cb-anchor--motion-off"
-      ),
-      children: /* @__PURE__ */ jsx(AnchorList, { items, activeId })
-    }
-  );
-}
-function AnchorList({ items, activeId, nested = false }) {
-  return /* @__PURE__ */ jsx("ul", { className: cn("cb-anchor__list", nested && "cb-anchor__list--nested"), children: items.map((item) => /* @__PURE__ */ jsxs("li", { className: "cb-anchor__item", children: [
-    /* @__PURE__ */ jsx("a", { className: "cb-anchor__link", href: item.href, "aria-current": activeId === item.id ? "location" : void 0, children: item.label }),
-    item.children?.length ? /* @__PURE__ */ jsx(AnchorList, { items: item.children, activeId, nested: true }) : null
-  ] }, item.id)) });
-}
-var Anchor = Object.assign(AnchorRoot, { Skeleton: AnchorSkeleton });
-function Divider({ children, orientation = "horizontal", className }) {
-  if (orientation === "vertical") {
-    return /* @__PURE__ */ jsx("span", { className: cn("cb-divider", "cb-divider--vertical", className), role: "separator", "aria-orientation": "vertical" });
-  }
-  if (children) {
-    return /* @__PURE__ */ jsx("div", { className: cn("cb-divider", "cb-divider--labelled", className), role: "separator", children: /* @__PURE__ */ jsx("span", { className: "cb-divider__label", children }) });
-  }
-  return /* @__PURE__ */ jsx("hr", { className: cn("cb-divider", className) });
-}
-function Badge({ children, tone = "neutral", variant = "soft", size = "md", dot, className }) {
-  return /* @__PURE__ */ jsxs("span", { className: cn("cb-badge", `cb-badge--${variant}`, `cb-badge--${size}`, className), "data-tone": tone, children: [
-    dot ? /* @__PURE__ */ jsx("span", { className: "cb-badge__dot", "aria-hidden": "true" }) : null,
-    children
-  ] });
-}
-function Empty({ title, description, icon, actions, variant = "first-run", className }) {
-  return /* @__PURE__ */ jsxs("div", { className: cn("cb-empty", className), "data-variant": variant, children: [
-    icon ? /* @__PURE__ */ jsx("span", { className: "cb-empty__icon", children: icon }) : null,
-    /* @__PURE__ */ jsx("p", { className: "cb-empty__title", children: title }),
-    description ? /* @__PURE__ */ jsx("p", { className: "cb-empty__description", children: description }) : null,
-    actions ? /* @__PURE__ */ jsx("div", { className: "cb-empty__actions", children: actions }) : null
-  ] });
-}
-function ResultSkeleton() {
-  return /* @__PURE__ */ jsxs("section", { className: "cb-result cb-result--skeleton", "aria-hidden": "true", children: [
-    /* @__PURE__ */ jsx("span", { className: "cb-skeleton cb-result__skeleton-icon" }),
-    /* @__PURE__ */ jsx("span", { className: "cb-skeleton cb-result__skeleton-title" }),
-    /* @__PURE__ */ jsx("span", { className: "cb-skeleton cb-result__skeleton-description" }),
-    /* @__PURE__ */ jsxs("div", { className: "cb-result__skeleton-extra", children: [
-      /* @__PURE__ */ jsx("span", { className: "cb-skeleton cb-result__skeleton-action" }),
-      /* @__PURE__ */ jsx("span", { className: "cb-skeleton cb-result__skeleton-action" })
-    ] })
-  ] });
-}
-var STATUS_TONES = {
-  success: "success",
-  info: "info",
-  warning: "warning",
-  error: "danger",
-  "404": "neutral",
-  "403": "warning",
-  "500": "danger"
-};
-var STATUS_MARKS = {
-  success: "\u2713",
-  info: "i",
-  warning: "!",
-  error: "\xD7",
-  "404": "?",
-  "403": "!",
-  "500": "\xD7"
-};
-function ResultRoot({ title, description, status = "info", icon, extra, children }) {
-  const tone = STATUS_TONES[status];
-  return /* @__PURE__ */ jsxs("section", { className: "cb-result", "data-status": status, "data-tone": tone, children: [
-    /* @__PURE__ */ jsx("div", { className: "cb-result__icon", "aria-hidden": "true", children: icon ?? /* @__PURE__ */ jsx("span", { className: "cb-result__mark", children: STATUS_MARKS[status] }) }),
-    /* @__PURE__ */ jsx("div", { className: "cb-result__title", children: title }),
-    description ? /* @__PURE__ */ jsx("div", { className: "cb-result__description", children: description }) : null,
-    extra ? /* @__PURE__ */ jsx("div", { className: "cb-result__extra", children: extra }) : null,
-    children ? /* @__PURE__ */ jsx("div", { className: "cb-result__content", children }) : null
-  ] });
-}
-var Result = Object.assign(ResultRoot, { Skeleton: ResultSkeleton });
-function NotificationSkeleton({ lines = 2, withActions = false }) {
-  const safeLines = Number.isFinite(lines) ? Math.max(0, Math.floor(lines)) : 2;
-  return /* @__PURE__ */ jsxs("section", { className: "cb-notification cb-notification--skeleton", "aria-hidden": "true", children: [
-    /* @__PURE__ */ jsx("span", { className: "cb-skeleton cb-notification__skeleton-icon" }),
-    /* @__PURE__ */ jsxs("div", { className: "cb-notification__content", children: [
-      /* @__PURE__ */ jsx("span", { className: "cb-skeleton cb-notification__skeleton-title" }),
-      Array.from({ length: safeLines }, (_, index) => /* @__PURE__ */ jsx(
-        "span",
-        {
-          className: "cb-skeleton cb-notification__skeleton-line",
-          "data-last": index === safeLines - 1 || void 0
-        },
-        index
-      )),
-      withActions ? /* @__PURE__ */ jsx("div", { className: "cb-notification__actions", children: /* @__PURE__ */ jsx("span", { className: "cb-skeleton cb-notification__skeleton-action" }) }) : null
-    ] })
-  ] });
-}
-var ICONS = {
-  neutral: /* @__PURE__ */ jsx(Info, { size: 20 }),
-  info: /* @__PURE__ */ jsx(Info, { size: 20 }),
-  success: /* @__PURE__ */ jsx(CheckCircle2, { size: 20 }),
-  warning: /* @__PURE__ */ jsx(AlertTriangle, { size: 20 }),
-  danger: /* @__PURE__ */ jsx(XCircle, { size: 20 })
-};
-function NotificationRoot({
-  title,
-  description,
-  icon,
-  actions,
-  tone = "info",
-  announce = true
-}) {
-  const liveProps = announce ? { role: tone === "danger" ? "alert" : "status" } : {};
-  return /* @__PURE__ */ jsxs("section", { className: "cb-notification", "data-tone": tone, ...liveProps, children: [
-    icon === null ? null : /* @__PURE__ */ jsx("span", { className: "cb-notification__icon", "aria-hidden": "true", children: icon ?? ICONS[tone] }),
-    /* @__PURE__ */ jsxs("div", { className: "cb-notification__content", children: [
-      /* @__PURE__ */ jsx("div", { className: "cb-notification__title", children: title }),
-      description ? /* @__PURE__ */ jsx("div", { className: "cb-notification__description", children: description }) : null,
-      actions ? /* @__PURE__ */ jsx("div", { className: "cb-notification__actions", children: actions }) : null
-    ] })
-  ] });
-}
-var Notification = Object.assign(NotificationRoot, {
-  Skeleton: NotificationSkeleton
-});
-function QRCode({
-  value,
-  label,
-  size = "md",
-  errorCorrection = "M",
-  boostErrorCorrection = true
-}) {
-  if (value.length === 0) throw new RangeError("QRCode value must not be empty.");
-  if (label.trim().length === 0) throw new RangeError("QRCode label must not be empty.");
-  const matrix = encode(value, {
-    ecc: errorCorrection,
-    boostEcc: boostErrorCorrection,
-    // Four light modules are the ISO quiet-zone recommendation. This is encoding geometry,
-    // not visual spacing, so it intentionally does not use a CSS Token.
-    border: 4
-  });
-  return /* @__PURE__ */ jsxs(
-    "svg",
-    {
-      className: `cb-qr-code cb-qr-code--${size}`,
-      viewBox: `0 0 ${matrix.size} ${matrix.size}`,
-      role: "img",
-      "aria-label": label,
-      shapeRendering: "crispEdges",
-      xmlns: "http://www.w3.org/2000/svg",
-      children: [
-        /* @__PURE__ */ jsx("rect", { className: "cb-qr-code__background", width: matrix.size, height: matrix.size }),
-        /* @__PURE__ */ jsx("path", { className: "cb-qr-code__modules", d: matrixPath(matrix.data) })
-      ]
-    }
-  );
-}
-function matrixPath(data) {
-  const commands = [];
-  for (let row = 0; row < data.length; row += 1) {
-    for (let column = 0; column < data[row].length; column += 1) {
-      if (data[row][column]) commands.push(`M${column} ${row}h1v1h-1z`);
-    }
-  }
-  return commands.join("");
-}
-function Spin({ size = "md", tone = "brand", label, className }) {
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      className: cn("cb-spin", `cb-spin--${size}`, className),
-      "data-tone": tone,
-      role: label ? "status" : void 0,
-      "aria-label": label,
-      "aria-hidden": label ? void 0 : true
-    }
-  );
-}
-function ProgressBar({ value, max = 100, tone = "brand", size = "md", label, showValue, className }) {
-  const indeterminate = value === void 0;
-  const clamped = indeterminate ? 0 : Math.min(Math.max(value, 0), max);
-  const percent = max > 0 ? Math.round(clamped / max * 100) : 0;
-  return /* @__PURE__ */ jsxs("div", { className: cn("cb-progress", className), "data-tone": tone, "data-size": size, children: [
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: "cb-progress__track",
-        role: "progressbar",
-        "aria-label": label,
-        "aria-valuemin": indeterminate ? void 0 : 0,
-        "aria-valuemax": indeterminate ? void 0 : max,
-        "aria-valuenow": indeterminate ? void 0 : clamped,
-        children: /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: "cb-progress__fill",
-            "data-indeterminate": indeterminate || void 0,
-            style: indeterminate ? void 0 : { width: `${percent}%` }
-          }
-        )
-      }
-    ),
-    showValue && !indeterminate ? /* @__PURE__ */ jsxs("span", { className: "cb-progress__value", children: [
-      percent,
-      "%"
-    ] }) : null
-  ] });
-}
-function TimelineRoot({ entries, className }) {
-  return /* @__PURE__ */ jsx("ol", { className: cn("cb-timeline", className), children: entries.map((entry, index) => /* @__PURE__ */ jsxs("li", { className: "cb-timeline__entry", "data-tone": entry.tone ?? "neutral", children: [
-    /* @__PURE__ */ jsx("span", { className: "cb-timeline__rail", "aria-hidden": "true", children: /* @__PURE__ */ jsx("span", { className: "cb-timeline__marker", children: entry.icon }) }),
-    /* @__PURE__ */ jsxs("div", { className: "cb-timeline__body", children: [
-      /* @__PURE__ */ jsxs("div", { className: "cb-timeline__head", children: [
-        /* @__PURE__ */ jsx("p", { className: "cb-timeline__title", children: entry.title }),
-        /* @__PURE__ */ jsx("span", { className: "cb-timeline__time", children: entry.time })
-      ] }),
-      entry.description ? /* @__PURE__ */ jsx("p", { className: "cb-timeline__description", children: entry.description }) : null
-    ] })
-  ] }, index)) });
-}
-function TimelineSkeleton({ entries = 3, className }) {
-  return /* @__PURE__ */ jsx("div", { className: cn("cb-timeline", className), "aria-hidden": "true", children: Array.from({ length: entries }, (_, index) => /* @__PURE__ */ jsxs("div", { className: "cb-timeline__entry", children: [
-    /* @__PURE__ */ jsx("span", { className: "cb-timeline__rail", children: /* @__PURE__ */ jsx(Skeleton.Circle, { size: "1.5rem" }) }),
-    /* @__PURE__ */ jsxs("div", { className: "cb-timeline__body", children: [
-      /* @__PURE__ */ jsx(Skeleton, { width: "45%", height: "0.875rem" }),
-      /* @__PURE__ */ jsx("div", { style: { marginTop: "var(--cb-space-2)" }, children: /* @__PURE__ */ jsx(Skeleton, { width: "70%", height: "0.75rem" }) })
-    ] })
-  ] }, index)) });
-}
-var Timeline = Object.assign(TimelineRoot, { Skeleton: TimelineSkeleton });
-
-// src/data/progress-ring.math.ts
-function ringGeometry(value, max, size, thickness) {
-  const safeMax = max > 0 ? max : 1;
-  const clamped = Math.min(Math.max(Number.isFinite(value) ? value : 0, 0), safeMax);
-  const radius = (size - thickness) / 2;
-  const circumference = 2 * Math.PI * radius;
-  const dashOffset = circumference * (1 - clamped / safeMax);
-  return { radius, circumference, dashOffset, clamped };
-}
-function ProgressRing({
-  value,
-  max = 100,
-  size = 96,
-  thickness = 10,
-  tone = "brand",
-  hue,
-  children,
-  label,
-  className
-}) {
-  const { radius, circumference, dashOffset, clamped } = ringGeometry(value, max, size, thickness);
-  const center = size / 2;
-  const style = {
-    "--cb-ring-size": `${size}px`,
-    "--cb-ring-circumference": `${circumference}`,
-    "--cb-ring-offset": `${dashOffset}`
-  };
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: cn("cb-ring", className),
-      style,
-      "data-tone": tone,
-      "data-hue": hue,
-      role: "img",
-      "aria-label": `${label}: ${Math.round(clamped / (max || 1) * 100)}%`,
-      children: [
-        /* @__PURE__ */ jsxs("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, "aria-hidden": "true", children: [
-          /* @__PURE__ */ jsx("circle", { className: "cb-ring__track", cx: center, cy: center, r: radius, strokeWidth: thickness, fill: "none" }),
-          /* @__PURE__ */ jsx(
-            "circle",
-            {
-              className: "cb-ring__value",
-              cx: center,
-              cy: center,
-              r: radius,
-              strokeWidth: thickness,
-              fill: "none",
-              strokeLinecap: "round",
-              strokeDasharray: circumference,
-              strokeDashoffset: dashOffset,
-              transform: `rotate(-90 ${center} ${center})`
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: "cb-ring__center", children: children ?? `${Math.round(clamped / (max || 1) * 100)}%` })
-      ]
-    }
-  );
-}
 
 // src/data/donut.math.ts
 function donutArcs(slices, circumference) {
@@ -740,8 +228,6 @@ function BarMini({ values, width = 120, height = 32, tone = "brand", hue, label,
     );
   }) }) });
 }
-
-// src/media/avatar.util.ts
 var HUES = ["violet", "blue", "teal", "green", "amber", "rose"];
 function initialsOf(name) {
   const words = name.trim().split(/\s+/).filter(Boolean);
@@ -755,31 +241,6 @@ function hueForName(name) {
   for (let i = 0; i < name.length; i += 1) hash = hash * 31 + name.charCodeAt(i) >>> 0;
   return HUES[hash % HUES.length];
 }
-function Avatar({ name, src, size = "md", hue, status, className }) {
-  return /* @__PURE__ */ jsxs(
-    "span",
-    {
-      className: cn("cb-avatar", `cb-avatar--${size}`, className),
-      "data-hue": hue ?? hueForName(name),
-      role: "img",
-      "aria-label": name,
-      children: [
-        /* @__PURE__ */ jsx("span", { className: "cb-avatar__initials", "aria-hidden": "true", children: initialsOf(name) }),
-        src ? /* @__PURE__ */ jsx("img", { className: "cb-avatar__image", src, alt: "", loading: "lazy" }) : null,
-        status ? /* @__PURE__ */ jsx("span", { className: "cb-avatar__status", "data-status": status, "aria-hidden": "true" }) : null
-      ]
-    }
-  );
-}
-function AvatarGroup({ children, overflow, size = "md", className }) {
-  return /* @__PURE__ */ jsxs("span", { className: cn("cb-avatar-group", className), children: [
-    children,
-    overflow && overflow > 0 ? /* @__PURE__ */ jsx("span", { className: cn("cb-avatar", `cb-avatar--${size}`, "cb-avatar--overflow"), children: /* @__PURE__ */ jsxs("span", { className: "cb-avatar__initials", children: [
-      "+",
-      overflow
-    ] }) }) : null
-  ] });
-}
 function LeaderboardRoot({ entries, label, medals = true, className }) {
   return /* @__PURE__ */ jsx("ol", { className: cn("cb-leaderboard", className), "aria-label": label, children: entries.map((entry, index) => {
     const rank = index + 1;
@@ -791,7 +252,19 @@ function LeaderboardRoot({ entries, label, medals = true, className }) {
         "data-you": entry.you || void 0,
         children: [
           /* @__PURE__ */ jsx("span", { className: "cb-leaderboard__rank", "aria-hidden": "true", children: rank }),
-          /* @__PURE__ */ jsx(Avatar, { name: entry.name, src: entry.avatarSrc, size: "sm", hue: entry.hue }),
+          /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: "cb-leaderboard__avatar",
+              "data-hue": entry.hue ?? hueForName(entry.name),
+              role: "img",
+              "aria-label": entry.name,
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "cb-leaderboard__initials", "aria-hidden": "true", children: initialsOf(entry.name) }),
+                entry.avatarSrc ? /* @__PURE__ */ jsx("img", { className: "cb-leaderboard__photo", src: entry.avatarSrc, alt: "", loading: "lazy" }) : null
+              ]
+            }
+          ),
           /* @__PURE__ */ jsxs("span", { className: "cb-leaderboard__text", children: [
             /* @__PURE__ */ jsxs("span", { className: "cb-leaderboard__name", children: [
               entry.name,
@@ -807,317 +280,6 @@ function LeaderboardRoot({ entries, label, medals = true, className }) {
     );
   }) });
 }
-function LeaderboardSkeleton({ rows = 5, className }) {
-  return /* @__PURE__ */ jsx("div", { className: cn("cb-leaderboard", className), "aria-hidden": "true", children: Array.from({ length: rows }, (_, index) => /* @__PURE__ */ jsxs("div", { className: "cb-leaderboard__row", children: [
-    /* @__PURE__ */ jsx("span", { className: "cb-leaderboard__rank", children: /* @__PURE__ */ jsx(Skeleton, { width: "0.75rem", height: "0.75rem" }) }),
-    /* @__PURE__ */ jsx(Skeleton.Circle, { size: "1.75rem" }),
-    /* @__PURE__ */ jsx("span", { className: "cb-leaderboard__text", children: /* @__PURE__ */ jsx(Skeleton, { width: "7rem", height: "0.875rem" }) }),
-    /* @__PURE__ */ jsx(Skeleton, { width: "2.5rem", height: "0.875rem" })
-  ] }, index)) });
-}
-var Leaderboard = Object.assign(LeaderboardRoot, { Skeleton: LeaderboardSkeleton });
-function Breadcrumb({ items, maxItems = 4, className }) {
-  const collapsed = items.length > maxItems ? [items[0], { label: "\u2026" }, ...items.slice(items.length - (maxItems - 2))] : items;
-  return /* @__PURE__ */ jsx("nav", { className: cn("cb-crumbs", className), "aria-label": "Breadcrumb", children: /* @__PURE__ */ jsx("ol", { className: "cb-crumbs__list", children: collapsed.map((crumb, index) => {
-    const isLast = index === collapsed.length - 1;
-    return /* @__PURE__ */ jsxs("li", { className: "cb-crumbs__item", children: [
-      isLast ? /* @__PURE__ */ jsx("span", { className: "cb-crumbs__current", "aria-current": "page", children: crumb.label }) : crumb.href ? /* @__PURE__ */ jsx("a", { className: "cb-crumbs__link", href: crumb.href, children: crumb.label }) : /* @__PURE__ */ jsx("span", { className: "cb-crumbs__text", children: crumb.label }),
-      isLast ? null : /* @__PURE__ */ jsx(ChevronRight, { size: 14, className: "cb-crumbs__separator", "aria-hidden": "true" })
-    ] }, `${String(crumb.label)}-${index}`);
-  }) }) });
-}
-function Steps({ steps, current, orientation = "horizontal", className }) {
-  return /* @__PURE__ */ jsx("ol", { className: cn("cb-steps", `cb-steps--${orientation}`, className), children: steps.map((step, index) => {
-    const state = index < current ? "done" : index === current ? "current" : "todo";
-    return /* @__PURE__ */ jsxs("li", { className: "cb-steps__step", "data-state": state, children: [
-      /* @__PURE__ */ jsx("span", { className: "cb-steps__marker", "aria-hidden": "true", children: state === "done" ? /* @__PURE__ */ jsx(Check, { size: 13, strokeWidth: 3 }) : index + 1 }),
-      /* @__PURE__ */ jsxs("span", { className: "cb-steps__text", children: [
-        /* @__PURE__ */ jsxs("span", { className: "cb-steps__label", children: [
-          step.label,
-          /* @__PURE__ */ jsx("span", { className: "cb-visually-hidden", children: state === "done" ? " (completed)" : state === "current" ? " (current step)" : "" })
-        ] }),
-        step.description ? /* @__PURE__ */ jsx("span", { className: "cb-steps__description", children: step.description }) : null
-      ] })
-    ] }, index);
-  }) });
-}
-function Statistic({ label, value, delta, caption, hue, icon, visual, className }) {
-  return /* @__PURE__ */ jsxs(Surface, { variant: "tinted", hue, radius: "lg", padding: "md", className: cn("cb-stat", className), children: [
-    /* @__PURE__ */ jsxs("div", { className: "cb-stat__head", children: [
-      /* @__PURE__ */ jsx(Text, { size: "sm", tone: "muted", weight: "medium", children: label }),
-      icon ? /* @__PURE__ */ jsx("span", { className: "cb-stat__icon", children: icon }) : null
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "cb-stat__body", children: [
-      /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("p", { className: "cb-stat__value cb-numeric", children: value }),
-        delta ? /* @__PURE__ */ jsx("span", { className: "cb-stat__delta", "data-direction": delta.direction, children: delta.value }) : null,
-        caption ? /* @__PURE__ */ jsx(Text, { size: "xs", tone: "subtle", className: "cb-stat__caption", children: caption }) : null
-      ] }),
-      visual ? /* @__PURE__ */ jsx("div", { className: "cb-stat__visual", children: visual }) : null
-    ] })
-  ] });
-}
-function StatCardSkeleton({ withVisual = false, className }) {
-  return /* @__PURE__ */ jsxs(Surface, { variant: "tinted", radius: "lg", padding: "md", className: cn("cb-stat", className), children: [
-    /* @__PURE__ */ jsx("div", { className: "cb-stat__head", children: /* @__PURE__ */ jsx(Skeleton, { width: "7rem", height: "0.875rem" }) }),
-    /* @__PURE__ */ jsxs("div", { className: "cb-stat__body", children: [
-      /* @__PURE__ */ jsxs("div", { className: "cb-stat__skeleton-col", children: [
-        /* @__PURE__ */ jsx(Skeleton, { width: "5.5rem", height: "2rem" }),
-        /* @__PURE__ */ jsx(Skeleton, { width: "3.5rem", height: "0.75rem" })
-      ] }),
-      withVisual ? /* @__PURE__ */ jsx(Skeleton.Circle, { size: "4rem" }) : null
-    ] })
-  ] });
-}
-Statistic.Skeleton = StatCardSkeleton;
-function CardSkeletonContent({ lines = 3, meta = false }) {
-  if (meta) {
-    return /* @__PURE__ */ jsxs("div", { className: "cb-card-meta", children: [
-      /* @__PURE__ */ jsx(Skeleton.Circle, { size: "2.5rem", className: "cb-card-meta__avatar" }),
-      /* @__PURE__ */ jsxs("div", { className: "cb-card-meta__content", children: [
-        /* @__PURE__ */ jsx(Skeleton, { width: "45%", height: "0.875rem" }),
-        /* @__PURE__ */ jsx(Skeleton.Text, { lines })
-      ] })
-    ] });
-  }
-  return /* @__PURE__ */ jsx(Skeleton.Text, { lines });
-}
-function CardSkeleton({
-  size = "md",
-  variant = "plain",
-  glassStyle = "regular",
-  tone = "neutral",
-  hue,
-  elevation = "sm",
-  radius = "lg",
-  bordered = true,
-  withCover = false,
-  withActions = false,
-  meta = false,
-  lines = 3,
-  className
-}) {
-  return /* @__PURE__ */ jsxs(
-    Surface,
-    {
-      variant,
-      glassStyle,
-      tone,
-      hue,
-      elevation,
-      radius,
-      padding: "none",
-      bordered,
-      className: cn("cb-card", `cb-card--${size}`, "cb-card--skeleton", className),
-      children: [
-        withCover ? /* @__PURE__ */ jsx("div", { className: "cb-card__cover cb-card__skeleton-cover", children: /* @__PURE__ */ jsx(Skeleton.Rect, { width: "100%", height: "100%", radius: "sm" }) }) : null,
-        /* @__PURE__ */ jsx("div", { className: "cb-card__body", children: /* @__PURE__ */ jsx(CardSkeletonContent, { lines, meta }) }),
-        withActions ? /* @__PURE__ */ jsxs("div", { className: "cb-card__actions cb-card__skeleton-actions", children: [
-          /* @__PURE__ */ jsx(Skeleton, { width: "5rem", height: "2rem" }),
-          /* @__PURE__ */ jsx(Skeleton, { width: "5rem", height: "2rem" })
-        ] }) : null
-      ]
-    }
-  );
-}
-function CardRoot({
-  title,
-  extra,
-  cover,
-  tabs,
-  actions,
-  children,
-  size = "md",
-  variant = "plain",
-  glassStyle = "regular",
-  tone = "neutral",
-  hue,
-  elevation = "sm",
-  radius = "lg",
-  bordered = true,
-  hoverable = false,
-  nested = false,
-  loading = false,
-  asSection = false,
-  className
-}) {
-  const hasHeader = title != null || extra != null;
-  const hasBody = loading || children != null;
-  return /* @__PURE__ */ jsxs(
-    Surface,
-    {
-      variant,
-      glassStyle,
-      tone,
-      hue,
-      elevation,
-      radius,
-      padding: "none",
-      bordered,
-      asSection,
-      className: cn(
-        "cb-card",
-        `cb-card--${size}`,
-        hoverable && "cb-card--hoverable",
-        nested && "cb-card--nested",
-        className
-      ),
-      children: [
-        cover ? /* @__PURE__ */ jsx("div", { className: "cb-card__cover", children: cover }) : null,
-        hasHeader ? /* @__PURE__ */ jsxs("header", { className: "cb-card__header", children: [
-          title != null ? /* @__PURE__ */ jsx("div", { className: "cb-card__title", children: title }) : null,
-          extra != null ? /* @__PURE__ */ jsx("div", { className: "cb-card__extra", children: extra }) : null
-        ] }) : null,
-        tabs ? /* @__PURE__ */ jsx("div", { className: "cb-card__tabs", children: tabs }) : null,
-        hasBody ? /* @__PURE__ */ jsx("div", { className: "cb-card__body", "aria-busy": loading || void 0, children: loading ? /* @__PURE__ */ jsx(CardSkeletonContent, {}) : children }) : null,
-        actions ? /* @__PURE__ */ jsx("footer", { className: "cb-card__actions", children: actions }) : null
-      ]
-    }
-  );
-}
-function CardMeta({ avatar, title, description, className }) {
-  return /* @__PURE__ */ jsxs("div", { className: cn("cb-card-meta", className), children: [
-    avatar ? /* @__PURE__ */ jsx("div", { className: "cb-card-meta__avatar", children: avatar }) : null,
-    /* @__PURE__ */ jsxs("div", { className: "cb-card-meta__content", children: [
-      title != null ? /* @__PURE__ */ jsx("div", { className: "cb-card-meta__title", children: title }) : null,
-      description != null ? /* @__PURE__ */ jsx("div", { className: "cb-card-meta__description", children: description }) : null
-    ] })
-  ] });
-}
-function CardGrid({ columns = 3, gap = 0, minItemWidth, className, children }) {
-  return /* @__PURE__ */ jsx(
-    Grid,
-    {
-      columns,
-      gap,
-      minItemWidth,
-      className: cn("cb-card-grid", className),
-      children
-    }
-  );
-}
-var Card = Object.assign(CardRoot, {
-  Meta: CardMeta,
-  Grid: CardGrid,
-  Skeleton: CardSkeleton
-});
-function DescriptionsSkeleton({
-  columns = 3,
-  layout = "horizontal",
-  size = "md",
-  bordered = false,
-  items = 6,
-  className
-}) {
-  return /* @__PURE__ */ jsx(
-    "section",
-    {
-      "aria-hidden": "true",
-      className: cn(
-        "cb-descriptions",
-        `cb-descriptions--${size}`,
-        `cb-descriptions--${layout}`,
-        bordered && "cb-descriptions--bordered",
-        "cb-descriptions--skeleton",
-        className
-      ),
-      "data-columns": columns,
-      style: { "--cb-descriptions-columns": columns },
-      children: /* @__PURE__ */ jsx("dl", { className: "cb-descriptions__list", children: Array.from({ length: items }, (_, index) => /* @__PURE__ */ jsxs("div", { className: "cb-descriptions__item", children: [
-        /* @__PURE__ */ jsx("dt", { className: "cb-descriptions__label cb-descriptions__skeleton-label", children: /* @__PURE__ */ jsx(Skeleton, {}) }),
-        /* @__PURE__ */ jsx("dd", { className: "cb-descriptions__value cb-descriptions__skeleton-value", children: /* @__PURE__ */ jsx(Skeleton, {}) })
-      ] }, index)) })
-    }
-  );
-}
-function DescriptionsItem({ label, children, span = 1, className }) {
-  return /* @__PURE__ */ jsxs("div", { className: cn("cb-descriptions__item", `cb-descriptions__item--span-${span}`, className), children: [
-    /* @__PURE__ */ jsx("dt", { className: "cb-descriptions__label", children: label }),
-    /* @__PURE__ */ jsx("dd", { className: "cb-descriptions__value", children })
-  ] });
-}
-function DescriptionsRoot({
-  title,
-  extra,
-  children,
-  columns = 3,
-  layout = "horizontal",
-  size = "md",
-  bordered = false,
-  colon = true,
-  className
-}) {
-  const hasHeader = title != null || extra != null;
-  return /* @__PURE__ */ jsxs(
-    "section",
-    {
-      className: cn(
-        "cb-descriptions",
-        `cb-descriptions--${size}`,
-        `cb-descriptions--${layout}`,
-        bordered && "cb-descriptions--bordered",
-        !colon && "cb-descriptions--without-colon",
-        className
-      ),
-      "data-columns": columns,
-      style: { "--cb-descriptions-columns": columns },
-      children: [
-        hasHeader ? /* @__PURE__ */ jsxs("header", { className: "cb-descriptions__header", children: [
-          title != null ? /* @__PURE__ */ jsx("div", { className: "cb-descriptions__title", children: title }) : null,
-          extra != null ? /* @__PURE__ */ jsx("div", { className: "cb-descriptions__extra", children: extra }) : null
-        ] }) : null,
-        /* @__PURE__ */ jsx("dl", { className: "cb-descriptions__list", children })
-      ]
-    }
-  );
-}
-var Descriptions = Object.assign(DescriptionsRoot, {
-  Item: DescriptionsItem,
-  Skeleton: DescriptionsSkeleton
-});
-function ListySkeleton({ items = 5, grouped: grouped2 = false }) {
-  return /* @__PURE__ */ jsx("ul", { className: "cb-listy cb-listy--skeleton", "aria-hidden": "true", children: /* @__PURE__ */ jsxs("li", { className: grouped2 ? "cb-listy__group" : "cb-listy__section", children: [
-    grouped2 ? /* @__PURE__ */ jsx(Skeleton, { className: "cb-listy__skeleton-heading" }) : null,
-    /* @__PURE__ */ jsx("ul", { className: grouped2 ? "cb-listy__group-items" : "cb-listy__section-items", children: Array.from({ length: items }, (_, index) => /* @__PURE__ */ jsx("li", { className: "cb-listy__item", children: /* @__PURE__ */ jsx(Skeleton, { className: "cb-listy__skeleton-row" }) }, index)) })
-  ] }) });
-}
-function grouped(items, getKey, getGroup) {
-  const itemKeys = /* @__PURE__ */ new Set();
-  const closedGroups = /* @__PURE__ */ new Set();
-  const result = [];
-  let activeGroupKey;
-  items.forEach((item, index) => {
-    const key = getKey(item);
-    if (itemKeys.has(key)) throw new RangeError(`Listy item keys must be unique: ${key}`);
-    itemKeys.add(key);
-    const group = getGroup?.(item);
-    if (group && group.key.length === 0) throw new RangeError("Listy group keys must not be empty.");
-    if (group?.key !== activeGroupKey) {
-      if (activeGroupKey) closedGroups.add(activeGroupKey);
-      if (group && closedGroups.has(group.key)) throw new RangeError(`Listy group keys must be contiguous: ${group.key}`);
-      result.push({ group, entries: [] });
-      activeGroupKey = group?.key;
-    }
-    if (result.length === 0) result.push({ entries: [] });
-    result[result.length - 1].entries.push({ item, index, key });
-  });
-  return result;
-}
-function ListyRoot({
-  items,
-  getKey,
-  renderItem,
-  getGroup,
-  stickyGroupHeadings = false,
-  optimizeRendering = false,
-  "aria-label": ariaLabel = "List"
-}) {
-  const sections = grouped(items, getKey, getGroup);
-  return /* @__PURE__ */ jsx("ul", { className: "cb-listy", "aria-label": ariaLabel, "data-optimized": optimizeRendering || void 0, children: sections.flatMap((section, sectionIndex) => section.group ? /* @__PURE__ */ jsxs("li", { className: "cb-listy__group", children: [
-    /* @__PURE__ */ jsx("div", { className: "cb-listy__group-heading", "data-sticky": stickyGroupHeadings || void 0, children: section.group.label }),
-    /* @__PURE__ */ jsx("ul", { className: "cb-listy__group-items", children: section.entries.map(({ item, index, key }) => /* @__PURE__ */ jsx("li", { className: "cb-listy__item", children: renderItem(item, index) }, key)) })
-  ] }, section.group.key) : section.entries.map(({ item, index, key }) => /* @__PURE__ */ jsx("li", { className: "cb-listy__item", children: renderItem(item, index) }, `${sectionIndex}-${key}`))) });
-}
-var Listy = Object.assign(ListyRoot, { Skeleton: ListySkeleton });
+var Leaderboard = LeaderboardRoot;
 
-export { Affix, Anchor, AnchorSkeleton, Avatar, AvatarGroup, Badge, BarMini, Breadcrumb, Card, Container, Descriptions, Divider, Donut, Empty, Flex, Grid, Heading, Leaderboard, LinkButton, Listy, ListySkeleton, Masonry, MasonrySkeleton, Notification, NotificationSkeleton, PageContainer, PageContainerSkeleton, ProgressBar, ProgressRing, QRCode, Result, ResultSkeleton, Skeleton, Space, SpaceSkeleton, Sparkline, Spin, Statistic, Steps, Surface, Text, Timeline, cn, donutArcs, hueForName, initialsOf, ringGeometry, sparklineGeometry };
+export { BarMini, Container, Donut, Flex, Grid, Heading, Leaderboard, PageContainer, PageContainerSkeleton, Sparkline, Surface, Text, cn, donutArcs, sparklineGeometry };