@mdocui/react 0.1.2 → 0.1.3

package/dist/index.cjs

@@ -175,10 +175,10 @@ var import_core3 = require("@mdocui/core");
 // src/components/content.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var calloutColors = {
-  info: { bg: "#eff6ff", border: "#3b82f6" },
-  warning: { bg: "#fffbeb", border: "#f59e0b" },
-  error: { bg: "#fef2f2", border: "#ef4444" },
-  success: { bg: "#f0fdf4", border: "#22c55e" }
+  info: { bg: "rgba(59,130,246,0.1)", border: "#3b82f6" },
+  warning: { bg: "rgba(245,158,11,0.1)", border: "#f59e0b" },
+  error: { bg: "rgba(239,68,68,0.1)", border: "#ef4444" },
+  success: { bg: "rgba(34,197,94,0.1)", border: "#22c55e" }
 };
 function Callout({ props, children }) {
   const type = props.type ?? "info";
@@ -204,11 +204,11 @@ function Callout({ props, children }) {
   );
 }
 var badgeColors = {
-  default: { bg: "#f1f5f9", color: "#475569" },
-  success: { bg: "#dcfce7", color: "#166534" },
-  warning: { bg: "#fef3c7", color: "#92400e" },
-  error: { bg: "#fee2e2", color: "#991b1b" },
-  info: { bg: "#dbeafe", color: "#1e40af" }
+  default: { bg: "rgba(148,163,184,0.15)", color: "#94a3b8" },
+  success: { bg: "rgba(34,197,94,0.15)", color: "#4ade80" },
+  warning: { bg: "rgba(245,158,11,0.15)", color: "#fbbf24" },
+  error: { bg: "rgba(239,68,68,0.15)", color: "#f87171" },
+  info: { bg: "rgba(59,130,246,0.15)", color: "#60a5fa" }
 };
 function Badge({ props }) {
   const label = props.label;
@@ -307,7 +307,7 @@ function Link({ props, onAction, isStreaming }) {
       "data-mdocui-link": true,
       href: url ?? "#",
       onClick: handleClick,
-      style: { color: "#3b82f6", textDecoration: "underline", cursor: "pointer" },
+      style: { color: "#60a5fa", textDecoration: "underline", cursor: "pointer" },
       children: label
     }
   );
@@ -317,36 +317,48 @@ function Link({ props, onAction, isStreaming }) {
 var import_jsx_runtime3 = require("react/jsx-runtime");
 function Chart({ props }) {
   const type = props.type;
-  const labels = props.labels ?? [];
-  const values = props.values ?? [];
+  const labels = Array.isArray(props.labels) ? props.labels : [];
+  const values = Array.isArray(props.values) ? props.values.map(Number) : [];
   const title = props.title;
   const max = values.reduce((a, b) => Math.max(a, b), 1);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { "data-mdocui-chart": true, "data-type": type, children: [
-    title && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { fontWeight: 600, marginBottom: "8px" }, children: title }),
-    (type === "bar" || type === "line") && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { display: "flex", alignItems: "flex-end", gap: "4px", height: "120px" }, children: values.map((val, i) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { flex: 1, textAlign: "center" }, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { "data-mdocui-chart": true, "data-type": type, style: { padding: "12px 0" }, children: [
+    title && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { fontWeight: 600, marginBottom: "12px" }, children: title }),
+    (type === "bar" || type === "line") && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { display: "flex", alignItems: "flex-end", gap: "6px", height: "140px" }, children: values.map((val, i) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { flex: 1, textAlign: "center", display: "flex", flexDirection: "column", justifyContent: "flex-end", height: "100%" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { fontSize: "11px", color: "#94a3b8", marginBottom: "4px" }, children: val }),
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         "div",
         {
           style: {
-            height: `${val / max * 100}%`,
-            background: "#3b82f6",
+            height: `${Math.max(val / max * 100, 4)}%`,
+            background: "linear-gradient(180deg, #3b82f6, #2563eb)",
             borderRadius: "4px 4px 0 0",
-            minHeight: "2px"
+            minHeight: "4px"
           }
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { fontSize: "11px", marginTop: "4px", color: "#64748b" }, children: labels[i] })
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { fontSize: "11px", marginTop: "6px", color: "#64748b" }, children: labels[i] })
     ] }, labels[i] ?? i)) }),
