@sero-ai/ui 0.3.2 → 0.4.0

package/dist/components/dashboard/activity-list.cjs

@@ -0,0 +1,59 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});var _jsxruntime = require('react/jsx-runtime');
+var _utils = require('../../lib/utils');
+var _typography = require('./typography');
+var _tone = require('./tone');
+function ActivityListItem({
+  className,
+  label,
+  timestamp,
+  detail,
+  tone = "neutral",
+  icon,
+  ...props
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "li",
+    {
+      "data-slot": "activity-list-item",
+      className: _utils.cn.call(void 0, "flex items-start gap-2 py-1", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "mt-1 flex size-3.5 shrink-0 items-center justify-center", children: icon ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _typography.Icon, { icon, size: "xs", tone: tone === "neutral" ? void 0 : tone }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: _utils.cn.call(void 0, "size-2 rounded-full", _tone.toneDot[tone]) }) }),
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-baseline justify-between gap-2", children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "truncate text-xs text-[var(--text-primary)]", children: label }),
+            timestamp && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "shrink-0 text-[11px] tabular-nums text-[var(--text-muted)]", children: timestamp })
+          ] }),
+          detail && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "line-clamp-1 text-xs text-[var(--text-muted)]", children: detail })
+        ] })
+      ]
+    }
+  );
+}
+function ActivityList({
+  className,
+  overflowCount = 0,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "ul",
+    {
+      "data-slot": "activity-list",
+      className: _utils.cn.call(void 0, "flex min-w-0 flex-col", className),
+      ...props,
+      children: [
+        children,
+        overflowCount > 0 && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "li", { className: "pl-5 pt-0.5 text-[11px] text-[var(--text-muted)]", children: [
+          "+",
+          overflowCount,
+          " more"
+        ] })
+      ]
+    }
+  );
+}
+
+
+
+exports.ActivityList = ActivityList; exports.ActivityListItem = ActivityListItem;

package/dist/components/dashboard/activity-list.d.cts

@@ -0,0 +1,27 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { Tone } from './tone.cjs';
+
+interface ActivityListItemProps extends Omit<React.ComponentProps<"li">, "title"> {
+    label: React.ReactNode;
+    /** Pre-formatted timestamp, e.g. "08:00" or "in 2h". */
+    timestamp?: React.ReactNode;
+    /** Supporting detail under the label. */
+    detail?: React.ReactNode;
+    /** Status marker tone. Ignored when `icon` is provided. */
+    tone?: Tone;
+    /** Leading icon component, used instead of the status dot. */
+    icon?: React.ComponentType<{
+        className?: string;
+    }>;
+}
+/** A single chronological event row. */
+declare function ActivityListItem({ className, label, timestamp, detail, tone, icon, ...props }: ActivityListItemProps): react_jsx_runtime.JSX.Element;
+interface ActivityListProps extends React.ComponentProps<"ul"> {
+    /** Count of events not shown; renders a "+N more" footer when > 0. */
+    overflowCount?: number;
+}
+/** A chronological list of ActivityListItem rows. */
+declare function ActivityList({ className, overflowCount, children, ...props }: ActivityListProps): react_jsx_runtime.JSX.Element;
+
+export { ActivityList, ActivityListItem, type ActivityListItemProps, type ActivityListProps };

package/dist/components/dashboard/activity-list.d.ts

