@ceebee/ui 0.5.2 → 0.6.0

package/dist/index.js

@@ -1,6 +1,7 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { isValidElement, cloneElement } from 'react';
-import { ChevronRight, Check } from 'lucide-react';
+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';
 
 // src/lib/cn.ts
 function cn(...parts) {
@@ -94,6 +95,172 @@ 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,
+    /* @__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
+      ] }),
+      extra ? /* @__PURE__ */ jsx(Skeleton, { className: "cb-page-container__skeleton-extra" }) : null
+    ] }),
+    tabs ? /* @__PURE__ */ jsx(Skeleton, { className: "cb-page-container__skeleton-tabs" }) : null,
+    /* @__PURE__ */ jsx(Skeleton.Text, { lines })
+  ] }) });
+}
+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 });
 function LinkButton({
   variant = "solid",
   tone = "brand",
@@ -114,7 +281,7 @@ function LinkButton({
     iconOnly && "cb-button--icon",
     className
   );
-  const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+  const body = /* @__PURE__ */ jsxs(Fragment$1, { children: [
     iconStart,
     iconOnly ? null : /* @__PURE__ */ jsx("span", { className: "cb-button__label", children }),
     iconOnly ? null : iconEnd
@@ -144,6 +311,54 @@ function LinkButton({
     }
   );
 }
+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" });
@@ -167,6 +382,133 @@ function Empty({ title, description, icon, actions, variant = "first-run", class
     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",
@@ -209,22 +551,6 @@ function ProgressBar({ value, max = 100, tone = "brand", size = "md", label, sho
     ] }) : 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 }) }),
@@ -544,5 +870,254 @@ function StatCardSkeleton({ withVisual = false, className }) {
   ] });
 }
 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 });
 
-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 { 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 };