@cere/cere-design-system 0.0.45 → 0.2.0

package/dist/chunk-POCAW2G4.mjs

@@ -0,0 +1,111 @@
+// src/components/layout/Card.tsx
+import React from "react";
+import MuiCard from "@mui/material/Card";
+import MuiCardContent from "@mui/material/CardContent";
+import MuiCardHeader from "@mui/material/CardHeader";
+import MuiCardActions from "@mui/material/CardActions";
+import MuiCardMedia from "@mui/material/CardMedia";
+import ButtonBase from "@mui/material/ButtonBase";
+import { styled } from "@mui/material/styles";
+import { jsx } from "react/jsx-runtime";
+var CardMedia = React.forwardRef(
+  function CardMedia2(props, ref) {
+    return /* @__PURE__ */ jsx(MuiCardMedia, { ref, ...props });
+  }
+);
+var StyledCard = styled(MuiCard, {
+  shouldForwardProp: (prop) => prop !== "hoverable" && prop !== "clickable" && prop !== "dsVariant" && prop !== "asButton"
+})(
+  ({ theme, hoverable, clickable, dsVariant, asButton }) => ({
+    borderRadius: 8,
+    transition: "all 0.2s ease-in-out",
+    ...dsVariant === "standard" && {
+      boxShadow: theme.shadows[1],
+      backgroundColor: theme.palette.background.paper
+    },
+    ...dsVariant === "tinted" && {
+      boxShadow: "none",
+      backgroundColor: theme.palette.action.hover,
+      border: `1px solid ${theme.palette.divider}`
+    },
+    ...dsVariant === "outlined" && {
+      boxShadow: "none",
+      backgroundColor: theme.palette.background.paper,
+      border: `1px solid ${theme.palette.divider}`
+    },
+    ...(clickable || asButton) && {
+      cursor: "pointer"
+    },
+    ...asButton && {
+      // Neutralise ButtonBase defaults (inline-flex + center alignment) so the
+      // card lays out exactly like a non-clickable Card. We render as a column
+      // flex so consumers can still stack GradientSurface + meta inside.
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "stretch",
+      justifyContent: "flex-start",
+      width: "100%",
+      textAlign: "left",
+      verticalAlign: "top",
+      font: "inherit",
+      color: "inherit",
+      padding: 0,
+      "&:focus-visible": {
+        outline: "none",
+        boxShadow: "0 0 0 4px rgba(170,68,242,0.25)"
+      }
+    },
+    ...hoverable && {
+      "&:hover": {
+        boxShadow: theme.shadows[4],
+        transform: "translateY(-2px)"
+      }
+    }
+  })
+);
+var Card = React.forwardRef(function Card2({ variant = "standard", hoverable = false, clickable = false, onClick, children, ...props }, ref) {
+  const asButton = clickable && typeof onClick === "function";
+  return /* @__PURE__ */ jsx(
+    StyledCard,
+    {
+      ref,
+      dsVariant: variant,
+      hoverable,
+      clickable,
+      asButton,
+      variant: "elevation",
+      onClick,
+      ...asButton ? { component: ButtonBase } : {},
+      ...props,
+      children
+    }
+  );
+});
+var CardContent = React.forwardRef(
+  function CardContent2(props, ref) {
+    return /* @__PURE__ */ jsx(MuiCardContent, { ref, ...props });
+  }
+);
+var CardHeader = React.forwardRef(
+  function CardHeader2(props, ref) {
+    return /* @__PURE__ */ jsx(MuiCardHeader, { ref, ...props });
+  }
+);
+var CardActions = React.forwardRef(
+  function CardActions2(props, ref) {
+    return /* @__PURE__ */ jsx(MuiCardActions, { ref, ...props });
+  }
+);
+
+// src/components/layout/Typography.tsx
+import { default as default2 } from "@mui/material/Typography";
+
+export {
+  CardMedia,
+  Card,
+  CardContent,
+  CardHeader,
+  CardActions,
+  default2 as default
+};
+//# sourceMappingURL=chunk-POCAW2G4.mjs.map

