@sero-ai/ui 0.3.2 → 0.4.0

package/dist/components/dashboard/tone.cjs

@@ -0,0 +1,26 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});const 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)]"
+};
+const 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)]"
+};
+const 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)]"
+};
+
+
+
+
+exports.toneColor = toneColor; exports.toneDot = toneDot; exports.tonePill = tonePill;

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

@@ -0,0 +1,9 @@
+type Tone = "neutral" | "success" | "warning" | "error" | "info";
+/** Solid foreground colour for a tone (dots, icons, emphasised text). */
+declare const toneColor: Record<Tone, string>;
+/** Solid background colour for a tone (status dots). */
+declare const toneDot: Record<Tone, string>;
+/** Muted tinted background + matching text for a tone (pills, chips). */
+declare const tonePill: Record<Tone, string>;
+
+export { type Tone, toneColor, toneDot, tonePill };

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

@@ -0,0 +1,9 @@
+type Tone = "neutral" | "success" | "warning" | "error" | "info";
+/** Solid foreground colour for a tone (dots, icons, emphasised text). */
+declare const toneColor: Record<Tone, string>;
+/** Solid background colour for a tone (status dots). */
+declare const toneDot: Record<Tone, string>;
+/** Muted tinted background + matching text for a tone (pills, chips). */
+declare const tonePill: Record<Tone, string>;
+
+export { type Tone, toneColor, toneDot, tonePill };

package/dist/components/dashboard/tone.js

@@ -0,0 +1,26 @@
+const 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)]"
+};
+const 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)]"
+};
+const 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)]"
+};
+export {
+  toneColor,
+  toneDot,
+  tonePill
+};

package/dist/components/dashboard/typography.cjs

@@ -0,0 +1,99 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});var _jsxruntime = require('react/jsx-runtime');
+var _classvarianceauthority = require('class-variance-authority');
+var _utils = require('../../lib/utils');
+var _tone = require('./tone');
+const textVariants = _classvarianceauthority.cva.call(void 0, "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" }
+});
+const clampClass = {
+  1: "line-clamp-1",
+  2: "line-clamp-2",
+  3: "line-clamp-3"
+};
+function Text({
+  className,
+  variant,
+  truncate,
+  clamp,
+  tone,
+  ...props
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "span",
+    {
+      "data-slot": "text",
+      className: _utils.cn.call(void 0, 
+        textVariants({ variant }),
+        clamp ? clampClass[clamp] : truncate && "truncate",
+        tone && _tone.toneColor[tone],
+        className
+      ),
+      ...props
+    }
+  );
+}
+const 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__ */ _jsxruntime.jsx.call(void 0, 
+    Tag,
+    {
+      "data-slot": "heading",
+      className: _utils.cn.call(void 0, 
+        "leading-snug text-[var(--text-primary)]",
+        headingSize[size],
+        truncate && "truncate",
+        className
+      ),
+      ...props
+    }
+  );
+}
+const 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__ */ _jsxruntime.jsx.call(void 0, 
+    "span",
+    {
+      "data-slot": "icon",
+      role: label ? "img" : void 0,
+      "aria-label": label,
+      "aria-hidden": label ? void 0 : true,
+      className: _utils.cn.call(void 0, 
+        "inline-flex shrink-0 items-center justify-center",
+        tone ? _tone.toneColor[tone] : "text-[var(--text-muted)]",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, IconCmp, { className: iconSize[size] })
+    }
+  );
+}
+
+
+
+
+exports.Heading = Heading; exports.Icon = Icon; exports.Text = Text;

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

