@xyo-network/react-card/dist/browser/index.mjs

Common React library for all XYO projects that use React

// src/components/CardContentEx.tsx
import { CardContent, styled } from "@mui/material";
import { useShareForwardedRef } from "@xyo-network/react-shared";
import { useEffect } from "react";
import { jsx } from "react/jsx-runtime";
var CardContentExRoot = styled(CardContent, {
  name: "CardContentEx",
  shouldForwardProp: (prop) => !["variant", "removePadding"].includes(prop),
  slot: "Root"
})(({ variant, removePadding }) => ({
  ...(variant === "scrollable" || removePadding) && {
    [":last-child"]: { paddingBottom: 0 },
    overflow: "auto",
    paddingTop: 0,
    ...removePadding && { padding: 0 }
  }
}));
var CardContentExWithRef = ({
  ref,
  scrollToTop = 0,
  refreshRef = 0,
  ...props
}) => {
  const sharedRef = useShareForwardedRef(ref, refreshRef);
  useEffect(() => {
    if (sharedRef && scrollToTop) {
      sharedRef.current?.scroll({ behavior: "smooth", top: 0 });
    }
  }, [sharedRef, scrollToTop]);
  return /* @__PURE__ */ jsx(CardContentExRoot, { ref: sharedRef, ...props });
};
CardContentExWithRef.displayName = "CardContentEx";
var CardContentEx = CardContentExWithRef;

// src/components/CardEx.tsx
import { Card } from "@mui/material";
import { useGradientStyles } from "@xyo-network/react-shared";
import { jsx as jsx2 } from "react/jsx-runtime";
var CardExWithRef = ({
  ref,
  style,
  gradient,
  ...props
}) => {
  const styles = useGradientStyles();
  const gradientStyle = gradient === "border" ? styles.border : gradient === "background" ? styles.background : {};
  return /* @__PURE__ */ jsx2(
    Card,
    {
      style: {
        ...gradientStyle,
        ...style
      },
      ref,
      ...props
    }
  );
};
CardExWithRef.displayName = "CardEx";
var CardEx = CardExWithRef;

