@frontmcp/ui 0.12.2 → 1.0.0-beta.1

package/esm/bridge/index.mjs

@@ -1458,9 +1458,7 @@ var ExtAppsNotSupportedError = class extends Error {
 var CLAUDE_DOMAINS = ["claude.ai", "anthropic.com"];
 function isValidClaudeDomain(hostname) {
   const lowerHost = hostname.toLowerCase();
-  return CLAUDE_DOMAINS.some(
-    (domain) => lowerHost === domain || lowerHost.endsWith("." + domain)
-  );
+  return CLAUDE_DOMAINS.some((domain) => lowerHost === domain || lowerHost.endsWith("." + domain));
 }
 var ClaudeAdapter = class extends BaseAdapter {
   id = "claude";
@@ -1565,9 +1563,7 @@ function createClaudeAdapter() {
 var GEMINI_DOMAINS = ["gemini.google.com", "bard.google.com"];
 function isValidGeminiDomain(hostname) {
   const lowerHost = hostname.toLowerCase();
-  return GEMINI_DOMAINS.some(
-    (domain) => lowerHost === domain || lowerHost.endsWith("." + domain)
-  );
+  return GEMINI_DOMAINS.some((domain) => lowerHost === domain || lowerHost.endsWith("." + domain));
 }
 var GeminiAdapter = class extends BaseAdapter {
   id = "gemini";

package/esm/components/Alert/index.mjs

@@ -0,0 +1,28 @@
+// libs/ui/src/components/Alert/Alert.tsx
+import { useState } from "react";
+import MuiAlert from "@mui/material/Alert";
+import AlertTitle from "@mui/material/AlertTitle";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Alert({
+  severity = "info",
+  title,
+  dismissible = false,
+  onDismiss,
+  icon,
+  children
+}) {
+  const [dismissed, setDismissed] = useState(false);
+  if (dismissed) return null;
+  const handleClose = dismissible ? () => {
+    setDismissed(true);
+    onDismiss?.();
+  } : void 0;
+  return /* @__PURE__ */ jsxs(MuiAlert, { severity, onClose: handleClose, icon, children: [
+    title && /* @__PURE__ */ jsx(AlertTitle, { children: title }),
+    children
+  ] });
+}
+export {
+  Alert,
+  Alert as default
+};

package/esm/components/Avatar/index.mjs

@@ -0,0 +1,10 @@
+// libs/ui/src/components/Avatar/Avatar.tsx
+import MuiAvatar from "@mui/material/Avatar";
+import { jsx } from "react/jsx-runtime";
+function Avatar({ src, alt, children, size = 40, variant = "circular" }) {
+  return /* @__PURE__ */ jsx(MuiAvatar, { src, alt, variant, sx: { width: size, height: size }, children });
+}
+export {
+  Avatar,
+  Avatar as default
+};

package/esm/components/Badge/index.mjs

@@ -0,0 +1,56 @@
+// libs/ui/src/components/Badge/Badge.tsx
+import React from "react";
+import Chip from "@mui/material/Chip";
+import { jsx } from "react/jsx-runtime";
+function mapColor(variant) {
+  switch (variant) {
+    case "default":
+      return "default";
+    case "primary":
+      return "primary";
+    case "success":
+      return "success";
+    case "warning":
+      return "warning";
+    case "error":
+      return "error";
+    case "info":
+      return "info";
+  }
+}
+var DotIndicator = React.createElement("span", {
+  style: {
+    width: 8,
+    height: 8,
+    borderRadius: "50%",
+    backgroundColor: "currentColor",
+    display: "inline-block"
+  }
+});
+function Badge({
+  variant = "default",
+  label,
+  dot = false,
+  removable = false,
+  onRemove,
+  size = "small",
+  icon
+}) {
+  const avatarProp = dot && !icon ? { avatar: DotIndicator } : {};
+  return /* @__PURE__ */ jsx(
+    Chip,
+    {
+      label,
+      color: mapColor(variant),
+      size,
+      icon,
+      ...avatarProp,
+      onDelete: removable && onRemove ? onRemove : void 0,
+      variant: "filled"
+    }
+  );
+}
+export {
+  Badge,
+  Badge as default
+};

package/esm/components/Button/index.mjs

@@ -0,0 +1,58 @@
+// libs/ui/src/components/Button/Button.tsx
+import { styled } from "@mui/material/styles";
+import MuiButton from "@mui/material/Button";
+import CircularProgress from "@mui/material/CircularProgress";
+import { jsx } from "react/jsx-runtime";
+function mapVariant(variant) {
+  switch (variant) {
+    case "primary":
+      return { variant: "contained", color: "primary" };
+    case "secondary":
+      return { variant: "outlined", color: "secondary" };
+    case "danger":
+      return { variant: "contained", color: "error" };
+    case "ghost":
+      return { variant: "text", color: "inherit" };
+  }
+}
+var StyledButton = styled(MuiButton, {
+  name: "Button",
+  slot: "Root"
+})(({ theme }) => ({
+  textTransform: "none",
+  fontWeight: 500,
+  borderRadius: theme.shape.borderRadius
+}));
+function Button({
+  variant = "primary",
+  size = "medium",
+  loading = false,
+  disabled = false,
+  startIcon,
+  endIcon,
+  fullWidth = false,
+  onClick,
+  type = "button",
+  children
+}) {
+  const mapped = mapVariant(variant);
+  return /* @__PURE__ */ jsx(
+    StyledButton,
+    {
+      variant: mapped.variant,
+      color: mapped.color,
+      size,
+      disabled: disabled || loading,
+      startIcon: loading ? /* @__PURE__ */ jsx(CircularProgress, { size: 16, color: "inherit" }) : startIcon,
+      endIcon,
+      fullWidth,
+      onClick,
+      type,
+      children
+    }
+  );
+}
+export {
+  Button,
+  Button as default
+};

package/esm/components/Card/index.mjs

@@ -0,0 +1,77 @@
+// libs/ui/src/components/Card/Card.tsx
+import { styled } from "@mui/material/styles";
+import MuiCard from "@mui/material/Card";
+import CardHeader from "@mui/material/CardHeader";
+import CardContent from "@mui/material/CardContent";
+import CardActions from "@mui/material/CardActions";
+import CardActionArea from "@mui/material/CardActionArea";
+import { jsx, jsxs } from "react/jsx-runtime";
+var StyledCard = styled(MuiCard, {
+  name: "Card",
+  slot: "Root"
+})(({ theme }) => ({
+  borderRadius: theme.shape.borderRadius,
+  transition: theme.transitions.create(["box-shadow", "border-color"], {
+    duration: theme.transitions.duration.short
+  })
+}));
+var StyledCardHeader = styled(CardHeader, {
+  name: "Card",
+  slot: "Header"
+})(({ theme }) => ({
+  "& .MuiCardHeader-title": {
+    fontWeight: 600,
+    fontSize: theme.typography.body1.fontSize
+  },
+  "& .MuiCardHeader-subheader": {
+    fontSize: theme.typography.body2.fontSize
+  }
+}));
+var StyledCardContent = styled(CardContent, {
+  name: "Card",
+  slot: "Content"
+})({
+  "&:last-child": {
+    paddingBottom: 16
+  }
+});
+var StyledCardActions = styled(CardActions, {
+  name: "Card",
+  slot: "Actions"
+})(({ theme }) => ({
+  borderTop: `1px solid ${theme.palette.divider}`,
+  padding: theme.spacing(1, 2)
+}));
+function Card({
+  title,
+  subtitle,
+  headerActions,
+  footer,
+  elevation = 1,
+  clickable = false,
+  onClick,
+  slotProps,
+  children
+}) {
+  const header = title || subtitle || headerActions ? /* @__PURE__ */ jsx(StyledCardHeader, { title, subheader: subtitle, action: headerActions, ...slotProps?.header }) : null;
+  const content = /* @__PURE__ */ jsx(StyledCardContent, { ...slotProps?.content, children });
+  const actions = footer ? /* @__PURE__ */ jsx(StyledCardActions, { ...slotProps?.actions, children: footer }) : null;
+  if (clickable) {
+    return /* @__PURE__ */ jsxs(StyledCard, { elevation, ...slotProps?.root, children: [
+      /* @__PURE__ */ jsxs(CardActionArea, { onClick, children: [
+        header,
+        content
+      ] }),
+      actions
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(StyledCard, { elevation, onClick, ...slotProps?.root, children: [
+    header,
+    content,
+    actions
+  ] });
+}
+export {
+  Card,
+  Card as default
+};

package/esm/components/List/index.mjs

@@ -0,0 +1,25 @@
+// libs/ui/src/components/List/List.tsx
+import React from "react";
+import MuiList from "@mui/material/List";
+import ListItem from "@mui/material/ListItem";
+import ListItemButton from "@mui/material/ListItemButton";
+import ListItemIcon from "@mui/material/ListItemIcon";
+import ListItemText from "@mui/material/ListItemText";
+import Divider from "@mui/material/Divider";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function List({ items, dense = false }) {
+  return /* @__PURE__ */ jsx(MuiList, { dense, children: items.map((item) => {
+    const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+      item.icon && /* @__PURE__ */ jsx(ListItemIcon, { children: item.icon }),
+      /* @__PURE__ */ jsx(ListItemText, { primary: item.primary, secondary: item.secondary })
+    ] });
+    return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+      item.onClick ? /* @__PURE__ */ jsx(ListItemButton, { onClick: item.onClick, children: content }) : /* @__PURE__ */ jsx(ListItem, { children: content }),
+      item.divider && /* @__PURE__ */ jsx(Divider, {})
+    ] }, item.id);
+  }) });
+}
+export {
+  List,
+  List as default
+};

package/esm/components/Loader/index.mjs

@@ -0,0 +1,141 @@
+// libs/ui/src/components/Loader/Loader.tsx
+import Box from "@mui/material/Box";
+import CircularProgress from "@mui/material/CircularProgress";
+import LinearProgress from "@mui/material/LinearProgress";
+import Skeleton from "@mui/material/Skeleton";
+import Backdrop from "@mui/material/Backdrop";
+import Typography from "@mui/material/Typography";
+import { styled } from "@mui/material/styles";
+
+// libs/ui/src/components/Loader/LoaderContext.tsx
+import { createContext, useContext, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+var LoaderContext = createContext({});
+function LoaderProvider({
+  custom,
+  children
+}) {
+  const value = useMemo(() => ({ customLoader: custom }), [custom]);
+  return /* @__PURE__ */ jsx(LoaderContext.Provider, { value, children });
+}
+function useLoaderContext() {
+  return useContext(LoaderContext);
+}
+
+// libs/ui/src/components/Loader/Loader.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var LoaderRoot = styled(Box, {
+  name: "FrontMcpLoader",
+  slot: "Root"
+})({
+  display: "inline-flex",
+  flexDirection: "column",
+  alignItems: "center",
+  gap: 8
+});
+var BarRoot = styled(Box, {
+  name: "FrontMcpLoader",
+  slot: "Bar"
+})({
+  width: "100%",
+  display: "flex",
+  flexDirection: "column",
+  gap: 4
+});
+var OverlayRoot = styled(Box, {
+  name: "FrontMcpLoader",
+  slot: "Overlay"
+})({
+  position: "relative"
+});
+function Loader({
+  variant = "spinner",
+  determinate = false,
+  value,
+  size = 40,
+  color = "primary",
+  label,
+  skeletonShape = "text",
+  skeletonWidth,
+  skeletonHeight,
+  skeletonLines = 1,
+  open = true,
+  contained = false,
+  children,
+  custom
+}) {
+  const { customLoader } = useLoaderContext();
+  const renderFn = custom ?? customLoader;
+  if (renderFn) {
+    return renderFn({ variant, label, value });
+  }
+  switch (variant) {
+    case "bar":
+      return /* @__PURE__ */ jsxs(BarRoot, { children: [
+        /* @__PURE__ */ jsx2(
+          LinearProgress,
+          {
+            variant: determinate ? "determinate" : "indeterminate",
+            value: determinate ? value : void 0,
+            color
+          }
+        ),
+        label && /* @__PURE__ */ jsx2(Typography, { variant: "caption", color: "text.secondary", children: label })
+      ] });
+    case "skeleton": {
+      const lines = Math.max(1, skeletonLines);
+      return /* @__PURE__ */ jsx2(Box, { children: Array.from({ length: lines }, (_, i) => /* @__PURE__ */ jsx2(
+        Skeleton,
+        {
+          variant: skeletonShape,
+          width: skeletonWidth ?? (skeletonShape === "circular" ? 40 : "100%"),
+          height: skeletonHeight ?? (skeletonShape === "circular" ? 40 : void 0),
+          animation: "wave"
+        },
+        i
+      )) });
+    }
+    case "overlay":
+      return /* @__PURE__ */ jsxs(OverlayRoot, { children: [
+        children,
+        /* @__PURE__ */ jsxs(
+          Backdrop,
+          {
+            open,
+            sx: {
+              position: contained ? "absolute" : "fixed",
+              zIndex: (theme) => theme.zIndex.drawer + 1,
+              color: "#fff",
+              flexDirection: "column",
+              gap: 1
+            },
+            children: [
+              /* @__PURE__ */ jsx2(CircularProgress, { color: "inherit", size }),
+              label && /* @__PURE__ */ jsx2(Typography, { variant: "body2", color: "inherit", children: label })
+            ]
+          }
+        )
+      ] });
+    case "spinner":
+    default:
+      return /* @__PURE__ */ jsxs(LoaderRoot, { children: [
+        /* @__PURE__ */ jsx2(
+          CircularProgress,
+          {
+            variant: determinate ? "determinate" : "indeterminate",
+            value: determinate ? value : void 0,
+            size,
+            color
+          }
+        ),
+        label && /* @__PURE__ */ jsx2(Typography, { variant: "caption", color: "text.secondary", children: label })
+      ] });
+  }
+}
+export {
+  Loader,
+  LoaderContext,
+  LoaderProvider,
+  Loader as default,
+  useLoaderContext
+};

package/esm/components/Modal/index.mjs

@@ -0,0 +1,47 @@
+// libs/ui/src/components/Modal/Modal.tsx
+import { styled } from "@mui/material/styles";
+import Dialog from "@mui/material/Dialog";
+import DialogTitle from "@mui/material/DialogTitle";
+import DialogContent from "@mui/material/DialogContent";
+import DialogActions from "@mui/material/DialogActions";
+import IconButton from "@mui/material/IconButton";
+import { jsx, jsxs } from "react/jsx-runtime";
+var StyledDialogTitle = styled(DialogTitle, {
+  name: "Modal",
+  slot: "Title"
+})(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  fontWeight: 600,
+  fontSize: theme.typography.h6.fontSize
+}));
+var StyledDialogContent = styled(DialogContent, {
+  name: "Modal",
+  slot: "Content"
+})(({ theme }) => ({
+  paddingTop: `${theme.spacing(2)} !important`
+}));
+function Modal({
+  open,
+  onClose,
+  title,
+  actions,
+  maxWidth = "sm",
+  fullWidth = true,
+  slotProps,
+  children
+}) {
+  return /* @__PURE__ */ jsxs(Dialog, { open, onClose, maxWidth, fullWidth, children: [
+    title && /* @__PURE__ */ jsxs(StyledDialogTitle, { ...slotProps?.title, children: [
+      title,
+      /* @__PURE__ */ jsx(IconButton, { onClick: onClose, size: "small", "aria-label": "close", children: "\u2715" })
+    ] }),
+    /* @__PURE__ */ jsx(StyledDialogContent, { ...slotProps?.content, children }),
+    actions && /* @__PURE__ */ jsx(DialogActions, { ...slotProps?.actions, children: actions })
+  ] });
+}
+export {
+  Modal,
+  Modal as default
+};

