@sero-ai/ui 0.3.2 → 0.4.0

package/dist/components/dashboard/progress-ring.cjs

@@ -0,0 +1,77 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } }var _jsxruntime = require('react/jsx-runtime');
+var _utils = require('../../lib/utils');
+var _tone = require('./tone');
+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__ */ _jsxruntime.jsxs.call(void 0, 
+    "div",
+    {
+      "data-slot": "progress-ring",
+      role: "progressbar",
+      "aria-label": label,
+      "aria-valuenow": Math.round(clamped),
+      "aria-valuemin": 0,
+      "aria-valuemax": max,
+      className: _utils.cn.call(void 0, 
+        "relative inline-flex shrink-0 items-center justify-center",
+        _tone.toneColor[tone],
+        className
+      ),
+      style: { width: size, height: size },
+      ...props,
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "svg", { width: size, height: size, className: "-rotate-90", children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "circle",
+            {
+              cx: center,
+              cy: center,
+              r: radius,
+              fill: "none",
+              stroke: "var(--surface-line)",
+              strokeWidth: thickness
+            }
+          ),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "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__ */ _jsxruntime.jsx.call(void 0, "div", { className: "absolute inset-0 flex items-center justify-center text-[var(--text-primary)]", children: _nullishCoalesce(children, () => ( (showValue && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "text-xs font-semibold tabular-nums", children: [
+          Math.round(pct * 100),
+          "%"
+        ] })))) })
+      ]
+    }
+  );
+}
+
+
+exports.ProgressRing = ProgressRing;

package/dist/components/dashboard/progress-ring.d.cts

@@ -0,0 +1,25 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { Tone } from './tone.cjs';
+
+interface ProgressRingProps extends Omit<React.ComponentProps<"div">, "children"> {
+    /** Current value. */
+    value: number;
+    /** Maximum value the ring represents. */
+    max?: number;
+    /** Outer diameter in pixels. */
+    size?: number;
+    /** Stroke width in pixels. */
+    thickness?: number;
+    tone?: Tone;
+    /** Accessible name for the gauge. */
+    label?: string;
+    /** Show the percentage in the centre when no children are provided. */
+    showValue?: boolean;
+    /** Custom centre content (overrides `showValue`). */
+    children?: React.ReactNode;
+}
+/** Circular progress / donut gauge for a bounded value. */
+declare function ProgressRing({ className, value, max, size, thickness, tone, label, showValue, children, ...props }: ProgressRingProps): react_jsx_runtime.JSX.Element;
+
+export { ProgressRing, type ProgressRingProps };

package/dist/components/dashboard/progress-ring.d.ts

@@ -0,0 +1,25 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { Tone } from './tone.js';
+
+interface ProgressRingProps extends Omit<React.ComponentProps<"div">, "children"> {
+    /** Current value. */
+    value: number;
+    /** Maximum value the ring represents. */
+    max?: number;
+    /** Outer diameter in pixels. */
+    size?: number;
+    /** Stroke width in pixels. */
+    thickness?: number;
+    tone?: Tone;
+    /** Accessible name for the gauge. */
+    label?: string;
+    /** Show the percentage in the centre when no children are provided. */
+    showValue?: boolean;
+    /** Custom centre content (overrides `showValue`). */
+    children?: React.ReactNode;
+}
+/** Circular progress / donut gauge for a bounded value. */
+declare function ProgressRing({ className, value, max, size, thickness, tone, label, showValue, children, ...props }: ProgressRingProps): react_jsx_runtime.JSX.Element;
+
+export { ProgressRing, type ProgressRingProps };

package/dist/components/dashboard/progress-ring.js

@@ -0,0 +1,77 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/utils";
+import { toneColor } from "./tone";
+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__ */ jsxs(
+    "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__ */ jsxs("svg", { width: size, height: size, className: "-rotate-90", children: [
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              cx: center,
+              cy: center,
+              r: radius,
+              fill: "none",
+              stroke: "var(--surface-line)",
+              strokeWidth: thickness
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "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__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center text-[var(--text-primary)]", children: children ?? (showValue && /* @__PURE__ */ jsxs("span", { className: "text-xs font-semibold tabular-nums", children: [
+          Math.round(pct * 100),
+          "%"
+        ] })) })
+      ]
+    }
+  );
+}
+export {
+  ProgressRing
+};

package/dist/components/dashboard/skeletons.cjs

