@upbound/monarch-blocks 0.1.0

package/dist/page-header.d.ts

@@ -0,0 +1,12 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+declare function PageHeader({ className, children, ...props }: React.ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
+declare function PageHeaderAvatar({ className, ...props }: React.ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
+declare function PageHeaderContent({ className, ...props }: React.ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
+declare function PageHeaderTitle({ className, ...props }: React.ComponentProps<'h1'>): react_jsx_runtime.JSX.Element;
+declare function PageHeaderDescription({ className, ...props }: React.ComponentProps<'p'>): react_jsx_runtime.JSX.Element;
+declare function PageHeaderMeta({ className, ...props }: React.ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
+declare function PageHeaderActions({ className, ...props }: React.ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
+declare function PageHeaderTabs({ className, ...props }: React.ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
+
+export { PageHeader, PageHeaderActions, PageHeaderAvatar, PageHeaderContent, PageHeaderDescription, PageHeaderMeta, PageHeaderTabs, PageHeaderTitle };

package/dist/page-header.js

@@ -0,0 +1,120 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+
+// src/lib/utils.ts
+import { clsx } from "clsx";
+import { extendTailwindMerge } from "tailwind-merge";
+var twMerge = extendTailwindMerge({
+  extend: {
+    classGroups: {
+      "font-size": [
+        {
+          text: [
+            "display-hero",
+            "display-kpi-sm",
+            "display-kpi",
+            "display-kpi-lg",
+            "display-feature",
+            "h1",
+            "h2",
+            "h3",
+            "h4",
+            "body-lg",
+            "body",
+            "body-sm",
+            "caption",
+            "eyebrow"
+          ]
+        }
+      ]
+    }
+  }
+});
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/page-header.tsx
+import { jsx } from "react/jsx-runtime";
+function PageHeader(_a) {
+  var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
+  return /* @__PURE__ */ jsx("div", __spreadProps(__spreadValues({ "data-slot": "page-header", className: cn("flex w-full items-start justify-between gap-4", className) }, props), { children }));
+}
+function PageHeaderAvatar(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx("div", __spreadValues({ "data-slot": "page-header-avatar", className: cn("shrink-0 self-center", className) }, props));
+}
+function PageHeaderContent(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx("div", __spreadValues({ "data-slot": "page-header-content", className: cn("flex flex-1 flex-col gap-1", className) }, props));
+}
+function PageHeaderTitle(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx("h1", __spreadValues({ "data-slot": "page-header-title", className: cn("text-h1 text-foreground", className) }, props));
+}
+function PageHeaderDescription(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx("p", __spreadValues({ "data-slot": "page-header-description", className: cn("text-body text-muted-foreground", className) }, props));
+}
+function PageHeaderMeta(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    __spreadValues({
+      "data-slot": "page-header-meta",
+      className: cn(
+        "text-body text-muted-foreground flex flex-wrap items-center gap-4",
+        "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-(--icon-default)",
+        className
+      )
+    }, props)
+  );
+}
+function PageHeaderActions(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx("div", __spreadValues({ "data-slot": "page-header-actions", className: cn("flex items-center gap-2", className) }, props));
+}
+function PageHeaderTabs(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx("div", __spreadValues({ "data-slot": "page-header-tabs", className: cn("border-b", className) }, props));
+}
+export {
+  PageHeader,
+  PageHeaderActions,
+  PageHeaderAvatar,
+  PageHeaderContent,
+  PageHeaderDescription,
+  PageHeaderMeta,
+  PageHeaderTabs,
+  PageHeaderTitle
+};
+//# sourceMappingURL=page-header.js.map

package/dist/page-header.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/utils.ts","../src/page-header.tsx"],"sourcesContent":["import { clsx, type ClassValue } from 'clsx';\nimport { extendTailwindMerge } from 'tailwind-merge';\n\nconst twMerge = extendTailwindMerge({\n  extend: {\n    classGroups: {\n      'font-size': [\n        {\n          text: [\n            'display-hero',\n            'display-kpi-sm',\n            'display-kpi',\n            'display-kpi-lg',\n            'display-feature',\n            'h1',\n            'h2',\n            'h3',\n            'h4',\n            'body-lg',\n            'body',\n            'body-sm',\n            'caption',\n            'eyebrow',\n          ],\n        },\n      ],\n    },\n  },\n});\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n","import { cn } from '@/lib/utils';\n\nfunction PageHeader({ className, children, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div data-slot=\"page-header\" className={cn('flex w-full items-start justify-between gap-4', className)} {...props}>\n      {children}\n    </div>\n  );\n}\n\nfunction PageHeaderAvatar({ className, ...props }: React.ComponentProps<'div'>) {\n  return <div data-slot=\"page-header-avatar\" className={cn('shrink-0 self-center', className)} {...props} />;\n}\n\nfunction PageHeaderContent({ className, ...props }: React.ComponentProps<'div'>) {\n  return <div data-slot=\"page-header-content\" className={cn('flex flex-1 flex-col gap-1', className)} {...props} />;\n}\n\nfunction PageHeaderTitle({ className, ...props }: React.ComponentProps<'h1'>) {\n  return <h1 data-slot=\"page-header-title\" className={cn('text-h1 text-foreground', className)} {...props} />;\n}\n\nfunction PageHeaderDescription({ className, ...props }: React.ComponentProps<'p'>) {\n  return (\n    <p data-slot=\"page-header-description\" className={cn('text-body text-muted-foreground', className)} {...props} />\n  );\n}\n\nfunction PageHeaderMeta({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"page-header-meta\"\n      className={cn(\n        'text-body text-muted-foreground flex flex-wrap items-center gap-4',\n        \"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-(--icon-default)\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction PageHeaderActions({ className, ...props }: React.ComponentProps<'div'>) {\n  return <div data-slot=\"page-header-actions\" className={cn('flex items-center gap-2', className)} {...props} />;\n}\n\nfunction PageHeaderTabs({ className, ...props }: React.ComponentProps<'div'>) {\n  return <div data-slot=\"page-header-tabs\" className={cn('border-b', className)} {...props} />;\n}\n\nexport {\n  PageHeader,\n  PageHeaderAvatar,\n  PageHeaderContent,\n  PageHeaderTitle,\n  PageHeaderDescription,\n  PageHeaderMeta,\n  PageHeaderActions,\n  PageHeaderTabs,\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,SAAS,YAA6B;AACtC,SAAS,2BAA2B;AAEpC,IAAM,UAAU,oBAAoB;AAAA,EAClC,QAAQ;AAAA,IACN,aAAa;AAAA,MACX,aAAa;AAAA,QACX;AAAA,UACE,MAAM;AAAA,YACJ;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF,CAAC;AAEM,SAAS,MAAM,QAAsB;AAC1C,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;;;AC5BI;AAFJ,SAAS,WAAW,IAAgE;AAAhE,eAAE,aAAW,SAFjC,IAEoB,IAA0B,kBAA1B,IAA0B,CAAxB,aAAW;AAC/B,SACE,oBAAC,sCAAI,aAAU,eAAc,WAAW,GAAG,iDAAiD,SAAS,KAAO,QAA3G,EACE,WACH;AAEJ;AAEA,SAAS,iBAAiB,IAAsD;AAAtD,eAAE,YAV5B,IAU0B,IAAgB,kBAAhB,IAAgB,CAAd;AAC1B,SAAO,oBAAC,wBAAI,aAAU,sBAAqB,WAAW,GAAG,wBAAwB,SAAS,KAAO,MAAO;AAC1G;AAEA,SAAS,kBAAkB,IAAsD;AAAtD,eAAE,YAd7B,IAc2B,IAAgB,kBAAhB,IAAgB,CAAd;AAC3B,SAAO,oBAAC,wBAAI,aAAU,uBAAsB,WAAW,GAAG,8BAA8B,SAAS,KAAO,MAAO;AACjH;AAEA,SAAS,gBAAgB,IAAqD;AAArD,eAAE,YAlB3B,IAkByB,IAAgB,kBAAhB,IAAgB,CAAd;AACzB,SAAO,oBAAC,uBAAG,aAAU,qBAAoB,WAAW,GAAG,2BAA2B,SAAS,KAAO,MAAO;AAC3G;AAEA,SAAS,sBAAsB,IAAoD;AAApD,eAAE,YAtBjC,IAsB+B,IAAgB,kBAAhB,IAAgB,CAAd;AAC/B,SACE,oBAAC,sBAAE,aAAU,2BAA0B,WAAW,GAAG,mCAAmC,SAAS,KAAO,MAAO;AAEnH;AAEA,SAAS,eAAe,IAAsD;AAAtD,eAAE,YA5B1B,IA4BwB,IAAgB,kBAAhB,IAAgB,CAAd;AACxB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,OACI;AAAA,EACN;AAEJ;AAEA,SAAS,kBAAkB,IAAsD;AAAtD,eAAE,YA1C7B,IA0C2B,IAAgB,kBAAhB,IAAgB,CAAd;AAC3B,SAAO,oBAAC,wBAAI,aAAU,uBAAsB,WAAW,GAAG,2BAA2B,SAAS,KAAO,MAAO;AAC9G;AAEA,SAAS,eAAe,IAAsD;AAAtD,eAAE,YA9C1B,IA8CwB,IAAgB,kBAAhB,IAAgB,CAAd;AACxB,SAAO,oBAAC,wBAAI,aAAU,oBAAmB,WAAW,GAAG,YAAY,SAAS,KAAO,MAAO;AAC5F;","names":[]}

package/dist/relative-time.d.ts

@@ -0,0 +1,60 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+interface RelativeTimeProps extends Omit<React.TimeHTMLAttributes<HTMLTimeElement>, 'dateTime' | 'title'> {
+    /**
+     * The timestamp to display. Accepts a `Date`, ISO string, or unix milliseconds.
+     */
+    date: Date | string | number;
+    /**
+     * Format variant. `default` produces full-word output ("5 minutes ago",
+     * "yesterday"). `compact` abbreviates units ("5m ago", "1d ago") for tight
+     * horizontal space like tables, KPI cards, or inline metadata.
+     */
+    variant?: 'default' | 'compact';
+    /**
+     * Override the tooltip shown on hover. Defaults to the full localized
+     * absolute date-time string (e.g. "Monday, January 20, 2025 at 3:22 PM PST").
+     */
+    title?: string;
+}
+/**
+ * Displays a timestamp as a live-updating relative string ("5 minutes ago",
+ * "yesterday", "on Nov 18") with the absolute date in the native tooltip.
+ *
+ * Falls back to an absolute "on [Month Day]" format for dates older than 30 days
+ * so that stale timestamps remain legible at a glance.
+ *
+ * @see https://design.upbound.io/components/date-and-time
+ */
+declare function RelativeTime({ date, variant, title, className, ...props }: RelativeTimeProps): react_jsx_runtime.JSX.Element;
+interface AbsoluteTimestampProps extends Omit<React.TimeHTMLAttributes<HTMLTimeElement>, 'dateTime'> {
+    /** The timestamp to display. */
+    date: Date | string | number;
+    /** Format variant matching the Content Principles absolute timestamp table. */
+    variant?: 'deadline' | 'log' | 'date' | 'range';
+    /** End date for range variant. */
+    end?: Date | string | number;
+}
+/**
+ * Formats a date as an absolute timestamp following the Content Principles.
+ * Use for deadlines, certificate expiry, audit logs, and date-only displays.
+ */
+declare function AbsoluteTimestamp({ date, variant, end, className, ...props }: AbsoluteTimestampProps): react_jsx_runtime.JSX.Element;
+interface ElapsedTimeProps extends Omit<React.TimeHTMLAttributes<HTMLTimeElement>, 'dateTime'> {
+    /** Total elapsed seconds. Ignored if startedAt is provided. */
+    seconds?: number;
+    /** Format variant matching the Content Principles elapsed time table. */
+    variant?: 'compact' | 'expanded' | 'long';
+    /** Live-tick every second for active operations. */
+    live?: boolean;
+    /** Compute elapsed from a start time instead of a fixed seconds value. */
+    startedAt?: Date | string | number;
+}
+/**
+ * Formats a duration as elapsed time following the Content Principles.
+ * Use for reconciliation loops, build jobs, health checks, and running operations.
+ */
+declare function ElapsedTime({ seconds: secondsProp, variant, live, startedAt, className, ...props }: ElapsedTimeProps): react_jsx_runtime.JSX.Element;
+
+export { AbsoluteTimestamp, type AbsoluteTimestampProps, ElapsedTime, type ElapsedTimeProps, RelativeTime, type RelativeTimeProps };

package/dist/relative-time.js

@@ -0,0 +1,328 @@
+"use client";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+
+// src/relative-time.tsx
+import * as React from "react";
+
+// src/lib/utils.ts
+import { clsx } from "clsx";
+import { extendTailwindMerge } from "tailwind-merge";
+var twMerge = extendTailwindMerge({
+  extend: {
+    classGroups: {
+      "font-size": [
+        {
+          text: [
+            "display-hero",
+            "display-kpi-sm",
+            "display-kpi",
+            "display-kpi-lg",
+            "display-feature",
+            "h1",
+            "h2",
+            "h3",
+            "h4",
+            "body-lg",
+            "body",
+            "body-sm",
+            "caption",
+            "eyebrow"
+          ]
+        }
+      ]
+    }
+  }
+});
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/hooks/use-mounted.ts
+import { useSyncExternalStore } from "react";
+function subscribe() {
+  return () => {
+  };
+}
+function useMounted() {
+  return useSyncExternalStore(
+    subscribe,
+    () => true,
+    () => false
+  );
+}
+
+// src/relative-time.tsx
+import { jsx } from "react/jsx-runtime";
+function formatRelativeDefault(date, locale) {
+  const now = /* @__PURE__ */ new Date();
+  const diffMs = now.getTime() - date.getTime();
+  if (diffMs < 0) {
+    const abs = Math.abs(diffMs);
+    const mins2 = Math.floor(abs / 6e4);
+    const hrs2 = Math.floor(mins2 / 60);
+    const days2 = Math.floor(hrs2 / 24);
+    if (abs < 6e4) return "just now";
+    if (mins2 < 60) return `in ${mins2} minute${mins2 === 1 ? "" : "s"}`;
+    if (hrs2 < 24) return `in ${hrs2} hour${hrs2 === 1 ? "" : "s"}`;
+    if (days2 < 7) return `in ${days2} day${days2 === 1 ? "" : "s"}`;
+    if (days2 < 30) return `in ${Math.floor(days2 / 7)} week${Math.floor(days2 / 7) === 1 ? "" : "s"}`;
+    return `on ${date.toLocaleDateString(locale, __spreadValues({
+      month: "short",
+      day: "numeric"
+    }, date.getFullYear() !== now.getFullYear() ? { year: "numeric" } : {}))}`;
+  }
+  const secs = Math.floor(diffMs / 1e3);
+  const mins = Math.floor(secs / 60);
+  const hrs = Math.floor(mins / 60);
+  const days = Math.floor(hrs / 24);
+  if (secs < 60) return "just now";
+  if (mins < 60) return `${mins} minute${mins === 1 ? "" : "s"} ago`;
+  if (hrs < 24) return `${hrs} hour${hrs === 1 ? "" : "s"} ago`;
+  if (days === 1) return "yesterday";
+  if (days < 7) return `${days} days ago`;
+  if (days < 14) return "last week";
+  if (days < 30) return `${Math.floor(days / 7)} weeks ago`;
+  return `on ${date.toLocaleDateString(locale, __spreadValues({
+    month: "short",
+    day: "numeric"
+  }, date.getFullYear() !== now.getFullYear() ? { year: "numeric" } : {}))}`;
+}
+function formatRelativeCompact(date, locale) {
+  const now = /* @__PURE__ */ new Date();
+  const diffMs = now.getTime() - date.getTime();
+  if (diffMs < 0) {
+    const abs = Math.abs(diffMs);
+    const mins2 = Math.floor(abs / 6e4);
+    const hrs2 = Math.floor(mins2 / 60);
+    const days2 = Math.floor(hrs2 / 24);
+    if (abs < 6e4) return "just now";
+    if (mins2 < 60) return `in ${mins2}m`;
+    if (hrs2 < 24) return `in ${hrs2}h`;
+    if (days2 < 7) return `in ${days2}d`;
+    if (days2 < 30) return `in ${Math.floor(days2 / 7)}w`;
+    return `on ${date.toLocaleDateString(locale, __spreadValues({
+      month: "short",
+      day: "numeric"
+    }, date.getFullYear() !== now.getFullYear() ? { year: "numeric" } : {}))}`;
+  }
+  const secs = Math.floor(diffMs / 1e3);
+  const mins = Math.floor(secs / 60);
+  const hrs = Math.floor(mins / 60);
+  const days = Math.floor(hrs / 24);
+  if (secs < 60) return "just now";
+  if (mins < 60) return `${mins}m ago`;
+  if (hrs < 24) return `${hrs}h ago`;
+  if (days < 7) return `${days}d ago`;
+  if (days < 30) return `${Math.floor(days / 7)}w ago`;
+  return `on ${date.toLocaleDateString(locale, __spreadValues({
+    month: "short",
+    day: "numeric"
+  }, date.getFullYear() !== now.getFullYear() ? { year: "numeric" } : {}))}`;
+}
+function formatRelative(date, variant, locale) {
+  return variant === "compact" ? formatRelativeCompact(date, locale) : formatRelativeDefault(date, locale);
+}
+function updateInterval(date) {
+  const diffMs = Math.abs(Date.now() - date.getTime());
+  const diffMin = diffMs / 6e4;
+  if (diffMin < 60) return 6e4;
+  if (diffMin < 1440) return 3e5;
+  return 36e5;
+}
+function absoluteTitle(date, locale) {
+  return date.toLocaleString(locale, {
+    weekday: "long",
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+    hour: "numeric",
+    minute: "2-digit",
+    timeZoneName: "short"
+  });
+}
+function RelativeTime(_a) {
+  var _b = _a, { date, variant = "default", title, className } = _b, props = __objRest(_b, ["date", "variant", "title", "className"]);
+  const d = React.useMemo(() => new Date(date), [date]);
+  const mounted = useMounted();
+  const locale = mounted ? void 0 : "en-US";
+  const [label, setLabel] = React.useState(() => formatRelative(d, variant, locale));
+  React.useEffect(() => {
+    setLabel(formatRelative(d, variant, locale));
+    const schedule = () => {
+      const id2 = window.setInterval(() => {
+        setLabel(formatRelative(d, variant, locale));
+      }, updateInterval(d));
+      return id2;
+    };
+    const id = schedule();
+    return () => window.clearInterval(id);
+  }, [d, variant, locale]);
+  return /* @__PURE__ */ jsx(
+    "time",
+    __spreadProps(__spreadValues({
+      dateTime: d.toISOString(),
+      title: title != null ? title : absoluteTitle(d, locale),
+      className: cn("tabular-nums", className)
+    }, props), {
+      children: label
+    })
+  );
+}
+function formatAmPm(date, options, locale) {
+  const parts = new Intl.DateTimeFormat(locale, options).formatToParts(date);
+  let result = "";
+  for (const part of parts) {
+    if (part.type === "dayPeriod") {
+      result += part.value.toLowerCase().replace(/\./g, "");
+    } else {
+      result += part.value;
+    }
+  }
+  return result;
+}
+function formatAbsolute(date, variant, end, locale) {
+  var _a, _b;
+  switch (variant) {
+    case "deadline": {
+      const weekday = date.toLocaleDateString(locale, { weekday: "short" });
+      const datePart = date.toLocaleDateString(locale, { month: "short", day: "numeric", year: "numeric" });
+      const timePart = formatAmPm(date, { hour: "numeric", minute: "2-digit" }, locale);
+      const tz = (_a = date.toLocaleTimeString(locale, { timeZoneName: "short" }).split(" ").pop()) != null ? _a : "";
+      return `${weekday}, ${datePart} \xB7 ${timePart} ${tz}`;
+    }
+    case "log": {
+      const datePart = date.toLocaleDateString(locale, { month: "short", day: "numeric", year: "numeric" });
+      const timePart = formatAmPm(date, { hour: "numeric", minute: "2-digit" }, locale);
+      const tz = (_b = date.toLocaleTimeString(locale, { timeZoneName: "short" }).split(" ").pop()) != null ? _b : "";
+      return `${datePart}, ${timePart} ${tz}`;
+    }
+    case "range": {
+      if (!end) return date.toLocaleDateString(locale, { month: "short", day: "numeric", year: "numeric" });
+      const startYear = date.getFullYear();
+      const endYear = end.getFullYear();
+      if (startYear === endYear) {
+        const start2 = date.toLocaleDateString(locale, { month: "short", day: "numeric" });
+        const endStr2 = end.toLocaleDateString(locale, { month: "short", day: "numeric", year: "numeric" });
+        return `${start2} \u2013 ${endStr2}`;
+      }
+      const start = date.toLocaleDateString(locale, { month: "short", day: "numeric", year: "numeric" });
+      const endStr = end.toLocaleDateString(locale, { month: "short", day: "numeric", year: "numeric" });
+      return `${start} \u2013 ${endStr}`;
+    }
+    case "date":
+    default:
+      return date.toLocaleDateString(locale, { month: "short", day: "numeric", year: "numeric" });
+  }
+}
+function AbsoluteTimestamp(_a) {
+  var _b = _a, { date, variant = "date", end, className } = _b, props = __objRest(_b, ["date", "variant", "end", "className"]);
+  const d = React.useMemo(() => new Date(date), [date]);
+  const e = React.useMemo(() => end ? new Date(end) : void 0, [end]);
+  const mounted = useMounted();
+  const locale = mounted ? void 0 : "en-US";
+  return /* @__PURE__ */ jsx(
+    "time",
+    __spreadProps(__spreadValues({
+      dateTime: d.toISOString(),
+      title: absoluteTitle(d, locale),
+      className: cn("tabular-nums", className)
+    }, props), {
+      children: formatAbsolute(d, variant, e, locale)
+    })
+  );
+}
+function formatElapsed(totalSeconds, variant) {
+  const days = Math.floor(totalSeconds / 86400);
+  const hours = Math.floor(totalSeconds % 86400 / 3600);
+  const minutes = Math.floor(totalSeconds % 3600 / 60);
+  const seconds = Math.floor(totalSeconds % 60);
+  switch (variant) {
+    case "expanded": {
+      const parts = [];
+      if (days > 0) parts.push(`${days} day${days === 1 ? "" : "s"}`);
+      if (hours > 0) parts.push(`${hours} hour${hours === 1 ? "" : "s"}`);
+      if (minutes > 0) parts.push(`${minutes} minute${minutes === 1 ? "" : "s"}`);
+      if (seconds > 0 || parts.length === 0) parts.push(`${seconds} second${seconds === 1 ? "" : "s"}`);
+      return parts.join(", ");
+    }
+    case "long": {
+      if (days > 0) return `${days}d ${hours}h`;
+      if (hours > 0) return `${hours}h ${minutes}m`;
+      return `${minutes}m`;
+    }
+    case "compact":
+    default: {
+      if (days > 0) return `${days}d ${hours}h`;
+      if (hours > 0) return `${hours}h ${minutes}m ${seconds}s`;
+      if (minutes > 0) return `${minutes}m ${seconds}s`;
+      return `${seconds}s`;
+    }
+  }
+}
+function ElapsedTime(_a) {
+  var _b = _a, {
+    seconds: secondsProp,
+    variant = "compact",
+    live = false,
+    startedAt,
+    className
+  } = _b, props = __objRest(_b, [
+    "seconds",
+    "variant",
+    "live",
+    "startedAt",
+    "className"
+  ]);
+  const startDate = React.useMemo(() => startedAt ? new Date(startedAt) : void 0, [startedAt]);
+  const computeSeconds = React.useCallback(() => {
+    if (startDate) return Math.floor((Date.now() - startDate.getTime()) / 1e3);
+    return secondsProp != null ? secondsProp : 0;
+  }, [startDate, secondsProp]);
+  const [elapsed, setElapsed] = React.useState(computeSeconds);
+  React.useEffect(() => {
+    setElapsed(computeSeconds());
+    if (!live && !startDate) return;
+    const id = window.setInterval(() => {
+      setElapsed(computeSeconds());
+    }, 1e3);
+    return () => window.clearInterval(id);
+  }, [live, startDate, computeSeconds]);
+  const iso = `PT${elapsed}S`;
+  return /* @__PURE__ */ jsx("time", __spreadProps(__spreadValues({ dateTime: iso, className: cn("tabular-nums", className) }, props), { children: formatElapsed(elapsed, variant) }));
+}
+export {
+  AbsoluteTimestamp,
+  ElapsedTime,
+  RelativeTime
+};
+//# sourceMappingURL=relative-time.js.map

package/dist/relative-time.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/relative-time.tsx","../src/lib/utils.ts","../src/hooks/use-mounted.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { cn } from '@/lib/utils';\nimport { useMounted } from '@/hooks/use-mounted';\n\n// ── Format helpers ─────────────────────────────────────────────────────────────\n//\n// `locale` is `undefined` (browser/runtime default — the viewer's actual\n// locale, per Monarch's \"use locale-aware formatting\" content principle) once\n// mounted client-side, and a fixed `'en-US'` for the server-rendered/first-\n// paint value — the server can't know the viewer's locale ahead of time, and\n// passing a locale that differs between server and client render would\n// hydration-mismatch. Callers gate this via `useMounted()` below, so the\n// locale-aware value replaces the fixed one right after mount (see\n// RelativeTime/AbsoluteTimestamp).\n\n/** Returns a human-readable relative label for `date` vs now. */\nfunction formatRelativeDefault(date: Date, locale: string | undefined): string {\n  const now = new Date();\n  const diffMs = now.getTime() - date.getTime();\n\n  // Future dates\n  if (diffMs < 0) {\n    const abs = Math.abs(diffMs);\n    const mins = Math.floor(abs / 60000);\n    const hrs = Math.floor(mins / 60);\n    const days = Math.floor(hrs / 24);\n    if (abs < 60000) return 'just now';\n    if (mins < 60) return `in ${mins} minute${mins === 1 ? '' : 's'}`;\n    if (hrs < 24) return `in ${hrs} hour${hrs === 1 ? '' : 's'}`;\n    if (days < 7) return `in ${days} day${days === 1 ? '' : 's'}`;\n    if (days < 30) return `in ${Math.floor(days / 7)} week${Math.floor(days / 7) === 1 ? '' : 's'}`;\n    return `on ${date.toLocaleDateString(locale, {\n      month: 'short',\n      day: 'numeric',\n      ...(date.getFullYear() !== now.getFullYear() ? { year: 'numeric' } : {}),\n    })}`;\n  }\n\n  // Past dates\n  const secs = Math.floor(diffMs / 1000);\n  const mins = Math.floor(secs / 60);\n  const hrs = Math.floor(mins / 60);\n  const days = Math.floor(hrs / 24);\n\n  if (secs < 60) return 'just now';\n  if (mins < 60) return `${mins} minute${mins === 1 ? '' : 's'} ago`;\n  if (hrs < 24) return `${hrs} hour${hrs === 1 ? '' : 's'} ago`;\n  if (days === 1) return 'yesterday';\n  if (days < 7) return `${days} days ago`;\n  if (days < 14) return 'last week';\n  if (days < 30) return `${Math.floor(days / 7)} weeks ago`;\n\n  // > 30 days: fall back to absolute date\n  return `on ${date.toLocaleDateString(locale, {\n    month: 'short',\n    day: 'numeric',\n    ...(date.getFullYear() !== now.getFullYear() ? { year: 'numeric' } : {}),\n  })}`;\n}\n\n/**\n * Compact relative label — abbreviates units for tight horizontal space\n * (tables, KPI cards). Preserves \"ago\", \"in\", \"on\", and \"just now\" so\n * directionality and reference points stay legible at a glance.\n */\nfunction formatRelativeCompact(date: Date, locale: string | undefined): string {\n  const now = new Date();\n  const diffMs = now.getTime() - date.getTime();\n\n  // Future dates\n  if (diffMs < 0) {\n    const abs = Math.abs(diffMs);\n    const mins = Math.floor(abs / 60000);\n    const hrs = Math.floor(mins / 60);\n    const days = Math.floor(hrs / 24);\n    if (abs < 60000) return 'just now';\n    if (mins < 60) return `in ${mins}m`;\n    if (hrs < 24) return `in ${hrs}h`;\n    if (days < 7) return `in ${days}d`;\n    if (days < 30) return `in ${Math.floor(days / 7)}w`;\n    return `on ${date.toLocaleDateString(locale, {\n      month: 'short',\n      day: 'numeric',\n      ...(date.getFullYear() !== now.getFullYear() ? { year: 'numeric' } : {}),\n    })}`;\n  }\n\n  // Past dates\n  const secs = Math.floor(diffMs / 1000);\n  const mins = Math.floor(secs / 60);\n  const hrs = Math.floor(mins / 60);\n  const days = Math.floor(hrs / 24);\n\n  if (secs < 60) return 'just now';\n  if (mins < 60) return `${mins}m ago`;\n  if (hrs < 24) return `${hrs}h ago`;\n  if (days < 7) return `${days}d ago`;\n  if (days < 30) return `${Math.floor(days / 7)}w ago`;\n\n  return `on ${date.toLocaleDateString(locale, {\n    month: 'short',\n    day: 'numeric',\n    ...(date.getFullYear() !== now.getFullYear() ? { year: 'numeric' } : {}),\n  })}`;\n}\n\nfunction formatRelative(date: Date, variant: 'default' | 'compact', locale: string | undefined): string {\n  return variant === 'compact' ? formatRelativeCompact(date, locale) : formatRelativeDefault(date, locale);\n}\n\n/** Returns the update interval in ms appropriate for the current age. */\nfunction updateInterval(date: Date): number {\n  const diffMs = Math.abs(Date.now() - date.getTime());\n  const diffMin = diffMs / 60000;\n  if (diffMin < 60) return 60_000; // update every minute while < 1 hour old\n  if (diffMin < 1440) return 300_000; // every 5 min while < 1 day old\n  return 3_600_000; // every hour otherwise\n}\n\n/** Formats an absolute tooltip title. */\nfunction absoluteTitle(date: Date, locale: string | undefined): string {\n  return date.toLocaleString(locale, {\n    weekday: 'long',\n    year: 'numeric',\n    month: 'long',\n    day: 'numeric',\n    hour: 'numeric',\n    minute: '2-digit',\n    timeZoneName: 'short',\n  });\n}\n\n// ── Component ──────────────────────────────────────────────────────────────────\n\nexport interface RelativeTimeProps extends Omit<React.TimeHTMLAttributes<HTMLTimeElement>, 'dateTime' | 'title'> {\n  /**\n   * The timestamp to display. Accepts a `Date`, ISO string, or unix milliseconds.\n   */\n  date: Date | string | number;\n  /**\n   * Format variant. `default` produces full-word output (\"5 minutes ago\",\n   * \"yesterday\"). `compact` abbreviates units (\"5m ago\", \"1d ago\") for tight\n   * horizontal space like tables, KPI cards, or inline metadata.\n   */\n  variant?: 'default' | 'compact';\n  /**\n   * Override the tooltip shown on hover. Defaults to the full localized\n   * absolute date-time string (e.g. \"Monday, January 20, 2025 at 3:22 PM PST\").\n   */\n  title?: string;\n}\n\n/**\n * Displays a timestamp as a live-updating relative string (\"5 minutes ago\",\n * \"yesterday\", \"on Nov 18\") with the absolute date in the native tooltip.\n *\n * Falls back to an absolute \"on [Month Day]\" format for dates older than 30 days\n * so that stale timestamps remain legible at a glance.\n *\n * @see https://design.upbound.io/components/date-and-time\n */\nexport function RelativeTime({ date, variant = 'default', title, className, ...props }: RelativeTimeProps) {\n  const d = React.useMemo(() => new Date(date), [date]);\n  const mounted = useMounted();\n  // Fixed locale for the server-rendered/first-paint value (the server can't\n  // know the viewer's locale); the viewer's actual locale once mounted.\n  const locale = mounted ? undefined : 'en-US';\n\n  const [label, setLabel] = React.useState<string>(() => formatRelative(d, variant, locale));\n\n  React.useEffect(() => {\n    // Re-compute immediately on mount (picks up the viewer's real locale, and\n    // avoids the relative label going stale)\n    setLabel(formatRelative(d, variant, locale));\n\n    const schedule = () => {\n      const id = window.setInterval(() => {\n        setLabel(formatRelative(d, variant, locale));\n      }, updateInterval(d));\n      return id;\n    };\n    const id = schedule();\n    return () => window.clearInterval(id);\n  }, [d, variant, locale]);\n\n  return (\n    <time\n      dateTime={d.toISOString()}\n      title={title ?? absoluteTitle(d, locale)}\n      className={cn('tabular-nums', className)}\n      {...props}\n    >\n      {label}\n    </time>\n  );\n}\n\n// ── Absolute Timestamp ────────────────────────────────────────────────────────\n\n/** Formats am/pm per Content Principles: lowercase, space before, no periods. */\nfunction formatAmPm(date: Date, options: Intl.DateTimeFormatOptions, locale: string | undefined): string {\n  const parts = new Intl.DateTimeFormat(locale, options).formatToParts(date);\n  let result = '';\n  for (const part of parts) {\n    if (part.type === 'dayPeriod') {\n      result += part.value.toLowerCase().replace(/\\./g, '');\n    } else {\n      result += part.value;\n    }\n  }\n  return result;\n}\n\nfunction formatAbsolute(date: Date, variant: string, end: Date | undefined, locale: string | undefined): string {\n  switch (variant) {\n    case 'deadline': {\n      const weekday = date.toLocaleDateString(locale, { weekday: 'short' });\n      const datePart = date.toLocaleDateString(locale, { month: 'short', day: 'numeric', year: 'numeric' });\n      const timePart = formatAmPm(date, { hour: 'numeric', minute: '2-digit' }, locale);\n      const tz = date.toLocaleTimeString(locale, { timeZoneName: 'short' }).split(' ').pop() ?? '';\n      return `${weekday}, ${datePart} \\u00b7 ${timePart} ${tz}`;\n    }\n    case 'log': {\n      const datePart = date.toLocaleDateString(locale, { month: 'short', day: 'numeric', year: 'numeric' });\n      const timePart = formatAmPm(date, { hour: 'numeric', minute: '2-digit' }, locale);\n      const tz = date.toLocaleTimeString(locale, { timeZoneName: 'short' }).split(' ').pop() ?? '';\n      return `${datePart}, ${timePart} ${tz}`;\n    }\n    case 'range': {\n      if (!end) return date.toLocaleDateString(locale, { month: 'short', day: 'numeric', year: 'numeric' });\n      const startYear = date.getFullYear();\n      const endYear = end.getFullYear();\n      if (startYear === endYear) {\n        const start = date.toLocaleDateString(locale, { month: 'short', day: 'numeric' });\n        const endStr = end.toLocaleDateString(locale, { month: 'short', day: 'numeric', year: 'numeric' });\n        return `${start} \\u2013 ${endStr}`;\n      }\n      const start = date.toLocaleDateString(locale, { month: 'short', day: 'numeric', year: 'numeric' });\n      const endStr = end.toLocaleDateString(locale, { month: 'short', day: 'numeric', year: 'numeric' });\n      return `${start} \\u2013 ${endStr}`;\n    }\n    case 'date':\n    default:\n      return date.toLocaleDateString(locale, { month: 'short', day: 'numeric', year: 'numeric' });\n  }\n}\n\nexport interface AbsoluteTimestampProps extends Omit<React.TimeHTMLAttributes<HTMLTimeElement>, 'dateTime'> {\n  /** The timestamp to display. */\n  date: Date | string | number;\n  /** Format variant matching the Content Principles absolute timestamp table. */\n  variant?: 'deadline' | 'log' | 'date' | 'range';\n  /** End date for range variant. */\n  end?: Date | string | number;\n}\n\n/**\n * Formats a date as an absolute timestamp following the Content Principles.\n * Use for deadlines, certificate expiry, audit logs, and date-only displays.\n */\nexport function AbsoluteTimestamp({ date, variant = 'date', end, className, ...props }: AbsoluteTimestampProps) {\n  const d = React.useMemo(() => new Date(date), [date]);\n  const e = React.useMemo(() => (end ? new Date(end) : undefined), [end]);\n  const mounted = useMounted();\n  // Fixed locale for the server-rendered/first-paint value (the server can't\n  // know the viewer's locale); the viewer's actual locale once mounted.\n  const locale = mounted ? undefined : 'en-US';\n\n  return (\n    <time\n      dateTime={d.toISOString()}\n      title={absoluteTitle(d, locale)}\n      className={cn('tabular-nums', className)}\n      {...props}\n    >\n      {formatAbsolute(d, variant, e, locale)}\n    </time>\n  );\n}\n\n// ── Elapsed Time ──────────────────────────────────────────────────────────────\n\nfunction formatElapsed(totalSeconds: number, variant: string): string {\n  const days = Math.floor(totalSeconds / 86400);\n  const hours = Math.floor((totalSeconds % 86400) / 3600);\n  const minutes = Math.floor((totalSeconds % 3600) / 60);\n  const seconds = Math.floor(totalSeconds % 60);\n\n  switch (variant) {\n    case 'expanded': {\n      const parts: string[] = [];\n      if (days > 0) parts.push(`${days} day${days === 1 ? '' : 's'}`);\n      if (hours > 0) parts.push(`${hours} hour${hours === 1 ? '' : 's'}`);\n      if (minutes > 0) parts.push(`${minutes} minute${minutes === 1 ? '' : 's'}`);\n      if (seconds > 0 || parts.length === 0) parts.push(`${seconds} second${seconds === 1 ? '' : 's'}`);\n      return parts.join(', ');\n    }\n    case 'long': {\n      if (days > 0) return `${days}d ${hours}h`;\n      if (hours > 0) return `${hours}h ${minutes}m`;\n      return `${minutes}m`;\n    }\n    case 'compact':\n    default: {\n      if (days > 0) return `${days}d ${hours}h`;\n      if (hours > 0) return `${hours}h ${minutes}m ${seconds}s`;\n      if (minutes > 0) return `${minutes}m ${seconds}s`;\n      return `${seconds}s`;\n    }\n  }\n}\n\nexport interface ElapsedTimeProps extends Omit<React.TimeHTMLAttributes<HTMLTimeElement>, 'dateTime'> {\n  /** Total elapsed seconds. Ignored if startedAt is provided. */\n  seconds?: number;\n  /** Format variant matching the Content Principles elapsed time table. */\n  variant?: 'compact' | 'expanded' | 'long';\n  /** Live-tick every second for active operations. */\n  live?: boolean;\n  /** Compute elapsed from a start time instead of a fixed seconds value. */\n  startedAt?: Date | string | number;\n}\n\n/**\n * Formats a duration as elapsed time following the Content Principles.\n * Use for reconciliation loops, build jobs, health checks, and running operations.\n */\nexport function ElapsedTime({\n  seconds: secondsProp,\n  variant = 'compact',\n  live = false,\n  startedAt,\n  className,\n  ...props\n}: ElapsedTimeProps) {\n  const startDate = React.useMemo(() => (startedAt ? new Date(startedAt) : undefined), [startedAt]);\n\n  const computeSeconds = React.useCallback(() => {\n    if (startDate) return Math.floor((Date.now() - startDate.getTime()) / 1000);\n    return secondsProp ?? 0;\n  }, [startDate, secondsProp]);\n\n  const [elapsed, setElapsed] = React.useState(computeSeconds);\n\n  React.useEffect(() => {\n    setElapsed(computeSeconds());\n\n    if (!live && !startDate) return;\n\n    const id = window.setInterval(() => {\n      setElapsed(computeSeconds());\n    }, 1000);\n    return () => window.clearInterval(id);\n  }, [live, startDate, computeSeconds]);\n\n  const iso = `PT${elapsed}S`;\n\n  return (\n    <time dateTime={iso} className={cn('tabular-nums', className)} {...props}>\n      {formatElapsed(elapsed, variant)}\n    </time>\n  );\n}\n","import { clsx, type ClassValue } from 'clsx';\nimport { extendTailwindMerge } from 'tailwind-merge';\n\nconst twMerge = extendTailwindMerge({\n  extend: {\n    classGroups: {\n      'font-size': [\n        {\n          text: [\n            'display-hero',\n            'display-kpi-sm',\n            'display-kpi',\n            'display-kpi-lg',\n            'display-feature',\n            'h1',\n            'h2',\n            'h3',\n            'h4',\n            'body-lg',\n            'body',\n            'body-sm',\n            'caption',\n            'eyebrow',\n          ],\n        },\n      ],\n    },\n  },\n});\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n","import { useSyncExternalStore } from 'react';\n\nfunction subscribe() {\n  return () => {};\n}\n\n/**\n * Returns `false` on the server and during initial client hydration, then\n * `true` once mounted — for values that are only valid client-side (e.g. the\n * viewer's actual `Intl` locale, vs. a fixed locale used for the server-\n * rendered/first-paint value) without a hydration mismatch. Implemented via\n * `useSyncExternalStore` rather than `useEffect` + `setState` — the latter\n * works, but re-derives the same \"true\" value on every mount and trips\n * `react-hooks/set-state-in-effect` since there's no actual subscription.\n */\nexport function useMounted() {\n  return useSyncExternalStore(\n    subscribe,\n    () => true,\n    () => false,\n  );\n}\n"],"mappings":"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","names":["mins","hrs","days","id","start","endStr"]}

package/dist/section-header.d.ts

@@ -0,0 +1,11 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+declare function SectionHeader({ className, children, ...props }: React.ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
+declare function SectionHeaderContent({ className, ...props }: React.ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
+declare function SectionHeaderTitle({ className, ...props }: React.ComponentProps<'h2'>): react_jsx_runtime.JSX.Element;
+declare function SectionHeaderDescription({ className, ...props }: React.ComponentProps<'p'>): react_jsx_runtime.JSX.Element;
+declare function SectionHeaderMeta({ className, ...props }: React.ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
+declare function SectionHeaderActions({ className, ...props }: React.ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
+declare function SectionHeaderTabs({ className, ...props }: React.ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
+
+export { SectionHeader, SectionHeaderActions, SectionHeaderContent, SectionHeaderDescription, SectionHeaderMeta, SectionHeaderTabs, SectionHeaderTitle };