package/esm/components/Select/index.mjs

@@ -0,0 +1,45 @@
+// libs/ui/src/components/Select/Select.tsx
+import MuiTextField from "@mui/material/TextField";
+import MenuItem from "@mui/material/MenuItem";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Select({
+  label,
+  value,
+  defaultValue,
+  onChange,
+  options,
+  placeholder,
+  error = false,
+  helperText,
+  disabled = false,
+  required = false,
+  fullWidth = true,
+  size = "small"
+}) {
+  return /* @__PURE__ */ jsxs(
+    MuiTextField,
+    {
+      select: true,
+      label,
+      value,
+      defaultValue,
+      onChange: onChange ? (e) => onChange(e.target.value) : void 0,
+      error,
+      helperText,
+      disabled,
+      required,
+      fullWidth,
+      size,
+      variant: "outlined",
+      ...placeholder ? { SelectProps: { displayEmpty: true } } : {},
+      children: [
+        placeholder && /* @__PURE__ */ jsx(MenuItem, { value: "", disabled: true, children: placeholder }),
+        options.map((opt) => /* @__PURE__ */ jsx(MenuItem, { value: opt.value, children: opt.label }, opt.value))
+      ]
+    }
+  );
+}
+export {
+  Select,
+  Select as default
+};

package/esm/components/Table/index.mjs