package/dist/chunk-POCAW2G4.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/Card.tsx","../src/components/layout/Typography.tsx"],"sourcesContent":["import React from 'react';\nimport MuiCard, { CardProps as MuiCardProps } from '@mui/material/Card';\nimport MuiCardContent, { CardContentProps } from '@mui/material/CardContent';\nimport MuiCardHeader, { CardHeaderProps } from '@mui/material/CardHeader';\nimport MuiCardActions, { CardActionsProps } from '@mui/material/CardActions';\nimport MuiCardMedia, { CardMediaProps as MuiCardMediaProps } from '@mui/material/CardMedia';\nimport ButtonBase from '@mui/material/ButtonBase';\nimport { styled } from '@mui/material/styles';\n\nexport type CardMediaProps = MuiCardMediaProps;\nexport const CardMedia = React.forwardRef<HTMLDivElement, CardMediaProps>(\n  function CardMedia(props, ref) {\n    return <MuiCardMedia ref={ref} {...props} />;\n  },\n);\n\nexport type CardVariant = 'standard' | 'tinted' | 'outlined';\n\nexport interface CardProps extends Omit<MuiCardProps, 'variant'> {\n  /** Visual treatment. @default 'standard' */\n  variant?: CardVariant;\n  hoverable?: boolean;\n  /**\n   * Opt the card into being a real interactive element. When combined with\n   * `onClick`, the root renders via MUI ButtonBase — focusable button,\n   * Enter/Space activation, `:focus-visible` ring. When `clickable` is set\n   * without `onClick`, only the pointer cursor changes (back-compat).\n   *\n   * `<Card onClick={...}>` WITHOUT `clickable` keeps a `<div>` root and just\n   * forwards the click handler, so consumers using onClick for analytics or\n   * non-clickable side effects are not silently turned into buttons.\n   */\n  clickable?: boolean;\n}\n\nconst StyledCard = styled(MuiCard, {\n  shouldForwardProp: (prop) =>\n    prop !== 'hoverable' && prop !== 'clickable' && prop !== 'dsVariant' && prop !== 'asButton',\n})<{ hoverable?: boolean; clickable?: boolean; dsVariant: CardVariant; asButton?: boolean }>(\n  ({ theme, hoverable, clickable, dsVariant, asButton }) => ({\n    borderRadius: 8,\n    transition: 'all 0.2s ease-in-out',\n    ...(dsVariant === 'standard' && {\n      boxShadow: theme.shadows[1],\n      backgroundColor: theme.palette.background.paper,\n    }),\n    ...(dsVariant === 'tinted' && {\n      boxShadow: 'none',\n      backgroundColor: theme.palette.action.hover,\n      border: `1px solid ${theme.palette.divider}`,\n    }),\n    ...(dsVariant === 'outlined' && {\n      boxShadow: 'none',\n      backgroundColor: theme.palette.background.paper,\n      border: `1px solid ${theme.palette.divider}`,\n    }),\n    ...((clickable || asButton) && {\n      cursor: 'pointer',\n    }),\n    ...(asButton && {\n      // Neutralise ButtonBase defaults (inline-flex + center alignment) so the\n      // card lays out exactly like a non-clickable Card. We render as a column\n      // flex so consumers can still stack GradientSurface + meta inside.\n      display: 'flex',\n      flexDirection: 'column',\n      alignItems: 'stretch',\n      justifyContent: 'flex-start',\n      width: '100%',\n      textAlign: 'left',\n      verticalAlign: 'top',\n      font: 'inherit',\n      color: 'inherit',\n      padding: 0,\n      '&:focus-visible': {\n        outline: 'none',\n        boxShadow: '0 0 0 4px rgba(170,68,242,0.25)',\n      },\n    }),\n    ...(hoverable && {\n      '&:hover': {\n        boxShadow: theme.shadows[4],\n        transform: 'translateY(-2px)',\n      },\n    }),\n  }),\n);\n\nexport const Card = React.forwardRef<HTMLDivElement | HTMLButtonElement, CardProps>(function Card(\n  { variant = 'standard', hoverable = false, clickable = false, onClick, children, ...props },\n  ref,\n) {\n  // Only render as a real button when the consumer EXPLICITLY opts in via\n  // `clickable` AND wires an onClick. Inferring from onClick alone would\n  // silently turn analytics-tracking cards into <button>s with role=button\n  // and break nested forms/links.\n  const asButton = clickable && typeof onClick === 'function';\n  return (\n    <StyledCard\n      // MUI's polymorphic Card.ref is typed Ref<HTMLDivElement> by default and\n      // shifts when `component` is overridden; our public ref union honestly\n      // covers both runtime shapes (div by default, button when asButton).\n      // The cast bridges MUI's static typing to the runtime polymorphism we\n      // declared on the public API; consumers see the correct union and the\n      // ref points at whichever element is actually rendered.\n      ref={ref as React.Ref<HTMLDivElement>}\n      dsVariant={variant}\n      hoverable={hoverable}\n      clickable={clickable}\n      asButton={asButton}\n      // MUI Card accepts a 'variant' prop too (elevation | outlined); we always\n      // drive visual via dsVariant + box-shadow, so suppress MUI's default border.\n      variant=\"elevation\"\n      onClick={onClick}\n      // When clickable, render the root as a focusable button so the entire\n      // card becomes a real interactive element instead of needing an overlay.\n      {...(asButton ? { component: ButtonBase } : {})}\n      {...props}\n    >\n      {children}\n    </StyledCard>\n  );\n});\n\nexport const CardContent = React.forwardRef<HTMLDivElement, CardContentProps>(\n  function CardContent(props, ref) {\n    return <MuiCardContent ref={ref} {...props} />;\n  },\n);\n\nexport const CardHeader = React.forwardRef<HTMLDivElement, CardHeaderProps>(\n  function CardHeader(props, ref) {\n    return <MuiCardHeader ref={ref} {...props} />;\n  },\n);\n\nexport const CardActions = React.forwardRef<HTMLDivElement, CardActionsProps>(\n  function CardActions(props, ref) {\n    return <MuiCardActions ref={ref} {...props} />;\n  },\n);\n","export { default as Typography } from '@mui/material/Typography';\nexport type { TypographyProps } from '@mui/material/Typography';\n\n"],"mappings":";AAAA,OAAO,WAAW;AAClB,OAAO,aAA4C;AACnD,OAAO,oBAA0C;AACjD,OAAO,mBAAwC;AAC/C,OAAO,oBAA0C;AACjD,OAAO,kBAA2D;AAClE,OAAO,gBAAgB;AACvB,SAAS,cAAc;AAKZ;AAFJ,IAAM,YAAY,MAAM;AAAA,EAC7B,SAASA,WAAU,OAAO,KAAK;AAC7B,WAAO,oBAAC,gBAAa,KAAW,GAAG,OAAO;AAAA,EAC5C;AACF;AAqBA,IAAM,aAAa,OAAO,SAAS;AAAA,EACjC,mBAAmB,CAAC,SAClB,SAAS,eAAe,SAAS,eAAe,SAAS,eAAe,SAAS;AACrF,CAAC;AAAA,EACC,CAAC,EAAE,OAAO,WAAW,WAAW,WAAW,SAAS,OAAO;AAAA,IACzD,cAAc;AAAA,IACd,YAAY;AAAA,IACZ,GAAI,cAAc,cAAc;AAAA,MAC9B,WAAW,MAAM,QAAQ,CAAC;AAAA,MAC1B,iBAAiB,MAAM,QAAQ,WAAW;AAAA,IAC5C;AAAA,IACA,GAAI,cAAc,YAAY;AAAA,MAC5B,WAAW;AAAA,MACX,iBAAiB,MAAM,QAAQ,OAAO;AAAA,MACtC,QAAQ,aAAa,MAAM,QAAQ,OAAO;AAAA,IAC5C;AAAA,IACA,GAAI,cAAc,cAAc;AAAA,MAC9B,WAAW;AAAA,MACX,iBAAiB,MAAM,QAAQ,WAAW;AAAA,MAC1C,QAAQ,aAAa,MAAM,QAAQ,OAAO;AAAA,IAC5C;AAAA,IACA,IAAK,aAAa,aAAa;AAAA,MAC7B,QAAQ;AAAA,IACV;AAAA,IACA,GAAI,YAAY;AAAA;AAAA;AAAA;AAAA,MAId,SAAS;AAAA,MACT,eAAe;AAAA,MACf,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,OAAO;AAAA,MACP,WAAW;AAAA,MACX,eAAe;AAAA,MACf,MAAM;AAAA,MACN,OAAO;AAAA,MACP,SAAS;AAAA,MACT,mBAAmB;AAAA,QACjB,SAAS;AAAA,QACT,WAAW;AAAA,MACb;AAAA,IACF;AAAA,IACA,GAAI,aAAa;AAAA,MACf,WAAW;AAAA,QACT,WAAW,MAAM,QAAQ,CAAC;AAAA,QAC1B,WAAW;AAAA,MACb;AAAA,IACF;AAAA,EACF;AACF;AAEO,IAAM,OAAO,MAAM,WAA0D,SAASC,MAC3F,EAAE,UAAU,YAAY,YAAY,OAAO,YAAY,OAAO,SAAS,UAAU,GAAG,MAAM,GAC1F,KACA;AAKA,QAAM,WAAW,aAAa,OAAO,YAAY;AACjD,SACE;AAAA,IAAC;AAAA;AAAA,MAOC;AAAA,MACA,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA,MAGA,SAAQ;AAAA,MACR;AAAA,MAGC,GAAI,WAAW,EAAE,WAAW,WAAW,IAAI,CAAC;AAAA,MAC5C,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ,CAAC;AAEM,IAAM,cAAc,MAAM;AAAA,EAC/B,SAASC,aAAY,OAAO,KAAK;AAC/B,WAAO,oBAAC,kBAAe,KAAW,GAAG,OAAO;AAAA,EAC9C;AACF;AAEO,IAAM,aAAa,MAAM;AAAA,EAC9B,SAASC,YAAW,OAAO,KAAK;AAC9B,WAAO,oBAAC,iBAAc,KAAW,GAAG,OAAO;AAAA,EAC7C;AACF;AAEO,IAAM,cAAc,MAAM;AAAA,EAC/B,SAASC,aAAY,OAAO,KAAK;AAC/B,WAAO,oBAAC,kBAAe,KAAW,GAAG,OAAO;AAAA,EAC9C;AACF;;;AC3IA,SAAoB,WAAXC,gBAA6B;","names":["CardMedia","Card","CardContent","CardHeader","CardActions","default"]}

package/dist/chunk-QBCRH7YF.mjs

@@ -0,0 +1,37 @@
+// src/components/feedback/Badge.tsx
+import MuiBadge from "@mui/material/Badge";
+import { styled } from "@mui/material/styles";
+import { jsx } from "react/jsx-runtime";
+var getBadgeColor = (variant, theme) => {
+  switch (variant) {
+    case "primary":
+      return theme.palette.primary.main;
+    case "success":
+      return theme.palette.success.main;
+    case "error":
+      return theme.palette.error.main;
+    default:
+      return theme.palette.grey[400];
+  }
+};
+var StyledBadge = styled(MuiBadge, {
+  shouldForwardProp: (prop) => prop !== "badgeVariant"
+})(({ theme, badgeVariant = "default" }) => ({
+  "& .MuiBadge-badge": {
+    backgroundColor: getBadgeColor(badgeVariant, theme),
+    color: theme.palette.common.white
+  }
+}));
+var Badge = ({
+  variant = "default",
+  children,
+  badgeContent,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(StyledBadge, { badgeVariant: variant, badgeContent, ...props, children });
+};
+
+export {
+  Badge
+};
+//# sourceMappingURL=chunk-QBCRH7YF.mjs.map

package/dist/chunk-QBCRH7YF.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/feedback/Badge.tsx"],"sourcesContent":["import React from 'react';\nimport MuiBadge, { BadgeProps as MuiBadgeProps } from '@mui/material/Badge';\nimport { styled, Theme } from '@mui/material/styles';\n\nexport type BadgeVariant = 'default' | 'primary' | 'success' | 'error';\n\nexport interface BadgeProps extends Omit<MuiBadgeProps, 'color' | 'variant'> {\n  variant?: BadgeVariant;\n  children?: React.ReactNode;\n}\n\nconst getBadgeColor = (variant: BadgeVariant, theme: Theme) => {\n  switch (variant) {\n    case 'primary':\n      return theme.palette.primary.main;\n    case 'success':\n      return theme.palette.success.main;\n    case 'error':\n      return theme.palette.error.main;\n    default:\n      return theme.palette.grey[400];\n  }\n};\n\nconst StyledBadge = styled(MuiBadge, {\n  shouldForwardProp: (prop) => prop !== 'badgeVariant',\n})<{ badgeVariant?: BadgeVariant }>(({ theme, badgeVariant = 'default' }) => ({\n  '& .MuiBadge-badge': {\n    backgroundColor: getBadgeColor(badgeVariant, theme),\n    color: theme.palette.common.white,\n  },\n}));\n\nexport const Badge: React.FC<BadgeProps> = ({\n  variant = 'default',\n  children,\n  badgeContent,\n  ...props\n}) => {\n  return (\n    <StyledBadge badgeVariant={variant} badgeContent={badgeContent} {...props}>\n      {children}\n    </StyledBadge>\n  );\n};\n\n"],"mappings":";AACA,OAAO,cAA+C;AACtD,SAAS,cAAqB;AAsC1B;AA7BJ,IAAM,gBAAgB,CAAC,SAAuB,UAAiB;AAC7D,UAAQ,SAAS;AAAA,IACf,KAAK;AACH,aAAO,MAAM,QAAQ,QAAQ;AAAA,IAC/B,KAAK;AACH,aAAO,MAAM,QAAQ,QAAQ;AAAA,IAC/B,KAAK;AACH,aAAO,MAAM,QAAQ,MAAM;AAAA,IAC7B;AACE,aAAO,MAAM,QAAQ,KAAK,GAAG;AAAA,EACjC;AACF;AAEA,IAAM,cAAc,OAAO,UAAU;AAAA,EACnC,mBAAmB,CAAC,SAAS,SAAS;AACxC,CAAC,EAAmC,CAAC,EAAE,OAAO,eAAe,UAAU,OAAO;AAAA,EAC5E,qBAAqB;AAAA,IACnB,iBAAiB,cAAc,cAAc,KAAK;AAAA,IAClD,OAAO,MAAM,QAAQ,OAAO;AAAA,EAC9B;AACF,EAAE;AAEK,IAAM,QAA8B,CAAC;AAAA,EAC1C,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,SACE,oBAAC,eAAY,cAAc,SAAS,cAA6B,GAAG,OACjE,UACH;AAEJ;","names":[]}