@tensor_1/react 2.4.0 → 2.5.0

package/dist/components/Inbox.d.ts

@@ -0,0 +1,35 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+interface InboxProps extends HTMLAttributes<HTMLDivElement> {
+    children?: ReactNode;
+}
+/** Two-pane inbox master-detail container backed by `.uix-inbox`. Place `<InboxList>` and `<InboxDetail>` as children. */
+declare function Inbox({ children, className, ...props }: InboxProps): react.JSX.Element;
+interface InboxListProps extends HTMLAttributes<HTMLDivElement> {
+    children?: ReactNode;
+}
+/** Left-pane item list. Place `<InboxItem>` children here. */
+declare function InboxList({ children, className, ...props }: InboxListProps): react.JSX.Element;
+interface InboxItemProps extends HTMLAttributes<HTMLDivElement> {
+    /** Primary subject / title line. */
+    subject?: ReactNode;
+    /** Secondary preview excerpt (truncated). */
+    preview?: ReactNode;
+    /** Leading slot — avatar, icon, or priority indicator. */
+    leading?: ReactNode;
+    /** When true sets `data-unread` → bolds the subject line. */
+    unread?: boolean;
+    /** When true sets `aria-selected` → renders the accent left-border stripe. */
+    selected?: boolean;
+    children?: ReactNode;
+}
+/** A single inbox row with subject, preview excerpt, optional leading slot, and unread/selected states. */
+declare function InboxItem({ subject, preview, leading, unread, selected, children, className, ...props }: InboxItemProps): react.JSX.Element;
+interface InboxDetailProps extends HTMLAttributes<HTMLDivElement> {
+    children?: ReactNode;
+}
+/** Right-pane detail area — renders the full content of the selected item. */
+declare function InboxDetail({ children, className, ...props }: InboxDetailProps): react.JSX.Element;
+
+export { Inbox, InboxDetail, type InboxDetailProps, InboxItem, type InboxItemProps, InboxList, type InboxListProps, type InboxProps };

package/dist/components/Inbox.js

@@ -0,0 +1,45 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "../cx.js";
+function Inbox({ children, className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: cx("uix-inbox", className), ...props, children });
+}
+function InboxList({ children, className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: cx("uix-inbox__list", className), role: "listbox", ...props, children });
+}
+function InboxItem({
+  subject,
+  preview,
+  leading,
+  unread,
+  selected,
+  children,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "option",
+      "aria-selected": selected ?? false,
+      className: cx("uix-inbox__item", className),
+      ...unread ? { "data-unread": "" } : {},
+      ...props,
+      children: [
+        leading,
+        subject != null && /* @__PURE__ */ jsx("div", { className: "uix-inbox__subject", children: subject }),
+        preview != null && /* @__PURE__ */ jsx("div", { className: "uix-inbox__preview", children: preview }),
+        children
+      ]
+    }
+  );
+}
+function InboxDetail({ children, className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: cx("uix-inbox__detail", className), ...props, children });
+}
+export {
+  Inbox,
+  InboxDetail,
+  InboxItem,
+  InboxList
+};

package/dist/components/Meter.d.ts

@@ -0,0 +1,15 @@
+import * as react from 'react';
+import { HTMLAttributes } from 'react';
+
+/** Fill color tone for the meter bar. Defaults to `success` (green). */
+type MeterTone = 'success' | 'warning' | 'danger' | 'attention' | 'overdue';
+interface MeterProps extends HTMLAttributes<HTMLDivElement> {
+    /** Fill level 0–100. Clamped to this range. */
+    value?: number;
+    /** Threshold tone applied via `data-tone` on the fill element. `success` is the implicit default (no attribute). */
+    tone?: MeterTone;
+}
+/** Horizontal utilization / threshold bar backed by `.uix-meter`. */
+declare function Meter({ value, tone, className, ...props }: MeterProps): react.JSX.Element;
+
+export { Meter, type MeterProps, type MeterTone };

package/dist/components/Meter.js

