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

package/dist/actions-HOXZPBTT.mjs

@@ -0,0 +1,116 @@
+// src/player/atoms/actions.tsx
+import { useState, useCallback } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var VARIANT_STYLES = {
+  primary: { background: "#3182ce", color: "#fff", border: "1px solid #3182ce" },
+  secondary: { background: "#edf2f7", color: "#4a5568", border: "1px solid #e2e8f0" },
+  outline: { background: "transparent", color: "#3182ce", border: "1px solid #3182ce" },
+  ghost: { background: "transparent", color: "#4a5568", border: "1px solid transparent" },
+  danger: { background: "#e53e3e", color: "#fff", border: "1px solid #e53e3e" },
+  destructive: { background: "#e53e3e", color: "#fff", border: "1px solid #e53e3e" },
+  success: { background: "#38a169", color: "#fff", border: "1px solid #38a169" },
+  link: { background: "transparent", color: "#3182ce", border: "none", textDecoration: "underline" },
+  default: { background: "#fff", color: "#1a202c", border: "1px solid #e2e8f0" }
+};
+var SIZE_STYLES = {
+  xs: { padding: "2px 8px", fontSize: 11 },
+  sm: { padding: "4px 12px", fontSize: 13 },
+  md: { padding: "6px 16px", fontSize: 14 },
+  lg: { padding: "8px 24px", fontSize: 16 },
+  xl: { padding: "12px 32px", fontSize: 18 }
+};
+var Button = ({
+  children,
+  label,
+  value,
+  onClick,
+  variant,
+  size,
+  disabled,
+  loading: loadingProp,
+  icon,
+  iconRight,
+  fullWidth,
+  className,
+  style
+}) => {
+  const [isLoading, setIsLoading] = useState(false);
+  const text = children ?? label ?? value;
+  const isDisabled = Boolean(disabled) || isLoading || Boolean(loadingProp);
+  const vs = VARIANT_STYLES[variant ?? "default"] ?? VARIANT_STYLES.default;
+  const ss = SIZE_STYLES[size ?? "md"] ?? SIZE_STYLES.md;
+  const handleClick = useCallback(async (e) => {
+    if (isDisabled) return;
+    if (typeof onClick === "function") {
+      const result = onClick(e);
+      if (result && typeof result === "object" && typeof result.then === "function") {
+        setIsLoading(true);
+        try {
+          await result;
+        } finally {
+          setIsLoading(false);
+        }
+      }
+    }
+  }, [onClick, isDisabled]);
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      className,
+      disabled: isDisabled,
+      onClick: handleClick,
+      style: {
+        ...vs,
+        ...ss,
+        borderRadius: 6,
+        cursor: isDisabled ? "not-allowed" : "pointer",
+        opacity: isDisabled ? 0.6 : 1,
+        fontWeight: 500,
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 6,
+        width: fullWidth ? "100%" : void 0,
+        transition: "opacity 0.15s, background 0.15s",
+        ...style
+      },
+      children: [
+        isLoading || loadingProp ? "\u23F3" : icon ? String(icon) : null,
+        text != null ? typeof text === "string" || typeof text === "number" ? String(text) : text : null,
+        iconRight ? String(iconRight) : null
+      ]
+    }
+  );
+};
+var Link = ({ children, href, to, label, onClick, external, className, style }) => {
+  const text = children ?? label;
+  const target = href ?? to;
+  const handleClick = useCallback((e) => {
+    if (typeof onClick === "function") {
+      e.preventDefault();
+      onClick(e);
+    }
+  }, [onClick]);
+  return /* @__PURE__ */ jsx(
+    "a",
+    {
+      href: target ?? "#",
+      className,
+      onClick: handleClick,
+      target: external ? "_blank" : void 0,
+      rel: external ? "noopener noreferrer" : void 0,
+      style: {
+        color: "#3182ce",
+        textDecoration: "none",
+        cursor: "pointer",
+        fontSize: 14,
+        ...style
+      },
+      children: text != null ? String(text) : target ?? "Link"
+    }
+  );
+};
+export {
+  Button,
+  Link
+};