@soyfri/shared-library 1.5.0 → 2.0.0-beta.1

package/dist/components/Avatar/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","sources":["../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import { Avatar as MuiAvatar, Tooltip } from '@mui/material';\nimport AccountCircleIcon from '@mui/icons-material/AccountCircle';\nimport React, { useState } from 'react';\n\nexport interface AvatarItem {\n  text?: string;\n  imageUrl?: string;\n  badge?: string;\n  color?: string;\n  backgroundColor?: string;\n}\n\nexport interface AvatarProps {\n  type?: string;\n  items: AvatarItem[];\n  displayedAvatars?: number;\n  size?: 'sm' | 'xl';\n  trustUrls?: boolean;\n  showText?: boolean;\n  showTooltip?: boolean;\n}\n\nconst sizes = {\n  sm: {\n    avatar: { width: 35, height: 35, borderWidth: 3, marginTop: '.5rem' },\n    icon: { width: 42, height: 42, marginTop: '.5rem', fontSize: 42 },\n    badge: { width: 35, height: 35, borderWidth: 3, marginTop: '.5rem', fontSize: 16 },\n  },\n  xl: {\n    avatar: { width: 105, height: 105, borderWidth: 10, marginTop: '0' },\n    icon: { width: 126, height: 126, marginTop: '0', fontSize: 126 },\n    badge: { width: 105, height: 105, borderWidth: 10, marginTop: '0', fontSize: 64 },\n  },\n};\n\nexport const Avatar: React.FC<AvatarProps> = ({\n  items,\n  type,\n  displayedAvatars = 4,\n  size = 'sm',\n  trustUrls = false,\n  showText = true,\n  showTooltip = false,\n}) => {\n  const [errorIndex, setErrorIndex] = useState<Set<number>>(new Set());\n\n  const handleImageError = (index: number) => {\n    setErrorIndex((prev) => new Set(prev).add(index));\n  };\n\n  return (\n    <div data-testid=\"avatar-container\" className=\"flex items-center leading-2 h-full w-full\">\n      {items.slice(0, displayedAvatars).map((item, i) => {\n        const commonStyle = {\n          zIndex: displayedAvatars - i,\n          marginLeft: i > 0 ? -22 : 0,\n        };\n\n        const style = sizes[size];\n\n        const imgSrc = trustUrls ? item.imageUrl : item.imageUrl;\n\n        const showFallbackIcon = (!item.imageUrl && !item.badge) || (errorIndex.has(i) && !item.badge);\n        const showBadge = (item.badge && !item.imageUrl) || (item.badge && errorIndex.has(i));\n\n        const content = (\n          <span key={i} data-testid=\"avatar\" style={commonStyle}>\n            {item.imageUrl && !errorIndex.has(i) ? (\n              <img\n                data-testid=\"image\"\n                alt={item.text || 'User avatar'}\n                src={imgSrc}\n                onError={() => handleImageError(i)}\n                style={{\n                  ...style.avatar,\n                  color: item.color || '#667688',\n                  border: `${style.avatar.borderWidth}px solid white`,\n                  borderRadius: '9999px',\n                  marginTop: style.avatar.marginTop,\n                }}\n              />\n            ) : showFallbackIcon ? (\n              <AccountCircleIcon\n                data-testid=\"icon\"\n                aria-label={item.text}\n                sx={{\n                  ...style.icon,\n                  fontSize: style.icon.fontSize,\n                  marginTop: style.icon.marginTop,\n                  borderRadius: '9999px',\n                  backgroundColor: '#fff',\n                  color: item.color || '#667688',\n                }}\n              />\n            ) : null}\n\n            {showBadge && (\n              <span\n                data-testid=\"badge\"\n                aria-label={item.text}\n                style={{\n                  ...style.badge,\n                  display: 'inline-block',\n                  backgroundColor: item.backgroundColor || '#c8d5e9',\n                  color: item.color || '#667688',\n                  fontWeight: 700,\n                  textAlign: 'center',\n                  borderRadius: '9999px',\n                  border: `${style.badge.borderWidth}px solid white`,\n                  lineHeight: style.badge.height,\n                  fontSize: style.badge.fontSize,\n                  marginTop: style.badge.marginTop,\n                  marginBottom: style.badge.marginTop,\n                }}\n              >\n                {item.badge}\n              </span>\n            )}\n          </span>\n        );\n\n        return showTooltip && item.text ? (\n          <Tooltip key={i} title={item.text}>\n            {content}\n          </Tooltip>\n        ) : (\n          content\n        );\n      })}\n\n      {showText && (\n        <span data-testid=\"text\" className=\"ml-2 text-xs font-normal\">\n          {type && items.length === 1 && (\n            <span data-testid=\"type\">{type}: </span>\n          )}\n          {items[0].text} {items.length > 2 && `+${items.length - 1}`}\n        </span>\n      )}\n    </div>\n  );\n};\n\nexport default Avatar;"],"names":[],"mappings":"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"}
+{"version":3,"file":"Avatar.js","sources":["../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport {\n  Avatar as MuiAvatar,\n  Box,\n  Tooltip,\n  Typography,\n  type SxProps,\n  type Theme,\n} from '@mui/material';\nimport AccountCircleIcon from '@mui/icons-material/AccountCircle';\n\nexport interface AvatarItem {\n  text?: string;\n  imageUrl?: string;\n  badge?: string;\n  color?: string;\n  backgroundColor?: string;\n}\n\nexport type AvatarSize = 'sm' | 'md' | 'lg' | 'xl' | number;\n\nexport interface AvatarProps {\n  type?: string;\n  items: AvatarItem[];\n  displayedAvatars?: number;\n  size?: AvatarSize;\n  showText?: boolean;\n  showTooltip?: boolean;\n  /**\n   * sx aplicado al contenedor raíz.\n   */\n  sx?: SxProps<Theme>;\n  /**\n   * sx aplicado a cada MuiAvatar individual (se mergea sobre los defaults).\n   */\n  avatarSx?: SxProps<Theme>;\n  className?: string;\n  /**\n   * Overlap (px) entre avatares cuando hay varios. Default depende del tamaño.\n   */\n  overlap?: number;\n}\n\n// Escala alineada con la escala de MUI (sm=32, md=40, lg=56, xl=96) con borde\n// proporcional para el efecto stacked.\nconst sizeMap: Record<\n  Exclude<AvatarSize, number>,\n  { px: number; border: number; font: number; overlap: number }\n> = {\n  sm: { px: 32, border: 2, font: 14, overlap: 8 },\n  md: { px: 40, border: 2, font: 16, overlap: 10 },\n  lg: { px: 56, border: 3, font: 22, overlap: 14 },\n  xl: { px: 96, border: 4, font: 36, overlap: 20 },\n};\n\nconst resolveSize = (size: AvatarSize) => {\n  if (typeof size === 'number') {\n    return {\n      px: size,\n      border: Math.max(2, Math.round(size * 0.05)),\n      font: Math.round(size * 0.4),\n      overlap: Math.round(size * 0.25),\n    };\n  }\n  return sizeMap[size];\n};\n\nconst mergeSx = (base: SxProps<Theme>, extra?: SxProps<Theme>): SxProps<Theme> => {\n  if (!extra) return base;\n  const baseArr = Array.isArray(base) ? base : [base];\n  const extraArr = Array.isArray(extra) ? extra : [extra];\n  return [...baseArr, ...extraArr] as SxProps<Theme>;\n};\n\nexport const Avatar: React.FC<AvatarProps> = ({\n  items,\n  type,\n  displayedAvatars = 4,\n  size = 'sm',\n  showText = true,\n  showTooltip = false,\n  sx,\n  avatarSx,\n  className,\n  overlap,\n}) => {\n  const [errorIndex, setErrorIndex] = useState<Set<number>>(new Set());\n\n  const handleImageError = (index: number) => {\n    setErrorIndex((prev) => {\n      const next = new Set(prev);\n      next.add(index);\n      return next;\n    });\n  };\n\n  if (!items || items.length === 0) {\n    return null;\n  }\n\n  const s = resolveSize(size);\n  const effectiveOverlap = overlap ?? s.overlap;\n  const visibleItems = items.slice(0, displayedAvatars);\n\n  const baseAvatarSx: SxProps<Theme> = {\n    width: s.px,\n    height: s.px,\n    fontSize: s.font,\n    fontWeight: 700,\n    border: (theme) => `${s.border}px solid ${theme.palette.background.paper}`,\n    boxSizing: 'content-box',\n  };\n\n  const renderSingleAvatar = (item: AvatarItem, i: number) => {\n    const hasImage = !!item.imageUrl && !errorIndex.has(i);\n    const showBadgeFallback = !!item.badge;\n\n    // Defaults tirando al theme; item.color / item.backgroundColor tienen prioridad.\n    const itemSx: SxProps<Theme> = {\n      bgcolor: item.backgroundColor ?? 'action.selected',\n      color: item.color ?? 'text.secondary',\n      // Stacking manual: margen negativo al segundo avatar en adelante.\n      ...(i > 0 && { marginLeft: `-${effectiveOverlap}px` }),\n      zIndex: visibleItems.length - i,\n    };\n\n    const finalSx = mergeSx(mergeSx(baseAvatarSx, itemSx), avatarSx);\n\n    const avatarEl = (\n      <MuiAvatar\n        data-testid=\"avatar\"\n        alt={item.text || 'User avatar'}\n        src={hasImage ? item.imageUrl : undefined}\n        imgProps={{\n          'data-testid': 'image',\n          onError: () => handleImageError(i),\n        } as React.ImgHTMLAttributes<HTMLImageElement>}\n        sx={finalSx}\n      >\n        {!hasImage && showBadgeFallback ? (\n          <span data-testid=\"badge\" aria-label={item.text}>\n            {item.badge}\n          </span>\n        ) : !hasImage ? (\n          <AccountCircleIcon\n            data-testid=\"icon\"\n            aria-label={item.text}\n            sx={{ width: '100%', height: '100%' }}\n          />\n        ) : null}\n      </MuiAvatar>\n    );\n\n    if (showTooltip && item.text) {\n      return (\n        <Tooltip key={i} title={item.text}>\n          {avatarEl}\n        </Tooltip>\n      );\n    }\n    return <React.Fragment key={i}>{avatarEl}</React.Fragment>;\n  };\n\n  return (\n    <Box\n      data-testid=\"avatar-container\"\n      className={className}\n      sx={mergeSx(\n        {\n          display: 'flex',\n          alignItems: 'center',\n          lineHeight: 1,\n          width: 'fit-content',\n        },\n        sx,\n      )}\n    >\n      <Box sx={{ display: 'flex', alignItems: 'center' }}>\n        {visibleItems.map((item, i) => renderSingleAvatar(item, i))}\n      </Box>\n\n      {showText && items[0]?.text && (\n        <Typography\n          data-testid=\"text\"\n          variant=\"caption\"\n          sx={{\n            ml: 1,\n            fontSize: '0.75rem',\n            fontWeight: 400,\n            color: 'text.primary',\n          }}\n        >\n          {type && items.length === 1 && (\n            <Box component=\"span\" data-testid=\"type\" sx={{ mr: 0.5 }}>\n              {type}:\n            </Box>\n          )}\n          {items[0].text}\n          {items.length > 1 && ` +${items.length - 1}`}\n        </Typography>\n      )}\n    </Box>\n  );\n};\n\nexport default Avatar;\n"],"names":["_a","MuiAvatar","React"],"mappings":"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"}