@@ -0,0 +1,54 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});var _jsxruntime = require('react/jsx-runtime');
+var _utils = require('../../lib/utils');
+var _skeleton = require('../ui/skeleton');
+function MetricSkeleton({ className, count = 3, ...props }) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      "data-slot": "metric-skeleton",
+      className: _utils.cn.call(void 0, "flex gap-4", className),
+      ...props,
+      children: Array.from({ length: count }).map((_, i) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-1 flex-col gap-1.5", children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _skeleton.Skeleton, { className: "h-2.5 w-12" }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _skeleton.Skeleton, { className: "h-5 w-8" })
+      ] }, i))
+    }
+  );
+}
+function ListSkeleton({ className, count = 4, ...props }) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      "data-slot": "list-skeleton",
+      className: _utils.cn.call(void 0, "flex flex-col gap-1", className),
+      ...props,
+      children: Array.from({ length: count }).map((_, i) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-2 rounded-md p-2", children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _skeleton.Skeleton, { className: "size-2 rounded-full" }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _skeleton.Skeleton, { className: "h-3 flex-1" }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _skeleton.Skeleton, { className: "h-3 w-8" })
+      ] }, i))
+    }
+  );
+}
+function ActivitySkeleton({ className, count = 4, ...props }) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      "data-slot": "activity-skeleton",
+      className: _utils.cn.call(void 0, "flex flex-col gap-2", className),
+      ...props,
+      children: Array.from({ length: count }).map((_, i) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-start gap-2", children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _skeleton.Skeleton, { className: "mt-0.5 size-2 rounded-full" }),
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-1 flex-col gap-1", children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _skeleton.Skeleton, { className: "h-3 w-3/4" }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _skeleton.Skeleton, { className: "h-2.5 w-1/2" })
+        ] })
+      ] }, i))
+    }
+  );
+}
+
+
+
+
+exports.ActivitySkeleton = ActivitySkeleton; exports.ListSkeleton = ListSkeleton; exports.MetricSkeleton = MetricSkeleton;

package/dist/components/dashboard/skeletons.d.cts

@@ -0,0 +1,15 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+interface SkeletonPatternProps extends React.ComponentProps<"div"> {
+    /** Number of rows / cells to render. */
+    count?: number;
+}
+/** A row of metric placeholders (label + value stacks). */
+declare function MetricSkeleton({ className, count, ...props }: SkeletonPatternProps): react_jsx_runtime.JSX.Element;
+/** A stack of list-row placeholders. */
+declare function ListSkeleton({ className, count, ...props }: SkeletonPatternProps): react_jsx_runtime.JSX.Element;
+/** A stack of activity-row placeholders (marker + label + timestamp). */
+declare function ActivitySkeleton({ className, count, ...props }: SkeletonPatternProps): react_jsx_runtime.JSX.Element;
+
+export { ActivitySkeleton, ListSkeleton, MetricSkeleton, type SkeletonPatternProps };

package/dist/components/dashboard/skeletons.d.ts

@@ -0,0 +1,15 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+interface SkeletonPatternProps extends React.ComponentProps<"div"> {
+    /** Number of rows / cells to render. */
+    count?: number;
+}
+/** A row of metric placeholders (label + value stacks). */
+declare function MetricSkeleton({ className, count, ...props }: SkeletonPatternProps): react_jsx_runtime.JSX.Element;
+/** A stack of list-row placeholders. */
+declare function ListSkeleton({ className, count, ...props }: SkeletonPatternProps): react_jsx_runtime.JSX.Element;
+/** A stack of activity-row placeholders (marker + label + timestamp). */
+declare function ActivitySkeleton({ className, count, ...props }: SkeletonPatternProps): react_jsx_runtime.JSX.Element;
+
+export { ActivitySkeleton, ListSkeleton, MetricSkeleton, type SkeletonPatternProps };

package/dist/components/dashboard/skeletons.js

@@ -0,0 +1,54 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/utils";
+import { Skeleton } from "../ui/skeleton";
+function MetricSkeleton({ className, count = 3, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "metric-skeleton",
+      className: cn("flex gap-4", className),
+      ...props,
+      children: Array.from({ length: count }).map((_, i) => /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col gap-1.5", children: [
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-2.5 w-12" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-5 w-8" })
+      ] }, i))
+    }
+  );
+}
+function ListSkeleton({ className, count = 4, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "list-skeleton",
+      className: cn("flex flex-col gap-1", className),
+      ...props,
+      children: Array.from({ length: count }).map((_, i) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 rounded-md p-2", children: [
+        /* @__PURE__ */ jsx(Skeleton, { className: "size-2 rounded-full" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-3 flex-1" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-8" })
+      ] }, i))
+    }
+  );
+}
+function ActivitySkeleton({ className, count = 4, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "activity-skeleton",
+      className: cn("flex flex-col gap-2", className),
+      ...props,
+      children: Array.from({ length: count }).map((_, i) => /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
+        /* @__PURE__ */ jsx(Skeleton, { className: "mt-0.5 size-2 rounded-full" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col gap-1", children: [
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-3/4" }),
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-2.5 w-1/2" })
+        ] })
+      ] }, i))
+    }
+  );
+}
+export {
+  ActivitySkeleton,
+  ListSkeleton,
+  MetricSkeleton
+};

