@teton/smith-ui 0.2.185 → 0.2.187

package/dist/index.d.ts

@@ -7,6 +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 { 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

@@ -31,7 +31,7 @@ function ee({
   onClick: n,
   onRemove: a,
   active: o = !1,
-  title: m
+  title: u
 }) {
   const s = /* @__PURE__ */ l(v, { children: [
     /* @__PURE__ */ e(
@@ -56,7 +56,7 @@ function ee({
       {
         type: "button",
         onClick: a,
-        title: m,
+        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" })
@@ -67,7 +67,7 @@ function ee({
     {
       type: "button",
       onClick: n,
-      title: m,
+      title: u,
       className: `${b} cursor-pointer transition-colors ${o ? "" : "hover:border-gray-300"}`,
       children: s
     }
@@ -79,7 +79,7 @@ function re({
   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(
+  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(
     "span",
     {
       "aria-current": "page",
@@ -112,7 +112,7 @@ function re({
             "button",
             {
               type: "button",
-              onClick: () => m(!0),
+              onClick: () => u(!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" })
@@ -120,7 +120,7 @@ function re({
           ),
           /* @__PURE__ */ e(w, { className: "w-3.5 h-3.5 text-gray-300" })
         ] }),
-        u.map((i, c) => {
+        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),
@@ -170,11 +170,11 @@ function F({
   size: n = "md",
   icon: a,
   loading: o = !1,
-  disabled: m = !1,
+  disabled: u = !1,
   type: s = "button",
   title: b,
   onClick: p,
-  to: u,
+  to: m,
   href: h,
   target: d,
   className: i = "",
@@ -184,7 +184,7 @@ function F({
     o ? /* @__PURE__ */ e(j, { className: "w-4 h-4 animate-spin" }) : a,
     c
   ] });
-  return u ? /* @__PURE__ */ e(f, { to: u, className: g, title: b, children: x }) : h ? /* @__PURE__ */ e(
+  return m ? /* @__PURE__ */ e(f, { to: m, className: g, title: b, children: x }) : h ? /* @__PURE__ */ e(
     "a",
     {
       href: h,
@@ -199,7 +199,7 @@ function F({
     {
       type: s,
       onClick: p,
-      disabled: m || o,
+      disabled: u || o,
       title: b,
       className: `${g} disabled:opacity-50 disabled:cursor-not-allowed`,
       children: x
@@ -224,7 +224,7 @@ function te({
   theme: n,
   count: a,
   actions: o,
-  bodyClassName: m = "p-5",
+  bodyClassName: u = "p-5",
   className: s = "",
   children: b
 }) {
@@ -251,7 +251,7 @@ function te({
         ]
       }
     ),
-    /* @__PURE__ */ e("div", { className: m, children: b })
+    /* @__PURE__ */ e("div", { className: u, children: b })
   ] });
 }
 const H = {
@@ -265,8 +265,8 @@ function ne({
   action: a,
   children: o
 }) {
-  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: [
+  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: [
         /* @__PURE__ */ e("h4", { className: "text-base font-semibold text-gray-900", children: t }),
@@ -289,7 +289,7 @@ function ae({
   count: n,
   theme: a,
   actions: o,
-  footer: m,
+  footer: u,
   children: s
 }) {
   return /* @__PURE__ */ l(T, { className: "overflow-hidden flex flex-col", children: [
@@ -316,7 +316,7 @@ function ae({
       }
     ),
     /* @__PURE__ */ e("div", { className: "divide-y divide-gray-100", children: s }),
-    m
+    u
   ] });
 }
 function oe({
@@ -443,24 +443,24 @@ const Y = {
   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 be({
+function ue({
   label: r,
   items: t,
   icon: n,
   variant: a = "soft",
   tone: o = "gray",
-  size: m = "md",
+  size: u = "md",
   align: s = "right",
   className: b = ""
 }) {
-  const [p, u] = k(!1), h = A(null);
+  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) || u(!1);
+      (g = h.current) != null && g.contains(c.target) || m(!1);
     }, i = (c) => {
-      c.key === "Escape" && u(!1);
+      c.key === "Escape" && m(!1);
     };
     return document.addEventListener("mousedown", d), document.addEventListener("keydown", i), () => {
       document.removeEventListener("mousedown", d), document.removeEventListener("keydown", i);
@@ -471,9 +471,9 @@ function be({
       {
         variant: a,
         tone: o,
-        size: m,
+        size: u,
         icon: n,
-        onClick: () => u((d) => !d),
+        onClick: () => m((d) => !d),
         children: [
           r,
           /* @__PURE__ */ e(
@@ -510,7 +510,7 @@ function be({
               target: d.target,
               rel: d.target === "_blank" ? "noopener noreferrer" : void 0,
               className: S,
-              onClick: () => u(!1),
+              onClick: () => m(!1),
               children: g
             },
             i
@@ -521,7 +521,7 @@ function be({
               disabled: d.disabled,
               onClick: () => {
                 var x;
-                d.keepOpen || u(!1), (x = d.onClick) == null || x.call(d);
+                d.keepOpen || m(!1), (x = d.onClick) == null || x.call(d);
               },
               className: `${S} disabled:opacity-50 disabled:cursor-not-allowed`,
               children: g
@@ -533,7 +533,7 @@ function be({
     )
   ] });
 }
-function ue({
+function be({
   className: r = "space-y-6",
   children: t
 }) {
@@ -552,14 +552,14 @@ function me({
   className: a = "w-full",
   slashToFocus: o = !1
 }) {
-  const m = A(null);
+  const u = A(null);
   return O(() => {
     if (!o) return;
     function s(b) {
-      var u;
+      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(), (u = m.current) == null || u.focus());
+      p.tagName === "INPUT" || p.tagName === "TEXTAREA" || p.tagName === "SELECT" || p.isContentEditable || (b.preventDefault(), (m = u.current) == null || m.focus());
     }
     return document.addEventListener("keydown", s), () => document.removeEventListener("keydown", s);
   }, [o]), /* @__PURE__ */ l("div", { className: `relative ${a}`, children: [
@@ -567,7 +567,7 @@ function me({
     /* @__PURE__ */ e(
       "input",
       {
-        ref: m,
+        ref: u,
         type: "text",
         value: r,
         onChange: (s) => t(s.target.value),
@@ -578,6 +578,26 @@ 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({
+  value: r,
+  onChange: t,
+  children: n,
+  id: a,
+  className: o = "w-auto",
+  disabled: u = !1
+}) {
+  return /* @__PURE__ */ e(
+    "select",
+    {
+      id: a,
+      value: r,
+      onChange: (s) => t(s.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 = {
   neutral: { badge: "bg-gray-100", icon: "text-gray-400" },
   green: { badge: "bg-green-100", icon: "text-green-600" },
@@ -586,7 +606,7 @@ const G = {
   red: { badge: "bg-red-100", icon: "text-red-600" },
   purple: { badge: "bg-purple-100", icon: "text-purple-600" }
 };
-function pe({
+function he({
   icon: r,
   label: t,
   value: n,
@@ -612,17 +632,17 @@ const M = {
   down: "bg-red-500",
   unknown: "bg-gray-300"
 }, _ = (r) => `${(r * 100).toFixed(4)}%`;
-function he({
+function xe({
   from: r,
   to: t,
   spans: n,
   buckets: a = 48,
   height: o = "1.75rem",
-  renderTooltip: m
+  renderTooltip: u
 }) {
-  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 [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) {
@@ -637,7 +657,7 @@ function he({
     };
   });
   return /* @__PURE__ */ l("div", { className: "relative", children: [
-    s !== null && m && /* @__PURE__ */ e(
+    s !== null && u && /* @__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",
@@ -645,7 +665,7 @@ function he({
           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])
+        children: u(d[s])
       }
     ),
     /* @__PURE__ */ e(
@@ -673,23 +693,23 @@ function he({
     )
   ] });
 }
-function xe({
+function fe({
   from: r,
   to: t,
   lanes: n,
   baseline: a = "ok",
   ticks: o = 5,
-  formatTick: m = (u) => u.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }),
+  formatTick: u = (m) => m.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }),
   labelWidth: s = "8rem",
   rowHeight: b = "1.25rem",
   emptyLabel: p = "No data"
 }) {
-  const u = r.getTime(), h = t.getTime() - u;
+  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 d = Array.from(
     { length: Math.max(2, o) },
-    (i, c) => new Date(u + h * c / (Math.max(2, o) - 1))
+    (i, c) => new Date(m + h * c / (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: [
@@ -708,9 +728,9 @@ function xe({
           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);
+            const g = Math.max(c.start.getTime(), m), x = Math.min(c.end.getTime(), m + h);
             if (x <= g) return null;
-            const N = (g - u) / h, y = (x - g) / h;
+            const N = (g - m) / h, y = (x - g) / h;
             return /* @__PURE__ */ e(
               "div",
               {
@@ -737,12 +757,12 @@ function xe({
           paddingLeft: "0.75rem",
           marginRight: n.some((i) => i.trailing !== void 0) ? "4rem" : void 0
         },
-        children: d.map((i) => /* @__PURE__ */ e("span", { children: m(i) }, i.getTime()))
+        children: d.map((i) => /* @__PURE__ */ e("span", { children: u(i) }, i.getTime()))
       }
     )
   ] });
 }
-const fe = {
+const ye = {
   blue: {
     header: "bg-blue-50 text-blue-800",
     hover: "hover:bg-blue-50",
@@ -784,7 +804,7 @@ const fe = {
     badge: "bg-gray-200 text-gray-700"
   }
 };
-function ye({
+function ve({
   toast: r,
   onClose: t
 }) {
@@ -817,20 +837,21 @@ export {
   F as Button,
   T as Card,
   le as CountryFlag,
-  be as DropdownMenu,
+  ue as DropdownMenu,
   ge as InfoRow,
   ee as LabelChip,
   oe as ListRow,
-  ue as PageContainer,
+  be as PageContainer,
   te as Panel,
-  fe as SECTION_THEMES,
+  ye as SECTION_THEMES,
   me as SearchInput,
   ae as SectionCard,
+  pe as Select,
   ce as SideNav,
-  pe as StatCard,
-  xe as StateTimeline,
+  he as StatCard,
+  fe as StateTimeline,
   de as TabNav,
-  ye as Toast,
-  he as UptimeBars,
+  ve as Toast,
+  xe as UptimeBars,
   se as ViewAllFooter
 };

package/dist/select.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+/** Native single-select styled to match the form fields elsewhere. Children are
+ *  the `<option>` / `<optgroup>` elements. Size via `className` (defaults to
+ *  auto width so it can sit inline next to a label). */
+export declare function Select({ value, onChange, children, id, className, disabled, }: {
+    value: string;
+    onChange: (value: string) => void;
+    children: ReactNode;
+    id?: string;
+    className?: string;
+    disabled?: boolean;
+}): import("react/jsx-runtime").JSX.Element;

package/package.json

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