@ceebee/ui 0.5.2 → 1.0.0

package/dist/index.js

@@ -1,6 +1,4 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { isValidElement, cloneElement } from 'react';
-import { ChevronRight, Check } from 'lucide-react';
+import { jsx, jsxs } from 'react/jsx-runtime';
 
 // src/lib/cn.ts
 function cn(...parts) {
@@ -94,220 +92,36 @@ 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 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, { 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 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 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 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 })
+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("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("span", { className: "cb-page-container__skeleton-title" }),
+        subtitle ? /* @__PURE__ */ jsx("span", { className: "cb-page-container__skeleton-subtitle" }) : null
       ] }),
-      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 };
+      extra ? /* @__PURE__ */ jsx("span", { className: "cb-page-container__skeleton-extra" }) : null
+    ] }),
+    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 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)}%` })
-      ]
-    }
-  );
+function PageContainerRoot({ breadcrumb, title, subtitle, extra, tabs, children, containerSize = "lg" }) {
+  const hasHeader = title != null || subtitle != null || extra != null;
+  return /* @__PURE__ */ jsx(Container, { size: containerSize, children: /* @__PURE__ */ jsxs("section", { className: "cb-page-container", children: [
+    breadcrumb != null ? /* @__PURE__ */ jsx("div", { className: "cb-page-container__breadcrumb", children: breadcrumb }) : null,
+    hasHeader ? /* @__PURE__ */ jsxs("header", { className: "cb-page-container__header", children: [
+      /* @__PURE__ */ jsxs("div", { className: "cb-page-container__heading", children: [
+        title != null ? /* @__PURE__ */ jsx("div", { className: "cb-page-container__title", children: title }) : null,
+        subtitle != null ? /* @__PURE__ */ jsx("div", { className: "cb-page-container__subtitle", children: subtitle }) : null
+      ] }),
+      extra != null ? /* @__PURE__ */ jsx("div", { className: "cb-page-container__extra", children: extra }) : null
+    ] }) : null,
+    tabs != null ? /* @__PURE__ */ jsx("div", { className: "cb-page-container__tabs", children: tabs }) : null,
+    children != null ? /* @__PURE__ */ jsx("div", { className: "cb-page-container__body", children }) : null
+  ] }) });
 }
+var PageContainer = Object.assign(PageContainerRoot, { Skeleton: PageContainerSkeleton });
 
 // src/data/donut.math.ts
 function donutArcs(slices, circumference) {
@@ -414,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);
@@ -429,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;
@@ -465,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,
@@ -481,68 +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;
+var Leaderboard = LeaderboardRoot;
 
-export { Avatar, AvatarGroup, Badge, BarMini, Breadcrumb, Container, Divider, Donut, Empty, Flex, Grid, Heading, Leaderboard, LinkButton, ProgressBar, ProgressRing, Skeleton, 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 };

package/dist/skins/astra.css

@@ -1,5 +1,5 @@
 /* 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). */
+   A Skin rewrites skin tokens only — never structure, never a component rule. */
 :root {
   --cb-hue-brand: 278;