package/dist/components/Card/Card.cjs

@@ -1,28 +1,187 @@
 "use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const jsxRuntime = require("react/jsx-runtime");
 const material = require("@mui/material");
-const Card = ({
+const resolvePreset = require("../../resolvePreset-CT3kU-K2.cjs");
+const paddingMap = {
+  none: 0,
+  dense: 1.5,
+  normal: 2.5,
+  loose: 4
+};
+function buildCardSx({
+  variant,
+  padding,
+  clickable
+}) {
+  return (theme) => __spreadProps(__spreadValues({
+    borderRadius: 2,
+    backgroundColor: "background.paper",
+    boxShadow: variant === "elevated" ? theme.shadows[1] : "none",
+    border: variant === "outlined" ? `1px solid ${theme.palette.divider}` : "none",
+    transition: theme.transitions.create(
+      ["box-shadow", "transform", "border-color"],
+      { duration: theme.transitions.duration.shorter }
+    ),
+    cursor: clickable ? "pointer" : "default"
+  }, clickable && {
+    "&:hover": {
+      boxShadow: variant === "elevated" ? theme.shadows[3] : variant === "outlined" ? theme.shadows[1] : "none",
+      transform: variant !== "plain" ? "translateY(-1px)" : "none"
+    },
+    "&:active": {
+      transform: "translateY(0)"
+    }
+  }), {
+    // Body padding (cuando no hay header/footer envolventes). Para el caso
+    // compuesto los slots manejan su propio padding, dejamos el root en 0.
+    p: paddingMap[padding]
+  });
+}
+function buildCardHeaderSx() {
+  return (theme) => ({
+    display: "flex",
+    alignItems: "center",
+    gap: 1.5,
+    px: 2.5,
+    py: 1.75,
+    borderBottom: `1px solid ${theme.palette.divider}`,
+    "& .card-header-text": {
+      flex: 1,
+      minWidth: 0
+    },
+    "& .card-header-actions": {
+      display: "flex",
+      alignItems: "center",
+      gap: 0.5,
+      flexShrink: 0
+    }
+  });
+}
+function buildCardBodySx(padding) {
+  return {
+    px: padding === "none" ? 0 : padding === "dense" ? 1.5 : padding === "loose" ? 4 : 2.5,
+    py: padding === "none" ? 0 : padding === "dense" ? 1.5 : padding === "loose" ? 4 : 2.5
+  };
+}
+function buildCardFooterSx() {
+  return (theme) => ({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "flex-end",
+    gap: 1,
+    px: 2.5,
+    py: 1.5,
+    borderTop: `1px solid ${theme.palette.divider}`,
+    backgroundColor: theme.palette.action.hover
+  });
+}
+function Card({
   children,
+  title,
+  subtitle,
+  actions,
+  header,
+  footer,
+  variant,
+  padding = "normal",
+  clickable = false,
+  preset,
   raised,
   sx,
-  className,
+  bodySx,
+  headerSx,
+  footerSx,
   onClick,
   onBlur,
+  className,
   "data-testid": dataTestId
-}) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
+}) {
+  const theme = material.useTheme();
+  const resolvedVariant = raised ? "elevated" : variant != null ? variant : "elevated";
+  const hasHeader = Boolean(header || title || subtitle || actions);
+  const hasFooter = Boolean(footer);
+  const isCompound = hasHeader || hasFooter;
+  const rootPadding = isCompound ? "none" : padding;
+  const presetSx = resolvePreset.resolvePreset("Card", preset, theme);
+  const rootSx = [
+    buildCardSx({
+      variant: resolvedVariant,
+      padding: rootPadding,
+      clickable: clickable || Boolean(onClick)
+    }),
+    ...presetSx ? [presetSx] : [],
+    ...Array.isArray(sx) ? sx : sx ? [sx] : []
+  ];
+  const renderHeader = () => {
+    if (header) return /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: [buildCardHeaderSx(), ...Array.isArray(headerSx) ? headerSx : headerSx ? [headerSx] : []], children: header });
+    if (!title && !subtitle && !actions) return null;
+    return /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: [buildCardHeaderSx(), ...Array.isArray(headerSx) ? headerSx : headerSx ? [headerSx] : []], children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { className: "card-header-text", children: [
+        title && /* @__PURE__ */ jsxRuntime.jsx(
+          material.Typography,
+          {
+            variant: "subtitle1",
+            component: "div",
+            sx: { fontWeight: 600, lineHeight: 1.3 },
+            noWrap: true,
+            children: title
+          }
+        ),
+        subtitle && /* @__PURE__ */ jsxRuntime.jsx(
+          material.Typography,
+          {
+            variant: "caption",
+            color: "text.secondary",
+            component: "div",
+            noWrap: true,
+            children: subtitle
+          }
+        )
+      ] }),
+      actions && /* @__PURE__ */ jsxRuntime.jsx(material.Box, { className: "card-header-actions", children: actions })
+    ] });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     material.Card,
     {
-      raised,
-      sx,
+      sx: rootSx,
       className,
       "data-testid": dataTestId,
       onClick,
       onBlur,
-      children
+      elevation: 0,
+      children: [
+        renderHeader(),
+        isCompound ? /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: [buildCardBodySx(padding), ...Array.isArray(bodySx) ? bodySx : bodySx ? [bodySx] : []], children }) : children,
+        hasFooter && /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: [buildCardFooterSx(), ...Array.isArray(footerSx) ? footerSx : footerSx ? [footerSx] : []], children: footer })
+      ]
     }
   );