@@ -0,0 +1,28 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { cx } from "../cx.js";
+function Meter({ value = 0, tone, className, ...props }) {
+  const pct = Math.max(0, Math.min(100, value));
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "meter",
+      "aria-valuenow": pct,
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      className: cx("uix-meter", className),
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "uix-meter__fill",
+          style: { width: `${pct}%` },
+          ...tone && tone !== "success" ? { "data-tone": tone } : {}
+        }
+      )
+    }
+  );
+}
+export {
+  Meter
+};

package/dist/components/StatusPill.d.ts

@@ -1,7 +1,7 @@
 import * as react from 'react';
 import { HTMLAttributes, ReactNode } from 'react';
 
-type PillTone = 'neutral' | 'success' | 'info' | 'warning' | 'danger' | 'critical' | 'muted';
+type PillTone = 'neutral' | 'success' | 'info' | 'warning' | 'danger' | 'critical' | 'muted' | 'attention' | 'overdue' | 'sla-ok' | 'sla-at-risk' | 'sla-breached' | 'p1' | 'p2' | 'p3' | 'p4' | 'p5';
 type PillTreatment = 'filled' | 'outline';
 interface StatusPillProps extends HTMLAttributes<HTMLSpanElement> {
     tone?: PillTone;

package/dist/index.cjs

@@ -40,6 +40,10 @@ __export(src_exports, {
   EmptyState: () => EmptyState,
   ErrorState: () => ErrorState,
   Field: () => Field,
+  Inbox: () => Inbox,
+  InboxDetail: () => InboxDetail,
+  InboxItem: () => InboxItem,
+  InboxList: () => InboxList,
   Input: () => Input,
   InputGroup: () => InputGroup,
   Kanban: () => Kanban,
@@ -49,6 +53,7 @@ __export(src_exports, {
   List: () => List,
   ListItem: () => ListItem,
   LoadingState: () => LoadingState,
+  Meter: () => Meter,
   Modal: () => Modal,
   NavFavourites: () => NavFavourites,
   NavGroup: () => NavGroup,
@@ -1125,49 +1130,74 @@ function Progress({ value = 0, max = 100, indeterminate, className, ...props })
   );
 }
 
-// src/components/Stat.tsx
+// src/components/Meter.tsx
 var import_jsx_runtime29 = require("react/jsx-runtime");
+function Meter({ value = 0, tone, className, ...props }) {
+  const pct = Math.max(0, Math.min(100, value));
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    "div",
+    {
+      role: "meter",
+      "aria-valuenow": pct,
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      className: cx("uix-meter", className),
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+        "div",
+        {
+          className: "uix-meter__fill",
+          style: { width: `${pct}%` },
+          ...tone && tone !== "success" ? { "data-tone": tone } : {}
+        }
+      )
+    }
+  );
+}
+
+// src/components/Stat.tsx
+var import_jsx_runtime30 = require("react/jsx-runtime");
 function Stat({ label, value, icon, meta, trend, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: cx("uix-stat", className), ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "uix-stat__label", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { children: label }),
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: cx("uix-stat", className), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "uix-stat__label", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { children: label }),
       icon
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "uix-stat__value", children: value }),
-    (meta != null || trend != null) && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "uix-stat__meta", children: [
-      trend != null && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: cx("uix-stat__trend", `uix-stat__trend--${trend.direction}`), children: trend.label }),
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "uix-stat__value", children: value }),
+    (meta != null || trend != null) && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "uix-stat__meta", children: [
+      trend != null && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: cx("uix-stat__trend", `uix-stat__trend--${trend.direction}`), children: trend.label }),
       meta
     ] })
   ] });
 }
 
 // src/components/Tooltip.tsx
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 function Tooltip({ label, children, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { "data-uix-tip": label, ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { "data-uix-tip": label, ...props, children });
 }
 
 // src/components/States.tsx
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 function EmptyState({ icon, title, children, action, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: cx("uix-empty", className), ...props, children: [
-    icon != null && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "uix-empty__icon", children: icon }),
-    title != null && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "uix-empty__title", children: title }),
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: cx("uix-empty", className), ...props, children: [
+    icon != null && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "uix-empty__icon", children: icon }),
+    title != null && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "uix-empty__title", children: title }),
     children,
     action
   ] });
 }
 function ErrorState({ icon, title, detail, action, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: cx("uix-empty", "uix-empty--danger", className), role: "alert", ...props, children: [
-    icon != null && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "uix-empty__icon uix-empty__icon--danger", children: icon }),
-    title != null && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "uix-empty__title", children: title }),
-    detail != null && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { children: detail }),
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: cx("uix-empty", "uix-empty--danger", className), role: "alert", ...props, children: [
+    icon != null && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "uix-empty__icon uix-empty__icon--danger", children: icon }),
+    title != null && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "uix-empty__title", children: title }),
+    detail != null && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { children: detail }),
     action
   ] });
 }
 function Skeleton({ variant = "block", width, height, className, style, ...props }) {
   const dims = { width, height, ...style };
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
     "div",
     {
       className: cx(
@@ -1182,52 +1212,52 @@ function Skeleton({ variant = "block", width, height, className, style, ...props
   );
 }
 function LoadingState({ rows = 3, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: cx("uix-stack", className), role: "status", "aria-busy": "true", ...props, children: Array.from({ length: rows }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Skeleton, { variant: "text", width: `${92 - i % 3 * 14}%` }, i)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: cx("uix-stack", className), role: "status", "aria-busy": "true", ...props, children: Array.from({ length: rows }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Skeleton, { variant: "text", width: `${92 - i % 3 * 14}%` }, i)) });
 }
 
 // src/components/Label.tsx
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 function Label({ color, dot, children, className, style, ...props }) {
   const merged = color ? { "--label-color": color, ...style } : style;
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("span", { className: cx("uix-label", className), style: merged, ...props, children: [
-    dot && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "uix-label__dot", "aria-hidden": "true" }),
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("span", { className: cx("uix-label", className), style: merged, ...props, children: [
+    dot && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "uix-label__dot", "aria-hidden": "true" }),
     children
   ] });
 }
 
 // src/components/Avatar.tsx
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 function Avatar({ size = "md", src, alt, children, status, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("span", { className: cx("uix-avatar", size !== "md" && `uix-avatar--${size}`, className), ...props, children: [
-    src ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("img", { src, alt: alt ?? "" }) : children,
-    status && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "uix-avatar__status" })
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("span", { className: cx("uix-avatar", size !== "md" && `uix-avatar--${size}`, className), ...props, children: [
+    src ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("img", { src, alt: alt ?? "" }) : children,
+    status && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "uix-avatar__status" })
   ] });
 }
 function AvatarGroup({ children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: cx("uix-avatar-group", className), ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: cx("uix-avatar-group", className), ...props, children });
 }
 function UserChip({ avatar, name, sub, className, children, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("span", { className: cx("uix-user-chip", className), ...props, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("span", { className: cx("uix-user-chip", className), ...props, children: [
     avatar,
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("span", { children: [
-      name != null && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "uix-user-chip__name", children: name }),
-      sub != null && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "uix-user-chip__sub", style: { display: "block" }, children: sub })
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("span", { children: [
+      name != null && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "uix-user-chip__name", children: name }),
+      sub != null && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "uix-user-chip__sub", style: { display: "block" }, children: sub })
     ] }),
     children
   ] });
 }
 
 // src/components/Comments.tsx
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 function Comments({ children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: cx("uix-comments", className), ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: cx("uix-comments", className), ...props, children });
 }
 function Comment({ avatar, author, meta, children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: cx("uix-comment", className), ...props, children: [
-    avatar ?? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { "aria-hidden": "true" }),
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "uix-comment__body", children: [
-      (author != null || meta != null) && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "uix-comment__meta", children: [
-        author != null && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "uix-comment__author", children: author }),
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: cx("uix-comment", className), ...props, children: [
+    avatar ?? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { "aria-hidden": "true" }),
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "uix-comment__body", children: [
+      (author != null || meta != null) && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "uix-comment__meta", children: [
+        author != null && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "uix-comment__author", children: author }),
         author != null && meta != null ? " \xB7 " : null,
         meta
       ] }),