@@ -0,0 +1,37 @@
+// libs/ui/src/components/Table/Table.tsx
+import { styled } from "@mui/material/styles";
+import MuiTable from "@mui/material/Table";
+import TableBody from "@mui/material/TableBody";
+import TableCell from "@mui/material/TableCell";
+import TableContainer from "@mui/material/TableContainer";
+import TableHead from "@mui/material/TableHead";
+import TableRow from "@mui/material/TableRow";
+import Paper from "@mui/material/Paper";
+import { jsx, jsxs } from "react/jsx-runtime";
+var StyledHeaderCell = styled(TableCell, {
+  name: "Table",
+  slot: "HeaderCell"
+})(({ theme }) => ({
+  fontWeight: 600,
+  backgroundColor: theme.palette.mode === "dark" ? theme.palette.grey[900] : theme.palette.grey[50]
+}));
+var StyledBodyCell = styled(TableCell, {
+  name: "Table",
+  slot: "BodyCell"
+})({});
+function Table({
+  columns,
+  rows,
+  size = "small",
+  stickyHeader = false,
+  maxHeight
+}) {
+  return /* @__PURE__ */ jsx(TableContainer, { component: Paper, variant: "outlined", sx: maxHeight ? { maxHeight } : void 0, children: /* @__PURE__ */ jsxs(MuiTable, { size, stickyHeader, children: [
+    /* @__PURE__ */ jsx(TableHead, { children: /* @__PURE__ */ jsx(TableRow, { children: columns.map((col) => /* @__PURE__ */ jsx(StyledHeaderCell, { align: col.align ?? "left", children: col.label }, col.key)) }) }),
+    /* @__PURE__ */ jsx(TableBody, { children: rows.map((row, idx) => /* @__PURE__ */ jsx(TableRow, { hover: true, children: columns.map((col) => /* @__PURE__ */ jsx(StyledBodyCell, { align: col.align ?? "left", children: String(row[col.key] ?? "") }, col.key)) }, idx)) })
+  ] }) });
+}
+export {
+  Table,
+  Table as default
+};

package/esm/components/TextField/index.mjs

@@ -0,0 +1,44 @@
+// libs/ui/src/components/TextField/TextField.tsx
+import MuiTextField from "@mui/material/TextField";
+import { jsx } from "react/jsx-runtime";
+function TextField({
+  label,
+  placeholder,
+  value,
+  defaultValue,
+  onChange,
+  type = "text",
+  multiline = false,
+  rows,
+  error = false,
+  helperText,
+  disabled = false,
+  required = false,
+  fullWidth = true,
+  size = "small"
+}) {
+  return /* @__PURE__ */ jsx(
+    MuiTextField,
+    {
+      label,
+      placeholder,
+      value,
+      defaultValue,
+      onChange: onChange ? (e) => onChange(e.target.value) : void 0,
+      type,
+      multiline,
+      rows,
+      error,
+      helperText,
+      disabled,
+      required,
+      fullWidth,
+      size,
+      variant: "outlined"
+    }
+  );
+}
+export {
+  TextField,
+  TextField as default
+};