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

package/dist/chunk-CL6FYZ43.mjs

@@ -0,0 +1,105 @@
+// src/player/atoms/navigation.tsx
+import { useState, useCallback, createContext, useContext } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var RouterCtx = createContext({
+  path: "/",
+  navigate: () => {
+  },
+  params: {}
+});
+function usePlayerRouter() {
+  return useContext(RouterCtx);
+}
+var Router = ({ children, basePath, className, style }) => {
+  const [path, setPath] = useState(basePath ?? "/");
+  const navigate = useCallback((to) => {
+    setPath(to);
+  }, []);
+  return /* @__PURE__ */ jsx(RouterCtx.Provider, { value: { path, navigate, params: {} }, children: /* @__PURE__ */ jsx("div", { className, style, children }) });
+};
+function matchPath(pattern, currentPath, exact) {
+  const params = {};
+  const patternParts = pattern.split("/").filter(Boolean);
+  const pathParts = currentPath.split("/").filter(Boolean);
+  if (exact && patternParts.length !== pathParts.length) {
+    return { match: false, params };
+  }
+  if (patternParts.length > pathParts.length) {
+    return { match: false, params };
+  }
+  for (let i = 0; i < patternParts.length; i++) {
+    const pp = patternParts[i];
+    if (pp.startsWith(":")) {
+      params[pp.slice(1)] = pathParts[i];
+    } else if (pp === "*") {
+      return { match: true, params };
+    } else if (pp !== pathParts[i]) {
+      return { match: false, params };
+    }
+  }
+  return { match: true, params };
+}
+var Route = ({ children, path: routePath, exact, className, style }) => {
+  const { path } = useContext(RouterCtx);
+  const pattern = routePath ?? "/";
+  const { match, params } = matchPath(pattern, path, exact !== false);
+  if (!match) return null;
+  return /* @__PURE__ */ jsx(RouterCtx.Provider, { value: { path, navigate: useContext(RouterCtx).navigate, params }, children: /* @__PURE__ */ jsx("div", { className, style, children }) });
+};
+var NavLink = ({
+  children,
+  to,
+  label,
+  icon,
+  activeClassName,
+  className,
+  style,
+  onClick
+}) => {
+  const { path, navigate } = useContext(RouterCtx);
+  const target = to ?? "/";
+  const isActive = path === target || path.startsWith(target + "/");
+  const text = children ?? label;
+  const handleClick = useCallback((e) => {
+    e.preventDefault();
+    navigate(target);
+    if (typeof onClick === "function") onClick(e);
+  }, [navigate, target, onClick]);
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      className: `${className ?? ""} ${isActive && activeClassName ? activeClassName : ""}`.trim() || void 0,
+      onClick: handleClick,
+      style: {
+        background: isActive ? "#ebf8ff" : "transparent",
+        color: isActive ? "#2b6cb0" : "#4a5568",
+        border: "none",
+        borderRadius: 6,
+        padding: "6px 12px",
+        fontSize: 14,
+        fontWeight: isActive ? 600 : 400,
+        cursor: "pointer",
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 6,
+        transition: "background 0.15s, color 0.15s",
+        ...style
+      },
+      children: [
+        icon ? /* @__PURE__ */ jsx("span", { children: String(icon) }) : null,
+        text != null ? String(text) : null
+      ]
+    }
+  );
+};
+var RoleGuard = ({ children, role: _role, roles: _roles, fallback: _fallback }) => {
+  return /* @__PURE__ */ jsx(Fragment, { children });
+};
+
+export {
+  usePlayerRouter,
+  Router,
+  Route,
+  NavLink,
+  RoleGuard
+};