@@ -0,0 +1,27 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { Tone } from './tone.js';
+
+interface ActivityListItemProps extends Omit<React.ComponentProps<"li">, "title"> {
+    label: React.ReactNode;
+    /** Pre-formatted timestamp, e.g. "08:00" or "in 2h". */
+    timestamp?: React.ReactNode;
+    /** Supporting detail under the label. */
+    detail?: React.ReactNode;
+    /** Status marker tone. Ignored when `icon` is provided. */
+    tone?: Tone;
+    /** Leading icon component, used instead of the status dot. */
+    icon?: React.ComponentType<{
+        className?: string;
+    }>;
+}
+/** A single chronological event row. */
+declare function ActivityListItem({ className, label, timestamp, detail, tone, icon, ...props }: ActivityListItemProps): react_jsx_runtime.JSX.Element;
+interface ActivityListProps extends React.ComponentProps<"ul"> {
+    /** Count of events not shown; renders a "+N more" footer when > 0. */
+    overflowCount?: number;
+}
+/** A chronological list of ActivityListItem rows. */
+declare function ActivityList({ className, overflowCount, children, ...props }: ActivityListProps): react_jsx_runtime.JSX.Element;
+
+export { ActivityList, ActivityListItem, type ActivityListItemProps, type ActivityListProps };

package/dist/components/dashboard/activity-list.js

@@ -0,0 +1,59 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/utils";
+import { Icon } from "./typography";
+import { toneDot } from "./tone";
+function ActivityListItem({
+  className,
+  label,
+  timestamp,
+  detail,
+  tone = "neutral",
+  icon,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "li",
+    {
+      "data-slot": "activity-list-item",
+      className: cn("flex items-start gap-2 py-1", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "mt-1 flex size-3.5 shrink-0 items-center justify-center", children: icon ? /* @__PURE__ */ jsx(Icon, { icon, size: "xs", tone: tone === "neutral" ? void 0 : tone }) : /* @__PURE__ */ jsx("span", { className: cn("size-2 rounded-full", toneDot[tone]) }) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between gap-2", children: [
+            /* @__PURE__ */ jsx("span", { className: "truncate text-xs text-[var(--text-primary)]", children: label }),
+            timestamp && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-[11px] tabular-nums text-[var(--text-muted)]", children: timestamp })
+          ] }),
+          detail && /* @__PURE__ */ jsx("span", { className: "line-clamp-1 text-xs text-[var(--text-muted)]", children: detail })
+        ] })
+      ]
+    }
+  );
+}
+function ActivityList({
+  className,
+  overflowCount = 0,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "ul",
+    {
+      "data-slot": "activity-list",
+      className: cn("flex min-w-0 flex-col", className),
+      ...props,
+      children: [
+        children,
+        overflowCount > 0 && /* @__PURE__ */ jsxs("li", { className: "pl-5 pt-0.5 text-[11px] text-[var(--text-muted)]", children: [
+          "+",
+          overflowCount,
+          " more"
+        ] })
+      ]
+    }
+  );
+}
+export {
+  ActivityList,
+  ActivityListItem
+};

package/dist/components/dashboard/catalog.cjs