package/dist/components/dashboard/spacing.cjs

@@ -0,0 +1,10 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});const gapClass = {
+  none: "gap-0",
+  xs: "gap-1",
+  sm: "gap-2",
+  md: "gap-3",
+  lg: "gap-4"
+};
+
+
+exports.gapClass = gapClass;

package/dist/components/dashboard/spacing.d.cts

@@ -0,0 +1,4 @@
+type Gap = "none" | "xs" | "sm" | "md" | "lg";
+declare const gapClass: Record<Gap, string>;
+
+export { type Gap, gapClass };

package/dist/components/dashboard/spacing.d.ts

@@ -0,0 +1,4 @@
+type Gap = "none" | "xs" | "sm" | "md" | "lg";
+declare const gapClass: Record<Gap, string>;
+
+export { type Gap, gapClass };

package/dist/components/dashboard/spacing.js

@@ -0,0 +1,10 @@
+const gapClass = {
+  none: "gap-0",
+  xs: "gap-1",
+  sm: "gap-2",
+  md: "gap-3",
+  lg: "gap-4"
+};
+export {
+  gapClass
+};

package/dist/components/dashboard/stale-indicator.cjs

@@ -0,0 +1,42 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } }var _jsxruntime = require('react/jsx-runtime');
+var _lucidereact = require('lucide-react');
+var _utils = require('../../lib/utils');
+var _typography = require('./typography');
+var _iconbutton = require('./icon-button');
+function StaleIndicator({
+  className,
+  lastUpdated,
+  onRefresh,
+  refreshing = false,
+  ...props
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "div",
+    {
+      "data-slot": "stale-indicator",
+      className: _utils.cn.call(void 0, 
+        "flex items-center gap-1.5 text-[11px] text-[var(--text-muted)]",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _typography.Icon, { icon: _lucidereact.Clock, size: "xs", tone: "warning" }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "truncate", children: _nullishCoalesce(lastUpdated, () => ( "Data may be out of date")) }),
+        onRefresh && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          _iconbutton.IconButton,
+          {
+            icon: _lucidereact.RotateCw,
+            label: "Refresh",
+            size: "xs",
+            onClick: onRefresh,
+            className: _utils.cn.call(void 0, "ml-auto", refreshing && "animate-spin"),
+            disabled: refreshing
+          }
+        )
+      ]
+    }
+  );
+}
+
+
+exports.StaleIndicator = StaleIndicator;

package/dist/components/dashboard/stale-indicator.d.cts

@@ -0,0 +1,15 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+interface StaleIndicatorProps extends React.ComponentProps<"div"> {
+    /** Pre-formatted last-updated value, e.g. "Updated 5m ago". */
+    lastUpdated?: React.ReactNode;
+    /** Refresh handler. When provided, a refresh button is shown. */
+    onRefresh?: () => void;
+    /** Spin the refresh icon while a refresh is in flight. */
+    refreshing?: boolean;
+}
+/** Compact "data may be stale" indicator with optional refresh. */
+declare function StaleIndicator({ className, lastUpdated, onRefresh, refreshing, ...props }: StaleIndicatorProps): react_jsx_runtime.JSX.Element;
+
+export { StaleIndicator, type StaleIndicatorProps };

package/dist/components/dashboard/stale-indicator.d.ts

@@ -0,0 +1,15 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+interface StaleIndicatorProps extends React.ComponentProps<"div"> {
+    /** Pre-formatted last-updated value, e.g. "Updated 5m ago". */
+    lastUpdated?: React.ReactNode;
+    /** Refresh handler. When provided, a refresh button is shown. */
+    onRefresh?: () => void;
+    /** Spin the refresh icon while a refresh is in flight. */
+    refreshing?: boolean;
+}
+/** Compact "data may be stale" indicator with optional refresh. */
+declare function StaleIndicator({ className, lastUpdated, onRefresh, refreshing, ...props }: StaleIndicatorProps): react_jsx_runtime.JSX.Element;
+
+export { StaleIndicator, type StaleIndicatorProps };

package/dist/components/dashboard/stale-indicator.js