@@ -0,0 +1,57 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import { VariantProps } from 'class-variance-authority';
+import { Tone } from './tone.cjs';
+
+declare const textVariants: (props?: ({
+    variant?: "body" | "label" | "numeric" | "muted" | "supporting" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface TextProps extends Omit<React.ComponentProps<"span">, "color">, VariantProps<typeof textVariants> {
+    /** Truncate to a single line with an ellipsis. */
+    truncate?: boolean;
+    /** Clamp to N lines. Overrides `truncate`. */
+    clamp?: 1 | 2 | 3;
+    /** Semantic colour override (e.g. a numeric value that turns red on error). */
+    tone?: Tone;
+    asChild?: boolean;
+}
+/** Semantic text with truncation, line-clamp and optional tone. */
+declare function Text({ className, variant, truncate, clamp, tone, ...props }: TextProps): react_jsx_runtime.JSX.Element;
+declare const headingSize: {
+    readonly sm: "text-xs font-semibold";
+    readonly md: "text-sm font-semibold";
+    readonly lg: "text-base font-semibold";
+};
+interface HeadingProps extends React.ComponentProps<"h2"> {
+    /** HTML heading level for correct document semantics (1–4). */
+    level?: 1 | 2 | 3 | 4;
+    /** Visual size, decoupled from the semantic level. */
+    size?: keyof typeof headingSize;
+    truncate?: boolean;
+}
+/** Compact heading with correct HTML semantics decoupled from visual size. */
+declare function Heading({ className, level, size, truncate, ...props }: HeadingProps): react_jsx_runtime.JSX.Element;
+declare const iconSize: {
+    readonly xs: "size-3";
+    readonly sm: "size-3.5";
+    readonly md: "size-4";
+    readonly lg: "size-5";
+};
+interface IconProps extends React.ComponentProps<"span"> {
+    /** The icon component to render (e.g. a lucide-react icon). */
+    icon: React.ComponentType<{
+        className?: string;
+    }>;
+    size?: keyof typeof iconSize;
+    tone?: Tone;
+    /**
+     * Accessible label. When omitted the icon is decorative and hidden from
+     * assistive tech; when provided it is exposed as an image with this name.
+     */
+    label?: string;
+}
+/** Consistent icon wrapper for size, tone and accessibility. */
+declare function Icon({ className, icon: IconCmp, size, tone, label, ...props }: IconProps): react_jsx_runtime.JSX.Element;
+
+export { Heading, type HeadingProps, Icon, type IconProps, Text, type TextProps };

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

@@ -0,0 +1,57 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import { VariantProps } from 'class-variance-authority';
+import { Tone } from './tone.js';
+
+declare const textVariants: (props?: ({
+    variant?: "body" | "label" | "numeric" | "muted" | "supporting" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface TextProps extends Omit<React.ComponentProps<"span">, "color">, VariantProps<typeof textVariants> {
+    /** Truncate to a single line with an ellipsis. */
+    truncate?: boolean;
+    /** Clamp to N lines. Overrides `truncate`. */
+    clamp?: 1 | 2 | 3;
+    /** Semantic colour override (e.g. a numeric value that turns red on error). */
+    tone?: Tone;
+    asChild?: boolean;
+}
+/** Semantic text with truncation, line-clamp and optional tone. */
+declare function Text({ className, variant, truncate, clamp, tone, ...props }: TextProps): react_jsx_runtime.JSX.Element;
+declare const headingSize: {
+    readonly sm: "text-xs font-semibold";
+    readonly md: "text-sm font-semibold";
+    readonly lg: "text-base font-semibold";
+};
+interface HeadingProps extends React.ComponentProps<"h2"> {
+    /** HTML heading level for correct document semantics (1–4). */
+    level?: 1 | 2 | 3 | 4;
+    /** Visual size, decoupled from the semantic level. */
+    size?: keyof typeof headingSize;
+    truncate?: boolean;
+}
+/** Compact heading with correct HTML semantics decoupled from visual size. */
+declare function Heading({ className, level, size, truncate, ...props }: HeadingProps): react_jsx_runtime.JSX.Element;
+declare const iconSize: {
+    readonly xs: "size-3";
+    readonly sm: "size-3.5";
+    readonly md: "size-4";
+    readonly lg: "size-5";
+};
+interface IconProps extends React.ComponentProps<"span"> {
+    /** The icon component to render (e.g. a lucide-react icon). */
+    icon: React.ComponentType<{
+        className?: string;
+    }>;
+    size?: keyof typeof iconSize;
+    tone?: Tone;
+    /**
+     * Accessible label. When omitted the icon is decorative and hidden from
+     * assistive tech; when provided it is exposed as an image with this name.
+     */
+    label?: string;
+}
+/** Consistent icon wrapper for size, tone and accessibility. */
+declare function Icon({ className, icon: IconCmp, size, tone, label, ...props }: IconProps): react_jsx_runtime.JSX.Element;
+
+export { Heading, type HeadingProps, Icon, type IconProps, Text, type TextProps };

package/dist/components/dashboard/typography.js

@@ -0,0 +1,99 @@
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/utils";
+import { toneColor } from "./tone";
+const textVariants = cva("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" }
+});
+const clampClass = {
+  1: "line-clamp-1",
+  2: "line-clamp-2",
+  3: "line-clamp-3"
+};
+function Text({
+  className,
+  variant,
+  truncate,
+  clamp,
+  tone,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-slot": "text",
+      className: cn(
+        textVariants({ variant }),
+        clamp ? clampClass[clamp] : truncate && "truncate",
+        tone && toneColor[tone],
+        className
+      ),
+      ...props
+    }
+  );
+}
+const 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__ */ jsx(
+    Tag,
+    {
+      "data-slot": "heading",
+      className: cn(
+        "leading-snug text-[var(--text-primary)]",
+        headingSize[size],
+        truncate && "truncate",
+        className
+      ),
+      ...props
+    }
+  );
+}
+const 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__ */ jsx(
+    "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__ */ jsx(IconCmp, { className: iconSize[size] })
+    }
+  );
+}
+export {
+  Heading,
+  Icon,
+  Text
+};

