@mmapp/react 0.1.0-alpha.18 → 0.1.0-alpha.19

package/dist/grouping-E6F377VZ.mjs

@@ -0,0 +1,204 @@
+// src/player/atoms/grouping.tsx
+import React, { useState, useCallback, useEffect } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Card = ({ children, title, subtitle, padding, variant, className, style }) => /* @__PURE__ */ jsxs(
+  "div",
+  {
+    className,
+    style: {
+      background: variant === "outlined" ? "transparent" : "#fff",
+      border: "1px solid #e2e8f0",
+      borderRadius: 8,
+      padding: padding != null ? Number(padding) * 4 : 16,
+      boxShadow: variant === "elevated" ? "0 2px 8px rgba(0,0,0,0.08)" : void 0,
+      ...style
+    },
+    children: [
+      title ? /* @__PURE__ */ jsx("div", { style: { fontWeight: 600, fontSize: 16, marginBottom: subtitle ? 2 : 12 }, children: String(title) }) : null,
+      subtitle ? /* @__PURE__ */ jsx("div", { style: { fontSize: 13, color: "#718096", marginBottom: 12 }, children: String(subtitle) }) : null,
+      children
+    ]
+  }
+);
+var Section = ({ children, title, description, collapsible, defaultOpen, className, style }) => {
+  const [open, setOpen] = useState(defaultOpen !== false);
+  return /* @__PURE__ */ jsxs("div", { className, style: { marginBottom: 16, ...style }, children: [
+    title ? /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          marginBottom: open ? 12 : 0,
+          cursor: collapsible ? "pointer" : void 0
+        },
+        onClick: collapsible ? () => setOpen((v) => !v) : void 0,
+        children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("div", { style: { fontWeight: 600, fontSize: 15 }, children: String(title) }),
+            description ? /* @__PURE__ */ jsx("div", { style: { fontSize: 13, color: "#718096", marginTop: 2 }, children: String(description) }) : null
+          ] }),
+          collapsible ? /* @__PURE__ */ jsx("span", { style: { color: "#a0aec0", fontSize: 18 }, children: open ? "\u25BE" : "\u25B8" }) : null
+        ]
+      }
+    ) : null,
+    open ? children : null
+  ] });
+};
+var Tabs = ({ children, tabs, defaultTab, className, style }) => {
+  const tabList = Array.isArray(tabs) ? tabs.map((t) => typeof t === "string" ? { label: t, value: t } : t) : [];
+  const [active, setActive] = useState(defaultTab ?? tabList[0]?.value ?? "");
+  if (tabList.length === 0) {
+    return /* @__PURE__ */ jsx("div", { className, style, children });
+  }
+  const childArray = React.Children.toArray(children);
+  return /* @__PURE__ */ jsxs("div", { className, style, children: [
+    /* @__PURE__ */ jsx("div", { style: { display: "flex", borderBottom: "2px solid #e2e8f0", marginBottom: 12, gap: 0 }, children: tabList.map((tab) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: () => setActive(tab.value),
+        style: {
+          padding: "8px 16px",
+          fontSize: 14,
+          fontWeight: 500,
+          cursor: "pointer",
+          border: "none",
+          background: "none",
+          borderBottom: "2px solid transparent",
+          marginBottom: -2,
+          color: active === tab.value ? "#3182ce" : "#718096",
+          borderBottomColor: active === tab.value ? "#3182ce" : "transparent"
+        },
+        children: tab.label
+      },
+      tab.value
+    )) }),
+    childArray.map((child, i) => /* @__PURE__ */ jsx("div", { style: { display: tabList[i]?.value === active ? "block" : "none" }, children: child }, i))
+  ] });
+};
+var Accordion = ({ children, items, allowMultiple, className, style }) => {
+  const [openItems, setOpenItems] = useState(/* @__PURE__ */ new Set([0]));
+  const toggle = useCallback((index) => {
+    setOpenItems((prev) => {
+      const next = new Set(allowMultiple ? prev : []);
+      if (prev.has(index)) next.delete(index);
+      else next.add(index);
+      return next;
+    });
+  }, [allowMultiple]);
+  const itemList = Array.isArray(items) ? items : [];
+  if (itemList.length === 0) {
+    return /* @__PURE__ */ jsx("div", { className, style, children });
+  }
+  return /* @__PURE__ */ jsx("div", { className, style: { border: "1px solid #e2e8f0", borderRadius: 8, overflow: "hidden", ...style }, children: itemList.map((item, i) => {
+    const itm = item;
+    const isOpen = openItems.has(i);
+    return /* @__PURE__ */ jsxs("div", { style: { borderBottom: i < itemList.length - 1 ? "1px solid #e2e8f0" : "none" }, children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          onClick: () => toggle(i),
+          style: {
+            width: "100%",
+            padding: "12px 16px",
+            background: "none",
+            border: "none",
+            textAlign: "left",
+            cursor: "pointer",
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+            fontSize: 14,
+            fontWeight: 500
+          },
+          children: [
+            /* @__PURE__ */ jsx("span", { children: String(itm.title ?? itm.label ?? `Item ${i + 1}`) }),
+            /* @__PURE__ */ jsx("span", { style: { color: "#a0aec0" }, children: isOpen ? "\u25BE" : "\u25B8" })
+          ]
+        }
+      ),
+      isOpen ? /* @__PURE__ */ jsx("div", { style: { padding: "0 16px 12px" }, children: itm.content ? String(itm.content) : null }) : null
+    ] }, i);
+  }) });
+};
+var Modal = ({ children, open, isOpen, onClose, title, size, className, style }) => {
+  const visible = Boolean(open ?? isOpen);
+  useEffect(() => {
+    if (visible) document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, [visible]);
+  if (!visible) return null;
+  const widthMap = { sm: 400, md: 560, lg: 720, xl: 960, full: 9999 };
+  const maxWidth = widthMap[size ?? "md"] ?? 560;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        position: "fixed",
+        inset: 0,
+        zIndex: 9999,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        background: "rgba(0,0,0,0.4)"
+      },
+      onClick: (e) => {
+        if (e.target === e.currentTarget && typeof onClose === "function") onClose();
+      },
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className,
+          style: {
+            background: "#fff",
+            borderRadius: 12,
+            padding: 24,
+            maxWidth,
+            width: "90%",
+            maxHeight: "85vh",
+            overflow: "auto",
+            boxShadow: "0 20px 60px rgba(0,0,0,0.2)",
+            ...style
+          },
+          children: [
+            title || onClose ? /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 16 }, children: [
+              title ? /* @__PURE__ */ jsx("div", { style: { fontWeight: 600, fontSize: 18 }, children: String(title) }) : /* @__PURE__ */ jsx("div", {}),
+              typeof onClose === "function" ? /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: () => onClose(),
+                  style: { background: "none", border: "none", fontSize: 20, cursor: "pointer", color: "#a0aec0", padding: 4 },
+                  children: "\u2715"
+                }
+              ) : null
+            ] }) : null,
+            children
+          ]
+        }
+      )
+    }
+  );
+};
+var ScrollArea = ({ children, maxHeight, className, style }) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className,
+    style: {
+      overflow: "auto",
+      maxHeight: maxHeight ? Number(maxHeight) : void 0,
+      ...style
+    },
+    children
+  }
+);
+export {
+  Accordion,
+  Card,
+  Modal,
+  ScrollArea,
+  Section,
+  Tabs
+};

