@teton/smith-ui 0.2.181 → 0.2.183

package/dist/breadcrumbs.d.ts

@@ -0,0 +1,20 @@
+export interface BreadcrumbSegment {
+    label: string;
+    /** Distinguishes segments that repeat (e.g. `/var/lib/var`). */
+    key: string;
+}
+/**
+ * Path breadcrumb with a clickable trail. The last segment is the current
+ * location and renders as static text; the rest call `onNavigate` with their
+ * index.
+ *
+ * Deep paths collapse in the middle rather than wrapping or truncating the
+ * end — the first and last few segments are the ones that orient you, and the
+ * hidden middle stays reachable through the overflow menu.
+ */
+export declare function Breadcrumbs({ segments, onNavigate, maxVisible, className, }: {
+    segments: BreadcrumbSegment[];
+    onNavigate: (index: number) => void;
+    maxVisible?: number;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export { BADGE_COLORS, Badge, type BadgeVariant, LabelChip } from './badge';
+export { type BreadcrumbSegment, Breadcrumbs } from './breadcrumbs';
 export { Button, type ButtonSize, type ButtonTone, type ButtonVariant, } from './button';
 export { AlertBanner, type AlertTone, Card, ListRow, Panel, SectionCard, ViewAllFooter, } from './card';
 export { CountryFlag } from './country-flag';

package/dist/index.js

@@ -1,8 +1,8 @@
-import { jsx as e, jsxs as s, Fragment as v } from "react/jsx-runtime";
-import { X as w, Loader2 as j, ArrowLeft as D, ChevronDown as O, Search as R, Check as B } from "lucide-react";
+import { jsx as e, jsxs as l, Fragment as v } from "react/jsx-runtime";
+import { X as $, ChevronRight as w, MoreHorizontal as R, Loader2 as j, ArrowLeft as D, ChevronDown as B, Search as I, Check as K } from "lucide-react";
+import { useState as k, useRef as A, useEffect as O } from "react";
 import { Link as f } from "react-router";
-import { useState as M, useRef as _, useEffect as A } from "react";
-const I = {
+const z = {
   gray: "bg-gray-100 text-gray-700",
   blue: "bg-blue-100 text-blue-700",
   green: "bg-green-100 text-green-700",
@@ -11,7 +11,7 @@ const I = {
   purple: "bg-purple-100 text-purple-700",
   orange: "bg-orange-100 text-orange-700"
 };
-function J({
+function W({
   variant: r = "gray",
   pill: t = !1,
   className: n = "",
@@ -20,12 +20,12 @@ function J({
   return /* @__PURE__ */ e(
     "span",
     {
-      className: `px-1.5 py-0.5 text-xs font-medium ${t ? "rounded-full" : "rounded"} ${I[r]} ${n}`,
+      className: `px-1.5 py-0.5 text-xs font-medium ${t ? "rounded-full" : "rounded"} ${z[r]} ${n}`,
       children: a
     }
   );
 }
-function Q({
+function ee({
   name: r,
   value: t,
   onClick: n,
@@ -33,7 +33,7 @@ function Q({
   active: o = !1,
   title: m
 }) {
-  const l = /* @__PURE__ */ s(v, { children: [
+  const s = /* @__PURE__ */ l(v, { children: [
     /* @__PURE__ */ e(
       "span",
       {
@@ -48,9 +48,9 @@ function Q({
         children: t
       }
     )
-  ] }), d = `inline-flex items-center overflow-hidden rounded-md border text-xs ${o ? "border-blue-300" : "border-gray-200"}`;
-  return a ? /* @__PURE__ */ s("span", { className: d, children: [
-    l,
+  ] }), b = `inline-flex items-center overflow-hidden rounded-md border text-xs ${o ? "border-blue-300" : "border-gray-200"}`;
+  return a ? /* @__PURE__ */ l("span", { className: b, children: [
+    s,
     /* @__PURE__ */ e(
       "button",
       {
@@ -59,7 +59,7 @@ function Q({
         title: m,
         "aria-label": `Remove ${t !== void 0 ? `${r}=${t}` : r}`,
         className: `flex items-center px-1.5 py-1 border-l cursor-pointer transition-colors ${o ? "bg-blue-100 border-blue-200 text-blue-500 hover:bg-blue-200 hover:text-blue-700" : "border-gray-200 text-gray-400 hover:bg-gray-100 hover:text-gray-600"}`,
-        children: /* @__PURE__ */ e(w, { className: "w-3 h-3" })
+        children: /* @__PURE__ */ e($, { className: "w-3 h-3" })
       }
     )
   ] }) : n ? /* @__PURE__ */ e(
@@ -68,12 +68,70 @@ function Q({
       type: "button",
       onClick: n,
       title: m,
-      className: `${d} cursor-pointer transition-colors ${o ? "" : "hover:border-gray-300"}`,
-      children: l
+      className: `${b} cursor-pointer transition-colors ${o ? "" : "hover:border-gray-300"}`,
+      children: s
+    }
+  ) : /* @__PURE__ */ e("span", { className: b, children: s });
+}
+function re({
+  segments: r,
+  onNavigate: t,
+  maxVisible: n = 5,
+  className: a = ""
+}) {
+  const [o, m] = k(!1), s = !o && r.length > n, b = s ? r.slice(0, 1) : [], p = s ? r.length - n : 0, u = s ? r.slice(1 + p) : r, h = s ? 1 + p : 0, d = (i, c) => c === r.length - 1 ? /* @__PURE__ */ e(
+    "span",
+    {
+      "aria-current": "page",
+      className: "px-1.5 py-0.5 font-medium text-gray-900 truncate max-w-[16rem]",
+      children: i.label
+    },
+    i.key
+  ) : /* @__PURE__ */ e(
+    "button",
+    {
+      type: "button",
+      onClick: () => t(c),
+      className: "px-1.5 py-0.5 rounded text-gray-500 hover:text-gray-900 hover:bg-gray-100 transition-colors cursor-pointer truncate max-w-[12rem]",
+      children: i.label
+    },
+    i.key
+  );
+  return /* @__PURE__ */ l(
+    "nav",
+    {
+      "aria-label": "Breadcrumb",
+      className: `flex items-center gap-0.5 text-sm min-w-0 overflow-hidden ${a}`,
+      children: [
+        b.map((i, c) => /* @__PURE__ */ l("span", { className: "flex items-center gap-0.5 min-w-0", children: [
+          d(i, c),
+          /* @__PURE__ */ e(w, { className: "w-3.5 h-3.5 text-gray-300 flex-shrink-0" })
+        ] }, i.key)),
+        s && /* @__PURE__ */ l("span", { className: "flex items-center gap-0.5 flex-shrink-0", children: [
+          /* @__PURE__ */ e(
+            "button",
+            {
+              type: "button",
+              onClick: () => m(!0),
+              title: `Show ${p} hidden ${p === 1 ? "folder" : "folders"}`,
+              className: "px-1 py-0.5 rounded text-gray-400 hover:text-gray-700 hover:bg-gray-100 transition-colors cursor-pointer",
+              children: /* @__PURE__ */ e(R, { className: "w-4 h-4" })
+            }
+          ),
+          /* @__PURE__ */ e(w, { className: "w-3.5 h-3.5 text-gray-300" })
+        ] }),
+        u.map((i, c) => {
+          const g = h + c;
+          return /* @__PURE__ */ l("span", { className: "flex items-center gap-0.5 min-w-0", children: [
+            d(i, g),
+            g < r.length - 1 && /* @__PURE__ */ e(w, { className: "w-3.5 h-3.5 text-gray-300 flex-shrink-0" })
+          ] }, i.key);
+        })
+      ]
     }
-  ) : /* @__PURE__ */ e("span", { className: d, children: l });
+  );
 }
-const K = {
+const P = {
   solid: {
     blue: "bg-blue-600 text-white hover:bg-blue-700",
     purple: "bg-purple-600 text-white hover:bg-purple-700",
@@ -98,57 +156,57 @@ const K = {
     orange: "text-orange-600 hover:bg-orange-50",
     gray: "text-gray-600 hover:bg-gray-100"
   }
-}, P = {
+}, U = {
   sm: "px-2.5 py-1.5 text-xs gap-1.5",
   md: "px-3 py-2 text-sm gap-2"
-}, U = {
+}, X = {
   solid: "shadow-sm hover:shadow-md",
   soft: "shadow-sm hover:shadow",
   ghost: ""
 };
-function X({
+function F({
   variant: r = "soft",
   tone: t = "blue",
   size: n = "md",
   icon: a,
   loading: o = !1,
   disabled: m = !1,
-  type: l = "button",
-  title: d,
+  type: s = "button",
+  title: b,
   onClick: p,
-  to: g,
+  to: u,
   href: h,
-  target: i,
-  className: b = "",
+  target: d,
+  className: i = "",
   children: c
 }) {
-  const u = `inline-flex items-center justify-center font-medium rounded-lg transition-colors duration-100 cursor-pointer active:scale-[.98] ${P[n]} ${U[r]} ${K[r][t]} ${b}`, x = /* @__PURE__ */ s(v, { children: [
+  const g = `inline-flex items-center justify-center font-medium rounded-lg transition-colors duration-100 cursor-pointer active:scale-[.98] ${U[n]} ${X[r]} ${P[r][t]} ${i}`, x = /* @__PURE__ */ l(v, { children: [
     o ? /* @__PURE__ */ e(j, { className: "w-4 h-4 animate-spin" }) : a,
     c
   ] });
-  return g ? /* @__PURE__ */ e(f, { to: g, className: u, title: d, children: x }) : h ? /* @__PURE__ */ e(
+  return u ? /* @__PURE__ */ e(f, { to: u, className: g, title: b, children: x }) : h ? /* @__PURE__ */ e(
     "a",
     {
       href: h,
-      target: i,
-      rel: i === "_blank" ? "noopener noreferrer" : void 0,
-      className: u,
-      title: d,
+      target: d,
+      rel: d === "_blank" ? "noopener noreferrer" : void 0,
+      className: g,
+      title: b,
       children: x
     }
   ) : /* @__PURE__ */ e(
     "button",
     {
-      type: l,
+      type: s,
       onClick: p,
       disabled: m || o,
-      title: d,
-      className: `${u} disabled:opacity-50 disabled:cursor-not-allowed`,
+      title: b,
+      className: `${g} disabled:opacity-50 disabled:cursor-not-allowed`,
       children: x
     }
   );
 }
-function $({
+function T({
   className: r = "",
   children: t
 }) {
@@ -160,27 +218,27 @@ function $({
     }
   );
 }
-function W({
+function te({
   icon: r,
   title: t,
   theme: n,
   count: a,
   actions: o,
   bodyClassName: m = "p-5",
-  className: l = "",
-  children: d
+  className: s = "",
+  children: b
 }) {
-  return /* @__PURE__ */ s($, { className: `overflow-hidden ${l}`, children: [
-    /* @__PURE__ */ s(
+  return /* @__PURE__ */ l(T, { className: `overflow-hidden ${s}`, children: [
+    /* @__PURE__ */ l(
       "div",
       {
         className: `px-4 py-3 flex items-center justify-between border-b border-black/5 ${n.header}`,
         children: [
-          /* @__PURE__ */ s("h4", { className: "text-sm font-semibold flex items-center", children: [
+          /* @__PURE__ */ l("h4", { className: "text-sm font-semibold flex items-center", children: [
             r && /* @__PURE__ */ e(r, { className: "w-4 h-4 mr-2" }),
             t
           ] }),
-          (o || a !== void 0) && /* @__PURE__ */ s("div", { className: "flex items-center gap-2", children: [
+          (o || a !== void 0) && /* @__PURE__ */ l("div", { className: "flex items-center gap-2", children: [
             o,
             a !== void 0 && /* @__PURE__ */ e(
               "span",
@@ -193,29 +251,29 @@ function W({
         ]
       }
     ),
-    /* @__PURE__ */ e("div", { className: m, children: d })
+    /* @__PURE__ */ e("div", { className: m, children: b })
   ] });
 }
-const z = {
+const H = {
   red: { accent: "border-l-red-500", chip: "bg-red-50 text-red-600" },
   amber: { accent: "border-l-amber-500", chip: "bg-amber-50 text-amber-700" }
 };
-function ee({
+function ne({
   tone: r = "red",
   title: t,
   severity: n,
   action: a,
   children: o
 }) {
-  const { accent: m, chip: l } = z[r];
-  return /* @__PURE__ */ e($, { className: `border-l-4 ${m} px-5 py-4`, children: /* @__PURE__ */ s("div", { className: "flex items-start justify-between gap-4", children: [
-    /* @__PURE__ */ s("div", { className: "min-w-0 flex-1", children: [
-      /* @__PURE__ */ s("div", { className: "flex items-center gap-2.5 flex-wrap", children: [
+  const { accent: m, chip: s } = H[r];
+  return /* @__PURE__ */ e(T, { className: `border-l-4 ${m} px-5 py-4`, children: /* @__PURE__ */ l("div", { className: "flex items-start justify-between gap-4", children: [
+    /* @__PURE__ */ l("div", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ l("div", { className: "flex items-center gap-2.5 flex-wrap", children: [
         /* @__PURE__ */ e("h4", { className: "text-base font-semibold text-gray-900", children: t }),
         n && /* @__PURE__ */ e(
           "span",
           {
-            className: `text-[11px] font-bold uppercase tracking-wide px-1.5 py-0.5 rounded ${l}`,
+            className: `text-[11px] font-bold uppercase tracking-wide px-1.5 py-0.5 rounded ${s}`,
             children: n
           }
         )
@@ -225,26 +283,26 @@ function ee({
     a && /* @__PURE__ */ e("div", { className: "shrink-0 text-sm", children: a })
   ] }) });
 }
-function re({
+function ae({
   icon: r,
   title: t,
   count: n,
   theme: a,
   actions: o,
   footer: m,
-  children: l
+  children: s
 }) {
-  return /* @__PURE__ */ s($, { className: "overflow-hidden flex flex-col", children: [
-    /* @__PURE__ */ s(
+  return /* @__PURE__ */ l(T, { className: "overflow-hidden flex flex-col", children: [
+    /* @__PURE__ */ l(
       "div",
       {
         className: `px-4 py-3 flex items-center justify-between border-b border-black/5 ${a.header}`,
         children: [
-          /* @__PURE__ */ s("h4", { className: "text-sm font-semibold flex items-center", children: [
+          /* @__PURE__ */ l("h4", { className: "text-sm font-semibold flex items-center", children: [
             r && /* @__PURE__ */ e(r, { className: "w-4 h-4 mr-2" }),
             t
           ] }),
-          /* @__PURE__ */ s("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ l("div", { className: "flex items-center gap-2", children: [
             o,
             n !== void 0 && /* @__PURE__ */ e(
               "span",
@@ -257,34 +315,34 @@ function re({
         ]
       }
     ),
-    /* @__PURE__ */ e("div", { className: "divide-y divide-gray-100", children: l }),
+    /* @__PURE__ */ e("div", { className: "divide-y divide-gray-100", children: s }),
     m
   ] });
 }
-function te({
+function oe({
   to: r,
   onClick: t,
   hover: n = "hover:bg-gray-50",
   className: a = "",
   children: o
 }) {
-  const l = `flex items-center justify-between px-4 py-3 transition-colors ${n} ${!!(r || t) ? "cursor-pointer" : ""} ${a}`;
-  return r ? /* @__PURE__ */ e(f, { to: r, className: l, children: o }) : t ? /* @__PURE__ */ e(
+  const s = `flex items-center justify-between px-4 py-3 transition-colors ${n} ${!!(r || t) ? "cursor-pointer" : ""} ${a}`;
+  return r ? /* @__PURE__ */ e(f, { to: r, className: s, children: o }) : t ? /* @__PURE__ */ e(
     "button",
     {
       type: "button",
       onClick: t,
-      className: `w-full text-left ${l}`,
+      className: `w-full text-left ${s}`,
       children: o
     }
-  ) : /* @__PURE__ */ e("div", { className: l, children: o });
+  ) : /* @__PURE__ */ e("div", { className: s, children: o });
 }
-function ne({
+function se({
   to: r,
   count: t,
   noun: n = "items"
 }) {
-  return /* @__PURE__ */ s(
+  return /* @__PURE__ */ l(
     f,
     {
       to: r,
@@ -299,15 +357,15 @@ function ne({
     }
   );
 }
-const F = (r) => `https://flagicons.lipis.dev/flags/4x3/${r.toLowerCase()}.svg`;
-function ae({
+const V = (r) => `https://flagicons.lipis.dev/flags/4x3/${r.toLowerCase()}.svg`;
+function le({
   countryCode: r,
   country: t
 }) {
   return r ? /* @__PURE__ */ e(
     "img",
     {
-      src: F(r),
+      src: V(r),
       alt: t || "Country flag",
       className: "w-4 h-3 flex-shrink-0 rounded-sm ring-1 ring-black/5",
       onError: (n) => {
@@ -316,22 +374,22 @@ function ae({
     }
   ) : null;
 }
-function oe({
+function ie({
   to: r,
   onClick: t,
   children: n
 }) {
-  const a = "inline-flex items-center gap-2 text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors cursor-pointer", o = /* @__PURE__ */ s(v, { children: [
+  const a = "inline-flex items-center gap-2 text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors cursor-pointer", o = /* @__PURE__ */ l(v, { children: [
     /* @__PURE__ */ e(D, { className: "w-4 h-4" }),
     /* @__PURE__ */ e("span", { children: n })
   ] });
   return r ? /* @__PURE__ */ e(f, { to: r, className: a, children: o }) : /* @__PURE__ */ e("button", { type: "button", onClick: t, className: a, children: o });
 }
-function se({
+function de({
   items: r,
   actions: t
 }) {
-  return /* @__PURE__ */ s("div", { className: "border-b border-gray-200 flex items-end justify-between gap-4", children: [
+  return /* @__PURE__ */ l("div", { className: "border-b border-gray-200 flex items-end justify-between gap-4", children: [
     /* @__PURE__ */ e("nav", { className: "-mb-px flex space-x-8", children: r.map((n) => {
       const a = n.active ? "py-2 px-1 border-b-2 border-blue-500 text-blue-600 font-medium text-sm" : "py-2 px-1 border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 font-medium text-sm transition-colors cursor-pointer";
       return n.to && !n.active ? /* @__PURE__ */ e(
@@ -348,9 +406,9 @@ function se({
     t && /* @__PURE__ */ e("div", { className: "flex items-center gap-2 pb-1.5", children: t })
   ] });
 }
-function le({ items: r }) {
+function ce({ items: r }) {
   return /* @__PURE__ */ e("nav", { className: "space-y-1", children: r.map((t) => {
-    const n = t.icon, a = `group/side relative flex items-center gap-3 h-10 rounded-md px-3 text-sm transition-all duration-200 cursor-pointer ${t.active ? "bg-blue-50 text-blue-700 font-medium" : "text-gray-600 hover:bg-gray-100 hover:text-gray-900"}`, o = /* @__PURE__ */ s(v, { children: [
+    const n = t.icon, a = `group/side relative flex items-center gap-3 h-10 rounded-md px-3 text-sm transition-all duration-200 cursor-pointer ${t.active ? "bg-blue-50 text-blue-700 font-medium" : "text-gray-600 hover:bg-gray-100 hover:text-gray-900"}`, o = /* @__PURE__ */ l(v, { children: [
       /* @__PURE__ */ e(
         "span",
         {
@@ -363,63 +421,63 @@ function le({ items: r }) {
     return t.active ? /* @__PURE__ */ e("span", { className: a, "aria-current": "page", children: o }, t.to) : /* @__PURE__ */ e(f, { to: t.to, className: a, children: o }, t.to);
   }) });
 }
-function ie({
+function ge({
   label: r,
   icon: t,
   iconClassName: n = "text-gray-400",
   children: a
 }) {
-  return /* @__PURE__ */ s("div", { className: "flex items-center justify-between gap-4", children: [
-    /* @__PURE__ */ s("span", { className: "text-gray-700 flex items-center flex-shrink-0", children: [
+  return /* @__PURE__ */ l("div", { className: "flex items-center justify-between gap-4", children: [
+    /* @__PURE__ */ l("span", { className: "text-gray-700 flex items-center flex-shrink-0", children: [
       t && /* @__PURE__ */ e(t, { className: `w-4 h-4 mr-2 ${n}` }),
       r
     ] }),
     /* @__PURE__ */ e("span", { className: "text-sm text-gray-900 text-right min-w-0", children: a })
   ] });
 }
-const V = {
+const Y = {
   blue: "text-blue-600",
   purple: "text-purple-600",
   red: "text-red-600",
   green: "text-green-600",
   orange: "text-orange-600",
   gray: "text-gray-500"
-}, L = "w-full flex items-start gap-3 px-3 py-2 text-left transition-colors hover:bg-gray-50 cursor-pointer";
-function de({
+}, S = "w-full flex items-start gap-3 px-3 py-2 text-left transition-colors hover:bg-gray-50 cursor-pointer";
+function be({
   label: r,
   items: t,
   icon: n,
   variant: a = "soft",
   tone: o = "gray",
   size: m = "md",
-  align: l = "right",
-  className: d = ""
+  align: s = "right",
+  className: b = ""
 }) {
-  const [p, g] = M(!1), h = _(null);
-  return A(() => {
+  const [p, u] = k(!1), h = A(null);
+  return O(() => {
     if (!p) return;
-    const i = (c) => {
-      var u;
-      (u = h.current) != null && u.contains(c.target) || g(!1);
-    }, b = (c) => {
-      c.key === "Escape" && g(!1);
+    const d = (c) => {
+      var g;
+      (g = h.current) != null && g.contains(c.target) || u(!1);
+    }, i = (c) => {
+      c.key === "Escape" && u(!1);
     };
-    return document.addEventListener("mousedown", i), document.addEventListener("keydown", b), () => {
-      document.removeEventListener("mousedown", i), document.removeEventListener("keydown", b);
+    return document.addEventListener("mousedown", d), document.addEventListener("keydown", i), () => {
+      document.removeEventListener("mousedown", d), document.removeEventListener("keydown", i);
     };
-  }, [p]), /* @__PURE__ */ s("div", { className: `relative ${d}`, ref: h, children: [
-    /* @__PURE__ */ s(
-      X,
+  }, [p]), /* @__PURE__ */ l("div", { className: `relative ${b}`, ref: h, children: [
+    /* @__PURE__ */ l(
+      F,
       {
         variant: a,
         tone: o,
         size: m,
         icon: n,
-        onClick: () => g((i) => !i),
+        onClick: () => u((d) => !d),
         children: [
           r,
           /* @__PURE__ */ e(
-            O,
+            B,
             {
               className: `w-4 h-4 transition-transform duration-200 ${p ? "rotate-180" : ""}`
             }
@@ -430,52 +488,52 @@ function de({
     p && /* @__PURE__ */ e(
       "div",
       {
-        className: `absolute ${l === "right" ? "right-0" : "left-0"} mt-2 w-64 py-1 bg-white rounded-lg shadow-lg border border-gray-200 z-50 animate-dropdown-in`,
-        children: t.map((i, b) => {
-          const c = V[i.tone ?? "gray"], u = /* @__PURE__ */ s(v, { children: [
-            i.icon && /* @__PURE__ */ e(
+        className: `absolute ${s === "right" ? "right-0" : "left-0"} mt-2 w-64 py-1 bg-white rounded-lg shadow-lg border border-gray-200 z-50 animate-dropdown-in`,
+        children: t.map((d, i) => {
+          const c = Y[d.tone ?? "gray"], g = /* @__PURE__ */ l(v, { children: [
+            d.icon && /* @__PURE__ */ e(
               "span",
               {
                 className: `flex items-center gap-1 mt-0.5 flex-shrink-0 ${c}`,
-                children: i.icon
+                children: d.icon
               }
             ),
-            /* @__PURE__ */ s("span", { className: "min-w-0", children: [
-              /* @__PURE__ */ e("span", { className: "block text-sm font-medium text-gray-900", children: i.label }),
-              i.description && /* @__PURE__ */ e("span", { className: "block text-xs text-gray-500 mt-0.5 break-all", children: i.description })
+            /* @__PURE__ */ l("span", { className: "min-w-0", children: [
+              /* @__PURE__ */ e("span", { className: "block text-sm font-medium text-gray-900", children: d.label }),
+              d.description && /* @__PURE__ */ e("span", { className: "block text-xs text-gray-500 mt-0.5 break-all", children: d.description })
             ] })
           ] });
-          return i.href ? /* @__PURE__ */ e(
+          return d.href ? /* @__PURE__ */ e(
             "a",
             {
-              href: i.href,
-              target: i.target,
-              rel: i.target === "_blank" ? "noopener noreferrer" : void 0,
-              className: L,
-              onClick: () => g(!1),
-              children: u
+              href: d.href,
+              target: d.target,
+              rel: d.target === "_blank" ? "noopener noreferrer" : void 0,
+              className: S,
+              onClick: () => u(!1),
+              children: g
             },
-            b
+            i
           ) : /* @__PURE__ */ e(
             "button",
             {
               type: "button",
-              disabled: i.disabled,
+              disabled: d.disabled,
               onClick: () => {
                 var x;
-                i.keepOpen || g(!1), (x = i.onClick) == null || x.call(i);
+                d.keepOpen || u(!1), (x = d.onClick) == null || x.call(d);
               },
-              className: `${L} disabled:opacity-50 disabled:cursor-not-allowed`,
-              children: u
+              className: `${S} disabled:opacity-50 disabled:cursor-not-allowed`,
+              children: g
             },
-            b
+            i
           );
         })
       }
     )
   ] });
 }
-function ce({
+function ue({
   className: r = "space-y-6",
   children: t
 }) {
@@ -487,32 +545,32 @@ function ce({
     }
   );
 }
-function ge({
+function me({
   value: r,
   onChange: t,
   placeholder: n = "Search...",
   className: a = "w-full",
   slashToFocus: o = !1
 }) {
-  const m = _(null);
-  return A(() => {
+  const m = A(null);
+  return O(() => {
     if (!o) return;
-    function l(d) {
-      var g;
-      if (d.key !== "/" || d.ctrlKey || d.metaKey || d.altKey) return;
-      const p = d.target;
-      p.tagName === "INPUT" || p.tagName === "TEXTAREA" || p.tagName === "SELECT" || p.isContentEditable || (d.preventDefault(), (g = m.current) == null || g.focus());
+    function s(b) {
+      var u;
+      if (b.key !== "/" || b.ctrlKey || b.metaKey || b.altKey) return;
+      const p = b.target;
+      p.tagName === "INPUT" || p.tagName === "TEXTAREA" || p.tagName === "SELECT" || p.isContentEditable || (b.preventDefault(), (u = m.current) == null || u.focus());
     }
-    return document.addEventListener("keydown", l), () => document.removeEventListener("keydown", l);
-  }, [o]), /* @__PURE__ */ s("div", { className: `relative ${a}`, children: [
-    /* @__PURE__ */ e(R, { className: "absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 w-4 h-4 pointer-events-none" }),
+    return document.addEventListener("keydown", s), () => document.removeEventListener("keydown", s);
+  }, [o]), /* @__PURE__ */ l("div", { className: `relative ${a}`, children: [
+    /* @__PURE__ */ e(I, { className: "absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 w-4 h-4 pointer-events-none" }),
     /* @__PURE__ */ e(
       "input",
       {
         ref: m,
         type: "text",
         value: r,
-        onChange: (l) => t(l.target.value),
+        onChange: (s) => t(s.target.value),
         placeholder: n,
         className: "w-full pl-10 pr-10 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm text-gray-900 placeholder-gray-400"
       }
@@ -520,7 +578,7 @@ function ge({
     o && !r && /* @__PURE__ */ e("kbd", { className: "absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 text-xs border border-gray-300 rounded px-1 py-0.5 font-mono leading-none pointer-events-none", children: "/" })
   ] });
 }
-const H = {
+const G = {
   neutral: { badge: "bg-gray-100", icon: "text-gray-400" },
   green: { badge: "bg-green-100", icon: "text-green-600" },
   blue: { badge: "bg-blue-100", icon: "text-blue-600" },
@@ -528,14 +586,14 @@ const H = {
   red: { badge: "bg-red-100", icon: "text-red-600" },
   purple: { badge: "bg-purple-100", icon: "text-purple-600" }
 };
-function be({
+function pe({
   icon: r,
   label: t,
   value: n,
   tone: a = "neutral"
 }) {
-  const o = H[a];
-  return /* @__PURE__ */ s("div", { className: "flex items-center gap-4", children: [
+  const o = G[a];
+  return /* @__PURE__ */ l("div", { className: "flex items-center gap-4", children: [
     /* @__PURE__ */ e(
       "div",
       {
@@ -543,18 +601,18 @@ function be({
         children: /* @__PURE__ */ e(r, { className: `w-6 h-6 ${o.icon}` })
       }
     ),
-    /* @__PURE__ */ s("div", { children: [
+    /* @__PURE__ */ l("div", { children: [
       /* @__PURE__ */ e("p", { className: "text-sm font-medium text-gray-500", children: t }),
       /* @__PURE__ */ e("p", { className: "text-3xl font-bold text-gray-900 tabular-nums", children: n })
     ] })
   ] });
 }
-const S = {
+const M = {
   ok: "bg-green-500",
   down: "bg-red-500",
   unknown: "bg-gray-300"
-}, C = (r) => `${(r * 100).toFixed(4)}%`;
-function ue({
+}, _ = (r) => `${(r * 100).toFixed(4)}%`;
+function he({
   from: r,
   to: t,
   spans: n,
@@ -562,14 +620,14 @@ function ue({
   height: o = "1.75rem",
   renderTooltip: m
 }) {
-  const [l, d] = M(null), p = r.getTime(), g = t.getTime() - p;
-  if (!(g > 0)) return null;
-  const h = g / a, i = Array.from({ length: a }, (c, u) => {
-    const x = p + u * h, N = x + h;
+  const [s, b] = k(null), p = r.getTime(), u = t.getTime() - p;
+  if (!(u > 0)) return null;
+  const h = u / a, d = Array.from({ length: a }, (c, g) => {
+    const x = p + g * h, N = x + h;
     let y = 0;
-    for (const T of n) {
-      const k = Math.max(T.start.getTime(), x), E = Math.min(T.end.getTime(), N);
-      E > k && (y += E - k);
+    for (const E of n) {
+      const L = Math.max(E.start.getTime(), x), C = Math.min(E.end.getTime(), N);
+      C > L && (y += C - L);
     }
     return {
       start: new Date(x),
@@ -578,16 +636,16 @@ function ue({
       ratio: 1 - y / h
     };
   });
-  return /* @__PURE__ */ s("div", { className: "relative", children: [
-    l !== null && m && /* @__PURE__ */ e(
+  return /* @__PURE__ */ l("div", { className: "relative", children: [
+    s !== null && m && /* @__PURE__ */ e(
       "div",
       {
         className: "pointer-events-none absolute bottom-full z-10 mb-2 whitespace-nowrap rounded-md bg-gray-900 px-2 py-1.5 text-[11px] leading-tight text-white shadow-lg",
         style: ((c) => {
-          const u = (c + 0.5) / a;
-          return u < 0.15 ? { left: 0 } : u > 0.85 ? { right: 0 } : { left: `${u * 100}%`, transform: "translateX(-50%)" };
-        })(l),
-        children: m(i[l])
+          const g = (c + 0.5) / a;
+          return g < 0.15 ? { left: 0 } : g > 0.85 ? { right: 0 } : { left: `${g * 100}%`, transform: "translateX(-50%)" };
+        })(s),
+        children: m(d[s])
       }
     ),
     /* @__PURE__ */ e(
@@ -595,12 +653,12 @@ function ue({
       {
         className: "flex items-stretch gap-[2px]",
         style: { height: o },
-        onMouseLeave: () => d(null),
-        children: i.map((c, u) => /* @__PURE__ */ e(
+        onMouseLeave: () => b(null),
+        children: d.map((c, g) => /* @__PURE__ */ e(
           "div",
           {
-            onMouseEnter: () => d(u),
-            className: `relative min-w-[2px] flex-1 cursor-pointer overflow-hidden rounded-[2px] bg-emerald-500 transition-opacity ${l === u ? "opacity-60" : ""}`,
+            onMouseEnter: () => b(g),
+            className: `relative min-w-[2px] flex-1 cursor-pointer overflow-hidden rounded-[2px] bg-emerald-500 transition-opacity ${s === g ? "opacity-60" : ""}`,
             children: c.downMs > 0 && /* @__PURE__ */ e(
               "div",
               {
@@ -615,51 +673,51 @@ function ue({
     )
   ] });
 }
-function me({
+function xe({
   from: r,
   to: t,
   lanes: n,
   baseline: a = "ok",
   ticks: o = 5,
-  formatTick: m = (g) => g.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }),
-  labelWidth: l = "8rem",
-  rowHeight: d = "1.25rem",
+  formatTick: m = (u) => u.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }),
+  labelWidth: s = "8rem",
+  rowHeight: b = "1.25rem",
   emptyLabel: p = "No data"
 }) {
-  const g = r.getTime(), h = t.getTime() - g;
+  const u = r.getTime(), h = t.getTime() - u;
   if (!(h > 0) || n.length === 0)
     return /* @__PURE__ */ e("div", { className: "py-8 text-center text-sm text-gray-500", children: p });
-  const i = Array.from(
+  const d = Array.from(
     { length: Math.max(2, o) },
-    (b, c) => new Date(g + h * c / (Math.max(2, o) - 1))
+    (i, c) => new Date(u + h * c / (Math.max(2, o) - 1))
   );
-  return /* @__PURE__ */ s("div", { className: "space-y-1.5", children: [
-    n.map((b) => /* @__PURE__ */ s("div", { className: "flex items-center gap-3", children: [
+  return /* @__PURE__ */ l("div", { className: "space-y-1.5", children: [
+    n.map((i) => /* @__PURE__ */ l("div", { className: "flex items-center gap-3", children: [
       /* @__PURE__ */ e(
         "div",
         {
           className: "shrink-0 truncate font-mono text-xs text-gray-600",
-          style: { width: l },
-          title: b.name,
-          children: b.label ?? b.name
+          style: { width: s },
+          title: i.name,
+          children: i.label ?? i.name
         }
       ),
       /* @__PURE__ */ e(
         "div",
         {
-          className: `relative flex-1 overflow-hidden rounded-sm ${S[a]}`,
-          style: { height: d },
-          children: b.spans.map((c) => {
-            const u = Math.max(c.start.getTime(), g), x = Math.min(c.end.getTime(), g + h);
-            if (x <= u) return null;
-            const N = (u - g) / h, y = (x - u) / h;
+          className: `relative flex-1 overflow-hidden rounded-sm ${M[a]}`,
+          style: { height: b },
+          children: i.spans.map((c) => {
+            const g = Math.max(c.start.getTime(), u), x = Math.min(c.end.getTime(), u + h);
+            if (x <= g) return null;
+            const N = (g - u) / h, y = (x - g) / h;
             return /* @__PURE__ */ e(
               "div",
               {
-                className: `absolute inset-y-0 ${S[c.tone]}`,
+                className: `absolute inset-y-0 ${M[c.tone]}`,
                 style: {
-                  left: C(N),
-                  width: `max(2px, ${C(y)})`
+                  left: _(N),
+                  width: `max(2px, ${_(y)})`
                 },
                 title: c.label
               },
@@ -668,23 +726,23 @@ function me({
           })
         }
       ),
-      b.trailing !== void 0 && /* @__PURE__ */ e("div", { className: "w-16 shrink-0 text-right font-mono text-xs tabular-nums text-gray-600", children: b.trailing })
-    ] }, b.name)),
+      i.trailing !== void 0 && /* @__PURE__ */ e("div", { className: "w-16 shrink-0 text-right font-mono text-xs tabular-nums text-gray-600", children: i.trailing })
+    ] }, i.name)),
     /* @__PURE__ */ e(
       "div",
       {
         className: "flex justify-between pt-1 text-[11px] tabular-nums text-gray-400",
         style: {
-          marginLeft: l,
+          marginLeft: s,
           paddingLeft: "0.75rem",
-          marginRight: n.some((b) => b.trailing !== void 0) ? "4rem" : void 0
+          marginRight: n.some((i) => i.trailing !== void 0) ? "4rem" : void 0
         },
-        children: i.map((b) => /* @__PURE__ */ e("span", { children: m(b) }, b.getTime()))
+        children: d.map((i) => /* @__PURE__ */ e("span", { children: m(i) }, i.getTime()))
       }
     )
   ] });
 }
-const pe = {
+const fe = {
   blue: {
     header: "bg-blue-50 text-blue-800",
     hover: "hover:bg-blue-50",
@@ -726,7 +784,7 @@ const pe = {
     badge: "bg-gray-200 text-gray-700"
   }
 };
-function he({
+function ye({
   toast: r,
   onClose: t
 }) {
@@ -734,8 +792,8 @@ function he({
     "div",
     {
       className: `fixed top-4 right-4 z-50 p-4 rounded-lg shadow-lg border transition-all duration-300 ease-in-out ${r.type === "success" ? "bg-green-50 text-green-800 border-green-200" : "bg-red-50 text-red-800 border-red-200"}`,
-      children: /* @__PURE__ */ s("div", { className: "flex items-center space-x-2", children: [
-        r.type === "success" ? /* @__PURE__ */ e(B, { className: "w-5 h-5 text-green-600" }) : /* @__PURE__ */ e(w, { className: "w-5 h-5 text-red-600" }),
+      children: /* @__PURE__ */ l("div", { className: "flex items-center space-x-2", children: [
+        r.type === "success" ? /* @__PURE__ */ e(K, { className: "w-5 h-5 text-green-600" }) : /* @__PURE__ */ e($, { className: "w-5 h-5 text-red-600" }),
         /* @__PURE__ */ e("span", { className: "text-sm font-medium", children: r.message }),
         /* @__PURE__ */ e(
           "button",
@@ -743,7 +801,7 @@ function he({
             type: "button",
             onClick: t,
             className: "ml-2 text-gray-400 hover:text-gray-600 cursor-pointer",
-            children: /* @__PURE__ */ e(w, { className: "w-4 h-4" })
+            children: /* @__PURE__ */ e($, { className: "w-4 h-4" })
           }
         )
       ] })
@@ -751,27 +809,28 @@ function he({
   ) : null;
 }
 export {
-  ee as AlertBanner,
-  I as BADGE_COLORS,
-  oe as BackLink,
-  J as Badge,
-  X as Button,
-  $ as Card,
-  ae as CountryFlag,
-  de as DropdownMenu,
-  ie as InfoRow,
-  Q as LabelChip,
-  te as ListRow,
-  ce as PageContainer,
-  W as Panel,
-  pe as SECTION_THEMES,
-  ge as SearchInput,
-  re as SectionCard,
-  le as SideNav,
-  be as StatCard,
-  me as StateTimeline,
-  se as TabNav,
-  he as Toast,
-  ue as UptimeBars,
-  ne as ViewAllFooter
+  ne as AlertBanner,
+  z as BADGE_COLORS,
+  ie as BackLink,
+  W as Badge,
+  re as Breadcrumbs,
+  F as Button,
+  T as Card,
+  le as CountryFlag,
+  be as DropdownMenu,
+  ge as InfoRow,
+  ee as LabelChip,
+  oe as ListRow,
+  ue as PageContainer,
+  te as Panel,
+  fe as SECTION_THEMES,
+  me as SearchInput,
+  ae as SectionCard,
+  ce as SideNav,
+  pe as StatCard,
+  xe as StateTimeline,
+  de as TabNav,
+  ye as Toast,
+  he as UptimeBars,
+  se as ViewAllFooter
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@teton/smith-ui",
-	"version": "0.2.181",
+	"version": "0.2.183",
 	"description": "Smith dashboard design-system primitives (React + Tailwind CSS v4).",
 	"license": "Apache-2.0",
 	"repository": {