@mdocui/react 0.1.2 → 0.1.4

package/dist/index.js

@@ -116,10 +116,10 @@ import { ComponentRegistry } from "@mdocui/core";
 // src/components/content.tsx
 import { jsx as jsx2, jsxs } from "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";
@@ -145,11 +145,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;
@@ -248,7 +248,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
     }
   );
@@ -258,36 +258,88 @@ function Link({ props, onAction, isStreaming }) {
 import { jsx as jsx3, jsxs as jsxs2 } from "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__ */ jsxs2("div", { "data-mdocui-chart": true, "data-type": type, children: [
-    title && /* @__PURE__ */ jsx3("div", { style: { fontWeight: 600, marginBottom: "8px" }, children: title }),
-    (type === "bar" || type === "line") && /* @__PURE__ */ jsx3("div", { style: { display: "flex", alignItems: "flex-end", gap: "4px", height: "120px" }, children: values.map((val, i) => /* @__PURE__ */ jsxs2("div", { style: { flex: 1, textAlign: "center" }, children: [
-      /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsxs2("div", { "data-mdocui-chart": true, "data-type": type, style: { padding: "12px 0" }, children: [
+    title && /* @__PURE__ */ jsx3("div", { style: { fontWeight: 600, marginBottom: "12px" }, children: title }),
+    (type === "bar" || type === "line") && /* @__PURE__ */ jsx3("div", { style: { display: "flex", alignItems: "flex-end", gap: "6px", height: "140px" }, children: values.map((val, i) => /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        style: {
+          flex: 1,
+          textAlign: "center",
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "flex-end",
+          height: "100%"
+        },
+        children: [
+          /* @__PURE__ */ jsx3("div", { style: { fontSize: "11px", color: "#94a3b8", marginBottom: "4px" }, children: val }),
+          /* @__PURE__ */ jsx3(
+            "div",
+            {
+              style: {
+                height: `${Math.max(val / max * 100, 4)}%`,
+                background: "linear-gradient(180deg, #3b82f6, #2563eb)",
+                borderRadius: "4px 4px 0 0",
+                minHeight: "4px"
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx3("div", { style: { fontSize: "11px", marginTop: "6px", color: "#64748b" }, children: labels[i] })
+        ]
+      },
+      labels[i] ?? i
+    )) }),
+    (type === "pie" || type === "donut") && /* @__PURE__ */ jsx3("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__ */ jsxs2(
         "div",
         {
-          style: {
-            height: `${val / max * 100}%`,
-            background: "#3b82f6",
-            borderRadius: "4px 4px 0 0",
-            minHeight: "2px"
-          }
-        }
-      ),
-      /* @__PURE__ */ jsx3("div", { style: { fontSize: "11px", marginTop: "4px", color: "#64748b" }, children: labels[i] })
-    ] }, labels[i] ?? i)) }),
-    (type === "pie" || type === "donut") && /* @__PURE__ */ jsx3("div", { style: { display: "flex", gap: "8px", flexWrap: "wrap" }, children: labels.map((label, i) => /* @__PURE__ */ jsxs2("span", { style: { fontSize: "13px" }, children: [
-      label,
-      ": ",
-      values[i]
-    ] }, label)) })
+          style: { display: "flex", alignItems: "center", gap: "6px", fontSize: "13px" },
+          children: [
+            /* @__PURE__ */ jsx3(
+              "div",
+              {
+                style: {
+                  width: 10,
+                  height: 10,
+                  borderRadius: "50%",
+                  background: chartColors[i % chartColors.length]
+                }
+              }
+            ),
+            /* @__PURE__ */ jsxs2("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__ */ jsxs2("table", { "data-mdocui-table": true, style: { width: "100%", borderCollapse: "collapse" }, children: [
     caption && /* @__PURE__ */ jsx3("caption", { style: { textAlign: "left", fontWeight: 600, marginBottom: "8px" }, children: caption }),
@@ -297,17 +349,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__ */ jsx3("tbody", { children: rows.map((row) => /* @__PURE__ */ jsx3("tr", { children: row.map((cell, _ci) => {
-      const cellKey = `${row[0]}-${cell}`;
-      return /* @__PURE__ */ jsx3("td", { style: { padding: "8px", borderBottom: "1px solid #f1f5f9" }, children: cell }, cellKey);
-    }) }, row.join("	"))) })
+    /* @__PURE__ */ jsx3("tbody", { children: rows.map((row) => {
+      const cells = Array.isArray(row) ? row : [String(row)];
+      return /* @__PURE__ */ jsx3("tr", { children: cells.map((cell) => {
+        const cellKey = `${cells[0]}-${cell}`;
+        return /* @__PURE__ */ jsx3("td", { style: { padding: "8px", borderBottom: "1px solid #222" }, children: cell }, cellKey);
+      }) }, cells.join("	"));
+    }) })
   ] });
 }
 function Stat({ props }) {
@@ -315,24 +372,41 @@ 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__ */ jsxs2("div", { "data-mdocui-stat": true, children: [
+  const trendColor = trend === "up" ? "#4ade80" : trend === "down" ? "#f87171" : "#64748b";
+  return /* @__PURE__ */ jsxs2("div", { "data-mdocui-stat": true, style: { padding: "8px 0" }, children: [
     /* @__PURE__ */ jsx3("div", { style: { fontSize: "13px", color: "#64748b" }, children: label }),
     /* @__PURE__ */ jsx3("div", { style: { fontSize: "24px", fontWeight: 700 }, children: value }),
     change && /* @__PURE__ */ jsx3("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__ */ jsxs2("div", { "data-mdocui-progress": true, children: [
-    label && /* @__PURE__ */ jsx3("div", { style: { fontSize: "13px", marginBottom: "4px" }, children: label }),
+    label && /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        style: {
+          fontSize: "13px",
+          marginBottom: "4px",
+          display: "flex",
+          justifyContent: "space-between"
+        },
+        children: [
+          /* @__PURE__ */ jsx3("span", { children: label }),
+          /* @__PURE__ */ jsxs2("span", { style: { color: "#64748b" }, children: [
+            Math.round(pct),
+            "%"
+          ] })
+        ]
+      }
+    ),
     /* @__PURE__ */ jsx3(
       "div",
       {
-        style: { height: "8px", background: "#e2e8f0", borderRadius: "4px", overflow: "hidden" },
+        style: { height: "8px", background: "#27272a", borderRadius: "4px", overflow: "hidden" },
         children: /* @__PURE__ */ jsx3(
           "div",
           {
@@ -351,14 +425,17 @@ function Progress({ props }) {
 }
 
 // src/components/interactive.tsx
+import { useState as useState2 } from "react";
 import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 function Button({ props, onAction, isStreaming }) {
   const action = props.action;
   const label = props.label;
   const variant = props.variant ?? "primary";
   const disabled = props.disabled ?? false;
+  const [clicked, setClicked] = useState2(false);
+  const isDisabled = isStreaming || disabled || clicked;
   const handleClick = () => {
-    if (isStreaming || disabled) return;
+    if (isDisabled) return;
     const event = {
       type: "button_click",
       action,
@@ -366,6 +443,7 @@ function Button({ props, onAction, isStreaming }) {
       tagName: "button"
     };
     onAction(event);
+    setClicked(true);
   };
   return /* @__PURE__ */ jsx4(
     "button",
@@ -373,16 +451,16 @@ function Button({ props, onAction, isStreaming }) {
       type: "button",
       "data-mdocui-button": true,
       "data-variant": variant,
-      disabled: isStreaming || disabled,
+      disabled: isDisabled,
       onClick: handleClick,
       style: {
         padding: "8px 16px",
         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"
+        cursor: isDisabled ? "not-allowed" : "pointer",
+        opacity: isDisabled ? 0.5 : 1,
+        border: variant === "outline" ? "1px solid #555" : "none",
+        background: variant === "primary" ? "#3b82f6" : variant === "ghost" ? "transparent" : "#27272a",
+        color: "#fff"
       },
       children: label
     }
@@ -423,7 +501,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"
         }
@@ -434,7 +514,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}`;
@@ -459,7 +539,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: [
@@ -498,9 +580,10 @@ function Checkbox({ props, onAction, isStreaming }) {
 function Form({ props, children, onAction, isStreaming }) {
   const formName = props.name;
   const action = props.action ?? `submit:${formName}`;
+  const [submitted, setSubmitted] = useState2(false);
   const handleSubmit = (e) => {
     e.preventDefault();
-    if (isStreaming) return;
+    if (isStreaming || submitted) return;
     const formData = new FormData(e.currentTarget);
     const state = {};
     formData.forEach((value, key) => {
@@ -514,7 +597,47 @@ function Form({ props, children, onAction, isStreaming }) {
       tagName: "form"
     };
     onAction(event);
+    setSubmitted(true);
   };
+  if (submitted) {
+    return /* @__PURE__ */ jsxs3(
+      "div",
+      {
+        "data-mdocui-form": true,
+        "data-name": formName,
+        "data-submitted": true,
+        style: {
+          display: "flex",
+          flexDirection: "column",
+          gap: "12px",
+          opacity: 0.5,
+          pointerEvents: "none",
+          position: "relative"
+        },
+        children: [
+          children,
+          /* @__PURE__ */ jsx4(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                inset: 0,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                background: "rgba(0,0,0,0.3)",
+                borderRadius: "8px",
+                fontSize: "13px",
+                color: "#4ade80",
+                fontWeight: 500
+              },
+              children: "Submitted"
+            }
+          )
+        ]
+      }
+    );
+  }
   return /* @__PURE__ */ jsx4(
     "form",
     {
@@ -528,7 +651,7 @@ function Form({ props, children, onAction, isStreaming }) {
 }
 
 // src/components/layout.tsx
-import React, { useState as useState2 } from "react";
+import React, { useState as useState3 } from "react";
 import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 function Stack({ props, children }) {
   const direction = props.direction ?? "vertical";
@@ -574,7 +697,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__ */ jsx5("div", { "data-mdocui-card-title": true, style: { fontWeight: 600, marginBottom: "8px" }, children: title }),
         /* @__PURE__ */ jsx5("div", { "data-mdocui-card-body": true, children })
@@ -587,7 +710,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" }
     }
   );
 }
@@ -600,16 +723,16 @@ 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] = useState2(initialActive);
+  const [active, setActive] = useState3(initialActive);
   const childArray = React.Children.toArray(children);
   return /* @__PURE__ */ jsxs4("div", { "data-mdocui-tabs": true, children: [
     /* @__PURE__ */ jsx5(
       "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__ */ jsx5(
           "button",
           {