@teton/smith-ui 0.2.196 → 0.2.198

package/dist/index.d.ts

@@ -7,7 +7,7 @@ export { BackLink, InfoRow, SideNav, type SideNavItem, type TabItem, TabNav, } f
 export { type DropdownItem, DropdownMenu } from './dropdown';
 export { PageContainer } from './page-container';
 export { SearchInput } from './search-input';
-export { Select } from './select';
+export { Select, SelectMenu, type SelectMenuOption, } from './select';
 export { StatCard } from './stat-card';
 export { StateTimeline, type TimelineLane, type TimelineSpan, type TimelineTone, UptimeBars, type UptimeBucket, } from './state-timeline';
 export { type IconComponent, SECTION_THEMES, type SectionTheme, type SectionThemeName, } from './theme';

package/dist/index.js

@@ -1,8 +1,8 @@
-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 = {
+import { jsx as e, jsxs as l, Fragment as $ } from "react/jsx-runtime";
+import { X as M, ChevronRight as T, MoreHorizontal as K, Loader2 as P, ArrowLeft as U, ChevronDown as B, Search as H, Check as I } from "lucide-react";
+import { useState as N, useRef as C, useEffect as L } from "react";
+import { Link as w } from "react-router";
+const X = {
   gray: "bg-gray-100 text-gray-700",
   blue: "bg-blue-100 text-blue-700",
   green: "bg-green-100 text-green-700",
@@ -20,7 +20,7 @@ function ne({
   return /* @__PURE__ */ e(
     "span",
     {
-      className: `px-1.5 py-0.5 text-xs font-medium ${t ? "rounded-full" : "rounded"} ${H[r]} ${n}`,
+      className: `px-1.5 py-0.5 text-xs font-medium ${t ? "rounded-full" : "rounded"} ${X[r]} ${n}`,
       children: a
     }
   );
@@ -31,9 +31,9 @@ function ae({
   onClick: n,
   onRemove: a,
   active: o = !1,
-  title: u
+  title: h
 }) {
-  const l = /* @__PURE__ */ i(N, { children: [
+  const i = /* @__PURE__ */ l($, { children: [
     /* @__PURE__ */ e(
       "span",
       {
@@ -49,17 +49,17 @@ function ae({
       }
     )
   ] }), 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,
+  return a ? /* @__PURE__ */ l("span", { className: c, children: [
+    i,
     /* @__PURE__ */ e(
       "button",
       {
         type: "button",
         onClick: a,
-        title: u,
+        title: h,
         "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(T, { className: "w-3 h-3" })
+        children: /* @__PURE__ */ e(M, { className: "w-3 h-3" })
       }
     )
   ] }) : n ? /* @__PURE__ */ e(
@@ -67,11 +67,11 @@ function ae({
     {
       type: "button",
       onClick: n,
-      title: u,
+      title: h,
       className: `${c} cursor-pointer transition-colors ${o ? "" : "hover:border-gray-300"}`,
-      children: l
+      children: i
     }
-  ) : /* @__PURE__ */ e("span", { className: c, children: l });
+  ) : /* @__PURE__ */ e("span", { className: c, children: i });
 }
 function oe({
   segments: r,
@@ -79,7 +79,7 @@ function oe({
   maxVisible: n = 5,
   className: a = ""
 }) {
-  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(
+  const [o, h] = N(!1), i = !o && r.length > n, c = i ? r.slice(0, 1) : [], m = i ? r.length - n : 0, b = i ? r.slice(1 + m) : r, p = i ? 1 + m : 0, d = (s, u) => u === r.length - 1 ? /* @__PURE__ */ e(
     "span",
     {
       "aria-current": "page",
@@ -91,40 +91,40 @@ function oe({
     "button",
     {
       type: "button",
-      onClick: () => t(g),
+      onClick: () => t(u),
       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: s.label
     },
     s.key
   );
-  return /* @__PURE__ */ i(
+  return /* @__PURE__ */ l(
     "nav",
     {
       "aria-label": "Breadcrumb",
       className: `flex items-center gap-0.5 text-sm min-w-0 overflow-hidden ${a}`,
       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" })
+        c.map((s, u) => /* @__PURE__ */ l("span", { className: "flex items-center gap-0.5 min-w-0", children: [
+          d(s, u),
+          /* @__PURE__ */ e(T, { 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: [
+        i && /* @__PURE__ */ l("span", { className: "flex items-center gap-0.5 flex-shrink-0", children: [
           /* @__PURE__ */ e(
             "button",
             {
               type: "button",
-              onClick: () => u(!0),
+              onClick: () => h(!0),
               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(I, { className: "w-4 h-4" })
+              children: /* @__PURE__ */ e(K, { className: "w-4 h-4" })
             }
           ),
-          /* @__PURE__ */ e(k, { className: "w-3.5 h-3.5 text-gray-300" })
+          /* @__PURE__ */ e(T, { className: "w-3.5 h-3.5 text-gray-300" })
         ] }),
-        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" })
+        b.map((s, u) => {
+          const x = p + u;
+          return /* @__PURE__ */ l("span", { className: "flex items-center gap-0.5 min-w-0", children: [
+            d(s, x),
+            x < r.length - 1 && /* @__PURE__ */ e(T, { className: "w-3.5 h-3.5 text-gray-300 flex-shrink-0" })
           ] }, s.key);
         })
       ]
@@ -170,43 +170,43 @@ function Z({
   size: n = "md",
   icon: a,
   loading: o = !1,
-  disabled: u = !1,
-  type: l = "button",
+  disabled: h = !1,
+  type: i = "button",
   title: c,
   onClick: m,
   to: b,
-  href: x,
+  href: p,
   target: d,
   className: s = "",
-  children: g
+  children: u
 }) {
-  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
+  const x = `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}`, f = /* @__PURE__ */ l($, { children: [
+    o ? /* @__PURE__ */ e(P, { className: "w-4 h-4 animate-spin" }) : a,
+    u
   ] });
-  return b ? /* @__PURE__ */ e(v, { to: b, className: h, title: c, children: p }) : x ? /* @__PURE__ */ e(
+  return b ? /* @__PURE__ */ e(w, { to: b, className: x, title: c, children: f }) : p ? /* @__PURE__ */ e(
     "a",
     {
-      href: x,
+      href: p,
       target: d,
       rel: d === "_blank" ? "noopener noreferrer" : void 0,
-      className: h,
+      className: x,
       title: c,
-      children: p
+      children: f
     }
   ) : /* @__PURE__ */ e(
     "button",
     {
-      type: l,
+      type: i,
       onClick: m,
-      disabled: u || o,
+      disabled: h || o,
       title: c,
-      className: `${h} disabled:opacity-50 disabled:cursor-not-allowed`,
-      children: p
+      className: `${x} disabled:opacity-50 disabled:cursor-not-allowed`,
+      children: f
     }
   );
 }
-function L({
+function S({
   className: r = "",
   children: t
 }) {
@@ -224,21 +224,21 @@ function se({
   theme: n,
   count: a,
   actions: o,
-  bodyClassName: u = "p-5",
-  className: l = "",
+  bodyClassName: h = "p-5",
+  className: i = "",
   children: c
 }) {
-  return /* @__PURE__ */ i(L, { className: `overflow-hidden ${l}`, children: [
-    /* @__PURE__ */ i(
+  return /* @__PURE__ */ l(S, { className: `overflow-hidden ${i}`, children: [
+    /* @__PURE__ */ l(
       "div",
       {
         className: `px-4 py-3 flex items-center justify-between border-b border-black/5 ${n.header}`,
         children: [
-          /* @__PURE__ */ i("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__ */ i("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",
@@ -251,7 +251,7 @@ function se({
         ]
       }
     ),
-    /* @__PURE__ */ e("div", { className: u, children: c })
+    /* @__PURE__ */ e("div", { className: h, children: c })
   ] });
 }
 const q = {
@@ -265,15 +265,15 @@ function le({
   action: a,
   children: o
 }) {
-  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: [
+  const { accent: h, chip: i } = q[r];
+  return /* @__PURE__ */ e(S, { className: `border-l-4 ${h} 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 ${i}`,
             children: n
           }
         )
@@ -289,20 +289,20 @@ function ie({
   count: n,
   theme: a,
   actions: o,
-  footer: u,
-  children: l
+  footer: h,
+  children: i
 }) {
-  return /* @__PURE__ */ i(L, { className: "overflow-hidden flex flex-col", children: [
-    /* @__PURE__ */ i(
+  return /* @__PURE__ */ l(S, { 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__ */ i("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__ */ i("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",
@@ -315,35 +315,35 @@ function ie({
         ]
       }
     ),
-    /* @__PURE__ */ e("div", { className: "divide-y divide-gray-100", children: l }),
-    u
+    /* @__PURE__ */ e("div", { className: "divide-y divide-gray-100", children: i }),
+    h
   ] });
 }
-function de({
+function ce({
   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(v, { to: r, className: l, children: o }) : t ? /* @__PURE__ */ e(
+  const i = `flex items-center justify-between px-4 py-3 transition-colors ${n} ${!!(r || t) ? "cursor-pointer" : ""} ${a}`;
+  return r ? /* @__PURE__ */ e(w, { to: r, className: i, children: o }) : t ? /* @__PURE__ */ e(
     "button",
     {
       type: "button",
       onClick: t,
-      className: `w-full text-left ${l}`,
+      className: `w-full text-left ${i}`,
       children: o
     }
-  ) : /* @__PURE__ */ e("div", { className: l, children: o });
+  ) : /* @__PURE__ */ e("div", { className: i, children: o });
 }
-function ce({
+function de({
   to: r,
   count: t,
   noun: n = "items"
 }) {
-  return /* @__PURE__ */ i(
-    v,
+  return /* @__PURE__ */ l(
+    w,
     {
       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",
@@ -379,21 +379,21 @@ function ue({
   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__ */ i(N, { children: [
-    /* @__PURE__ */ e(K, { 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__ */ l($, { children: [
+    /* @__PURE__ */ e(U, { className: "w-4 h-4" }),
     /* @__PURE__ */ e("span", { children: n })
   ] });
-  return r ? /* @__PURE__ */ e(v, { to: r, className: a, children: o }) : /* @__PURE__ */ e("button", { type: "button", onClick: t, className: a, children: o });
+  return r ? /* @__PURE__ */ e(w, { to: r, className: a, children: o }) : /* @__PURE__ */ e("button", { type: "button", onClick: t, className: a, children: o });
 }
 function be({
   items: r,
   actions: t
 }) {
-  return /* @__PURE__ */ i("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(
-        v,
+        w,
         {
           to: n.to,
           state: n.state,
@@ -408,7 +408,7 @@ function be({
 }
 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__ */ i(N, { 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($, { children: [
       /* @__PURE__ */ e(
         "span",
         {
@@ -418,7 +418,7 @@ function me({ 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(v, { 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(w, { to: t.to, className: a, children: o }, t.to);
   }) });
 }
 function he({
@@ -427,8 +427,8 @@ function he({
   iconClassName: n = "text-gray-400",
   children: a
 }) {
-  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: [
+  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
     ] }),
@@ -442,42 +442,42 @@ const Q = {
   green: "text-green-600",
   orange: "text-orange-600",
   gray: "text-gray-500"
-}, A = "w-full flex items-start gap-3 px-3 py-2 text-left transition-colors hover:bg-gray-50 cursor-pointer";
+}, R = "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: l = "right",
+  size: h = "md",
+  align: i = "right",
   className: c = ""
 }) {
-  const [m, b] = E(!1), x = j(null);
-  return D(() => {
+  const [m, b] = N(!1), p = C(null);
+  return L(() => {
     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);
+    const d = (u) => {
+      var x;
+      (x = p.current) != null && x.contains(u.target) || b(!1);
+    }, s = (u) => {
+      u.key === "Escape" && b(!1);
     };
     return document.addEventListener("mousedown", d), document.addEventListener("keydown", s), () => {
       document.removeEventListener("mousedown", d), document.removeEventListener("keydown", s);
     };
-  }, [m]), /* @__PURE__ */ i("div", { className: `relative ${c}`, ref: x, children: [
-    /* @__PURE__ */ i(
+  }, [m]), /* @__PURE__ */ l("div", { className: `relative ${c}`, ref: p, children: [
+    /* @__PURE__ */ l(
       Z,
       {
         variant: a,
         tone: o,
-        size: u,
+        size: h,
         icon: n,
         onClick: () => b((d) => !d),
         children: [
           r,
           /* @__PURE__ */ e(
-            P,
+            B,
             {
               className: `w-4 h-4 transition-transform duration-200 ${m ? "rotate-180" : ""}`
             }
@@ -488,17 +488,17 @@ function pe({
     m && /* @__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`,
+        className: `absolute ${i === "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: [
+          const u = Q[d.tone ?? "gray"], x = /* @__PURE__ */ l($, { children: [
             d.icon && /* @__PURE__ */ e(
               "span",
               {
-                className: `flex items-center gap-1 mt-0.5 flex-shrink-0 ${g}`,
+                className: `flex items-center gap-1 mt-0.5 flex-shrink-0 ${u}`,
                 children: d.icon
               }
             ),
-            /* @__PURE__ */ i("span", { className: "min-w-0", children: [
+            /* @__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 })
             ] })
@@ -509,9 +509,9 @@ function pe({
               href: d.href,
               target: d.target,
               rel: d.target === "_blank" ? "noopener noreferrer" : void 0,
-              className: A,
+              className: R,
               onClick: () => b(!1),
-              children: h
+              children: x
             },
             s
           ) : /* @__PURE__ */ e(
@@ -520,11 +520,11 @@ function pe({
               type: "button",
               disabled: d.disabled,
               onClick: () => {
-                var p;
-                d.keepOpen || b(!1), (p = d.onClick) == null || p.call(d);
+                var f;
+                d.keepOpen || b(!1), (f = d.onClick) == null || f.call(d);
               },
-              className: `${A} disabled:opacity-50 disabled:cursor-not-allowed`,
-              children: h
+              className: `${R} disabled:opacity-50 disabled:cursor-not-allowed`,
+              children: x
             },
             s
           );
@@ -552,25 +552,25 @@ function fe({
   className: a = "w-full",
   slashToFocus: o = !1
 }) {
-  const u = j(null);
-  return D(() => {
+  const h = C(null);
+  return L(() => {
     if (!o) return;
-    function l(c) {
+    function i(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());
+      m.tagName === "INPUT" || m.tagName === "TEXTAREA" || m.tagName === "SELECT" || m.isContentEditable || (c.preventDefault(), (b = h.current) == null || b.focus());
     }
-    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" }),
+    return document.addEventListener("keydown", i), () => document.removeEventListener("keydown", i);
+  }, [o]), /* @__PURE__ */ l("div", { className: `relative ${a}`, children: [
+    /* @__PURE__ */ e(H, { 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,
+        ref: h,
         type: "text",
         value: r,
-        onChange: (l) => t(l.target.value),
+        onChange: (i) => t(i.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"
       }
@@ -584,20 +584,135 @@ function ye({
   children: n,
   id: a,
   className: o = "w-auto",
-  disabled: u = !1
+  disabled: h = !1
 }) {
   return /* @__PURE__ */ e(
     "select",
     {
       id: a,
       value: r,
-      onChange: (l) => t(l.target.value),
-      disabled: u,
+      onChange: (i) => t(i.target.value),
+      disabled: h,
       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
     }
   );
 }
+function ve({
+  value: r,
+  onChange: t,
+  options: n,
+  ariaLabel: a,
+  align: o = "left",
+  className: h = "",
+  menuClassName: i = "w-56"
+}) {
+  const [c, m] = N(!1), [b, p] = N(null), d = C(null), s = n.findIndex((g) => g.value === r), u = s >= 0 ? n[s] : void 0;
+  L(() => {
+    if (!c) return;
+    const g = (y) => {
+      var v;
+      (v = d.current) != null && v.contains(y.target) || m(!1);
+    };
+    return document.addEventListener("mousedown", g), () => document.removeEventListener("mousedown", g);
+  }, [c]);
+  function x(g) {
+    const y = n[g];
+    y && (t(y.value), m(!1));
+  }
+  function f(g) {
+    if (g.key === "Escape") {
+      m(!1);
+      return;
+    }
+    if (g.key === "ArrowDown" || g.key === "ArrowUp") {
+      if (g.preventDefault(), !c) {
+        m(!0), p(s >= 0 ? s : 0);
+        return;
+      }
+      p((y) => {
+        const k = (y ?? s) + (g.key === "ArrowDown" ? 1 : -1);
+        return Math.max(0, Math.min(k, n.length - 1));
+      });
+      return;
+    }
+    c && g.key === "Enter" && b != null && (g.preventDefault(), x(b));
+  }
+  return /* @__PURE__ */ l(
+    "div",
+    {
+      className: `relative ${h}`,
+      ref: d,
+      onKeyDown: f,
+      children: [
+        /* @__PURE__ */ l(
+          "button",
+          {
+            type: "button",
+            "aria-label": a,
+            "aria-haspopup": "listbox",
+            "aria-expanded": c,
+            onClick: () => {
+              m((g) => !g), p(s >= 0 ? s : 0);
+            },
+            className: "w-full inline-flex items-center justify-between gap-2 px-3 py-2 text-sm font-medium rounded-lg border border-gray-200 bg-gray-50 text-gray-700 shadow-sm transition-colors duration-100 cursor-pointer hover:bg-gray-100 hover:shadow",
+            children: [
+              /* @__PURE__ */ e("span", { className: "truncate", children: (u == null ? void 0 : u.label) ?? r }),
+              /* @__PURE__ */ e(
+                B,
+                {
+                  className: `w-4 h-4 flex-shrink-0 text-gray-400 transition-transform duration-200 ${c ? "rotate-180" : ""}`
+                }
+              )
+            ]
+          }
+        ),
+        c && /* @__PURE__ */ e(
+          "div",
+          {
+            role: "listbox",
+            "aria-label": a,
+            tabIndex: -1,
+            className: `absolute ${o === "right" ? "right-0" : "left-0"} mt-2 ${i} max-h-72 overflow-y-auto py-1 bg-white rounded-lg shadow-lg border border-gray-200 z-50 animate-dropdown-in`,
+            children: n.map((g, y) => {
+              const v = g.value === r;
+              return /* @__PURE__ */ l(
+                "button",
+                {
+                  type: "button",
+                  role: "option",
+                  "aria-selected": v,
+                  onMouseEnter: () => p(y),
+                  onClick: () => x(y),
+                  className: `w-full flex items-start gap-2 px-3 py-2 text-left transition-colors cursor-pointer ${b === y ? "bg-gray-50" : ""}`,
+                  children: [
+                    /* @__PURE__ */ e(
+                      I,
+                      {
+                        className: `w-4 h-4 mt-0.5 flex-shrink-0 text-blue-600 ${v ? "" : "invisible"}`
+                      }
+                    ),
+                    /* @__PURE__ */ l("span", { className: "min-w-0", children: [
+                      /* @__PURE__ */ e(
+                        "span",
+                        {
+                          className: `block text-sm ${v ? "font-medium text-gray-900" : "text-gray-700"}`,
+                          children: g.label
+                        }
+                      ),
+                      g.description && /* @__PURE__ */ e("span", { className: "block text-xs text-gray-500 mt-0.5", children: g.description })
+                    ] })
+                  ]
+                },
+                g.value
+              );
+            })
+          }
+        )
+      ]
+    }
+  );
+}
 const W = {
   neutral: { badge: "bg-gray-100", icon: "text-gray-400" },
   green: { badge: "bg-green-100", icon: "text-green-600" },
@@ -606,14 +721,14 @@ const W = {
   red: { badge: "bg-red-100", icon: "text-red-600" },
   purple: { badge: "bg-purple-100", icon: "text-purple-600" }
 };
-function ve({
+function we({
   icon: r,
   label: t,
   value: n,
   tone: a = "neutral"
 }) {
   const o = W[a];
-  return /* @__PURE__ */ i("div", { className: "flex items-center gap-4", children: [
+  return /* @__PURE__ */ l("div", { className: "flex items-center gap-4", children: [
     /* @__PURE__ */ e(
       "div",
       {
@@ -621,117 +736,117 @@ function ve({
         children: /* @__PURE__ */ e(r, { className: `w-6 h-6 ${o.icon}` })
       }
     ),
-    /* @__PURE__ */ i("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 O = {
+const _ = {
   ok: "bg-green-500",
   down: "bg-red-500",
   unknown: "bg-gray-300"
-}, R = (r) => `${(r * 100).toFixed(4)}%`;
+}, j = (r) => `${(r * 100).toFixed(4)}%`;
 function Ne({
   from: r,
   to: t,
   spans: n,
   coverageFrom: a,
   buckets: o = 48,
-  height: u = "1.75rem",
-  renderTooltip: l
+  height: h = "1.75rem",
+  renderTooltip: i
 }) {
-  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 [c, m] = N(null), b = r.getTime(), p = t.getTime() - b;
+  if (!(p > 0)) return null;
+  const d = a == null ? void 0 : a.getTime(), s = p / o, u = Array.from({ length: o }, (f, g) => {
+    const y = b + g * s, v = y + s, k = d !== void 0 ? Math.max(0, Math.min(v, d) - y) : 0;
+    let E = 0;
+    for (const D of n) {
+      const A = Math.max(D.start.getTime(), y), O = Math.min(D.end.getTime(), v);
+      O > A && (E += O - A);
     }
-    const B = Math.max(1, s - M);
+    const z = Math.max(1, s - k);
     return {
       start: new Date(y),
-      end: new Date(w),
-      downMs: $,
-      unknownMs: M,
-      ratio: 1 - $ / B
+      end: new Date(v),
+      downMs: E,
+      unknownMs: k,
+      ratio: 1 - E / z
     };
   });
-  return /* @__PURE__ */ i("div", { className: "relative", children: [
-    c !== null && l && /* @__PURE__ */ e(
+  return /* @__PURE__ */ l("div", { className: "relative", children: [
+    c !== null && i && /* @__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: ((p) => {
-          const f = (p + 0.5) / o;
-          return f < 0.15 ? { left: 0 } : f > 0.85 ? { right: 0 } : { left: `${f * 100}%`, transform: "translateX(-50%)" };
+        style: ((f) => {
+          const g = (f + 0.5) / o;
+          return g < 0.15 ? { left: 0 } : g > 0.85 ? { right: 0 } : { left: `${g * 100}%`, transform: "translateX(-50%)" };
         })(c),
-        children: l(g[c])
+        children: i(u[c])
       }
     ),
     /* @__PURE__ */ e(
       "div",
       {
         className: "flex items-stretch gap-[2px]",
-        style: { height: u },
+        style: { height: h },
         onMouseLeave: () => m(null),
-        children: g.map((p, f) => /* @__PURE__ */ i(
+        children: u.map((f, g) => /* @__PURE__ */ l(
           "div",
           {
-            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" : ""}`,
+            onMouseEnter: () => m(g),
+            className: `relative z-10 min-w-[2px] flex-1 cursor-pointer overflow-hidden rounded-[2px] bg-emerald-500 transition-opacity ${c === g ? "opacity-60" : ""}`,
             children: [
-              p.unknownMs > 0 && /* @__PURE__ */ e(
+              f.unknownMs > 0 && /* @__PURE__ */ e(
                 "div",
                 {
                   className: "absolute inset-y-0 left-0 bg-gray-300",
-                  style: { width: `${p.unknownMs / s * 100}%` }
+                  style: { width: `${f.unknownMs / s * 100}%` }
                 }
               ),
-              p.downMs > 0 && /* @__PURE__ */ e(
+              f.downMs > 0 && /* @__PURE__ */ e(
                 "div",
                 {
                   className: "absolute inset-x-0 bottom-0 bg-red-500",
                   style: {
-                    height: `max(3px, ${p.downMs / s * 100}%)`
+                    height: `max(3px, ${f.downMs / s * 100}%)`
                   }
                 }
               )
             ]
           },
-          p.start.getTime()
+          f.start.getTime()
         ))
       }
     )
   ] });
 }
-function we({
+function $e({
   from: r,
   to: t,
   lanes: n,
   baseline: a = "ok",
   ticks: o = 5,
-  formatTick: u = (b) => b.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }),
-  labelWidth: l = "8rem",
+  formatTick: h = (b) => b.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }),
+  labelWidth: i = "8rem",
   rowHeight: c = "1.25rem",
   emptyLabel: m = "No data"
 }) {
-  const b = r.getTime(), x = t.getTime() - b;
-  if (!(x > 0) || n.length === 0)
+  const b = r.getTime(), p = t.getTime() - b;
+  if (!(p > 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) },
-    (s, g) => new Date(b + x * g / (Math.max(2, o) - 1))
+    (s, u) => new Date(b + p * u / (Math.max(2, o) - 1))
   );
-  return /* @__PURE__ */ i("div", { className: "space-y-1.5", children: [
-    n.map((s) => /* @__PURE__ */ i("div", { className: "flex items-center gap-3", children: [
+  return /* @__PURE__ */ l("div", { className: "space-y-1.5", children: [
+    n.map((s) => /* @__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 },
+          style: { width: i },
           title: s.name,
           children: s.label ?? s.name
         }
@@ -739,23 +854,23 @@ function we({
       /* @__PURE__ */ e(
         "div",
         {
-          className: `relative flex-1 overflow-hidden rounded-sm ${O[a]}`,
+          className: `relative flex-1 overflow-hidden rounded-sm ${_[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;
+          children: s.spans.map((u) => {
+            const x = Math.max(u.start.getTime(), b), f = Math.min(u.end.getTime(), b + p);
+            if (f <= x) return null;
+            const g = (x - b) / p, y = (f - x) / p;
             return /* @__PURE__ */ e(
               "div",
               {
-                className: `absolute inset-y-0 ${O[g.tone]}`,
+                className: `absolute inset-y-0 ${_[u.tone]}`,
                 style: {
-                  left: R(f),
-                  width: `max(2px, ${R(y)})`
+                  left: j(g),
+                  width: `max(2px, ${j(y)})`
                 },
-                title: g.label
+                title: u.label
               },
-              `${g.start.getTime()}-${g.end.getTime()}`
+              `${u.start.getTime()}-${u.end.getTime()}`
             );
           })
         }
@@ -767,16 +882,16 @@ function we({
       {
         className: "flex justify-between pt-1 text-[11px] tabular-nums text-gray-400",
         style: {
-          marginLeft: l,
+          marginLeft: i,
           paddingLeft: "0.75rem",
           marginRight: n.some((s) => s.trailing !== void 0) ? "4rem" : void 0
         },
-        children: d.map((s) => /* @__PURE__ */ e("span", { children: u(s) }, s.getTime()))
+        children: d.map((s) => /* @__PURE__ */ e("span", { children: h(s) }, s.getTime()))
       }
     )
   ] });
 }
-const $e = {
+const ke = {
   blue: {
     header: "bg-blue-50 text-blue-800",
     hover: "hover:bg-blue-50",
@@ -818,7 +933,7 @@ const $e = {
     badge: "bg-gray-200 text-gray-700"
   }
 };
-function ke({
+function Ee({
   toast: r,
   onClose: t
 }) {
@@ -826,8 +941,8 @@ function ke({
     "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__ */ 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" }),
+      children: /* @__PURE__ */ l("div", { className: "flex items-center space-x-2", children: [
+        r.type === "success" ? /* @__PURE__ */ e(I, { className: "w-5 h-5 text-green-600" }) : /* @__PURE__ */ e(M, { className: "w-5 h-5 text-red-600" }),
         /* @__PURE__ */ e("span", { className: "text-sm font-medium", children: r.message }),
         /* @__PURE__ */ e(
           "button",
@@ -835,7 +950,7 @@ function ke({
             type: "button",
             onClick: t,
             className: "ml-2 text-gray-400 hover:text-gray-600 cursor-pointer",
-            children: /* @__PURE__ */ e(T, { className: "w-4 h-4" })
+            children: /* @__PURE__ */ e(M, { className: "w-4 h-4" })
           }
         )
       ] })
@@ -844,28 +959,29 @@ function ke({
 }
 export {
   le as AlertBanner,
-  H as BADGE_COLORS,
+  X as BADGE_COLORS,
   ue as BackLink,
   ne as Badge,
   oe as Breadcrumbs,
   Z as Button,
-  L as Card,
+  S as Card,
   ge as CountryFlag,
   pe as DropdownMenu,
   he as InfoRow,
   ae as LabelChip,
-  de as ListRow,
+  ce as ListRow,
   xe as PageContainer,
   se as Panel,
-  $e as SECTION_THEMES,
+  ke as SECTION_THEMES,
   fe as SearchInput,
   ie as SectionCard,
   ye as Select,
+  ve as SelectMenu,
   me as SideNav,
-  ve as StatCard,
-  we as StateTimeline,
+  we as StatCard,
+  $e as StateTimeline,
   be as TabNav,
-  ke as Toast,
+  Ee as Toast,
   Ne as UptimeBars,
-  ce as ViewAllFooter
+  de as ViewAllFooter
 };

package/dist/select.d.ts

@@ -10,3 +10,25 @@ export declare function Select({ value, onChange, children, id, className, disab
     className?: string;
     disabled?: boolean;
 }): import("react/jsx-runtime").JSX.Element;
+export interface SelectMenuOption {
+    value: string;
+    label: string;
+    /** Secondary line under the label — for the detail a tooltip would carry. */
+    description?: ReactNode;
+}
+/**
+ * Value picker with `DropdownMenu`'s popover chrome. Use it instead of `Select`
+ * where a native `<select>`'s platform styling sits next to design-system
+ * buttons and inputs; the trigger shows the selected option's label. Closes on
+ * outside click, Escape, or selection; Arrow keys move the highlight.
+ */
+export declare function SelectMenu({ value, onChange, options, ariaLabel, align, className, menuClassName, }: {
+    value: string;
+    onChange: (value: string) => void;
+    options: SelectMenuOption[];
+    ariaLabel: string;
+    /** Which edge of the trigger the menu is anchored to. */
+    align?: "left" | "right";
+    className?: string;
+    menuClassName?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/package.json

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