-};
+}
 exports.Card = Card;
+exports.buildCardBodySx = buildCardBodySx;
+exports.buildCardFooterSx = buildCardFooterSx;
+exports.buildCardHeaderSx = buildCardHeaderSx;
+exports.buildCardSx = buildCardSx;
+exports.default = Card;
 //# sourceMappingURL=Card.cjs.map

package/dist/components/Card/Card.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Card.cjs","sources":["../../../src/components/Card/Card.tsx"],"sourcesContent":["import { CardActions, Card as MuiCard } from \"@mui/material\";\nimport type { CardProps } from \"@mui/material/Card\";\nimport { CardContent as MuiCardContent } from \"@mui/material\";\n\n\ntype PickCardProps = Pick<CardProps, 'children' | 'raised' | 'sx' | 'className' | 'sx'>;\n\nexport interface MyCardProps extends PickCardProps {\n    children?: React.ReactNode;\n    raised?: boolean;\n    className?: string\n    onClick?: () => void;\n    onBlur?: () => void;\n    \"data-testid\"?: string;\n    sx?: object;\n}\n\nexport const Card: React.FC<MyCardProps> = ({\n    children,\n    raised,\n    sx,\n    className,\n    onClick,\n    onBlur,\n    \"data-testid\": dataTestId\n}) => {\n    return (\n        <MuiCard\n            raised={raised}\n            sx={sx}\n            className={className}\n            data-testid={dataTestId}\n            onClick={onClick}\n            onBlur={onBlur}\n\n        >\n\n            {children}\n\n        </MuiCard>\n    );\n};\n\nexport default Card;"],"names":["jsx","MuiCard"],"mappings":";;;;AAiBO,MAAM,OAA8B,CAAC;AAAA,EACxC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AACnB,MAAM;AACF,SACIA,2BAAAA;AAAAA,IAACC,SAAAA;AAAAA,IAAA;AAAA,MACG;AAAA,MACA;AAAA,MACA;AAAA,MACA,eAAa;AAAA,MACb;AAAA,MACA;AAAA,MAIC;AAAA,IAAA;AAAA,EAAA;AAIb;;"}
+{"version":3,"file":"Card.cjs","sources":["../../../src/components/Card/Card.sx.ts","../../../src/components/Card/Card.tsx"],"sourcesContent":["import type { SxProps, Theme } from '@mui/material/styles';\n\nexport type CardVariant = 'elevated' | 'outlined' | 'plain';\nexport type CardPadding = 'none' | 'dense' | 'normal' | 'loose';\n\nexport interface BuildCardSxArgs {\n  variant: CardVariant;\n  padding: CardPadding;\n  clickable: boolean;\n}\n\nconst paddingMap: Record<CardPadding, number> = {\n  none: 0,\n  dense: 1.5,\n  normal: 2.5,\n  loose: 4,\n};\n\n/**\n * Estilo base del Card (root). La props `sx` del consumer se compone encima\n * junto al preset resuelto (en Card.tsx). Este builder solo se ocupa del\n * variant + padding, para que siga siendo predecible.\n */\nexport function buildCardSx({\n  variant,\n  padding,\n  clickable,\n}: BuildCardSxArgs): SxProps<Theme> {\n  return (theme) => ({\n    borderRadius: 2,\n    backgroundColor: 'background.paper',\n    boxShadow:\n      variant === 'elevated'\n        ? theme.shadows[1]\n        : 'none',\n    border:\n      variant === 'outlined'\n        ? `1px solid ${theme.palette.divider}`\n        : 'none',\n    transition: theme.transitions.create(\n      ['box-shadow', 'transform', 'border-color'],\n      { duration: theme.transitions.duration.shorter },\n    ),\n    cursor: clickable ? 'pointer' : 'default',\n    ...(clickable && {\n      '&:hover': {\n        boxShadow:\n          variant === 'elevated'\n            ? theme.shadows[3]\n            : variant === 'outlined'\n              ? theme.shadows[1]\n              : 'none',\n        transform: variant !== 'plain' ? 'translateY(-1px)' : 'none',\n      },\n      '&:active': {\n        transform: 'translateY(0)',\n      },\n    }),\n    // Body padding (cuando no hay header/footer envolventes). Para el caso\n    // compuesto los slots manejan su propio padding, dejamos el root en 0.\n    p: paddingMap[padding],\n  });\n}\n\nexport function buildCardHeaderSx(): SxProps<Theme> {\n  return (theme) => ({\n    display: 'flex',\n    alignItems: 'center',\n    gap: 1.5,\n    px: 2.5,\n    py: 1.75,\n    borderBottom: `1px solid ${theme.palette.divider}`,\n    '& .card-header-text': {\n      flex: 1,\n      minWidth: 0,\n    },\n    '& .card-header-actions': {\n      display: 'flex',\n      alignItems: 'center',\n      gap: 0.5,\n      flexShrink: 0,\n    },\n  });\n}\n\nexport function buildCardBodySx(padding: CardPadding): SxProps<Theme> {\n  return {\n    px: padding === 'none' ? 0 : padding === 'dense' ? 1.5 : padding === 'loose' ? 4 : 2.5,\n    py: padding === 'none' ? 0 : padding === 'dense' ? 1.5 : padding === 'loose' ? 4 : 2.5,\n  };\n}\n\nexport function buildCardFooterSx(): SxProps<Theme> {\n  return (theme) => ({\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'flex-end',\n    gap: 1,\n    px: 2.5,\n    py: 1.5,\n    borderTop: `1px solid ${theme.palette.divider}`,\n    backgroundColor: theme.palette.action.hover,\n  });\n}\n","import React, { type ReactNode } from 'react';\nimport { Box, Card as MuiCard, Typography, useTheme } from '@mui/material';\nimport type { SxProps, Theme } from '@mui/material/styles';\n\nimport { resolvePreset } from '../_shared/resolvePreset';\nimport {\n  buildCardSx,\n  buildCardHeaderSx,\n  buildCardBodySx,\n  buildCardFooterSx,\n  type CardVariant,\n  type CardPadding,\n} from './Card.sx';\n\nexport interface CardProps {\n  /** Contenido principal. */\n  children?: ReactNode;\n  /**\n   * Título del Card. Si se provee, renderiza un header con separador. Puede\n   * ser string o cualquier ReactNode para permitir iconos / chips.\n   */\n  title?: ReactNode;\n  /** Texto secundario debajo del título. */\n  subtitle?: ReactNode;\n  /**\n   * Acciones del header (botones, ActionMenu, etc). Se renderizan alineadas\n   * a la derecha.\n   */\n  actions?: ReactNode;\n  /**\n   * Header totalmente custom. Si se provee, ignora `title`/`subtitle`/`actions`\n   * y toma control del slot entero.\n   */\n  header?: ReactNode;\n  /** Footer custom (botones, mensajes, etc). */\n  footer?: ReactNode;\n  /**\n   * Variante visual.\n   * - `elevated` (default): sombra sutil.\n   * - `outlined`: borde sin sombra.\n   * - `plain`: sin borde ni sombra, útil para layouts con nesting.\n   */\n  variant?: CardVariant;\n  /**\n   * Densidad del padding interno. Solo aplica al body cuando hay header/footer;\n   * cuando no hay slots, aplica al root.\n   */\n  padding?: CardPadding;\n  /** Si `true`, muestra feedback de hover/active (cursor, sombra). */\n  clickable?: boolean;\n  /**\n   * Preset registrado en `theme.styles.Card`. `\"default\"` usa el estilo\n   * built-in sin preset extra.\n   */\n  preset?: string;\n  /**\n   * MUI `raised` legacy — mantenido por backward-compat. Equivale a\n   * `variant=\"elevated\"` con sombra mayor. Ignora `variant` si se usa.\n   */\n  raised?: boolean;\n  /** sx del root. Se compone sobre el base + preset. */\n  sx?: SxProps<Theme>;\n  /** sx custom del slot body. */\n  bodySx?: SxProps<Theme>;\n  /** sx custom del slot header. */\n  headerSx?: SxProps<Theme>;\n  /** sx custom del slot footer. */\n  footerSx?: SxProps<Theme>;\n  onClick?: () => void;\n  onBlur?: () => void;\n  className?: string;\n  'data-testid'?: string;\n}\n\n/**\n * Card semántico con slots `title` / `subtitle` / `actions` / `footer`.\n * Reemplaza el patrón `<div class=\"card\"><div class=\"card-header\">...</div>...`\n * de Metronic/Bootstrap con composición declarativa.\n *\n * Backward-compat: si solo se pasa `children`, se comporta como el Card\n * original (MUI Card + body padding).\n *\n * ```tsx\n * <Card\n *   title=\"Datos del cliente\"\n *   subtitle=\"Última actualización: hace 2h\"\n *   actions={<ActionMenu items={menuItems} />}\n *   footer={<Button>Guardar</Button>}\n * >\n *   <CustomerForm />\n * </Card>\n * ```\n */\nexport function Card({\n  children,\n  title,\n  subtitle,\n  actions,\n  header,\n  footer,\n  variant,\n  padding = 'normal',\n  clickable = false,\n  preset,\n  raised,\n  sx,\n  bodySx,\n  headerSx,\n  footerSx,\n  onClick,\n  onBlur,\n  className,\n  'data-testid': dataTestId,\n}: CardProps) {\n  const theme = useTheme();\n\n  // Back-compat: `raised` legacy => elevated. Si no vienen ni `raised` ni\n  // `variant`, default a 'elevated'.\n  const resolvedVariant: CardVariant = raised\n    ? 'elevated'\n    : (variant ?? 'elevated');\n\n  const hasHeader = Boolean(header || title || subtitle || actions);\n  const hasFooter = Boolean(footer);\n  const isCompound = hasHeader || hasFooter;\n\n  // Cuando hay slots, el root no lleva padding (lo llevan los slots).\n  const rootPadding: CardPadding = isCompound ? 'none' : padding;\n\n  const presetSx = resolvePreset('Card', preset, theme);\n\n  const rootSx: SxProps<Theme> = [\n    buildCardSx({\n      variant: resolvedVariant,\n      padding: rootPadding,\n      clickable: clickable || Boolean(onClick),\n    }),\n    ...(presetSx ? [presetSx] : []),\n    ...(Array.isArray(sx) ? sx : sx ? [sx] : []),\n  ];\n\n  const renderHeader = () => {\n    if (header) return <Box sx={[buildCardHeaderSx(), ...(Array.isArray(headerSx) ? headerSx : headerSx ? [headerSx] : [])]}>{header}</Box>;\n    if (!title && !subtitle && !actions) return null;\n    return (\n      <Box sx={[buildCardHeaderSx(), ...(Array.isArray(headerSx) ? headerSx : headerSx ? [headerSx] : [])]}>\n        <Box className=\"card-header-text\">\n          {title && (\n            <Typography\n              variant=\"subtitle1\"\n              component=\"div\"\n              sx={{ fontWeight: 600, lineHeight: 1.3 }}\n              noWrap\n            >\n              {title}\n            </Typography>\n          )}\n          {subtitle && (\n            <Typography\n              variant=\"caption\"\n              color=\"text.secondary\"\n              component=\"div\"\n              noWrap\n            >\n              {subtitle}\n            </Typography>\n          )}\n        </Box>\n        {actions && <Box className=\"card-header-actions\">{actions}</Box>}\n      </Box>\n    );\n  };\n\n  return (\n    <MuiCard\n      sx={rootSx}\n      className={className}\n      data-testid={dataTestId}\n      onClick={onClick}\n      onBlur={onBlur}\n      elevation={0} // sombra la maneja buildCardSx\n    >\n      {renderHeader()}\n      {isCompound ? (\n        <Box sx={[buildCardBodySx(padding), ...(Array.isArray(bodySx) ? bodySx : bodySx ? [bodySx] : [])]}>\n          {children}\n        </Box>\n      ) : (\n        children\n      )}\n      {hasFooter && (\n        <Box sx={[buildCardFooterSx(), ...(Array.isArray(footerSx) ? footerSx : footerSx ? [footerSx] : [])]}>\n          {footer}\n        </Box>\n      )}\n    </MuiCard>\n  );\n}\n\nexport default Card;\n"],"names":["useTheme","resolvePreset","jsx","Box","jsxs","Typography","MuiCard"],"mappings":"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"}

