@mdocui/react 0.1.3 → 0.1.4

package/dist/index.js

@@ -264,39 +264,79 @@ function Chart({ props }) {
   const max = values.reduce((a, b) => Math.max(a, b), 1);
   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 === "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: { 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);
+      return /* @__PURE__ */ jsxs2(
+        "div",
+        {
+          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"];
+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 : [];
@@ -345,13 +385,24 @@ function Progress({ props }) {
   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__ */ 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),
-        "%"
-      ] })
-    ] }),
+    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",
       {
@@ -374,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,
@@ -389,6 +443,7 @@ function Button({ props, onAction, isStreaming }) {
       tagName: "button"
     };
     onAction(event);
+    setClicked(true);
   };
   return /* @__PURE__ */ jsx4(
     "button",
@@ -396,13 +451,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"
@@ -525,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) => {
@@ -541,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",
     {
@@ -555,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";
@@ -629,7 +725,7 @@ function Accordion({ props, children }) {
 function Tabs({ props, children }) {
   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(