package/dist/components/reference/ActivityExample.cjs

@@ -0,0 +1,47 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});var _jsxruntime = require('react/jsx-runtime');
+var _lucidereact = require('lucide-react');
+
+
+
+
+
+
+
+
+
+var _dashboard = require('../dashboard');
+var _badge = require('../ui/badge');
+const 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__ */ _jsxruntime.jsx.call(void 0, _dashboard.WidgetContent, { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _dashboard.Stack, { gap: "sm", fill: true, children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _dashboard.Inline, { justify: "between", align: "center", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _dashboard.Inline, { gap: "xs", align: "center", children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _dashboard.Text, { variant: "label", children: "Recent files" }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _badge.Badge, { variant: "info", children: ITEMS.length })
+    ] }) }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _dashboard.Stack, { gap: "none", scroll: true, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _dashboard.ItemList, { children: ITEMS.map((f) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _dashboard.ItemListItem,
+      {
+        leading: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.FileText, { className: "size-4 text-[var(--text-muted)]" }),
+        primary: f.title,
+        trailing: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _dashboard.Inline, { gap: "xs", align: "center", children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _badge.Badge, { variant: "secondary", children: f.badge }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: f.meta })
+        ] })
+      },
+      f.id
+    )) }) }),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _dashboard.Inline, { justify: "between", align: "center", children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _dashboard.Status, { tone: "info", variant: "pill", children: "Synced" }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _dashboard.StaleIndicator, { lastUpdated: "Synced 30s ago" })
+    ] })
+  ] }) });
+}
+var ActivityExample_default = ActivityExample;
+
+
+
+exports.ActivityExample = ActivityExample; exports.default = ActivityExample_default;

package/dist/components/reference/ActivityExample.d.cts

@@ -0,0 +1,5 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+declare function ActivityExample(): react_jsx_runtime.JSX.Element;
+
+export { ActivityExample, ActivityExample as default };