package/dist/components/Card/Card.d.ts

@@ -1,13 +1,83 @@
-import { CardProps } from '@mui/material/Card';
-type PickCardProps = Pick<CardProps, 'children' | 'raised' | 'sx' | 'className' | 'sx'>;
-export interface MyCardProps extends PickCardProps {
-    children?: React.ReactNode;
+import { ReactNode } from 'react';
+import { SxProps, Theme } from '@mui/material/styles';
+import { CardVariant, CardPadding } from './Card.sx';
+export interface CardProps {
+    /** Contenido principal. */
+    children?: ReactNode;
+    /**
+     * Título del Card. Si se provee, renderiza un header con separador. Puede
+     * ser string o cualquier ReactNode para permitir iconos / chips.
+     */
+    title?: ReactNode;
+    /** Texto secundario debajo del título. */
+    subtitle?: ReactNode;
+    /**
+     * Acciones del header (botones, ActionMenu, etc). Se renderizan alineadas
+     * a la derecha.
+     */
+    actions?: ReactNode;
+    /**
+     * Header totalmente custom. Si se provee, ignora `title`/`subtitle`/`actions`
+     * y toma control del slot entero.
+     */
+    header?: ReactNode;
+    /** Footer custom (botones, mensajes, etc). */
+    footer?: ReactNode;
+    /**
+     * Variante visual.
+     * - `elevated` (default): sombra sutil.
+     * - `outlined`: borde sin sombra.
+     * - `plain`: sin borde ni sombra, útil para layouts con nesting.
+     */
+    variant?: CardVariant;
+    /**
+     * Densidad del padding interno. Solo aplica al body cuando hay header/footer;
+     * cuando no hay slots, aplica al root.
+     */
+    padding?: CardPadding;
+    /** Si `true`, muestra feedback de hover/active (cursor, sombra). */
+    clickable?: boolean;
+    /**
+     * Preset registrado en `theme.styles.Card`. `"default"` usa el estilo
+     * built-in sin preset extra.
+     */
+    preset?: string;
+    /**
+     * MUI `raised` legacy — mantenido por backward-compat. Equivale a
+     * `variant="elevated"` con sombra mayor. Ignora `variant` si se usa.
+     */
     raised?: boolean;
-    className?: string;
+    /** sx del root. Se compone sobre el base + preset. */
+    sx?: SxProps<Theme>;
+    /** sx custom del slot body. */
+    bodySx?: SxProps<Theme>;
+    /** sx custom del slot header. */
+    headerSx?: SxProps<Theme>;
+    /** sx custom del slot footer. */
+    footerSx?: SxProps<Theme>;
     onClick?: () => void;
     onBlur?: () => void;
-    "data-testid"?: string;
-    sx?: object;
+    className?: string;
+    'data-testid'?: string;
 }
-export declare const Card: React.FC<MyCardProps>;
+/**
+ * Card semántico con slots `title` / `subtitle` / `actions` / `footer`.
+ * Reemplaza el patrón `<div class="card"><div class="card-header">...</div>...`
+ * de Metronic/Bootstrap con composición declarativa.
+ *
+ * Backward-compat: si solo se pasa `children`, se comporta como el Card
+ * original (MUI Card + body padding).
+ *
+ * ```tsx
+ * <Card
+ *   title="Datos del cliente"
+ *   subtitle="Última actualización: hace 2h"
+ *   actions={<ActionMenu items={menuItems} />}
+ *   footer={<Button>Guardar</Button>}
+ * >
+ *   <CustomerForm />
+ * </Card>
+ * ```
+ */
+export declare function Card({ children, title, subtitle, actions, header, footer, variant, padding, clickable, preset, raised, sx, bodySx, headerSx, footerSx, onClick, onBlur, className, 'data-testid': dataTestId, }: CardProps): import("react/jsx-runtime").JSX.Element;
 export default Card;

package/dist/components/Card/Card.js

@@ -1,28 +1,187 @@
-import { jsx } from "react/jsx-runtime";
-import { Card as Card$1 } from "@mui/material";
-const Card = ({
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useTheme, Card as Card$1, Box, Typography } from "@mui/material";
+import { r as resolvePreset } from "../../resolvePreset-B-IB0ehH.js";
+const paddingMap = {
+  none: 0,
+  dense: 1.5,
+  normal: 2.5,
+  loose: 4
+};
+function buildCardSx({
+  variant,
+  padding,
+  clickable
+}) {
+  return (theme) => __spreadProps(__spreadValues({
+    borderRadius: 2,
+    backgroundColor: "background.paper",
+    boxShadow: variant === "elevated" ? theme.shadows[1] : "none",
+    border: variant === "outlined" ? `1px solid ${theme.palette.divider}` : "none",
+    transition: theme.transitions.create(
+      ["box-shadow", "transform", "border-color"],
+      { duration: theme.transitions.duration.shorter }
+    ),
+    cursor: clickable ? "pointer" : "default"
+  }, clickable && {
+    "&:hover": {
+      boxShadow: variant === "elevated" ? theme.shadows[3] : variant === "outlined" ? theme.shadows[1] : "none",
+      transform: variant !== "plain" ? "translateY(-1px)" : "none"
+    },
+    "&:active": {
+      transform: "translateY(0)"
+    }
+  }), {
+    // Body padding (cuando no hay header/footer envolventes). Para el caso
+    // compuesto los slots manejan su propio padding, dejamos el root en 0.
+    p: paddingMap[padding]
+  });
+}
+function buildCardHeaderSx() {
+  return (theme) => ({
+    display: "flex",
+    alignItems: "center",
+    gap: 1.5,
+    px: 2.5,
+    py: 1.75,
+    borderBottom: `1px solid ${theme.palette.divider}`,
+    "& .card-header-text": {
+      flex: 1,
+      minWidth: 0
+    },
+    "& .card-header-actions": {
+      display: "flex",
+      alignItems: "center",
+      gap: 0.5,
+      flexShrink: 0
+    }
+  });
+}
+function buildCardBodySx(padding) {
+  return {
+    px: padding === "none" ? 0 : padding === "dense" ? 1.5 : padding === "loose" ? 4 : 2.5,
+    py: padding === "none" ? 0 : padding === "dense" ? 1.5 : padding === "loose" ? 4 : 2.5
+  };
+}
+function buildCardFooterSx() {
+  return (theme) => ({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "flex-end",
+    gap: 1,
+    px: 2.5,
+    py: 1.5,
+    borderTop: `1px solid ${theme.palette.divider}`,
+    backgroundColor: theme.palette.action.hover
+  });
+}
+function Card({
   children,
+  title,
+  subtitle,
+  actions,
+  header,
+  footer,
+  variant,
+  padding = "normal",
+  clickable = false,
+  preset,
   raised,
   sx,
-  className,
+  bodySx,
+  headerSx,
+  footerSx,
   onClick,
   onBlur,
+  className,
   "data-testid": dataTestId
-}) => {
-  return /* @__PURE__ */ jsx(
+}) {
+  const theme = useTheme();
+  const resolvedVariant = raised ? "elevated" : variant != null ? variant : "elevated";
+  const hasHeader = Boolean(header || title || subtitle || actions);
+  const hasFooter = Boolean(footer);
+  const isCompound = hasHeader || hasFooter;
+  const rootPadding = isCompound ? "none" : padding;
+  const presetSx = resolvePreset("Card", preset, theme);
+  const rootSx = [
+    buildCardSx({
+      variant: resolvedVariant,
+      padding: rootPadding,
+      clickable: clickable || Boolean(onClick)
+    }),
+    ...presetSx ? [presetSx] : [],
+    ...Array.isArray(sx) ? sx : sx ? [sx] : []
+  ];
+  const renderHeader = () => {
+    if (header) return /* @__PURE__ */ jsx(Box, { sx: [buildCardHeaderSx(), ...Array.isArray(headerSx) ? headerSx : headerSx ? [headerSx] : []], children: header });
+    if (!title && !subtitle && !actions) return null;
+    return /* @__PURE__ */ jsxs(Box, { sx: [buildCardHeaderSx(), ...Array.isArray(headerSx) ? headerSx : headerSx ? [headerSx] : []], children: [
+      /* @__PURE__ */ jsxs(Box, { className: "card-header-text", children: [
+        title && /* @__PURE__ */ jsx(
+          Typography,
+          {
+            variant: "subtitle1",
+            component: "div",
+            sx: { fontWeight: 600, lineHeight: 1.3 },
+            noWrap: true,
+            children: title
+          }
+        ),
+        subtitle && /* @__PURE__ */ jsx(
+          Typography,
+          {
+            variant: "caption",
+            color: "text.secondary",
+            component: "div",
+            noWrap: true,
+            children: subtitle
+          }
+        )
+      ] }),
+      actions && /* @__PURE__ */ jsx(Box, { className: "card-header-actions", children: actions })
+    ] });
+  };
+  return /* @__PURE__ */ jsxs(
     Card$1,
     {
-      raised,
-      sx,
+      sx: rootSx,
       className,
       "data-testid": dataTestId,
       onClick,
       onBlur,
-      children
+      elevation: 0,
+      children: [
+        renderHeader(),
+        isCompound ? /* @__PURE__ */ jsx(Box, { sx: [buildCardBodySx(padding), ...Array.isArray(bodySx) ? bodySx : bodySx ? [bodySx] : []], children }) : children,
+        hasFooter && /* @__PURE__ */ jsx(Box, { sx: [buildCardFooterSx(), ...Array.isArray(footerSx) ? footerSx : footerSx ? [footerSx] : []], children: footer })
+      ]
     }
   );
-};
+}
 export {
-  Card
+  Card,
+  buildCardBodySx,
+  buildCardFooterSx,
+  buildCardHeaderSx,
+  buildCardSx,
+  Card as default
 };
 //# sourceMappingURL=Card.js.map

package/dist/components/Card/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sources":["../../../src/components/Card/Card.tsx"],"sourcesContent":["import { CardActions, Card as MuiCard } from \"@mui/material\";\nimport type { CardProps } from \"@mui/material/Card\";\nimport { CardContent as MuiCardContent } from \"@mui/material\";\n\n\ntype PickCardProps = Pick<CardProps, 'children' | 'raised' | 'sx' | 'className' | 'sx'>;\n\nexport interface MyCardProps extends PickCardProps {\n    children?: React.ReactNode;\n    raised?: boolean;\n    className?: string\n    onClick?: () => void;\n    onBlur?: () => void;\n    \"data-testid\"?: string;\n    sx?: object;\n}\n\nexport const Card: React.FC<MyCardProps> = ({\n    children,\n    raised,\n    sx,\n    className,\n    onClick,\n    onBlur,\n    \"data-testid\": dataTestId\n}) => {\n    return (\n        <MuiCard\n            raised={raised}\n            sx={sx}\n            className={className}\n            data-testid={dataTestId}\n            onClick={onClick}\n            onBlur={onBlur}\n\n        >\n\n            {children}\n\n        </MuiCard>\n    );\n};\n\nexport default Card;"],"names":["MuiCard"],"mappings":";;AAiBO,MAAM,OAA8B,CAAC;AAAA,EACxC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AACnB,MAAM;AACF,SACI;AAAA,IAACA;AAAAA,IAAA;AAAA,MACG;AAAA,MACA;AAAA,MACA;AAAA,MACA,eAAa;AAAA,MACb;AAAA,MACA;AAAA,MAIC;AAAA,IAAA;AAAA,EAAA;AAIb;"}
+{"version":3,"file":"Card.js","sources":["../../../src/components/Card/Card.sx.ts","../../../src/components/Card/Card.tsx"],"sourcesContent":["import type { SxProps, Theme } from '@mui/material/styles';\n\nexport type CardVariant = 'elevated' | 'outlined' | 'plain';\nexport type CardPadding = 'none' | 'dense' | 'normal' | 'loose';\n\nexport interface BuildCardSxArgs {\n  variant: CardVariant;\n  padding: CardPadding;\n  clickable: boolean;\n}\n\nconst paddingMap: Record<CardPadding, number> = {\n  none: 0,\n  dense: 1.5,\n  normal: 2.5,\n  loose: 4,\n};\n\n/**\n * Estilo base del Card (root). La props `sx` del consumer se compone encima\n * junto al preset resuelto (en Card.tsx). Este builder solo se ocupa del\n * variant + padding, para que siga siendo predecible.\n */\nexport function buildCardSx({\n  variant,\n  padding,\n  clickable,\n}: BuildCardSxArgs): SxProps<Theme> {\n  return (theme) => ({\n    borderRadius: 2,\n    backgroundColor: 'background.paper',\n    boxShadow:\n      variant === 'elevated'\n        ? theme.shadows[1]\n        : 'none',\n    border:\n      variant === 'outlined'\n        ? `1px solid ${theme.palette.divider}`\n        : 'none',\n    transition: theme.transitions.create(\n      ['box-shadow', 'transform', 'border-color'],\n      { duration: theme.transitions.duration.shorter },\n    ),\n    cursor: clickable ? 'pointer' : 'default',\n    ...(clickable && {\n      '&:hover': {\n        boxShadow:\n          variant === 'elevated'\n            ? theme.shadows[3]\n            : variant === 'outlined'\n              ? theme.shadows[1]\n              : 'none',\n        transform: variant !== 'plain' ? 'translateY(-1px)' : 'none',\n      },\n      '&:active': {\n        transform: 'translateY(0)',\n      },\n    }),\n    // Body padding (cuando no hay header/footer envolventes). Para el caso\n    // compuesto los slots manejan su propio padding, dejamos el root en 0.\n    p: paddingMap[padding],\n  });\n}\n\nexport function buildCardHeaderSx(): SxProps<Theme> {\n  return (theme) => ({\n    display: 'flex',\n    alignItems: 'center',\n    gap: 1.5,\n    px: 2.5,\n    py: 1.75,\n    borderBottom: `1px solid ${theme.palette.divider}`,\n    '& .card-header-text': {\n      flex: 1,\n      minWidth: 0,\n    },\n    '& .card-header-actions': {\n      display: 'flex',\n      alignItems: 'center',\n      gap: 0.5,\n      flexShrink: 0,\n    },\n  });\n}\n\nexport function buildCardBodySx(padding: CardPadding): SxProps<Theme> {\n  return {\n    px: padding === 'none' ? 0 : padding === 'dense' ? 1.5 : padding === 'loose' ? 4 : 2.5,\n    py: padding === 'none' ? 0 : padding === 'dense' ? 1.5 : padding === 'loose' ? 4 : 2.5,\n  };\n}\n\nexport function buildCardFooterSx(): SxProps<Theme> {\n  return (theme) => ({\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'flex-end',\n    gap: 1,\n    px: 2.5,\n    py: 1.5,\n    borderTop: `1px solid ${theme.palette.divider}`,\n    backgroundColor: theme.palette.action.hover,\n  });\n}\n","import React, { type ReactNode } from 'react';\nimport { Box, Card as MuiCard, Typography, useTheme } from '@mui/material';\nimport type { SxProps, Theme } from '@mui/material/styles';\n\nimport { resolvePreset } from '../_shared/resolvePreset';\nimport {\n  buildCardSx,\n  buildCardHeaderSx,\n  buildCardBodySx,\n  buildCardFooterSx,\n  type CardVariant,\n  type CardPadding,\n} from './Card.sx';\n\nexport interface CardProps {\n  /** Contenido principal. */\n  children?: ReactNode;\n  /**\n   * Título del Card. Si se provee, renderiza un header con separador. Puede\n   * ser string o cualquier ReactNode para permitir iconos / chips.\n   */\n  title?: ReactNode;\n  /** Texto secundario debajo del título. */\n  subtitle?: ReactNode;\n  /**\n   * Acciones del header (botones, ActionMenu, etc). Se renderizan alineadas\n   * a la derecha.\n   */\n  actions?: ReactNode;\n  /**\n   * Header totalmente custom. Si se provee, ignora `title`/`subtitle`/`actions`\n   * y toma control del slot entero.\n   */\n  header?: ReactNode;\n  /** Footer custom (botones, mensajes, etc). */\n  footer?: ReactNode;\n  /**\n   * Variante visual.\n   * - `elevated` (default): sombra sutil.\n   * - `outlined`: borde sin sombra.\n   * - `plain`: sin borde ni sombra, útil para layouts con nesting.\n   */\n  variant?: CardVariant;\n  /**\n   * Densidad del padding interno. Solo aplica al body cuando hay header/footer;\n   * cuando no hay slots, aplica al root.\n   */\n  padding?: CardPadding;\n  /** Si `true`, muestra feedback de hover/active (cursor, sombra). */\n  clickable?: boolean;\n  /**\n   * Preset registrado en `theme.styles.Card`. `\"default\"` usa el estilo\n   * built-in sin preset extra.\n   */\n  preset?: string;\n  /**\n   * MUI `raised` legacy — mantenido por backward-compat. Equivale a\n   * `variant=\"elevated\"` con sombra mayor. Ignora `variant` si se usa.\n   */\n  raised?: boolean;\n  /** sx del root. Se compone sobre el base + preset. */\n  sx?: SxProps<Theme>;\n  /** sx custom del slot body. */\n  bodySx?: SxProps<Theme>;\n  /** sx custom del slot header. */\n  headerSx?: SxProps<Theme>;\n  /** sx custom del slot footer. */\n  footerSx?: SxProps<Theme>;\n  onClick?: () => void;\n  onBlur?: () => void;\n  className?: string;\n  'data-testid'?: string;\n}\n\n/**\n * Card semántico con slots `title` / `subtitle` / `actions` / `footer`.\n * Reemplaza el patrón `<div class=\"card\"><div class=\"card-header\">...</div>...`\n * de Metronic/Bootstrap con composición declarativa.\n *\n * Backward-compat: si solo se pasa `children`, se comporta como el Card\n * original (MUI Card + body padding).\n *\n * ```tsx\n * <Card\n *   title=\"Datos del cliente\"\n *   subtitle=\"Última actualización: hace 2h\"\n *   actions={<ActionMenu items={menuItems} />}\n *   footer={<Button>Guardar</Button>}\n * >\n *   <CustomerForm />\n * </Card>\n * ```\n */\nexport function Card({\n  children,\n  title,\n  subtitle,\n  actions,\n  header,\n  footer,\n  variant,\n  padding = 'normal',\n  clickable = false,\n  preset,\n  raised,\n  sx,\n  bodySx,\n  headerSx,\n  footerSx,\n  onClick,\n  onBlur,\n  className,\n  'data-testid': dataTestId,\n}: CardProps) {\n  const theme = useTheme();\n\n  // Back-compat: `raised` legacy => elevated. Si no vienen ni `raised` ni\n  // `variant`, default a 'elevated'.\n  const resolvedVariant: CardVariant = raised\n    ? 'elevated'\n    : (variant ?? 'elevated');\n\n  const hasHeader = Boolean(header || title || subtitle || actions);\n  const hasFooter = Boolean(footer);\n  const isCompound = hasHeader || hasFooter;\n\n  // Cuando hay slots, el root no lleva padding (lo llevan los slots).\n  const rootPadding: CardPadding = isCompound ? 'none' : padding;\n\n  const presetSx = resolvePreset('Card', preset, theme);\n\n  const rootSx: SxProps<Theme> = [\n    buildCardSx({\n      variant: resolvedVariant,\n      padding: rootPadding,\n      clickable: clickable || Boolean(onClick),\n    }),\n    ...(presetSx ? [presetSx] : []),\n    ...(Array.isArray(sx) ? sx : sx ? [sx] : []),\n  ];\n\n  const renderHeader = () => {\n    if (header) return <Box sx={[buildCardHeaderSx(), ...(Array.isArray(headerSx) ? headerSx : headerSx ? [headerSx] : [])]}>{header}</Box>;\n    if (!title && !subtitle && !actions) return null;\n    return (\n      <Box sx={[buildCardHeaderSx(), ...(Array.isArray(headerSx) ? headerSx : headerSx ? [headerSx] : [])]}>\n        <Box className=\"card-header-text\">\n          {title && (\n            <Typography\n              variant=\"subtitle1\"\n              component=\"div\"\n              sx={{ fontWeight: 600, lineHeight: 1.3 }}\n              noWrap\n            >\n              {title}\n            </Typography>\n          )}\n          {subtitle && (\n            <Typography\n              variant=\"caption\"\n              color=\"text.secondary\"\n              component=\"div\"\n              noWrap\n            >\n              {subtitle}\n            </Typography>\n          )}\n        </Box>\n        {actions && <Box className=\"card-header-actions\">{actions}</Box>}\n      </Box>\n    );\n  };\n\n  return (\n    <MuiCard\n      sx={rootSx}\n      className={className}\n      data-testid={dataTestId}\n      onClick={onClick}\n      onBlur={onBlur}\n      elevation={0} // sombra la maneja buildCardSx\n    >\n      {renderHeader()}\n      {isCompound ? (\n        <Box sx={[buildCardBodySx(padding), ...(Array.isArray(bodySx) ? bodySx : bodySx ? [bodySx] : [])]}>\n          {children}\n        </Box>\n      ) : (\n        children\n      )}\n      {hasFooter && (\n        <Box sx={[buildCardFooterSx(), ...(Array.isArray(footerSx) ? footerSx : footerSx ? [footerSx] : [])]}>\n          {footer}\n        </Box>\n      )}\n    </MuiCard>\n  );\n}\n\nexport default Card;\n"],"names":["MuiCard"],"mappings":"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"}