// src/components/FullWidthCard/FullWidthCard.tsx
import { ArrowForwardRounded as ArrowForwardRoundedIcon } from "@mui/icons-material";
import {
  Card as Card2,
  CardActions,
  CardContent as CardContent2,
  CardMedia,
  Grid,
  IconButton,
  Typography,
  useTheme,
  Zoom
} from "@mui/material";
import { FlexGrowCol } from "@xylabs/react-flexbox";
import { alphaCss, useIsSmall } from "@xylabs/react-theme";
import { useState } from "react";
import { useNavigate } from "react-router-dom";
import { jsx as jsx3, jsxs } from "react/jsx-runtime";
var FullWidthCard = ({
  cardIsButton,
  desc,
  href,
  media,
  name,
  small,
  to,
  ...props
}) => {
  const theme = useTheme();
  const [raised, setRaised] = useState(false);
  const navigate = useNavigate();
  const isMobile = useIsSmall();
  const localRouteChange = (to2) => {
    to2 ? void navigate(to2) : void navigate("/404");
  };
  const externalRouteChange = (href2) => {
    href2 ? void window.open(href2) : void navigate("/404");
  };
  return /* @__PURE__ */ jsxs(
    Card2,
    {
      elevation: raised ? 3 : 0,
      style: { height: "100%", width: "100%" },
      ...props,
      sx: {
        "&:hover": { cursor: "pointer" },
        "backgroundColor": alphaCss(theme.vars.palette.primary.light, 0.05)
      },
      onMouseEnter: () => isMobile ? null : cardIsButton ? setRaised(true) : null,
      onMouseLeave: () => isMobile ? null : cardIsButton ? setRaised(false) : null,
      onClick: () => cardIsButton ? href ? externalRouteChange(href) : to ? localRouteChange(to) : navigate("/404") : null,
      children: [
        media ? /* @__PURE__ */ jsx3(CardMedia, { component: "img", height: "100", image: media, alt: "" }) : null,
        /* @__PURE__ */ jsx3(CardContent2, { children: /* @__PURE__ */ jsxs(Grid, { container: true, alignItems: "center", paddingY: 2, paddingX: 2, children: [
          /* @__PURE__ */ jsx3(Grid, { size: { xs: 12, md: 6 }, children: typeof name === "string" ? /* @__PURE__ */ jsx3(Typography, { fontWeight: 700, variant: "h2", textAlign: "left", paddingBottom: 1, children: name }) : name }),
          /* @__PURE__ */ jsx3(Grid, { size: { xs: 12, md: 5 }, children: /* @__PURE__ */ jsx3(Typography, { variant: "body1", fontWeight: 400, textAlign: "left", children: desc }) }),
          /* @__PURE__ */ jsx3(Grid, { size: { xs: 1 }, display: isMobile ? "none" : "flex", justifyContent: "center", children: /* @__PURE__ */ jsx3(Zoom, { in: raised, children: /* @__PURE__ */ jsx3(
            IconButton,
            {
              color: "primary",
              size: small ? "small" : "medium",
              onClick: () => href ? externalRouteChange(href) : to ? localRouteChange(to) : navigate("/404"),
              disableFocusRipple: true,
              disableRipple: true,
              disableTouchRipple: true,
              children: /* @__PURE__ */ jsx3(ArrowForwardRoundedIcon, { fontSize: small ? "small" : "medium" })
            }
          ) }) })
        ] }) }),
        /* @__PURE__ */ jsx3(CardActions, { sx: { display: { md: isMobile ? "flex" : "none" } }, children: /* @__PURE__ */ jsx3(FlexGrowCol, { alignItems: "flex-end", children: /* @__PURE__ */ jsx3(
          IconButton,
          {
            color: "primary",
            size: small ? "small" : "medium",
            onClick: () => href ? externalRouteChange(href) : to ? localRouteChange(to) : navigate("/404"),
            disableFocusRipple: true,
            disableRipple: true,
            disableTouchRipple: true,
            children: /* @__PURE__ */ jsx3(ArrowForwardRoundedIcon, { fontSize: small ? "small" : "medium" })
          }
        ) }) })
      ]
    }
  );
};