@@ -1237,95 +1267,134 @@ function Comment({ avatar, author, meta, children, className, ...props }) {
 }
 
 // src/components/Timeline.tsx
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 function Timeline({ children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: cx("uix-timeline", className), ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: cx("uix-timeline", className), ...props, children });
 }
 function TimelineItem({ meta, children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: cx("uix-timeline__item", className), ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "uix-timeline__rail", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "uix-timeline__node" }),
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "uix-timeline__line" })
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: cx("uix-timeline__item", className), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "uix-timeline__rail", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "uix-timeline__node" }),
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "uix-timeline__line" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "uix-timeline__body", children: [
-      meta != null && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "uix-timeline__meta", children: meta }),
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "uix-timeline__body", children: [
+      meta != null && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "uix-timeline__meta", children: meta }),
       children
     ] })
   ] });
 }
 
 // src/components/Prose.tsx
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 function Prose({ children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: cx("uix-prose", className), ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: cx("uix-prose", className), ...props, children });
 }
 function Note({ tone, icon, children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: cx("uix-note", tone && `uix-note--${tone}`, className), ...props, children: [
-    icon != null && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "uix-note__icon", children: icon }),
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "uix-note__body", children })
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: cx("uix-note", tone && `uix-note--${tone}`, className), ...props, children: [
+    icon != null && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "uix-note__icon", children: icon }),
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "uix-note__body", children })
   ] });
 }
 
 // src/components/Popover.tsx
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 function Popover({ popover = "auto", children, className, ...props }) {
   const popoverAttr = { popover };
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: cx("uix-popover", className), ...popoverAttr, ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: cx("uix-popover", className), ...popoverAttr, ...props, children });
 }
 
 // src/components/CommandPalette.tsx
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 function CommandPalette({ inputProps, children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: cx("uix-cmdk", className), ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("input", { className: "uix-cmdk__input", ...inputProps }),
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "uix-cmdk__list", children })
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: cx("uix-cmdk", className), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("input", { className: "uix-cmdk__input", ...inputProps }),
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "uix-cmdk__list", children })
   ] });
 }
 function CommandGroup({ label, children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_jsx_runtime38.Fragment, { children: [
-    label != null && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "uix-cmdk__group", children: label }),
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
+    label != null && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "uix-cmdk__group", children: label }),
     children
   ] });
 }
 function CommandItem({ icon, shortcut, active, children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: cx("uix-cmdk__item", className), "data-active": active || void 0, ...props, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: cx("uix-cmdk__item", className), "data-active": active || void 0, ...props, children: [
     icon,
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { children }),
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { children }),
     shortcut
   ] });
 }
 
