@ceebee/ui 0.2.0

package/dist/index.js

@@ -0,0 +1,486 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { ChevronRight, Check } from 'lucide-react';
+
+// src/lib/cn.ts
+function cn(...parts) {
+  return parts.filter(Boolean).join(" ");
+}
+function Surface({
+  variant = "plain",
+  tone = "neutral",
+  hue,
+  elevation = "sm",
+  radius = "lg",
+  padding = "md",
+  bordered = true,
+  className,
+  children,
+  asSection = false
+}) {
+  const Tag = asSection ? "section" : "div";
+  return /* @__PURE__ */ jsx(
+    Tag,
+    {
+      className: cn(
+        "cb-surface",
+        `cb-surface--${variant}`,
+        `cb-elevation--${elevation}`,
+        `cb-radius--${radius}`,
+        `cb-pad--${padding}`,
+        bordered && "cb-surface--bordered",
+        className
+      ),
+      "data-tone": variant === "plain" ? void 0 : tone,
+      "data-hue": hue,
+      children
+    }
+  );
+}
+function Stack({
+  direction = "column",
+  gap = 4,
+  align = "stretch",
+  justify = "start",
+  wrap = false,
+  className,
+  children
+}) {
+  const style = { "--cb-stack-gap": `var(--cb-space-${gap})` };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("cb-stack", `cb-stack--${direction}`, wrap && "cb-stack--wrap", className),
+      style,
+      "data-align": align,
+      "data-justify": justify,
+      children
+    }
+  );
+}
+function Grid({ columns = 3, gap = 4, minItemWidth, className, children }) {
+  const style = {
+    "--cb-grid-gap": `var(--cb-space-${gap})`,
+    "--cb-grid-columns": String(columns),
+    ...minItemWidth ? { "--cb-grid-min": minItemWidth } : {}
+  };
+  return /* @__PURE__ */ jsx("div", { className: cn("cb-grid", minItemWidth && "cb-grid--auto", className), style, children });
+}
+function Container({ size = "lg", className, children }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("cb-container", `cb-container--${size}`, className), children });
+}
+function Text({
+  size = "md",
+  tone = "neutral",
+  weight = "regular",
+  as: Tag = "p",
+  numeric = false,
+  className,
+  children
+}) {
+  return /* @__PURE__ */ jsx(
+    Tag,
+    {
+      className: cn("cb-text", `cb-text--${size}`, `cb-weight--${weight}`, numeric && "cb-numeric", className),
+      "data-tone": tone,
+      children
+    }
+  );
+}
+function Heading({ level = 2, size, className, children }) {
+  const Tag = `h${level}`;
+  const resolved = size ?? ["3xl", "2xl", "xl", "lg"][level - 1] ?? "lg";
+  return /* @__PURE__ */ jsx(Tag, { className: cn("cb-heading", `cb-text--${resolved}`, className), children });
+}
+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 EmptyState({ 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 Spinner({ size = "md", tone = "brand", label, className }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn("cb-spinner", `cb-spinner--${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 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
+});
+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) {
+  const usable = slices.filter((slice) => Number.isFinite(slice.value) && slice.value > 0);
+  const total = usable.reduce((sum, slice) => sum + slice.value, 0);
+  if (total <= 0) return [];
+  let consumed = 0;
+  return usable.map((slice, index) => {
+    const fraction = slice.value / total;
+    const length = fraction * circumference;
+    const arc = { ...slice, fraction, length, offset: -consumed, index };
+    consumed += length;
+    return arc;
+  });
+}
+var DEFAULT_HUES = ["violet", "blue", "teal", "green", "amber", "rose"];
+function Donut({ slices, size = 120, thickness = 16, hues = DEFAULT_HUES, children, label, className }) {
+  const radius = (size - thickness) / 2;
+  const circumference = 2 * Math.PI * radius;
+  const arcs = donutArcs(slices, circumference);
+  const center = size / 2;
+  return /* @__PURE__ */ jsxs("div", { className: cn("cb-donut", className), style: { width: size, height: size }, role: "img", "aria-label": label, children: [
+    /* @__PURE__ */ jsxs("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, "aria-hidden": "true", children: [
+      /* @__PURE__ */ jsx("circle", { className: "cb-donut__track", cx: center, cy: center, r: radius, strokeWidth: thickness, fill: "none" }),
+      arcs.map((arc) => /* @__PURE__ */ jsx(
+        "circle",
+        {
+          className: "cb-donut__arc",
+          "data-hue": hues[arc.index % hues.length],
+          cx: center,
+          cy: center,
+          r: radius,
+          strokeWidth: thickness,
+          fill: "none",
+          strokeDasharray: `${arc.length} ${circumference - arc.length}`,
+          strokeDashoffset: arc.offset,
+          transform: `rotate(-90 ${center} ${center})`
+        },
+        `${arc.label}-${arc.index}`
+      ))
+    ] }),
+    children ? /* @__PURE__ */ jsx("div", { className: "cb-donut__center", children }) : null
+  ] });
+}
+
+// src/data/sparkline.math.ts
+function sparklineGeometry(values, width, height, padding = 1) {
+  const usable = values.filter((value) => Number.isFinite(value));
+  if (usable.length === 0) return { line: "", area: "", points: [] };
+  const min = Math.min(...usable);
+  const max = Math.max(...usable);
+  const span = max - min;
+  const innerHeight = height - padding * 2;
+  const step = usable.length > 1 ? width / (usable.length - 1) : 0;
+  const points = usable.map((value, index) => ({
+    x: usable.length === 1 ? width / 2 : index * step,
+    // A flat series sits on the middle line rather than collapsing onto the floor.
+    y: padding + (span === 0 ? innerHeight / 2 : innerHeight - (value - min) / span * innerHeight)
+  }));
+  const line = points.map((point, index) => `${index === 0 ? "M" : "L"}${round(point.x)} ${round(point.y)}`).join(" ");
+  const area = `${line} L${round(points[points.length - 1].x)} ${height} L${round(points[0].x)} ${height} Z`;
+  return { line, area, points };
+}
+function round(value) {
+  return Math.round(value * 100) / 100;
+}
+function Sparkline({
+  values,
+  width = 120,
+  height = 32,
+  tone = "brand",
+  hue,
+  filled = false,
+  showLast = true,
+  label,
+  className
+}) {
+  const { line, area, points } = sparklineGeometry(values, width, height);
+  const last = points[points.length - 1];
+  return /* @__PURE__ */ jsx("div", { className: cn("cb-sparkline", className), "data-tone": tone, "data-hue": hue, role: "img", "aria-label": label, children: /* @__PURE__ */ jsxs("svg", { width, height, viewBox: `0 0 ${width} ${height}`, "aria-hidden": "true", children: [
+    filled && area ? /* @__PURE__ */ jsx("path", { className: "cb-sparkline__area", d: area }) : null,
+    line ? /* @__PURE__ */ jsx("path", { className: "cb-sparkline__line", d: line, fill: "none" }) : null,
+    showLast && last ? /* @__PURE__ */ jsx("circle", { className: "cb-sparkline__last", cx: last.x, cy: last.y, r: 2.5 }) : null
+  ] }) });
+}
+function BarMini({ values, width = 120, height = 32, tone = "brand", hue, label, className }) {
+  const usable = values.filter((value) => Number.isFinite(value));
+  const max = Math.max(...usable, 0);
+  const gap = 2;
+  const barWidth = usable.length > 0 ? Math.max((width - gap * (usable.length - 1)) / usable.length, 1) : 0;
+  return /* @__PURE__ */ jsx("div", { className: cn("cb-sparkline", className), "data-tone": tone, "data-hue": hue, role: "img", "aria-label": label, children: /* @__PURE__ */ jsx("svg", { width, height, viewBox: `0 0 ${width} ${height}`, "aria-hidden": "true", children: usable.map((value, index) => {
+    const barHeight = max > 0 ? Math.max(value / max * height, 1) : 1;
+    return /* @__PURE__ */ jsx(
+      "rect",
+      {
+        className: "cb-sparkline__bar",
+        x: index * (barWidth + gap),
+        y: height - barHeight,
+        width: barWidth,
+        height: barHeight,
+        rx: 1
+      },
+      index
+    );
+  }) }) });
+}
+
+// src/media/avatar.util.ts
+var HUES = ["violet", "blue", "teal", "green", "amber", "rose"];
+function initialsOf(name) {
+  const words = name.trim().split(/\s+/).filter(Boolean);
+  if (words.length === 0) return "?";
+  const first = words[0][0] ?? "";
+  const last = words.length > 1 ? words[words.length - 1][0] ?? "" : "";
+  return (first + last).toUpperCase();
+}
+function hueForName(name) {
+  let hash = 0;
+  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;
+    return /* @__PURE__ */ jsxs(
+      "li",
+      {
+        className: "cb-leaderboard__row",
+        "data-rank": medals && rank <= 3 ? rank : void 0,
+        "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__text", children: [
+            /* @__PURE__ */ jsxs("span", { className: "cb-leaderboard__name", children: [
+              entry.name,
+              entry.you ? /* @__PURE__ */ jsx("span", { className: "cb-leaderboard__you", children: "You" }) : null
+            ] }),
+            entry.detail ? /* @__PURE__ */ jsx("span", { className: "cb-leaderboard__detail", children: entry.detail }) : null
+          ] }),
+          entry.delta ? /* @__PURE__ */ jsx("span", { className: "cb-leaderboard__delta", "data-direction": entry.delta.direction, children: entry.delta.value }) : null,
+          /* @__PURE__ */ jsx("span", { className: "cb-leaderboard__score", children: entry.score })
+        ]
+      },
+      entry.id
+    );
+  }) });
+}
+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 Breadcrumbs({ 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 Stepper({ steps, current, orientation = "horizontal", className }) {
+  return /* @__PURE__ */ jsx("ol", { className: cn("cb-stepper", `cb-stepper--${orientation}`, className), children: steps.map((step, index) => {
+    const state = index < current ? "done" : index === current ? "current" : "todo";
+    return /* @__PURE__ */ jsxs("li", { className: "cb-stepper__step", "data-state": state, children: [
+      /* @__PURE__ */ jsx("span", { className: "cb-stepper__marker", "aria-hidden": "true", children: state === "done" ? /* @__PURE__ */ jsx(Check, { size: 13, strokeWidth: 3 }) : index + 1 }),
+      /* @__PURE__ */ jsxs("span", { className: "cb-stepper__text", children: [
+        /* @__PURE__ */ jsxs("span", { className: "cb-stepper__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-stepper__description", children: step.description }) : null
+      ] })
+    ] }, index);
+  }) });
+}
+function StatCard({ 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
+    ] })
+  ] });
+}
+StatCard.Skeleton = StatCardSkeleton;
+
+export { Avatar, AvatarGroup, Badge, BarMini, Breadcrumbs, Container, Donut, EmptyState, Grid, Heading, Leaderboard, ProgressBar, ProgressRing, Skeleton, Sparkline, Spinner, Stack, StatCard, Stepper, Surface, Text, Timeline, cn, donutArcs, hueForName, initialsOf, ringGeometry, sparklineGeometry };

package/dist/skins/astra.css

@@ -0,0 +1,30 @@
+/* The "Astra" skin: the violet-to-blue gradient dashboard look from the reference board.
+   A Skin rewrites skin tokens only — never structure, never a component rule (ADR 0002). */
+:root {
+  --cb-hue-brand: 278;
+
+  --cb-bg: oklch(0.97 0.02 285);
+  --cb-bg-subtle: oklch(0.94 0.035 280);
+  --cb-surface: oklch(1 0 0 / 0.86);
+  --cb-surface-raised: oklch(1 0 0);
+  --cb-border: oklch(0.9 0.02 285);
+
+  --cb-tint-strength: 0.12;
+  --cb-glass-blur: 22px;
+  --cb-shadow-md: 0 8px 28px oklch(0.45 0.12 285 / 0.14);
+  --cb-shadow-lg: 0 24px 64px oklch(0.45 0.12 285 / 0.2);
+}
+
+:root[data-theme="dark"] {
+  --cb-bg: oklch(0.21 0.04 285);
+  --cb-bg-subtle: oklch(0.25 0.045 285);
+  --cb-surface: oklch(0.27 0.045 285);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    --cb-bg: oklch(0.21 0.04 285);
+    --cb-bg-subtle: oklch(0.25 0.045 285);
+    --cb-surface: oklch(0.27 0.045 285);
+  }
+}