@mdocui/react 0.1.3 → 0.1.4

package/dist/index.cjs

@@ -323,39 +323,79 @@ function Chart({ props }) {
   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, 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: `${Math.max(val / max * 100, 4)}%`,
-            background: "linear-gradient(180deg, #3b82f6, #2563eb)",
-            borderRadius: "4px 4px 0 0",
-            minHeight: "4px"
-          }
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { fontSize: "11px", marginTop: "6px", color: "#64748b" }, children: labels[i] })
-    ] }, labels[i] ?? i)) }),
+    (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: `${Math.max(val / max * 100, 4)}%`,
+                background: "linear-gradient(180deg, #3b82f6, #2563eb)",
+                borderRadius: "4px 4px 0 0",
+                minHeight: "4px"
+              }
+            }
+          ),
+          /* @__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: "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);
+      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"];
+var chartColors = [
+  "#3b82f6",
+  "#22c55e",
+  "#f59e0b",
+  "#ef4444",
+  "#8b5cf6",
+  "#ec4899",
+  "#06b6d4",
+  "#f97316"
+];
 function Table({ props }) {
   const headers = Array.isArray(props.headers) ? props.headers : [];
   const rows = Array.isArray(props.rows) ? props.rows : [];
@@ -404,13 +444,24 @@ function Progress({ props }) {
   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.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),
-        "%"
-      ] })
-    ] }),
+    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",
       {
@@ -433,14 +484,17 @@ function Progress({ props }) {
 }
 
 // src/components/interactive.tsx
+var import_react4 = require("react");
 var import_jsx_runtime4 = require("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] = (0, import_react4.useState)(false);
+  const isDisabled = isStreaming || disabled || clicked;
   const handleClick = () => {
-    if (isStreaming || disabled) return;
+    if (isDisabled) return;
     const event = {
       type: "button_click",
       action,
@@ -448,6 +502,7 @@ function Button({ props, onAction, isStreaming }) {
       tagName: "button"
     };
     onAction(event);
+    setClicked(true);
   };
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     "button",
@@ -455,13 +510,13 @@ 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,
+        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"
@@ -584,9 +639,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] = (0, import_react4.useState)(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) => {
@@ -600,7 +656,47 @@ function Form({ props, children, onAction, isStreaming }) {
       tagName: "form"
     };
     onAction(event);
+    setSubmitted(true);
   };
+  if (submitted) {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      "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__ */ (0, import_jsx_runtime4.jsx)(
+            "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__ */ (0, import_jsx_runtime4.jsx)(
     "form",
     {
@@ -614,7 +710,7 @@ function Form({ props, children, onAction, isStreaming }) {
 }
 
 // src/components/layout.tsx
-var import_react4 = __toESM(require("react"), 1);
+var import_react5 = __toESM(require("react"), 1);
 var import_jsx_runtime5 = require("react/jsx-runtime");
 function Stack({ props, children }) {
   const direction = props.direction ?? "vertical";
@@ -688,8 +784,8 @@ function Accordion({ props, children }) {
 function Tabs({ props, children }) {
   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);
+  const [active, setActive] = (0, import_react5.useState)(initialActive);
+  const childArray = import_react5.default.Children.toArray(children);
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { "data-mdocui-tabs": true, children: [
     /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       "div",