+// src/components/Inbox.tsx
+var import_jsx_runtime40 = require("react/jsx-runtime");
+function Inbox({ children, className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: cx("uix-inbox", className), ...props, children });
+}
+function InboxList({ children, className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: cx("uix-inbox__list", className), role: "listbox", ...props, children });
+}
+function InboxItem({
+  subject,
+  preview,
+  leading,
+  unread,
+  selected,
+  children,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+    "div",
+    {
+      role: "option",
+      "aria-selected": selected ?? false,
+      className: cx("uix-inbox__item", className),
+      ...unread ? { "data-unread": "" } : {},
+      ...props,
+      children: [
+        leading,
+        subject != null && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "uix-inbox__subject", children: subject }),
+        preview != null && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "uix-inbox__preview", children: preview }),
+        children
+      ]
+    }
+  );
+}
+function InboxDetail({ children, className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: cx("uix-inbox__detail", className), ...props, children });
+}
+
 // src/components/Kanban.tsx
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 function Kanban({ children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: cx("uix-kanban", className), ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: cx("uix-kanban", className), ...props, children });
 }
 function KanbanColumn({ title, count, children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: cx("uix-kanban__col", className), ...props, children: [
-    (title != null || count != null) && /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "uix-kanban__head", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: cx("uix-kanban__col", className), ...props, children: [
+    (title != null || count != null) && /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "uix-kanban__head", children: [
       title,
-      count != null && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "uix-kanban__count", children: count })
+      count != null && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "uix-kanban__count", children: count })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "uix-kanban__body", children })
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "uix-kanban__body", children })
   ] });
 }
 function KanbanCard({ title, meta, children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: cx("uix-kanban__card", className), ...props, children: [
-    title && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "uix-kanban__card-title", children: title }),
-    meta && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "uix-kanban__card-meta", children: meta }),
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: cx("uix-kanban__card", className), ...props, children: [
+    title && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "uix-kanban__card-title", children: title }),
+    meta && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "uix-kanban__card-meta", children: meta }),
     children
   ] });
 }
 
 // src/components/Tree.tsx
 var import_react13 = require("react");
