@sero-ai/ui 0.3.2 → 0.4.1

package/dist/reference.js

@@ -0,0 +1,1230 @@
+// src/components/reference/StarterExample.tsx
+import { CheckCircle2 } from "lucide-react";
+
+// src/components/dashboard/tone.ts
+var toneColor = {
+  neutral: "text-[var(--text-muted)]",
+  success: "text-[var(--status-success)]",
+  warning: "text-[var(--status-warning)]",
+  error: "text-[var(--status-error)]",
+  info: "text-[var(--status-info)]"
+};
+var toneDot = {
+  neutral: "bg-[var(--text-muted)]",
+  success: "bg-[var(--status-success)]",
+  warning: "bg-[var(--status-warning)]",
+  error: "bg-[var(--status-error)]",
+  info: "bg-[var(--status-info)]"
+};
+var toneLabel = {
+  neutral: "Neutral",
+  success: "Success",
+  warning: "Warning",
+  error: "Error",
+  info: "Info"
+};
+var tonePill = {
+  neutral: "bg-[var(--surface-flat)] text-[var(--text-secondary)]",
+  success: "bg-[var(--status-success-muted)] text-[var(--status-success)]",
+  warning: "bg-[var(--status-warning-muted)] text-[var(--status-warning)]",
+  error: "bg-[var(--status-error-muted)] text-[var(--status-error)]",
+  info: "bg-[var(--status-info-muted)] text-[var(--status-info)]"
+};
+
+// src/components/dashboard/spacing.ts
+var gapClass = {
+  none: "gap-0",
+  xs: "gap-1",
+  sm: "gap-2",
+  md: "gap-3",
+  lg: "gap-4"
+};
+
+// src/components/dashboard/layout.tsx
+import { cva } from "class-variance-authority";
+
+// src/lib/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/components/ui/separator.tsx
+import { Separator as SeparatorPrimitive } from "radix-ui";
+import { jsx } from "react/jsx-runtime";
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    SeparatorPrimitive.Root,
+    {
+      "data-slot": "separator",
+      decorative,
+      orientation,
+      className: cn(
+        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/components/dashboard/layout.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var widgetContentVariants = cva(
+  // Full-height frame with a container-query boundary so child components can
+  // respond to the widget's own size rather than the viewport.
+  "@container/widget flex h-full min-h-0 flex-col",
+  {
+    variants: {
+      padding: {
+        none: "p-0",
+        sm: "p-2",
+        md: "p-3",
+        lg: "p-4"
+      },
+      scroll: {
+        true: "overflow-auto",
+        false: "overflow-hidden"
+      }
+    },
+    defaultVariants: { padding: "md", scroll: false }
+  }
+);
+function WidgetContent({
+  className,
+  padding,
+  scroll,
+  glass = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      "data-slot": "widget-content",
+      className: cn(widgetContentVariants({ padding, scroll }), glass && "glass", className),
+      ...props
+    }
+  );
+}
+var alignClass = {
+  start: "items-start",
+  center: "items-center",
+  end: "items-end",
+  stretch: "items-stretch"
+};
+var justifyClass = {
+  start: "justify-start",
+  center: "justify-center",
+  end: "justify-end",
+  between: "justify-between",
+  around: "justify-around"
+};
+function Stack({
+  className,
+  gap = "sm",
+  align,
+  justify,
+  fill = false,
+  scroll = false,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      "data-slot": "stack",
+      className: cn(
+        "flex flex-col",
+        gapClass[gap],
+        align && alignClass[align],
+        justify && justifyClass[justify],
+        (fill || scroll) && "min-h-0 flex-1",
+        scroll && "overflow-auto",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function Inline({
+  className,
+  gap = "sm",
+  align = "center",
+  justify,
+  wrap = false,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      "data-slot": "inline",
+      className: cn(
+        "flex flex-row",
+        gapClass[gap],
+        alignClass[align],
+        justify && justifyClass[justify],
+        wrap ? "flex-wrap" : "min-w-0",
+        className
+      ),
+      ...props
+    }
+  );
+}
+var columnsClass = {
+  1: "grid-cols-1",
+  2: "grid-cols-2",
+  3: "grid-cols-3",
+  4: "grid-cols-4"
+};
+function Grid({
+  className,
+  columns = "auto",
+  gap = "sm",
+  minColumnWidth = 120,
+  style,
+  ...props
+}) {
+  const auto = columns === "auto";
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      "data-slot": "grid",
+      className: cn(
+        "grid",
+        gapClass[gap],
+        !auto && columnsClass[columns],
+        className
+      ),
+      style: auto ? {
+        gridTemplateColumns: `repeat(auto-fill, minmax(${minColumnWidth}px, 1fr))`,
+        ...style
+      } : style,
+      ...props
+    }
+  );
+}
+function Section({
+  className,
+  heading,
+  description,
+  action,
+  gap = "sm",
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      "data-slot": "section",
+      className: cn("flex flex-col", gapClass[gap], className),
+      ...props,
+      children: [
+        (heading || action) && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-0.5", children: [
+            heading && /* @__PURE__ */ jsx2("h3", { className: "truncate text-[11px] font-semibold uppercase tracking-wider text-[var(--text-muted)]", children: heading }),
+            description && /* @__PURE__ */ jsx2("p", { className: "truncate text-xs text-[var(--text-muted)]", children: description })
+          ] }),
+          action && /* @__PURE__ */ jsx2("div", { className: "shrink-0", children: action })
+        ] }),
+        children
+      ]
+    }
+  );
+}
+var dividerSpacing = { none: "my-0", sm: "my-1", md: "my-2" };
+function Divider({
+  className,
+  orientation = "horizontal",
+  spacing = "sm",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx2(
+    Separator,
+    {
+      "data-slot": "divider",
+      orientation,
+      className: cn(
+        orientation === "horizontal" ? dividerSpacing[spacing] : "mx-1",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/components/dashboard/typography.tsx
+import { cva as cva2 } from "class-variance-authority";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var textVariants = cva2("min-w-0", {
+  variants: {
+    variant: {
+      body: "text-sm text-[var(--text-primary)]",
+      label: "text-[11px] font-semibold uppercase tracking-wider text-[var(--text-muted)]",
+      supporting: "text-xs text-[var(--text-secondary)]",
+      muted: "text-xs text-[var(--text-muted)]",
+      numeric: "text-sm font-semibold tabular-nums text-[var(--text-primary)]"
+    }
+  },
+  defaultVariants: { variant: "body" }
+});
+var clampClass = {
+  1: "line-clamp-1",
+  2: "line-clamp-2",
+  3: "line-clamp-3"
+};
+function Text({
+  className,
+  variant,
+  truncate,
+  clamp,
+  tone,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(
+    "span",
+    {
+      "data-slot": "text",
+      className: cn(
+        textVariants({ variant }),
+        clamp ? clampClass[clamp] : truncate && "truncate",
+        tone && toneColor[tone],
+        className
+      ),
+      ...props
+    }
+  );
+}
+var headingSize = {
+  sm: "text-xs font-semibold",
+  md: "text-sm font-semibold",
+  lg: "text-base font-semibold"
+};
+function Heading({
+  className,
+  level = 2,
+  size = "md",
+  truncate,
+  ...props
+}) {
+  const Tag = `h${level}`;
+  return /* @__PURE__ */ jsx3(
+    Tag,
+    {
+      "data-slot": "heading",
+      className: cn(
+        "leading-snug text-[var(--text-primary)]",
+        headingSize[size],
+        truncate && "truncate",
+        className
+      ),
+      ...props
+    }
+  );
+}
+var iconSize = {
+  xs: "size-3",
+  sm: "size-3.5",
+  md: "size-4",
+  lg: "size-5"
+};
+function Icon({ className, icon: IconCmp, size = "md", tone, label, ...props }) {
+  return /* @__PURE__ */ jsx3(
+    "span",
+    {
+      "data-slot": "icon",
+      role: label ? "img" : void 0,
+      "aria-label": label,
+      "aria-hidden": label ? void 0 : true,
+      className: cn(
+        "inline-flex shrink-0 items-center justify-center",
+        tone ? toneColor[tone] : "text-[var(--text-muted)]",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx3(IconCmp, { className: iconSize[size] })
+    }
+  );
+}
+
+// src/components/dashboard/metric.tsx
+import { ArrowDown, ArrowRight, ArrowUp } from "lucide-react";
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+var trendIcon = {
+  up: ArrowUp,
+  down: ArrowDown,
+  flat: ArrowRight
+};
+function Metric({
+  className,
+  label,
+  value,
+  icon,
+  supporting,
+  trend,
+  tone,
+  orientation = "vertical",
+  ...props
+}) {
+  const TrendIcon = trend ? trendIcon[trend.direction] : null;
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      "data-slot": "metric",
+      className: cn(
+        "flex min-w-0",
+        orientation === "vertical" ? "flex-col gap-0.5" : "items-center justify-between gap-2",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-1.5", children: [
+          icon && /* @__PURE__ */ jsx4(Icon, { icon, size: "sm" }),
+          /* @__PURE__ */ jsx4("span", { className: "truncate text-[11px] font-medium uppercase tracking-wide text-[var(--text-muted)]", children: label })
+        ] }),
+        /* @__PURE__ */ jsxs2("div", { className: "flex items-baseline gap-1.5", children: [
+          /* @__PURE__ */ jsx4(
+            "span",
+            {
+              className: cn(
+                "text-lg font-semibold leading-none tabular-nums",
+                tone ? toneColor[tone] : "text-[var(--text-primary)]"
+              ),
+              children: value
+            }
+          ),
+          trend && TrendIcon && /* @__PURE__ */ jsxs2(
+            "span",
+            {
+              className: cn(
+                "inline-flex items-center gap-0.5 text-xs font-medium tabular-nums",
+                trend.tone ? toneColor[trend.tone] : "text-[var(--text-muted)]"
+              ),
+              children: [
+                /* @__PURE__ */ jsx4(TrendIcon, { className: "size-3", "aria-hidden": true }),
+                trend.value
+              ]
+            }
+          )
+        ] }),
+        supporting && /* @__PURE__ */ jsx4("span", { className: "truncate text-xs text-[var(--text-muted)]", children: supporting })
+      ]
+    }
+  );
+}
+function MetricCard({ className, ...props }) {
+  return /* @__PURE__ */ jsx4(
+    "div",
+    {
+      "data-slot": "metric-card",
+      className: cn(
+        "flex min-w-0 flex-col rounded-lg border border-[var(--surface-line)] bg-[var(--surface-raised)] p-3 shadow-[inset_0_1px_0_var(--surface-rim)]",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function MetricGroup({ columns = "auto", gap = "sm", minColumnWidth = 96, ...props }) {
+  return /* @__PURE__ */ jsx4(
+    Grid,
+    {
+      "data-slot": "metric-group",
+      columns,
+      gap,
+      minColumnWidth,
+      ...props
+    }
+  );
+}
+
+// src/components/dashboard/status.tsx
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+function Status({
+  className,
+  tone = "neutral",
+  variant = "dot",
+  pulse = false,
+  children,
+  ...props
+}) {
+  const hasLabel = children != null && children !== "";
+  const hasAccessibleName = props["aria-label"] != null || props["aria-labelledby"] != null;
+  const hiddenLabel = !hasLabel && !hasAccessibleName ? /* @__PURE__ */ jsx5("span", { className: "sr-only", children: toneLabel[tone] }) : null;
+  if (variant === "pill") {
+    return /* @__PURE__ */ jsxs3(
+      "span",
+      {
+        "data-slot": "status",
+        "data-tone": tone,
+        className: cn(
+          "inline-flex w-fit items-center gap-1.5 rounded-full px-2 py-0.5 text-xs font-medium",
+          tonePill[tone],
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx5("span", { className: cn("size-1.5 shrink-0 rounded-full", toneDot[tone]) }),
+          children,
+          hiddenLabel
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs3(
+    "span",
+    {
+      "data-slot": "status",
+      "data-tone": tone,
+      role: hasLabel ? void 0 : "status",
+      className: cn(
+        "inline-flex items-center gap-1.5 text-xs font-medium text-[var(--text-secondary)]",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx5(
+          "span",
+          {
+            className: cn(
+              "size-2 shrink-0 rounded-full",
+              toneDot[tone],
+              // ring-current picks up the tone's text colour for a matching glow.
+              pulse && cn(toneColor[tone], "ring-2 ring-current/25")
+            )
+          }
+        ),
+        children,
+        hiddenLabel
+      ]
+    }
+  );
+}
+
+// src/components/dashboard/key-value.tsx
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+function KeyValue({ className, label, value, mono, ...props }) {
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      "data-slot": "key-value",
+      className: cn("flex items-baseline justify-between gap-3", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx6("dt", { className: "shrink-0 truncate text-xs text-[var(--text-muted)]", children: label }),
+        /* @__PURE__ */ jsx6(
+          "dd",
+          {
+            className: cn(
+              "min-w-0 truncate text-right text-xs text-[var(--text-primary)]",
+              mono && "font-mono tabular-nums"
+            ),
+            children: value
+          }
+        )
+      ]
+    }
+  );
+}
+function KeyValueList({ className, ...props }) {
+  return /* @__PURE__ */ jsx6(
+    "dl",
+    {
+      "data-slot": "key-value-list",
+      className: cn("flex flex-col gap-1.5", className),
+      ...props
+    }
+  );
+}
+
+// src/components/ui/item.tsx
+import { cva as cva3 } from "class-variance-authority";
+import { Slot } from "radix-ui";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var itemVariants = cva3(
+  "group/item flex items-center border border-transparent text-sm rounded-md transition-colors [a]:hover:bg-accent/50 [a]:transition-colors duration-100 flex-wrap outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline: "border-border",
+        muted: "bg-muted/50"
+      },
+      size: {
+        default: "p-4 gap-4 ",
+        sm: "py-3 px-4 gap-2.5"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Item({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot.Root : "div";
+  return /* @__PURE__ */ jsx7(
+    Comp,
+    {
+      "data-slot": "item",
+      "data-variant": variant,
+      "data-size": size,
+      className: cn(itemVariants({ variant, size, className })),
+      ...props
+    }
+  );
+}
+var itemMediaVariants = cva3(
+  "flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none group-has-[[data-slot=item-description]]/item:translate-y-0.5",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        icon: "size-8 border rounded-sm bg-muted [&_svg:not([class*='size-'])]:size-4",
+        image: "size-10 rounded-sm overflow-hidden [&_img]:size-full [&_img]:object-cover"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function ItemMedia({
+  className,
+  variant = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx7(
+    "div",
+    {
+      "data-slot": "item-media",
+      "data-variant": variant,
+      className: cn(itemMediaVariants({ variant, className })),
+      ...props
+    }
+  );
+}
+function ItemContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx7(
+    "div",
+    {
+      "data-slot": "item-content",
+      className: cn(
+        "flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function ItemTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx7(
+    "div",
+    {
+      "data-slot": "item-title",
+      className: cn(
+        "flex w-fit items-center gap-2 text-sm leading-snug font-medium",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function ItemDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsx7(
+    "p",
+    {
+      "data-slot": "item-description",
+      className: cn(
+        "text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance",
+        "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function ItemActions({ className, ...props }) {
+  return /* @__PURE__ */ jsx7(
+    "div",
+    {
+      "data-slot": "item-actions",
+      className: cn("flex items-center gap-2", className),
+      ...props
+    }
+  );
+}
+
+// src/components/dashboard/item-list.tsx
+import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+function ItemListItem({
+  className,
+  leading,
+  primary,
+  secondary,
+  trailing,
+  actions,
+  variant = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs5(
+    Item,
+    {
+      "data-slot": "item-list-item",
+      variant,
+      size: "sm",
+      className: cn(
+        "gap-2 rounded-md bg-[var(--surface-flat)] p-2 transition-colors hover:bg-[var(--glass-hover)]",
+        className
+      ),
+      ...props,
+      children: [
+        leading && /* @__PURE__ */ jsx8(ItemMedia, { className: "self-center", children: leading }),
+        /* @__PURE__ */ jsxs5(ItemContent, { className: "gap-0.5", children: [
+          /* @__PURE__ */ jsx8(ItemTitle, { className: "truncate text-xs font-medium text-[var(--text-primary)]", children: primary }),
+          secondary && /* @__PURE__ */ jsx8(ItemDescription, { className: "line-clamp-1 text-xs text-[var(--text-muted)]", children: secondary })
+        ] }),
+        trailing && /* @__PURE__ */ jsx8("span", { className: "shrink-0 text-[11px] tabular-nums text-[var(--text-muted)]", children: trailing }),
+        actions && /* @__PURE__ */ jsx8(ItemActions, { children: actions })
+      ]
+    }
+  );
+}
+function ItemList({
+  className,
+  overflowCount = 0,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      "data-slot": "item-list",
+      role: "list",
+      className: cn("flex min-w-0 flex-col gap-1", className),
+      ...props,
+      children: [
+        children,
+        overflowCount > 0 && /* @__PURE__ */ jsxs5("span", { className: "px-2 text-[11px] text-[var(--text-muted)]", children: [
+          "+",
+          overflowCount,
+          " more"
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/dashboard/activity-list.tsx
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+function ActivityListItem({
+  className,
+  label,
+  timestamp,
+  detail,
+  tone = "neutral",
+  icon,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs6(
+    "li",
+    {
+      "data-slot": "activity-list-item",
+      className: cn("flex items-start gap-2 py-1", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx9("span", { className: "mt-1 flex size-3.5 shrink-0 items-center justify-center", children: icon ? /* @__PURE__ */ jsx9(Icon, { icon, size: "xs", tone: tone === "neutral" ? void 0 : tone }) : /* @__PURE__ */ jsx9("span", { className: cn("size-2 rounded-full", toneDot[tone]) }) }),
+        /* @__PURE__ */ jsxs6("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
+          /* @__PURE__ */ jsxs6("div", { className: "flex items-baseline justify-between gap-2", children: [
+            /* @__PURE__ */ jsx9("span", { className: "truncate text-xs text-[var(--text-primary)]", children: label }),
+            timestamp && /* @__PURE__ */ jsx9("span", { className: "shrink-0 text-[11px] tabular-nums text-[var(--text-muted)]", children: timestamp })
+          ] }),
+          detail && /* @__PURE__ */ jsx9("span", { className: "line-clamp-1 text-xs text-[var(--text-muted)]", children: detail })
+        ] })
+      ]
+    }
+  );
+}
+function ActivityList({
+  className,
+  overflowCount = 0,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs6(
+    "ul",
+    {
+      "data-slot": "activity-list",
+      className: cn("flex min-w-0 flex-col", className),
+      ...props,
+      children: [
+        children,
+        overflowCount > 0 && /* @__PURE__ */ jsxs6("li", { className: "pl-5 pt-0.5 text-[11px] text-[var(--text-muted)]", children: [
+          "+",
+          overflowCount,
+          " more"
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/dashboard/progress-ring.tsx
+import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+function ProgressRing({
+  className,
+  value,
+  max = 100,
+  size = 44,
+  thickness = 4,
+  tone = "info",
+  label,
+  showValue = true,
+  children,
+  ...props
+}) {
+  const clamped = Math.min(Math.max(value, 0), max);
+  const pct = max > 0 ? clamped / max : 0;
+  const radius = (size - thickness) / 2;
+  const circumference = 2 * Math.PI * radius;
+  const dashOffset = circumference * (1 - pct);
+  const center = size / 2;
+  return /* @__PURE__ */ jsxs7(
+    "div",
+    {
+      "data-slot": "progress-ring",
+      role: "progressbar",
+      "aria-label": label,
+      "aria-valuenow": Math.round(clamped),
+      "aria-valuemin": 0,
+      "aria-valuemax": max,
+      className: cn(
+        "relative inline-flex shrink-0 items-center justify-center",
+        toneColor[tone],
+        className
+      ),
+      style: { width: size, height: size },
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs7("svg", { width: size, height: size, className: "-rotate-90", children: [
+          /* @__PURE__ */ jsx10(
+            "circle",
+            {
+              cx: center,
+              cy: center,
+              r: radius,
+              fill: "none",
+              stroke: "var(--surface-line)",
+              strokeWidth: thickness
+            }
+          ),
+          /* @__PURE__ */ jsx10(
+            "circle",
+            {
+              cx: center,
+              cy: center,
+              r: radius,
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: thickness,
+              strokeLinecap: "round",
+              strokeDasharray: circumference,
+              strokeDashoffset: dashOffset,
+              className: "transition-[stroke-dashoffset] duration-500"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx10("div", { className: "absolute inset-0 flex items-center justify-center text-[var(--text-primary)]", children: children ?? (showValue && /* @__PURE__ */ jsxs7("span", { className: "text-xs font-semibold tabular-nums", children: [
+          Math.round(pct * 100),
+          "%"
+        ] })) })
+      ]
+    }
+  );
+}
+
+// src/components/dashboard/stale-indicator.tsx
+import { Clock, RotateCw } from "lucide-react";
+
+// src/components/ui/button.tsx
+import { cva as cva4 } from "class-variance-authority";
+import { Slot as Slot2 } from "radix-ui";
+import { jsx as jsx11 } from "react/jsx-runtime";
+var buttonVariants = cva4(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot2.Root : "button";
+  return /* @__PURE__ */ jsx11(
+    Comp,
+    {
+      "data-slot": "button",
+      "data-variant": variant,
+      "data-size": size,
+      className: cn(buttonVariants({ variant, size, className })),
+      ...props
+    }
+  );
+}
+
+// src/components/dashboard/icon-button.tsx
+import { jsx as jsx12 } from "react/jsx-runtime";
+var sizeMap = {
+  xs: "icon-xs",
+  sm: "icon-sm",
+  md: "icon"
+};
+var iconSizeMap = {
+  xs: "xs",
+  sm: "sm",
+  md: "md"
+};
+function IconButton({
+  className,
+  icon,
+  label,
+  size = "sm",
+  variant = "ghost",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx12(
+    Button,
+    {
+      "data-slot": "icon-button",
+      type: "button",
+      variant,
+      size: sizeMap[size],
+      "aria-label": label,
+      title: label,
+      className: cn("text-[var(--text-muted)]", className),
+      ...props,
+      children: /* @__PURE__ */ jsx12(Icon, { icon, size: iconSizeMap[size], className: "text-current" })
+    }
+  );
+}
+
+// src/components/dashboard/stale-indicator.tsx
+import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
+function StaleIndicator({
+  className,
+  lastUpdated,
+  onRefresh,
+  refreshing = false,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs8(
+    "div",
+    {
+      "data-slot": "stale-indicator",
+      className: cn(
+        "flex items-center gap-1.5 text-[11px] text-[var(--text-muted)]",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx13(Icon, { icon: Clock, size: "xs", tone: "warning" }),
+        /* @__PURE__ */ jsx13("span", { className: "truncate", children: lastUpdated ?? "Data may be out of date" }),
+        onRefresh && /* @__PURE__ */ jsx13(
+          IconButton,
+          {
+            icon: RotateCw,
+            label: "Refresh",
+            size: "xs",
+            onClick: onRefresh,
+            className: cn("ml-auto", refreshing && "animate-spin"),
+            disabled: refreshing
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/dashboard/data-boundary.tsx
+import { Fragment, jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
+function DataBoundary({
+  state,
+  loading,
+  empty,
+  error,
+  stale,
+  children
+}) {
+  switch (state) {
+    case "loading":
+      return /* @__PURE__ */ jsx14(Fragment, { children: loading ?? null });
+    case "empty":
+      return /* @__PURE__ */ jsx14(Fragment, { children: empty ?? null });
+    case "error":
+      return /* @__PURE__ */ jsx14(Fragment, { children: error ?? null });
+    case "stale":
+      return /* @__PURE__ */ jsxs9(Fragment, { children: [
+        stale,
+        children
+      ] });
+    case "ready":
+    default:
+      return /* @__PURE__ */ jsx14(Fragment, { children });
+  }
+}
+
+// src/components/ui/empty.tsx
+import { cva as cva5 } from "class-variance-authority";
+import { jsx as jsx15 } from "react/jsx-runtime";
+var emptyMediaVariants = cva5(
+  "flex shrink-0 items-center justify-center mb-2 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        icon: "bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-6"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+
+// src/components/dashboard/empty-state.tsx
+import { jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
+
+// src/components/ui/skeleton.tsx
+import { jsx as jsx17 } from "react/jsx-runtime";
+
+// src/components/dashboard/skeletons.tsx
+import { jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
+
+// src/components/reference/StarterExample.tsx
+import { jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
+var RECENT = [
+  { id: "a", label: "Nightly build", timestamp: "12m", tone: "success" },
+  { id: "b", label: "Deploy to staging", timestamp: "1h", tone: "info" },
+  { id: "c", label: "Dependency audit", timestamp: "3h", tone: "neutral" }
+];
+function StarterExample() {
+  return /* @__PURE__ */ jsx19(WidgetContent, { children: /* @__PURE__ */ jsxs12(Stack, { gap: "sm", children: [
+    /* @__PURE__ */ jsx19(Metric, { label: "Tasks done", value: 12, icon: CheckCircle2, tone: "success" }),
+    /* @__PURE__ */ jsx19(Section, { heading: "Recent", children: /* @__PURE__ */ jsx19(ActivityList, { children: RECENT.map((e) => /* @__PURE__ */ jsx19(
+      ActivityListItem,
+      {
+        tone: e.tone,
+        label: e.label,
+        timestamp: e.timestamp
+      },
+      e.id
+    )) }) })
+  ] }) });
+}
+
+// src/components/reference/SchedulerExample.tsx
+import { ExternalLink } from "lucide-react";
+import { jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
+var UPCOMING = [
+  { id: "a", label: "Daily backup", timestamp: "08:00", tone: "success" },
+  { id: "b", label: "Publish report", timestamp: "in 2h", tone: "info" },
+  { id: "c", label: "Rotate API keys", timestamp: "tomorrow", tone: "warning" }
+];
+function SchedulerExample() {
+  return /* @__PURE__ */ jsx20(WidgetContent, { children: /* @__PURE__ */ jsxs13(Stack, { gap: "sm", children: [
+    /* @__PURE__ */ jsxs13(Inline, { justify: "between", align: "center", children: [
+      /* @__PURE__ */ jsx20(Status, { tone: "success", pulse: true, children: "Scheduler active" }),
+      /* @__PURE__ */ jsx20(ProgressRing, { value: 92, label: "Success rate", tone: "success", size: 40 })
+    ] }),
+    /* @__PURE__ */ jsx20(Section, { heading: "Summary", children: /* @__PURE__ */ jsxs13(Inline, { gap: "sm", wrap: true, children: [
+      /* @__PURE__ */ jsx20(MetricCard, { className: "flex-1", children: /* @__PURE__ */ jsx20(Metric, { label: "Jobs", value: 6 }) }),
+      /* @__PURE__ */ jsx20(MetricCard, { className: "flex-1", children: /* @__PURE__ */ jsx20(
+        Metric,
+        {
+          label: "Runs today",
+          value: 18,
+          trend: { direction: "up", value: "+4", tone: "success" }
+        }
+      ) })
+    ] }) }),
+    /* @__PURE__ */ jsx20(Divider, {}),
+    /* @__PURE__ */ jsx20(
+      Section,
+      {
+        heading: "Next up",
+        action: /* @__PURE__ */ jsxs13(Button, { size: "xs", variant: "ghost", children: [
+          /* @__PURE__ */ jsx20(ExternalLink, { className: "size-3" }),
+          "All"
+        ] }),
+        children: /* @__PURE__ */ jsx20(DataBoundary, { state: "ready", children: /* @__PURE__ */ jsx20(ActivityList, { children: UPCOMING.map((e) => /* @__PURE__ */ jsx20(
+          ActivityListItem,
+          {
+            tone: e.tone,
+            label: e.label,
+            timestamp: e.timestamp
+          },
+          e.id
+        )) }) })
+      }
+    ),
+    /* @__PURE__ */ jsx20(StaleIndicator, { lastUpdated: "Updated 2m ago" })
+  ] }) });
+}
+
+// src/components/reference/ResourceExample.tsx
+import { jsx as jsx21, jsxs as jsxs14 } from "react/jsx-runtime";
+function Ring({
+  value,
+  label,
+  tone
+}) {
+  return /* @__PURE__ */ jsxs14(Stack, { gap: "xs", align: "center", children: [
+    /* @__PURE__ */ jsx21(ProgressRing, { value, label, tone }),
+    /* @__PURE__ */ jsx21(Text, { variant: "muted", children: label })
+  ] });
+}
+function ResourceExample() {
+  return /* @__PURE__ */ jsx21(WidgetContent, { scroll: true, children: /* @__PURE__ */ jsxs14(Stack, { gap: "sm", children: [
+    /* @__PURE__ */ jsx21(Heading, { level: 2, size: "md", children: "Resources" }),
+    /* @__PURE__ */ jsxs14(MetricGroup, { children: [
+      /* @__PURE__ */ jsx21(Metric, { label: "CPU", value: "42%", tone: "success" }),
+      /* @__PURE__ */ jsx21(Metric, { label: "Memory", value: "6.1 GB" }),
+      /* @__PURE__ */ jsx21(Metric, { label: "Disk", value: "71%", tone: "warning" })
+    ] }),
+    /* @__PURE__ */ jsx21(Divider, {}),
+    /* @__PURE__ */ jsx21(Section, { heading: "Usage", children: /* @__PURE__ */ jsxs14(Grid, { columns: 3, gap: "sm", children: [
+      /* @__PURE__ */ jsx21(Ring, { value: 42, label: "CPU", tone: "success" }),
+      /* @__PURE__ */ jsx21(Ring, { value: 61, label: "Memory", tone: "info" }),
+      /* @__PURE__ */ jsx21(Ring, { value: 71, label: "Disk", tone: "warning" })
+    ] }) }),
+    /* @__PURE__ */ jsx21(Divider, {}),
+    /* @__PURE__ */ jsx21(Section, { heading: "Host", children: /* @__PURE__ */ jsxs14(KeyValueList, { children: [
+      /* @__PURE__ */ jsx21(KeyValue, { label: "Region", value: "eu-west-1", mono: true }),
+      /* @__PURE__ */ jsx21(KeyValue, { label: "Instance", value: "c7g.xlarge", mono: true }),
+      /* @__PURE__ */ jsx21(KeyValue, { label: "Uptime", value: "14d 6h", mono: true }),
+      /* @__PURE__ */ jsx21(KeyValue, { label: "Status", value: /* @__PURE__ */ jsx21(Status, { tone: "success", children: "Healthy" }) })
+    ] }) })
+  ] }) });
+}
+
+// src/components/reference/ActivityExample.tsx
+import { FileText } from "lucide-react";
+
+// src/components/ui/badge.tsx
+import { cva as cva6 } from "class-variance-authority";
+import { Slot as Slot3 } from "radix-ui";
+import { jsx as jsx22 } from "react/jsx-runtime";
+var badgeVariants = cva6(
+  "inline-flex items-center justify-center rounded-full border border-transparent px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary: "bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive: "bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline: "border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+        ghost: "[a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 [a&]:hover:underline",
+        // Semantic status tones (error is covered by `destructive`).
+        success: "bg-[var(--status-success-muted)] text-[var(--status-success)]",
+        warning: "bg-[var(--status-warning-muted)] text-[var(--status-warning)]",
+        info: "bg-[var(--status-info-muted)] text-[var(--status-info)]"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function Badge({
+  className,
+  variant = "default",
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot3.Root : "span";
+  return /* @__PURE__ */ jsx22(
+    Comp,
+    {
+      "data-slot": "badge",
+      "data-variant": variant,
+      className: cn(badgeVariants({ variant }), className),
+      ...props
+    }
+  );
+}
+
+// src/components/reference/ActivityExample.tsx
+import { jsx as jsx23, jsxs as jsxs15 } from "react/jsx-runtime";
+var ITEMS = [
+  { id: "1", title: "quarterly-report.pdf", meta: "2h", badge: "PDF" },
+  { id: "2", title: "design-tokens.json", meta: "5h", badge: "JSON" },
+  { id: "3", title: "release-notes.md", meta: "1d", badge: "MD" }
+];
+function ActivityExample() {
+  return /* @__PURE__ */ jsx23(WidgetContent, { children: /* @__PURE__ */ jsxs15(Stack, { gap: "sm", fill: true, children: [
+    /* @__PURE__ */ jsx23(Inline, { justify: "between", align: "center", children: /* @__PURE__ */ jsxs15(Inline, { gap: "xs", align: "center", children: [
+      /* @__PURE__ */ jsx23(Text, { variant: "label", children: "Recent files" }),
+      /* @__PURE__ */ jsx23(Badge, { variant: "info", children: ITEMS.length })
+    ] }) }),
+    /* @__PURE__ */ jsx23(Stack, { gap: "none", scroll: true, children: /* @__PURE__ */ jsx23(ItemList, { children: ITEMS.map((f) => /* @__PURE__ */ jsx23(
+      ItemListItem,
+      {
+        leading: /* @__PURE__ */ jsx23(FileText, { className: "size-4 text-[var(--text-muted)]" }),
+        primary: f.title,
+        trailing: /* @__PURE__ */ jsxs15(Inline, { gap: "xs", align: "center", children: [
+          /* @__PURE__ */ jsx23(Badge, { variant: "secondary", children: f.badge }),
+          /* @__PURE__ */ jsx23("span", { children: f.meta })
+        ] })
+      },
+      f.id
+    )) }) }),
+    /* @__PURE__ */ jsxs15(Inline, { justify: "between", align: "center", children: [
+      /* @__PURE__ */ jsx23(Status, { tone: "info", variant: "pill", children: "Synced" }),
+      /* @__PURE__ */ jsx23(StaleIndicator, { lastUpdated: "Synced 30s ago" })
+    ] })
+  ] }) });
+}
+export {
+  ActivityExample,
+  ResourceExample,
+  SchedulerExample,
+  StarterExample
+};