@teton/smith-ui 0.2.172

package/README.md

@@ -0,0 +1,37 @@
+# @teton/smith-ui
+
+Design-system primitives used by the [Smith](https://github.com/teton-ai/smith)
+dashboard: buttons, cards, badges, stat cards, search input, nav, toasts and the
+shared theme tokens.
+
+## Install
+
+```bash
+npm install @teton/smith-ui
+```
+
+Peer dependencies (provide these in your app): `react`, `react-dom`,
+`react-router`, `lucide-react`. The components are styled with **Tailwind CSS v4**.
+
+## Usage
+
+```tsx
+import { Button, Card, StatCard } from "@teton/smith-ui";
+```
+
+### Tailwind setup
+
+The components render plain Tailwind utility classes. For Tailwind to emit those
+classes, point its source scanning at this package from your main CSS file:
+
+```css
+@import "tailwindcss";
+@source "../node_modules/@teton/smith-ui/dist";
+```
+
+No separate stylesheet import is required — the primitives rely only on standard
+Tailwind utilities.
+
+## License
+
+Apache-2.0

package/dist/badge.d.ts

@@ -0,0 +1,25 @@
+import { MouseEvent, ReactNode } from 'react';
+export type BadgeVariant = "gray" | "blue" | "green" | "yellow" | "red" | "purple" | "orange";
+/** Color classes per variant — exported so non-badge elements (icon tiles,
+ *  etc.) can reuse the same palette. */
+export declare const BADGE_COLORS: Record<BadgeVariant, string>;
+/** Small status/label pill. */
+export declare function Badge({ variant, pill, className, children, }: {
+    variant?: BadgeVariant;
+    /** Fully rounded (rounded-full) vs slightly rounded (rounded). */
+    pill?: boolean;
+    className?: string;
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+/** Two-tone key/value chip for device labels (key in gray, value in mono).
+ *  Renders just the key when no `value` is given. Pass `onClick` to make the
+ *  whole chip a filter toggle; pass `onRemove` to add a trailing × button
+ *  (e.g. for an applied filter). `active` highlights it as the applied filter. */
+export declare function LabelChip({ name, value, onClick, onRemove, active, title, }: {
+    name: string;
+    value?: string;
+    onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
+    onRemove?: (e: MouseEvent<HTMLButtonElement>) => void;
+    active?: boolean;
+    title?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/button.d.ts

@@ -0,0 +1,27 @@
+import { ReactNode } from 'react';
+export type ButtonTone = "blue" | "purple" | "red" | "green" | "orange" | "gray";
+export type ButtonVariant = "solid" | "soft" | "ghost";
+export type ButtonSize = "sm" | "md";
+/**
+ * Design-system button. Renders a `<button>`, a react-router `<Link>` (when
+ * `to` is set), or an external `<a>` (when `href` is set).
+ *
+ * `variant="soft"` is the freshened, tinted look used for page actions;
+ * `solid` is for primary CTAs; `ghost` for low-emphasis links.
+ */
+export declare function Button({ variant, tone, size, icon, loading, disabled, type, title, onClick, to, href, target, className, children, }: {
+    variant?: ButtonVariant;
+    tone?: ButtonTone;
+    size?: ButtonSize;
+    icon?: ReactNode;
+    loading?: boolean;
+    disabled?: boolean;
+    type?: "button" | "submit";
+    title?: string;
+    onClick?: () => void;
+    to?: string;
+    href?: string;
+    target?: string;
+    className?: string;
+    children?: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/card.d.ts

@@ -0,0 +1,55 @@
+import { ReactNode } from 'react';
+import { IconComponent, SectionTheme } from './theme';
+/**
+ * Base card surface — the standard white panel used across the app.
+ * Compose with `className` for layout (e.g. `overflow-hidden flex flex-col`).
+ */
+export declare function Card({ className, children, }: {
+    className?: string;
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * A detail-page section: same colored header bar as `SectionCard`, but with a
+ * padded freeform body (`bodyClassName`) instead of a divided list — for
+ * panels like System Information, Network, Location.
+ */
+export declare function Panel({ icon: Icon, title, theme, count, actions, bodyClassName, className, children, }: {
+    icon?: IconComponent;
+    title: ReactNode;
+    theme: SectionTheme;
+    count?: number;
+    actions?: ReactNode;
+    bodyClassName?: string;
+    className?: string;
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * Card with a colored, titled header bar — for grouped lists.
+ * Right side shows a count pill (when `count` is set) and/or `actions`.
+ */
+export declare function SectionCard({ icon: Icon, title, count, theme, actions, footer, children, }: {
+    icon?: IconComponent;
+    title: ReactNode;
+    count?: number;
+    theme: SectionTheme;
+    actions?: ReactNode;
+    footer?: ReactNode;
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * A single clickable list row (Link or button), with the standard
+ * hover + transition. Left/right content is composed by the caller.
+ */
+export declare function ListRow({ to, onClick, hover, className, children, }: {
+    to?: string;
+    onClick?: () => void;
+    hover?: string;
+    className?: string;
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+/** "View all N items →" footer link for truncated lists. */
+export declare function ViewAllFooter({ to, count, noun, }: {
+    to: string;
+    count: number;
+    noun?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/country-flag.d.ts

@@ -0,0 +1,5 @@
+/** Small country flag tile. Renders nothing if no country code is given. */
+export declare function CountryFlag({ countryCode, country, }: {
+    countryCode?: string | null;
+    country?: string | null;
+}): import("react/jsx-runtime").JSX.Element | null;

package/dist/detail.d.ts

@@ -0,0 +1,41 @@
+import { ReactNode } from 'react';
+import { IconComponent } from './theme';
+/** "← Back" navigation link for detail pages. Pass `to` for a route or
+ *  `onClick` (e.g. `() => navigate(-1)`) for history-based back. */
+export declare function BackLink({ to, onClick, children, }: {
+    to?: string;
+    onClick?: () => void;
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export interface TabItem {
+    label: string;
+    to?: string;
+    active?: boolean;
+    state?: unknown;
+}
+/** Underlined tab bar used across the device detail subpages. The active tab
+ *  renders as static text; the rest are router links. */
+export declare function TabNav({ items }: {
+    items: TabItem[];
+}): import("react/jsx-runtime").JSX.Element;
+export interface SideNavItem {
+    label: string;
+    to: string;
+    icon?: IconComponent;
+    active?: boolean;
+}
+/** Vertical settings sub-nav: a stacked list of links with an icon, label and
+ *  an animated left accent bar on the active item — matching the main sidebar's
+ *  look (blue active state, icon lift on hover). The active item renders as
+ *  static text; the rest are router links. */
+export declare function SideNav({ items }: {
+    items: SideNavItem[];
+}): import("react/jsx-runtime").JSX.Element;
+/** A label/value row for detail panels (`label` on the left, `children` on
+ *  the right). Optional leading `icon` next to the label. */
+export declare function InfoRow({ label, icon: Icon, iconClassName, children, }: {
+    label: ReactNode;
+    icon?: IconComponent;
+    iconClassName?: string;
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/index.d.ts

@@ -0,0 +1,10 @@
+export { BADGE_COLORS, Badge, type BadgeVariant, LabelChip } from './badge';
+export { Button, type ButtonSize, type ButtonTone, type ButtonVariant, } from './button';
+export { Card, ListRow, Panel, SectionCard, ViewAllFooter } from './card';
+export { CountryFlag } from './country-flag';
+export { BackLink, InfoRow, SideNav, type SideNavItem, type TabItem, TabNav, } from './detail';
+export { PageContainer } from './page-container';
+export { SearchInput } from './search-input';
+export { StatCard } from './stat-card';
+export { type IconComponent, SECTION_THEMES, type SectionTheme, type SectionThemeName, } from './theme';
+export { Toast, type ToastState } from './toast';

package/dist/index.js

@@ -0,0 +1,505 @@
+import { jsx as r, jsxs as l, Fragment as u } from "react/jsx-runtime";
+import { X as h, Loader2 as w, ArrowLeft as $, Search as E, Check as S } from "lucide-react";
+import { Link as b } from "react-router";
+import { useRef as k, useEffect as L } from "react";
+const T = {
+  gray: "bg-gray-100 text-gray-700",
+  blue: "bg-blue-100 text-blue-700",
+  green: "bg-green-100 text-green-700",
+  yellow: "bg-yellow-100 text-yellow-700",
+  red: "bg-red-100 text-red-700",
+  purple: "bg-purple-100 text-purple-700",
+  orange: "bg-orange-100 text-orange-700"
+};
+function D({
+  variant: t = "gray",
+  pill: e = !1,
+  className: n = "",
+  children: o
+}) {
+  return /* @__PURE__ */ r(
+    "span",
+    {
+      className: `px-1.5 py-0.5 text-xs font-medium ${e ? "rounded-full" : "rounded"} ${T[t]} ${n}`,
+      children: o
+    }
+  );
+}
+function P({
+  name: t,
+  value: e,
+  onClick: n,
+  onRemove: o,
+  active: a = !1,
+  title: g
+}) {
+  const s = /* @__PURE__ */ l(u, { children: [
+    /* @__PURE__ */ r(
+      "span",
+      {
+        className: `px-2 py-1 font-medium ${a ? "text-blue-700 bg-blue-100" : "text-gray-500 bg-gray-50"}`,
+        children: t
+      }
+    ),
+    e !== void 0 && e !== "" && /* @__PURE__ */ r(
+      "span",
+      {
+        className: `px-2 py-1 font-mono border-l ${a ? "text-blue-700 bg-blue-100 border-blue-200" : "text-gray-900 bg-white border-gray-200"}`,
+        children: e
+      }
+    )
+  ] }), d = `inline-flex items-center overflow-hidden rounded-md border text-xs ${a ? "border-blue-300" : "border-gray-200"}`;
+  return o ? /* @__PURE__ */ l("span", { className: d, children: [
+    s,
+    /* @__PURE__ */ r(
+      "button",
+      {
+        type: "button",
+        onClick: o,
+        title: g,
+        "aria-label": `Remove ${e !== void 0 ? `${t}=${e}` : t}`,
+        className: `flex items-center px-1.5 py-1 border-l cursor-pointer transition-colors ${a ? "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__ */ r(h, { className: "w-3 h-3" })
+      }
+    )
+  ] }) : n ? /* @__PURE__ */ r(
+    "button",
+    {
+      type: "button",
+      onClick: n,
+      title: g,
+      className: `${d} cursor-pointer transition-colors ${a ? "" : "hover:border-gray-300"}`,
+      children: s
+    }
+  ) : /* @__PURE__ */ r("span", { className: d, children: s });
+}
+const C = {
+  solid: {
+    blue: "bg-blue-600 text-white hover:bg-blue-700",
+    purple: "bg-purple-600 text-white hover:bg-purple-700",
+    red: "bg-red-600 text-white hover:bg-red-700",
+    green: "bg-green-600 text-white hover:bg-green-700",
+    orange: "bg-orange-600 text-white hover:bg-orange-700",
+    gray: "bg-gray-700 text-white hover:bg-gray-800"
+  },
+  soft: {
+    blue: "bg-blue-50 text-blue-700 border border-blue-200 hover:bg-blue-100",
+    purple: "bg-purple-50 text-purple-700 border border-purple-200 hover:bg-purple-100",
+    red: "bg-red-50 text-red-700 border border-red-200 hover:bg-red-100",
+    green: "bg-green-50 text-green-700 border border-green-200 hover:bg-green-100",
+    orange: "bg-orange-50 text-orange-700 border border-orange-200 hover:bg-orange-100",
+    gray: "bg-gray-50 text-gray-700 border border-gray-200 hover:bg-gray-100"
+  },
+  ghost: {
+    blue: "text-blue-600 hover:bg-blue-50",
+    purple: "text-purple-600 hover:bg-purple-50",
+    red: "text-red-600 hover:bg-red-50",
+    green: "text-green-600 hover:bg-green-50",
+    orange: "text-orange-600 hover:bg-orange-50",
+    gray: "text-gray-600 hover:bg-gray-100"
+  }
+}, j = {
+  sm: "px-2.5 py-1.5 text-xs gap-1.5",
+  md: "px-3 py-2 text-sm gap-2"
+}, A = {
+  solid: "shadow-sm hover:shadow-md",
+  soft: "shadow-sm hover:shadow",
+  ghost: ""
+};
+function U({
+  variant: t = "soft",
+  tone: e = "blue",
+  size: n = "md",
+  icon: o,
+  loading: a = !1,
+  disabled: g = !1,
+  type: s = "button",
+  title: d,
+  onClick: i,
+  to: c,
+  href: m,
+  target: f,
+  className: v = "",
+  children: N
+}) {
+  const p = `inline-flex items-center justify-center font-medium rounded-lg transition-colors duration-100 cursor-pointer active:scale-[.98] ${j[n]} ${A[t]} ${C[t][e]} ${v}`, x = /* @__PURE__ */ l(u, { children: [
+    a ? /* @__PURE__ */ r(w, { className: "w-4 h-4 animate-spin" }) : o,
+    N
+  ] });
+  return c ? /* @__PURE__ */ r(b, { to: c, className: p, title: d, children: x }) : m ? /* @__PURE__ */ r(
+    "a",
+    {
+      href: m,
+      target: f,
+      rel: f === "_blank" ? "noopener noreferrer" : void 0,
+      className: p,
+      title: d,
+      children: x
+    }
+  ) : /* @__PURE__ */ r(
+    "button",
+    {
+      type: s,
+      onClick: i,
+      disabled: g || a,
+      title: d,
+      className: `${p} disabled:opacity-50 disabled:cursor-not-allowed`,
+      children: x
+    }
+  );
+}
+function y({
+  className: t = "",
+  children: e
+}) {
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      className: `bg-white rounded-xl border border-gray-200/80 shadow-sm ${t}`,
+      children: e
+    }
+  );
+}
+function V({
+  icon: t,
+  title: e,
+  theme: n,
+  count: o,
+  actions: a,
+  bodyClassName: g = "p-5",
+  className: s = "",
+  children: d
+}) {
+  return /* @__PURE__ */ l(y, { className: `overflow-hidden ${s}`, children: [
+    /* @__PURE__ */ l(
+      "div",
+      {
+        className: `px-4 py-3 flex items-center justify-between border-b border-black/5 ${n.header}`,
+        children: [
+          /* @__PURE__ */ l("h4", { className: "text-sm font-semibold flex items-center", children: [
+            t && /* @__PURE__ */ r(t, { className: "w-4 h-4 mr-2" }),
+            e
+          ] }),
+          (a || o !== void 0) && /* @__PURE__ */ l("div", { className: "flex items-center gap-2", children: [
+            a,
+            o !== void 0 && /* @__PURE__ */ r(
+              "span",
+              {
+                className: `text-xs font-semibold px-2 py-0.5 rounded-full ${n.badge}`,
+                children: o
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ r("div", { className: g, children: d })
+  ] });
+}
+function X({
+  icon: t,
+  title: e,
+  count: n,
+  theme: o,
+  actions: a,
+  footer: g,
+  children: s
+}) {
+  return /* @__PURE__ */ l(y, { 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 ${o.header}`,
+        children: [
+          /* @__PURE__ */ l("h4", { className: "text-sm font-semibold flex items-center", children: [
+            t && /* @__PURE__ */ r(t, { className: "w-4 h-4 mr-2" }),
+            e
+          ] }),
+          /* @__PURE__ */ l("div", { className: "flex items-center gap-2", children: [
+            a,
+            n !== void 0 && /* @__PURE__ */ r(
+              "span",
+              {
+                className: `text-xs font-semibold px-2 py-0.5 rounded-full ${o.badge}`,
+                children: n
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ r("div", { className: "divide-y divide-gray-100", children: s }),
+    g
+  ] });
+}
+function F({
+  to: t,
+  onClick: e,
+  hover: n = "hover:bg-gray-50",
+  className: o = "",
+  children: a
+}) {
+  const s = `flex items-center justify-between px-4 py-3 transition-colors ${n} ${!!(t || e) ? "cursor-pointer" : ""} ${o}`;
+  return t ? /* @__PURE__ */ r(b, { to: t, className: s, children: a }) : e ? /* @__PURE__ */ r(
+    "button",
+    {
+      type: "button",
+      onClick: e,
+      className: `w-full text-left ${s}`,
+      children: a
+    }
+  ) : /* @__PURE__ */ r("div", { className: s, children: a });
+}
+function Y({
+  to: t,
+  count: e,
+  noun: n = "items"
+}) {
+  return /* @__PURE__ */ l(
+    b,
+    {
+      to: t,
+      className: "block px-4 py-2.5 text-sm font-medium text-blue-600 hover:text-blue-700 hover:bg-gray-50 transition-colors",
+      children: [
+        "View all ",
+        e,
+        " ",
+        n,
+        " →"
+      ]
+    }
+  );
+}
+const R = (t) => `https://flagicons.lipis.dev/flags/4x3/${t.toLowerCase()}.svg`;
+function z({
+  countryCode: t,
+  country: e
+}) {
+  return t ? /* @__PURE__ */ r(
+    "img",
+    {
+      src: R(t),
+      alt: e || "Country flag",
+      className: "w-4 h-3 flex-shrink-0 rounded-sm ring-1 ring-black/5",
+      onError: (n) => {
+        n.target.style.display = "none";
+      }
+    }
+  ) : null;
+}
+function G({
+  to: t,
+  onClick: e,
+  children: n
+}) {
+  const o = "inline-flex items-center gap-2 text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors cursor-pointer", a = /* @__PURE__ */ l(u, { children: [
+    /* @__PURE__ */ r($, { className: "w-4 h-4" }),
+    /* @__PURE__ */ r("span", { children: n })
+  ] });
+  return t ? /* @__PURE__ */ r(b, { to: t, className: o, children: a }) : /* @__PURE__ */ r("button", { type: "button", onClick: e, className: o, children: a });
+}
+function H({ items: t }) {
+  return /* @__PURE__ */ r("div", { className: "border-b border-gray-200", children: /* @__PURE__ */ r("nav", { className: "-mb-px flex space-x-8", children: t.map((e) => {
+    const n = e.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 e.to && !e.active ? /* @__PURE__ */ r(
+      b,
+      {
+        to: e.to,
+        state: e.state,
+        className: n,
+        children: e.label
+      },
+      e.label
+    ) : /* @__PURE__ */ r("span", { className: n, children: e.label }, e.label);
+  }) }) });
+}
+function M({ items: t }) {
+  return /* @__PURE__ */ r("nav", { className: "space-y-1", children: t.map((e) => {
+    const n = e.icon, o = `group/side relative flex items-center gap-3 h-10 rounded-md px-3 text-sm transition-all duration-200 cursor-pointer ${e.active ? "bg-blue-50 text-blue-700 font-medium" : "text-gray-600 hover:bg-gray-100 hover:text-gray-900"}`, a = /* @__PURE__ */ l(u, { children: [
+      /* @__PURE__ */ r(
+        "span",
+        {
+          className: `absolute left-0 top-1.5 bottom-1.5 w-[3px] rounded-r-full bg-blue-600 transition-all duration-300 ease-out ${e.active ? "opacity-100 scale-y-100" : "opacity-0 scale-y-0"}`
+        }
+      ),
+      n && /* @__PURE__ */ r(n, { className: "w-[18px] h-[18px] shrink-0 transition-transform duration-200 group-hover/side:scale-110" }),
+      /* @__PURE__ */ r("span", { className: "truncate", children: e.label })
+    ] });
+    return e.active ? /* @__PURE__ */ r("span", { className: o, "aria-current": "page", children: a }, e.to) : /* @__PURE__ */ r(b, { to: e.to, className: o, children: a }, e.to);
+  }) });
+}
+function Z({
+  label: t,
+  icon: e,
+  iconClassName: n = "text-gray-400",
+  children: o
+}) {
+  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: [
+      e && /* @__PURE__ */ r(e, { className: `w-4 h-4 mr-2 ${n}` }),
+      t
+    ] }),
+    /* @__PURE__ */ r("span", { className: "text-sm text-gray-900 text-right min-w-0", children: o })
+  ] });
+}
+function q({
+  className: t = "space-y-6",
+  children: e
+}) {
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      className: `flex-1 overflow-y-auto px-4 sm:px-6 lg:px-8 py-6 ${t}`,
+      children: e
+    }
+  );
+}
+function J({
+  value: t,
+  onChange: e,
+  placeholder: n = "Search...",
+  className: o = "w-full",
+  slashToFocus: a = !1
+}) {
+  const g = k(null);
+  return L(() => {
+    if (!a) return;
+    function s(d) {
+      var c;
+      if (d.key !== "/" || d.ctrlKey || d.metaKey || d.altKey) return;
+      const i = d.target;
+      i.tagName === "INPUT" || i.tagName === "TEXTAREA" || i.tagName === "SELECT" || i.isContentEditable || (d.preventDefault(), (c = g.current) == null || c.focus());
+    }
+    return document.addEventListener("keydown", s), () => document.removeEventListener("keydown", s);
+  }, [a]), /* @__PURE__ */ l("div", { className: `relative ${o}`, children: [
+    /* @__PURE__ */ r(E, { className: "absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 w-4 h-4 pointer-events-none" }),
+    /* @__PURE__ */ r(
+      "input",
+      {
+        ref: g,
+        type: "text",
+        value: t,
+        onChange: (s) => e(s.target.value),
+        placeholder: n,
+        className: "w-full pl-10 pr-10 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm text-gray-900 placeholder-gray-400"
+      }
+    ),
+    a && !t && /* @__PURE__ */ r("kbd", { className: "absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 text-xs border border-gray-300 rounded px-1 py-0.5 font-mono leading-none pointer-events-none", children: "/" })
+  ] });
+}
+const B = {
+  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" },
+  orange: { badge: "bg-orange-100", icon: "text-orange-600" },
+  red: { badge: "bg-red-100", icon: "text-red-600" },
+  purple: { badge: "bg-purple-100", icon: "text-purple-600" }
+};
+function Q({
+  icon: t,
+  label: e,
+  value: n,
+  tone: o = "neutral"
+}) {
+  const a = B[o];
+  return /* @__PURE__ */ l("div", { className: "flex items-center gap-4", children: [
+    /* @__PURE__ */ r(
+      "div",
+      {
+        className: `flex h-12 w-12 items-center justify-center rounded-xl ${a.badge}`,
+        children: /* @__PURE__ */ r(t, { className: `w-6 h-6 ${a.icon}` })
+      }
+    ),
+    /* @__PURE__ */ l("div", { children: [
+      /* @__PURE__ */ r("p", { className: "text-sm font-medium text-gray-500", children: e }),
+      /* @__PURE__ */ r("p", { className: "text-3xl font-bold text-gray-900 tabular-nums", children: n })
+    ] })
+  ] });
+}
+const W = {
+  blue: {
+    header: "bg-blue-50 text-blue-800",
+    hover: "hover:bg-blue-50",
+    badge: "bg-blue-100 text-blue-700"
+  },
+  purple: {
+    header: "bg-purple-50 text-purple-800",
+    hover: "hover:bg-purple-50",
+    badge: "bg-purple-100 text-purple-700"
+  },
+  rose: {
+    header: "bg-rose-50 text-rose-800",
+    hover: "hover:bg-rose-50",
+    badge: "bg-rose-100 text-rose-700"
+  },
+  yellow: {
+    header: "bg-yellow-50 text-yellow-800",
+    hover: "hover:bg-yellow-50",
+    badge: "bg-yellow-100 text-yellow-700"
+  },
+  orange: {
+    header: "bg-orange-50 text-orange-800",
+    hover: "hover:bg-orange-50",
+    badge: "bg-orange-100 text-orange-700"
+  },
+  red: {
+    header: "bg-red-50 text-red-800",
+    hover: "hover:bg-red-50",
+    badge: "bg-red-100 text-red-700"
+  },
+  green: {
+    header: "bg-green-50 text-green-800",
+    hover: "hover:bg-green-50",
+    badge: "bg-green-100 text-green-700"
+  },
+  gray: {
+    header: "bg-gray-50 text-gray-700",
+    hover: "hover:bg-gray-50",
+    badge: "bg-gray-200 text-gray-700"
+  }
+};
+function ee({
+  toast: t,
+  onClose: e
+}) {
+  return t ? /* @__PURE__ */ r(
+    "div",
+    {
+      className: `fixed top-4 right-4 z-50 p-4 rounded-lg shadow-lg border transition-all duration-300 ease-in-out ${t.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: [
+        t.type === "success" ? /* @__PURE__ */ r(S, { className: "w-5 h-5 text-green-600" }) : /* @__PURE__ */ r(h, { className: "w-5 h-5 text-red-600" }),
+        /* @__PURE__ */ r("span", { className: "text-sm font-medium", children: t.message }),
+        /* @__PURE__ */ r(
+          "button",
+          {
+            type: "button",
+            onClick: e,
+            className: "ml-2 text-gray-400 hover:text-gray-600 cursor-pointer",
+            children: /* @__PURE__ */ r(h, { className: "w-4 h-4" })
+          }
+        )
+      ] })
+    }
+  ) : null;
+}
+export {
+  T as BADGE_COLORS,
+  G as BackLink,
+  D as Badge,
+  U as Button,
+  y as Card,
+  z as CountryFlag,
+  Z as InfoRow,
+  P as LabelChip,
+  F as ListRow,
+  q as PageContainer,
+  V as Panel,
+  W as SECTION_THEMES,
+  J as SearchInput,
+  X as SectionCard,
+  M as SideNav,
+  Q as StatCard,
+  H as TabNav,
+  ee as Toast,
+  Y as ViewAllFooter
+};

package/dist/page-container.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+/**
+ * Standard scrollable page wrapper used across the app.
+ * `space-y-6` between direct children; override with `className` when a page
+ * needs a non-default layout (e.g. full-height flex columns).
+ */
+export declare function PageContainer({ className, children, }: {
+    className?: string;
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/search-input.d.ts

@@ -0,0 +1,10 @@
+/** Search text input with a leading magnifying-glass icon. Size via `className`
+ *  on the wrapper (defaults to full width). Set `slashToFocus` to focus the
+ *  input when the user presses "/" anywhere outside a field. */
+export declare function SearchInput({ value, onChange, placeholder, className, slashToFocus, }: {
+    value: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+    className?: string;
+    slashToFocus?: boolean;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/stat-card.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+import { IconComponent } from './theme';
+type StatTone = "neutral" | "green" | "blue" | "orange" | "red" | "purple";
+/**
+ * The inner content of a stat tile: icon badge + label + big number.
+ * Wrap in `Card`, `Link`, or `button` depending on whether it's clickable.
+ */
+export declare function StatCard({ icon: Icon, label, value, tone, }: {
+    icon: IconComponent;
+    label: string;
+    value: ReactNode;
+    tone?: StatTone;
+}): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/theme.d.ts

@@ -0,0 +1,54 @@
+export interface SectionTheme {
+    /** Header bar background + text color */
+    header: string;
+    /** Row hover background */
+    hover: string;
+    /** Count pill colors */
+    badge: string;
+}
+export declare const SECTION_THEMES: {
+    blue: {
+        header: string;
+        hover: string;
+        badge: string;
+    };
+    purple: {
+        header: string;
+        hover: string;
+        badge: string;
+    };
+    rose: {
+        header: string;
+        hover: string;
+        badge: string;
+    };
+    yellow: {
+        header: string;
+        hover: string;
+        badge: string;
+    };
+    orange: {
+        header: string;
+        hover: string;
+        badge: string;
+    };
+    red: {
+        header: string;
+        hover: string;
+        badge: string;
+    };
+    green: {
+        header: string;
+        hover: string;
+        badge: string;
+    };
+    gray: {
+        header: string;
+        hover: string;
+        badge: string;
+    };
+};
+export type SectionThemeName = keyof typeof SECTION_THEMES;
+export type IconComponent = React.ComponentType<{
+    className?: string;
+}>;

package/dist/toast.d.ts

@@ -0,0 +1,10 @@
+export interface ToastState {
+    message: string;
+    type: "success" | "error";
+}
+/** Fixed top-right toast notification. Render with the page's toast state;
+ *  pass `null` to render nothing. */
+export declare function Toast({ toast, onClose, }: {
+    toast: ToastState | null;
+    onClose: () => void;
+}): import("react/jsx-runtime").JSX.Element | null;

package/package.json

@@ -0,0 +1,49 @@
+{
+	"name": "@teton/smith-ui",
+	"version": "0.2.172",
+	"description": "Smith dashboard design-system primitives (React + Tailwind CSS v4).",
+	"license": "Apache-2.0",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/teton-ai/smith.git",
+		"directory": "packages/ui"
+	},
+	"type": "module",
+	"files": [
+		"dist"
+	],
+	"main": "./dist/index.js",
+	"module": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"import": "./dist/index.js"
+		}
+	},
+	"sideEffects": false,
+	"publishConfig": {
+		"access": "public"
+	},
+	"scripts": {
+		"build": "vite build"
+	},
+	"peerDependencies": {
+		"lucide-react": ">=0.500.0",
+		"react": "^19.0.0",
+		"react-dom": "^19.0.0",
+		"react-router": "^7.0.0"
+	},
+	"devDependencies": {
+		"@types/react": "^19",
+		"@types/react-dom": "^19",
+		"@vitejs/plugin-react": "^4.3.4",
+		"lucide-react": "^0.518.0",
+		"react": "^19.0.0",
+		"react-dom": "^19.0.0",
+		"react-router": "^7.0.0",
+		"typescript": "^5",
+		"vite": "^6.0.0",
+		"vite-plugin-dts": "^4.5.3"
+	}
+}