-var import_jsx_runtime40 = require("react/jsx-runtime");
-var ChevronIcon2 = () => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("svg", { viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("path", { d: "M2 4l4 4 4-4" }) });
+var import_jsx_runtime42 = require("react/jsx-runtime");
+var ChevronIcon2 = () => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("svg", { viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("path", { d: "M2 4l4 4 4-4" }) });
 function TreeNode({ node, expanded, selected, onToggle, onSelect, level = 0 }) {
   const hasChildren = Array.isArray(node.children) && node.children.length > 0;
   const isExpanded = expanded.has(node.id);
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("li", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("li", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
       "button",
       {
         className: "uix-tree__row",
@@ -1336,13 +1405,13 @@ function TreeNode({ node, expanded, selected, onToggle, onSelect, level = 0 }) {
           onSelect?.(node.id);
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "uix-tree__toggle", children: hasChildren && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(ChevronIcon2, {}) }),
-          node.icon && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { "aria-hidden": "true", children: node.icon }),
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "uix-tree__toggle", children: hasChildren && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(ChevronIcon2, {}) }),
+          node.icon && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { "aria-hidden": "true", children: node.icon }),
           node.label
         ]
       }
     ),
-    hasChildren && isExpanded && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("ul", { children: node.children.map((child) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+    hasChildren && isExpanded && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("ul", { children: node.children.map((child) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
       TreeNode,
       {
         node: child,
@@ -1370,7 +1439,7 @@ function Tree({ nodes, expanded: controlledExpanded, defaultExpanded, selected,
     }
     onToggle?.(id);
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("ul", { className: cx("uix-tree", className), role: "tree", ...props, children: nodes.map((node) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("ul", { className: cx("uix-tree", className), role: "tree", ...props, children: nodes.map((node) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
     TreeNode,
     {
       node,
@@ -1404,6 +1473,10 @@ function Tree({ nodes, expanded: controlledExpanded, defaultExpanded, selected,
   EmptyState,
   ErrorState,
   Field,
+  Inbox,
+  InboxDetail,
+  InboxItem,
+  InboxList,
   Input,
   InputGroup,
   Kanban,
@@ -1413,6 +1486,7 @@ function Tree({ nodes, expanded: controlledExpanded, defaultExpanded, selected,
   List,
   ListItem,
   LoadingState,
+  Meter,
   Modal,
   NavFavourites,
   NavGroup,

package/dist/index.d.cts

@@ -414,7 +414,7 @@ interface PaginationProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange
 }
 declare function Pagination({ page, pageCount, onChange, className, ...props }: PaginationProps): react.JSX.Element;
 
-type PillTone = 'neutral' | 'success' | 'info' | 'warning' | 'danger' | 'critical' | 'muted';
+type PillTone = 'neutral' | 'success' | 'info' | 'warning' | 'danger' | 'critical' | 'muted' | 'attention' | 'overdue' | 'sla-ok' | 'sla-at-risk' | 'sla-breached' | 'p1' | 'p2' | 'p3' | 'p4' | 'p5';
 type PillTreatment = 'filled' | 'outline';
 interface StatusPillProps extends HTMLAttributes<HTMLSpanElement> {
     tone?: PillTone;
@@ -435,6 +435,17 @@ interface ProgressProps extends HTMLAttributes<HTMLDivElement> {
 }
 declare function Progress({ value, max, indeterminate, className, ...props }: ProgressProps): react.JSX.Element;
 
+/** Fill color tone for the meter bar. Defaults to `success` (green). */
+type MeterTone = 'success' | 'warning' | 'danger' | 'attention' | 'overdue';
+interface MeterProps extends HTMLAttributes<HTMLDivElement> {
+    /** Fill level 0–100. Clamped to this range. */
+    value?: number;
+    /** Threshold tone applied via `data-tone` on the fill element. `success` is the implicit default (no attribute). */
+    tone?: MeterTone;
+}
+/** Horizontal utilization / threshold bar backed by `.uix-meter`. */
+declare function Meter({ value, tone, className, ...props }: MeterProps): react.JSX.Element;
+
 interface StatTrend {
     direction: 'up' | 'down';
     label: ReactNode;
@@ -617,6 +628,37 @@ interface CommandItemProps extends HTMLAttributes<HTMLDivElement> {
 /** A single command row over `.uix-cmdk__item`. */
 declare function CommandItem({ icon, shortcut, active, children, className, ...props }: CommandItemProps): react.JSX.Element;
 
+interface InboxProps extends HTMLAttributes<HTMLDivElement> {
+    children?: ReactNode;
+}
+/** Two-pane inbox master-detail container backed by `.uix-inbox`. Place `<InboxList>` and `<InboxDetail>` as children. */
+declare function Inbox({ children, className, ...props }: InboxProps): react.JSX.Element;
+interface InboxListProps extends HTMLAttributes<HTMLDivElement> {
+    children?: ReactNode;
+}
+/** Left-pane item list. Place `<InboxItem>` children here. */
+declare function InboxList({ children, className, ...props }: InboxListProps): react.JSX.Element;
+interface InboxItemProps extends HTMLAttributes<HTMLDivElement> {
+    /** Primary subject / title line. */
+    subject?: ReactNode;
+    /** Secondary preview excerpt (truncated). */
+    preview?: ReactNode;
+    /** Leading slot — avatar, icon, or priority indicator. */
+    leading?: ReactNode;
+    /** When true sets `data-unread` → bolds the subject line. */
+    unread?: boolean;
+    /** When true sets `aria-selected` → renders the accent left-border stripe. */
+    selected?: boolean;
+    children?: ReactNode;
+}
+/** A single inbox row with subject, preview excerpt, optional leading slot, and unread/selected states. */
+declare function InboxItem({ subject, preview, leading, unread, selected, children, className, ...props }: InboxItemProps): react.JSX.Element;
+interface InboxDetailProps extends HTMLAttributes<HTMLDivElement> {
+    children?: ReactNode;
+}
+/** Right-pane detail area — renders the full content of the selected item. */
+declare function InboxDetail({ children, className, ...props }: InboxDetailProps): react.JSX.Element;
+
 interface KanbanProps extends HTMLAttributes<HTMLDivElement> {
     children?: ReactNode;
 }
@@ -658,4 +700,4 @@ interface TreeProps extends Omit<HTMLAttributes<HTMLUListElement>, 'onSelect' |
 }
 declare function Tree({ nodes, expanded: controlledExpanded, defaultExpanded, selected, onToggle, onSelect, className, ...props }: TreeProps): react.JSX.Element;
 
-export { Alert, type AlertProps, type AlertTone, AppShell, type AppShellProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, Card, type CardProps, Checkbox, type CheckboxProps, CommandGroup, type CommandGroupProps, CommandItem, type CommandItemProps, CommandPalette, type CommandPaletteProps, Comment, type CommentProps, Comments, type CommentsProps, DescriptionItem, type DescriptionItemProps, DescriptionList, type DescriptionListItem, type DescriptionListProps, DetailLayout, type DetailLayoutProps, Drawer, type DrawerProps, EmptyState, type EmptyStateProps, ErrorState, type ErrorStateProps, Field, type FieldProps, Input, InputGroup, type InputGroupProps, type InputProps, Kanban, KanbanCard, type KanbanCardProps, KanbanColumn, type KanbanColumnProps, type KanbanProps, Label, type LabelProps, List, ListItem, type ListItemProps, type ListProps, LoadingState, type LoadingStateProps, Modal, type ModalProps, type NavFavouriteItem, NavFavourites, type NavFavouritesLabels, type NavFavouritesProps, NavGroup, type NavGroupProps, NavItem, type NavItemProps, Note, type NoteProps, type NoteTone, PageHeader, type PageHeaderProps, Pagination, type PaginationProps, Peek, type PeekProps, type PillTone, type PillTreatment, Popover, type PopoverProps, Progress, type ProgressProps, Prose, type ProseProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, Select, type SelectProps, Sidebar, type SidebarProps, SidebarSection, type SidebarSectionProps, Skeleton, type SkeletonProps, type SortDirection, Spinner, type SpinnerProps, StarButton, type StarButtonProps, Stat, type StatProps, type StatTrend, StatusPill, type StatusPillProps, SubNavItem, type SubNavItemProps, Switch, type SwitchProps, Tab, type TabProps, Table, type TableDensity, type TableProps, TableWrap, type TableWrapProps, Tabs, type TabsProps, Td, type TdProps, Textarea, type TextareaProps, Th, type ThProps, Timeline, TimelineItem, type TimelineItemProps, type TimelineProps, Toast, type ToastProps, type ToastTone, Toaster, type ToasterProps, Tooltip, type TooltipProps, Tr, type TrProps, Tree, type TreeNodeData, type TreeNodeProps, type TreeProps, UserChip, type UserChipProps, cx, useDialog };
+export { Alert, type AlertProps, type AlertTone, AppShell, type AppShellProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, Card, type CardProps, Checkbox, type CheckboxProps, CommandGroup, type CommandGroupProps, CommandItem, type CommandItemProps, CommandPalette, type CommandPaletteProps, Comment, type CommentProps, Comments, type CommentsProps, DescriptionItem, type DescriptionItemProps, DescriptionList, type DescriptionListItem, type DescriptionListProps, DetailLayout, type DetailLayoutProps, Drawer, type DrawerProps, EmptyState, type EmptyStateProps, ErrorState, type ErrorStateProps, Field, type FieldProps, Inbox, InboxDetail, type InboxDetailProps, InboxItem, type InboxItemProps, InboxList, type InboxListProps, type InboxProps, Input, InputGroup, type InputGroupProps, type InputProps, Kanban, KanbanCard, type KanbanCardProps, KanbanColumn, type KanbanColumnProps, type KanbanProps, Label, type LabelProps, List, ListItem, type ListItemProps, type ListProps, LoadingState, type LoadingStateProps, Meter, type MeterProps, type MeterTone, Modal, type ModalProps, type NavFavouriteItem, NavFavourites, type NavFavouritesLabels, type NavFavouritesProps, NavGroup, type NavGroupProps, NavItem, type NavItemProps, Note, type NoteProps, type NoteTone, PageHeader, type PageHeaderProps, Pagination, type PaginationProps, Peek, type PeekProps, type PillTone, type PillTreatment, Popover, type PopoverProps, Progress, type ProgressProps, Prose, type ProseProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, Select, type SelectProps, Sidebar, type SidebarProps, SidebarSection, type SidebarSectionProps, Skeleton, type SkeletonProps, type SortDirection, Spinner, type SpinnerProps, StarButton, type StarButtonProps, Stat, type StatProps, type StatTrend, StatusPill, type StatusPillProps, SubNavItem, type SubNavItemProps, Switch, type SwitchProps, Tab, type TabProps, Table, type TableDensity, type TableProps, TableWrap, type TableWrapProps, Tabs, type TabsProps, Td, type TdProps, Textarea, type TextareaProps, Th, type ThProps, Timeline, TimelineItem, type TimelineItemProps, type TimelineProps, Toast, type ToastProps, type ToastTone, Toaster, type ToasterProps, Tooltip, type TooltipProps, Tr, type TrProps, Tree, type TreeNodeData, type TreeNodeProps, type TreeProps, UserChip, type UserChipProps, cx, useDialog };

package/dist/index.d.ts

@@ -28,6 +28,7 @@ export { SortDirection, Table, TableDensity, TableProps, TableWrap, TableWrapPro
 export { Pagination, PaginationProps } from './components/Pagination.js';
 export { PillTone, PillTreatment, StatusPill, StatusPillProps } from './components/StatusPill.js';
 export { Progress, ProgressProps } from './components/Progress.js';
+export { Meter, MeterProps, MeterTone } from './components/Meter.js';
 export { Stat, StatProps, StatTrend } from './components/Stat.js';
 export { Tooltip, TooltipProps } from './components/Tooltip.js';
 export { EmptyState, EmptyStateProps, ErrorState, ErrorStateProps, LoadingState, LoadingStateProps, Skeleton, SkeletonProps } from './components/States.js';
@@ -38,6 +39,7 @@ export { Timeline, TimelineItem, TimelineItemProps, TimelineProps } from './comp
 export { Note, NoteProps, NoteTone, Prose, ProseProps } from './components/Prose.js';
 export { Popover, PopoverProps } from './components/Popover.js';
 export { CommandGroup, CommandGroupProps, CommandItem, CommandItemProps, CommandPalette, CommandPaletteProps } from './components/CommandPalette.js';
+export { Inbox, InboxDetail, InboxDetailProps, InboxItem, InboxItemProps, InboxList, InboxListProps, InboxProps } from './components/Inbox.js';
 export { Kanban, KanbanCard, KanbanCardProps, KanbanColumn, KanbanColumnProps, KanbanProps } from './components/Kanban.js';
 export { Tree, TreeNodeData, TreeNodeProps, TreeProps } from './components/Tree.js';
 import 'react';

package/dist/index.js

@@ -28,6 +28,7 @@ import { TableWrap, Table, Th, Td, Tr } from "./components/Table.js";
 import { Pagination } from "./components/Pagination.js";
 import { StatusPill } from "./components/StatusPill.js";
 import { Progress } from "./components/Progress.js";
+import { Meter } from "./components/Meter.js";
 import { Stat } from "./components/Stat.js";
 import { Tooltip } from "./components/Tooltip.js";
 import { EmptyState, ErrorState, Skeleton, LoadingState } from "./components/States.js";
@@ -38,6 +39,7 @@ import { Timeline, TimelineItem } from "./components/Timeline.js";
 import { Prose, Note } from "./components/Prose.js";
 import { Popover } from "./components/Popover.js";
 import { CommandPalette, CommandGroup, CommandItem } from "./components/CommandPalette.js";
+import { Inbox, InboxList, InboxItem, InboxDetail } from "./components/Inbox.js";
 import { Kanban, KanbanColumn, KanbanCard } from "./components/Kanban.js";
 import { Tree } from "./components/Tree.js";
 export {
@@ -61,6 +63,10 @@ export {
   EmptyState,
   ErrorState,
   Field,
+  Inbox,
+  InboxDetail,
+  InboxItem,
+  InboxList,
   Input,
   InputGroup,
   Kanban,
@@ -70,6 +76,7 @@ export {
   List,
   ListItem,
   LoadingState,
+  Meter,
   Modal,
   NavFavourites,
   NavGroup,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tensor_1/react",
-  "version": "2.4.0",
+  "version": "2.5.0",
   "description": "Thin React wrappers over the UIx v2 CSS component library.",
   "license": "UNLICENSED",
   "type": "module",