@teton/smith-ui 0.2.194 → 0.2.196

package/dist/index.js

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

package/dist/state-timeline.d.ts

@@ -23,7 +23,9 @@ export interface UptimeBucket {
     end: Date;
     /** Downtime inside this bucket, in ms. */
     downMs: number;
-    /** Fraction of the bucket spent up, 0..1. */
+    /** Unobserved time inside this bucket (before `coverageFrom`), in ms. */
+    unknownMs: number;
+    /** Fraction of the *observed* part of the bucket spent up, 0..1. */
     ratio: number;
 }
 /**
@@ -35,11 +37,14 @@ export interface UptimeBucket {
  * "briefly down", a full red bar as "down the whole time", with no intermediate
  * colour whose meaning has to be guessed.
  */
-export declare function UptimeBars({ from, to, spans, buckets, height, renderTooltip, }: {
+export declare function UptimeBars({ from, to, spans, coverageFrom, buckets, height, renderTooltip, }: {
     from: Date;
     to: Date;
     /** Down intervals in absolute time; clipped to the window. */
     spans: TimelineSpan[];
+    /** Start of observed time. Anything before this, within the window, is drawn
+     * as unknown rather than up — omit when the whole window is observed. */
+    coverageFrom?: Date;
     buckets?: number;
     height?: string;
     /** Hover card contents for a bucket. No tooltip is shown when omitted. */

package/package.json

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