package/dist/components/reference/ActivityExample.d.ts

@@ -0,0 +1,5 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+declare function ActivityExample(): react_jsx_runtime.JSX.Element;
+
+export { ActivityExample, ActivityExample as default };

package/dist/components/reference/ActivityExample.js

@@ -0,0 +1,47 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { FileText } from "lucide-react";
+import {
+  Inline,
+  ItemList,
+  ItemListItem,
+  Stack,
+  StaleIndicator,
+  Status,
+  Text,
+  WidgetContent
+} from "../dashboard";
+import { Badge } from "../ui/badge";
+const 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__ */ jsx(WidgetContent, { children: /* @__PURE__ */ jsxs(Stack, { gap: "sm", fill: true, children: [
+    /* @__PURE__ */ jsx(Inline, { justify: "between", align: "center", children: /* @__PURE__ */ jsxs(Inline, { gap: "xs", align: "center", children: [
+      /* @__PURE__ */ jsx(Text, { variant: "label", children: "Recent files" }),
+      /* @__PURE__ */ jsx(Badge, { variant: "info", children: ITEMS.length })
+    ] }) }),
+    /* @__PURE__ */ jsx(Stack, { gap: "none", scroll: true, children: /* @__PURE__ */ jsx(ItemList, { children: ITEMS.map((f) => /* @__PURE__ */ jsx(
+      ItemListItem,
+      {
+        leading: /* @__PURE__ */ jsx(FileText, { className: "size-4 text-[var(--text-muted)]" }),
+        primary: f.title,
+        trailing: /* @__PURE__ */ jsxs(Inline, { gap: "xs", align: "center", children: [
+          /* @__PURE__ */ jsx(Badge, { variant: "secondary", children: f.badge }),
+          /* @__PURE__ */ jsx("span", { children: f.meta })
+        ] })
+      },
+      f.id
+    )) }) }),
+    /* @__PURE__ */ jsxs(Inline, { justify: "between", align: "center", children: [
+      /* @__PURE__ */ jsx(Status, { tone: "info", variant: "pill", children: "Synced" }),
+      /* @__PURE__ */ jsx(StaleIndicator, { lastUpdated: "Synced 30s ago" })
+    ] })
+  ] }) });
+}
+var ActivityExample_default = ActivityExample;
+export {
+  ActivityExample,
+  ActivityExample_default as default
+};

package/dist/components/reference/ResourceExample.cjs

@@ -0,0 +1,54 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});var _jsxruntime = require('react/jsx-runtime');
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+var _dashboard = require('../dashboard');
+function Ring({
+  value,
+  label,
+  tone
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _dashboard.Stack, { gap: "xs", align: "center", children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _dashboard.ProgressRing, { value, label, tone }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _dashboard.Text, { variant: "muted", children: label })
+  ] });
+}
+function ResourceExample() {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _dashboard.WidgetContent, { scroll: true, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _dashboard.Stack, { gap: "sm", children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _dashboard.Heading, { level: 2, size: "md", children: "Resources" }),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _dashboard.MetricGroup, { children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _dashboard.Metric, { label: "CPU", value: "42%", tone: "success" }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _dashboard.Metric, { label: "Memory", value: "6.1 GB" }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _dashboard.Metric, { label: "Disk", value: "71%", tone: "warning" })
+    ] }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _dashboard.Divider, {}),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _dashboard.Section, { heading: "Usage", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _dashboard.Grid, { columns: 3, gap: "sm", children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Ring, { value: 42, label: "CPU", tone: "success" }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Ring, { value: 61, label: "Memory", tone: "info" }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Ring, { value: 71, label: "Disk", tone: "warning" })
+    ] }) }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _dashboard.Divider, {}),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _dashboard.Section, { heading: "Host", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _dashboard.KeyValueList, { children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _dashboard.KeyValue, { label: "Region", value: "eu-west-1", mono: true }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _dashboard.KeyValue, { label: "Instance", value: "c7g.xlarge", mono: true }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _dashboard.KeyValue, { label: "Uptime", value: "14d 6h", mono: true }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _dashboard.KeyValue, { label: "Status", value: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _dashboard.Status, { tone: "success", children: "Healthy" }) })
+    ] }) })
+  ] }) });
+}
+var ResourceExample_default = ResourceExample;
+
+
+
+exports.ResourceExample = ResourceExample; exports.default = ResourceExample_default;