package/dist/grouping-FRPOEXO3.mjs

@@ -0,0 +1,233 @@
+// src/player/atoms/grouping.tsx
+import React, { useState, useCallback, useEffect } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Card = ({ children, title, subtitle, padding, variant, className, style }) => /* @__PURE__ */ jsxs(
+  "div",
+  {
+    className,
+    style: {
+      background: variant === "outlined" ? "transparent" : "#fff",
+      border: "1px solid #e2e8f0",
+      borderRadius: 8,
+      padding: padding != null ? Number(padding) * 4 : 16,
+      boxShadow: variant === "elevated" ? "0 2px 8px rgba(0,0,0,0.08)" : void 0,
+      ...style
+    },
+    children: [
+      title ? /* @__PURE__ */ jsx("div", { style: { fontWeight: 600, fontSize: 16, marginBottom: subtitle ? 2 : 12 }, children: String(title) }) : null,
+      subtitle ? /* @__PURE__ */ jsx("div", { style: { fontSize: 13, color: "#718096", marginBottom: 12 }, children: String(subtitle) }) : null,
+      children
+    ]
+  }
+);
+var Section = ({ children, title, description, collapsible, defaultOpen, className, style }) => {
+  const [open, setOpen] = useState(defaultOpen !== false);
+  return /* @__PURE__ */ jsxs("div", { className, style: { marginBottom: 16, ...style }, children: [
+    title ? /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          marginBottom: open ? 12 : 0,
+          cursor: collapsible ? "pointer" : void 0
+        },
+        onClick: collapsible ? () => setOpen((v) => !v) : void 0,
+        children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("div", { style: { fontWeight: 600, fontSize: 15 }, children: String(title) }),
+            description ? /* @__PURE__ */ jsx("div", { style: { fontSize: 13, color: "#718096", marginTop: 2 }, children: String(description) }) : null
+          ] }),
+          collapsible ? /* @__PURE__ */ jsx("span", { style: { color: "#a0aec0", fontSize: 18 }, children: open ? "\u25BE" : "\u25B8" }) : null
+        ]
+      }
+    ) : null,
+    open ? children : null
+  ] });
+};
+var Tabs = ({ children, tabs, defaultTab, className, style }) => {
+  const tabList = Array.isArray(tabs) ? tabs.map((t) => typeof t === "string" ? { label: t, value: t } : t) : [];
+  const [active, setActive] = useState(defaultTab ?? tabList[0]?.value ?? "");
+  if (tabList.length === 0) {
+    return /* @__PURE__ */ jsx("div", { className, style, children });
+  }
+  const childArray = React.Children.toArray(children);
+  return /* @__PURE__ */ jsxs("div", { className, style, children: [
+    /* @__PURE__ */ jsx("div", { style: { display: "flex", borderBottom: "2px solid #e2e8f0", marginBottom: 12, gap: 0 }, children: tabList.map((tab) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: () => setActive(tab.value),
+        style: {
+          padding: "8px 16px",
+          fontSize: 14,
+          fontWeight: 500,
+          cursor: "pointer",
+          border: "none",
+          background: "none",
+          borderBottom: "2px solid transparent",
+          marginBottom: -2,
+          color: active === tab.value ? "#3182ce" : "#718096",
+          borderBottomColor: active === tab.value ? "#3182ce" : "transparent"
+        },
+        children: tab.label
+      },
+      tab.value
+    )) }),
+    childArray.map((child, i) => /* @__PURE__ */ jsx("div", { style: { display: tabList[i]?.value === active ? "block" : "none" }, children: child }, i))
+  ] });
+};
+var Accordion = ({ children, items, allowMultiple, className, style }) => {
+  const [openItems, setOpenItems] = useState(/* @__PURE__ */ new Set([0]));
+  const toggle = useCallback((index) => {
+    setOpenItems((prev) => {
+      const next = new Set(allowMultiple ? prev : []);
+      if (prev.has(index)) next.delete(index);
+      else next.add(index);
+      return next;
+    });
+  }, [allowMultiple]);
+  const itemList = Array.isArray(items) ? items : [];
+  if (itemList.length === 0) {
+    return /* @__PURE__ */ jsx("div", { className, style, children });
+  }
+  return /* @__PURE__ */ jsx("div", { className, style: { border: "1px solid #e2e8f0", borderRadius: 8, overflow: "hidden", ...style }, children: itemList.map((item, i) => {
+    const itm = item;
+    const isOpen = openItems.has(i);
+    return /* @__PURE__ */ jsxs("div", { style: { borderBottom: i < itemList.length - 1 ? "1px solid #e2e8f0" : "none" }, children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          onClick: () => toggle(i),
+          style: {
+            width: "100%",
+            padding: "12px 16px",
+            background: "none",
+            border: "none",
+            textAlign: "left",
+            cursor: "pointer",
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+            fontSize: 14,
+            fontWeight: 500
+          },
+          children: [
+            /* @__PURE__ */ jsx("span", { children: String(itm.title ?? itm.label ?? `Item ${i + 1}`) }),
+            /* @__PURE__ */ jsx("span", { style: { color: "#a0aec0" }, children: isOpen ? "\u25BE" : "\u25B8" })
+          ]
+        }
+      ),
+      isOpen ? /* @__PURE__ */ jsx("div", { style: { padding: "0 16px 12px" }, children: itm.content ? String(itm.content) : null }) : null
+    ] }, i);
+  }) });
+};
+var Modal = ({ children, open, isOpen, onClose, title, size, id, nodeId, className, style }) => {
+  const modalId = id ?? nodeId;
+  const [eventOpen, setEventOpen] = useState(false);
+  useEffect(() => {
+    if (!modalId) return;
+    const handleOpen = (e) => {
+      const detail = e.detail;
+      if (detail === modalId || detail?.id === modalId) {
+        setEventOpen(true);
+      }
+    };
+    const handleClose = (e) => {
+      const detail = e.detail;
+      if (detail === modalId || detail?.id === modalId) {
+        setEventOpen(false);
+      }
+    };
+    window.addEventListener("openModal", handleOpen);
+    window.addEventListener("closeModal", handleClose);
+    return () => {
+      window.removeEventListener("openModal", handleOpen);
+      window.removeEventListener("closeModal", handleClose);
+    };
+  }, [modalId]);
+  const visible = Boolean(open ?? isOpen ?? eventOpen);
+  useEffect(() => {
+    if (visible) document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, [visible]);
+  if (!visible) return null;
+  const widthMap = { sm: 400, md: 560, lg: 720, xl: 960, full: 9999 };
+  const maxWidth = widthMap[size ?? "md"] ?? 560;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        position: "fixed",
+        inset: 0,
+        zIndex: 9999,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        background: "rgba(0,0,0,0.4)"
+      },
+      onClick: (e) => {
+        if (e.target === e.currentTarget) {
+          setEventOpen(false);
+          if (typeof onClose === "function") onClose();
+        }
+      },
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className,
+          style: {
+            background: "#fff",
+            borderRadius: 12,
+            padding: 24,
+            maxWidth,
+            width: "90%",
+            maxHeight: "85vh",
+            overflow: "auto",
+            boxShadow: "0 20px 60px rgba(0,0,0,0.2)",
+            ...style
+          },
+          children: [
+            title || onClose ? /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 16 }, children: [
+              title ? /* @__PURE__ */ jsx("div", { style: { fontWeight: 600, fontSize: 18 }, children: String(title) }) : /* @__PURE__ */ jsx("div", {}),
+              typeof onClose === "function" ? /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: () => {
+                    setEventOpen(false);
+                    onClose();
+                  },
+                  style: { background: "none", border: "none", fontSize: 20, cursor: "pointer", color: "#a0aec0", padding: 4 },
+                  children: "\u2715"
+                }
+              ) : null
+            ] }) : null,
+            children
+          ]
+        }
+      )
+    }
+  );
+};
+var ScrollArea = ({ children, maxHeight, className, style }) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className,
+    style: {
+      overflow: "auto",
+      maxHeight: maxHeight ? Number(maxHeight) : void 0,
+      ...style
+    },
+    children
+  }
+);
+export {
+  Accordion,
+  Card,
+  Modal,
+  ScrollArea,
+  Section,
+  Tabs
+};