// src/components/PageCard.tsx
import { Refresh as RefreshIcon } from "@mui/icons-material";
import { CardHeader, IconButton as IconButton2 } from "@mui/material";
import { TypographyEx } from "@xyo-network/react-shared";
import { Fragment, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
var PageCardWithRef = ({
  ref,
  subheader,
  title,
  onRefresh,
  children,
  action,
  style,
  ...props
}) => {
  return /* @__PURE__ */ jsxs2(
    CardEx,
    {
      style: {
        backgroundColor: "transparent",
        position: "relative",
        ...style
      },
      elevation: 0,
      ref,
      ...props,
      children: [
        /* @__PURE__ */ jsx4(
          CardHeader,
          {
            title: /* @__PURE__ */ jsx4(TypographyEx, { variant: "h5", gutterBottom: true, children: title }),
            subheader: /* @__PURE__ */ jsx4(TypographyEx, { variant: "subtitle1", children: subheader }),
            action: action ?? /* @__PURE__ */ jsx4(Fragment, { children: onRefresh ? /* @__PURE__ */ jsx4(IconButton2, { onClick: () => onRefresh?.(), children: /* @__PURE__ */ jsx4(RefreshIcon, {}) }) : null })
          }
        ),
        children
      ]
    }
  );
};
PageCardWithRef.displayName = "PageCard";
var PageCard = PageCardWithRef;

// src/components/SimpleCard/SimpleCard.tsx
import { ArrowForwardRounded as ArrowForwardRoundedIcon2 } from "@mui/icons-material";
import {
  CardActions as CardActions2,
  CardContent as CardContent3,
  CardMedia as CardMedia2,
  IconButton as IconButton3,
  Typography as Typography2,
  useTheme as useTheme2
} from "@mui/material";
import { FlexCol, FlexGrowCol as FlexGrowCol2 } from "@xylabs/react-flexbox";
import { alphaCss as alphaCss2, useIsSmall as useIsSmall2 } from "@xylabs/react-theme";
import { useState as useState2 } from "react";
import { useNavigate as useNavigate2 } from "react-router-dom";
import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
var SimpleCard = ({
  children,
  desc,
  iconImage,
  interactionVariant = "card",
  headline,
  href,
  media,
  small,
  subtitle,
  sx,
  to,
  ...props
}) => {
  const theme = useTheme2();
  const [raised, setRaised] = useState2(false);
  const navigate = useNavigate2();
  const isSmall = useIsSmall2();
  const localRouteChange = (to2) => {
    to2 ? void navigate(to2) : void navigate("/404");
  };
  const externalRouteChange = (href2) => {
    href2 ? void window.open(href2) : void navigate("/404");
  };
  return /* @__PURE__ */ jsxs3(
    CardEx,
    {
      elevation: raised ? 3 : 0,
      sx: {
        "&:hover": { cursor: interactionVariant == "button" ? "pointer" : null },
        "backgroundColor": alphaCss2(theme.vars.palette.primary.main, 0.05),
        ...sx
      },
      onMouseEnter: () => isSmall ? null : interactionVariant == "button" ? setRaised(true) : null,
      onMouseLeave: () => isSmall ? null : interactionVariant == "button" ? setRaised(false) : null,
      onClick: () => interactionVariant == "button" ? href ? externalRouteChange(href) : to ? localRouteChange(to) : navigate("/404") : null,
      ...props,
      children: [
        media ? /* @__PURE__ */ jsx5(CardMedia2, { component: "img", height: "100", image: media, alt: "" }) : null,
        /* @__PURE__ */ jsx5(CardContent3, { sx: { height: "100%" }, children: /* @__PURE__ */ jsxs3(FlexCol, { width: "100%", alignItems: "flex-start", children: [
          iconImage ? /* @__PURE__ */ jsx5("img", { src: iconImage, height: "40px", style: { paddingBottom: "8px" } }) : null,
          typeof headline === "string" ? /* @__PURE__ */ jsx5(Typography2, { variant: small ? "body1" : "h6", textAlign: "left", gutterBottom: true, children: headline }) : headline,
          subtitle ? /* @__PURE__ */ jsx5(Typography2, { variant: "subtitle2", textAlign: "left", gutterBottom: true, children: subtitle }) : null,
          /* @__PURE__ */ jsx5(Typography2, { variant: small ? "caption" : "body1", textAlign: "left", gutterBottom: true, children: desc })
        ] }) }),
        children,
        interactionVariant == "button" ? /* @__PURE__ */ jsx5(CardActions2, { children: /* @__PURE__ */ jsx5(FlexGrowCol2, { alignItems: "flex-end", children: /* @__PURE__ */ jsx5(
          IconButton3,
          {
            color: raised ? "secondary" : "primary",
            size: small ? "small" : "medium",
            onClick: () => href ? externalRouteChange(href) : to ? localRouteChange(to) : navigate("/404"),
            disableFocusRipple: true,
            disableRipple: true,
            disableTouchRipple: true,
            children: /* @__PURE__ */ jsx5(ArrowForwardRoundedIcon2, { fontSize: small ? "small" : "medium" })
          }
        ) }) }) : null
      ]
    }
  );
};
export {
  CardContentEx,
  CardContentExWithRef,
  CardEx,
  CardExWithRef,
  FullWidthCard,
  PageCard,
  SimpleCard
};
//# sourceMappingURL=index.mjs.map