package/dist/components/Card/Card.sx.d.ts

@@ -0,0 +1,17 @@
+import { SxProps, Theme } from '@mui/material/styles';
+export type CardVariant = 'elevated' | 'outlined' | 'plain';
+export type CardPadding = 'none' | 'dense' | 'normal' | 'loose';
+export interface BuildCardSxArgs {
+    variant: CardVariant;
+    padding: CardPadding;
+    clickable: boolean;
+}
+/**
+ * Estilo base del Card (root). La props `sx` del consumer se compone encima
+ * junto al preset resuelto (en Card.tsx). Este builder solo se ocupa del
+ * variant + padding, para que siga siendo predecible.
+ */
+export declare function buildCardSx({ variant, padding, clickable, }: BuildCardSxArgs): SxProps<Theme>;
+export declare function buildCardHeaderSx(): SxProps<Theme>;
+export declare function buildCardBodySx(padding: CardPadding): SxProps<Theme>;
+export declare function buildCardFooterSx(): SxProps<Theme>;

package/dist/components/Card/index.d.ts

@@ -1 +1,4 @@
-export { default as Card } from './Card';
+export { Card, default } from './Card';
+export type { CardProps } from './Card';
+export type { CardVariant, CardPadding } from './Card.sx';
+export { buildCardSx, buildCardHeaderSx, buildCardBodySx, buildCardFooterSx, } from './Card.sx';

package/dist/components/Card.d.ts

@@ -1,2 +1,6 @@
 export * from './Card/index'
 export {}
+import _default from './Card/index'
+export default _default
+export * from './Card/index'
+export {}