package/dist/components/reference/ResourceExample.d.cts

@@ -0,0 +1,5 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+declare function ResourceExample(): react_jsx_runtime.JSX.Element;
+
+export { ResourceExample, ResourceExample as default };

package/dist/components/reference/ResourceExample.d.ts

@@ -0,0 +1,5 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+declare function ResourceExample(): react_jsx_runtime.JSX.Element;
+
+export { ResourceExample, ResourceExample as default };

package/dist/components/reference/ResourceExample.js

@@ -0,0 +1,54 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  Divider,
+  Grid,
+  Heading,
+  KeyValue,
+  KeyValueList,
+  Metric,
+  MetricGroup,
+  ProgressRing,
+  Section,
+  Stack,
+  Status,
+  Text,
+  WidgetContent
+} from "../dashboard";
+function Ring({
+  value,
+  label,
+  tone
+}) {
+  return /* @__PURE__ */ jsxs(Stack, { gap: "xs", align: "center", children: [
+    /* @__PURE__ */ jsx(ProgressRing, { value, label, tone }),
+    /* @__PURE__ */ jsx(Text, { variant: "muted", children: label })
+  ] });
+}
+function ResourceExample() {
+  return /* @__PURE__ */ jsx(WidgetContent, { scroll: true, children: /* @__PURE__ */ jsxs(Stack, { gap: "sm", children: [
+    /* @__PURE__ */ jsx(Heading, { level: 2, size: "md", children: "Resources" }),
+    /* @__PURE__ */ jsxs(MetricGroup, { children: [
+      /* @__PURE__ */ jsx(Metric, { label: "CPU", value: "42%", tone: "success" }),
+      /* @__PURE__ */ jsx(Metric, { label: "Memory", value: "6.1 GB" }),
+      /* @__PURE__ */ jsx(Metric, { label: "Disk", value: "71%", tone: "warning" })
+    ] }),
+    /* @__PURE__ */ jsx(Divider, {}),
+    /* @__PURE__ */ jsx(Section, { heading: "Usage", children: /* @__PURE__ */ jsxs(Grid, { columns: 3, gap: "sm", children: [
+      /* @__PURE__ */ jsx(Ring, { value: 42, label: "CPU", tone: "success" }),
+      /* @__PURE__ */ jsx(Ring, { value: 61, label: "Memory", tone: "info" }),
+      /* @__PURE__ */ jsx(Ring, { value: 71, label: "Disk", tone: "warning" })
+    ] }) }),
+    /* @__PURE__ */ jsx(Divider, {}),
+    /* @__PURE__ */ jsx(Section, { heading: "Host", children: /* @__PURE__ */ jsxs(KeyValueList, { children: [
+      /* @__PURE__ */ jsx(KeyValue, { label: "Region", value: "eu-west-1", mono: true }),
+      /* @__PURE__ */ jsx(KeyValue, { label: "Instance", value: "c7g.xlarge", mono: true }),
+      /* @__PURE__ */ jsx(KeyValue, { label: "Uptime", value: "14d 6h", mono: true }),
+      /* @__PURE__ */ jsx(KeyValue, { label: "Status", value: /* @__PURE__ */ jsx(Status, { tone: "success", children: "Healthy" }) })
+    ] }) })
+  ] }) });
+}
+var ResourceExample_default = ResourceExample;
+export {
+  ResourceExample,
+  ResourceExample_default as default
+};