@ramme-io/ui 4.1.1 → 4.2.1

package/dist/components/ai/LiveQuoteCard/LiveQuoteCard.js

@@ -1,38 +1,39 @@
 import { jsxs as e, jsx as t } from "react/jsx-runtime";
-import { useState as c, useEffect as g } from "react";
-import { Card as N, CardHeader as b, CardTitle as y, CardContent as v } from "../../layout/Card.js";
-import { Icon as s } from "../../ui/Icon.js";
-const d = { BASE_URL: "/", DEV: !1, MODE: "production", PROD: !0, SSR: !1 }, U = ({ params: f }) => {
-  const { ticker: i } = f, [r, x] = c(null), [l, m] = c(!0), [o, p] = c(null);
-  g(() => {
+import { apiBaseUrl as g } from "../../../utils/apiBaseUrl.js";
+import { useState as c, useEffect as h } from "react";
+import { Card as N, CardHeader as b, CardTitle as v, CardContent as y } from "../../layout/Card.js";
+import { Icon as i } from "../../ui/Icon.js";
+const E = ({ params: u }) => {
+  const { ticker: s } = u, [r, x] = c(null), [d, m] = c(!0), [o, l] = c(null);
+  h(() => {
     (async () => {
       try {
-        m(!0), p(null);
-        const a = (d == null ? void 0 : d.VITE_API_URL) ?? "http://localhost:8000", u = await fetch(`${a}/companies/${i.toUpperCase()}/hydrate-quote`);
-        if (!u.ok)
-          throw new Error(`No quote data available for ${i.toUpperCase()}`);
-        const h = await u.json();
-        x(h);
-      } catch (a) {
-        p(a instanceof Error ? a.message : "Failed to fetch quote");
+        m(!0), l(null);
+        const n = g(), p = await fetch(`${n}/companies/${s.toUpperCase()}/hydrate-quote`);
+        if (!p.ok)
+          throw new Error(`No quote data available for ${s.toUpperCase()}`);
+        const f = await p.json();
+        x(f);
+      } catch (n) {
+        l(n instanceof Error ? n.message : "Failed to fetch quote");
       } finally {
         m(!1);
       }
     })();
-  }, [i]);
-  const n = r && r.change_percent >= 0;
+  }, [s]);
+  const a = r && r.change_percent >= 0;
   return /* @__PURE__ */ e(N, { className: "w-full min-w-[280px] max-w-md shadow-lg border-primary/20", children: [
-    /* @__PURE__ */ t(b, { className: "pb-3", children: /* @__PURE__ */ e(y, { className: "text-sm font-medium text-muted-foreground flex items-center gap-2", children: [
-      /* @__PURE__ */ t(s, { name: "trending-up", size: 14 }),
+    /* @__PURE__ */ t(b, { className: "pb-3", children: /* @__PURE__ */ e(v, { className: "text-sm font-medium text-muted-foreground flex items-center gap-2", children: [
+      /* @__PURE__ */ t(i, { name: "trending-up", size: 14 }),
       "Live Quote"
     ] }) }),
-    /* @__PURE__ */ e(v, { className: "pt-0", children: [
-      l && /* @__PURE__ */ t("div", { className: "flex items-center justify-center py-8", children: /* @__PURE__ */ t(s, { name: "loader", size: 24, className: "animate-spin text-muted-foreground" }) }),
+    /* @__PURE__ */ e(y, { className: "pt-0", children: [
+      d && /* @__PURE__ */ t("div", { className: "flex items-center justify-center py-8", children: /* @__PURE__ */ t(i, { name: "loader", size: 24, className: "animate-spin text-muted-foreground" }) }),
       o && /* @__PURE__ */ e("div", { className: "flex items-start gap-2 rounded-lg border border-destructive/40 bg-destructive/10 px-3 py-2 text-xs text-destructive", children: [
-        /* @__PURE__ */ t(s, { name: "alert-circle", size: 14, className: "mt-px shrink-0" }),
+        /* @__PURE__ */ t(i, { name: "alert-circle", size: 14, className: "mt-px shrink-0" }),
         /* @__PURE__ */ t("span", { children: o })
       ] }),
-      r && !l && !o && /* @__PURE__ */ e("div", { className: "space-y-3", children: [
+      r && !d && !o && /* @__PURE__ */ e("div", { className: "space-y-3", children: [
         /* @__PURE__ */ t("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ t("span", { className: "px-2.5 py-1 rounded-md bg-primary/10 border border-primary/20 font-mono text-sm font-semibold text-primary", children: r.ticker }) }),
         /* @__PURE__ */ e("div", { className: "space-y-1", children: [
           /* @__PURE__ */ e("div", { className: "flex items-baseline gap-2", children: [
@@ -43,8 +44,8 @@ const d = { BASE_URL: "/", DEV: !1, MODE: "production", PROD: !0, SSR: !1 }, U =
                 maximumFractionDigits: 2
               })
             ] }),
-            /* @__PURE__ */ e("span", { className: `text-lg font-semibold ${n ? "text-green-500" : "text-red-500"}`, children: [
-              n ? "+" : "",
+            /* @__PURE__ */ e("span", { className: `text-lg font-semibold ${a ? "text-green-500" : "text-red-500"}`, children: [
+              a ? "+" : "",
               r.change_percent.toFixed(2),
               "%"
             ] })
@@ -59,14 +60,14 @@ const d = { BASE_URL: "/", DEV: !1, MODE: "production", PROD: !0, SSR: !1 }, U =
             })
           ] })
         ] }),
-        /* @__PURE__ */ t("div", { className: "flex items-center gap-2 pt-2 border-t border-border/40", children: /* @__PURE__ */ e("div", { className: `flex items-center gap-1.5 text-xs font-medium ${n ? "text-green-500" : "text-red-500"}`, children: [
-          /* @__PURE__ */ t(s, { name: n ? "trending-up" : "trending-down", size: 14 }),
-          /* @__PURE__ */ t("span", { children: n ? "Gaining" : "Declining" })
+        /* @__PURE__ */ t("div", { className: "flex items-center gap-2 pt-2 border-t border-border/40", children: /* @__PURE__ */ e("div", { className: `flex items-center gap-1.5 text-xs font-medium ${a ? "text-green-500" : "text-red-500"}`, children: [
+          /* @__PURE__ */ t(i, { name: a ? "trending-up" : "trending-down", size: 14 }),
+          /* @__PURE__ */ t("span", { children: a ? "Gaining" : "Declining" })
         ] }) })
       ] })
     ] })
   ] });
 };
 export {
-  U as LiveQuoteCard
+  E as LiveQuoteCard
 };

package/dist/components/ai/NewsSummaryCard/NewsSummaryCard.js

@@ -1,41 +1,42 @@
 import { jsxs as t, jsx as e } from "react/jsx-runtime";
-import { useState as i, useEffect as g } from "react";
+import { apiBaseUrl as h } from "../../../utils/apiBaseUrl.js";
+import { useState as l, useEffect as g } from "react";
 import { Card as N, CardHeader as b, CardTitle as w, CardContent as y } from "../../layout/Card.js";
-import { Icon as s } from "../../ui/Icon.js";
-const d = { BASE_URL: "/", DEV: !1, MODE: "production", PROD: !0, SSR: !1 }, k = ({ params: u }) => {
-  const { ticker: a } = u, [c, x] = i([]), [l, m] = i(!0), [n, p] = i(null);
+import { Icon as a } from "../../ui/Icon.js";
+const _ = ({ params: f }) => {
+  const { ticker: s } = f, [c, x] = l([]), [i, d] = l(!0), [n, m] = l(null);
   return g(() => {
     (async () => {
       try {
-        m(!0), p(null);
-        const o = (d == null ? void 0 : d.VITE_API_URL) ?? "http://localhost:8000", f = await fetch(`${o}/companies/${a.toUpperCase()}/news?limit=5`);
-        if (!f.ok)
-          throw new Error(`No news available for ${a.toUpperCase()}`);
-        const h = await f.json();
-        x(h);
+        d(!0), m(null);
+        const o = h(), p = await fetch(`${o}/companies/${s.toUpperCase()}/news?limit=5`);
+        if (!p.ok)
+          throw new Error(`No news available for ${s.toUpperCase()}`);
+        const u = await p.json();
+        x(u);
       } catch (o) {
-        p(o instanceof Error ? o.message : "Failed to fetch news");
+        m(o instanceof Error ? o.message : "Failed to fetch news");
       } finally {
-        m(!1);
+        d(!1);
       }
     })();
-  }, [a]), /* @__PURE__ */ t(N, { className: "w-full min-w-[320px] max-w-2xl shadow-lg border-primary/20", children: [
+  }, [s]), /* @__PURE__ */ t(N, { className: "w-full min-w-[320px] max-w-2xl shadow-lg border-primary/20", children: [
     /* @__PURE__ */ e(b, { className: "pb-3", children: /* @__PURE__ */ t(w, { className: "text-sm font-medium text-muted-foreground flex items-center gap-2", children: [
-      /* @__PURE__ */ e(s, { name: "newspaper", size: 14 }),
+      /* @__PURE__ */ e(a, { name: "newspaper", size: 14 }),
       "Recent News · ",
-      a.toUpperCase()
+      s.toUpperCase()
     ] }) }),
     /* @__PURE__ */ t(y, { className: "pt-0", children: [
-      l && /* @__PURE__ */ e("div", { className: "flex items-center justify-center py-8", children: /* @__PURE__ */ e(s, { name: "loader", size: 24, className: "animate-spin text-muted-foreground" }) }),
+      i && /* @__PURE__ */ e("div", { className: "flex items-center justify-center py-8", children: /* @__PURE__ */ e(a, { name: "loader", size: 24, className: "animate-spin text-muted-foreground" }) }),
       n && /* @__PURE__ */ t("div", { className: "flex items-start gap-2 rounded-lg border border-destructive/40 bg-destructive/10 px-3 py-2 text-xs text-destructive", children: [
-        /* @__PURE__ */ e(s, { name: "alert-circle", size: 14, className: "mt-px shrink-0" }),
+        /* @__PURE__ */ e(a, { name: "alert-circle", size: 14, className: "mt-px shrink-0" }),
         /* @__PURE__ */ e("span", { children: n })
       ] }),
-      c.length === 0 && !l && !n && /* @__PURE__ */ t("div", { className: "flex flex-col items-center justify-center py-8 gap-2 text-muted-foreground", children: [
-        /* @__PURE__ */ e(s, { name: "inbox", size: 24, opacity: 0.5 }),
+      c.length === 0 && !i && !n && /* @__PURE__ */ t("div", { className: "flex flex-col items-center justify-center py-8 gap-2 text-muted-foreground", children: [
+        /* @__PURE__ */ e(a, { name: "inbox", size: 24, opacity: 0.5 }),
         /* @__PURE__ */ e("p", { className: "text-sm", children: "No recent news available" })
       ] }),
-      c.length > 0 && !l && !n && /* @__PURE__ */ e("div", { className: "space-y-3", children: c.map((r) => /* @__PURE__ */ e(
+      c.length > 0 && !i && !n && /* @__PURE__ */ e("div", { className: "space-y-3", children: c.map((r) => /* @__PURE__ */ e(
         "div",
         {
           className: "border-b border-border/50 pb-3 last:border-0 last:pb-0",
@@ -64,7 +65,7 @@ const d = { BASE_URL: "/", DEV: !1, MODE: "production", PROD: !0, SSR: !1 }, k =
                 ] })
               ] })
             ] }),
-            r.url && /* @__PURE__ */ e(s, { name: "external-link", size: 12, className: "text-muted-foreground/50 flex-shrink-0 mt-0.5" })
+            r.url && /* @__PURE__ */ e(a, { name: "external-link", size: 12, className: "text-muted-foreground/50 flex-shrink-0 mt-0.5" })
           ] })
         },
         r.id
@@ -73,5 +74,5 @@ const d = { BASE_URL: "/", DEV: !1, MODE: "production", PROD: !0, SSR: !1 }, k =
   ] });
 };
 export {
-  k as NewsSummaryCard
+  _ as NewsSummaryCard
 };

package/dist/components/ai/StockChart/StockChart.js

@@ -1,9 +1,9 @@
-import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import { jsxs as s, jsx as e } from "react/jsx-runtime";
 import _ from "react";
 import { ResponsiveContainer as F, ComposedChart as W, CartesianGrid as K, XAxis as U, YAxis as A, Tooltip as $, Legend as j, Line as S, Bar as z } from "recharts";
 import { Card as E, CardHeader as H, CardTitle as L, CardContent as V } from "../../layout/Card.js";
 import { useChartTheme as Y } from "../../../lib/hooks/useChartTheme.js";
-function G(s, p, C) {
+function G(a, p, C) {
   const N = Date.now(), M = p && Array.isArray(p) && p.length > 0 ? p : ["price", "volume"], c = {
     "1D": { duration: 6.5 * 60 * 60 * 1e3, points: 78, basePrice: 150 },
     // 5-minute intervals (market hours)
@@ -13,30 +13,30 @@ function G(s, p, C) {
     // Daily close
     "1Y": { duration: 365 * 24 * 60 * 60 * 1e3, points: 52, basePrice: 100 }
     // Weekly close
-  }, g = c[s] || c["1M"], { duration: l, points: h, basePrice: r } = g, o = l / h, x = [];
+  }, g = c[a] || c["1M"], { duration: l, points: u, basePrice: r } = g, o = l / u, x = [];
   let n = r;
-  const u = [];
-  for (let d = 0; d < h; d++) {
+  const h = [];
+  for (let d = 0; d < u; d++) {
     const v = N - l + d * o, m = {
       timestamp: new Date(v).toLocaleString("en-US", {
-        ...s === "1D" && { hour: "2-digit", minute: "2-digit" },
-        ...s === "1W" && { weekday: "short", hour: "2-digit" },
-        ...s === "1M" && { month: "short", day: "numeric" },
-        ...s === "1Y" && { month: "short", year: "2-digit" }
+        ...a === "1D" && { hour: "2-digit", minute: "2-digit" },
+        ...a === "1W" && { weekday: "short", hour: "2-digit" },
+        ...a === "1M" && { month: "short", day: "numeric" },
+        ...a === "1Y" && { month: "short", year: "2-digit" }
       })
     };
     M.forEach((i) => {
       switch (i) {
         case "price":
-          const P = r * 0.02, y = 1e-4 * r, k = (Math.random() - 0.48) * P + y;
-          n = Math.max(n + k, r * 0.7), u.push(n), m[i] = Number(n.toFixed(2));
+          const P = r * 0.02, y = 1e-4 * r, b = (Math.random() - 0.48) * P + y;
+          n = Math.max(n + b, r * 0.7), h.push(n), m[i] = Number(n.toFixed(2));
           break;
         case "volume":
           const t = 1e6, f = Math.random() > 0.7 ? Math.random() * 2 : 1;
           m[i] = Math.round((t + Math.random() * t * 2) * f);
           break;
         case "moving_average":
-          const w = Math.min(20, d + 1), D = u.slice(-w).reduce((I, T) => I + T, 0) / w;
+          const w = Math.min(20, d + 1), D = h.slice(-w).reduce((I, T) => I + T, 0) / w;
           m[i] = Number(D.toFixed(2));
           break;
         default:
@@ -46,7 +46,7 @@ function G(s, p, C) {
   }
   return x;
 }
-const b = {
+const k = {
   price: { label: "Price", unit: "USD", color: "#10b981" },
   // Emerald/green
   volume: { label: "Volume", unit: "shares", color: "#f59e0b" },
@@ -54,16 +54,16 @@ const b = {
   moving_average: { label: "MA(20)", unit: "", color: "#ef4444" }
   // Red
 }, Q = ({
-  params: s,
+  params: a,
   title: p,
   data: C
 }) => {
-  var y, k;
-  const { ticker: N, timeRange: M, metrics: c } = s, { textColor: g, gridColor: l } = Y(), h = N || s.symbol || "UNKNOWN", r = M || "1M", o = c && Array.isArray(c) && c.length > 0 ? c : ["price", "volume"], x = _.useMemo(
+  var y, b;
+  const { ticker: N, timeRange: M, metrics: c } = a, { textColor: g, gridColor: l } = Y(), u = N || a.symbol || "UNKNOWN", r = M || "1M", o = c && Array.isArray(c) && c.length > 0 ? c : ["price", "volume"], x = _.useMemo(
     () => {
       const t = C || G(r, o);
       return console.log("[StockChart] Data generated:", {
-        ticker: h,
+        ticker: u,
         timeRange: r,
         metrics: o,
         dataPoints: t.length,
@@ -71,20 +71,20 @@ const b = {
         lastPoint: t[t.length - 1]
       }), t;
     },
-    [C, r, o, h]
-  ), n = x.filter((t) => t.price !== void 0), u = ((y = n[0]) == null ? void 0 : y.price) || 0, d = ((k = n[n.length - 1]) == null ? void 0 : k.price) || 0, v = d - u, m = u > 0 ? (v / u * 100).toFixed(2) : "0.00", i = v >= 0, P = p || `${h.toUpperCase()} - ${r}`;
-  return /* @__PURE__ */ a(E, { className: "w-full max-w-2xl shadow-lg border-primary/20", children: [
-    /* @__PURE__ */ e(H, { className: "pb-2", children: /* @__PURE__ */ a("div", { className: "flex items-center justify-between", children: [
+    [C, r, o, u]
+  ), n = x.filter((t) => t.price !== void 0), h = ((y = n[0]) == null ? void 0 : y.price) || 0, d = ((b = n[n.length - 1]) == null ? void 0 : b.price) || 0, v = d - h, m = h > 0 ? (v / h * 100).toFixed(2) : "0.00", i = v >= 0, P = p || `${u.toUpperCase()} - ${r}`;
+  return /* @__PURE__ */ s(E, { className: "w-full max-w-2xl shadow-lg border-primary/20", children: [
+    /* @__PURE__ */ e(H, { className: "pb-2", children: /* @__PURE__ */ s("div", { className: "flex items-center justify-between", children: [
       /* @__PURE__ */ e(L, { className: "text-sm font-medium text-foreground/80", children: P }),
-      o.includes("price") && /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ a("span", { className: "text-base font-semibold", children: [
+      o.includes("price") && /* @__PURE__ */ s("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ s("span", { className: "text-base font-semibold", children: [
           "$",
           d.toFixed(2)
         ] }),
-        /* @__PURE__ */ a(
+        /* @__PURE__ */ s(
           "span",
           {
-            className: `text-xs font-medium ${i ? "text-green-600 dark:text-green-400" : "text-red-600 dark:text-red-400"}`,
+            className: `text-xs font-medium ${i ? "text-success-strong" : "text-destructive-strong"}`,
             children: [
               i ? "+" : "",
               v.toFixed(2),
@@ -97,8 +97,8 @@ const b = {
         )
       ] })
     ] }) }),
-    /* @__PURE__ */ a(V, { className: "pt-0", children: [
-      /* @__PURE__ */ e("div", { className: "h-64 w-full bg-background", style: { minHeight: "256px", minWidth: "350px" }, children: /* @__PURE__ */ e(F, { width: "100%", height: 256, children: /* @__PURE__ */ a(W, { data: x, margin: { top: 5, right: 20, bottom: 5, left: 0 }, children: [
+    /* @__PURE__ */ s(V, { className: "pt-0", children: [
+      /* @__PURE__ */ e("div", { className: "h-64 w-full bg-background", style: { minHeight: "256px", minWidth: "350px" }, children: /* @__PURE__ */ e(F, { width: "100%", height: 256, children: /* @__PURE__ */ s(W, { data: x, margin: { top: 5, right: 20, bottom: 5, left: 0 }, children: [
         /* @__PURE__ */ e(K, { strokeDasharray: "3 3", stroke: l, opacity: 0.3 }),
         /* @__PURE__ */ e(
           U,
@@ -136,7 +136,7 @@ const b = {
             yAxisId: "price",
             type: "monotone",
             dataKey: "price",
-            stroke: b.price.color,
+            stroke: k.price.color,
             strokeWidth: 2,
             dot: !1,
             name: "Price (USD)"
@@ -148,7 +148,7 @@ const b = {
             yAxisId: "price",
             type: "monotone",
             dataKey: "moving_average",
-            stroke: b.moving_average.color,
+            stroke: k.moving_average.color,
             strokeWidth: 2,
             dot: !1,
             name: "MA(20)",
@@ -160,15 +160,15 @@ const b = {
           {
             yAxisId: "volume",
             dataKey: "volume",
-            fill: b.volume.color,
+            fill: k.volume.color,
             opacity: 0.6,
             name: "Volume"
           }
         )
       ] }) }) }),
       /* @__PURE__ */ e("div", { className: "mt-3 flex flex-wrap gap-2", children: o.map((t) => {
-        const f = b[t];
-        return /* @__PURE__ */ a(
+        const f = k[t];
+        return /* @__PURE__ */ s(
           "div",
           {
             className: "inline-flex items-center gap-1.5 rounded-full bg-muted/50 px-2.5 py-1 text-xs",
@@ -181,7 +181,7 @@ const b = {
                 }
               ),
               /* @__PURE__ */ e("span", { className: "font-medium", children: f.label }),
-              f.unit && /* @__PURE__ */ a("span", { className: "text-muted-foreground", children: [
+              f.unit && /* @__PURE__ */ s("span", { className: "text-muted-foreground", children: [
                 "(",
                 f.unit,
                 ")"

package/dist/components/data-display/StatusBadge.d.ts

@@ -4,8 +4,9 @@ export interface StatusBadgeProps {
     /** One of the 5 built-in presets. Omit and use `color` + `label` for a
      * status this preset set doesn't cover (e.g. a domain-specific state). */
     status?: StatusType;
-    /** Tailwind background class for the dot, e.g. 'bg-emerald-500'. Overrides
-     * the `status` preset's color when both are given. */
+    /** Background class for the dot, e.g. 'bg-success' or 'bg-chart-2'. Overrides
+     * the `status` preset's colour when both are given. Use a semantic token: a
+     * numeric shade is fixed across all five themes. */
     color?: string;
     /**
      * Optional custom label. If not provided, uses the default status name.
@@ -27,7 +28,7 @@ export interface StatusBadgeProps {
  * description: One of the 5 built-in presets. Determines the color of the dot. Omit and use `color`+`label` for a status outside this set.
  * - name: color
  * type: string
- * description: Tailwind background class for the dot (e.g. 'bg-emerald-500'). Overrides the `status` preset's color when both are given.
+ * description: Background class for the dot (e.g. 'bg-success'). Use a semantic token — a numeric shade does not adapt to the active theme. Overrides the `status` preset's colour when both are given.
  * - name: label
  * type: string
  * description: Custom text to display next to the dot. If omitted, displays the status name (e.g., "Online").

package/dist/components/data-display/StatusBadge.js

@@ -1,28 +1,28 @@
-import { jsxs as g, jsx as r } from "react/jsx-runtime";
-import { cn as t } from "../../utils/cn.js";
-const d = {
-  online: { color: "bg-green-500", label: "Online" },
-  offline: { color: "bg-gray-400", label: "Offline" },
-  error: { color: "bg-red-500", label: "Error" },
-  warning: { color: "bg-yellow-500", label: "Warning" },
-  active: { color: "bg-blue-500", label: "Active" }
+import { jsxs as d, jsx as e } from "react/jsx-runtime";
+import { cn as i } from "../../utils/cn.js";
+const g = {
+  online: { color: "bg-success", label: "Online" },
+  offline: { color: "bg-muted-foreground", label: "Offline" },
+  error: { color: "bg-destructive", label: "Error" },
+  warning: { color: "bg-warning", label: "Warning" },
+  active: { color: "bg-info", label: "Active" }
 }, m = ({
-  status: e,
-  color: a,
-  label: n,
-  className: i,
-  showDot: c = !0
+  status: n,
+  color: t,
+  label: r,
+  className: c,
+  showDot: a = !0
 }) => {
-  const l = e ? d[e] : void 0, s = a ?? (l == null ? void 0 : l.color) ?? "bg-muted-foreground", o = n === null ? null : n ?? (l == null ? void 0 : l.label) ?? null;
-  return /* @__PURE__ */ g("div", { className: t("inline-flex items-center gap-2", i), children: [
-    c && /* @__PURE__ */ r(
+  const o = n ? g[n] : void 0, s = t ?? (o == null ? void 0 : o.color) ?? "bg-muted-foreground", l = r === null ? null : r ?? (o == null ? void 0 : o.label) ?? null;
+  return /* @__PURE__ */ d("div", { className: i("inline-flex items-center gap-2", c), children: [
+    a && /* @__PURE__ */ e(
       "span",
       {
-        className: t("h-2.5 w-2.5 rounded-full ring-2 ring-white dark:ring-slate-900", s),
+        className: i("h-2.5 w-2.5 rounded-full ring-2 ring-card", s),
         "aria-hidden": "true"
       }
     ),
-    o && /* @__PURE__ */ r("span", { className: "text-sm font-medium text-slate-700 dark:text-slate-300", children: o })
+    l && /* @__PURE__ */ e("span", { className: "text-sm font-medium text-foreground", children: l })
   ] });
 };
 export {

package/dist/components/feedback/Alert.js

@@ -1,37 +1,37 @@
-import { jsxs as l, jsx as e } from "react/jsx-runtime";
-import { Icon as c } from "../ui/Icon.js";
-const i = {
+import { jsxs as c, jsx as s } from "react/jsx-runtime";
+import { Icon as o } from "../ui/Icon.js";
+const a = {
   info: {
     icon: "info",
-    classes: "bg-primary/10 border-primary/50 text-primary"
+    classes: "bg-info/10 border-info/50 text-info-strong"
   },
   success: {
     icon: "check-circle",
-    classes: "bg-green-500/10 border-green-500/50 text-green-700 dark:text-green-400"
+    classes: "bg-success/10 border-success/50 text-success-strong"
   },
   warning: {
     icon: "alert-triangle",
-    classes: "bg-yellow-500/10 border-yellow-500/50 text-yellow-700 dark:text-yellow-400"
+    classes: "bg-warning/10 border-warning/50 text-warning-strong"
   },
   danger: {
     icon: "x-circle",
-    classes: "bg-red-500/10 border-red-500/50 text-red-700 dark:text-red-500"
+    classes: "bg-destructive/10 border-destructive/50 text-destructive-strong"
   }
-}, m = ({
-  title: o,
-  children: r,
-  variant: t = "info",
-  className: a
+}, g = ({
+  title: n,
+  children: e,
+  variant: i = "info",
+  className: t
 }) => {
-  const s = i[t];
-  return /* @__PURE__ */ l("div", { className: `flex items-start gap-4 p-4 border-l-4 rounded-r-lg ${s.classes} ${a || ""}`, role: "alert", children: [
-    /* @__PURE__ */ e("div", { className: "flex-shrink-0", children: /* @__PURE__ */ e(c, { name: s.icon, size: 20 }) }),
-    /* @__PURE__ */ l("div", { className: "flex-grow", children: [
-      /* @__PURE__ */ e("h4", { className: "font-semibold", children: o }),
-      r && /* @__PURE__ */ e("div", { className: "text-sm mt-1", children: r })
+  const r = a[i];
+  return /* @__PURE__ */ c("div", { className: `flex items-start gap-4 p-4 border-l-4 rounded-r-lg ${r.classes} ${t || ""}`, role: "alert", children: [
+    /* @__PURE__ */ s("div", { className: "flex-shrink-0", children: /* @__PURE__ */ s(o, { name: r.icon, size: 20 }) }),
+    /* @__PURE__ */ c("div", { className: "flex-grow", children: [
+      /* @__PURE__ */ s("h4", { className: "font-semibold", children: n }),
+      e && /* @__PURE__ */ s("div", { className: "text-sm mt-1", children: e })
     ] })
   ] });
 };
 export {
-  m as Alert
+  g as Alert
 };

package/dist/components/forms/SegmentedControl.js

@@ -1,24 +1,24 @@
-import { jsx as t } from "react/jsx-runtime";
-import { cn as d } from "../../utils/cn.js";
+import { jsx as d } from "react/jsx-runtime";
+import { cn as t } from "../../utils/cn.js";
 const m = ({
   options: n,
-  value: i,
+  value: o,
   onChange: l,
   size: r = "md",
-  className: o
-}) => /* @__PURE__ */ t("div", { className: d(
+  className: i
+}) => /* @__PURE__ */ d("div", { className: t(
   // Container: Use 'muted' background for the track (works in all themes)
   "inline-flex bg-muted border border-border",
   r === "xs" ? "rounded-md p-0.5" : "rounded-lg p-1",
-  o
+  i
 ), children: n.map((e) => {
-  const s = e.value === i;
-  return /* @__PURE__ */ t(
+  const s = e.value === o;
+  return /* @__PURE__ */ d(
     "button",
     {
       onClick: () => !e.disabled && l(e.value),
       disabled: e.disabled,
-      className: d(
+      className: t(
         "relative rounded-md font-medium transition-all duration-200 ease-in-out focus:outline-none focus-visible:ring-2 focus-visible:ring-primary",
         // Size Variants
         //
@@ -40,7 +40,7 @@ const m = ({
         // those two already clear AA and must not move.
         r === "xs" ? "inline-flex items-center justify-center min-h-6 text-2xs px-2 py-0.5" : r === "sm" ? "text-xs px-3 py-1" : "text-sm px-4 py-1.5",
         // State Styles (Theme Aware)
-        s ? "bg-card text-foreground shadow-sm ring-1 ring-black/5 dark:ring-white/10" : "text-muted-foreground hover:text-foreground hover:bg-background/50",
+        s ? "bg-card text-foreground shadow-sm ring-1 ring-border" : "text-muted-foreground hover:text-foreground hover:bg-background/50",
         e.disabled && "opacity-50 cursor-not-allowed"
       ),
       type: "button",

package/dist/components/layout/DetailDrawer.d.ts

@@ -8,13 +8,14 @@ import React from 'react';
  * @id detail-drawer
  * @param {boolean} isOpen - Whether the drawer is showing.
  * @param {function} onClose - Called when the drawer requests dismissal.
- * @param {string} variant - 'push' compresses sibling flex content so the list stays visible; 'overlay' floats fixed above the page. Defaults to push.
+ * @param {string} variant - 'push' compresses sibling flex content so the list stays visible; 'overlay' floats fixed above the page. Defaults to overlay.
  * @param {string} side - Which edge it docks to: 'left' or 'right'. Defaults to right.
  * @param {boolean} resizable - Enables the draggable handle on the inner border.
  * @param {number} width - Current width in px. Controlled — pair with onWidthChange.
  * @param {function} onWidthChange - Called with the new width while dragging.
  * @param {number} minWidth - Lower bound for resizing. Defaults to 320.
  * @param {number} maxWidth - Upper bound for resizing. Defaults to 60% of the window width.
+ * @param {string} title - Names the panel for assistive technology. Not rendered: there is no header row to put it in, and adding one is a design decision. Without it an overlay announces only as "dialog".
  * @param {ReactNode} children - The detail content.
  */
 export interface DetailDrawerProps {
@@ -28,5 +29,12 @@ export interface DetailDrawerProps {
     minWidth?: number;
     maxWidth?: number;
     side?: 'left' | 'right';
+    /**
+     * Names the panel for assistive technology. Not rendered — this component
+     * has no header row to put it in, and adding one is a visual change that is
+     * a designer's call, not this fix's. Without it an overlay announces only as
+     * "dialog" and a push panel as nothing at all.
+     */
+    title?: string;
 }
 export declare const DetailDrawer: React.FC<DetailDrawerProps>;