@@ -0,0 +1,42 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Clock, RotateCw } from "lucide-react";
+import { cn } from "../../lib/utils";
+import { Icon } from "./typography";
+import { IconButton } from "./icon-button";
+function StaleIndicator({
+  className,
+  lastUpdated,
+  onRefresh,
+  refreshing = false,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "stale-indicator",
+      className: cn(
+        "flex items-center gap-1.5 text-[11px] text-[var(--text-muted)]",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(Icon, { icon: Clock, size: "xs", tone: "warning" }),
+        /* @__PURE__ */ jsx("span", { className: "truncate", children: lastUpdated ?? "Data may be out of date" }),
+        onRefresh && /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            icon: RotateCw,
+            label: "Refresh",
+            size: "xs",
+            onClick: onRefresh,
+            className: cn("ml-auto", refreshing && "animate-spin"),
+            disabled: refreshing
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  StaleIndicator
+};

package/dist/components/dashboard/status.cjs

@@ -0,0 +1,62 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});var _jsxruntime = require('react/jsx-runtime');
+var _utils = require('../../lib/utils');
+var _tone = require('./tone');
+function Status({
+  className,
+  tone = "neutral",
+  variant = "dot",
+  pulse = false,
+  children,
+  ...props
+}) {
+  const hasLabel = children != null && children !== "";
+  if (variant === "pill") {
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      "span",
+      {
+        "data-slot": "status",
+        "data-tone": tone,
+        className: _utils.cn.call(void 0, 
+          "inline-flex w-fit items-center gap-1.5 rounded-full px-2 py-0.5 text-xs font-medium",
+          _tone.tonePill[tone],
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: _utils.cn.call(void 0, "size-1.5 shrink-0 rounded-full", _tone.toneDot[tone]) }),
+          children
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "span",
+    {
+      "data-slot": "status",
+      "data-tone": tone,
+      role: hasLabel ? void 0 : "status",
+      className: _utils.cn.call(void 0, 
+        "inline-flex items-center gap-1.5 text-xs font-medium text-[var(--text-secondary)]",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "span",
+          {
+            className: _utils.cn.call(void 0, 
+              "size-2 shrink-0 rounded-full",
+              _tone.toneDot[tone],
+              // ring-current picks up the tone's text colour for a matching glow.
+              pulse && _utils.cn.call(void 0, _tone.toneColor[tone], "ring-2 ring-current/25")
+            )
+          }
+        ),
+        children
+      ]
+    }
+  );
+}
+
+
+exports.Status = Status;

package/dist/components/dashboard/status.d.cts

@@ -0,0 +1,15 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { Tone } from './tone.cjs';
+
+interface StatusProps extends React.ComponentProps<"span"> {
+    tone?: Tone;
+    /** Presentation: coloured dot + label, a tinted pill, or a bare dot. */
+    variant?: "dot" | "pill";
+    /** Add a soft glow to the dot (e.g. a live/active indicator). */
+    pulse?: boolean;
+}
+/** Semantic status dot, label or pill with neutral/success/warning/error/info tones. */
+declare function Status({ className, tone, variant, pulse, children, ...props }: StatusProps): react_jsx_runtime.JSX.Element;
+
+export { Status, type StatusProps };

package/dist/components/dashboard/status.d.ts

@@ -0,0 +1,15 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { Tone } from './tone.js';
+
+interface StatusProps extends React.ComponentProps<"span"> {
+    tone?: Tone;
+    /** Presentation: coloured dot + label, a tinted pill, or a bare dot. */
+    variant?: "dot" | "pill";
+    /** Add a soft glow to the dot (e.g. a live/active indicator). */
+    pulse?: boolean;
+}
+/** Semantic status dot, label or pill with neutral/success/warning/error/info tones. */
+declare function Status({ className, tone, variant, pulse, children, ...props }: StatusProps): react_jsx_runtime.JSX.Element;
+
+export { Status, type StatusProps };

package/dist/components/dashboard/status.js

@@ -0,0 +1,62 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/utils";
+import { toneColor, toneDot, tonePill } from "./tone";
+function Status({
+  className,
+  tone = "neutral",
+  variant = "dot",
+  pulse = false,
+  children,
+  ...props
+}) {
+  const hasLabel = children != null && children !== "";
+  if (variant === "pill") {
+    return /* @__PURE__ */ jsxs(
+      "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__ */ jsx("span", { className: cn("size-1.5 shrink-0 rounded-full", toneDot[tone]) }),
+          children
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "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__ */ jsx(
+          "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
+      ]
+    }
+  );
+}
+export {
+  Status
+};