@@ -0,0 +1,322 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});const dashboardComponentCatalog = [
+  // ── Layout and structure ──────────────────────────────────────
+  {
+    name: "WidgetContent",
+    category: "layout",
+    kind: "composite",
+    summary: "Full-height widget frame with standard padding and a container-query boundary.",
+    useWhen: "As the outermost element of every dashboard widget.",
+    related: ["Stack", "Inline"],
+    status: "stable",
+    example: '<WidgetContent><Stack gap="sm">\u2026</Stack></WidgetContent>'
+  },
+  {
+    name: "Stack",
+    category: "layout",
+    kind: "composite",
+    summary: "Vertical layout with semantic spacing, alignment and optional scrolling.",
+    useWhen: "For the primary top-to-bottom content flow inside a widget.",
+    related: ["Inline", "WidgetContent"],
+    status: "stable",
+    example: '<Stack gap="sm" scroll>\u2026</Stack>'
+  },
+  {
+    name: "Inline",
+    category: "layout",
+    kind: "composite",
+    summary: "Horizontal layout with spacing, alignment, wrap and justify.",
+    useWhen: "For a row of items such as a header with a trailing action.",
+    related: ["Stack"],
+    status: "stable",
+    example: '<Inline justify="between" align="center">\u2026</Inline>'
+  },
+  {
+    name: "Grid",
+    category: "layout",
+    kind: "composite",
+    summary: "Responsive grid with bounded columns and gap.",
+    useWhen: "For metric and summary layouts that reflow by width.",
+    related: ["MetricGroup"],
+    status: "stable",
+    example: '<Grid columns="auto" minColumnWidth={120}>\u2026</Grid>'
+  },
+  {
+    name: "Section",
+    category: "layout",
+    kind: "composite",
+    summary: "Compact section with optional heading, description and trailing action.",
+    useWhen: "To group related content under a labelled heading.",
+    related: ["Divider", "Heading"],
+    status: "stable",
+    example: '<Section heading="Summary" action={\u2026}>\u2026</Section>'
+  },
+  {
+    name: "Divider",
+    category: "layout",
+    kind: "composite",
+    summary: "Compact horizontal or vertical divider built on Separator.",
+    useWhen: "To separate sections without a heavy border.",
+    related: ["Section"],
+    status: "stable",
+    example: '<Divider spacing="sm" />'
+  },
+  // ── Typography and media ──────────────────────────────────────
+  {
+    name: "Text",
+    category: "typography",
+    kind: "composite",
+    summary: "Semantic text variants (body, label, supporting, muted, numeric) with truncation.",
+    useWhen: "For any text, instead of ad-hoc font-size utilities.",
+    related: ["Heading"],
+    status: "stable",
+    example: '<Text variant="label">Jobs</Text>'
+  },
+  {
+    name: "Heading",
+    category: "typography",
+    kind: "composite",
+    summary: "Compact heading levels and sizes that keep correct HTML semantics.",
+    useWhen: "For section and view titles.",
+    related: ["Section", "Text"],
+    status: "stable",
+    example: '<Heading level={2} size="md">Overview</Heading>'
+  },
+  {
+    name: "Icon",
+    category: "typography",
+    kind: "composite",
+    summary: "Consistent icon wrapper for size, tone and accessibility.",
+    useWhen: "To render an icon component with a shared size and tone.",
+    related: ["IconButton"],
+    status: "stable",
+    example: '<Icon icon={Clock} size="sm" tone="warning" />'
+  },
+  // ── Data display ──────────────────────────────────────────────
+  {
+    name: "Metric",
+    category: "data-display",
+    kind: "composite",
+    summary: "Label + value with optional icon, supporting text and trend.",
+    useWhen: "To show a single number inline.",
+    related: ["MetricCard", "MetricGroup"],
+    status: "stable",
+    example: '<Metric label="Jobs" value={6} />'
+  },
+  {
+    name: "MetricCard",
+    category: "data-display",
+    kind: "composite",
+    summary: "A contained surface for a Metric or compact summary.",
+    useWhen: "To give a metric its own bounded card.",
+    related: ["Metric", "MetricGroup"],
+    status: "stable",
+    example: '<MetricCard><Metric label="Jobs" value={6} /></MetricCard>'
+  },
+  {
+    name: "MetricGroup",
+    category: "data-display",
+    kind: "composite",
+    summary: "Arranges multiple metrics responsively in a bounded grid.",
+    useWhen: "To show several metrics that reflow by width.",
+    related: ["Metric", "Grid"],
+    status: "stable",
+    example: "<MetricGroup><Metric \u2026 /><Metric \u2026 /></MetricGroup>"
+  },
+  {
+    name: "Status",
+    category: "data-display",
+    kind: "composite",
+    summary: "Semantic status dot, label or pill with neutral/success/warning/error/info tones.",
+    useWhen: "To show a health or state indicator. Map domain status onto a tone.",
+    related: ["Badge"],
+    status: "stable",
+    example: '<Status tone="success">Active</Status>'
+  },
+  {
+    name: "Badge",
+    category: "data-display",
+    kind: "primitive",
+    summary: "Existing badge primitive, extended with success/warning/info tones.",
+    useWhen: "For compact counts, tags and category labels.",
+    related: ["Status"],
+    status: "stable",
+    example: '<Badge variant="success">Passed</Badge>'
+  },
+  {
+    name: "KeyValue",
+    category: "data-display",
+    kind: "composite",
+    summary: "A single label/value row with predictable alignment and truncation.",
+    useWhen: "For metadata, totals and configuration summaries.",
+    related: ["KeyValueList"],
+    status: "stable",
+    example: '<KeyValue label="Region" value="eu-west-1" mono />'
+  },
+  {
+    name: "KeyValueList",
+    category: "data-display",
+    kind: "composite",
+    summary: "A vertical list of KeyValue rows.",
+    useWhen: "For a block of metadata pairs.",
+    related: ["KeyValue"],
+    status: "stable",
+    example: "<KeyValueList><KeyValue \u2026 /></KeyValueList>"
+  },
+  {
+    name: "ItemList",
+    category: "data-display",
+    kind: "composite",
+    summary: "Compact rows with leading media, text, trailing metadata, actions and overflow.",
+    useWhen: "For entity lists (files, notes, results).",
+    related: ["ItemListItem", "ActivityList"],
+    status: "stable",
+    example: "<ItemList overflowCount={3}><ItemListItem \u2026 /></ItemList>"
+  },
+  {
+    name: "ItemListItem",
+    category: "data-display",
+    kind: "composite",
+    summary: "A single compact list row with media, primary/secondary text and actions.",
+    useWhen: "As the row inside an ItemList.",
+    related: ["ItemList"],
+    status: "stable",
+    example: '<ItemListItem primary="Report.pdf" trailing="2h" />'
+  },
+  {
+    name: "ActivityList",
+    category: "data-display",
+    kind: "composite",
+    summary: "A chronological list for recent events with a shared overflow footer.",
+    useWhen: "For time-ordered activity or upcoming events.",
+    related: ["ActivityListItem", "ItemList"],
+    status: "stable",
+    example: "<ActivityList><ActivityListItem \u2026 /></ActivityList>"
+  },
+  {
+    name: "ActivityListItem",
+    category: "data-display",
+    kind: "composite",
+    summary: "An event row with a status marker or icon, label, timestamp and detail.",
+    useWhen: "As the row inside an ActivityList.",
+    related: ["ActivityList", "Status"],
+    status: "stable",
+    example: '<ActivityListItem label="Backup" timestamp="08:00" tone="success" />'
+  },
+  {
+    name: "ProgressRing",
+    category: "data-display",
+    kind: "composite",
+    summary: "Accessible circular progress / donut gauge, no charting dependency.",
+    useWhen: "For a bounded value such as a success rate or usage percentage.",
+    related: ["Metric"],
+    status: "stable",
+    example: '<ProgressRing value={75} label="Success rate" tone="success" />'
+  },
+  {
+    name: "StaleIndicator",
+    category: "data-display",
+    kind: "composite",
+    summary: "Compact hint that data may be out of date, with optional refresh action.",
+    useWhen: "When displayed data can lag its source.",
+    related: ["DataBoundary"],
+    status: "stable",
+    example: '<StaleIndicator lastUpdated="Updated 5m ago" onRefresh={\u2026} />'
+  },
+  // ── Runtime states and feedback ───────────────────────────────
+  {
+    name: "DataBoundary",
+    category: "state",
+    kind: "composite",
+    summary: "Selects presentation for loading / ready / empty / stale / error states.",
+    useWhen: "To switch a widget's content by data state without owning fetching.",
+    related: ["EmptyState", "MetricSkeleton", "StaleIndicator"],
+    status: "stable",
+    example: "<DataBoundary state={state} loading={\u2026} empty={\u2026} error={\u2026}>\u2026</DataBoundary>"
+  },
+  {
+    name: "EmptyState",
+    category: "state",
+    kind: "composite",
+    summary: "Compact empty state built on the Empty primitives.",
+    useWhen: "When there is nothing to show yet.",
+    related: ["DataBoundary"],
+    status: "stable",
+    example: '<EmptyState icon={Inbox} title="No activity yet" />'
+  },
+  {
+    name: "Alert",
+    category: "state",
+    kind: "primitive",
+    summary: "Existing alert primitive for inline warnings and errors.",
+    useWhen: "For a persistent inline message inside a widget or view.",
+    related: ["DataBoundary"],
+    status: "stable",
+    example: '<Alert variant="destructive">Failed to load</Alert>'
+  },
+  {
+    name: "MetricSkeleton",
+    category: "state",
+    kind: "composite",
+    summary: "Loading placeholder for a row of metrics.",
+    useWhen: "As the `loading` fallback for metric layouts.",
+    related: ["DataBoundary", "ListSkeleton"],
+    status: "stable",
+    example: "<MetricSkeleton count={3} />"
+  },
+  {
+    name: "ListSkeleton",
+    category: "state",
+    kind: "composite",
+    summary: "Loading placeholder for a list of rows.",
+    useWhen: "As the `loading` fallback for item lists.",
+    related: ["DataBoundary", "ItemList"],
+    status: "stable",
+    example: "<ListSkeleton count={4} />"
+  },
+  {
+    name: "ActivitySkeleton",
+    category: "state",
+    kind: "composite",
+    summary: "Loading placeholder for an activity list.",
+    useWhen: "As the `loading` fallback for activity feeds.",
+    related: ["DataBoundary", "ActivityList"],
+    status: "stable",
+    example: "<ActivitySkeleton count={4} />"
+  },
+  {
+    name: "Skeleton",
+    category: "state",
+    kind: "primitive",
+    summary: "Existing skeleton primitive for bespoke loading shapes.",
+    useWhen: "When the prebuilt skeleton patterns do not fit.",
+    related: ["MetricSkeleton", "ListSkeleton", "ActivitySkeleton"],
+    status: "stable",
+    example: '<Skeleton className="h-4 w-24" />'
+  },
+  // ── Actions ───────────────────────────────────────────────────
+  {
+    name: "Button",
+    category: "action",
+    kind: "primitive",
+    summary: "Existing button primitive, the standard text-action control.",
+    useWhen: "For a labelled action.",
+    related: ["IconButton"],
+    status: "stable",
+    example: '<Button size="sm">Open</Button>'
+  },
+  {
+    name: "IconButton",
+    category: "action",
+    kind: "composite",
+    summary: "Small icon-only button with a required accessible label.",
+    useWhen: "For a compact action such as refresh or dismiss.",
+    related: ["Button", "Icon"],
+    status: "stable",
+    example: '<IconButton icon={RotateCw} label="Refresh" size="xs" />'
+  }
+];
+var catalog_default = dashboardComponentCatalog;
+
+
+
+exports.dashboardComponentCatalog = dashboardComponentCatalog; exports.default = catalog_default;

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

