@ceebee/ui 0.4.0 → 0.5.2

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ReactNode } from 'react';
+import { ReactNode, AnchorHTMLAttributes, ReactElement } from 'react';
 
 /** Joins class names, dropping falsy values. No merge logic: the library never emits
  *  conflicting utility classes, so the "last wins" problem tailwind-merge solves does not exist. */
@@ -45,7 +45,7 @@ interface StackProps {
     children?: ReactNode;
 }
 /** Flex layout whose gap can only be a spacing token — the reason the library has no raw padding. */
-declare function Stack({ direction, gap, align, justify, wrap, className, children, }: StackProps): react.JSX.Element;
+declare function Flex({ direction, gap, align, justify, wrap, className, children, }: StackProps): react.JSX.Element;
 interface GridProps {
     /** Column count at the widest breakpoint; the grid collapses on its own below it. */
     columns?: 1 | 2 | 3 | 4 | 6 | 12;
@@ -81,6 +81,54 @@ interface HeadingProps {
 /** Level and size are separate on purpose: document structure is not a font size. */
 declare function Heading({ level, size, className, children }: HeadingProps): react.JSX.Element;
 
+interface LinkButtonProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'color'> {
+    variant?: 'solid' | 'soft' | 'outline' | 'ghost';
+    tone?: Tone;
+    size?: Size;
+    iconStart?: ReactNode;
+    iconEnd?: ReactNode;
+    children?: ReactNode;
+    /**
+     * Render something else in the anchor's place — a router's own Link, which has
+     * to stay itself or client-side navigation is lost. It receives the classes
+     * and the tone; everything else it keeps. The same `render` seam Base UI uses
+     * elsewhere in this library.
+     */
+    render?: ReactElement;
+}
+/**
+ * A link wearing a button's clothes.
+ *
+ * Not a `Button` with an `href`. A link navigates and a button acts, and the
+ * difference is not decoration: a link can be opened in a new tab, copied,
+ * dragged to a bookmark bar and reached by a screen reader's list of links,
+ * while a button can be disabled and submit a form. Those are different
+ * contracts, so they are different components (ADR 0014).
+ *
+ * What they share is the look, and that is shared literally — the same
+ * `cb-button` classes rather than a second set that would agree today and drift
+ * apart later. It is server-safe: an anchor needs no hook, no handler and no
+ * motion, so it stays a Server Component (ADR 0004). The press animation is
+ * Button's alone, which is honest: a link does not depress, it goes somewhere.
+ */
+declare function LinkButton({ variant, tone, size, iconStart, iconEnd, className, children, render, ...rest }: LinkButtonProps): react.JSX.Element;
+
+interface DividerProps {
+    /** A word or two sitting in the rule, for a section break that names itself. */
+    children?: ReactNode;
+    orientation?: 'horizontal' | 'vertical';
+    className?: string;
+}
+/**
+ * A rule between things.
+ *
+ * `<hr>` when it separates content, because that is what the element means and
+ * a screen reader announces it. With a label it becomes a `<div>` carrying the
+ * rule in its borders instead — an `<hr>` may not contain anything, and a
+ * separator that says which section is starting is worth more than the element.
+ */
+declare function Divider({ children, orientation, className }: DividerProps): react.JSX.Element;
+
 interface BadgeProps {
     children: ReactNode;
     tone?: Tone;
@@ -102,7 +150,7 @@ interface EmptyStateProps {
     variant?: 'first-run' | 'search' | 'error';
     className?: string;
 }
-declare function EmptyState({ title, description, icon, actions, variant, className }: EmptyStateProps): react.JSX.Element;
+declare function Empty({ title, description, icon, actions, variant, className }: EmptyStateProps): react.JSX.Element;
 
 interface SpinnerProps {
     size?: 'sm' | 'md' | 'lg';
@@ -112,7 +160,7 @@ interface SpinnerProps {
     className?: string;
 }
 /** Server-safe: a CSS animation, no state. It stops turning under reduced motion. */
-declare function Spinner({ size, tone, label, className }: SpinnerProps): react.JSX.Element;
+declare function Spin({ size, tone, label, className }: SpinnerProps): react.JSX.Element;
 interface ProgressBarProps {
     /** Omit for an indeterminate bar — "something is happening, duration unknown". */
     value?: number;
@@ -371,7 +419,7 @@ interface BreadcrumbsProps {
  * Server-safe. The last crumb is the current page: it is text with `aria-current`, not a link,
  * because a link to where you already are is a dead end for keyboard and screen reader users.
  */
-declare function Breadcrumbs({ items, maxItems, className }: BreadcrumbsProps): react.JSX.Element;
+declare function Breadcrumb({ items, maxItems, className }: BreadcrumbsProps): react.JSX.Element;
 
 interface Step {
     label: ReactNode;
@@ -388,7 +436,7 @@ interface StepperProps {
  * Progress through an ordered sequence — the thing Tabs must not be used for. Server-safe:
  * it displays position, it does not navigate.
  */
-declare function Stepper({ steps, current, orientation, className }: StepperProps): react.JSX.Element;
+declare function Steps({ steps, current, orientation, className }: StepperProps): react.JSX.Element;
 
 interface StatCardProps {
     label: string;
@@ -406,15 +454,15 @@ interface StatCardProps {
     className?: string;
 }
 /** The tinted metric tile the reference board repeats on every dashboard. */
-declare function StatCard({ label, value, delta, caption, hue, icon, visual, className }: StatCardProps): react.JSX.Element;
-declare namespace StatCard {
+declare function Statistic({ label, value, delta, caption, hue, icon, visual, className }: StatCardProps): react.JSX.Element;
+declare namespace Statistic {
     var Skeleton: typeof StatCardSkeleton;
 }
 interface StatCardSkeletonProps {
     withVisual?: boolean;
     className?: string;
 }
-/** Built from StatCard's own spacing, so the tile does not resize when data arrives (ADR 0009). */
+/** Built from Statistic's own spacing, so the tile does not resize when data arrives (ADR 0009). */
 declare function StatCardSkeleton({ withVisual, className }: StatCardSkeletonProps): react.JSX.Element;
 
-export { Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Badge, type BadgeProps, BarMini, type BarMiniProps, Breadcrumbs, type BreadcrumbsProps, Container, type ContainerProps, type Crumb, type DecorHue, Donut, type DonutArc, type DonutProps, type DonutSlice, EmptyState, type EmptyStateProps, type GlassStyle, Grid, type GridProps, Heading, type HeadingProps, Leaderboard, type LeaderboardEntry, type LeaderboardProps, type LeaderboardSkeletonProps, ProgressBar, type ProgressBarProps, ProgressRing, type ProgressRingProps, type RingGeometry, type Size, Skeleton, type SkeletonProps, type SkeletonTextProps, Sparkline, type SparklineGeometry, type SparklineProps, Spinner, type SpinnerProps, Stack, type StackProps, StatCard, type StatCardProps, type StatCardSkeletonProps, type Step, Stepper, type StepperProps, Surface, type SurfaceProps, type SurfaceVariant, Text, type TextProps, Timeline, type TimelineEntry, type TimelineProps, type TimelineSkeletonProps, type Tone, cn, donutArcs, hueForName, initialsOf, ringGeometry, sparklineGeometry };
+export { Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Badge, type BadgeProps, BarMini, type BarMiniProps, Breadcrumb, type BreadcrumbsProps, Container, type ContainerProps, type Crumb, type DecorHue, Divider, type DividerProps, Donut, type DonutArc, type DonutProps, type DonutSlice, Empty, type EmptyStateProps, Flex, type GlassStyle, Grid, type GridProps, Heading, type HeadingProps, Leaderboard, type LeaderboardEntry, type LeaderboardProps, type LeaderboardSkeletonProps, LinkButton, type LinkButtonProps, ProgressBar, type ProgressBarProps, ProgressRing, type ProgressRingProps, type RingGeometry, type Size, Skeleton, type SkeletonProps, type SkeletonTextProps, Sparkline, type SparklineGeometry, type SparklineProps, Spin, type SpinnerProps, type StackProps, type StatCardProps, type StatCardSkeletonProps, Statistic, type Step, type StepperProps, Steps, Surface, type SurfaceProps, type SurfaceVariant, Text, type TextProps, Timeline, type TimelineEntry, type TimelineProps, type TimelineSkeletonProps, type Tone, cn, donutArcs, hueForName, initialsOf, ringGeometry, sparklineGeometry };

package/dist/index.js

@@ -1,4 +1,5 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { isValidElement, cloneElement } from 'react';
 import { ChevronRight, Check } from 'lucide-react';
 
 // src/lib/cn.ts
@@ -38,7 +39,7 @@ function Surface({
     }
   );
 }
-function Stack({
+function Flex({
   direction = "column",
   gap = 4,
   align = "stretch",
@@ -47,11 +48,11 @@ function Stack({
   className,
   children
 }) {
-  const style = { "--cb-stack-gap": `var(--cb-space-${gap})` };
+  const style = { "--cb-flex-gap": `var(--cb-space-${gap})` };
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: cn("cb-stack", `cb-stack--${direction}`, wrap && "cb-stack--wrap", className),
+      className: cn("cb-flex", `cb-flex--${direction}`, wrap && "cb-flex--wrap", className),
       style,
       "data-align": align,
       "data-justify": justify,
@@ -93,13 +94,72 @@ 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 EmptyState({ title, description, icon, actions, variant = "first-run", className }) {
+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 }),
@@ -107,11 +167,11 @@ function EmptyState({ title, description, icon, actions, variant = "first-run",
     actions ? /* @__PURE__ */ jsx("div", { className: "cb-empty__actions", children: actions }) : null
   ] });
 }
-function Spinner({ size = "md", tone = "brand", label, className }) {
+function Spin({ size = "md", tone = "brand", label, className }) {
   return /* @__PURE__ */ jsx(
     "span",
     {
-      className: cn("cb-spinner", `cb-spinner--${size}`, className),
+      className: cn("cb-spin", `cb-spin--${size}`, className),
       "data-tone": tone,
       role: label ? "status" : void 0,
       "aria-label": label,
@@ -430,7 +490,7 @@ function LeaderboardSkeleton({ rows = 5, className }) {
   ] }, index)) });
 }
 var Leaderboard = Object.assign(LeaderboardRoot, { Skeleton: LeaderboardSkeleton });
-function Breadcrumbs({ items, maxItems = 4, className }) {
+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;
@@ -440,22 +500,22 @@ function Breadcrumbs({ items, maxItems = 4, className }) {
     ] }, `${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) => {
+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-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: [
+    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-stepper__description", children: step.description }) : null
+        step.description ? /* @__PURE__ */ jsx("span", { className: "cb-steps__description", children: step.description }) : null
       ] })
     ] }, index);
   }) });
 }
-function StatCard({ label, value, delta, caption, hue, icon, visual, className }) {
+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 }),
@@ -483,6 +543,6 @@ function StatCardSkeleton({ withVisual = false, className }) {
     ] })
   ] });
 }
-StatCard.Skeleton = StatCardSkeleton;
+Statistic.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 };
+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 };