-    (type === "pie" || type === "donut") && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { display: "flex", gap: "8px", flexWrap: "wrap" }, children: labels.map((label, i) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { style: { fontSize: "13px" }, children: [
-      label,
-      ": ",
-      values[i]
-    ] }, label)) })
+    (type === "pie" || type === "donut") && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { display: "flex", gap: "12px", flexWrap: "wrap" }, children: labels.map((label, i) => {
+      const total = values.reduce((a, b) => a + b, 0);
+      const pct = total > 0 ? Math.round(values[i] / total * 100) : 0;
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "6px", fontSize: "13px" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { width: 10, height: 10, borderRadius: "50%", background: chartColors[i % chartColors.length] } }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { children: [
+          label,
+          ": ",
+          values[i],
+          " (",
+          pct,
+          "%)"
+        ] })
+      ] }, label);
+    }) })
   ] });
 }
+var chartColors = ["#3b82f6", "#22c55e", "#f59e0b", "#ef4444", "#8b5cf6", "#ec4899", "#06b6d4", "#f97316"];
 function Table({ props }) {
-  const headers = props.headers ?? [];
-  const rows = props.rows ?? [];
+  const headers = Array.isArray(props.headers) ? props.headers : [];
+  const rows = Array.isArray(props.rows) ? props.rows : [];
   const caption = props.caption;
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("table", { "data-mdocui-table": true, style: { width: "100%", borderCollapse: "collapse" }, children: [
     caption && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("caption", { style: { textAlign: "left", fontWeight: 600, marginBottom: "8px" }, children: caption }),
@@ -356,17 +368,22 @@ function Table({ props }) {
         style: {
           textAlign: "left",
           padding: "8px",
-          borderBottom: "2px solid #e2e8f0",
-          fontWeight: 600
+          borderBottom: "2px solid #333",
+          fontWeight: 600,
+          color: "#94a3b8",
+          fontSize: "13px"
         },
         children: h
       },
       h
     )) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("tbody", { children: rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("tr", { children: row.map((cell, _ci) => {
-      const cellKey = `${row[0]}-${cell}`;
-      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("td", { style: { padding: "8px", borderBottom: "1px solid #f1f5f9" }, children: cell }, cellKey);
-    }) }, row.join("	"))) })
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("tbody", { children: rows.map((row) => {
+      const cells = Array.isArray(row) ? row : [String(row)];
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("tr", { children: cells.map((cell) => {
+        const cellKey = `${cells[0]}-${cell}`;
+        return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("td", { style: { padding: "8px", borderBottom: "1px solid #222" }, children: cell }, cellKey);
+      }) }, cells.join("	"));
+    }) })
   ] });
 }
 function Stat({ props }) {
@@ -374,24 +391,30 @@ function Stat({ props }) {
   const value = props.value;
   const change = props.change;
   const trend = props.trend ?? "neutral";
-  const trendColor = trend === "up" ? "#16a34a" : trend === "down" ? "#dc2626" : "#64748b";
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { "data-mdocui-stat": true, children: [
+  const trendColor = trend === "up" ? "#4ade80" : trend === "down" ? "#f87171" : "#64748b";
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { "data-mdocui-stat": true, style: { padding: "8px 0" }, children: [
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { fontSize: "13px", color: "#64748b" }, children: label }),
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { fontSize: "24px", fontWeight: 700 }, children: value }),
     change && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { fontSize: "13px", color: trendColor }, children: change })
   ] });
 }
 function Progress({ props }) {
-  const value = props.value;
+  const value = Number(props.value) || 0;
   const label = props.label;
-  const max = props.max ?? 100;
+  const max = Number(props.max) || 100;
   const pct = Math.min(100, Math.max(0, value / max * 100));
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { "data-mdocui-progress": true, children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { fontSize: "13px", marginBottom: "4px" }, children: label }),
+    label && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { fontSize: "13px", marginBottom: "4px", display: "flex", justifyContent: "space-between" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { style: { color: "#64748b" }, children: [
+        Math.round(pct),
+        "%"
+      ] })
+    ] }),
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       "div",
       {
-        style: { height: "8px", background: "#e2e8f0", borderRadius: "4px", overflow: "hidden" },
+        style: { height: "8px", background: "#27272a", borderRadius: "4px", overflow: "hidden" },
         children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           "div",
           {
@@ -439,9 +462,9 @@ function Button({ props, onAction, isStreaming }) {
         borderRadius: "6px",
         cursor: isStreaming || disabled ? "not-allowed" : "pointer",
         opacity: isStreaming || disabled ? 0.6 : 1,
-        border: variant === "outline" ? "1px solid currentColor" : "none",
-        background: variant === "primary" ? "#0f172a" : variant === "ghost" ? "transparent" : "#e2e8f0",
-        color: variant === "primary" ? "#fff" : "inherit"
+        border: variant === "outline" ? "1px solid #555" : "none",
+        background: variant === "primary" ? "#3b82f6" : variant === "ghost" ? "transparent" : "#27272a",
+        color: "#fff"
       },
       children: label
     }
@@ -482,7 +505,9 @@ function Input({ props }) {
         style: {
           width: "100%",
           padding: "8px 12px",
-          border: "1px solid #e2e8f0",
+          border: "1px solid #333",
+          background: "#18181b",
+          color: "inherit",
           borderRadius: "6px",
           boxSizing: "border-box"
         }
@@ -493,7 +518,7 @@ function Input({ props }) {
 function Select({ props, onAction, isStreaming }) {
   const name = props.name;
   const label = props.label;
-  const options = props.options ?? [];
+  const options = Array.isArray(props.options) ? props.options : [];
   const placeholder = props.placeholder;
   const required = props.required ?? false;
   const id = `mdocui-${name}`;
@@ -518,7 +543,9 @@ function Select({ props, onAction, isStreaming }) {
         style: {
           width: "100%",
           padding: "8px 12px",
-          border: "1px solid #e2e8f0",
+          border: "1px solid #333",
+          background: "#18181b",
+          color: "inherit",
           borderRadius: "6px"
         },
         children: [
@@ -633,7 +660,7 @@ function Card({ props, children }) {
     {
       "data-mdocui-card": true,
       "data-variant": props.variant ?? "default",
-      style: { border: "1px solid #e2e8f0", borderRadius: "8px", padding: "16px" },
+      style: { border: "1px solid #27272a", borderRadius: "8px", padding: "16px" },
       children: [
         title && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { "data-mdocui-card-title": true, style: { fontWeight: 600, marginBottom: "8px" }, children: title }),
         /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { "data-mdocui-card-body": true, children })
@@ -646,7 +673,7 @@ function Divider(_) {
     "hr",
     {
       "data-mdocui-divider": true,
-      style: { border: "none", borderTop: "1px solid #e2e8f0", margin: "8px 0" }
+      style: { border: "none", borderTop: "1px solid #27272a", margin: "8px 0" }
     }
   );
 }
@@ -659,7 +686,7 @@ function Accordion({ props, children }) {
   ] });
 }
 function Tabs({ props, children }) {
-  const labels = props.labels ?? [];
+  const labels = Array.isArray(props.labels) ? props.labels : [];
   const initialActive = props.active ?? 0;
   const [active, setActive] = (0, import_react4.useState)(initialActive);
   const childArray = import_react4.default.Children.toArray(children);
@@ -668,7 +695,7 @@ function Tabs({ props, children }) {
       "div",
       {
         role: "tablist",
-        style: { display: "flex", gap: "4px", borderBottom: "1px solid #e2e8f0" },
+        style: { display: "flex", gap: "4px", borderBottom: "1px solid #27272a" },
         children: labels.map((label, i) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           "button",
           {