@@ -0,0 +1,14 @@
+interface DashboardComponentCatalogEntry {
+    name: string;
+    category: "layout" | "typography" | "data-display" | "state" | "action" | "filter";
+    /** `primitive` = existing @sero-ai/ui primitive; `composite` = new dashboard component. */
+    kind: "primitive" | "composite";
+    summary: string;
+    useWhen: string;
+    related?: string[];
+    status: "stable" | "experimental";
+    example?: string;
+}
+declare const dashboardComponentCatalog: DashboardComponentCatalogEntry[];
+
+export { type DashboardComponentCatalogEntry, dashboardComponentCatalog, dashboardComponentCatalog as default };

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

@@ -0,0 +1,14 @@
+interface DashboardComponentCatalogEntry {
+    name: string;
+    category: "layout" | "typography" | "data-display" | "state" | "action" | "filter";
+    /** `primitive` = existing @sero-ai/ui primitive; `composite` = new dashboard component. */
+    kind: "primitive" | "composite";
+    summary: string;
+    useWhen: string;
+    related?: string[];
+    status: "stable" | "experimental";
+    example?: string;
+}
+declare const dashboardComponentCatalog: DashboardComponentCatalogEntry[];
+
+export { type DashboardComponentCatalogEntry, dashboardComponentCatalog, dashboardComponentCatalog as default };